diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css
index 9bded590c..1cfa0ba05 100644
--- a/components/Navbar/Navbar.module.css
+++ b/components/Navbar/Navbar.module.css
@@ -3,5 +3,10 @@
 }
 
 .container {
-  @apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20;
+  @apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20 relative;
+}
+
+.logoContainer {
+  @apply absolute transform -translate-x-1/2;
+  left: 50%;
 }
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index faa2b884a..4f601f187 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -19,7 +19,9 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
             All Clothes Accesories
           </nav>
         </div>
-        <Logo />
+        <span className={s.logoContainer}>
+          <Logo />
+        </span>
         <nav>
           <Avatar />
         </nav>