diff --git a/frontend/src/components/vault/gas-fee/GasFee.jsx b/frontend/src/components/vault/gas-fee/GasFee.jsx
index 99fdb89e..534c1fb7 100644
--- a/frontend/src/components/vault/gas-fee/GasFee.jsx
+++ b/frontend/src/components/vault/gas-fee/GasFee.jsx
@@ -1,16 +1,13 @@
 import React from 'react';
 import SettingIcon from '@/assets/icons/settings.svg?react';
-import './gasFee.css';
 
 export default function GasFee() {
   return (
-    <div className="main-card-footer">
-      <div className="gas-fee-container">
-        <div className="gas-fee-circle">
-          <SettingIcon className="gas-fee-icon" />
-        </div>
-        <div className="gas-fee-title">Gas fee: 0.00 STRK</div>
+    <div className="w-full flex flex-row  items-center justify-between gap-2 py-3 px-2 border-t border-[#36294e]">
+      <div className="bg-[#201338] rounded-full p-2">
+        <SettingIcon />
       </div>
+      <div className="text-sm text-[#83919F] font-normal ">Gas fee: 0.00 STRK</div>
     </div>
   );
 }
diff --git a/frontend/src/components/vault/gas-fee/gasFee.css b/frontend/src/components/vault/gas-fee/gasFee.css
deleted file mode 100644
index ec08a5d8..00000000
--- a/frontend/src/components/vault/gas-fee/gasFee.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.gas-fee-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0rem 3rem;
-  padding-bottom: 1rem;
-}
-
-.gas-fee-circle {
-  width: 32px;
-  height: 32px;
-  background-color: var(--footer-divider-bg);
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-}
-
-.gas-fee-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 16px;
-  height: 16px;
-}
-
-.gas-fee-title {
-  color: var(--stormy-gray);
-  font-size: 12px;
-  font-weight: 400;
-}
diff --git a/frontend/src/components/vault/metric-card/MetricCard.jsx b/frontend/src/components/vault/metric-card/MetricCard.jsx
index 8b1f577d..4ea3c644 100644
--- a/frontend/src/components/vault/metric-card/MetricCard.jsx
+++ b/frontend/src/components/vault/metric-card/MetricCard.jsx
@@ -3,7 +3,7 @@ import './metricCard.css';
 
 export default function MetricCard({ title, value }) {
   return (
-    <div className="metric-card">
+    <div className="metric-card" >
       <div className="card-header">
         <span className="label">{title}</span>
       </div>
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
index 004b94a5..debece99 100644
--- a/frontend/src/globals.css
+++ b/frontend/src/globals.css
@@ -163,14 +163,15 @@ a.svelte-1mtuslq.svelte-1mtuslq {
   --color-second-primary: #fdfdfd;
   --color-plain-button-bg: #0e0a16;
   --color-header-button-bg: #120721;
+  --color-btn-dark: rgb(18, 7, 33);
 
-  --font-text: "Rethink Sans", sans-serif;
-  --font-primary: "Open Sans", sans-serif;
-  --font-third: "Allerta Stencil", sans-serif;
-  --font-inter: "Inter", sans-serif;
+  --font-text: 'Rethink Sans', sans-serif;
+  --font-primary: 'Open Sans', sans-serif;
+  --font-third: 'Allerta Stencil', sans-serif;
+  --font-inter: 'Inter', sans-serif;
 
-  --bg-app: url("../public/desktop-background.png");
-  --bg-app-mobile: url("../public/mobile-background.png");
+  --bg-app: url('../public/desktop-background.png');
+  --bg-app-mobile: url('../public/mobile-background.png');
   --bg-main-gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
   --bg-button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
   --bg-button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
@@ -185,6 +186,7 @@ a.svelte-1mtuslq.svelte-1mtuslq {
   --shadow-card: inset 4px 4px 9px 0 rgba(153, 234, 255, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
   --blur-card: 42.1875px;
   --blur-backdrop: 12px;
+  
 
   --border-purple: 1px;
   --border-midnight-purple: 1px;
@@ -192,4 +194,4 @@ a.svelte-1mtuslq.svelte-1mtuslq {
 
   --z-9999: 9999;
   --z-100: 100;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/stake/Stake.jsx b/frontend/src/pages/stake/Stake.jsx
index af880953..6283543a 100644
--- a/frontend/src/pages/stake/Stake.jsx
+++ b/frontend/src/pages/stake/Stake.jsx
@@ -1,19 +1,19 @@
 import React, { useState } from 'react';
-import MetricCard from '@/components/vault/stake-card/StakeCard';
+import MetricCard from '@/components/vault/metric-card/MetricCard';
 import STRK from '@/assets/icons/strk.svg';
 import USDCc from '@/assets/icons/apy_icon.svg';
-import './stake.css';
 import { VaultLayout } from '@/components/vault/VaultLayout';
-import { Button } from '@/components/ui/custom-button/Button';
+import { cn } from '@/utils/cn';
 import GasFee from '@/components/vault/gas-fee/GasFee';
-import BalanceCards from '@/components/ui/balance-cards/BalanceCards';
 
 function Stake() {
   const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
   const [amount, setAmount] = useState('0');
   const [showDrop, setShowDrop] = useState(false);
 
-  const networks = [{ name: 'Starknet', image: STRK }];
+  const networks = [
+    { name: 'Starknet', image: STRK },
+  ];
   const handleChange = (network) => {
     setSelectedNetwork(network.name);
   };
@@ -27,99 +27,107 @@ function Stake() {
   };
   return (
     <VaultLayout>
-      <div className="stake-wrapper">
-        <div className="stake-container">
-          <div className="balance-display-container">
-            <div className="large-screen-balance">
-              <div className="main-container">
-                <div className="top-cards">
-                  <MetricCard title="STRK Balance" value="0.046731" icon={STRK} />
-                  <MetricCard title="APY Balance" value="0.046731" icon={USDCc} />
-                </div>
-              </div>
-            </div>
-            <div className="mobile-screen-balance">
-              <BalanceCards />
-            </div>
+      <div className="w-screen h-full  min-h-screen p-[7%]  2xl:h-screen flex flex-col justify-center items-center lg:ml-32">
+        <div className='w-full max-w-[650px] h-full flex flex-col items-center justify-center' >
+          <h1 className="text-2xl text-white text-center mt-5 mb-10">zkLend Staking</h1>
+          <div className="w-full flex items-stretch h-[103px] justify-between space-x-5    ">
+            <MetricCard title="STRK Balance" value="0.046731" icon={STRK} />
+            <MetricCard title="APY Balance" value="0.046731" icon={USDCc} />
           </div>
-          <div className="form">
-            <h1 className="stake-title">Please submit your leverage details</h1>
-            <div className="main-stake-card">
-              <div
-                onClick={() => setShowDrop(!showDrop)}
-                className={showDrop ? 'clicked-network-selector-container' : 'network-selector-container'}
-              >
-                <div className="network-selector">
-                  <div className="selected-network">
-                    <img
-                      src={networks.find((network) => network.name === selectedNetwork)?.image}
-                      alt={selectedNetwork}
-                      className="network-icon"
-                    />
-                    <span>{selectedNetwork}</span>
+
+          <div className="mt-1.5">
+            <p className="text-white text-center text-lg mt-3 mb-2">Please submit your leverage details</p>
+            <div className="border border-[#36294e] p-5 pt-2 px-7 rounded-lg mt-5 w-[650px]">
+
+
+              <div className="w-full">
+                <div
+                  className={cn(
+                    'py-1 border-b border-b-[#36294E] relative',
+                    showDrop ? 'clicked-network-selector-container  w-full' : 'network-selector-container'
+                  )}
+                  onMouseEnter={() => setShowDrop(true)}
+                  onMouseLeave={() => setShowDrop(false)}
+                >
+                  <div className=" flex items-center justify-between gap-3 bg-[#120721]  text-white py-3 px-4 cursor-pointer text-[1rem] w-full relative z-[10] ">
+                    <div className=" flex items-center gap-3">
+                      <img
+                        src={networks.find((network) => network.name === selectedNetwork)?.image}
+                        alt={selectedNetwork}
+                        className="network-icon w-6 h-6 rounded-full  "
+                      />
+                      <span>{selectedNetwork}</span>
+                    </div>
+                    <svg
+                      className={`chevron transition-transform duration-300 ease-in-out ml-auto   transform ${showDrop ? "rotate-[180deg] " : "rotate-[0deg]"} `}
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M6 9L12 15L18 9"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
                   </div>
-                  <svg
-                    className="chevron"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M6 9L12 15L18 9"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </div>
 
-                <div className="network-dropdown">
-                  {networks.map((network) => (
-                    <div key={network.name} className="network-option" onClick={() => handleChange(network)}>
-                      <img src={network.image} alt={network.name} className="network-icon" />
-                      <span>{network.name}</span>
+                  {showDrop && (
+                    <div className="network-dropdown absolute top-[100%] left-0 w-full rounded-sm z-[1] shadow-custom group-hover:block">
+                      {networks.map((network) => (
+                        <div
+                          key={network.name}
+                          className={`network-option py-[0.75rem] px-[1rem] my-3 bg-[#83919f] text-[#0b0c10] flex  items-center gap-[0.75rem] cursor-pointer rounded-[2rem] transition-transform duration-300 ease-in-out ${showDrop ? 'visibile' : 'invisible'} `}
+                          onClick={() => handleChange(network)}
+                        >
+                          <img src={network.image} alt={network.name} className="network-icon" />
+                          <span>{network.name}</span>
+                        </div>
+                      ))}
                     </div>
-                  ))}
+                  )}
                 </div>
               </div>
 
-              <div className="amount-input" aria-labelledby="amount-input-label">
-                <input
-                  type="text"
-                  id="amount-field"
-                  value={amount}
-                  onChange={handleAmountChange}
-                  pattern="^\d*\.?\d*$"
-                  className="amount-field"
-                  aria-describedby="currency-symbol"
-                  placeholder="0.00"
-                />
-                <span id="currency-symbol" className="currency">
-                  STRK
-                </span>
+              <div
+                className="w h-[158px] flex flex-row justify-center items-center my-15"
+                aria-labelledby="amount-input-label"
+              >
+                <label className="w-full text-[#393942] min-w-[142px] max-w-[140px]  font-semibold flex flex-col  justify-center gap-3 ">
+                  <input
+                    type="text"
+                    id="amount-field"
+                    value={amount}
+                    onChange={handleAmountChange}
+                    pattern="^\d*\.?\d*$"
+                    className="amount-field  bg-transparent border-none text-[#83919f] text-[64px] font-semibold outline-none text-center w-full "
+                    aria-describedby="currency-symbol"
+                    placeholder="0.00"
+                    style={{
+                      fontSize: '64px',
+                    }}
+                  />
+                  <h3 className="font-semibold text-sm text-center">$0.00 APY / year</h3>
+                </label>
+                <div className="self-start text-[#393942] font-medium text-sm  ">STRK</div>
               </div>
 
-              <div className="apy-rate">$0.00 APY / year</div>
-              <div className="parent-divider1">
-                <div className="divider1"></div>
-              </div>
 
               <GasFee />
             </div>
-          </div>
-          <div className="can-stk">
-            <Button variant="secondary" size="lg" className="cancel">
-              {' '}
-              Cancel
-            </Button>
-            <Button variant="secondary" size="lg" className="stake-button1">
-              Stake
-            </Button>
+            <div class="relative p-[1px] rounded-lg bg-gradient-to-r from-[#74d6fd] to-[#e01dee] mb-5 mt-5 
+hover:from-[#e01dee] hover:to-[#74d6fd] transition duration-100 ease-in-out ">
+              <button class="w-full h-full bg-[rgb(18,7,33)] text-white px-4 py-4 rounded-lg font-semibold cursor-pointer">
+                Stake
+              </button>
+            </div>
           </div>
         </div>
+        
       </div>
     </VaultLayout>
   );
diff --git a/frontend/src/pages/stake/stake.css b/frontend/src/pages/stake/stake.css
deleted file mode 100644
index f26f5dd5..00000000
--- a/frontend/src/pages/stake/stake.css
+++ /dev/null
@@ -1,362 +0,0 @@
-.stake-wrapper {
-  background-size: cover;
-  background-position: center 39%;
-  min-height: 125vh;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: calc(100vw - 372px);
-  margin-left: 372px;
-}
-
-@media (max-width: 1024px) {
-  .stake-wrapper {
-    width: 100vw;
-    margin-left: 0;
-    justify-content: center;
-  }
-}
-
-.token-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 5px;
-  border-radius: 2000px;
-  background-color: hsla(261, 49%, 15%, 1);
-}
-
-.network-selector-container {
-  position: relative;
-  width: 100%;
-}
-
-.main-stake-card {
-  padding: 4px 4px;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  border: var(--midnight-purple-border);
-  border-radius: 8px;
-}
-
-.network-selector {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  background: var(--bg);
-  border-bottom: 1px solid var(--light-purple);
-  color: white;
-  padding: 0.75rem 1rem;
-  cursor: pointer;
-  font-size: 1rem;
-  width: 100%;
-  position: relative;
-  z-index: 10;
-}
-
-.network-selector .selected-network {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.network-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-}
-
-.chevron {
-  margin-left: auto;
-  transition: transform 0.3s ease;
-}
-
-.network-dropdown {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  background: var(--gray);
-  border-radius: 2rem;
-  z-index: 1;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.network-dropdown .network-option {
-  padding: 0.75rem 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  cursor: pointer;
-  border-radius: 2rem;
-  transition: background 0.3s;
-}
-
-.network-dropdown .network-option:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.network-selector-container:hover .network-dropdown {
-  display: block;
-}
-
-.network-selector-container:hover .chevron {
-  transform: rotate(180deg);
-}
-
-.amount-input {
-  position: relative;
-  width: 100%;
-  max-width: 400px;
-  margin: 2rem auto;
-  text-align: center;
-}
-
-.amount-field {
-  background: transparent;
-  border: none;
-  color: var(--gray);
-  font-size: 64px;
-  font-weight: 600;
-  outline: none;
-  text-align: center;
-  width: 100%;
-}
-
-.currency {
-  position: absolute;
-  color: var(--dark-gray);
-  right: 31%;
-  top: 18%;
-  transform: translateY(-50%);
-  opacity: 0.5;
-  font-size: 16px;
-  line-height: 20.83px;
-  z-index: 999999;
-}
-
-.apy-rate {
-  color: var(--dark-gray);
-  font-size: 0.875rem;
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-.balance-display-container .large-screen-balance {
-  display: block;
-}
-
-.balance-display-container .mobile-screen-balance {
-  display: none;
-}
-
-.divider1 {
-  height: 1px;
-  width: 80%;
-  background: var(--footer-divider-bg);
-  margin: auto;
-}
-/* .stake-wrapper {
-  height: 120vh;
-  overflow-y: auto;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  width: 100vw;
-  padding: 5rem 24px; 
-} */
-
-.main-container {
-  width: 642px;
-  gap: 24px;
-  padding-top: 37px;
-  border-radius: 20px;
-  color: var(--primary);
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-}
-.top-cards {
-  display: flex;
-  gap: 24px;
-}
-.stake-card {
-  width: 309px;
-  height: 101px;
-  background: var(--header-button-bg);
-  border: var(--midnight-purple-border);
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 24px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.stake-title {
-  font-size: 14px;
-  font-weight: 400;
-  color: var(--primary);
-  text-align: center;
-  padding: 1rem 0rem;
-}
-.stake-button1 {
-  width: 642px;
-  height: 60px;
-  padding: 16px 24px;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 14px;
-  margin-top: 2rem;
-}
-
-.cancel {
-  display: none;
-}
-
-/********Responsiveness  **********/
-
-@media (min-width: 769px) and (max-width: 1024px) {
-  .stake-wrapper {
-    margin-left: 0px;
-  }
-}
-
-/* Mobile view */
-@media (max-width: 768px) {
-  .sidenav {
-    display: none;
-  }
-  .top-cards {
-    width: 100%;
-    display: flex;
-    gap: 16px;
-    justify-content: space-between;
-    height: 88px;
-  }
-
-  .main-container {
-    width: 100%;
-    padding: 0;
-  }
-
-  .stake-card {
-    width: 167px;
-    height: 88px;
-    padding: 16px 24px;
-    border: 1px;
-    background: var(--header-button-bg);
-    border: var(--midnight-purple-border);
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 16px;
-    display: flex;
-    justify-content: center;
-  }
-
-  .stake-wrapper {
-    top: 80px;
-    display: flex;
-    flex-direction: column-reverse;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 3rem 24px;
-    margin-left: 0px;
-  }
-
-  .stake-container {
-    width: 100%;
-    max-width: 390px;
-    height: 610px;
-    margin: 0 auto;
-    margin-bottom: 2rem;
-  }
-
-  .stake-title {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--primary);
-    display: block;
-    margin: 0 auto;
-    text-align: center;
-    align-items: center;
-    padding: 1.5rem 0rem;
-  }
-
-  .can-stk {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 2rem;
-  }
-  .cancel {
-    width: 167px;
-    height: 60px;
-    padding: 16px 24px;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 14px;
-    border-color: #36294e;
-    color: white;
-    display: block;
-  }
-  .stake-button1 {
-    width: 167px;
-    height: 60px;
-    padding: 16px 24px;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 14px;
-    margin-top: 0px;
-  }
-  .form {
-    margin-bottom: 2rem;
-    width: 100%;
-    display: block;
-    margin: 0 auto;
-  }
-
-  .divider1 {
-    height: 1px;
-    width: 80%;
-    background: var(--footer-divider-bg);
-    margin: auto;
-  }
-}
-
-.amount-field {
-  font-size: 24px;
-  padding: 10px;
-}
-
-@media (max-width: 678px) {
-  .main-container {
-    padding-top: 0px;
-  }
-
-  .top-cards {
-    gap: 8px;
-  }
-}
-
-@media (max-width: 480px) {
-  .top-cards {
-    gap: 10px;
-  }
-}
-
-@media (max-width: 400px) {
-}
-
-@media (max-width: 320px) {
-}
diff --git a/frontend/src/pages/withdraw/Withdraw.jsx b/frontend/src/pages/withdraw/Withdraw.jsx
index ebb49e73..35cda791 100644
--- a/frontend/src/pages/withdraw/Withdraw.jsx
+++ b/frontend/src/pages/withdraw/Withdraw.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import './withdraw.css';
 import DiamondIcon from '@/assets/icons/diamond.svg?react';
 import TimeIcon from '@/assets/icons/time.svg?react';
 import SettingIcon from '@/assets/icons/settings.svg?react';
@@ -9,55 +8,64 @@ import { VaultLayout } from '@/components/vault/VaultLayout';
 export default function Withdraw() {
   return (
     <VaultLayout>
-      <div className="withdraw-wrapper">
-        <div className="withdraw-container">
-          <h1 className="withdrawal-title">zkLend Withdraw</h1>
-          <div className="main-container-withdraw">
-            <div className="top-cards-withdraw">
-              <MetricCard title="Total Amount staked" value="324,909,894" />
-              <MetricCard title="Daily Boost Multiplier" value="0.5%" />
-            </div>
+      <div className="w-screen h-full 2xl:h-screen flex flex-col justify-center items-center lg:ml-32">
+        <div>
+          <h1 className="text-2xl text-white text-center mt-5 mb-10">zKLend Withdraw</h1>
+          <div className="flex items-center space-x-5">
+            <MetricCard title="Total Amount staked" value="324,909,894" />
+            <MetricCard title="Daily Boost Multiplier" value="0.5%" />
           </div>
-          <h1 className="withdraw-title">Stake withdrawal</h1>
-          <div className="main-card-withdraw">
-            <div className="amount-stack-card">
-              <div className="amount-stack-card-title-container">
-                <div className="card-header">
-                  <DiamondIcon className="card-icon" />
-                  <span className="label">Your Stack</span>
-                </div>
-                <div className="card-value">
-                  <span className="top-card-value">13.89</span>
-                </div>
+        </div>
+        <div className="mt-1.5">
+          <p className="text-white text-center text-lg mt-3 -mb-5">Stake Withdrawal</p>
+          <div className="border border-[#36294e] p-5 rounded-lg mt-5">
+            <div className="flex items-center justify-between bg-[#201338] border border-[#36294e] py-10 px-5 rounded-lg w-[600px]">
+              <div className="flex flex-col items-center">
+                <p className="flex items-center space-x-2">
+                  <span>
+                    <DiamondIcon />
+                  </span>
+                  <span className="text-[#83919f]">Your Stake</span>
+                </p>
+                <p className="text-white text-2xl font-semibold">13.89</p>
               </div>
-              <div className="amount-stack-card-title-container">
-                <div className="card-header">
-                  <TimeIcon className="card-icon" />
-                  <span className="label">Your Boost</span>
-                </div>
-                <div className="card-value">
-                  <span className="top-card-value">132.43%</span>
-                </div>
+              <div className="flex flex-col items-center">
+                <p className="flex items-center space-x-2">
+                  <span>
+                    <TimeIcon />
+                  </span>
+                  <span className="text-[#83919f]">Your Boost</span>
+                </p>
+                <p className="text-white text-2xl font-semibold">132.43%</p>
               </div>
             </div>
-            <div className="withdraw-input-container">
-              <div className="withdraw-input-title">Input Unstake Amount</div>
-              <input type="text" className="withdraw-input" placeholder="Enter Amount to Withdraw" />
+
+            <div className="flex flex-col items-start">
+              <label htmlFor="withdraw-input" className="text-[#83919f] mt-10 -mb-3.5">
+                Input Unstake Amount
+              </label>
+              <input
+                type="text"
+                id="withdraw-input"
+                placeholder="Enter Amount to Withdraw"
+                className="border border-[#36294e] w-full h-12 rounded-lg mt-4 px-3 py-7 placeholder:text-[#83919f] text-[#83919f]"
+              />
             </div>
-            <div className="main-card-footer">
-              <div className="divider"></div>
-              <div className="settings-fee-container">
-                <div className="setting-circle">
-                  <SettingIcon className="setting-icon" />
+
+            <div>
+              <div className="w-full h-0.5 bg-[#201338] mt-16"></div>
+              <div className="mt-3 w-full flex justify-between items-center">
+                <div className="bg-[#201338] rounded-full p-2">
+                  <SettingIcon />
                 </div>
-                <div className="fee-title">Gas fee: 0.00 STRK</div>
+                <p className="text-stormy-gray text-xs">Gas fee: 0.00 STRK</p>
               </div>
             </div>
           </div>
-          <button className="withdraw-button larger-screen-btn">Withdraw</button>
-          <div className="mobile-screen-btns">
-            <button className=" withdraw-button btn">Withdraw</button>
-            <button className=" cancel-button btn">Cancel</button>
+          <div class="relative p-[2px] rounded-lg bg-gradient-to-r from-[#74d6fd] to-[#e01dee] mb-5 mt-5">
+            <button class="w-full h-full bg-[rgb(18,7,33)] text-white px-4 py-3 rounded-lg font-semibold cursor-pointer">
+              Withdraw
+            </button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/pages/withdraw/withdraw.css b/frontend/src/pages/withdraw/withdraw.css
deleted file mode 100644
index e3dd3aa2..00000000
--- a/frontend/src/pages/withdraw/withdraw.css
+++ /dev/null
@@ -1,479 +0,0 @@
-.withdraw-wrapper {
-  background-size: cover;
-  background-position: center 39%;
-  min-height: 125vh;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease-in-out;
-  width: calc(100vw - 372px);
-  margin-left: 372px;
-}
-
-@media (max-width: 1024px) {
-  .withdraw-wrapper {
-    width: 100vw;
-    margin-left: 0;
-    justify-content: center;
-  }
-}
-
-.withdraw-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 24px;
-  transition: all 0.3s ease-in-out;
-}
-
-.withdrawal-title {
-  font-size: 32px;
-  font-weight: 600;
-  color: #ffffff;
-  text-align: center;
-}
-
-.main-container-withdraw {
-  width: 642px;
-  gap: 2px;
-  padding-top: 24px;
-  border-radius: 8px;
-  color: var(--primary);
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-}
-
-.top-cards-withdraw {
-  display: flex;
-  gap: 1.5rem;
-  width: 642px;
-  height: 101px;
-}
-
-.withdraw-title {
-  font-size: 20px;
-  font-weight: 300;
-  color: var(--primary);
-  text-align: center;
-}
-
-.card-header {
-  color: var(--stormy-gray);
-}
-
-.card-icon {
-  margin-right: 5px;
-  width: 16px;
-  height: 16px;
-}
-
-.main-card-withdraw {
-  padding: 1.5rem;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 38px;
-  border: var(--midnight-purple-border);
-  border-radius: 8px;
-}
-
-.amount-stack-card {
-  background: var(--footer-divider-bg);
-  border: var(--midnight-purple-border);
-  padding: 2rem;
-  border-radius: 8px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.amount-stack-card-title-container {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.withdraw-input-container {
-  padding: 8px 0;
-}
-
-.withdraw-input-title {
-  font-size: 16px;
-  color: var(--stormy-gray);
-  margin-bottom: 5px;
-}
-
-.withdraw-input {
-  width: 100%;
-  height: 60px;
-  background: transparent;
-  border: var(--midnight-purple-border);
-  border-radius: 8px;
-  border-radius: 8px;
-  padding: 16px;
-  color: var(--primary);
-  font-size: 16px;
-}
-
-/* main card footer */
-.divider {
-  width: 100%;
-  height: 1.5px;
-  background: var(--footer-divider-bg);
-  margin: 1rem 0;
-}
-
-.settings-fee-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 0px 12px 0px;
-}
-
-.fee-title {
-  color: var(--stormy-gray);
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.setting-circle {
-  width: 32px;
-  height: 32px;
-  background-color: var(--footer-divider-bg);
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-}
-
-.setting-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 16px;
-  height: 16px;
-}
-
-.withdraw-button {
-  position: relative;
-  display: inline-block;
-  font-weight: 600;
-  /* width: 642px;  */
-  width: 100%;
-  height: 60px;
-  background: none;
-  color: var(--primary);
-  font-size: 16px;
-  cursor: pointer;
-  border: none;
-  padding: 16px 24px 16px 24px;
-  z-index: 1;
-  overflow: hidden;
-}
-
-.withdraw-button::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 8px;
-  border-radius: 8px;
-  padding: 2px;
-  background: var(--blue-pink-gradient);
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: destination-out;
-  mask-composite: exclude;
-  z-index: -1;
-}
-
-.mobile-screen-btns {
-  display: none;
-}
-
-@media (max-width: 1024px) {
-  .withdraw-container {
-    width: 642px;
-    margin-left: 0;
-  }
-
-  .main-card {
-    margin: 0 auto;
-    width: 100px;
-    width: 100%;
-    gap: 20px;
-  }
-
-  .withdraw-button {
-    font-size: 16px;
-    padding: 16px 24px;
-    margin-left: 12px;
-    margin-right: 11px;
-    align-self: center;
-  }
-}
-
-@media (max-width: 768px) {
-  .withdraw-container {
-    margin-left: 0px;
-  }
-}
-
-@media (max-width: 680px) {
-  .withdraw-container {
-    /* margin-top: -120px;
-    margin-left: 0px; */
-  }
-
-  /* .withdrawal-title {
-    font-size: 24px;
-  } */
-
-  .withdrawal-title {
-    margin: 0;
-  }
-
-  .top-cards-withdraw {
-    width: 500px;
-    margin: 0px;
-    /* gap: 6px; */
-  }
-
-  .main-container-withdraw {
-    width: 500px;
-    margin: auto;
-    padding-top: 0px;
-  }
-
-  .main-card-withdraw {
-    width: 500px;
-    margin: auto;
-  }
-
-  .withdraw-button {
-    width: 500px;
-  }
-}
-
-@media (max-width: 480px) {
-  .withdraw-container {
-    gap: 20px;
-  }
-
-  .withdrawal-title {
-    font-size: 20px;
-  }
-
-  .top-cards-withdraw {
-    width: 380px;
-    gap: 8px;
-    height: 88px;
-    margin-top: -6px;
-  }
-
-  .main-container-withdraw {
-    width: 500px;
-    margin: 0;
-    padding-top: 0px;
-  }
-
-  .withdraw-title {
-    font-size: 16px;
-  }
-
-  .main-card-withdraw {
-    padding: 0 1.5rem 2.5rem 1.5rem;
-    width: 430px;
-    border: none;
-  }
-
-  .amount-stack-card {
-    padding: 1rem;
-  }
-
-  .withdraw-input-title {
-    font-size: 12px;
-  }
-
-  .withdraw-input {
-    padding: 2rem 1rem;
-  }
-
-  .withdraw-input::placeholder {
-    font-size: 12px;
-  }
-
-  .larger-screen-btn {
-    display: none;
-  }
-
-  .mobile-screen-btns {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: center;
-    align-items: center;
-    gap: 4px;
-    width: 400px;
-    margin: 0 auto;
-  }
-
-  .btn {
-    width: 50%;
-  }
-
-  .withdraw-button {
-    height: 70px;
-    font-size: 14px;
-    padding: 28px 0px;
-    line-height: 19px;
-    margin-right: 10px;
-  }
-
-  .cancel-button {
-    display: block;
-    background: none;
-    border: var(--midnight-purple-border);
-    border-radius: 8px;
-    padding: 28px 0px;
-    font-size: 14px;
-    color: var(--primary);
-    text-align: center;
-    line-height: 19px;
-    font-weight: 600;
-  }
-}
-
-@media (max-width: 425px) {
-  .top-cards-withdraw {
-    width: 340px;
-    gap: 8px;
-  }
-
-  .main-card {
-    width: 340px;
-    border: 1px solid;
-  }
-
-  .amount-stack-card {
-    padding: 0.8rem;
-    width: 340px;
-    margin: auto;
-  }
-
-  .withdraw-title {
-    font-size: 14px;
-  }
-
-  .withdraw-input {
-    width: 340px;
-    margin: auto 22px;
-  }
-
-  .withdraw-input-title {
-    margin: auto 22px;
-    padding-bottom: 8px;
-  }
-
-  .divider {
-    width: 340px;
-    margin: 8px 22px;
-  }
-
-  .settings-fee-container {
-    width: 340px;
-    margin: auto;
-  }
-
-  .mobile-screen-btns {
-    width: 340px;
-  }
-}
-
-@media (max-width: 380px) {
-  .top-cards-withdraw {
-    width: 330px;
-    gap: 8px;
-  }
-
-  .amount-stack-card {
-    width: 330px;
-    margin: auto;
-  }
-
-  .withdraw-input {
-    width: 330px;
-    margin: auto 28px;
-  }
-
-  .withdraw-input-title {
-    margin: auto 28px;
-  }
-
-  .divider {
-    width: 330px;
-    margin: 8px 26px;
-  }
-
-  .settings-fee-container {
-    width: 320px;
-    margin: auto 26px;
-  }
-
-  .mobile-screen-btns {
-    width: 320px;
-  }
-}
-
-@media (max-width: 375px) {
-  .top-cards-withdraw {
-    width: 280px;
-    gap: 8px;
-  }
-  .main-card {
-    min-height: 200px;
-    width: 280px;
-    margin: auto;
-  }
-
-  .amount-stack-card {
-    width: 280px;
-    margin: auto;
-  }
-
-  .withdraw-input {
-    width: 280px;
-    margin: auto 50px;
-  }
-
-  .withdraw-input-title {
-    margin: auto 50px;
-  }
-
-  .divider {
-    width: 280px;
-    margin: 8px 50px;
-  }
-
-  .settings-fee-container {
-    width: 280px;
-    margin: auto 50px;
-  }
-
-  .mobile-screen-btns {
-    width: 280px;
-  }
-}