diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css
index 1cfa0ba05..9cdd5d30e 100644
--- a/components/Navbar/Navbar.module.css
+++ b/components/Navbar/Navbar.module.css
@@ -1,12 +1,7 @@
 .root {
-  @apply border-black border-b;
+  @apply;
 }
 
 .container {
-  @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%;
+  @apply flex justify-between items-center flex-row px-6 h-20 relative border-gray-100 border-b;
 }
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index 4f601f187..f043ea237 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -13,15 +13,15 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
   return (
     <div className={rootClassName}>
       <Container className={s.container}>
-        <div className="flex flex-row h-full content-center">
+        <Logo />
+        <div className="flex flex-row h-full content-center flex-1">
           <Searchbar />
           <nav className="flex flex-row items-center px-3">
-            All Clothes Accesories
+            <a className="pr-4">All</a>
+            <a className="pr-4">Clothes</a>
+            <a>Accesories</a>
           </nav>
         </div>
-        <span className={s.logoContainer}>
-          <Logo />
-        </span>
         <nav>
           <Avatar />
         </nav>
diff --git a/components/Searchbar/Searchbar.module.css b/components/Searchbar/Searchbar.module.css
index f37317886..bce0bd3c4 100644
--- a/components/Searchbar/Searchbar.module.css
+++ b/components/Searchbar/Searchbar.module.css
@@ -1,3 +1,25 @@
 .root {
-  @apply px-4 border-black border-r h-full flex items-center;
+  @apply px-4 flex items-center;
+}
+
+.container {
+  @apply relative rounded-lg flex flex-row text-sm items-center;
+  background-color: #fafafa;
+}
+
+.input {
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg;
+  min-width: 300px;
+}
+
+.input:focus {
+  @apply outline-none shadow-outline-gray;
+}
+
+.iconContainer {
+  @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
+}
+
+.icon {
+  @apply h-5 w-5;
 }
diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
index 56ee90ed2..4245d5b89 100644
--- a/components/Searchbar/Searchbar.tsx
+++ b/components/Searchbar/Searchbar.tsx
@@ -12,13 +12,18 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
   return (
     <div className={rootClassName}>
       <div className="flex-1 flex justify-between px-2">
-        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-          />
-        </svg>
+        <div className={s.container}>
+          <input className={s.input} placeholder="Search for products..." />
+          <div className={s.iconContainer}>
+            <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+              />
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/package.json b/package.json
index 5f475c9c9..19b5bfef8 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@tailwindcss/ui": "^0.6.2",
     "@types/classnames": "^2.2.10",
     "classnames": "^2.2.6",
     "next": "^9.5.4-canary.20",
diff --git a/pages/index.tsx b/pages/index.tsx
index c83a477d3..2ce395ed2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -9,7 +9,7 @@ export default function Home() {
         description="Due to COVID-19, some orders may experience processing and delivery delays."
       />
       <Navbar />
-      <Container className="px-4 py-5 border-black border-l border-r h-screen">
+      <Container className="px-4 py-5  h-screen">
         <Button>Click Me!</Button>
       </Container>
       <Footer></Footer>
diff --git a/styles/global.css b/styles/global.css
index 50568fca6..9d50fcd5e 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,5 +1,6 @@
 @import "./font.css";
 @tailwind base;
+@tailwind components;
 
 :root {
   /* Spacing variables */
@@ -190,6 +191,4 @@ a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-@tailwind components;
 @tailwind utilities;
-@tailwind screens;
diff --git a/tailwind.config.js b/tailwind.config.js
index b30d53e3c..24a14608b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,5 +15,5 @@ module.exports = {
     },
   },
   variants: {},
-  plugins: [],
+  plugins: [require("@tailwindcss/ui")],
 };
diff --git a/ui/Container/Container.module.css b/ui/Container/Container.module.css
index b244b6372..0db8285ef 100644
--- a/ui/Container/Container.module.css
+++ b/ui/Container/Container.module.css
@@ -1,4 +1,5 @@
 .root {
-  @apply max-w-6xl mx-auto px-2;
+  @apply mx-auto px-2;
   display: inherit;
+  max-width: 1440px;
 }
diff --git a/yarn.lock b/yarn.lock
index 959424b69..a5d78e0c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1060,6 +1060,30 @@
   dependencies:
     mkdirp "^1.0.4"
 
+"@tailwindcss/custom-forms@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz#40e5ed1fff6d29d8ed1c508a0b2aaf8da96962e0"
+  integrity sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==
+  dependencies:
+    lodash "^4.17.11"
+    mini-svg-data-uri "^1.0.3"
+    traverse "^0.6.6"
+
+"@tailwindcss/typography@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.2.0.tgz#b597c83502e3c3c6641a8aaabda223cd494ab349"
+  integrity sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==
+
+"@tailwindcss/ui@^0.6.2":
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/ui/-/ui-0.6.2.tgz#4144aba86543bf79fefe0ea14a78a12fb315810e"
+  integrity sha512-i0sWpAgnF4VitNqaf4JVDuiaQ3MmREwn7gmNYR6lvX29avYLLNOHf0DgzhVEfwfB+CJ6WjZvPoJuDYExZgWlwQ==
+  dependencies:
+    "@tailwindcss/custom-forms" "^0.2.1"
+    "@tailwindcss/typography" "^0.2.0"
+    hex-rgb "^4.1.0"
+    postcss-selector-parser "^6.0.2"
+
 "@types/classnames@^2.2.10":
   version "2.2.10"
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999"
@@ -2667,6 +2691,11 @@ he@1.1.1:
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
   integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
 
+hex-rgb@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.2.0.tgz#fb377f2e5658fc924f1efa189685922e56ecaf0f"
+  integrity sha512-I7DkKeQ2kR2uyqgbxPgNgClH/rfs1ioKZhZW8VTIAirsxCR5EyhYeywgZbhMScgUbKCkgo6bb6JwA0CLTn9beA==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -3170,6 +3199,11 @@ mime-types@^2.1.27:
   dependencies:
     mime-db "1.44.0"
 
+mini-svg-data-uri@^1.0.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
+  integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -4740,7 +4774,7 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-traverse@0.6.6:
+traverse@0.6.6, traverse@^0.6.6:
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
   integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=