diff --git a/images/stremio_symbol.png b/images/stremio_symbol.png
index 11093da31..28d3ccb4e 100644
Binary files a/images/stremio_symbol.png and b/images/stremio_symbol.png differ
diff --git a/src/App/styles.less b/src/App/styles.less
index 2e9a96014..2c883bae4 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -17,14 +17,17 @@
     --landscape-shape-ratio: 0.5625;
     --poster-shape-ratio: 1.464;
     --scroll-bar-size: 6px;
-    --horizontal-nav-bar-size: 4rem;
-    --vertical-nav-bar-size: 5.2rem;
+    --horizontal-nav-bar-size: 5.5rem;
+    --vertical-nav-bar-size: 6rem;
     --focus-outline-size: 2px;
     --color-facebook: #4267b2;
     --color-twitter: #1DA1F2;
     --color-placeholder: #60606080;
     --color-placeholder-text: @color-surface-50;
     --color-placeholder-background: @color-surface-dark5-20;
+    --primary-foreground-color: rgba(255, 255, 255, 1);
+    --primary-overlay-color: rgba(255, 255, 255, 0.1);
+    --primary-accent-color: rgb(123, 91, 245);
 }
 
 * {
diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
index ff1c0cc8a..2deb5f76b 100644
--- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -45,36 +45,36 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                     :
                     null
             }
-            <div className={styles['spacing']} />
             {
                 searchBar ?
                     <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
                     :
                     null
             }
-            <div className={styles['spacing']} />
-            {
-                addonsButton ?
-                    <Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
-                        <Icon className={styles['icon']} name={'addons'} />
-                    </Button>
-                    :
-                    null
-            }
-            {
-                fullscreenButton ?
-                    <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
-                        <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
-                    </Button>
-                    :
-                    null
-            }
-            {
-                navMenu ?
-                    <NavMenu renderLabel={renderNavMenuLabel} />
-                    :
-                    null
-            }
+            <div className={styles['buttons-container']}>
+                {
+                    addonsButton ?
+                        <Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
+                            <Icon className={styles['icon']} name={'addons'} />
+                        </Button>
+                        :
+                        null
+                }
+                {
+                    fullscreenButton ?
+                        <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
+                            <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
+                        </Button>
+                        :
+                        null
+                }
+                {
+                    navMenu ?
+                        <NavMenu renderLabel={renderNavMenuLabel} />
+                        :
+                        null
+                }
+            </div>
         </nav>
     );
 });
diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
index 261a24b93..ee437c00d 100644
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
@@ -60,7 +60,7 @@ const SearchBar = ({ className, query, active }) => {
                     </div>
             }
             <Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
-                <Icon className={styles['icon']} name={'ic_search_link'} />
+                <Icon className={styles['icon']} name={'search'} />
             </Button>
         </label>
     );
@@ -80,7 +80,7 @@ const SearchBarFallback = ({ className }) => {
                 <div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
             </div>
             <Button className={styles['submit-button-container']} tabIndex={-1}>
-                <Icon className={styles['icon']} name={'ic_search_link'} />
+                <Icon className={styles['icon']} name={'search'} />
             </Button>
         </label>
     );
diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
index 9930bbb02..0951701bf 100644
--- a/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
@@ -3,16 +3,12 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 .search-bar-container {
-    --search-bar-size: calc(var(--horizontal-nav-bar-size) - 1.2rem);
+    --search-bar-size: 3.25rem;
     display: flex;
     flex-direction: row;
     height: var(--search-bar-size);
     border-radius: var(--search-bar-size);
-    background-color: @color-background-light2;
-
-    &:hover {
-        background-color: @color-background-light3;
-    }
+    background-color: var(--primary-overlay-color);
 
     .search-input {
         flex: 1;
@@ -20,15 +16,16 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: 0 0.5rem 0 1.5rem;
+        padding: 0 0.5rem 0 2rem;
         font-weight: 500;
-        color: @color-secondaryvariant1-light1;
+        color: var(--primary-foreground-color);
         cursor: text;
 
         &::placeholder, .placeholder-label {
             max-height: 1.2em;
             opacity: 1;
-            color: @color-secondaryvariant1-light1-90;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
         }
     }
 
@@ -38,20 +35,15 @@
         flex-direction: row;
         justify-content: center;
         align-items: center;
-        width: var(--search-bar-size);
         height: var(--search-bar-size);
-
-        &:hover {
-            .icon {
-                color: @color-secondaryvariant2-light1-90;
-            }
-        }
+        padding: 0 1.5rem;
 
         .icon {
             flex: none;
             width: 1.7rem;
             height: 1.7rem;
-            color: @color-secondaryvariant1-90;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
         }
     }
 }
\ No newline at end of file
diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
index 5119cc13c..10a14ee5c 100644
--- a/src/common/NavBar/HorizontalNavBar/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -7,9 +7,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: space-between;
     height: var(--horizontal-nav-bar-size);
     padding-right: 1rem;
-    background-color: @color-background;
+    background-color: transparent;
     overflow: visible;
 
     .logo-container {
@@ -30,8 +31,8 @@
         }
     }
 
