diff --git a/README.md b/README.md
index b604ceef2..4b9ad252d 100644
--- a/README.md
+++ b/README.md
@@ -7,17 +7,22 @@
   <a href="https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE">
     <img src="https://img.shields.io/npm/l/@material-tailwind/react?label=%40material-taiwlind%2Freact" alt="License" />
   </a>
+  <a href="https://www.npmjs.com/package/@material-tailwind/react">
+    <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
+  </a>
+  <a href="https://github.com/creativetimofficial/material-tailwind/releases">
+    <img src="https://img.shields.io/badge/version-1.2.1-blue.svg" alt="Version" />
+  </a>
+</p>
+<p align="center">
   <a href="https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE">
     <img src="https://img.shields.io/npm/l/@material-tailwind/html?label=%40material-taiwlind%2Fhtml" alt="License" />
   </a>
-  <a href="https://img.shields.io/badge/version-3.1.0-blue.svg">
-    <img src="https://img.shields.io/badge/version-3.1.0-blue.svg" alt="Version" />
-  </a>
-  <a href="https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-react/issues?q=is%3Aopen+is%3Aissue">
-    <img src="https://img.shields.io/github/issues/creativetimofficial/ct-soft-ui-dashboard-pro-react.svg" alt="Open Issues" />
+  <a href="https://www.npmjs.com/package/@material-tailwind/html">
+    <img src="https://img.shields.io/npm/dt/@material-tailwind/html.svg" alt="Total Downloads">
   </a>
