diff --git a/package-lock.json b/package-lock.json
index badb7a3c0..a440f29b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@sttm/web",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1178,9 +1178,9 @@
       "dev": true
     },
     "@sttm/banidb": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@sttm/banidb/-/banidb-2.2.0.tgz",
-      "integrity": "sha512-yBYSykWYxYEB3WL9UL8LfwgLp81BQ/id8o0W0Mzg03aq7vBjTNMtB5IxnyKkdxFMREtw9M2rwEUCZG7J4TZVLA=="
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@sttm/banidb/-/banidb-2.2.2.tgz",
+      "integrity": "sha512-ippvgcZf6kiRrLltrjj9mUpTnP3KaG1AINi1xraNx/24ib4lTXYxZLbK50OwvmyHVydcik+U9t7UaM6BWZMBVQ=="
     },
     "@types/babel__core": {
       "version": "7.1.2",
@@ -5435,9 +5435,9 @@
       "dev": true
     },
     "handlebars": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
-      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.3.tgz",
+      "integrity": "sha512-B0W4A2U1ww3q7VVthTKfh+epHx+q4mCt6iK+zEAzbMBpWQAwxCeKxEGpj/1oQTpzPXDNSOG7hmG14TsISH50yw==",
       "dev": true,
       "requires": {
         "neo-async": "^2.6.0",
@@ -11006,9 +11006,9 @@
       "dev": true
     },
     "set-value": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
-      "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
       "dev": true,
       "requires": {
         "extend-shallow": "^2.0.1",
@@ -12684,38 +12684,15 @@
       }
     },
     "union-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