-    .spacing {
-        flex: 1 0 0;
+    .back-button-container {
+        margin-left: 1rem;
     }
 
     .title {
@@ -44,19 +45,18 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         color: @color-secondaryvariant2-light1-90;
-
-        &+.spacing {
-            display: none;
-        }
     }
 
     .search-bar {
-        flex: 2 0 9.5rem;
-        max-width: 30rem;
+        height: 3.25rem;
+        width: 30rem;
+    }
 
-        &+.spacing {
-            max-width: 11rem;
-        }
+    .buttons-container {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        overflow: visible;
     }
 
     .button-container {
@@ -64,31 +64,27 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: var(--horizontal-nav-bar-size);
-        height: var(--horizontal-nav-bar-size);
-
-        &.back-button-container {
-            width: var(--vertical-nav-bar-size);
-            height: var(--horizontal-nav-bar-size);
-        }
-
-        &:hover {
-            background-color: @color-background-light2;
-        }
-
-        &:global(.active) {
-            background-color: @color-background-light3;
-
-            .icon {
-                color: @color-surface-light5-90;
-            }
-        }
+        width: 3.5rem;
+        height: 3.5rem;
+        border-radius: 0.75rem;
+        opacity: 0.4;
 
         .icon {
             flex: none;
-            width: 1.7rem;
-            height: 1.7rem;
-            color: @color-secondaryvariant2-light1-90;
+            width: 2rem;
+            height: 2rem;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
+        }
+
+        &:hover, &:global(.active) {
+            background-color: var(--primary-overlay-color);
+            opacity: 1;
+
+            .icon {
+                color: var(--primary-foreground-color);
+                opacity: 0.8;
+            }
         }
     }
 }
@@ -102,16 +98,12 @@
             width: var(--horizontal-nav-bar-size);
         }
 
-        .search-bar {
-            margin: 0 0.5rem;
-        }
+        .button-container {
+            margin: 0 1rem;
 
-        .spacing {
-            display: none;
-        }
-
-        .button-container:not(.back-button-container):not(.menu-button-container) {
-            display: none;
+            &:not(.back-button-container):not(.menu-button-container) {
+                display: none;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
index c31c3171f..6971398b6 100644
--- a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
+++ b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
@@ -27,7 +27,7 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick })
                     />
                     :
                     typeof icon === 'string' && icon.length > 0 ?
-                        <Icon className={styles['icon']} name={icon} />
+                        <Icon className={styles['icon']} name={selected ? icon : `${icon}-outline`} />
                         :
                         null
             }
diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
index 73ec34953..f8184f650 100644
--- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
+++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
@@ -1,50 +1,66 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .nav-tab-button-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: @color-background-dark1;
+    background-color: transparent;
+    border-radius: 0.75rem;
 
     &:hover {
-        background-color: @color-background-light2;
+        background-color: var(--primary-overlay-color);
+
+        .label {
+            opacity: 0.6;
+        }
     }
 
     &:global(.selected) {
-        background-color: @color-secondaryvariant1-dark5;
-
-        &:hover {
-            background-color: @color-secondaryvariant1-dark4;
-        }
-
         .icon {
-            color: @color-surface-light5-90;
-        }
-
-        .label {
-            color: @color-surface-light5-90;
+            opacity: 1;
+            color: var(--primary-accent-color);
         }
     }
 
     .icon, .logo {
         flex: none;
-        width: 1.7rem;
-        height: 1.7rem;
+        width: 2.2rem;
+        height: 2.2rem;
         margin-bottom: 0.5rem;
-        color: @color-secondary-light5-90;
+    }
+
+    .icon {
+        color: var(--primary-foreground-color);
+        opacity: 0.2;
     }
 
     .label {
         flex: none;
         max-height: 2.4em;
         padding: 0 0.2rem;
-        font-size: 0.9rem;
+        font-size: 0.8rem;
         font-weight: 500;
         letter-spacing: 0.01rem;
         text-align: center;
-        color: @color-secondaryvariant1-90;
+        color: var(--primary-foreground-color);
+        opacity: 0;
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .nav-tab-button-container {
+        .label {
+            opacity: 0.2;
+        }
+
+        &:global(.selected) {
+            .label {
+                opacity: 0.6;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/common/NavBar/VerticalNavBar/styles.less b/src/common/NavBar/VerticalNavBar/styles.less
index a601d2071..9d7225640 100644
--- a/src/common/NavBar/VerticalNavBar/styles.less
+++ b/src/common/NavBar/VerticalNavBar/styles.less
@@ -4,8 +4,12 @@
 @import (reference) '~stremio/common/screen-sizes.less';
 
 .vertical-nav-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
     width: var(--vertical-nav-bar-size);
-    background-color: @color-background-dark1;
+    background-color: transparent;
     overflow-y: auto;
     scrollbar-width: none;
 
@@ -14,8 +18,8 @@
     }
 
     .nav-tab-button {
-        width: var(--vertical-nav-bar-size);
-        height: var(--vertical-nav-bar-size);
+        width: calc(var(--vertical-nav-bar-size) - 1.5rem);
+        height: calc(var(--vertical-nav-bar-size) - 1.5rem);
 
         &:first-child {
             margin-top: 1rem;
@@ -29,11 +33,11 @@
 
 @media only screen and (max-width: @minimum) {
     .vertical-nav-bar-container {
-        display: flex;
         flex-direction: row;
         justify-content: space-between;
         height: var(--vertical-nav-bar-size);
         width: 100%;
+        padding: 0 1rem;
         overflow-y: hidden;
         overflow-x: auto;