-  <a href="https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-react/issues?q=is%3Aissue+is%3Aclosed">
-    <img src="https://img.shields.io/github/issues-closed-raw/creativetimofficial/ct-soft-ui-dashboard-pro-react.svg" alt="Closed Issues" />
+  <a href="https://github.com/creativetimofficial/material-tailwind/releases">
+    <img src="https://img.shields.io/badge/version-1.2.1-blue.svg" alt="Version" />
   </a>
 </p>
 
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index b3988e61e..d02af6a0a 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -174,7 +174,7 @@ export default function Navbar({
     >
       <MTNavbar
         {...rest}
-        className={`!block py-4 pl-6 pr-5 lg:py-2 ${
+        className={`py-4 pl-6 pr-5 lg:py-2 ${
           shadow ? "shadow-2xl shadow-blue-gray-500/10" : ""
         }`}
         shadow={shadow}
diff --git a/documentation/react/navbar.mdx b/documentation/react/navbar.mdx
index 88f20defe..0a6487a28 100644
--- a/documentation/react/navbar.mdx
+++ b/documentation/react/navbar.mdx
@@ -28,142 +28,225 @@ See below our simple <Code>Navbar</Code> example that you can use in your Tailwi
 
 <br />
 
-<ComponentDemo id="navbar">
-  <Navbar className="mx-auto max-w-screen-xl">
-    <div className="container flex items-center justify-between text-blue-gray-900">
-      <Typography
-        as="a"
-        href="#"
-        variant="small"
-        className="mr-4 cursor-pointer py-1.5 font-normal"
-      >
-        <span>Material Tailwind</span>
-      </Typography>
-      <ul className="flex items-center gap-6">
-        <Typography as="li" variant="small" className="p-1 font-normal">
-          <a href="#" className="flex items-center">
-            {`Pages`}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="ml-0.5 h-4 w-4 opacity-75"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </a>
-        </Typography>
-        <Typography as="li" variant="small" className="p-1 font-normal">
-          <a href="#" className="flex items-center">
-            {`Account`}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="ml-0.5 h-4 w-4 opacity-75"
-              viewBox="0 0 20 20"
-              fill="currentColor"
+<State initialState={{ open: false }}>
+  <ComponentDemo id="navbar">
+    <Observe>
+      {({ setState, open }) => (
+        <Navbar className="mx-auto max-w-screen-xl py-2 px-4 lg:px-8 lg:py-4">
+          <div className="container mx-auto flex items-center justify-between text-blue-gray-900">
+            <Typography
+              as="a"
+              href="#"
+              variant="small"
+              className="mr-4 cursor-pointer py-1.5 font-normal"
             >
-              <path
-                fillRule="evenodd"
-                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </a>
-        </Typography>
-        <Typography as="li" variant="small" className="p-1 font-normal">
-          <a href="#" className="flex items-center">
-            {`Blocks`}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="ml-0.5 h-4 w-4 opacity-75"
-              viewBox="0 0 20 20"
-              fill="currentColor"
+              <span>Material Tailwind</span>
+            </Typography>
+            <ul className="hidden items-center gap-6 lg:flex">
+              <Typography as="li" variant="small" className="p-1 font-normal">
+                <a href="#" className="flex items-center">
+                  {`Pages`}
+                </a>
+              </Typography>
+              <Typography as="li" variant="small" className="p-1 font-normal">
+                <a href="#" className="flex items-center">
+                  {`Account`}
+                </a>
+              </Typography>
+              <Typography as="li" variant="small" className="p-1 font-normal">
+                <a href="#" className="flex items-center">
+                  {`Blocks`}
+                </a>
+              </Typography>
+              <Typography as="li" variant="small" className="p-1 font-normal">
+                <a href="#" className="flex items-center">
+                  {`Docs`}
+                </a>
+              </Typography>
+            </ul>
+            <Button
+              variant="gradient"
+              size="sm"
+              className="hidden lg:inline-block"
             >
-              <path
-                fillRule="evenodd"
-                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </a>
-        </Typography>
-        <Typography as="li" variant="small" className="p-1 font-normal">
-          <a href="#" className="flex items-center">
-            {`Docs`}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="ml-0.5 h-4 w-4 opacity-75"
-              viewBox="0 0 20 20"
-              fill="currentColor"
+              <span>Buy Now</span>
+            </Button>
+            <IconButton
+              variant="text"
+              className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+              ripple={false}
+              onClick={() => setState((s) => ({ open: !open }))}
             >
-              <path
-                fillRule="evenodd"
-                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </a>
-        </Typography>
-      </ul>
-      <Button variant="gradient" size="sm">
-        <span>Buy Now</span>
-      </Button>
-    </div>
-  </Navbar>
-</ComponentDemo>
+              {open ? (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  className="h-6 w-6"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                </svg>
+              )}
+            </IconButton>
+          </div>
+          <MobileNav open={open} className="lg:hidden">
+            <ul className="mt-2 mb-4 flex flex-col gap-2">
+              <Typography as="li" variant="small" className="p-1 font-normal">
+                <a href="#" className="flex items-center">
+                  {`Pages`}
+                </a>
+              </Typography>
+              <Typography as="li" variant="small" className="p-1 font-normal">
+                <a href="#" className="flex items-center">
+                  {`Account`}
+                </a>
+              </Typography>
+              <Typography as="li" variant="small" className="p-1 font-normal">
+                <a href="#" className="flex items-center">
+                  {`Blocks`}
+                </a>
+              </Typography>
+              <Typography as="li" variant="small" className="p-1 font-normal">
+                <a href="#" className="flex items-center">
+                  {`Docs`}
+                </a>
+              </Typography>
+            </ul>
+            <Button variant="gradient" size="sm" fullWidth className="mb-2">
+              <span>Buy Now</span>
+            </Button>
+          </MobileNav>
+        </Navbar>
+      )}
+    </Observe>
+
+  </ComponentDemo>
+</State>
 
 ```jsx
-import { Navbar, Button, Typography } from "@material-tailwind/react";
+import { useState, useEffect } from "react";
+import {
+  Navbar,
+  MobileNav,
+  Typography,
+  Button,
+  IconButton,
+} from "@material-tailwind/react";
 
-export default function Example() {
-  const icon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="ml-0.5 h-4 w-4 opacity-75"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fillRule="evenodd"
-        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-        clipRule="evenodd"
-      />
-    </svg>
+export default function Test() {
+  const [openNav, setOpenNav] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener(
+      "resize",
+      () => window.innerWidth >= 960 && setOpenNav(false)
+    );
+  }, []);
+
+  const navList = (
+    <ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography as="li" variant="small" className="p-1 font-normal">
+        <a href="#" className="flex items-center">
+          Pages
+        </a>
+      </Typography>
+      <Typography as="li" variant="small" className="p-1 font-normal">
+        <a href="#" className="flex items-center">
+          Account
+        </a>
+      </Typography>
+      <Typography as="li" variant="small" className="p-1 font-normal">
+        <a href="#" className="flex items-center">
+          Blocks
+        </a>
+      </Typography>
+      <Typography as="li" variant="small" className="p-1 font-normal">
+        <a href="#" className="flex items-center">
+          Docs
+        </a>
+      </Typography>
+    </ul>
   );
 
   return (
-    <Navbar className="mx-auto max-w-screen-xl">
-      <div className="container flex items-center justify-between text-blue-gray-900">
+    <Navbar className="mx-auto max-w-screen-xl py-2 px-4 lg:px-8 lg:py-4">
+      <div className="container mx-auto flex items-center justify-between text-blue-gray-900">
         <Typography
           as="a"
           href="#"
           variant="small"
           className="mr-4 cursor-pointer py-1.5 font-normal"
         >
-          Material Tailwind
+          <span>Material Tailwind</span>
         </Typography>
-        <ul className="flex items-center gap-6">
-          <Typography as="li" variant="small" className="p-1 font-normal">
-            <a className="flex items-center">Pages{icon}</a>
-          </Typography>
-          <Typography as="li" variant="small" className="p-1 font-normal">
-            <a className="flex items-center">Account{icon}</a>
-          </Typography>
-          <Typography as="li" variant="small" className="p-1 font-normal">
-            <a className="flex items-center">Blocks{icon}</a>
-          </Typography>
-          <Typography as="li" variant="small" className="p-1 font-normal">
-            <a className="flex items-center">Docs{icon}</a>
-          </Typography>
-        </ul>
-        <Button variant="gradient" size="sm">
-          Buy Now
+        <div className="hidden lg:block">{navList}</div>
+        <Button variant="gradient" size="sm" className="hidden lg:inline-block">
+          <span>Buy Now</span>
         </Button>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              className="h-6 w-6"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          )}
+        </IconButton>
       </div>
+      <MobileNav open={openNav}>
+        {navList}
+        <Button variant="gradient" size="sm" fullWidth className="mb-2">
+          <span>Buy Now</span>
+        </Button>
+      </MobileNav>
     </Navbar>
   );
 }
