diff --git a/frontend/colors.js b/frontend/colors.js
index 37d0bd5..c8d08b4 100644
--- a/frontend/colors.js
+++ b/frontend/colors.js
@@ -6,23 +6,23 @@ module.exports = {
   blue: {
     1: "#D4DDF1",
     2: "#B0BBD8",
-    3: "#A4C8E1",
-    4: "#B7D3E3",
     5: "#7584AE",
-    6: "#515E84",
-    7: "#6575A5",
-    8: "#3D4663",
-    9: "#6FA3D8",
-    10: "#4A8BBE",
-    11: "#282F42",
-    12: "#3B7A99",
-    13: "#1F4E79",
-    14: "#0D3B66",
-    15: "#4A4CB2",
+    3: "#6575A5",
+    4: "#515E84",
+    5: "#3D4663",
+    6: "#282F42",
+    7: "#06075A",
+    8: "#4A4CB2",
+    9: "#A4C8E1",
+    10: "#B7D3E3",
+    11: "#6FA3D8",
+    12: "#4A8BBE",
+    13: "#3B7A99",
+    14: "#1F4E79",
+    15: "#0D3B66",
     16: "#8FB8D8",
     17: "#6FA3D8",
     18: "#1F4E79",
-    19: "#06075A",
   },
   yellow: {
     1: "#F5F5DC",
@@ -39,9 +39,9 @@ module.exports = {
   grey: {
     1: "#A9AFC3",
     2: "#B3B8D0",
-    3: "#B2B2B2",
-    4: "#D5DBDB",
-    5: "#6C757D",
+    3: "#6C757D",
+    4: "#B2B2B2",
+    5: "#D5DBDB",
     6: "#A6A6A6",
     7: "#8C8C8C",
     8: "#7D7D7D",
diff --git a/frontend/src/components/cart/CartItem.jsx b/frontend/src/components/cart/CartItem.jsx
index 66d50b1..45188ed 100644
--- a/frontend/src/components/cart/CartItem.jsx
+++ b/frontend/src/components/cart/CartItem.jsx
@@ -18,7 +18,7 @@ const CartItem = (props) => {
 
     return (
         <>
-            <div className="cart_item">
+            <div className="cart_item bg-blue">
                 <figure className="cart_item_img">
                     <Link to={`/all-medicines/medicine-details/${id}`}>
                         <img src={images[0]} alt="product-img" />
diff --git a/frontend/src/components/cart/EmptyView.jsx b/frontend/src/components/cart/EmptyView.jsx
index 55a2a92..be0883c 100644
--- a/frontend/src/components/cart/EmptyView.jsx
+++ b/frontend/src/components/cart/EmptyView.jsx
@@ -1,31 +1,35 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { Link } from "react-router-dom";
 
 const EmptyView = (props) => {
+  const { msg, link, btnText } = props;
 
-    const { msg, link, btnText } = props;
-
-    return (
-        <>
-            <div className="empty_view_wrapper">
-                <div className="empty_view_img">
-                    <img src='empty-cart.png' alt="empty-cart" />
-                </div>
-                <h2>{msg}</h2>
-                <div className='empty_msg'>
-                    <p>Looks like you have not added anything in your cart.</p>
-                    <p>Go ahead and explore latest medicines.</p>
-                </div>
-                {
-                    link && (
-                        <Link to={link} className="btn start_shopping_btn">
-                            {btnText}
-                        </Link>
-                    )
-                }
-            </div>
-        </>
-    );
+  return (
+    <>
+      <div className="grid place-items-center gap-[2rem]">
+        <div className="w-[90vw] max-w-[400px]">
+          <img
+            src="empty-cart.png"
+            alt="empty-cart"
+            className="rounded-[80px]"
+          />
+        </div>
+        <h2>{msg}</h2>
+        <div className="text-center">
+          <p>Looks like you have not added anything in your cart.</p>
+          <p>Go ahead and explore latest medicines.</p>
+        </div>
+        {link && (
+          <Link
+            to={link}
+            className="inline-block bg-blue-9 px-2 py-3 text-blue-1 rounded-[3px] transition-colors duration-200 ease-out hover:bg-blue-7"
+          >
+            {btnText}
+          </Link>
+        )}
+      </div>
+    </>
+  );
 };
 
-export default EmptyView;
\ No newline at end of file
+export default EmptyView;
diff --git a/frontend/src/pages/Cart.jsx b/frontend/src/pages/Cart.jsx
index ddc5268..7639a2f 100644
--- a/frontend/src/pages/Cart.jsx
+++ b/frontend/src/pages/Cart.jsx
@@ -11,40 +11,45 @@ import commonContext from "../contexts/common/commonContext";
 import useScrollDisable from "../hooks/useScrollDisable";
 
 const Cart = () => {
-
   const { isLoading, toggleLoading } = useContext(commonContext);
 
   useDocTitle("Cart");
 
-  const navigate = useNavigate(); 
-  const userNotExists = localStorage.getItem("usertype")===undefined || localStorage.getItem("usertype")===null;
+  const navigate = useNavigate();
+  const userNotExists =
+    localStorage.getItem("usertype") === undefined ||
+    localStorage.getItem("usertype") === null;
   const [cart, setCart] = useState([]);
-  const { cartItems, clearCart, placeOrder, setCartItems } = useContext(cartContext);
+  const { cartItems, clearCart, placeOrder, setCartItems } =
+    useContext(cartContext);
 
   useEffect(() => {
-      if(userNotExists) {
-          navigate("/");
-      } else {
-          toggleLoading(true);
-          if (cart !== cartItems) {
-            httpClient.post('add_to_cart', {email: localStorage.getItem("email"), cart: cartItems})
-            .then((res) => {
-              setCartItems(res.data.cart);
-              setCart(res.data.cart);
-              toggleLoading(false);
-            })
-            .catch((err) => { 
-              console.log(err);
-              toggleLoading(false);
-            });
-          }
+    if (userNotExists) {
+      navigate("/");
+    } else {
+      toggleLoading(true);
+      if (cart !== cartItems) {
+        httpClient
+          .post("add_to_cart", {
+            email: localStorage.getItem("email"),
+            cart: cartItems,
+          })
+          .then((res) => {
+            setCartItems(res.data.cart);
+            setCart(res.data.cart);
+            toggleLoading(false);
+          })
+          .catch((err) => {
+            console.log(err);
+            toggleLoading(false);
+          });
       }
-      //eslint-disable-next-line
+    }
+    //eslint-disable-next-line
   }, []);
 
-
   useScrollDisable(isLoading);
-  
+
   const cartQuantity = cartItems.length;
 
   // total original price
@@ -54,41 +59,49 @@ const Cart = () => {
   const [balance, setBalance] = useState(0);
   const [addBalance, setAddBalance] = useState(false);
   const [totalBalance, setTotalBalance] = useState(cartTotal);
-  
-  
+
   useEffect(() => {
     setCartTotal(0);
     setTotalBalance(0);
     cartItems.forEach((item) => {
-      setCartTotal(prev => prev + (item.price * item.quantity));
-      setTotalBalance(prev => prev + (item.price * item.quantity));  
+      setCartTotal((prev) => prev + item.price * item.quantity);
+      setTotalBalance((prev) => prev + item.price * item.quantity);
     });
     // console.log(cartItems);
-    httpClient.post('/get_wallet', {email: localStorage.getItem("email")})
-    .then((res) => {
-      setBalance(Number(res.data.wallet))
-    });
+    httpClient
+      .post("/get_wallet", { email: localStorage.getItem("email") })
+      .then((res) => {
+        setBalance(Number(res.data.wallet));
+      });
   }, [cartItems]);
 
-  
   // setTotalBalance(cartTotal);
 
-
   const [isCheckoutLoading, setIsCheckoutLoading] = useState(false);
   const [isAlert, setIsAlert] = useState(0);
 
   const deleteAll = () => {
-    httpClient.post('delete_all_cart', {email: localStorage.getItem("email")})
-  }
+    httpClient.post("delete_all_cart", {
+      email: localStorage.getItem("email"),
+    });
+  };
 
-  if(isLoading) {
+  if (isLoading) {
     return <Preloader />;
-  };
-  
+  }
+
   return (
     <>
-      <section id="cart" className="section">
-        <div className="container">
+      <section id="" className="text-blue-8 py-32 overflow-hidden">
+        <div
+          className="max-w-[1440px] mx-auto px-3
+            xl:max-w-[1280px]
+            lg:max-w-[1024px]
+            md:max-w-[768px]
+            sm:max-w-[640px]
+            xs:w-full
+          "
+        >
           {cartQuantity === 0 ? (
             <EmptyView
               msg="Your Cart is Empty"
@@ -105,7 +118,14 @@ const Cart = () => {
 
               <div className="cart_right_col">
                 <div className="clear_cart_btn">
-                  <button onClick={() => {clearCart();deleteAll()} }>Clear Cart</button>
+                  <button
+                    onClick={() => {
+                      clearCart();
+                      deleteAll();
+                    }}
+                  >
+                    Clear Cart
+                  </button>
                 </div>
                 <div className="order_summary">
                   <h3>
@@ -128,20 +148,27 @@ const Cart = () => {
                     </div>
                   </div>
 
-                  <div onClick={() => {
-                    console.log(cartTotal);
-                    if(!addBalance) {
-                      if(cartTotal <= balance) {
-                        setTotalBalance(0);
+                  <div
+                    onClick={() => {
+                      console.log(cartTotal);
+                      if (!addBalance) {
+                        if (cartTotal <= balance) {
+                          setTotalBalance(0);
+                        } else {
+                          setTotalBalance(cartTotal - balance);
+                        }
                       } else {
-                        setTotalBalance(cartTotal - balance);
+                        setTotalBalance(cartTotal);
                       }
-                    } else {
-                      setTotalBalance(cartTotal);
-                    }
-                    setAddBalance(prev => !prev);
-                  }} className="use-balance-div">
-                    <input type="checkbox" checked={addBalance} onChange={() => {}}/>
+                      setAddBalance((prev) => !prev);
+                    }}
+                    className="use-balance-div"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={addBalance}
+                      onChange={() => {}}
+                    />
                     <p>Use Wallet Money {`(₹ ${balance})`}</p>
                   </div>
 
@@ -152,18 +179,27 @@ const Cart = () => {
                       isCheckoutLoading && "active"
                     }`}
                     onClick={() => {
-                      if (totalBalance===0){
-                        httpClient.post('/debit_wallet', {email: localStorage.getItem("email"), walletAmount: cartTotal})
+                      if (totalBalance === 0) {
+                        httpClient.post("/debit_wallet", {
+                          email: localStorage.getItem("email"),
+                          walletAmount: cartTotal,
+                        });
                         localStorage.setItem("totalPrice", cartTotal);
                         // cartItems.forEach((item) => {
                         //   placeOrder(item);
                         // });
-                        localStorage.setItem("orders", JSON.stringify(cartItems))
-                        window.location.href = "https://gfg-sfi.onrender.com/success";
-                      } 
-                      else{
+                        localStorage.setItem(
+                          "orders",
+                          JSON.stringify(cartItems)
+                        );
+                        window.location.href =
+                          "https://gfg-sfi.onrender.com/success";
+                      } else {
                         setIsCheckoutLoading(true);
-                        httpClient.post('/debit_wallet', {email: localStorage.getItem("email"), walletAmount: balance})
+                        httpClient.post("/debit_wallet", {
+                          email: localStorage.getItem("email"),
+                          walletAmount: balance,
+                        });
                         setTimeout(() => {
                           localStorage.setItem("totalPrice", cartTotal);
                           cartItems.forEach((item) => {
@@ -174,7 +210,6 @@ const Cart = () => {
                           setIsAlert(2);
                         }, 2000);
                       }
-                      
                     }}
                   >
                     {isCheckoutLoading ? (
diff --git a/frontend/src/styles/components/_emptyview.scss b/frontend/src/styles/components/_emptyview.scss
deleted file mode 100644
index a16ef36..0000000
--- a/frontend/src/styles/components/_emptyview.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.empty_view_wrapper {
-    @include centered;
-    gap: 2rem;
-}
-
-.empty_view_icon {
-    font-size: 10rem;
-    color: var(--main-color-2);
-}
-
-.empty_view_img {
-    width: min(400px, 90vw);
-
-    img {
-        border-radius: 80px;
-    }
-}
-
-.empty_msg {
-    text-align: center;
-}
-
-.start_shopping_btn {
-    background-color: var(--blue-color-9);
-}
\ No newline at end of file
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 578d7b6..7f82ff2 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -9,7 +9,6 @@
 @import "./components/header";
 @import "./components/backtop";
 @import "./components/form";
-@import "./components/emptyview";
 @import "./components/filterbar";
 @import "./components/searchbar";
 @import "./components/preloader";