diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8428d193..58a65124 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -16,7 +16,7 @@ import Withdraw from 'pages/vault/withdraw/Withdraw';
 import { useWalletStore } from 'stores/useWalletStore'; 
 import { Notifier } from 'components/Notifier/Notifier';
 import { useConnectWallet } from 'hooks/useConnectWallet';
-
+import Stake from 'pages/vault/stake/Stake';
 
 function App() {
   const { walletId, setWalletId, removeWalletId } = useWalletStore(); 
@@ -90,6 +90,8 @@ function App() {
           <Route path="/withdraw" element={<Withdraw />} />
           <Route path="/form" element={<Form />} />
           <Route path="/documentation" element={<Documentation />} />
+
+            <Route path="/stake" element={<Stake />} />
         </Routes>
       </main>
       <Footer />
diff --git a/frontend/src/assets/icons/apy_icon.svg b/frontend/src/assets/icons/apy_icon.svg
new file mode 100644
index 00000000..c6eda91f
--- /dev/null
+++ b/frontend/src/assets/icons/apy_icon.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="24" height="24" rx="12" fill="#201338"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.95529 9.56759C4.59952 13.1673 6.46948 17.2344 10.1158 18.5432C10.2561 18.6368 10.3963 18.8237 10.3963 18.964V19.6185C10.3963 19.712 10.3963 19.7588 10.3495 19.8054C10.3029 19.9925 10.1158 20.0859 9.92881 19.9925C7.31095 19.151 5.30074 17.1408 4.45927 14.5229C3.05683 10.0819 5.48777 5.36025 9.92881 3.95781C9.9756 3.91113 10.0691 3.91113 10.1158 3.91113C10.3029 3.95781 10.3963 4.09805 10.3963 4.28508V4.93952C10.3963 5.17333 10.3029 5.31358 10.1158 5.40704C8.1992 6.10826 6.65651 7.60417 5.95529 9.56759ZM14.6505 4.14484C14.6971 3.95781 14.8842 3.86435 15.0712 3.95781C17.6423 4.79927 19.6993 6.80948 20.5407 9.47413C21.9432 13.9152 19.5122 18.6368 15.0712 20.0393C15.0244 20.0859 14.9309 20.0859 14.8842 20.0859C14.6971 20.0393 14.6037 19.899 14.6037 19.712V19.0575C14.6037 18.8237 14.6971 18.6835 14.8842 18.59C16.8008 17.8888 18.3435 16.3929 19.0447 14.4295C20.4005 10.8298 18.5305 6.7627 14.8842 5.45382C14.7439 5.36025 14.6037 5.17333 14.6037 4.9863V4.33187C14.6037 4.2383 14.6037 4.19162 14.6505 4.14484ZM12.6391 11.2035C14.6025 11.4372 15.5842 11.9982 15.5842 13.6344C15.5842 14.8966 14.6493 15.8783 13.2468 16.1121V17.2341C13.2001 17.4678 13.0598 17.608 12.8728 17.608H12.1716C11.9379 17.5612 11.7976 17.421 11.7976 17.2341V16.1121C10.255 15.8783 9.50696 15.0368 9.32005 13.8682V13.8214C9.32005 13.6344 9.46029 13.4941 9.6472 13.4941H10.442C10.5822 13.4941 10.7225 13.5877 10.7691 13.7746C10.9094 14.4759 11.3301 14.9902 12.5456 14.9902C13.4338 14.9902 14.0883 14.476 14.0883 13.728C14.0883 12.9799 13.6676 12.6995 12.3586 12.4657C10.3952 12.2319 9.46029 11.6243 9.46029 10.0816C9.46029 8.91283 10.3484 7.9779 11.7508 7.79087V6.7157C11.7976 6.48188 11.9379 6.34163 12.1249 6.34163H12.8261C13.0598 6.38842 13.2001 6.52867 13.2001 6.7157V7.83766C14.2752 7.93112 15.1167 8.7258 15.3037 9.7543V9.80109C15.3037 9.98801 15.1635 10.1283 14.9764 10.1283H14.2285C14.0883 10.1283 13.9481 10.0348 13.9013 9.89455C13.6676 9.19332 13.2001 8.91283 12.3586 8.91283C11.4237 8.91283 10.9562 9.33346 10.9562 9.98801C10.9562 10.6426 11.2367 11.0165 12.6391 11.2035Z" fill="#83919F"/>
+</svg>
diff --git a/frontend/src/components/GasFee/GasFee.jsx b/frontend/src/components/GasFee/GasFee.jsx
new file mode 100644
index 00000000..b30a7c3e
--- /dev/null
+++ b/frontend/src/components/GasFee/GasFee.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactComponent as SettingIcon } from 'assets/icons/settings.svg';
+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" />
+                </div>
+                <div className="gas-fee-title">Gas fee: 0.00 STRK</div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/GasFee/gasfee.css b/frontend/src/components/GasFee/gasfee.css
new file mode 100644
index 00000000..00bc8e87
--- /dev/null
+++ b/frontend/src/components/GasFee/gasfee.css
@@ -0,0 +1,31 @@
+.gas-fee-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.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;
+}
\ No newline at end of file
diff --git a/frontend/src/components/NavigationLinks.jsx b/frontend/src/components/NavigationLinks.jsx
index 83cd1ebc..ec474ed3 100644
--- a/frontend/src/components/NavigationLinks.jsx
+++ b/frontend/src/components/NavigationLinks.jsx
@@ -11,6 +11,10 @@ const NavigationLinks = ({ onNavClick }) => (
     <NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}>
       Dashboard
     </NavLink>