diff --git a/packages/material-tailwind-react/README.md b/packages/material-tailwind-react/README.md
index fa2781717..27ff9ef6f 100644
--- a/packages/material-tailwind-react/README.md
+++ b/packages/material-tailwind-react/README.md
@@ -8,7 +8,7 @@
     <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
   </a>
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-1.2.0-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-1.2.1-blue.svg" alt="Version" />
   </a>
   <a href="https://www.material-tailwind.com/docs/react/license">
     <img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">
diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json
index b64852432..0d631afdd 100644
--- a/packages/material-tailwind-react/package.json
+++ b/packages/material-tailwind-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material-tailwind/react",
   "homepage": "https://material-tailwind.com",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.",
   "repository": "https://github.com/creativetimofficial/material-tailwind",
   "license": "MIT",
diff --git a/packages/material-tailwind-react/src/components/Navbar/MobileNav.tsx b/packages/material-tailwind-react/src/components/Navbar/MobileNav.tsx
index 57ec11dbb..a69ce2170 100644
--- a/packages/material-tailwind-react/src/components/Navbar/MobileNav.tsx
+++ b/packages/material-tailwind-react/src/components/Navbar/MobileNav.tsx
@@ -64,7 +64,7 @@ export const MobileNav = React.forwardRef<HTMLDivElement, MobileNavProps>(
       },
       mount: {
         opacity: 1,
-        height: `${mobileNavRef.current?.scrollHeight + 16}px`,
+        height: `${mobileNavRef.current?.scrollHeight}px`,
         transition: { duration: 0.3, times: "[0.4, 0, 0.2, 1]" },
       },
     };