-      "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
       "dev": true,
       "requires": {
         "arr-union": "^3.1.0",
         "get-value": "^2.0.6",
         "is-extendable": "^0.1.1",
-        "set-value": "^0.4.3"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "set-value": {
-          "version": "0.4.3",
-          "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
-          "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
-          "dev": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-extendable": "^0.1.1",
-            "is-plain-object": "^2.0.1",
-            "to-object-path": "^0.3.0"
-          }
-        }
+        "set-value": "^2.0.1"
       }
     },
     "uniq": {
diff --git a/package.json b/package.json
index e2ff55e1f..843be4462 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sttm/web",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Sevadaars are currently working hard to build a newer version of SikhiToTheMax website using modern web technologies.",
   "main": "index.js",
   "scripts": {
diff --git a/src/js/components/Baani.js b/src/js/components/Baani.js
index eb9a5aa4b..2029a6110 100644
--- a/src/js/components/Baani.js
+++ b/src/js/components/Baani.js
@@ -6,7 +6,7 @@ import Transliteration from './Transliteration';
 import BaaniLine from './BaaniLine';
 import { clickEvent, ACTIONS } from '../util/analytics';
 import { TEXTS, SHABAD_CONTENT_CLASSNAME } from '.././constants';
-import { copyToClipboard, showToast, shortenURL, makeSelection } from '../util';
+import { copyToClipboard, showToast, shortenURL } from '../util';
 
 import { translationMap, transliterationMap, getVerseId } from '@/util/api/shabad';
 
@@ -24,7 +24,7 @@ export default class Baani extends React.PureComponent {
 
   static propTypes = {
     gurbani: PropTypes.array.isRequired,
-    type: PropTypes.oneOf(['shabad', 'ang', 'hukamnama']).isRequired,
+    type: PropTypes.oneOf(['shabad', 'ang', 'hukamnama', 'sync']).isRequired,
     splitView: PropTypes.bool.isRequired,
     translationLanguages: PropTypes.array.isRequired,
     transliterationLanguages: PropTypes.array.isRequired,
@@ -35,6 +35,7 @@ export default class Baani extends React.PureComponent {
     fontSize: PropTypes.number.isRequired,
     fontFamily: PropTypes.string.isRequired,
     centerAlignGurbani: PropTypes.bool.isRequired,
+    showFullScreen: PropTypes.bool,
   };
 
   getShareLine = shabad => {
@@ -112,7 +113,6 @@ export default class Baani extends React.PureComponent {
     }
     const selectedDiv = e.currentTarget;
     if (window.getSelection().toString()) {
-      makeSelection(selectedDiv);
       const shareDiv = selectedDiv.querySelector('.share');
       shareDiv.classList.add('showShare');
     }
@@ -146,12 +146,53 @@ export default class Baani extends React.PureComponent {
       fontFamily,
       highlight,
       centerAlignGurbani,
+      showFullScreen,
     } = this.props;
 
     const disabledActions = ['ang', 'hukamnama'].includes(type)
       ? ['tweet']
       : ['openShabad', 'tweet'];
 
+    const getBaniLine = shabad => (
+      <BaaniLine
+        text={shabad.verse}
+        unicode={unicode}
+        shouldHighlight={showFullScreen ? false : highlight === parseInt(getVerseId(shabad), 10)}
+        larivaar={larivaar}
+        larivaarAssist={larivaarAssist}
+        fontSize={fontSize}
+        fontFamily={fontFamily}
+      />
+    );
+
+    const getTransliterations = shabad => transliterationLanguages.map(language => (
+      <Transliteration key={getVerseId(shabad) + language}>
+        {transliterationMap[language](shabad)}
+      </Transliteration>
+    ));
+
+    const getActions = shabad => (
+      <Actions
+        disabledActions={disabledActions}
+        shabad={shabad}
+        onFacebookClick={this.onFacebookClick(shabad)}
+        onCopyClick={this.onCopyClick(shabad)}
+      />
+    );
+
+    const getTranslations = shabad => translationLanguages.map(language => (
+      <Translation
+        key={getVerseId(shabad) + language}
+        type={language}
+        {...Translation.getTranslationProps({
+          translationMap,
+          language,
+          shabad,
+          unicode,
+        })}
+      />
+    ));
+
     const mixedViewMarkup = (
       <div className="mixed-view-baani">
         {gurbani.map(shabad => (
@@ -167,45 +208,35 @@ export default class Baani extends React.PureComponent {
                 : null
             }
           >
-            <BaaniLine
-              text={shabad.verse}
-              unicode={unicode}
-              shouldHighlight={highlight === parseInt(getVerseId(shabad), 10)}
-              larivaar={larivaar}
-              larivaarAssist={larivaarAssist}
-              fontSize={fontSize}
-              fontFamily={fontFamily}
-            />
-            {transliterationLanguages.map(language => (
-              <Transliteration key={getVerseId(shabad) + language}>
-                {transliterationMap[language](shabad)}
-              </Transliteration>
-            ))}
-
-            {translationLanguages.map(language => (
-              <Translation
-                key={getVerseId(shabad) + language}
-                type={language}
-                {...Translation.getTranslationProps({
-                  translationMap,
-                  language,
-                  shabad,
-                  unicode,
-                })}
-              />
-            ))}
-
-            <Actions
-              disabledActions={disabledActions}
-              shabad={shabad}
-              onFacebookClick={this.onFacebookClick(shabad)}
-              onCopyClick={this.onCopyClick(shabad)}
-            />
+            {getBaniLine(shabad)}
+            {getTransliterations(shabad)}
+            {getTranslations(shabad)}
+            {getActions(shabad)}
           </div>
         ))}
       </div>
     );
 
+    const fullScreenMarkup = (
+      <div className="full-screen-baani">
+        {gurbani.map(shabad => (
+          highlight === parseInt(getVerseId(shabad), 10) ?
+            <div
+              key={getVerseId(shabad)}
+              id={`line-${getVerseId(shabad)}`}
+              className="line"
+              onMouseUp={this.showShare}
+              onMouseDown={this.removeSelection}
+            >
+              {getBaniLine(shabad)}
+              {getTransliterations(shabad)}
+              {getTranslations(shabad)}
+              {getActions(shabad)}
+            </div> : ''
+        ))}
+      </div>
+    );
+
     const splitViewMarkup = (
       <div className="split-view-baani">
         <div className="split-view-baani-wrapper">
@@ -219,22 +250,8 @@ export default class Baani extends React.PureComponent {
                   : null
               }
             >
-              <BaaniLine
-                text={shabad.verse}
-                unicode={unicode}
-                shouldHighlight={highlight === parseInt(getVerseId(shabad), 10)}
-                larivaar={larivaar}
-                larivaarAssist={larivaarAssist}
-                fontSize={fontSize}
-                fontFamily={fontFamily}
-              />
-
-              <Actions
-                disabledActions={disabledActions}
-                shabad={shabad}
-                onFacebookClick={this.onFacebookClick(shabad)}
-                onCopyClick={this.onCopyClick(shabad)}
-              />
+              {getBaniLine(shabad)}
+              {getActions(shabad)}
             </div>
           ))}
         </div>
@@ -266,13 +283,23 @@ export default class Baani extends React.PureComponent {
       </div>
     );
 
+    const getMarkup = () => {
+      if (showFullScreen) {
+        return fullScreenMarkup;
+      } else if (splitView) {
+        return splitViewMarkup;
+      } else {
+        return mixedViewMarkup;
+      }
+    }
+
     return (
       <div
         className={`${SHABAD_CONTENT_CLASSNAME} ${
-          centerAlignGurbani ? ' center-align' : ''
-        }`}
+          centerAlignGurbani || showFullScreen ? ' center-align' : ''
+          }`}
       >
-        {splitView ? splitViewMarkup : mixedViewMarkup}
+        {getMarkup()}
       </div>
     );
   }
diff --git a/src/js/components/Breadcrumb/Breadcrumb.js b/src/js/components/Breadcrumb/Breadcrumb.js
index b317f801f..9b44d16bf 100644
--- a/src/js/components/Breadcrumb/Breadcrumb.js
+++ b/src/js/components/Breadcrumb/Breadcrumb.js
@@ -34,8 +34,8 @@ export default class BreadCrumb extends React.PureComponent {
                 {' › '}
               </React.Fragment>
             ) : (
-              <span className="breadcrumbLast">{title}</span>
-            )
+                <span key={`breadcrumbLast${index}`} className="breadcrumbLast">{title}</span>
+              )
           )}
       </h4>
     );
diff --git a/src/js/components/Controls.js b/src/js/components/Controls.js
index 3ea31c8d0..8876db57c 100644
--- a/src/js/components/Controls.js
+++ b/src/js/components/Controls.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import cx from 'classnames';
 import ShabadControls from './ShabadControls';
 import ShareButtons, { supportedMedia as _s } from './ShareButtons';
 import {
@@ -25,6 +26,8 @@ export const supportedMedia = _s;
 class Controls extends React.PureComponent {
   state = {
     showBorder: false,
+    lastScrollPos: 0,
+    showControls: true
   };
 
   componentDidMount() {
@@ -44,6 +47,29 @@ class Controls extends React.PureComponent {
       if (this.mounted && this.state.showBorder === false) {
         this.setState({ showBorder: true });
       }
+
+      const currentScroll = this.$wrapper.offsetTop;
+      const { showDisplayOptions, showFontOptions } = this.props;
+      this.setState(prevState => {
+        const { showControls, lastScrollPos } = prevState;
+
+        if (lastScrollPos > currentScroll) {
+          return {
+            lastScrollPos: currentScroll,
+            showControls: !showControls
+              ? true
+              : showControls
+          };
+        }
+        return {
+          lastScrollPos: currentScroll,
+          showControls: showControls &&
+            !showDisplayOptions &&
+            !showFontOptions ?
+            false :
+            showControls
+        };
+      });
     } else {
       if (this.mounted && this.state.showBorder === true) {
         this.setState({ showBorder: false });
@@ -54,10 +80,17 @@ class Controls extends React.PureComponent {
   setRef = node => (this.$wrapper = node);
 
   render() {
+    const { showBorder, showControls } = this.state;
+    const classNames = cx({
+      'no-select': true,
+      'with-border': showBorder,
+      'show-controls': showControls,
+      'hide-controls': !showControls,
+    });
     return (
       <div
         id="controls-wrapper"
-        className={`no-select ${this.state.showBorder ? 'with-border' : ''}`}
+        className={classNames}
         ref={this.setRef}
       >
         <ShareButtons {...this.props} />
diff --git a/src/js/components/FootNav.js b/src/js/components/FootNav.js
index 0762cdedc..dc9943dbc 100644
--- a/src/js/components/FootNav.js
+++ b/src/js/components/FootNav.js
@@ -32,18 +32,18 @@ class FootNav extends React.PureComponent {
               <span>{type === 'hukamnama' ? dateMath.expand(nav.previous, false) : 'Previous'}</span>
             </Link>
           </div>
-        ) : (
-            <div className="shabad-nav left disabled-nav">
-              <a>
-                {type === 'hukamnama' ? (
-                  <Hour24 direction='previous' />
-                ) : (
-                    <Chevron direction={Chevron.DIRECTIONS.LEFT} />
-                  )}
-                <span>{type === 'hukamnama' ? '' : 'Previous'}</span>
-              </a>
-            </div>
-          )}
+        ) : type !== 'sync' ? (
+          <div className="shabad-nav left disabled-nav">
+            <a>
+              {type === 'hukamnama' ? (
+                <Hour24 direction='previous' />
+              ) : (
+                  <Chevron direction={Chevron.DIRECTIONS.LEFT} />
+                )}
+              <span>{type === 'hukamnama' ? '' : 'Previous'}</span>
+            </a>
+          </div>
+        ) : ''}
         {nav.next ? (
           <div className="shabad-nav right">
             <a role="button" aria-label="next" onClick={this.handleSaveAng}>
@@ -55,18 +55,18 @@ class FootNav extends React.PureComponent {
                 )}
             </a>
           </div>
-        ) : (
-            <div className="shabad-nav right disabled-nav">
-              <a>
-                <span>{type === 'hukamnama' ? '' : 'Next'}</span>
-                {type === 'hukamnama' ? (
-                  <Hour24 direction='next' />
-                ) : (
-                    <Chevron direction={Chevron.DIRECTIONS.RIGHT} />
-                  )}
-              </a>
-            </div>
-          )}
+        ) : type !== 'sync' ? (
+          <div className="shabad-nav right disabled-nav">
+            <a>
+              <span>{type === 'hukamnama' ? '' : 'Next'}</span>
+              {type === 'hukamnama' ? (
+                <Hour24 direction='next' />
+              ) : (
+                  <Chevron direction={Chevron.DIRECTIONS.RIGHT} />
+                )}
+            </a>
+          </div>
+        ) : ''}
       </div>
     );
   }
diff --git a/src/js/components/HeaderMenu.js b/src/js/components/HeaderMenu.js
index f3b8d58ed..b6201a734 100644
--- a/src/js/components/HeaderMenu.js
+++ b/src/js/components/HeaderMenu.js
@@ -45,12 +45,12 @@ export default class Menu extends React.PureComponent {
               Index
             </Link>
           </li>
-          {/* // TODO Enable when desktop feature is ready
-          <li>
-            <Link to="/sync" onClick={toggleMenu}>
-              Sync
+          {/*
+            <li>
+              <Link to="/sync" onClick={toggleMenu}>
+                Sync
             </Link>
-          </li>
+            </li>
           */}
           <li className="close">
             <span role="button" aria-label="Close menu" onClick={closeMenu}>
diff --git a/src/js/components/Larivaar/Word.tsx b/src/js/components/Larivaar/Word.tsx
index 128b4b8fd..2eb0b0849 100644
--- a/src/js/components/Larivaar/Word.tsx
+++ b/src/js/components/Larivaar/Word.tsx
@@ -1,11 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { fixLarivaarUnicode, fixLarivaarGurmukhiFont } from './util';
-import {
-  HIGHLIGHTED_SEARCH_COLOR,
-  LARIVAAR_ASSIST_COLOR,
-  NORMAL_SEARCH_COLOR,
-} from '@/constants';
 
 export interface ILarivaarWordProps {
   word: string;
@@ -35,23 +30,25 @@ function LarivaarWord(props: ILarivaarWordProps) {
   return (
     <>
       {segments.map((item, i) => {
-        let color;
-        let akharClass;
+        let akharClass = '';
+        let assistLarivaar;
+
+        if (index % 2 === 1) {
+          akharClass += 'larivaar-word';
+        }
 
         // If this isn't a search result
         if (!(startIndex !== undefined && endIndex !== undefined)) {
-          color =
-            larivaarAssist && index % 2 === 1 ? LARIVAAR_ASSIST_COLOR : '';
+          assistLarivaar = larivaarAssist && index % 2 === 1;
         } else {
           if (highlight || (index >= startIndex && index < endIndex)) {
-            akharClass = 'search-highlight-word';
-          }
-
-          if (larivaarAssist && index % 2 === 1) {
-            color = LARIVAAR_ASSIST_COLOR;
+            akharClass += ' search-highlight-word';
           }
+          assistLarivaar = larivaarAssist && index % 2 === 1;
         }
 
+        akharClass += assistLarivaar ? ' larivaar-assist-word' : '';
+
         const key = `${index}.${i}`;
 
         if (item.includes('´')) {
@@ -65,7 +62,7 @@ function LarivaarWord(props: ILarivaarWordProps) {
         }
 
         return (
-          <span key={key} className={akharClass} style={{ color }}>
+          <span key={key} className={akharClass}>
             <span>
               {item}
               <wbr />
diff --git a/src/js/components/Larivaar/__tests__/__snapshots__/Larivaar.test.tsx.snap b/src/js/components/Larivaar/__tests__/__snapshots__/Larivaar.test.tsx.snap
index 41031135b..272d93498 100644
--- a/src/js/components/Larivaar/__tests__/__snapshots__/Larivaar.test.tsx.snap
+++ b/src/js/components/Larivaar/__tests__/__snapshots__/Larivaar.test.tsx.snap
@@ -17,31 +17,41 @@ exports[`<Larivaar /> renders children when disabled 1`] = `
 
 exports[`<Larivaar /> renders concatenated children when enabled 1`] = `
 <div>
-  <span>
+  <span
+    class=""
+  >
     <span>
       V
       <wbr />
     </span>
   </span>
-  <span>
+  <span
+    class=""
+  >
     <span>
       a
       <wbr />
     </span>
   </span>
-  <span>
+  <span
+    class=""
+  >
     <span>
       h
       <wbr />
     </span>
   </span>
-  <span>
+  <span
+    class="larivaar-word"
+  >
     <span>
       Gu
       <wbr />
     </span>
   </span>
-  <span>
+  <span
+    class="larivaar-word"
+  >
     <span>
       ru
       <wbr />
@@ -67,31 +77,41 @@ Object {
       </span>
     </div>
     <div>
-      <span>
+      <span
+        class=""
+      >
         <span>
           V
           <wbr />
         </span>
       </span>
-      <span>
+      <span
+        class=""
+      >
         <span>
           a
           <wbr />
         </span>
       </span>
-      <span>
+      <span
+        class=""
+      >
         <span>
           h
           <wbr />
         </span>
       </span>
-      <span>
+      <span
+        class="larivaar-word"
+      >
         <span>
           Gu
           <wbr />
         </span>
       </span>
-      <span>
+      <span
+        class="larivaar-word"
+      >
         <span>
           ru
           <wbr />
@@ -99,26 +119,32 @@ Object {
       </span>
     </div>
     <div>
-      <span>
+      <span
+        class=""
+      >
         <span>
           V
           <wbr />
         </span>
       </span>
-      <span>
+      <span
+        class=""
+      >
         <span>
           a
           <wbr />
         </span>
       </span>
-      <span>
+      <span
+        class=""
+      >
         <span>
           h
           <wbr />
         </span>
       </span>
       <span
-        style="color: rgb(243, 156, 29);"
+        class="larivaar-word larivaar-assist-word"
       >
         <span>
           Gu
@@ -126,7 +152,7 @@ Object {
         </span>
       </span>
       <span
-        style="color: rgb(243, 156, 29);"
+        class="larivaar-word larivaar-assist-word"
       >
         <span>
           ru
@@ -136,26 +162,32 @@ Object {
     </div>
   </body>,
   "container": <div>
-    <span>
+    <span
+      class=""
+    >
       <span>
         V
         <wbr />
       </span>
     </span>
-    <span>
+    <span
+      class=""
+    >
       <span>
         a
         <wbr />
       </span>
     </span>
-    <span>
+    <span
+      class=""
+    >
       <span>
         h
         <wbr />
       </span>
     </span>
     <span
-      style="color: rgb(243, 156, 29);"
+      class="larivaar-word larivaar-assist-word"
     >
       <span>
         Gu
@@ -163,7 +195,7 @@ Object {
       </span>
     </span>
     <span
-      style="color: rgb(243, 156, 29);"
+      class="larivaar-word larivaar-assist-word"
     >
       <span>
         ru
diff --git a/src/js/components/Meta.js b/src/js/components/Meta.js
index 77dc009fa..19e98053a 100644
--- a/src/js/components/Meta.js
+++ b/src/js/components/Meta.js
@@ -6,6 +6,7 @@ import { isFalsy, toAngURL, toNavURL, saveAng, shouldSaveAng, dateMath } from '.
 import Chevron from './Icons/Chevron';
 import Hour24 from './Icons/Hour24';
 import { withRouter } from 'react-router-dom';
+import { getSourceId, getWriter, getRaag } from '@/util/api/shabad';
 
 /**
  *
@@ -75,21 +76,21 @@ class Meta extends React.PureComponent {
                   <span>{dateMath.expand(nav.previous, false)}</span>
                 </div>
               ) : (
-                <Chevron direction={Chevron.DIRECTIONS.LEFT} />
-              )}
+                  <Chevron direction={Chevron.DIRECTIONS.LEFT} />
+                )}
             </Link>
           </div>
-        ) : (
+        ) : type !== 'sync' ? (
           <div className="shabad-nav left disabled-nav">
             <a>
               {type === 'hukamnama' ? (
                 <Hour24 direction='previous' />
               ) : (
-                <Chevron direction={Chevron.DIRECTIONS.LEFT} />
-              )}
+                  <Chevron direction={Chevron.DIRECTIONS.LEFT} />
+                )}
             </a>
           </div>
-        )}
+        ) : ''}
         <div className="meta">
           {['hukamnama'].includes(type) && (
             <h4>
@@ -100,49 +101,51 @@ class Meta extends React.PureComponent {
           )}
           <h4 className="gurbani-font">
             <Item>
-              {info.raag &&
-                info.raag.gurmukhi &&
-                info.raag.gurmukhi !== 'null' &&
-                info.raag.gurmukhi}
+              {getRaag(info) &&
+                getRaag(info)['gurmukhi'] &&
+                getRaag(info)['gurmukhi'] !== 'null' &&
+                getRaag(info)['gurmukhi']}
             </Item>
-            <Item>{info.writer && info.writer.gurmukhi}</Item>
+            <Item>{getWriter(info) && getWriter(info)['gurmukhi']}</Item>
             <Item>{info.source.gurmukhi}</Item>
-            <Item last>
-              {info.pageno !== null && (
+            {info.source.pageNo !== null && (
+              <Item last>
                 <Link
                   to={toAngURL({
                     ang: info.source.pageNo,
-                    source: info.source.sourceId,
+                    source: getSourceId(info),
                   })}
                 >
-                  {info.source.sourceId == 'G' ? 'AMg' : 'pMnw'}{' '}
+                  {getSourceId(info) == 'G' ? 'AMg' : 'pMnw'}{' '}
                   {info.source.pageNo}
                 </Link>
-              )}
-            </Item>
+              </Item>
+            )}
           </h4>
 
           {shouldShowEnglishInHeader && (
             <h4>
               <Item>
-                {info.raag &&
-                  info.raag.english &&
-                  info.raag.english !== 'null' &&
-                  info.raag.english}
+                {getRaag(info) &&
+                  getRaag(info)['english'] &&
+                  getRaag(info)['english'] !== 'null' &&
+                  getRaag(info)['english']}
               </Item>
-              <Item>{info.writer && info.writer.english}</Item>
+              <Item>{getWriter(info) && getWriter(info)['english']}</Item>
               <Item>{info.source.english}</Item>
-              <Item last>
-                <Link
-                  to={toAngURL({
-                    ang: info.source.pageNo,
-                    source: info.source.sourceId,
-                  })}
-                >
-                  {info.source.sourceId == 'G' ? 'Ang' : 'Pannaa'}{' '}
-                  {info.source.pageNo}
-                </Link>
-              </Item>
+              {info.source.pageNo !== null && (
+                <Item last>
+                  <Link
+                    to={toAngURL({
+                      ang: info.source.pageNo,
+                      source: getSourceId(info),
+                    })}
+                  >
+                    {getSourceId(info) == 'G' ? 'Ang' : 'Pannaa'}{' '}
+                    {info.source.pageNo}
+                  </Link>
+                </Item>
+              )}
             </h4>
           )}
         </div>
@@ -156,21 +159,21 @@ class Meta extends React.PureComponent {
                   <span>{dateMath.expand(nav.next, false)}</span>
                 </div>
               ) : (
-                <Chevron direction={Chevron.DIRECTIONS.RIGHT} />
-              )}
+                  <Chevron direction={Chevron.DIRECTIONS.RIGHT} />
+                )}
             </a>
           </div>
-        ) : (
+        ) : type !== 'sync' ? (
           <div className="shabad-nav right disabled-nav">
             <a>
               {type === 'hukamnama' ? (
                 <Hour24 direction='next' />
               ) : (
-                <Chevron direction={Chevron.DIRECTIONS.RIGHT} />
-              )}
+                  <Chevron direction={Chevron.DIRECTIONS.RIGHT} />
+                )}
             </a>
           </div>
-        )}
+        ) : ''}
       </div>
     );
   }
diff --git a/src/js/components/SearchForm.js b/src/js/components/SearchForm.js
index f3228d48c..35e04e033 100644
--- a/src/js/components/SearchForm.js
+++ b/src/js/components/SearchForm.js
@@ -266,9 +266,9 @@ export default class SearchForm extends React.PureComponent {
       this.setState(
         {
           type: parseInt(value, 10),
-          source: parseInt(value, 10) === SEARCH_TYPES['ANG'] && 
-                  !Object.keys(SOURCES_WITH_ANG).includes(this.state.source) ?
-                   'G' : this.state.source,
+          source: parseInt(value, 10) === SEARCH_TYPES['ANG'] &&
+            !Object.keys(SOURCES_WITH_ANG).includes(this.state.source) ?
+            'G' : this.state.source,
           query: this.state.query,
           shouldSubmit:
             this.props.submitOnChangeOf.includes('type') &&
@@ -280,6 +280,10 @@ export default class SearchForm extends React.PureComponent {
             LOCAL_STORAGE_KEY_FOR_SEARCH_TYPE,
             this.state.type
           );
+          localStorage.setItem(
+            LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE,
+            this.state.source
+          );
           requestAnimationFrame(this.beginPlaceholderAnimation);
         }
       )
diff --git a/src/js/components/ShabadContent/ShabadContent.js b/src/js/components/ShabadContent/ShabadContent.js
index f7ed0f2ca..d055a7943 100644
--- a/src/js/components/ShabadContent/ShabadContent.js
+++ b/src/js/components/ShabadContent/ShabadContent.js
@@ -77,6 +77,7 @@ class Shabad extends React.PureComponent {
     fontSize: PropTypes.number.isRequired,
     fontFamily: PropTypes.string.isRequired,
     centerAlignGurbani: PropTypes.bool.isRequired,
+    showFullScreen: PropTypes.bool,
   };
 
   render() {
@@ -97,6 +98,7 @@ class Shabad extends React.PureComponent {
         fontSize,
         fontFamily,
         centerAlignGurbani,
+        showFullScreen,
       },
       handleEmbed,
       handleCopyAll,
@@ -146,6 +148,7 @@ class Shabad extends React.PureComponent {
               translationLanguages={translationLanguages}
               transliterationLanguages={transliterationLanguages}
               centerAlignGurbani={centerAlignGurbani}
+              showFullScreen={showFullScreen}
             />
 
             {this.props.hideMeta === false && (
diff --git a/src/js/components/ShabadControls.js b/src/js/components/ShabadControls.js
index f73d574aa..00aaeb3b5 100644
--- a/src/js/components/ShabadControls.js
+++ b/src/js/components/ShabadControls.js
@@ -84,7 +84,7 @@ export default class ShabadControls extends React.PureComponent {
             onClick={toggleDisplayOptions}
           >
             <TelevisionIcon />
-            <span>{TEXTS.DISPLAY}</span>
+            <span className='display-options-label'>{TEXTS.DISPLAY}</span>
           </a>
           <a
             className={`font-options-toggle shabad-controller-toggle ${
@@ -93,14 +93,14 @@ export default class ShabadControls extends React.PureComponent {
             onClick={toggleFontOptions}
           >
             <SlidersIcon />
-            <span>{TEXTS.FONT}</span>
+            <span className='display-options-label'>{TEXTS.FONT}</span>
           </a>
           <a
             className={`shabad-controller-toggle ${larivaar ? 'active' : ''}`}
             onClick={toggleLarivaarOption}
           >
             <span className="custom-fa">ੳਅ</span>
-            <span>{TEXTS.LARIVAAR}</span>
+            <span className='display-options-label'>{TEXTS.LARIVAAR}</span>
           </a>
           {larivaar && (
             <a
@@ -110,7 +110,7 @@ export default class ShabadControls extends React.PureComponent {
               onClick={toggleLarivaarAssistOption}
             >
               <span className="custom-fa custom-fa-assist">ੳ</span>
-              <span>{TEXTS.ASSIST}</span>
+              <span className='display-options-label'>{TEXTS.ASSIST}</span>
             </a>
           )}
         </div>
diff --git a/src/js/constants.ts b/src/js/constants.ts
index 1ca7182e3..1ce5df129 100644
--- a/src/js/constants.ts
+++ b/src/js/constants.ts
@@ -45,6 +45,7 @@ export const LOCAL_STORAGE_KEY_FOR_DARK_MODE = 'darkMode';
 export const LOCAL_STORAGE_KEY_FOR_PREVIOUSLY_READ_ANG = 'previouslyReadAng';
 export const LOCAL_STORAGE_KEY_FOR_RELEASE = 'release';
 export const LOCAL_STORAGE_KEY_FOR_CENTER_ALIGN_VIEW = 'centerAlignView';
+export const LOCAL_STORAGE_KEY_FOR_SYNC_CODE = 'previous-sync';
 
 export const PLACEHOLDERS = {
   [SEARCH_TYPES.FIRST_LETTERS]: ['jmTAq'], // first letters
diff --git a/src/js/features/reducers/index.js b/src/js/features/reducers/index.js
index eaeb36084..4a56e981f 100644
--- a/src/js/features/reducers/index.js
+++ b/src/js/features/reducers/index.js
@@ -190,7 +190,7 @@ export default function reducer(state, action) {
       });
       saveToLocalStorage(
         LOCAL_STORAGE_KEY_FOR_TRANSLATION_LANGUAGES,
-        JSON.stringify(translationLanguages.payload)
+        JSON.stringify(translationLanguages)
       );
       return {
         ...state,
diff --git a/src/js/pages/Sync/Viewer.js b/src/js/pages/Sync/Viewer.js
index 4417edae2..c00aea85a 100644
--- a/src/js/pages/Sync/Viewer.js
+++ b/src/js/pages/Sync/Viewer.js
@@ -23,6 +23,7 @@ export default class Viewer extends React.PureComponent {
   static propTypes = {
     namespaceString: PropTypes.string.isRequired,
     data: PropTypes.object.isRequired,
+    showFullScreen: PropTypes.bool,
   };
 
   state = {
@@ -72,7 +73,7 @@ export default class Viewer extends React.PureComponent {
 
   render() {
     const {
-      props: { namespaceString, data },
+      props: { namespaceString, data, showFullScreen },
       state: { response, type },
     } = this;
 
@@ -88,22 +89,24 @@ export default class Viewer extends React.PureComponent {
         return (
           <ShabadContent
             type="sync"
-            highlight={data.highlight}
+            highlight={parseInt(data.highlight)}
             gurbani={
               versesToGurbani(
                 response.verses.filter(v => v.mangalPosition !== 'above'),
                 data.baniLength)
             }
             info={response.baniInfo}
+            showFullScreen={showFullScreen}
           />
         )
       } else if (type === SYNC_TYPES.SHABAD) {
         return (
           <ShabadContent
             type="sync"
-            highlight={data.highlight}
+            highlight={parseInt(data.highlight)}
             gurbani={response.verses}
             info={response.shabadInfo}
+            showFullScreen={showFullScreen}
           />
         )
       } else if (type === SYNC_TYPES.CEREMONY) {
diff --git a/src/js/pages/Sync/index.js b/src/js/pages/Sync/index.js
index b50229c5b..3df911bae 100644
--- a/src/js/pages/Sync/index.js
+++ b/src/js/pages/Sync/index.js
@@ -1,9 +1,10 @@
 /* globals SYNC_API_URL */
 import React from 'react';
-import { TEXTS } from '../../constants';
+import { TEXTS, LOCAL_STORAGE_KEY_FOR_SYNC_CODE } from '../../constants';
 import Viewer from './Viewer';
 import { showToast } from '../../util';
 import BreadCrumb from '../../components/Breadcrumb';
+import { saveToLocalStorage, getStringFromLocalStorage } from '@/util'
 
 /**
  *
@@ -31,6 +32,7 @@ export default class Sync extends React.PureComponent {
     namespaceString: '',
     error: null,
     data: {},
+    showFullScreen: false,
   };
 
   /**
@@ -56,14 +58,14 @@ export default class Sync extends React.PureComponent {
                   <p>Sync Mode</p>
                   <p className='sync-id'>{this.state.namespaceString}</p>
                 </div>
-                {/*<div className='full-screen'>
+                {<div className='full-screen'>
                   <span>Full screen</span>
                   <input type='checkbox'
                     id='fullscreen-control'
                     className="toggle-checkbox"
                     onChange={this.fullScreenView} />
                   <label className="toggle-label" htmlFor='fullscreen-control'></label>
-                </div>*/}
+                </div>}
                 <div className='exit-button'>
                   <button onClick={this.stopSync}>Exit</button>
                 </div>
@@ -71,15 +73,15 @@ export default class Sync extends React.PureComponent {
               <Viewer {...this.state} />
             </div>
           ) : (
-              <Sync.Form onSubmit={this.handleSubmit} error={error} />
+              <Sync.Form onSubmit={this.handleSubmit} error={error} getCode={this.getPrevCode} />
             )}
         </div>
       </div>
     );
   }
 
-  fullScreenView = () => {
-    console.log("You changed something");
+  fullScreenView = (event) => {
+    this.setState({ showFullScreen: event.currentTarget.checked });
   }
 
   stopSync = () => {
@@ -113,13 +115,15 @@ export default class Sync extends React.PureComponent {
     window.removeEventListener('beforeunload', this._alertOnExit);
   }
 
+  getPrevCode = () => getStringFromLocalStorage(LOCAL_STORAGE_KEY_FOR_SYNC_CODE);
+
   /**
    * Functional Form Component
    *
    * @static
    * @memberof Sync
    */
-  static Form = ({ onSubmit, error }) => (
+  static Form = ({ onSubmit, error, getCode }) => (
     <React.Fragment>
       <p>{TEXTS.SYNC_DESCRIPTION}</p>
       {error && <h5 className="sync-form-error">{TEXTS.SYNC_ERROR}</h5>}
@@ -137,9 +141,23 @@ export default class Sync extends React.PureComponent {
           type="text"
           placeholder="Enter code. Eg. ABC-XYZ"
           pattern="[A-Z,a-z]{3}-[A-Z,a-z]{3}"
+          onKeyUp={e => {
+            const typedValue = e.currentTarget.value;
+            const typedChar = e.key;
+            const parsedValue = typedValue.match('^[A-Z,a-z]{3}');
+            const d = parsedValue ? parsedValue[0] === typedValue : false;
+            if (d && typedChar !== 'Backspace') {
+              e.currentTarget.value = typedValue + '-';
+            }
+          }}
         />
         <button className="sync-form--button">Connect</button>
       </form>
+      {getCode() ? (
+        <button className="reconnect-btn hollow button secondary"
+          onClick={() => { onSubmit(getCode()) }}>Reconnect to {getCode()}</button>
+      ) : ''}
+
     </React.Fragment>
   );
 
@@ -164,6 +182,8 @@ export default class Sync extends React.PureComponent {
             'toast-notification-green'
           );*/
 
+          saveToLocalStorage(LOCAL_STORAGE_KEY_FOR_SYNC_CODE, code);
+
           if (window.io !== undefined) {
             this._socket = window.io(`${SYNC_API_URL}${namespaceString}`);
 
diff --git a/src/js/util/api/shabad.js b/src/js/util/api/shabad.js
index a7ccab243..8ccf60174 100644
--- a/src/js/util/api/shabad.js
+++ b/src/js/util/api/shabad.js
@@ -28,13 +28,13 @@ export const transliterationMap = {
 };
 
 export const getRaag = (shabad) => ({
-  english: shabad.raag.english,
-  gurmukhi: shabad.raag.gurmukhi,
-  unicode: shabad.raag.unicode,
+  english: shabad.raag ? shabad.raag.english : '',
+  gurmukhi: shabad.raag ? shabad.raag.gurmukhi : '',
+  unicode: shabad.raag ? shabad.raag.unicode : '',
 });
 
 export const getWriter = (shabad) => ({
-  english: shabad.writer.english,
-  gurmukhi: shabad.writer.gurmukhi,
-  unicode: shabad.writer.unicode,
+  english: shabad.writer ? shabad.writer.english : '',
+  gurmukhi: shabad.writer ? shabad.writer.gurmukhi : '',
+  unicode: shabad.writer ? shabad.writer.unicode : '',
 });
diff --git a/src/scss/_display-controls.scss b/src/scss/_display-controls.scss
index 21d1140ba..39a164a8d 100644
--- a/src/scss/_display-controls.scss
+++ b/src/scss/_display-controls.scss
@@ -1,11 +1,15 @@
 #controls-wrapper {
+  align-items: center;
   background-color: $sttm-dark-white;
-  margin: 0;
-  padding: 0.5rem 0 2px;
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  padding: 0.5rem 0 0 3rem;
   position: -webkit-sticky;
   position: sticky;
-  top: calc(-16px - 2em);
-  transition: box-shadow 0.5s;
+  top: 0;
+  transition: transform 0.2s;
   z-index: 1;
 
   .dark-mode & {
@@ -17,17 +21,22 @@
     max-width: 75rem;
   }
 
+  &.show-controls {
+    transform: rotateX(0deg);
+  }
+
+  &.hide-controls {
+    transform: rotateX(90deg) perspective(500px);
+    transform-origin: top;
+  }
+
   > div {
     margin-bottom: 0.5rem;
-    padding: 0 1rem;
   }
 
-  @media screen and (min-width: 46em) {
-    top: 0;
-
-    > div {
-      padding: 0 2rem 0 3rem;
-    }
+  @media screen and (max-width: 46em) {
+    padding-left: 1em;
+    top: calc(-16px - 2em);
   }
 }
 
@@ -46,12 +55,12 @@
 
 .display-options,
 .font-options {
-  align-content: flex-start;
   animation: flip-open 0.25s;
   background-color: $sttm-lighter-grey;
   display: flex;
   flex-wrap: wrap;
-  margin: 0 auto;
+  margin: 0 auto 0.5rem 0;
+  padding: 0 2rem 0 3rem;
   width: calc(100% - 2rem);
 
   input[type='range'] {
@@ -71,10 +80,6 @@
   .dark-mode & {
     background-color: $sttm-lighter-black;
   }
-
-  @media screen and (min-width: 46em) {
-    width: calc(100% - 5rem);
-  }
 }
 
 .display-options-toggle span,
@@ -89,13 +94,18 @@
 
 #shabad-controllers {
   display: flex;
-  margin: 0.25rem auto;
+  flex-grow: 1;
+  height: 32px;
   overflow-x: auto;
   white-space: nowrap;
 
   .dark-mode & {
     background-image:
-      linear-gradient(to right, $sttm-light-black, $sttm-light-black),
+      linear-gradient(
+        to right,
+        $sttm-light-black,
+        $sttm-light-black
+      ),
       linear-gradient(to right, $sttm-light-black, $sttm-light-black),
       linear-gradient(to right, $sttm-black, $sttm-lighter-black),
       linear-gradient(to left, $sttm-black, $sttm-lighter-black);
@@ -121,7 +131,10 @@
 
   svg {
     fill: $sttm-light-black;
-    margin-right: 0.5em;
+
+    @media screen and (min-width: 30em) {
+      margin-right: 0.5em;
+    }
   }
 
   .dark-mode & {
@@ -167,6 +180,12 @@
       content: 'ਅ';
     }
   }
+
+  .display-options-label {
+    @media screen and (max-width: 30em) {
+      display: none;
+    }
+  }
 }
 
 .display-option-content {
diff --git a/src/scss/_results.scss b/src/scss/_results.scss
index 052a62b62..2a14f82be 100644
--- a/src/scss/_results.scss
+++ b/src/scss/_results.scss
@@ -1,3 +1,7 @@
+.larivaar-assist-word {
+  color: #f39c1d;
+}
+
 .search-results {
   margin: 0.5rem 0;
 }
@@ -24,6 +28,10 @@
       }
     }
 
+    .larivaar-assist-word {
+      color: #f39c1d;
+    }
+
     .dark-mode & {
       color: $sttm-light-blue-60;
     }
@@ -45,6 +53,12 @@
   }
 }
 
+.larivaar:hover {
+  > .larivaar-word {
+    color: #f39c1d;
+  }
+}
+
 .load-more {
   border-bottom: 1px solid $sttm-lighter-grey;
   display: flex;
diff --git a/src/scss/_shabad-page.scss b/src/scss/_shabad-page.scss
index a351eaa32..0353c0323 100644
--- a/src/scss/_shabad-page.scss
+++ b/src/scss/_shabad-page.scss
@@ -188,6 +188,16 @@ blockquote {
       position: relative;
     }
   }
+
+  .full-screen-baani {
+    padding: 60px 10px;
+
+    .line {
+      div {
+        padding-bottom: 10px;
+      }
+    }
+  }
 }
 
 @media screen and (min-width: 350px) {
diff --git a/src/scss/_sharing.scss b/src/scss/_sharing.scss
index 5b61da188..8d66a7da0 100644
--- a/src/scss/_sharing.scss
+++ b/src/scss/_sharing.scss
@@ -3,7 +3,6 @@
 */
 #share-menu {
   border-radius: 2px;
-  float: right;
   height: calc(10px + 2em);
   margin-bottom: 0.5rem;
   margin-right: 35px;
@@ -18,14 +17,13 @@
     }
   }
 
-  @media screen and (max-width: 45.999999em) {
+  @media screen and (max-width: 46em) {
     margin-right: 0 !important;
     padding: 0 !important;
   }
 }
 
 .share-buttons {
-  float: right;
   list-style: none;
   margin: auto -20px;
   padding: 5px 0;
@@ -51,7 +49,6 @@
   }
 
   @media screen and (max-width: 45.999999em) {
-    float: none !important;
     margin: auto !important;
     overflow: hidden;
     text-align: center;
diff --git a/src/scss/_sync.scss b/src/scss/_sync.scss
index 187c5f6cf..354c62f48 100644
--- a/src/scss/_sync.scss
+++ b/src/scss/_sync.scss
@@ -143,6 +143,11 @@
   }
 }
 
+.reconnect-btn {
+  display: block;
+  margin: auto;
+}
+
 @media screen and (max-width: 46em) {
   .sync-controls {
     margin: 1rem;