diff --git a/src/components/User/Cart/index.tsx b/src/components/User/Cart/index.tsx
index fe43911..5b2b28c 100644
--- a/src/components/User/Cart/index.tsx
+++ b/src/components/User/Cart/index.tsx
@@ -168,7 +168,7 @@ function index() {
               </div>
             </div>
 
-            <div className="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full sticky">
+            <div className="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full sticky leading-normal">
               <div
                 className="space-y-4 rounded-lg border border-gray-200 dark:border-foodbg dark:bg-foodbg p-4 shadow-sm sm:p-6 backdrop-blur-md"
                 style={{ backgroundColor: 'rgba(255, 255, 255, 0.01)' }}
@@ -226,12 +226,9 @@ function index() {
                   </dl>
                 </div>
 
-                <a
-                  href="#"
-                  className="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
-                >
+                <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 px-10 inline-flex w-full items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary-300">
                   Proceed to Checkout
-                </a>
+                </Button>
 
                 <div className="flex items-center justify-center gap-2">
                   <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
@@ -239,7 +236,7 @@ function index() {
                     or{' '}
                   </span>
                   <a
-                    href="#"
+                    href="/foodItems"
                     title=""
                     className="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500"
                   >
diff --git a/src/components/User/Header/Cart.tsx b/src/components/User/Header/Cart.tsx
new file mode 100644
index 0000000..d572b1a
--- /dev/null
+++ b/src/components/User/Header/Cart.tsx
@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+
+const Cart = () => {
+  return (
+    <Link
+      className="flex flex-col pl-4 pr-0 pt-2 pb-2 dark:bg-meta-4 items-center justify-center rounded-full border-[0.5px] dark:border-strokedark"
+      to="/cart"
+    >
+      <svg
+        className="-ms-2 me-2 h-5 w-5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7h-1M8 7h-.688M13 5v4m-2-2h4"
+        />
+      </svg>
+    </Link>
+  );
+};
+
+export default Cart;
diff --git a/src/components/User/Header/index.tsx b/src/components/User/Header/index.tsx
index 88f0f28..9934eac 100644
--- a/src/components/User/Header/index.tsx
+++ b/src/components/User/Header/index.tsx
@@ -2,6 +2,7 @@ import DropdownNotification from './DropdownNotification';
 import DropdownUser from './DropdownUser';
 import DarkModeSwitcher from './DarkModeSwitcher';
 import { Link } from 'react-router-dom';
+import Cart from './Cart';
 
 const Header = (props: {
   sidebarOpen: string | boolean | undefined;
@@ -101,6 +102,7 @@ const Header = (props: {
           <ul className="flex items-center gap-3 2xsm:gap-7">
             <DropdownUser />
             <DarkModeSwitcher />
+            <Cart />
             <DropdownNotification />
           </ul>
           {/* <!-- User Area --> */}