diff --git a/frontend/src/components/GasFee/GasFee.jsx b/frontend/src/components/GasFee/GasFee.jsx
index b30a7c3e..48b89cf5 100644
--- a/frontend/src/components/GasFee/GasFee.jsx
+++ b/frontend/src/components/GasFee/GasFee.jsx
@@ -6,7 +6,7 @@ import './gasfee.css';
 export default function GasFee() {
     return (
         <div className="main-card-footer">
-            <div className="divider"></div>
+           
             <div className="gas-fee-container">
                 <div className="gas-fee-circle">
                     <SettingIcon className="gas-fee-icon" />
diff --git a/frontend/src/components/GasFee/gasfee.css b/frontend/src/components/GasFee/gasfee.css
index 00bc8e87..6ca653c9 100644
--- a/frontend/src/components/GasFee/gasfee.css
+++ b/frontend/src/components/GasFee/gasfee.css
@@ -3,6 +3,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 0rem 3rem;
+    padding-bottom: 1rem;
 }
 
 .gas-fee-circle {
diff --git a/frontend/src/components/StakeCard/metricCard.css b/frontend/src/components/StakeCard/metricCard.css
index 58cee379..9b23f9e0 100644
--- a/frontend/src/components/StakeCard/metricCard.css
+++ b/frontend/src/components/StakeCard/metricCard.css
@@ -1,12 +1,14 @@
 .stake-card {
   width: 309px;
+  
   background: var(--header-button-bg);
   border: var(--midnight-purple-border);
-  border-radius: 900px;
+  border-radius: 999px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
 }
 
 .stake-card .img {
diff --git a/frontend/src/components/ui/Button/button.css b/frontend/src/components/ui/Button/button.css
index d8b85163..91d2b8e3 100644
--- a/frontend/src/components/ui/Button/button.css
+++ b/frontend/src/components/ui/Button/button.css
@@ -3,7 +3,7 @@
   border: none;
   cursor: pointer;
   font-weight: 600;
-  border-radius: 900px;
+  border-radius: 8px;
   transition: all 0.2s ease-in-out;
   display: flex;
   justify-content: center;
@@ -71,7 +71,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-radius: 50px;
+  border-radius: 8px;
   padding: 2px;
   background: linear-gradient(90deg, #74d6fd 0%, #e01dee 100%);
   -webkit-mask:
@@ -101,7 +101,7 @@
 
 @media (max-width: 768px) {
   .button {
-    border-radius: 16px;
+    border-radius: 8px;
   }
 
   .button--primary {
@@ -109,7 +109,7 @@
   }
 
   .button--secondary::before {
-    border-radius: 16px;
+    border-radius: 8px;
   }
 
   .button--lg {
diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
index cb660577..aa248d69 100644
--- a/frontend/src/pages/vault/stake/Stake.jsx
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { ReactComponent as ETH } from '../../../assets/icons/ethereum.svg';
 import { ReactComponent as USDC } from '../../../assets/icons/borrow_usdc.svg';
 import { ReactComponent as DAI } from '../../../assets/icons/dai.svg';
-import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg'
+import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg';
 import MetricCard from 'components/StakeCard/MetricCard';
 import STRK from '../../../assets/icons/strk.svg';
 import USDCc from '../../../assets/icons/apy_icon.svg';
@@ -15,7 +15,7 @@ import BalanceCards from 'components/BalanceCards';
 function Stake() {
   const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
   const [amount, setAmount] = useState('0');
-  const [showDrop, setShowDrop] = useState(false)
+  const [showDrop, setShowDrop] = useState(false);
 
   const [balances, setBalances] = useState([
     { icon: <STTRK />, title: 'STRK', balance: '0.046731' },
@@ -26,7 +26,6 @@ function Stake() {
   const networks = [{ name: 'Starknet', image: STRK }];
   const handleChange = (network) => {
     setSelectedNetwork(network.name);
-
   };
 
   const handleAmountChange = (e) => {
@@ -37,95 +36,103 @@ function Stake() {
     }
   };
   return (
-    <VaultLayout >
+    <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'>
+              <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
-                balances={balances}
-                setBalances={setBalances}
-                walletId={null}
-              />
+              <BalanceCards balances={balances} setBalances={setBalances} walletId={null} />
             </div>
           </div>
-         <div className=''>
-         <h1 className="stake-title">Please submit your leverage details</h1>
-          <div className="main-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="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>
+                  <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>
+                    </div>
+                  ))}
                 </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>
-                  </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>
-            </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>
+              <div className="apy-rate">$0.00 APY / year</div>
+              <div className="parent-divider1">
+                <div className="divider1"></div>
+              </div>
 
-            <div className="apy-rate">$0.00 APY / year</div>
-            <GasFee />
+              <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>
-
-         </div>
-          <Button variant="secondary" size="lg" className="stake-button">
-            Stake
-          </Button>
         </div>
       </div>
     </VaultLayout>
   );
 }
 
-
-
-export default Stake;
\ No newline at end of file
+export default Stake;
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
index 6cf958c0..c4b0c41b 100644
--- a/frontend/src/pages/vault/stake/stake.css
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -1,17 +1,10 @@
 .stake-wrapper {
   background: url('../../../../public/background.png') no-repeat;
   background-size: cover;
-  background-position: center 39%;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  margin-left: 200px;
-  padding: 0 24px;
-  width: 100vw;
-  padding: 0 24px;
+  margin-left:200px;
 }
 
+
 .token-icon {
   display: flex;
   align-items: center;
@@ -21,59 +14,13 @@
   background-color: hsla(261, 49%, 15%, 1);
 }
 
-.stake-card {
-  width: 309px;
-  background: var(--header-button-bg);
-  border: var(--midnight-purple-border);
-  border-radius: 900px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.stake-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--primary);
-  text-align: center;
-}
-
-.stake-container {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.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 {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
-  align-items: stretch;
-}
-
 .network-selector-container {
   position: relative;
   width: 100%;
 }
 
-.main-card {
-  padding: 3rem 1.5rem;
+.main-stake-card {
+  padding:4px 4px;
   height: auto;
   display: flex;
   flex-direction: column;
@@ -187,10 +134,6 @@
   text-align: center;
 }
 
-.stake-button {
-  width: 100%;
-}
-
 .balance-display-container .large-screen-balance {
   display: block;
 }
@@ -199,216 +142,220 @@
   display: none;
 }
 
-/* Tablet and Mobile Responsiveness */
-@media screen and (max-width: 1024px) {
-  .stake-wrapper {
-    display: block;
-    width: 100%;
-    margin-right: 374px;
-    margin-left: 0px;
-    padding: 0 16px;
-    background: url('../../../../public/background.png') no-repeat;
-    background-size: cover;
-    background-position: -250px center;
-  }
+.divider1 {
+  height: 1px;
+  width: 80%;
+  background: var(--footer-divider-bg);
+  margin:auto;
 
-  .stake-container {
-    padding: 0;
-    margin-left: 0;
-    margin-right: 0;
-    width: 100%;
-  }
+}
+.stake-wrapper {
+  height: 100vh;
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100vw;
+  padding: 5rem 24px; 
+}
 
-  .balance-container {
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 0;
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    gap: 5px;
-    max-width: 100%;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
+.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;
+}
 
-  /* .balance-item {
-    height: fit-content;
-    padding: 16px 24px;
-    display: flex;
-    width: 167px;
-    height: 88px;
-    flex-direction: column;
-    align-items: center;
-    margin-right: 0;
-    border-radius: 16px;
-    border: 1px solid var(--light-purple);
-    background-color: var(--dark-purple);
-  } */
-
-  .balance-item:first-child {
-    margin-left: 20px;
-  }
+.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;
+}
 
-  .balance-item:last-child {
-    margin-right: 20px;
-  }
 
-  .balance-item .balance-title {
-    font-size: 1rem;
-    display: flex;
-    align-items: center;
-  }
+/********Responsiveness  **********/
 
-  .balance-item .title-container + label:nth-of-type(1) {
-    font-size: 20px;
-    font-weight: 600;
+@media (min-width: 769px) and (max-width: 1024px){
+  .stake-wrapper{
+    margin-left:0px;
   }
+}
 
-  .balance-item label:nth-child(2) {
-    color: var(--secondary);
-    /* font-size: 14px; */
-  }
-  .stake-title {
-    font-size: 16px;
-    font-weight: 400;
+/* Mobile view */
+@media (max-width:768px) {
+  .sidenav{
+    display: none;
   }
+.top-cards {
+  width:100%;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  height: 88px;
+} 
 
-  .main-card {
-    gap: 26px;
-    flex-direction: column;
-    border-radius: 12px;
+  .main-container {
+    width: 100%;
+    padding: 0;
   }
 
-  .clicked-network-selector-container .network-dropdown {
-    display: block;
+  .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; 
   }
 
-  .network-selector {
-    padding: 15px;
+  .stake-wrapper {
+    top: 80px;
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: center;
+    align-items: flex-start;   
+    padding: 3rem 24px;
+    margin-left: 0px;
   }
 
-  .amount-field {
-    font-size: 32px;
-    padding: 12px;
+  .stake-container {
+    width: 100%;
+    max-width: 390px;
+    height: 610px;
+    margin:0 auto;
+    margin-bottom: 2rem;
   }
 
-  .currency {
-    right: 10%;
+  .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;
   }
 
-  .apy-rate {
-    font-size: 14px;
+  .can-stk{
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+    width:100%;
+    margin-top: 2rem;
   }
-
-  .stake-button {
+   .cancel {
+    width: 167px;
+    height: 60px;
+    padding: 16px 24px;
+    border-radius: 8px;
+    font-weight: 600;
     font-size: 14px;
-    padding: 18px 24px;
-
-    align-self: center;
+    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;
 
-  .balance-card {
-    max-width: 100%;
-    margin-top: 20px;
   }
 
-  .balance-display-container .large-screen-balance {
-    display: none;
-  }
 
-  .balance-display-container .mobile-screen-balance {
-    display: block;
-  }
+.divider1 {
+    height: 1px;
+    width: 80%;
+    background: var(--footer-divider-bg);
+    margin:auto;
 }
 
-@media (min-width: 768px) and (max-width: 1024px) {
-  .stake-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 0 auto;
-    padding: 0 20px;
-    background-position: center;
-  }
-
-  .stake-container {
-    width: 100%;
-    padding: 1rem;
-    margin: 0 auto;
-  }
+  
+}
 
-  .top-cards {
-    display: flex;
-    width: 100%;
-    /* flex-wrap: wrap; */
-    /* gap: 6px; */
-  }
 
-  .main-card {
-    margin: 0 auto;
-    gap: 20px;
-  }
 
   .amount-field {
     font-size: 24px;
     padding: 10px;
   }
 
-  .stake-button {
-    font-size: 16px;
-    padding: 16px 24px;
-    margin-left: 12px;
-    margin-right: 11px;
-    align-self: center;
-    width: 85%;
-  }
-}
-
 @media (max-width: 678px) {
   .main-container {
     padding-top: 0px;
   }
 
   .top-cards {
-    width: 470px;
     gap: 8px;
   }
-
-  .main-card {
-    padding: 0 20px;
-    border: none;
-  }
-
 }
 
 @media (max-width: 480px) {
   .top-cards {
-    width: 380px;
     gap: 10px;
   }
 
-  .main-card {
-    width: 450px;
-  }
 }
 
 @media (max-width: 400px) {
-  .top-cards {
-    width: 330px;
-  }
+
 
 }
 
 @media (max-width: 320px) {
-  .top-cards {
-    width: 280px;
-  }
 
-  .main-card {
-    width: 330px;
-    margin:auto;
-  }
 }
diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
index 8f77a1d7..d6ca665d 100644
--- a/frontend/src/pages/vault/vaultLayout.css
+++ b/frontend/src/pages/vault/vaultLayout.css
@@ -1,13 +1,3 @@
-.layout {
-  /* display: flex; */
-  /* min-height: 100vh; */
-  /* background: url('../../../public/background.png') no-repeat; */
-  /* background-size: cover; */
-  /* background-position: center 39%; */
-  /* background-repeat: no-repeat; */
-  /* position: relative; */
-}
-
 .sidebar {
   width: 280px;
   background-color: #00000f;
@@ -77,10 +67,16 @@
   padding: 2rem 0;
   position: relative;
 }
-
+@media (min-width: 1024px) {
+  .sidebar {
+    width: 220px;
+    display: block;
+  }
+}
 @media (max-width: 1024px) {
   .sidebar {
     width: 220px;
+    display: none;
   }
 
   .sidebar-title {