diff --git a/src/common/HorizontalNavBar/HorizontalNavBar.js b/src/common/HorizontalNavBar/HorizontalNavBar.js
index 84bc8c2a1..ee2ea874c 100644
--- a/src/common/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/common/HorizontalNavBar/HorizontalNavBar.js
@@ -10,7 +10,7 @@ const NotificationsMenu = require('stremio/common/NavBar/NotificationsMenu');
 const NavMenu = require('stremio/common/NavBar/NavMenu');
 const styles = require('./styles');
 
-const HorizontalNavBar = React.memo(({ className, backButton, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, backButton, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -39,7 +39,7 @@ const HorizontalNavBar = React.memo(({ className, backButton, searchBar, addonsB
                 searchBar ?
                     <React.Fragment>
                         <div className={styles['spacing']} />
-                        <SearchBar className={styles['search-bar']} />
+                        <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
                         <div className={styles['spacing']} />
                     </React.Fragment>
                     :
@@ -77,6 +77,8 @@ HorizontalNavBar.displayName = 'HorizontalNavBar';
 
 HorizontalNavBar.propTypes = {
     className: PropTypes.string,
+    route: PropTypes.string,
+    query: PropTypes.string,
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
     addonsButton: PropTypes.bool,
diff --git a/src/common/NavBar/NavTabButton/NavTabButton.js b/src/common/NavBar/NavTabButton/NavTabButton.js
index e3809bf24..df08deccf 100644
--- a/src/common/NavBar/NavTabButton/NavTabButton.js
+++ b/src/common/NavBar/NavTabButton/NavTabButton.js
@@ -5,9 +5,9 @@ const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
-const NavTabButton = ({ className, icon, label, href, selected, direction, onClick }) => {
+const NavTabButton = ({ className, icon, label, href, selected, route, direction, onClick }) => {
     return (
-        <Button className={classnames(className, styles['nav-tab-button-container'], styles[`nav-tab-button-${direction}`], { 'selected': selected })} title={label} tabIndex={-1} href={href} direction={direction} onClick={onClick}>
+        <Button className={classnames(className, styles['nav-tab-button-container'], styles[`nav-tab-button-${direction}`], { 'selected': selected })} title={label} tabIndex={-1} href={href} route={route} direction={direction} onClick={onClick}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <Icon className={styles['icon']} icon={icon} />
@@ -30,6 +30,7 @@ NavTabButton.propTypes = {
     label: PropTypes.string,
     href: PropTypes.string,
     selected: PropTypes.bool,
+    route: PropTypes.string,
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
     onClick: PropTypes.func
 };
diff --git a/src/common/VerticalNavBar/VerticalNavBar.js b/src/common/VerticalNavBar/VerticalNavBar.js
index 06afe7a08..0252cb116 100644
--- a/src/common/VerticalNavBar/VerticalNavBar.js
+++ b/src/common/VerticalNavBar/VerticalNavBar.js
@@ -4,20 +4,22 @@ const classnames = require('classnames');
 const NavTabButton = require('stremio/common/NavBar/NavTabButton');
 const styles = require('./styles');
 
-const VerticalNavBar = React.memo(({ className, tabs }) => {
+const VerticalNavBar = React.memo(({ className, route, tabs }) => {
     return (
         <nav className={classnames(className, styles['nav-bar-container'])}>
             {
                 Array.isArray(tabs) && tabs.length > 0 ?
-                    tabs.map(({ href = '', icon = '', label = '', onClick }, index) => (
+                    tabs.map((tab, index) => (
                         <NavTabButton
                             key={index}
                             className={styles['nav-tab-button']}
-                            href={href}
-                            icon={icon}
-                            label={label}
+                            selected={tab.route === route}
+                            href={tab.href}
+                            icon={tab.icon}
+                            label={tab.label}
+                            route={tab.route}
                             direction={'vertical'}
-                            onClick={onClick}
+                            onClick={tab.onClick}
                         />
                     ))
                     :
diff --git a/storybook/stories/NavBar/VerticalNavBar/LongVerticalNavBar.js b/storybook/stories/NavBar/VerticalNavBar/LongVerticalNavBar.js
index 9e8e69c52..67dc3d76c 100644
--- a/storybook/stories/NavBar/VerticalNavBar/LongVerticalNavBar.js
+++ b/storybook/stories/NavBar/VerticalNavBar/LongVerticalNavBar.js
@@ -3,18 +3,18 @@ const { storiesOf } = require('@storybook/react');
 const VerticalNavBar = require('stremio/common/VerticalNavBar');
 
 const TABS = [
-    { label: 'Board', icon: 'ic_board' },
-    { label: 'Discover', icon: 'ic_discover' },
-    { label: 'Library', icon: 'ic_library' },
-    { label: 'Calendar', icon: 'ic_calendar' },
-    { label: 'Addons', icon: 'ic_addons' },
-    { label: 'Settings', icon: 'ic_settings' },
-    { label: 'Board', icon: 'ic_board' },
-    { label: 'Discover', icon: 'ic_discover' },
-    { label: 'Library', icon: 'ic_library' },
-    { label: 'Calendar', icon: 'ic_calendar' },
-    { label: 'Addons', icon: 'ic_addons' },
-    { label: 'Settings', icon: 'ic_settings' }
+    { route: 'board', label: 'Board', icon: 'ic_board' },
+    { route: 'discover', label: 'Discover', icon: 'ic_discover' },
+    { route: 'library', label: 'Library', icon: 'ic_library' },
+    { route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
+    { route: 'addons', label: 'Addons', icon: 'ic_addons' },
+    { route: 'settings', label: 'Settings', icon: 'ic_settings' },
+    { route: 'board', label: 'Board', icon: 'ic_board' },
+    { route: 'discover', label: 'Discover', icon: 'ic_discover' },
+    { route: 'library', label: 'Library', icon: 'ic_library' },
+    { route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
+    { route: 'addons', label: 'Addons', icon: 'ic_addons' },
+    { route: 'settings', label: 'Settings', icon: 'ic_settings' }
 ];
 
 storiesOf('NavBar', module).add('LongVerticalNavBar', () => (
diff --git a/storybook/stories/NavBar/VerticalNavBar/VerticalNavBar.js b/storybook/stories/NavBar/VerticalNavBar/VerticalNavBar.js
index d0f664b72..63124a14d 100644
--- a/storybook/stories/NavBar/VerticalNavBar/VerticalNavBar.js
+++ b/storybook/stories/NavBar/VerticalNavBar/VerticalNavBar.js
@@ -3,12 +3,12 @@ const { storiesOf } = require('@storybook/react');
 const VerticalNavBar = require('stremio/common/VerticalNavBar');
 
 const TABS = [
-    { label: 'Board', icon: 'ic_board' },
-    { label: 'Discover', icon: 'ic_discover' },
-    { label: 'Library', icon: 'ic_library' },
-    { label: 'Calendar', icon: 'ic_calendar' },
-    { label: 'Addons', icon: 'ic_addons' },
-    { label: 'Settings', icon: 'ic_settings' }
+    { route: 'board', label: 'Board', icon: 'ic_board' },
+    { route: 'discover', label: 'Discover', icon: 'ic_discover' },
+    { route: 'library', label: 'Library', icon: 'ic_library' },
+    { route: 'calendar', label: 'Calendar', icon: 'ic_calendar' },
+    { route: 'addons', label: 'Addons', icon: 'ic_addons' },
+    { route: 'settings', label: 'Settings', icon: 'ic_settings' }
 ];
 
 storiesOf('NavBar', module).add('VerticalNavBar', () => (