+    <div className="nav-divider"></div>
+    <NavLink to="/stake" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}>
+      Vault
+    </NavLink>
   </div>
 );
 
diff --git a/frontend/src/components/StakeCard/MetricCard.jsx b/frontend/src/components/StakeCard/MetricCard.jsx
new file mode 100644
index 00000000..5529cd7f
--- /dev/null
+++ b/frontend/src/components/StakeCard/MetricCard.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './metricCard.css';
+
+export default function MetricCard({ icon= 1, title, value }) {
+  return (
+    <div className="stake-card">
+      <div className="card-header">
+        <img src={icon} className="card-icon" />
+        <span className="label">{title}</span>
+      </div>
+      <div className="card-value">
+        <span className="top-card-value">{value}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/StakeCard/metricCard.css b/frontend/src/components/StakeCard/metricCard.css
new file mode 100644
index 00000000..58cee379
--- /dev/null
+++ b/frontend/src/components/StakeCard/metricCard.css
@@ -0,0 +1,14 @@
+.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-card .img {
+  margin-right: 100px;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/vault/VaultLayout.jsx b/frontend/src/pages/vault/VaultLayout.jsx
new file mode 100644
index 00000000..458a9d60
--- /dev/null
+++ b/frontend/src/pages/vault/VaultLayout.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
+import './vaultLayout.css';
+
+export function VaultLayout({ children }) {
+  return (
+    <div className="layout">
+      <aside className="sidebar">
+        <div className="sidebar-content">
+          <h2 className="sidebar-title">Vault</h2>
+          <nav className="sidebar-nav">
+            <NavLink
+              to="/"
+              className="nav-item"
+              activeClassName="active"
+            >
+              <span className="nav-bullet">•</span>
+              Home
+            </NavLink>
+            <NavLink
+              to="/stake"
+              className="nav-item"
+              activeClassName="active"
+            >
+              <span className="nav-bullet">•</span>
+              Stake
+            </NavLink>
+            <NavLink
+              to="/withdraw"
+              className="nav-item"
+              activeClassName="active"
+            >
+              <span className="nav-bullet">•</span>
+              Withdraw
+            </NavLink>
+          </nav>
+        </div>
+      </aside>
+
+      <main className="main-content">
+        {children}
+        <Outlet />
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
new file mode 100644
index 00000000..c7f253e5
--- /dev/null
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import STRK from '../../../assets/icons/strk.svg';
+import USDC from '../../../assets/icons/apy_icon.svg';
+import './stake.css';
+import { VaultLayout } from '../VaultLayout';
+import { Button } from 'components/ui/Button';
+import MetricCard from 'components/StakeCard/MetricCard';
+import GasFee from 'components/GasFee/GasFee';
+
+function Stake() {
+  const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
+  const [amount, setAmount] = useState('0');
+
+  const networks = [{ name: 'Starknet', image: STRK }];
+
+  const handleChange = (e) => {
+    setSelectedNetwork(e.target.value);
+  };
+
+  const handleAmountChange = (e) => {
+    const value = e.target.value;
+    const regex = /^\d*\.?\d*$/;
+    if (regex.test(value)) {
+      setAmount(value);
+    }
+  };
+
+  return (
+    <VaultLayout>
+      <div className="stake-wrapper">
+        <div className="stake-container">
+          <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={USDC} />
+            </div>
+          </div>
+
+          <h1 className="stake-title">Please submit your leverage details</h1>
+
+          <div className="main-card">
+            <div className="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>
+            </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>
+            <GasFee />
+          </div>
+
+          <Button variant="secondary" size="lg" className="stake-button">
+            Stake
+          </Button>
+        </div>
+      </div>
+    </VaultLayout>
+  );
+}
+
+export default Stake;
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
new file mode 100644
index 00000000..e87b0f64
--- /dev/null
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -0,0 +1,146 @@
+.stake-wrapper {
+  background-size: cover;
+  background-position: center 39%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.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;
+  flex-direction: column;
+  justify-content: center;
+  gap: 32px;
+}
+
+.network-selector-container {
+  position: relative;
+  width: 100%;
+}
+
+.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: -5%;
+  top: 10%;
+  transform: translateY(-50%);
+  opacity: 0.5;
+  font-size: 1.5rem;
+  z-index: 999999;
+}
+
+.apy-rate {
+  color: var(--dark-gray);
+  font-size: 0.875rem;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.stake-button {
+  width: 100%;
+}
diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
new file mode 100644
index 00000000..7eaeba12
--- /dev/null
+++ b/frontend/src/pages/vault/vaultLayout.css
@@ -0,0 +1,94 @@
+.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;
+  border-right: 1px solid #300734;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 2.5rem 1.5rem;
+  position: absolute;
+  height: 100%;
+}
+
+.sidebar-title {
+  color: white;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--light-purple);
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: white;
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: color 0.2s;
+  padding-bottom: 10px;
+}
+
+.nav-item:hover {
+  color: white;
+}
+
+.nav-bullet {
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.nav-item.active {
+  position: relative;
+}
+
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, #49ABD2, #36294E);
+}
+
+
+.nav-item.active .nav-bullet {
+  color: var(--nav-button-hover);
+}
+
+.main-content {
+  flex: 1;
+  padding: 2rem 0;
+  position: relative;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    width: 200px;
+  }
+}
+
+@media (max-width: 640px) {
+  .sidebar {
+    width: 160px;
+  }
+
+}
\ No newline at end of file
diff --git a/frontend/src/pages/vault/withdraw/Withdraw.jsx b/frontend/src/pages/vault/withdraw/Withdraw.jsx
index 83518f0c..89047b26 100644
--- a/frontend/src/pages/vault/withdraw/Withdraw.jsx
+++ b/frontend/src/pages/vault/withdraw/Withdraw.jsx
@@ -4,9 +4,11 @@ import { ReactComponent as DiamondIcon } from 'assets/icons/diamond.svg';
 import { ReactComponent as TimeIcon } from 'assets/icons/time.svg';
 import { ReactComponent as SettingIcon } from 'assets/icons/settings.svg';
 import MetricCard from 'components/MetricCard/MetricCard';
+import { VaultLayout } from '../VaultLayout';
 
 export default function Withdraw() {
   return (
+    <VaultLayout>
     <div className="withdraw-wrapper">
       <div className="withdraw-container">
         <div className="main-container">
@@ -55,5 +57,6 @@ export default function Withdraw() {
         <button className="withdraw-button">Withdraw</button>
       </div>
     </div>
+    </VaultLayout>
   );
 }