diff --git a/packages/material-tailwind-react/src/theme/components/avatar/index.ts b/packages/material-tailwind-react/src/theme/components/avatar/index.ts
index 0cba34c90..5a0e2d588 100644
--- a/packages/material-tailwind-react/src/theme/components/avatar/index.ts
+++ b/packages/material-tailwind-react/src/theme/components/avatar/index.ts
@@ -48,32 +48,32 @@ export const avatar: AvatarStyleTypes = {
     },
     sizes: {
       xs: {
-        with: "w-6",
+        width: "w-6",
         height: "h-6",
         borderRadius: "rounded-md",
       },
       sm: {
-        with: "w-9",
+        width: "w-9",
         height: "h-9",
         borderRadius: "rounded-md",
       },
       md: {
-        with: "w-12",
+        width: "w-12",
         height: "h-12",
         borderRadius: "rounded-lg",
       },
       lg: {
-        with: "w-[58px]",
+        width: "w-[58px]",
         height: "h-[58px]",
         borderRadius: "rounded-lg",
       },
       xl: {
-        with: "w-[74px]",
+        width: "w-[74px]",
         height: "h-[74px]",
         borderRadius: "rounded-xl",
       },
       xxl: {
-        with: "w-[110px]",
+        width: "w-[110px]",
         height: "h-[110px]",
         borderRadius: "rounded-2xl",
       },
diff --git a/packages/material-tailwind-react/src/theme/components/navbar/index.ts b/packages/material-tailwind-react/src/theme/components/navbar/index.ts
index 450841b04..0fe9b8ca1 100644
--- a/packages/material-tailwind-react/src/theme/components/navbar/index.ts
+++ b/packages/material-tailwind-react/src/theme/components/navbar/index.ts
@@ -59,9 +59,7 @@ export const navbar: NavbarStylesType = {
     base: {
       navbar: {
         initial: {
-          display: "flex",
-          flexWrap: "flex-nowrap",
-          justifyContent: "justify-start",
+          display: "block",
           width: "w-full",
           maxWidth: "max-w-screen-2xl",
           borderRadius: "rounded-xl",
@@ -88,7 +86,6 @@ export const navbar: NavbarStylesType = {
         display: "block",
         width: "w-full",
         basis: "basis-full",
-        rounded: "rounded-xl",
         overflow: "overflow-hidden",
       },
     },
diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx
index 79c34c98d..94d11d02b 100644
--- a/pages/docs/[...slug].tsx
+++ b/pages/docs/[...slug].tsx
@@ -61,6 +61,7 @@ import {
   MenuHandler,
   MenuList,
   MenuItem,
+  MobileNav,
   Navbar,
   Option,
   Popover,
@@ -121,17 +122,17 @@ const components = {
     <Typography
       as="p"
       variant="h5"
-      className="!text-blue-gray-500 !mb-12 !font-normal"
+      className="!mb-12 !font-normal !text-blue-gray-500"
       {...props}
     />
   ),
   p: (props) => (
-    <Typography className="!text-blue-gray-500 !mb-4 !font-normal" {...props} />
+    <Typography className="!mb-4 !font-normal !text-blue-gray-500" {...props} />
   ),
-  hr: () => <hr className="!border-blue-gray-50 !mt-24 !mb-20" />,
+  hr: () => <hr className="!mt-24 !mb-20 !border-blue-gray-50" />,
   a: (props) => (
     <a
-      className="!text-blue-gray-900 !font-medium !transition-colors hover:!text-blue-500"
+      className="!font-medium !text-blue-gray-900 !transition-colors hover:!text-blue-500"
       {...props}
     />
   ),
@@ -145,13 +146,13 @@ const components = {
   tr: (props) => <tr {...props} />,
   th: (props) => (
     <th
-      className="border-blue-gray-100 text-blue-gray-900 min-w-[120px] border-b py-3 text-left font-medium"
+      className="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900"
       {...props}
     />
   ),
   td: (props) => (
     <td
-      className="border-blue-gray-50 text-blue-gray-500 min-w-[120px] border-b py-3 text-left text-sm"
+      className="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"
       {...props}
     />
   ),
@@ -192,6 +193,7 @@ const components = {
   MenuHandler,
   MenuList,
   MenuItem,
+  MobileNav,
   Navbar,
   Option,
   Popover,