diff --git a/components/drip/modal/basicModal.js b/components/drip/modal/basicModal.js
new file mode 100644
index 0000000..47af8ef
--- /dev/null
+++ b/components/drip/modal/basicModal.js
@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+const BasicModal = ({ children, basicModalRef, onClose, open }) => {
+  const closeModal = () => {
+    onClose(false);
+  };
+  return (
+    <div
+      ref={basicModalRef}
+      onClick={closeModal}
+      className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-center items-center transition-opacity duration-300 ${
+        open ? "opacity-100" : "opacity-0 pointer-events-none"
+      }`}
+    >
+      <article
+        onClick={(e) => e.stopPropagation()}
+        className="flex flex-col w-full max-w-[90vw] sm:max-w-lg md:max-w-xl lg:max-w-2xl max-h-[90vh] bg-white rounded-lg overflow-hidden"
+      >
+        <header className="flex items-center justify-between p-4 sm:p-6 bg-white border-b border-gray-200">
+          <h2 className="text-lg sm:text-xl font-semibold text-gray-800">
+            Welcome to the modal
+          </h2>
+          <button
+            onClick={closeModal}
+            className="text-gray-400 hover:text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-sm text-sm inline-flex h-8 w-8 sm:h-9 sm:w-9 justify-center items-center transition-colors duration-200"
+          >
+            <svg
+              className="w-4 h-4 sm:w-5 sm:h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 14 14"
+            >
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+              />
+            </svg>
+            <span className="sr-only">Close modal</span>
+          </button>
+        </header>
+        <main className="p-4 sm:p-6 bg-white overflow-y-auto max-h-[60vh] sm:max-h-[70vh]">
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae
+            eligendi quo possimus corporis. Aliquam adipisci ipsum earum, nam et
+            in voluptatum nesciunt eveniet, repudiandae corporis reiciendis.
+            Voluptas libero enim officiis, at obcaecati, dolores quidem
+            accusantium autem officia nisi itaque nostrum vel repellendus hic
+            cupiditate saepe perferendis nobis illo impedit sit ad deserunt
+            repellat cum inventore? Ut quo quisquam dolorem consequuntur in, eum
+            aspernatur voluptas sapiente, illo sunt optio ipsum, eos aut est
+            eius temporibus eveniet harum. Neque error quo deserunt id
+            laudantium
+          </p>
+        </main>
+        <footer className="flex items-center justify-end gap-2 p-4 sm:p-6 bg-white border-t border-gray-200">
+          <button
+            onClick={closeModal}
+            className="text-gray-500 hover:text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-sm text-sm sm:text-base inline-flex h-8 sm:h-9 px-4 sm:px-6 justify-center items-center transition-colors duration-200"
+          >
+            Cancel
+          </button>
+
+          <button
+            onClick={closeModal}
+            className="text-slate-50 hover:text-slate-100 bg-slate-700 hover:bg-slate-900  rounded-sm text-sm sm:text-base inline-flex h-8 sm:h-9 px-4 sm:px-6 justify-center items-center transition-colors duration-200"
+          >
+            Accept
+          </button>
+        </footer>
+      </article>
+    </div>
+  );
+};
+
+export default BasicModal;
diff --git a/components/drip/modal/confirmationModal.js b/components/drip/modal/confirmationModal.js
new file mode 100644
index 0000000..e08f416
--- /dev/null
+++ b/components/drip/modal/confirmationModal.js
@@ -0,0 +1,86 @@
+const ConfirmationModal = ({
+  open,
+  onClose,
+  ConfirmationModalRef,
+  title,
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <>
+      <div
+        ref={ConfirmationModalRef}
+        onClick={onClose}
+        style={{ display: open ? "flex" : "none" }}
+        className="flex justify-center items-center w-full h-[100vh] fixed top-0 left-0 bg-[rgba(0,0,0,.5)] z-50 transition-opacity duration-300"
+      >
+        <article
+          onClick={(e) => e.stopPropagation()}
+          className="relative backdrop-blur-md  p-4 w-full max-w-md max-h-full"
+        >
+          <div className="relative bg-white rounded-sm shadow-sm">
+            <button
+              type="button"
+              onClick={onClose}
+              className="absolute b top-3 right-3 end-2.5 text-gray-400 bg-[rgba(0,0,0,.1)]   rounded-sm text-sm w-8 h-8 ms-auto inline-flex justify-center items-center cursor-pointer "
+            >
+              <svg
+                className="w-3 h-3"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 14 14"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+                />
+              </svg>
+              <span className="sr-only">Close modal</span>
+            </button>
+            <div className="p-4 md:p-5 text-center">
+              <svg
+                className="mx-auto mb-4 text-gray-400 w-12 h-12 "
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                />
+              </svg>
+
+              <h3 className="mb-5 text-lg font-normal text-gray-500 ">
+                {title || " Are you sure you want to delete this product?"}
+              </h3>
+              <div className="flex justify-center gap-3">
+                <button
+                  type="button"
+                  onClick={onConfirm}
+                  className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300  font-medium rounded-sm text-sm inline-flex items-center px-5 py-2.5 text-center"
+                >
+                  Yes, I'm sure
+                </button>
+                <button
+                  onClick={onCancel}
+                  type="button"
+                  className="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-sm border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 "
+                >
+                  No, cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    </>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/components/drip/navbar/basicNavbars.js b/components/drip/navbar/basicNavbars.js
index c2324cc..7a321b5 100644
--- a/components/drip/navbar/basicNavbars.js
+++ b/components/drip/navbar/basicNavbars.js
@@ -1,150 +1,194 @@
 export const basicNavbars = [
-    {
-        type: "Navbar with animated three line Hamburger menu, with a translate animation on mobile devices",
-        category: [
-            {
-                id: "Navbar-1",
-                style: "flex justify-between items-center relative bg-black py-3 lg:px-12 px-6 text-white w-11/12 mx-auto",
-                mobileStyle: "flex justify-between transition-all duration-500 ease-in items-center relative bg-black py-3 px-6 text-white w-11/12 mx-auto",
-                labelStyle: "lg:hidden w-10 h-1 relative rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
-                mobileLabelStyle: "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
-                listContainerStyle: "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0  bg-black lg:bg-transparent",
-                mobileListContainerStyle: " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0  bg-black",
-                logoStyle: "w-16 h-16 basis-16 rounded-full bg-white text-black font-bold flex items-center justify-center",
-                childrenStyle: "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in",
-                mobileChildrenStyle: "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors duration-300 ease-in",
-                children: [
-                    {
-                        id: "About-1",
-                        text: "About",
-                        href: "/docs/headers"
-                    },
-                    {
-                        id: "Career-1",
-                        text: "Career",
-                        href: "/docs/headers"
-                    },{
-                        id: "Events-1",
-                        text: "Events",
-                        href: "/docs/headers"
-                    },{
-                        id: "Product-1",
-                        text: "Product",
-                        href: "/docs/headers"
-                    },
-                ]
-            }
-        ]
-    },
-    {
-        type: "Navbar with an animated two line Hamburger menu, with a translate animation on mobile devices",
-        category: [
-            {
-                id: "Navbar-2",
-                style: "flex justify-between items-center relative bg-black py-3 lg:px-12 px-6 text-white w-11/12 mx-auto",
-                mobileStyle: "flex justify-between transition-all duration-500 ease-in items-center relative bg-black py-3 px-6 text-white w-11/12 mx-auto",
-                labelStyle: "lg:hidden w-10 h-1 relative rounded-full bg-transparent after:w-8 after:h-1 after:rounded-full after:bg-white before:w-8 before:h-1 before:rounded-full before:bg-white after:absolute after:top-1.5 before:-top-1.5 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
-                mobileLabelStyle: "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer hover:cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
-                listContainerStyle: "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0  bg-black lg:bg-transparent",
-                mobileListContainerStyle: " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0  bg-black",
-                logoStyle: "w-16 h-16 basis-16 rounded-full bg-white text-black font-bold flex items-center justify-center",
-                childrenStyle: "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in",
-                mobileChildrenStyle: "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors duration-300 ease-in",
-                children: [
-                    {
-                        id: "About-1",
-                        text: "About",
-                        href: "/docs/headers"
-                    },
-                    {
-                        id: "Career-1",
-                        text: "Career",
-                        href: "/docs/headers"
-                    }, {
-                        id: "Events-1",
-                        text: "Events",
-                        href: "/docs/headers"
-                    }, {
-                        id: "Product-1",
-                        text: "Product",
-                        href: "/docs/headers"
-                    },
-                ]
-            }
-        ]
-    },
-    {
-        type: "Bordered Navbar with animated three line Hamburger menu, with a translate animation on mobile devices",
-        category: [
-            {
-                id: "Navbar-3",
-                style: "flex justify-between items-center relative border-black border-2 py-3 lg:px-12 px-6 lg:text-black text-white bg-white w-11/12 mx-auto",
-                mobileStyle: "flex justify-between transition-all duration-500 border-black border-2 ease-in items-center relative bg-white py-3 px-6 text-white w-11/12 mx-auto",
-                labelStyle: "lg:hidden w-10 h-1 relative rounded-full bg-black after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
-                mobileLabelStyle: "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-black after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
-                listContainerStyle: "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0  bg-black lg:bg-transparent",
-                mobileListContainerStyle: " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0  bg-black",
-                logoStyle: "w-16 h-16 basis-16 rounded-full bg-black text-white font-bold flex items-center justify-center",
-                childrenStyle: "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in",
-                mobileChildrenStyle: "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors text-white duration-300 ease-in",
-                children: [
-                    {
-                        id: "About-1",
-                        text: "About",
-                        href: "/docs/headers"
-                    },
-                    {
-                        id: "Career-1",
-                        text: "Career",
-                        href: "/docs/headers"
-                    },{
-                        id: "Events-1",
-                        text: "Events",
-                        href: "/docs/headers"
-                    },{
-                        id: "Product-1",
-                        text: "Product",
-                        href: "/docs/headers"
-                    },
-                ]
-            }
-        ]
-    },
-    {
-        type: "Bordered Navbar with an animated two line Hamburger menu, with a translate animation on mobile devices",
-        category: [
-            {
-                id: "Navbar-4",
-                style: "flex justify-between items-center relative border-black border-2 py-3 lg:px-12 px-6 lg:text-black text-white w-11/12 bg-white mx-auto",
-                mobileStyle: "flex justify-between transition-all duration-500 ease-in items-center relative border-black border-2 bg-white py-3 px-6 text-white w-11/12 mx-auto",
-                labelStyle: "lg:hidden w-10 h-1 relative rounded-full bg-transparent after:w-8 after:h-1 after:rounded-full after:bg-black before:w-8 before:h-1 before:rounded-full before:bg-black after:absolute after:top-1.5 before:-top-1.5 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
-                mobileLabelStyle: "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-transparent after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
-                listContainerStyle: "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0  bg-black lg:bg-transparent",
-                mobileListContainerStyle: " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0  bg-black",
-                logoStyle: "w-16 h-16 basis-16 rounded-full bg-black text-white font-bold flex items-center justify-center",
-                childrenStyle: "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in",
-                mobileChildrenStyle: "p-6 cursor-pointer flex hover:bg-gray-500 text-white transition-colors duration-300 ease-in",
-                children: [
-                    {
-                        id: "About-1",
-                        text: "About",
-                        href: "/docs/headers"
-                    },
-                    {
-                        id: "Career-1",
-                        text: "Career",
-                        href: "/docs/headers"
-                    }, {
-                        id: "Events-1",
-                        text: "Events",
-                        href: "/docs/headers"
-                    }, {
-                        id: "Product-1",
-                        text: "Product",
-                        href: "/docs/headers"
-                    },
-                ]
-            }
-        ]
-    }
-] 
\ No newline at end of file
+  {
+    type: "Navbar with animated three line Hamburger menu, with a translate animation on mobile devices",
+    category: [
+      {
+        id: "Navbar-1",
+        style:
+          "flex justify-between items-center relative bg-black py-3 lg:px-12 px-6 text-white w-11/12 mx-auto",
+        mobileStyle:
+          "flex justify-between transition-all duration-500 ease-in items-center relative bg-black py-3 px-6 text-white w-11/12 mx-auto",
+        labelStyle:
+          "lg:hidden w-10 h-1 relative rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
+        mobileLabelStyle:
+          "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
+        listContainerStyle:
+          "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0  bg-black lg:bg-transparent",
+        mobileListContainerStyle:
+          " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0  bg-black",
+        logoStyle:
+          "w-16 h-16 basis-16 rounded-full bg-white text-black font-bold flex items-center justify-center",
+        childrenStyle:
+          "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in",
+        mobileChildrenStyle:
+          "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors duration-300 ease-in",
+        children: [
+          {
+            id: "About-1",
+            text: "About",
+            href: "/docs/headers",
+          },
+          {
+            id: "Career-1",
+            text: "Career",
+            href: "/docs/headers",
+          },
+          {
+            id: "Events-1",
+            text: "Events",
+            href: "/docs/headers",
+          },
+          {
+            id: "Product-1",
+            text: "Product",
+            href: "/docs/headers",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "Navbar with an animated two line Hamburger menu, with a translate animation on mobile devices",
+    category: [
+      {
+        id: "Navbar-2",
+        style:
+          "flex justify-between items-center relative bg-black py-3 lg:px-12 px-6 text-white w-11/12 mx-auto",
+        mobileStyle:
+          "flex justify-between transition-all duration-500 ease-in items-center relative bg-black py-3 px-6 text-white w-11/12 mx-auto",
+        labelStyle:
+          "lg:hidden w-10 h-1 relative rounded-full bg-transparent after:w-8 after:h-1 after:rounded-full after:bg-white before:w-8 before:h-1 before:rounded-full before:bg-white after:absolute after:top-1.5 before:-top-1.5 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
+        mobileLabelStyle:
+          "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-white after:w-10 after:h-1 after:rounded-full after:bg-white before:w-10 before:h-1 before:rounded-full before:bg-white after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer hover:cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45 after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
+        listContainerStyle:
+          "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0  bg-black lg:bg-transparent",
+        mobileListContainerStyle:
+          " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0  bg-black",
+        logoStyle:
+          "w-16 h-16 basis-16 rounded-full bg-white text-black font-bold flex items-center justify-center",
+        childrenStyle:
+          "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in",
+        mobileChildrenStyle:
+          "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors duration-300 ease-in",
+        children: [
+          {
+            id: "About-1",
+            text: "About",
+            href: "/docs/headers",
+          },
+          {
+            id: "Career-1",
+            text: "Career",
+            href: "/docs/headers",
+          },
+          {
+            id: "Events-1",
+            text: "Events",
+            href: "/docs/headers",
+          },
+          {
+            id: "Product-1",
+            text: "Product",
+            href: "/docs/headers",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "Bordered Navbar with animated three line Hamburger menu, with a translate animation on mobile devices",
+    category: [
+      {
+        id: "Navbar-3",
+        style:
+          "flex justify-between items-center relative border-black border-2 py-3 lg:px-12 px-6 lg:text-black text-white bg-white w-11/12 mx-auto",
+        mobileStyle:
+          "flex justify-between transition-all duration-500 bbtnorder-black border-2 ease-in items-center relative bg-white py-3 px-6 text-white w-11/12 mx-auto",
+        labelStyle:
+          "lg:hidden w-10 h-1 relative rounded-full bg-black after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
+        mobileLabelStyle:
+          "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-black after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
+        listContainerStyle:
+          "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0  bg-black lg:bg-transparent",
+        mobileListContainerStyle:
+          " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0  bg-black",
+        logoStyle:
+          "w-16 h-16 basis-16 rounded-full bg-black text-white font-bold flex items-center justify-center",
+        childrenStyle:
+          "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in",
+        mobileChildrenStyle:
+          "p-6 cursor-pointer flex hover:bg-gray-500 transition-colors text-white duration-300 ease-in",
+        children: [
+          {
+            id: "About-1",
+            text: "About",
+            href: "/docs/headers",
+          },
+          {
+            id: "Career-1",
+            text: "Career",
+            href: "/docs/headers",
+          },
+          {
+            id: "Events-1",
+            text: "Events",
+            href: "/docs/headers",
+          },
+          {
+            id: "Product-1",
+            text: "Product",
+            href: "/docs/headers",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "Bordered Navbar with an animated two line Hamburger menu, with a translate animation on mobile devices",
+    category: [
+      {
+        id: "Navbar-4",
+        style:
+          "flex justify-between items-center relative border-black border-2 py-3 lg:px-12 px-6 lg:text-black text-white w-11/12 bg-white mx-auto",
+        mobileStyle:
+          "flex justify-between transition-all duration-500 ease-in items-center relative border-black border-2 bg-white py-3 px-6 text-white w-11/12 mx-auto",
+        labelStyle:
+          "lg:hidden w-10 h-1 relative rounded-full bg-transparent after:w-8 after:h-1 after:rounded-full after:bg-black before:w-8 before:h-1 before:rounded-full before:bg-black after:absolute after:top-1.5 before:-top-1.5 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
+        mobileLabelStyle:
+          "w-10 h-1 relative transition-all duration-500 ease-in rounded-full bg-transparent after:w-10 after:h-1 after:rounded-full after:bg-black before:w-10 before:h-1 before:rounded-full before:bg-black after:absolute after:top-2 before:-top-2 before:absolute cursor-pointer peer-checked:before:top-0 peer-checked:after:top-0 peer-checked:after:rotate-45 peer-checked:before:-rotate-45  after:transition-transform after:duration-500 before:transition-transform before:duration-500 ease-in peer-checked:bg-transparent",
+        listContainerStyle:
+          "lg:flex lg:translate-x-0 lg:peer-checked:static absolute lg:static -translate-x-[100vh] lg:basis-3/5 justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-transform duration-500 left-0 right-0  bg-black lg:bg-transparent",
+        mobileListContainerStyle:
+          " absolute -translate-x-[200vh] justify-evenly font-extrabold peer-checked:translate-x-0 top-[88px] transition-all duration-700 left-0 right-0  bg-black",
+        logoStyle:
+          "w-16 h-16 basis-16 rounded-full bg-black text-white font-bold flex items-center justify-center",
+        childrenStyle:
+          "p-6 cursor-pointer flex lg:p-0 lg:hover:bg-inherit hover:bg-gray-500 transition-colors duration-700 ease-in",
+        mobileChildrenStyle:
+          "p-6 cursor-pointer flex hover:bg-gray-500 text-white transition-colors duration-300 ease-in",
+        children: [
+          {
+            id: "About-1",
+            text: "About",
+            href: "/docs/headers",
+          },
+          {
+            id: "Career-1",
+            text: "Career",
+            href: "/docs/headers",
+          },
+          {
+            id: "Events-1",
+            text: "Events",
+            href: "/docs/headers",
+          },
+          {
+            id: "Product-1",
+            text: "Product",
+            href: "/docs/headers",
+          },
+        ],
+      },
+    ],
+  },
+];
diff --git a/components/other/ComponentListing.js b/components/other/ComponentListing.js
index 1dbb7b5..242454d 100644
--- a/components/other/ComponentListing.js
+++ b/components/other/ComponentListing.js
@@ -46,7 +46,13 @@ const ComponentListing = ({ featured = 0 }) => {
       count: 1,
       icon: "ri-layout-2-line",
       featured: true,
-    }
+    },
+    {
+      name: "modals",
+      count: 2,
+      icon: "ri-window-line",
+      featured: true,
+    },
   ];
 
   useEffect(() => {
diff --git a/package-lock.json b/package-lock.json
index 025fd42..45c98bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -798,9 +798,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001480",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz",
-      "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==",
+      "version": "1.0.30001731",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz",
+      "integrity": "sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg==",
       "funding": [
         {
           "type": "opencollective",
@@ -814,7 +814,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -4029,9 +4030,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001480",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz",
-      "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ=="
+      "version": "1.0.30001731",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz",
+      "integrity": "sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg=="
     },
     "chalk": {
       "version": "4.1.2",
diff --git a/pages/docs/alerts.js b/pages/docs/alerts.js
index 733e76b..90b3e58 100644
--- a/pages/docs/alerts.js
+++ b/pages/docs/alerts.js
@@ -63,7 +63,6 @@ export default function Alerts() {
               ""
             )}
           </p>
-
           <div className="border rounded-sm shadow-sm p-4 bg-white-100 relative flex flex-col gap-2">
             {SolidAlert.map((btn) => (
               <div
@@ -72,11 +71,10 @@ export default function Alerts() {
                 role="alert"
                 onClick={() => copyToClipboard("Solid", btn.id)}
                 ref={(ref) => (alertDataRef.current[btn.id] = ref)}
-              >
-                <span class="font-bold">{btn.span}</span> {btn.text}
-              </div>
+              ></div>
             ))}
-          </div>
+          </div>{" "}
+          <span class="font-bold">{btn.span}</span> {btn.text}
         </div>
 
         {/* Soft Color Alerts */}
diff --git a/pages/docs/footers.js b/pages/docs/footers.js
index d17ef61..45f2183 100644
--- a/pages/docs/footers.js
+++ b/pages/docs/footers.js
@@ -1,16 +1,14 @@
-import Meta from "../../components/layout/meta"
-import PageHeading from "../../components/other/PageHeadings"
-import Footer from "../../components/drip/footer/Footer"
-import LogoFooter from "../../components/drip/footer/LogoFooter"
+import Meta from "../../components/layout/meta";
+import PageHeading from "../../components/other/PageHeadings";
+import Footer from "../../components/drip/footer/Footer";
+import LogoFooter from "../../components/drip/footer/LogoFooter";
 
-export default function Footers(){
-  return(
+export default function Footers() {
+  return (
     <section className="lg:px-12 px-3 ">
       <Meta
         title={"DripUI - Tailwind CSS Footers"}
-        description={
-          "DripUI offers a wide range of responsive Footers"
-        }
+        description={"DripUI offers a wide range of responsive Footers"}
         url={"/components/footer"}
       />
 
@@ -24,18 +22,23 @@ export default function Footers(){
 
       <section className="flex flex-col gap-6">
         <h2 className="text-3xl font-semibold">Basic Footers</h2>
-          {/* Foorter #1 */}
-          <div className="mb-12">
-            <h3 className="mb-4"> Basic strip footer with links and Copyright </h3>
-            <Footer  />
-          </div>
-
-          <div className="mb-12 h-full">
-            <h3 className="mb-4"> Footer with a logo section and important links </h3>
-            <LogoFooter />  
-          </div>
+        {/* Foorter #1 */}
+        <div className="mb-12">
+          <h3 className="mb-4">
+            {" "}
+            Basic strip footer with links and Copyright{" "}
+          </h3>
+          <Footer />
+        </div>
 
+        <div className="mb-12 h-full">
+          <h3 className="mb-4">
+            {" "}
+            Footer with a logo section and important links{" "}
+          </h3>
+          <LogoFooter />
+        </div>
       </section>
     </section>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/pages/docs/modals.js b/pages/docs/modals.js
new file mode 100644
index 0000000..be941b8
--- /dev/null
+++ b/pages/docs/modals.js
@@ -0,0 +1,148 @@
+import { useState, useRef } from "react";
+import Meta from "../../components/layout/meta";
+import PageHeading from "../../components/other/PageHeadings";
+import BasicModal from "../../components/drip/modal/basicModal";
+import ConfirmationModal from "../../components/drip/modal/confirmationModal";
+
+const modals = () => {
+  const [CopySuccess, setCopySuccess] = useState(false);
+  const [openBasic, setOpenBasic] = useState(false);
+  const [openConfirmation, setOpenConfirmation] = useState(false);
+  const basicModalRef = useRef();
+  const ConfirmationModalRef = useRef();
+  const [modalId, setModalId] = useState("");
+
+  const openBasicModal = () => {
+    setOpenBasic(true);
+  };
+  const openConfirmationModal = () => {
+    setOpenConfirmation(true);
+  };
+  const closeBasic = () => {
+    setOpenBasic(false);
+  };
+  const closeConfirm = () => {
+    setOpenConfirmation(false);
+  };
+  const onConfirm = () => {
+    setOpenConfirmation(false);
+  };
+  const onCancel = () => {
+    setOpenConfirmation(false);
+  };
+
+  const copyToClipboard = async (El, modalId) => {
+    setCopySuccess(false);
+    try {
+      await navigator.clipboard.writeText(El.current.outerHTML);
+      setCopySuccess(true);
+      setModalId(modalId);
+    } catch (error) {
+      setCopySuccess(false);
+    }
+    setTimeout(() => {
+      setCopySuccess(false);
+      setModalId("");
+    }, 4000);
+  };
+
+  return (
+    <>
+      <Meta
+        title={"DripUI - Tailwind CSS Cards"}
+        description={
+          "DripUI offers a wide range of card made with tailwindCss you can use in your projects"
+        }
+        url={"/components/cards"}
+      />
+      <PageHeading
+        title={"Modal Components"}
+        alt={"modal"}
+        description={
+          "The Modal component is used to display content in a focused dialog overlay, often to get user attention or input. Modals are perfect for confirmations, forms, alerts, or any interactive content that needs to appear above the main page."
+        }
+      />
+      <section className="grid grid-cols-1 gap-2 md:grid-cols-2">
+        {/* Basic Modal */}
+        <div className="flex flex-col gap-2">
+          <p class="pb-4 font-bold">
+            Basic Modal &nbsp;{" "}
+            {CopySuccess && modalId == "basic-modal" ? (
+              <span className=" inline-flex gap-1 text-sm font-thin">
+                Copied! <i className="ri-chat-smile-2-line animate-bounce"></i>{" "}
+              </span>
+            ) : (
+              ""
+            )}
+          </p>
+
+          <div className="border rounded-sm shadow-sm p-4 bg-white-100 relative flex flex-col items-center justify-center gap-2">
+            <button
+              onClick={openBasicModal}
+              class="text-sm px-4 py-3 group inline-flex items-center text-white bg-gray-700 rounded-lg hover:bg-gray-700/90"
+            >
+              Open
+            </button>
+          </div>
+          <div className="text-center m-5">
+            <button
+              onClick={() => copyToClipboard(basicModalRef, "basic-modal")}
+              className="rounded-lg ring-2 w-fit p-2 mx-auto ring-black hover:bg-black hover:text-white transition-colors duration-500 ease-in font-bold"
+            >
+              Copy To clipboard
+            </button>
+          </div>
+        </div>
+        {/* --------------------- */}
+        <BasicModal
+          basicModalRef={basicModalRef}
+          onClose={closeBasic}
+          open={openBasic}
+        />
+        {/* Confirmation Modal */}
+        <div>
+          <p class="pb-4 font-bold">
+            Confirmation modal. &nbsp;{" "}
+            {CopySuccess && modalId == "confirmation-modal" ? (
+              <span className=" inline-flex gap-1 text-sm font-thin">
+                Copied! <i className="ri-chat-smile-2-line animate-bounce"></i>{" "}
+              </span>
+            ) : (
+              ""
+            )}
+          </p>
+
+          <div className="border rounded-sm shadow-sm p-4 bg-white-100 relative flex flex-col items-center justify-center gap-2">
+            <button
+              onClick={openConfirmationModal}
+              class="text-sm px-4 py-3 group inline-flex items-center text-white bg-gray-700 rounded-lg hover:bg-gray-700/90"
+            >
+              Open
+            </button>
+          </div>
+          <div className="text-center m-5 flex flex-col">
+            <button
+              onClick={() =>
+                copyToClipboard(ConfirmationModalRef, "confirmation-modal")
+              }
+              className="rounded-lg ring-2 w-fit p-2 mx-auto ring-black hover:bg-black hover:text-white transition-colors duration-500 ease-in font-bold"
+            >
+              Copy To clipboard
+            </button>
+          </div>
+        </div>
+
+        {/* component */}
+        <ConfirmationModal
+          ConfirmationModalRef={ConfirmationModalRef}
+          onClose={closeConfirm}
+          open={openConfirmation}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+        />
+      </section>
+    </>
+  );
+};
+
+export default modals;
diff --git a/pages/index.js b/pages/index.js
index 400d1bf..3a3296a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,25 +1,25 @@
-import Head from 'next/head'
-import Link from 'next/link'
-import Meta from '../components/layout/meta'
-import ComponentListing from '../components/other/ComponentListing'
-import HeroSection from '../components/other/HeroSection'
-
+import Head from "next/head";
+import Link from "next/link";
+import Meta from "../components/layout/meta";
+import ComponentListing from "../components/other/ComponentListing";
+import HeroSection from "../components/other/HeroSection";
 
 export default function Home() {
-
   return (
     <>
-      <Meta 
-        title={'DripUI - Tailwind Components'} 
-        description="DripUI a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing pages!" 
-        />
-      
+      <Meta
+        title={"DripUI - Tailwind Components"}
+        description="DripUI a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing pages!"
+      />
+
       <HeroSection />
-      <section className='mt-16 md:mt-4 xl:px-6'>
-        <h2 className='text-3xl'>Components</h2>
-        <p className="mt-2 mb-4 text-lg text-drip-gray-dark">UI Tailwind CSS components, that will help you save your time</p>
-        <ComponentListing featured={7}/>
+      <section className="mt-16 md:mt-4 xl:px-6">
+        <h2 className="text-3xl">Components</h2>
+        <p className="mt-2 mb-4 text-lg text-drip-gray-dark">
+          UI Tailwind CSS components, that will help you save your time
+        </p>
+        <ComponentListing featured={8} />
       </section>
     </>
-  )
+  );
 }