diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 03f7693c5..44fe1cbc0 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -1,54 +1,55 @@
-import Link from 'next/link';
-import { Suspense } from 'react';
-
 import Cart from 'components/cart';
 import CartIcon from 'components/icons/cart';
-import LogoIcon from 'components/icons/logo';
+import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
+import Link from 'next/link';
+import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
 import Search from './search';
+const { SITE_NAME } = process.env;
 
 export default async function Navbar() {
   const menu = await getMenu('next-js-frontend-header-menu');
 
   return (
     <nav className="relative flex items-center justify-between p-4 lg:px-6">
-      <div className="block w-1/3 md:hidden">
+      <div className="block flex-none md:hidden">
         <MobileMenu menu={menu} />
       </div>
-      <div className="b flex w-full flex-auto text-sm md:mr-6 md:flex md:w-auto md:items-center lg:mr-10">
-        <div className="flex w-full flex-none justify-center md:mr-6 md:block md:w-auto lg:mr-10">
-          <Link href="/" aria-label="Go back home" className="flex items-center">
-            <div className="relative mr-2 flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
-              <LogoIcon className="h-8 transition-transform hover:scale-110" />
-            </div>
-            <div className="text-sm font-medium uppercase">Acme Store</div>
+      <div className="flex w-full items-center">
+        <div className="flex w-full md:w-1/3">
+          <Link
+            href="/"
+            aria-label="Go back home"
+            className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
+          >
+            <LogoSquare />
+            <div className="ml-2 text-sm font-medium uppercase">{SITE_NAME}</div>
           </Link>
+          {menu.length ? (
+            <ul className="hidden text-sm md:flex md:items-center">
+              {menu.map((item: Menu) => (
+                <li key={item.title}>
+                  <Link
+                    href={item.path}
+                    className="mr-3 text-gray-500 underline-offset-4 hover:text-black hover:underline dark:hover:text-gray-400 lg:mr-8"
+                  >
+                    {item.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        <div className="hidden justify-center md:flex md:w-1/3">
+          <Search />
+        </div>
+        <div className="flex justify-end md:w-1/3">
+          <Suspense fallback={<CartIcon className="h-6" />}>
+            <Cart />
+          </Suspense>
         </div>
-        {menu.length ? (
-          <ul className="b mr-6 hidden w-full text-sm md:flex md:items-center lg:mr-10">
-            {menu.map((item: Menu) => (
-              <li key={item.title}>
-                <Link
-                  href={item.path}
-                  className="mr-3 rounded-lg py-1 text-gray-500 underline-offset-4 hover:text-black hover:underline dark:hover:text-gray-400 lg:mr-8"
-                >
-                  {item.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </div>
-      <div className="hidden flex-grow md:block md:w-auto">
-        <Search />
-      </div>
-
-      <div className="flex w-2/5 justify-end">
-        <Suspense fallback={<CartIcon className="h-6" />}>
-          <Cart />
-        </Suspense>
       </div>
     </nav>
   );
diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
index dcd6f0c1e..100c2bb62 100644
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@@ -26,19 +26,16 @@ export default function Search() {
   }
 
   return (
-    <form
-      onSubmit={onSubmit}
-      className="relative m-0 flex w-full items-center rounded-xl border bg-transparent p-0 dark:border-gray-800"
-    >
+    <form onSubmit={onSubmit} className="relative w-full lg:w-[320px]">
       <input
         type="text"
         name="search"
         placeholder="Search for products..."
         autoComplete="off"
         defaultValue={searchParams?.get('q') || ''}
-        className="w-full rounded-xl bg-white px-4 py-1 text-sm text-black placeholder:text-gray-800 dark:bg-transparent dark:text-gray-500 dark:placeholder:text-gray-500"
+        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-gray-800 dark:border-gray-800 dark:bg-transparent dark:text-gray-500 dark:placeholder:text-gray-500"
       />
-      <div className="absolute right-0 top-0 mr-3 flex h-full items-center bg-white dark:bg-dark">
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
         <MagnifyingGlassIcon className="h-4" />
       </div>
     </form>
diff --git a/components/logo-square.tsx b/components/logo-square.tsx
index 28f8c818b..62551d710 100644
--- a/components/logo-square.tsx
+++ b/components/logo-square.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import LogoIcon from './icons/logo';
 
-export default function LogoSquare({ size }: { size: 'sm' | undefined }) {
+export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
   return (
     <div
       className={clsx(
-        'flex items-center justify-center border border-gray-200 dark:border-gray-700',
+        'flex flex-none items-center justify-center border border-gray-200 dark:border-gray-700',
         {
           'h-[40px] w-[40px] rounded-xl': !size,
           'h-[30px] w-[30px] rounded-lg': size === 'sm'