diff --git a/frontend/src/assets/icons/customer-service-01.svg b/frontend/src/assets/icons/customer-service-01.svg
new file mode 100644
index 000000000..c8591ff23
--- /dev/null
+++ b/frontend/src/assets/icons/customer-service-01.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3334 7.86975C11.3334 7.63928 11.3334 7.52408 11.368 7.42141C11.4688 7.12301 11.7346 7.00728 12.0008 6.88601C12.3 6.74968 12.4496 6.68155 12.5979 6.66955C12.7662 6.65593 12.9348 6.69221 13.0787 6.77295C13.2694 6.87995 13.4024 7.08335 13.5386 7.24875C14.1676 8.01261 14.482 8.39461 14.597 8.81581C14.6899 9.15568 14.6899 9.51115 14.597 9.85101C14.4292 10.4653 13.899 10.9803 13.5066 11.457C13.3058 11.7008 13.2054 11.8227 13.0787 11.8939C12.9348 11.9746 12.7662 12.0109 12.5979 11.9973C12.4496 11.9853 12.3 11.9171 12.0008 11.7808C11.7346 11.6595 11.4688 11.5438 11.368 11.2454C11.3334 11.1427 11.3334 11.0275 11.3334 10.7971V7.86975Z" stroke="#E7ECF0" stroke-width="1.5"/>
+<path d="M4.66671 7.86979C4.66671 7.57966 4.65856 7.31886 4.42398 7.11486C4.33866 7.04066 4.22554 6.98913 3.99931 6.88606C3.70005 6.7498 3.55041 6.68166 3.40215 6.66966C2.95731 6.63366 2.71799 6.93726 2.46146 7.24886C1.83254 8.01273 1.51808 8.39466 1.40301 8.81586C1.31016 9.15579 1.31016 9.51126 1.40301 9.85113C1.57084 10.4655 2.10105 10.9804 2.49351 11.4571C2.7409 11.7576 2.97722 12.0317 3.40215 11.9974C3.55041 11.9854 3.70005 11.9172 3.99931 11.7809C4.22554 11.6779 4.33866 11.6263 4.42398 11.5521C4.65856 11.3481 4.66671 11.0874 4.66671 10.7972V7.86979Z" stroke="#E7ECF0" stroke-width="1.5"/>
+<path d="M13.3333 6.99992V5.99992C13.3333 3.42259 10.9455 1.33325 7.99996 1.33325C5.05444 1.33325 2.66663 3.42259 2.66663 5.99992V6.99992" stroke="#E7ECF0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3333 11.6667C13.3333 14.6667 10.6667 14.6667 8 14.6667" stroke="#E7ECF0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/assets/images/background-form.png b/frontend/src/assets/images/background-form.png
new file mode 100644
index 000000000..d97cf83df
Binary files /dev/null and b/frontend/src/assets/images/background-form.png differ
diff --git a/frontend/src/components/dashboard/borrow/Borrow.jsx b/frontend/src/components/dashboard/borrow/Borrow.jsx
index 35c982d1f..3201ebd63 100644
--- a/frontend/src/components/dashboard/borrow/Borrow.jsx
+++ b/frontend/src/components/dashboard/borrow/Borrow.jsx
@@ -4,7 +4,7 @@ import { ReactComponent as BorrowIcon } from 'assets/icons/borrow_dynamic.svg';
 
 function Borrow({ data }) {
   return (
-    <div className="tab-content">
+    <div className="borrow-tab-content">
       <div className="balance-info">
         <div className="currency-info">
           {React.createElement(data[1]?.currencyIcon || BorrowIcon, {
diff --git a/frontend/src/components/dashboard/borrow/borrow.css b/frontend/src/components/dashboard/borrow/borrow.css
index d3ab13d23..0b209f130 100644
--- a/frontend/src/components/dashboard/borrow/borrow.css
+++ b/frontend/src/components/dashboard/borrow/borrow.css
@@ -9,7 +9,6 @@
 }
 
 .currency-info {
-  margin-top: 1rem;
   display: flex;
   align-items: center;
 }
diff --git a/frontend/src/components/dashboard/collateral/Collateral.jsx b/frontend/src/components/dashboard/collateral/Collateral.jsx
index 2cc4c8772..3cb215ec0 100644
--- a/frontend/src/components/dashboard/collateral/Collateral.jsx
+++ b/frontend/src/components/dashboard/collateral/Collateral.jsx
@@ -5,7 +5,7 @@ import { TrendingDown, TrendingUp } from 'lucide-react';
 
 function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
   return (
-    <div className="tab-content">
+    <div className="collateral-tab-content">
       <div className="balance-info">
         <div className="currency-info">
           {React.createElement(data[0]?.currencyIcon || CollateralIcon, {
@@ -26,7 +26,7 @@ function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
         </span>
         <span>
           <span className="balance-label">Current sum: </span>
-          <span className={currentSum === 0 ? 'current-sum-green' : getCurrentSumColor()}>
+          <span className={currentSum >= 0 ? 'current-sum-green' : getCurrentSumColor()}>
             <span className="currency-symbol">$</span>
             {currentSum ? Number(currentSum).toFixed(8) : '0.00'}
             {currentSum > startSum && currentSum !== 0 && <TrendingUp className="lucide-up-icon" />}
diff --git a/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx b/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx
index 5850e678e..ad019cd16 100644
--- a/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx
+++ b/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import './dashboardTabs.css';
 import { ReactComponent as DepositIcon } from '../../../assets/icons/deposited_dynamic.svg';
 import { ReactComponent as CollateralIcon } from '../../../assets/icons/collateral_dynamic.svg';
@@ -7,26 +8,40 @@ import { DASHBOARD_TABS } from 'utils/constants';
 function DashboardTabs({ activeTab, switchTab }) {
   const { COLLATERAL, BORROW, DEPOSITED } = DASHBOARD_TABS;
 
+  const tabConfig = [
+    {
+      key: COLLATERAL,
+      Icon: CollateralIcon,
+      title: 'Collateral & Earnings',
+    },
+    {
+      key: BORROW,
+      Icon: BorrowIcon,
+      title: 'Borrow',
+    },
+    {
+      key: DEPOSITED,
+      Icon: DepositIcon,
+      title: 'Deposited',
+    },
+  ];
+
   return (
     <div className="tabs">
-      <button onClick={() => switchTab(COLLATERAL)} className={`tab ${activeTab === COLLATERAL ? 'active' : ''}`}>
-        <CollateralIcon className="tab-icon" />
-        <span className="tab-title">Collateral & Earnings</span>
-      </button>
-
-      <div className="tab-divider" />
-
-      <button onClick={() => switchTab(BORROW)} className={`tab ${activeTab === BORROW ? 'active' : ''}`}>
-        <BorrowIcon className="tab-icon" />
-        <span className="tab-title">Borrow</span>
-      </button>
-
-      <div className="tab-divider" />
-
-      <button onClick={() => switchTab(DEPOSITED)} className={`tab ${activeTab === DEPOSITED ? 'active' : ''}`}>
-        <DepositIcon className="tab-icon" />
-        <span className="tab-title">Deposited</span>
-      </button>
+      {tabConfig.map((tab, index) => (
+        <React.Fragment key={tab.key}>
+          <button
+            type="button"
+            onClick={() => switchTab(tab.key)}
+            className={`tab ${activeTab === tab.key ? 'active' : ''}`}
+          >
+            <tab.Icon className="tab-icon" />
+            <span className="tab-title">{tab.title}</span>
+          </button>
+
+          {index < tabConfig.length - 1 && <div className="tab-divider"></div>}
+        </React.Fragment>
+      ))}
 
       <div className="tab-indicator-container">
         <div className={`tab-indicator ${activeTab}`} />
diff --git a/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css b/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css
index a2c7a8ab2..28dd9ece5 100644
--- a/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css
+++ b/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css
@@ -3,6 +3,12 @@
   justify-content: space-between;
   position: relative;
   align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #36294e;
 }
 
 .tab {
@@ -74,6 +80,8 @@
   height: 18px;
   border-radius: 8px;
   background-color: var(--border-color);
+  min-width: 3px;
+  min-height: 18px;
   margin: 0 1rem;
 }
 
@@ -93,7 +101,7 @@
   .tab-divider {
     width: 2px;
     height: 16px;
-    margin: 0 4px;
+    margin: 0 10px;
     background-color: var(--border-color);
   }
 
@@ -122,7 +130,7 @@
   .tab-divider {
     width: 2px;
     height: 16px;
-    margin: 0 18px;
+    margin: 0 15px;
     background-color: var(--border-color);
   }
 
diff --git a/frontend/src/components/dashboard/deposited/Deposited.jsx b/frontend/src/components/dashboard/deposited/Deposited.jsx
index 5c33493b3..208092ee1 100644
--- a/frontend/src/components/dashboard/deposited/Deposited.jsx
+++ b/frontend/src/components/dashboard/deposited/Deposited.jsx
@@ -5,7 +5,7 @@ import { ReactComponent as UsdIcon } from '../../../assets/icons/usdc-icon.svg';
 
 function Deposited({ data }) {
   return (
-    <div className="tab-content">
+    <div className="deposited-tab-content">
       <div className="deposited-info">
         <div className="deposited-item">
           <div className="currency-name">
diff --git a/frontend/src/components/dashboard/deposited/deposited.css b/frontend/src/components/dashboard/deposited/deposited.css
index 9309f8572..bec778d7c 100644
--- a/frontend/src/components/dashboard/deposited/deposited.css
+++ b/frontend/src/components/dashboard/deposited/deposited.css
@@ -1,6 +1,6 @@
 .tab-content {
   text-align: left;
-  width: 580px;
+  width: 100%;
   height: 190px;
   padding: 0px 40px 0 20px;
   margin: 16px auto 0;
@@ -10,6 +10,23 @@
   margin: 0;
 }
 
+.collateral-tab-content,
+.borrow-tab-content {
+  text-align: left;
+  width: 100%;
+  height: 190px;
+  margin: 16px auto 0;
+}
+
+.collateral-tab-content,
+.borrow-tab-content p {
+  margin: 0;
+}
+
+.deposited-tab-content p {
+  margin: 0;
+}
+
 .deposited-info {
   display: flex;
   flex-direction: column;
@@ -17,6 +34,14 @@
   justify-content: center;
 }
 
+.deposited-tab-content {
+  text-align: left;
+  width: 100%;
+  height: 190px;
+  padding: 0px 40px 0 20px;
+  margin: 16px auto 0;
+}
+
 .deposited-item {
   display: flex;
   align-items: center;
@@ -71,12 +96,37 @@
     padding: 16px;
     margin-top: 0;
   }
+
+  .collateral-tab-content,
+  .borrow-tab-content {
+    width: 100%;
+    height: auto;
+    margin-top: 0;
+  }
+
+  .deposited-tab-content {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    margin-top: 0;
+  }
 }
 
 @media (max-width: 480px) {
   .tab-content {
-    width: fit-content;
     font-size: 14px;
+    padding: 0px 0px 0px 0px;
+  }
+
+  .collateral-tab-content,
+  .borrow-tab-content {
+    font-size: 14px;
+    padding: 15px 0px 0 0px;
+  }
+
+  .deposited-tab-content {
+    font-size: 14px;
+    padding: 15px 0px 0 0px;
   }
 
   .icon {
diff --git a/frontend/src/components/layout/header/Header.jsx b/frontend/src/components/layout/header/Header.jsx
index ceee10616..cfcd05135 100644
--- a/frontend/src/components/layout/header/Header.jsx
+++ b/frontend/src/components/layout/header/Header.jsx
@@ -7,8 +7,11 @@ import NavigationLinks from '../navigation-links/NavigationLinks';
 import useLockBodyScroll from '../../../hooks/useLockBodyScroll';
 import MobDropdownMenu from '../mob-dropdown-menu/MobDropdownMenu';
 import '../../../globals.css';
+import { ReportBugButton } from 'components/report-button/ReportBugButton';
+import { ReportBugModal } from 'components/report-modal/ReportBugModal';
 
 function Header({ onConnectWallet, onLogout }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const location = useLocation();
 
@@ -51,7 +54,18 @@ function Header({ onConnectWallet, onLogout }) {
     setIsMenuOpen(false);
   };
 
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
+    <>
     <nav className={`flex items-center justify-center w-full h-[90px] bg-header-bg backdrop-blur-lg border-b border-[#300734] z-[9999] ${makeNavStick ? 'fixed top-0' : 'relative'}`}>
       <div className="flex items-center justify-between w-full px-[30px] relative">
         <div className="logo">
@@ -67,8 +81,16 @@ function Header({ onConnectWallet, onLogout }) {
           </div>
           <WalletSection onConnectWallet={onConnectWallet} onLogout={onLogout} />
         </div>
-      </div>
-    </nav>
+      </nav>
+
+     
+      {!isModalOpen && <ReportBugButton onClick={openModal} />}
+
+    
+      {isModalOpen && (
+        <ReportBugModal onClose={closeModal} />
+      )}
+    </>
   );
 }
 
diff --git a/frontend/src/components/layout/header/header.css b/frontend/src/components/layout/header/header.css
index da5f89c34..a8dae51bf 100644
--- a/frontend/src/components/layout/header/header.css
+++ b/frontend/src/components/layout/header/header.css
@@ -275,6 +275,7 @@
     height: 48px;
     font-size: 14px;
   }
+
   .Toastify__toast {
     left: 50px;
     height: 60px;
@@ -342,6 +343,7 @@
   .header-nav {
     height: 80px;
   }
+
   .list-items {
     padding: 0 25px;
   }
@@ -383,3 +385,11 @@
     width: 180px;
   }
 }
+
+.report-btn-cont {
+  display: flex;
+  width: 100%;
+  padding: 10px 30px;
+  justify-content: end;
+  height: fit-content;
+}
\ No newline at end of file
diff --git a/frontend/src/components/report-button/ReportBugButton.css b/frontend/src/components/report-button/ReportBugButton.css
new file mode 100644
index 000000000..f7293a33b
--- /dev/null
+++ b/frontend/src/components/report-button/ReportBugButton.css
@@ -0,0 +1,33 @@
+.report-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: fixed;
+  right: 30px;
+  top: 125px;
+  z-index: 10;
+  height: 46px;
+  background: #11061e;
+  border: 1px solid #36294e;
+  border-radius: 12px;
+  padding: 12px 24px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.report-button:hover {
+  background: linear-gradient(to right, rgba(147, 51, 234, 0.3), rgba(59, 130, 246, 0.3));
+}
+
+.bug-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.bug-text {
+  color: #e7ecf0;
+  font-family: Open Sans;
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: 13px;
+}
diff --git a/frontend/src/components/report-button/ReportBugButton.jsx b/frontend/src/components/report-button/ReportBugButton.jsx
new file mode 100644
index 000000000..d40f7a4e5
--- /dev/null
+++ b/frontend/src/components/report-button/ReportBugButton.jsx
@@ -0,0 +1,25 @@
+import React from "react"
+import "./ReportBugButton.css"
+import ReportBugIcon from "../../assets/icons/customer-service-01.svg"
+
+export function ReportBugButton({ onClick }) {
+    return (
+        <button className="report-button" onClick={(e) => {
+    
+            e.stopPropagation();
+            onClick();
+        }}>
+
+            <img
+                src={ReportBugIcon}
+                alt="bug-icon"
+                className="bug-icon"
+            />
+
+            <p className="bug-text">Report Bug</p>
+
+
+        </button>
+    )
+}
+
diff --git a/frontend/src/components/report-modal/ReportBugModal.css b/frontend/src/components/report-modal/ReportBugModal.css
new file mode 100644
index 000000000..cfd5e000c
--- /dev/null
+++ b/frontend/src/components/report-modal/ReportBugModal.css
@@ -0,0 +1,134 @@
+.modall-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: var(--spinner-bgn);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+    z-index: 10100;
+    
+    
+    padding: 100px 100px;
+
+}
+
+.text-group {
+    background-color: #120721;
+    border-radius: 8px;
+    padding: 24px;
+    width: 100%;
+    max-width: 642px;
+}
+
+.report-bug-form {
+    border-radius: 2px;
+
+}
+
+
+
+.modall-content h3 {
+
+    font-family: Open Sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #798795;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.line {
+    border: 1px solid #22153A;
+}
+
+.modal-header {
+    font-family: Open Sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #798795
+}
+
+.modal-paragraph-text {
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    padding: 5px 0px;
+    color: #f0f0f0
+}
+
+.telegram-icon {
+    width: 20px;
+    height: 20px;
+
+}
+
+.bug-textarea {
+    width: 100%;
+    min-height: 135px;
+    background-color: #120721;
+    border: 1px solid #22153a;
+    border-radius: 8px;
+    padding: 12px;
+    color: white;
+    margin-bottom: 24px;
+    resize: none;
+    outline: none;
+}
+
+.bug-textarea::placeholder {
+    color: #f0f0f0;
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+
+}
+
+.dev-group-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+    margin-bottom: 24px;
+}
+
+.dev-group-link:hover {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.send-icon {
+    width: 16px;
+    height: 16px;
+    transform: rotate(-45deg);
+}
+
+.button-group {
+    margin-top: 20px;
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/frontend/src/components/report-modal/ReportBugModal.jsx b/frontend/src/components/report-modal/ReportBugModal.jsx
new file mode 100644
index 000000000..52016c290
--- /dev/null
+++ b/frontend/src/components/report-modal/ReportBugModal.jsx
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import "./ReportBugModal.css";
+import telegramIcon from "../../assets/icons/telegram.svg";
+import { Button } from "components/ui/custom-button/Button";
+import { useWalletStore } from "stores/useWalletStore";
+import { useBugReport } from "hooks/useBugReport";
+
+export function ReportBugModal({ onClose }) {
+    const { walletId } = useWalletStore();
+    const [bugDescription, setBugDescription] = useState("");
+    const { mutation, handleSubmit } = useBugReport(walletId, bugDescription, onClose);
+
+    return (
+        <div
+            onClick={onClose}
+            className="modall-overlay"
+        >
+            <form
+                className="report-bug-form"
+                onClick={(e) => e.stopPropagation()}
+                onSubmit={handleSubmit}
+            >
+                <div className="modall-content">
+                    <div className="text-group">
+                        <h3>Report Bug</h3>
+                        <p className="modal-paragraph-text">
+                            Please describe the bug you've encountered
+                        </p>
+                        <textarea
+                            value={bugDescription}
+                            onChange={(e) => setBugDescription(e.target.value)}
+                            placeholder="The bug I'm experiencing..."
+                            className="bug-textarea"
+
+                        />
+                        <a
+                            className="dev-group-link"
+                            href="https://t.me/spotnet_dev"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <img
+                                src={telegramIcon}
+                                alt="telegram-icon"
+                                className="telegram-icon"
+                            />
+                            Ask in our Dev group
+                        </a>
+                    </div>
+
+                    <div className="button-group">
+                        <Button
+                            variant="secondary"
+                            type="button"
+                            className="cancel-button"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onClose();
+                            }}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="primary"
+                            type="submit"
+                            className="submit-button"
+                        >
+                            {mutation.isPending ? "Sending..." : "Send Report"}
+                        </Button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}
diff --git a/frontend/src/components/ui/action-modal/actionModal.css b/frontend/src/components/ui/action-modal/actionModal.css
index 17ca91852..275a56928 100644
--- a/frontend/src/components/ui/action-modal/actionModal.css
+++ b/frontend/src/components/ui/action-modal/actionModal.css
@@ -57,6 +57,7 @@
   max-width: 400px;
   margin: 0 auto 16px;
   font-family: var(--font-family);
+
   &.no-content {
     padding: 55px 0;
   }
@@ -128,6 +129,7 @@
     font-size: 20px;
     margin-bottom: 12px;
     margin: 0 auto 10px;
+
     &.no-content {
       padding: 68px 0;
     }
@@ -169,6 +171,7 @@
     font-size: 14px;
     margin-bottom: 12px;
     margin: 0 auto 10px;
+
     &.no-content {
       padding: 43px 0;
     }
@@ -200,4 +203,4 @@
   .modal-box {
     width: 300px;
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
index ef21a5c4e..13dfaf632 100644
--- a/frontend/src/globals.css
+++ b/frontend/src/globals.css
@@ -79,6 +79,7 @@
 }
 
 body {
+  position: relative;
   overflow-x: hidden;
 }
 
@@ -119,9 +120,7 @@ a.svelte-1mtuslq.svelte-1mtuslq {
     background-size: cover;
     background-position: 50% 40%;
     height: 100%;
-  }
-} */
-
+  }*/
 
 @import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Inter:wght@100..900&family=Open+Sans:wght@300..800&family=Rethink+Sans:wght@400..800&display=swap');
 
diff --git a/frontend/src/hooks/useAddDeposit.js b/frontend/src/hooks/useAddDeposit.js
index fa693432c..02b2c40d5 100644
--- a/frontend/src/hooks/useAddDeposit.js
+++ b/frontend/src/hooks/useAddDeposit.js
@@ -16,7 +16,7 @@ export const useAddDeposit = () => {
       const { data: contractAddress } = await axiosInstance.get(`/api/get-user-contract?wallet_id=${walletId}`);
 
       // Prepare extra deposit data
-      const {data: prepare_data} = await axiosInstance.get(`/api/get-add-deposit-data/${positionId}`, {
+      const { data: prepare_data } = await axiosInstance.get(`/api/get-add-deposit-data/${positionId}`, {
         params: {
           amount: amount,
           token_symbol: tokenSymbol
diff --git a/frontend/src/hooks/useBugReport.js b/frontend/src/hooks/useBugReport.js
new file mode 100644
index 000000000..f0e0e2546
--- /dev/null
+++ b/frontend/src/hooks/useBugReport.js
@@ -0,0 +1,41 @@
+import { useMutation } from '@tanstack/react-query';
+import { axiosInstance } from 'utils/axios';
+import { generateTelegramLink } from 'services/telegram';
+import { notify } from 'components/layout/notifier/Notifier';
+
+export const useBugReport = (walletId, bugDescription, onClose) => {
+  const mutation = useMutation({
+    mutationFn: async () => {
+      if (!window?.Telegram?.WebApp?.initData?.user?.id) {
+        const { subscription_link } = await generateTelegramLink(walletId);
+        window.open(subscription_link, '_blank');
+        return;
+      }
+
+      return await axiosInstance.post(`/api/save-bug-report`, {
+        telegram_id: window?.Telegram?.WebApp?.initData?.user?.id,
+        wallet_id: walletId,
+        bug_description: bugDescription,
+      });
+    },
+    onSuccess: () => {
+      notify('Report sent successfully!');
+      onClose();
+    },
+    onError: (error) => {
+      notify(error.response?.data?.message || 'Report failed!', 'error');
+    },
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!bugDescription.trim()) {
+      notify('Bug description cannot be empty!', 'error');
+      return;
+    }
+    onClose();
+    mutation.mutate();
+  };
+
+  return { mutation, handleSubmit };
+};
diff --git a/frontend/src/hooks/useConnectWallet.js b/frontend/src/hooks/useConnectWallet.js
index abe1a051a..64d3d6997 100644
--- a/frontend/src/hooks/useConnectWallet.js
+++ b/frontend/src/hooks/useConnectWallet.js
@@ -5,7 +5,8 @@ import { connectWallet, checkForCRMToken } from '../services/wallet';
 export const useConnectWallet = (setWalletId) => {
   return useMutation({
     mutationFn: async () => {
-      const walletAddress = await connectWallet();
+      const wallet = await connectWallet();
+      const walletAddress = wallet.selectedAddress;
 
       if (!walletAddress) {
         throw new Error('Failed to connect wallet');
diff --git a/frontend/src/index.js b/frontend/src/index.js
index d2cc50cb5..f5589081c 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -5,15 +5,18 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from 'App';
 
+
 const queryClient = new QueryClient();
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
   <QueryClientProvider client={queryClient}>
+
     <Router>
       <App />
     </Router>
     <ReactQueryDevtools initialIsOpen={false} />
+
   </QueryClientProvider>
 );
diff --git a/frontend/src/pages/DashboardLayout.css b/frontend/src/pages/DashboardLayout.css
new file mode 100644
index 000000000..0efb007ed
--- /dev/null
+++ b/frontend/src/pages/DashboardLayout.css
@@ -0,0 +1,406 @@
+body {
+  font-family:
+    'Rethink Sans',
+    -apple-system,
+    Roboto,
+    Helvetica,
+    sans-serif;
+}
+
+.dashboard {
+  min-height: 100vh;
+  display: flex;
+  width: calc(100vw - 372px);
+  margin-left: 372px;
+}
+
+@media (max-width: 1024px) {
+  .dashboard {
+    width: 100vw;
+    margin-left: 0;
+    justify-content: center;
+  }
+}
+
+.dashboard-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(100vw - 735px);
+  height: 100%;
+}
+
+.dashboard-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  padding: 0 24px;
+  padding-top: 20px;
+  margin: 100px 0 50px 0;
+  height: 100%;
+}
+
+.dashboard-content {
+  width: 100%;
+  gap: 24px;
+  border-radius: 20px;
+  padding: 1rem 0;
+  color: var(--second-primary);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dashboard-title {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--second-primary);
+  text-align: center;
+}
+
+.top-cards-dashboard {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0px;
+  margin: 0px;
+  width: 642px;
+  height: 101px;
+}
+
+.dashboard-error {
+  color: var(--error-color);
+}
+
+.dashboard-info-card {
+  background: transparent;
+  border: 1px solid var(--light-purple);
+  border-radius: 8px;
+  width: 642px;
+  height: 318px;
+  padding: 16px 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.telegram-button {
+  position: relative;
+  display: inline-block;
+  font-weight: 600;
+  width: 642px;
+  height: 60px;
+  background: none;
+  color: var(--second-primary);
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  padding: 16px 24px 16px 24px;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.telegram-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50px;
+  padding: 2px;
+  background: var(--blue-pink-gradient);
+  -webkit-mask:
+    var(--second-primary) content-box,
+    var(--second-primary);
+  mask:
+    var(--second-primary) content-box,
+    var(--second-primary);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+  z-index: -1;
+}
+
+.error-message {
+  padding: 10px;
+  border-radius: 5px;
+  background-color: var(--error-color);
+  font-size: 15px;
+  color: var(--black);
+  margin-bottom: 5px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.form-alert-hex {
+  margin-left: auto;
+}
+
+.icon {
+  width: 32px;
+  height: 32px;
+  margin-right: 8px;
+  background: var(--border-color);
+  border-radius: 900px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px;
+}
+
+.tab-icon {
+  margin-right: 0.5rem;
+}
+
+.dashboard-info-container {
+  display: grid;
+  gap: 24px;
+}
+
+@media (max-width: 1300px) {
+  .dashboard-info-container {
+    justify-items: center;
+    width: 528px;
+  }
+
+  .dashboard-info-card {
+    width: 528px;
+  }
+
+  .dashboard-btn {
+    width: 100%;
+  }
+
+  .redeem-btn {
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard-content {
+    width: 100%;
+    max-width: 100%;
+    padding: 0.5rem 0;
+    gap: 16px;
+  }
+
+  .top-cards-dashboard {
+    width: 500px;
+    flex-direction: row;
+    height: auto;
+    margin: 0px;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    padding: 3px;
+  }
+
+  .tab-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
+  }
+
+  .dashboard-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 500px;
+    height: 55px;
+  }
+
+  .dashboard-info-card {
+    height: fit-content;
+    border-radius: 16px;
+    padding: 16px 24px;
+    min-height: 215px;
+    width: 500px;
+  }
+
+  .balance-info {
+    width: 100%;
+    height: auto;
+  }
+
+  .dashboard-title {
+    font-size: 24px;
+  }
+
+  .balance-label,
+  .balance-value,
+  .current-sum-red {
+    font-size: 14px;
+  }
+
+  .lucide-up-icon {
+    width: 22px;
+    height: 22px;
+    margin-left: 6px;
+  }
+
+  .lucide-down-icon {
+    width: 20px;
+    height: 20px;
+    margin-left: 6px;
+  }
+
+  .current-sum-green {
+    font-size: 14px;
+  }
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    padding: 3px;
+  }
+
+  .redeem-btn {
+    width: 500px;
+  }
+}
+
+@media (max-width: 550px) {
+  .dashboard-container {
+    width: 550px;
+  }
+
+  .dashboard-title {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 21.79px;
+  }
+
+  .dashboard-content {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .dashboard-info-container {
+    display: grid;
+    gap: 30px;
+    padding-bottom: 40px;
+  }
+
+  .dashboard-info-container {
+    width: 100%;
+  }
+
+  .dashboard-info-card {
+    margin: 0px auto;
+    width: 400px;
+    border-radius: 8px;
+    gap: 0;
+  }
+
+  .redeem-btn {
+    width: 400px;
+  }
+
+  .dashboard-btn {
+    width: 100%;
+  }
+
+  .top-cards-dashboard {
+    width: 400px;
+    gap: 8px;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .telegram {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .dashboard-info-container {
+    width: 100%;
+  }
+
+  .dashboard-info-card {
+    width: 380px;
+  }
+
+  .redeem-btn {
+    width: 380px;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .dashboard-btn {
+    font-size: 14px;
+    height: 50px;
+  }
+
+  .top-cards-dashboard {
+    width: 380px;
+    padding: 0px;
+    margin: 0px;
+    gap: 8px;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .balance-info {
+    width: fit-content;
+  }
+}
+
+@media (max-width: 400px) {
+  .dashboard-info-card {
+    width: 350px;
+  }
+
+  .dashboard-info-container {
+    width: 100%;
+  }
+
+  .top-cards-dashboard {
+    width: 350px;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .redeem-btn {
+    width: 350px;
+  }
+}
+
+@media (max-width: 350px) {
+  .dashboard-info-card {
+    width: 320px;
+  }
+
+  .top-cards-dashboard {
+    width: 320px;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .redeem-btn {
+    width: 320px;
+  }
+
+  .dashboard-btn {
+    height: 45px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/DashboardLayout.jsx b/frontend/src/pages/DashboardLayout.jsx
new file mode 100644
index 000000000..b3f116860
--- /dev/null
+++ b/frontend/src/pages/DashboardLayout.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Sidebar from 'components/layout/sidebar/Sidebar';
+import './DashboardLayout.css';
+
+import clockIcon from 'assets/icons/clock.svg';
+import computerIcon from 'assets/icons/computer-icon.svg';
+import depositIcon from 'assets/icons/deposit.svg';
+import withdrawIcon from 'assets/icons/withdraw.svg'
+
+
+
+const dashboardItems = [
+  {
+    id: 'dashboard',
+    name: 'Dashboard',
+    link: '/dashboard',
+    icon: computerIcon,
+  },
+  {
+    id: 'position_history',
+    name: 'Position History',
+    link: '/dashboard/position-history',
+    icon: clockIcon,
+  },
+  {
+    id: 'deposit',
+    name: 'Add Deposit',
+    link: '/dashboard/deposit',
+    icon: depositIcon,
+  },
+  {
+    id: 'withdraw',
+    name: 'Withdraw All',
+    link: '/dashboard/withdraw',
+    icon: withdrawIcon,
+  }
+];
+
+export default function DashboardLayout({ children, title = 'zkLend Position' }) {
+  return (
+    <div className="dashboard">
+      <Sidebar items={dashboardItems} />
+      <div className="dashboard-wrapper">
+        <div className="dashboard-container">
+          <h1 className="dashboard-title">{title}</h1>
+          <div className="dashboard-content">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/add-deposit/AddDeposit.jsx b/frontend/src/pages/add-deposit/AddDeposit.jsx
index 9138aae5c..3205976c8 100644
--- a/frontend/src/pages/add-deposit/AddDeposit.jsx
+++ b/frontend/src/pages/add-deposit/AddDeposit.jsx
@@ -2,16 +2,12 @@ import React, { useState } from 'react';
 import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
 import { ReactComponent as EthIcon } from 'assets/icons/ethereum.svg';
 import { useAddDeposit } from 'hooks/useAddDeposit';
+import DashboardLayout from '../DashboardLayout';
 import './addDeposit.css';
 import Card from 'components/ui/card/Card';
 import TokenSelector from 'components/ui/token-selector/TokenSelector';
 import { NUMBER_REGEX } from 'utils/regex';
 import { Button } from 'components/ui/custom-button/Button';
-import Sidebar from 'components/layout/sidebar/Sidebar';
-import clockIcon from 'assets/icons/clock.svg';
-import computerIcon from 'assets/icons/computer-icon.svg';
-import depositIcon from 'assets/icons/deposit.svg';
-import withdrawIcon from 'assets/icons/withdraw.svg';
 import useDashboardData from 'hooks/useDashboardData';
 
 export const AddDeposit = () => {
@@ -50,67 +46,54 @@ export const AddDeposit = () => {
     );
   };
 
-  const dashboardItems = [
-    { id: 'dashboard', name: 'Dashboard', link: '/dashboard', icon: computerIcon },
-    { id: 'position_history', name: 'Position History', link: '/dashboard/position-history', icon: clockIcon },
-    { id: 'deposit', name: 'Add Deposit', link: '/dashboard/deposit', icon: depositIcon },
-    { id: 'withdraw', name: 'Withdraw All', link: '/dashboard/withdraw', icon: withdrawIcon },
-  ];
-
   return (
-    <div className="deposit">
-      <Sidebar items={dashboardItems} />
-      <div className="deposit-wrapper">
-        <div className="deposit-container">
-          <h1 className="deposit-title">zkLend Deposit</h1>
-          <div className="main-container-deposit">
-            <div className="top-cards-deposit">
-              <Card
-                label="Health Factor"
-                value={dashboardData?.health_ratio}
-                icon={<HealthIcon className="icon" />}
-              />
-              <Card
-                label="Borrow Balance"
-                value={formatNumber(dashboardData?.borrowed, true)}
-                icon={<EthIcon className="icon" />}
-              />
-            </div>
-          </div>
-          <h1 className="deposit-title2">Please make a deposit</h1>
-          <TokenSelector
-            selectedToken={selectedToken}
-            setSelectedToken={setSelectedToken}
-            className="deposit-token-selector"
+    <DashboardLayout title="Add Deposit">
+      <div className="main-container-deposit">
+        <div className="top-cards-dashboard">
+          <Card
+            label="Health Factor"
+            value={dashboardData?.health_ratio}
+            icon={<HealthIcon className="icon" />}
+          />
+          <Card
+            label="Borrow Balance"
+            value={formatNumber(dashboardData?.borrowed, true)}
+            icon={<EthIcon className="icon" />}
           />
-          <div className="amount-input-deposit" aria-labelledby="amount-input-label">
-            <input
-              type="text"
-              id="amount-field"
-              value={amount}
-              onChange={handleAmountChange}
-              pattern="^\d*\.?\d*$"
-              className="amount-field-deposit"
-              aria-describedby="currency-symbol"
-              placeholder="0.00"
-              disabled={isLoading}
-            />
-            <span id="currency-symbol" className="currency-deposit">
-              {selectedToken}
-            </span>
-          </div>
-
-          <Button
-            size="lg"
-            className="deposit-btn"
-            variant="primary"
-            onClick={handleDeposit}
-            disabled={isLoading || amount === '0'}
-          >
-            {isLoading ? 'Processing...' : 'Deposit'}
-          </Button>
         </div>
       </div>
-    </div>
+      <h1 className="deposit-title2">Please make a deposit</h1>
+      <TokenSelector
+        selectedToken={selectedToken}
+        setSelectedToken={setSelectedToken}
+        className="deposit-token-selector"
+      />
+      <div className="amount-input-deposit" aria-labelledby="amount-input-label">
+        <input
+          type="text"
+          id="amount-field"
+          value={amount}
+          onChange={handleAmountChange}
+          pattern="^\d*\.?\d*$"
+          className="amount-field-deposit"
+          aria-describedby="currency-symbol"
+          placeholder="0.00"
+          disabled={isLoading}
+        />
+        <span id="currency-symbol" className="currency-deposit">
+          {selectedToken}
+        </span>
+      </div>
+
+      <Button
+        size="lg"
+        className="redeem-btn"
+        variant="primary"
+        onClick={handleDeposit}
+        disabled={isLoading || amount === '0'}
+      >
+        {isLoading ? 'Processing...' : 'Deposit'}
+      </Button>
+    </DashboardLayout>
   );
-};
+};
\ No newline at end of file
diff --git a/frontend/src/pages/add-deposit/addDeposit.css b/frontend/src/pages/add-deposit/addDeposit.css
index 74197f93b..f35267fd0 100644
--- a/frontend/src/pages/add-deposit/addDeposit.css
+++ b/frontend/src/pages/add-deposit/addDeposit.css
@@ -1,47 +1,4 @@
-.deposit {
-  min-height: 100vh;
-  display: flex;
-  width: calc(100vw - 372px);
-  margin-left: 372px;
-}
-
-@media (max-width: 1024px) {
-  .deposit {
-    width: 100%;
-    margin-left: 0;
-    justify-content: center;
-  }
-}
-
-.deposit-wrapper {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: calc(100vw - 735px);
-}
-
-.deposit-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 32px;
-  padding: 0 26px;
-  padding-top: 20px;
-  width: fit-content;
-  margin: 100px 0 50px 0;
-}
-
-.deposit-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: #ffffff;
-  text-align: center;
-  margin-bottom: 0;
-}
-
-.main-container-deposit {
+/* .main-container-deposit {
   gap: 2px;
   padding-top: 24px;
   border-radius: 8px;
@@ -52,7 +9,7 @@
 
   flex-direction: column;
   align-items: center;
-}
+} */
 .top-cards-deposit {
   display: flex;
   gap: 0.5rem;
@@ -219,22 +176,11 @@
 }
 
 @media (max-width: 768px) {
-  .deposit-wrapper {
-    padding-top: 24px;
-  }
 
-  .deposit-title {
-    font-size: 16px;
-  }
 
   .deposit-title2 {
     margin-top: 0px;
   }
-
-  .deposit-container {
-    margin-left: 0;
-    gap: 20px;
-  }
 }
 
 @media (max-width: 680px) {
@@ -266,9 +212,7 @@
     height: 88px;
     margin-top: -6px;
   }
-  .deposit-container {
-    margin: 50px 0 50px 0;
-  }
+  
 
   @media (max-width: 420px) {
     .top-cards-deposit,
diff --git a/frontend/src/pages/dashboard/Dashboard.jsx b/frontend/src/pages/dashboard/Dashboard.jsx
index efee2971c..929bfff3b 100644
--- a/frontend/src/pages/dashboard/Dashboard.jsx
+++ b/frontend/src/pages/dashboard/Dashboard.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import './dashboard.css';
+import DashboardLayout from '../DashboardLayout';
 import { ReactComponent as EthIcon } from '../../assets/icons/ethereum.svg';
 import { ReactComponent as StrkIcon } from '../../assets/icons/strk.svg';
 import { ReactComponent as UsdIcon } from '../../assets/icons/usd_coin.svg';
@@ -17,16 +17,11 @@ import { ReactComponent as CollateralIcon } from '../../assets/icons/collateral_
 import Collateral from '../../components/dashboard/collateral/Collateral';
 import Card from '../../components/ui/card/Card';
 import { ReactComponent as HealthIcon } from '../../assets/icons/health.svg';
-import Sidebar from 'components/layout/sidebar/Sidebar';
-import clockIcon from 'assets/icons/clock.svg';
-import computerIcon from 'assets/icons/computer-icon.svg';
-import depositIcon from 'assets/icons/deposit.svg';
-import withdrawIcon from 'assets/icons/withdraw.svg';
 import Deposited from 'components/dashboard/deposited/Deposited';
 import DashboardTabs from 'components/dashboard/dashboard-tab/DashboardTabs';
 import { DASHBOARD_TABS } from 'utils/constants';
 
-export default function Component({ telegramId }) {
+export default function DashboardPage({ telegramId }) {
   const { walletId } = useWalletStore();
   const [showModal, setShowModal] = useState(false);
   const handleOpen = () => setShowModal(true);
@@ -68,6 +63,8 @@ export default function Component({ telegramId }) {
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState(COLLATERAL);
 
+  // ... (keep existing useEffect logic from the previous implementation)
+
   useEffect(() => {
     console.log('Fetching data for walletId:', walletId);
   }, [walletId]);
@@ -143,95 +140,60 @@ export default function Component({ telegramId }) {
     return '';
   };
 
-  const dashboardItems = [
-    {
-      id: 'dashboard',
-      name: 'Dashboard',
-      link: '/dashboard',
-      icon: computerIcon,
-    },
-    {
-      id: 'position_history',
-      name: 'Position History',
-      link: '/dashboard/position-history',
-      icon: clockIcon,
-    },
-    {
-      id: 'deposit ',
-      name: 'Add Deposit',
-      link: '/dashboard/deposit',
-      icon: depositIcon,
-    },
-    {
-      id: 'withdraw ',
-      name: 'Withdraw All',
-      link: '/dashboard/withdraw',
-      icon: withdrawIcon,
-    },
-  ];
-
   const depositedData = { eth: 1, strk: 12, usdc: 4, usdt: 9 };
 
   return (
-    <div className="dashboard">
-      <Sidebar items={dashboardItems} />
-      <div className="dashboard-wrapper">
-        <div className="dashboard-container">
-          {loading && <Spinner loading={loading} />}
-          <h1 className="dashboard-title">zkLend Position</h1>
-          <div className="dashboard-content">
-            <div className="top-cards-dashboard">
-              <Card label="Health Factor" value={healthFactor} icon={<HealthIcon className="icon" />} />
-              <Card label="Borrow Balance" cardData={cardData} icon={<EthIcon className="icon" />} />
-            </div>
-            <div className="dashboard-info-container">
-              <div className="dashboard-info-card">
-                <DashboardTabs activeTab={activeTab} switchTab={setActiveTab} />
-
-                {activeTab === COLLATERAL && (
-                  <Collateral
-                    getCurrentSumColor={getCurrentSumColor}
-                    startSum={startSum}
-                    currentSum={currentSum}
-                    data={cardData}
-                  />
-                )}
-
-                {activeTab === BORROW && <Borrow data={cardData} />}
-
-                {activeTab === DEPOSITED && <Deposited data={depositedData} />}
-              </div>
-              <Button
-                className="redeem-btn"
-                variant="primary"
-                size="lg"
-                onClick={() => closePositionEvent()}
-                disabled={isClosing || !hasOpenedPosition}
-              >
-                {isClosing ? 'Closing...' : 'Redeem'}
-              </Button>
-              <Button variant="secondary" size="lg" className="dashboard-btn telegram" onClick={handleOpen}>
-                <TelegramIcon className="tab-icon" />
-                Enable telegram notification bot
-              </Button>
-              {showModal && (
-                <ActionModal
-                  isOpen={showModal}
-                  title="Telegram Notification"
-                  subTitle="Do you want to enable telegram notification bot?"
-                  content={[
-                    'This will allow you to receive quick notifications on your telegram line in realtime. You can disable this setting anytime.',
-                  ]}
-                  cancelLabel="Cancel"
-                  submitLabel="Yes, Sure"
-                  submitAction={handleSubscribe}
-                  cancelAction={handleClose}
-                />
-              )}
-            </div>
-          </div>
+    <DashboardLayout>
+      {loading && <Spinner loading={loading} />}
+      <div className="top-cards-dashboard">
+        <Card label="Health Factor" value={healthFactor} icon={<HealthIcon className="icon" />} />
+        <Card label="Borrow Balance" cardData={cardData} icon={<EthIcon className="icon" />} />
+      </div>
+      <div className="dashboard-info-container">
+        <div className="dashboard-info-card">
+          <DashboardTabs activeTab={activeTab} switchTab={setActiveTab} />
+
+          {activeTab === COLLATERAL && (
+            <Collateral
+              getCurrentSumColor={getCurrentSumColor}
+              startSum={startSum}
+              currentSum={currentSum}
+              data={cardData}
+            />
+          )}
+
+          {activeTab === BORROW && <Borrow data={cardData} />}
+
+          {activeTab === DEPOSITED && <Deposited data={depositedData} />}
         </div>
+        <Button
+          className="redeem-btn"
+          variant="primary"
+          size="lg"
+          onClick={() => closePositionEvent()}
+          disabled={isClosing || !hasOpenedPosition}
+        >
+          {isClosing ? 'Closing...' : 'Redeem'}
+        </Button>
+        <Button variant="secondary" size="lg" className="dashboard-btn telegram" onClick={handleOpen}>
+          <TelegramIcon className="tab-icon" />
+          Enable telegram notification bot
+        </Button>
+        {showModal && (
+          <ActionModal
+            isOpen={showModal}
+            title="Telegram Notification"
+            subTitle="Do you want to enable telegram notification bot?"
+            content={[
+              'This will allow you to receive quick notifications on your telegram line in realtime. You can disable this setting anytime.',
+            ]}
+            cancelLabel="Cancel"
+            submitLabel="Yes, Sure"
+            submitAction={handleSubscribe}
+            cancelAction={handleClose}
+          />
+        )}
       </div>
-    </div>
+    </DashboardLayout>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard/dashboard.css b/frontend/src/pages/dashboard/dashboard.css
index b0a48373d..52a7ea2fa 100644
--- a/frontend/src/pages/dashboard/dashboard.css
+++ b/frontend/src/pages/dashboard/dashboard.css
@@ -56,6 +56,7 @@ body {
 }
 
 .dashboard-title {
+  margin-top: 1rem;
   font-size: 32px;
   font-weight: 600;
   color: var(--second-primary);
@@ -182,13 +183,6 @@ body {
 }
 
 @media (max-width: 768px) {
-  .dashboard-content {
-    width: 100%;
-    max-width: 100%;
-    padding: 0.5rem 0;
-    gap: 16px;
-  }
-
   .top-cards-dashboard {
     width: 500px;
     flex-direction: row;
@@ -240,6 +234,7 @@ body {
   .balance-value,
   .current-sum-red {
     font-size: 14px;
+    color: #ff0000;
   }
 
   .lucide-up-icon {
@@ -256,6 +251,7 @@ body {
 
   .current-sum-green {
     font-size: 14px;
+    color: #60af77;
   }
 
   .icon {
@@ -271,23 +267,12 @@ body {
 }
 
 @media (max-width: 550px) {
-  .dashboard-container {
-    width: 550px;
-  }
-
   .dashboard-title {
     font-size: 18px;
     font-weight: 600;
     line-height: 21.79px;
   }
 
-  .dashboard-content {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-  }
-
   .dashboard-info-container {
     display: grid;
     gap: 30px;
@@ -403,4 +388,4 @@ body {
   .dashboard-btn {
     height: 45px;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/form/Form.jsx b/frontend/src/pages/form/Form.jsx
index aa27e8114..3fb3f8f86 100644
--- a/frontend/src/pages/form/Form.jsx
+++ b/frontend/src/pages/form/Form.jsx
@@ -78,6 +78,8 @@ const Form = () => {
   return (
     <div className="form-content-wrapper">
       <BalanceCards className="balance-card" />
+
+
       {isClosePositionOpen && (
         <ActionModal
           isOpen={isClosePositionOpen}
@@ -98,6 +100,7 @@ const Form = () => {
         <div className="form-title">
           <h1>Please submit your leverage details</h1>
         </div>
+
         <TokenSelector
           selectedToken={selectedToken}
           setSelectedToken={setSelectedToken}
diff --git a/frontend/src/pages/position-history/PositionHistory.jsx b/frontend/src/pages/position-history/PositionHistory.jsx
index 4f68de659..5b2ec263e 100644
--- a/frontend/src/pages/position-history/PositionHistory.jsx
+++ b/frontend/src/pages/position-history/PositionHistory.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import DashboardLayout from '../DashboardLayout';
 import './positionHistory.css';
 import { ReactComponent as HealthIcon } from '../../assets/icons/health.svg';
 import { ReactComponent as EthIcon } from '../../assets/icons/ethereum.svg';
@@ -11,11 +12,6 @@ import useDashboardData from '../../hooks/useDashboardData';
 import Card from '../../components/ui/card/Card';
 import PositionHistoryModal from '../../pages/position-history/PositionHistoryModal';
 import PositionPagination from '../../pages/position-history/PositionPagination';
-import Sidebar from 'components/layout/sidebar/Sidebar';
-import clockIcon from 'assets/icons/clock.svg';
-import computerIcon from 'assets/icons/computer-icon.svg';
-import depositIcon from 'assets/icons/deposit.svg';
-import withdrawIcon from 'assets/icons/withdraw.svg';
 
 function PositionHistory() {
   const [selectedPosition, setSelectedPosition] = useState(null);
@@ -50,121 +46,109 @@ function PositionHistory() {
     pending: 'status-pending',
   };
 
-  const dashboardItems = [
-    { id: 'dashboard', name: 'Dashboard', link: '/dashboard', icon: computerIcon },
-    { id: 'position_history', name: 'Position History', link: '/dashboard/position-history', icon: clockIcon },
-    { id: 'deposit', name: 'Add Deposit', link: '/dashboard/deposit', icon: depositIcon },
-    { id: 'withdraw', name: 'Withdraw All', link: '/dashboard/withdraw', icon: withdrawIcon },
-  ];
-
   return (
-    <div className="position-history">
-      <Sidebar items={dashboardItems} />
-      <div className="position-wrapper">
-        <div className="position-container">
-          <h1 className="position-title">zkLend Position History</h1>
-          <div className="position-content">
-            <div className="position-top-cards">
-              <Card
-                label="Health Factor"
-                value={cardData?.health_ratio || '0.00'}
-                icon={<HealthIcon className="icon" />}
-              />
-              <Card
-                label="Borrow Balance"
-                cardData={cardData?.borrowed || '0.00'}
-                icon={<EthIcon className="icon" />}
-              />
-            </div>
-          </div>
-
-          <div className="position-content-table">
-            <div className="position-table-title">
-              <p>Position History</p>
-            </div>
+    <DashboardLayout title="Position History">
+      <div className="position-content">
+        <div className="position-top-cards">
+          <Card
+            label="Health Factor"
+            value={cardData?.health_ratio || '0.00'}
+            icon={<HealthIcon className="icon" />}
+          />
+          <Card
+            label="Borrow Balance"
+            cardData={cardData?.borrowed || '0.00'}
+            icon={<EthIcon className="icon" />}
+          />
+        </div>
+      </div>
 
-            <div className="position-table">
-              {isPending ? (
-                <div className="spinner-container">
-                  <Spinner loading={isPending} />
-                </div>
-              ) : (
-                <table className="text-white">
-                  <thead>
-                    <tr>
-                      <th></th>
-                      <th>Token</th>
-                      <th>Amount</th>
-                      <th>Created At</th>
-                      <th>Status</th>
-                      <th>Start Price</th>
-                      <th>Multiplier</th>
-                      <th>Liquidated</th>
-                      <th>Closed At</th>
-                      <th className="action-column">
-                        <img src={filterIcon} alt="filter-icon" draggable="false" />
-                      </th>
-                    </tr>
-                  </thead>
+      <div className="position-content-table">
+        <div className="position-table-title">
+          <p>Position History</p>
+        </div>
 
-                  <tbody>
-                    {!tableData || tableData.length === 0 || !filteredTableData ? (
-                      <tr>
-                        <td colSpan="10">No opened positions</td>
-                      </tr>
-                    ) : (
-                      filteredTableData.map((data, index) => (
-                        <tr key={data.id}>
-                          <td className="index">{index + 1}.</td>
-                          <td>
-                            <div className="token-cell">
-                              {tokenIconMap[data.token_symbol]}
-                              <span className="token-symbol">{data.token_symbol.toUpperCase()}</span>
-                            </div>
-                          </td>
-                          <td>{data.amount}</td>
-                          <td>{data.created_at}</td>
-                          <td className={`status-cell ${statusStyles[data.status.toLowerCase()] || ''}`}>
-                            {data.status}
-                          </td>
-                          <td>{data.start_price}</td>
-                          <td>{data.multiplier}</td>
-                          <td>{data.is_liquidated}</td>
-                          <td>{data.closed_at}</td>
-                          <td className="action-column">
-                            <span className="action-button" onClick={() => setSelectedPosition({ data, index })}>
-                              &#x22EE;
-                            </span>
-                          </td>
-                        </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
-              )}
+        <div className="position-table">
+          {isPending ? (
+            <div className="spinner-container">
+              <Spinner loading={isPending} />
             </div>
-          </div>
+          ) : (
+            <table className="text-white">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>Token</th>
+                  <th>Amount</th>
+                  <th>Created At</th>
+                  <th>Status</th>
+                  <th>Start Price</th>
+                  <th>Multiplier</th>
+                  <th>Liquidated</th>
+                  <th>Closed At</th>
+                  <th className="action-column">
+                    <img src={filterIcon} alt="filter-icon" draggable="false" />
+                  </th>
+                </tr>
+              </thead>
 
-          <PositionPagination
-            currentPage={currentPage}
-            setCurrentPage={setCurrentPage}
-            isPending={isPending}
-            tableData={tableData}
-            positionsOnPage={positionsOnPage}
-          />
+              <tbody>
+                {!tableData || tableData.length === 0 || !filteredTableData ? (
+                  <tr>
+                    <td colSpan="10">No opened positions</td>
+                  </tr>
+                ) : (
+                  filteredTableData.map((data, index) => (
+                    <tr key={data.id}>
+                      <td className="index">{index + 1}.</td>
+                      <td>
+                        <div className="token-cell">
+                          {tokenIconMap[data.token_symbol]}
+                          <span className="token-symbol">{data.token_symbol.toUpperCase()}</span>
+                        </div>
+                      </td>
+                      <td>{data.amount}</td>
+                      <td>{data.created_at}</td>
+                      <td className={`status-cell ${statusStyles[data.status.toLowerCase()] || ''}`}>
+                        {data.status}
+                      </td>
+                      <td>{data.start_price}</td>
+                      <td>{data.multiplier}</td>
+                      <td>{data.is_liquidated}</td>
+                      <td>{data.closed_at}</td>
+                      <td className="action-column">
+                        <span className="action-button" onClick={() => setSelectedPosition({ data, index })}>
+                          &#x22EE;
+                        </span>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          )}
         </div>
-        {selectedPosition && (
-          <PositionHistoryModal
-            position={selectedPosition.data}
-            onClose={() => setSelectedPosition(null)}
-            tokenIcon={tokenIconMap}
-            statusStyles={statusStyles}
-            index={selectedPosition.index + 1}
-          />
-        )}
       </div>
-    </div>
+
+      <PositionPagination
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        isPending={isPending}
+        tableData={tableData}
+        positionsOnPage={positionsOnPage}
+      />
+
+      {selectedPosition && (
+        <PositionHistoryModal
+          position={selectedPosition.data}
+          onClose={() => setSelectedPosition(null)}
+          tokenIcon={tokenIconMap}
+          statusStyles={statusStyles}
+          index={selectedPosition.index + 1}
+        />
+      )}
+    </DashboardLayout>
   );
 }
 
-export default PositionHistory;
+export default PositionHistory;
\ No newline at end of file
diff --git a/frontend/src/pages/position-history/positionHistory.css b/frontend/src/pages/position-history/positionHistory.css
index 1052a2ffa..0d61d606d 100644
--- a/frontend/src/pages/position-history/positionHistory.css
+++ b/frontend/src/pages/position-history/positionHistory.css
@@ -1,46 +1,4 @@
-.position-history {
-  min-height: 100vh;
-  display: flex;
-  width: calc(100vw - 372px);
-  margin-left: 372px;
-}
-
-@media (max-width: 1024px) {
-  .position-history {
-    width: 100%;
-    margin-left: 0;
-    justify-content: center;
-  }
-}
-
-.position-wrapper {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: calc(100vw - 735px);
-}
-
-.position-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 32px;
-  padding: 0 26px;
-  padding-top: 20px;
-  width: fit-content;
-  margin: 100px 0 50px 0;
-}
-
-.position-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: var(--primary);
-  text-align: center;
-  margin: 0;
-}
-
-.position-content {
+.dashboard-content  .position-content {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -55,7 +13,7 @@
   max-width: 642px;
 }
 
-.position-content-table {
+.dashboard-content .position-content-table {
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
diff --git a/frontend/src/pages/spotnet/dashboard/withdraw-all/WithdrawAll.jsx b/frontend/src/pages/spotnet/dashboard/withdraw-all/WithdrawAll.jsx
index 29aee33a7..fb52b2e02 100644
--- a/frontend/src/pages/spotnet/dashboard/withdraw-all/WithdrawAll.jsx
+++ b/frontend/src/pages/spotnet/dashboard/withdraw-all/WithdrawAll.jsx
@@ -1,61 +1,44 @@
 import React from 'react';
+import DashboardLayout from '../../../DashboardLayout';
 import BalanceCards from 'components/ui/balance-cards/BalanceCards';
-import './withdraw_all.css';
 import { useWalletStore } from 'stores/useWalletStore';
 import { Button } from 'components/ui/custom-button/Button';
 import useWithdrawAll from 'hooks/useWithdrawAll';
-import Sidebar from 'components/layout/sidebar/Sidebar';
-import clockIcon from 'assets/icons/clock.svg';
-import computerIcon from 'assets/icons/computer-icon.svg';
-import depositIcon from 'assets/icons/deposit.svg';
-import withdrawIcon from 'assets/icons/withdraw.svg';
+import './withdraw_all.css';
 
 const WithdrawAll = () => {
   const { walletId } = useWalletStore();
-
   const { withdrawAll, isLoading } = useWithdrawAll();
 
   const handleWithdrawAll = () => {
     withdrawAll(walletId);
   };
 
-  const dashboardItems = [
-    { id: 'dashboard', name: 'Dashboard', link: '/dashboard', icon: computerIcon },
-    { id: 'position_history', name: 'Position History', link: '/dashboard/position-history', icon: clockIcon },
-    { id: 'deposit', name: 'Add Deposit', link: '/dashboard/deposit', icon: depositIcon },
-    { id: 'withdraw', name: 'Withdraw All', link: '/dashboard/withdraw', icon: withdrawIcon },
-  ];
-
   return (
-    <div className="withdraw">
-      <Sidebar items={dashboardItems} />
-      <div className="withdrawall-wrapper">
-        <div className="withdrawall-container">
-          <BalanceCards className="balance-card-withdraw" />
-          <div className="withdrawall-content">
-            <div className="withdrawall-title">
-              <h1>Please take special note</h1>
-            </div>
+    <DashboardLayout title="Withdraw All">
+      <BalanceCards className="balance-card-withdraw" />
+      <div className="withdrawall-content">
+        <div className="withdrawall-title">
+          <h1>Please take special note</h1>
+        </div>
 
-            <div className="withdrawall-info-card">
-              Clicking on the `Withdraw All` button means you are agreeing to close all positions and get all tokens
-              transferred to your wallet.
-            </div>
-            <Button
-              variant="primary"
-              className="withdraw-all-btn"
-              size="lg"
-              type="button"
-              onClick={handleWithdrawAll}
-              disabled={isLoading}
-            >
-              {isLoading ? 'Processing...' : 'Withdraw All'}
-            </Button>
-          </div>
+        <div className="withdrawall-info-card">
+          Clicking on the `Withdraw All` button means you are agreeing to close all positions and get all tokens
+          transferred to your wallet.
         </div>
+        <Button
+          variant="primary"
+          className="withdraw-all-btn"
+          size="lg"
+          type="button"
+          onClick={handleWithdrawAll}
+          disabled={isLoading}
+        >
+          {isLoading ? 'Processing...' : 'Withdraw All'}
+        </Button>
       </div>
-    </div>
+    </DashboardLayout>
   );
 };
 
-export default WithdrawAll;
+export default WithdrawAll;
\ No newline at end of file
diff --git a/frontend/src/pages/spotnet/dashboard/withdraw-all/withdraw_all.css b/frontend/src/pages/spotnet/dashboard/withdraw-all/withdraw_all.css
index c5ba5f78c..3420b480b 100644
--- a/frontend/src/pages/spotnet/dashboard/withdraw-all/withdraw_all.css
+++ b/frontend/src/pages/spotnet/dashboard/withdraw-all/withdraw_all.css
@@ -1,51 +1,3 @@
-.withdraw {
-  min-height: 100vh;
-  display: flex;
-  width: 100%;
-  margin-left: 372px;
-}
-
-@media (max-width: 1024px) {
-  .withdraw {
-    width: 100%;
-    margin-left: 0;
-    justify-content: center;
-  }
-}
-
-.withdrawall-wrapper {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: calc(100vw - 735px);
-}
-
-.withdrawall-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 32px;
-  padding: 0 26px;
-  padding-top: 20px;
-  width: fit-content;
-  margin: 100px 0 50px 0;
-}
-
-.withdrawall-content {
-  width: 642px;
-  gap: 24px;
-  border-radius: 8px;
-  padding: 1rem 0;
-  color: var(--second-primary);
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-}
-
 .withdrawall-info-card {
   background: var(--warning-colour-alt);
   border: 1px solid var(--warning-colour);
@@ -95,20 +47,7 @@
 }
 
 @media (max-width: 768px) {
-  .withdrawall-wrapper {
-    padding: 1rem 0;
-  }
-
-  .withdrawall-container {
-    margin: 80px 0 50px 0;
-  }
-
-  .withdrawall-content {
-    padding: 0.5rem 24px;
-    gap: 16px;
-    width: 480px;
-  }
-
+  
   .withdrawall-info-card {
     width: 480px;
     margin-top: 35px;
@@ -128,20 +67,13 @@
 }
 
 @media (max-width: 550px) {
-  .withdrawall-wrapper {
+  /* .withdrawall-wrapper {
     background: url('../../../../../public/mobile-background.png') no-repeat;
     background-size: cover;
     background-position: 50% 40%;
     height: 100%;
-  }
-  .withdrawall-content {
-    gap: 40px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-  }
+  } */
+  
   .withdrawall-info-container {
     display: grid;
     gap: 30px;
diff --git a/frontend/src/services/wallet.js b/frontend/src/services/wallet.js
index 731e88892..bd94b3b7a 100644
--- a/frontend/src/services/wallet.js
+++ b/frontend/src/services/wallet.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { connect, disconnect } from 'starknetkit';
+import { InjectedConnector } from 'starknetkit/injected';
 import { ETH_ADDRESS, STRK_ADDRESS, USDC_ADDRESS } from '../utils/constants';
 import { ReactComponent as ETH } from 'assets/icons/ethereum.svg';
 import { ReactComponent as USDC } from 'assets/icons/borrow_usdc.svg';
 import { ReactComponent as STRK } from 'assets/icons/strk.svg';
 
 const CRM_TOKEN_ADDRESS = "0x051c4b1fe3bf6774b87ad0b15ef5d1472759076e42944fff9b9f641ff13e5bbe";
-let globalWallet = null;
 
 // Check if the connected wallet holds the CRM token
 export const checkForCRMToken = async (walletAddress) => {
@@ -16,9 +16,7 @@ export const checkForCRMToken = async (walletAddress) => {
   }
 
   try {
-    const { wallet } = await connect({
-      modalMode: "neverAsk",
-    });
+    const wallet = await getWallet();
 
     console.log('Checking CRM token balance for wallet:', wallet);
     const response = await wallet.provider.callContract({
@@ -40,9 +38,22 @@ export const checkForCRMToken = async (walletAddress) => {
   }
 };
 
+export const getConnectors = () => !localStorage.getItem("starknetLastConnectedWallet") ? [
+  new InjectedConnector({ options: { id: "argentX" }}),
+  new InjectedConnector({ options: { id: "braavos" }}),
+] : [
+  new InjectedConnector({ options: { id: localStorage.getItem("starknetLastConnectedWallet") }}),
+];
+
 export const getWallet = async () => {
-  if (globalWallet && globalWallet.isConnected) {
-    return globalWallet;
+  const { wallet } = await connect({
+    connectors: getConnectors(),
+    modalMode: "neverAsk",
+  });
+
+  if (wallet && wallet.isConnected) {
+    await wallet.enable();
+    return wallet;
   }
 
   console.log('No wallet found. Attempting to connect...');
@@ -54,8 +65,9 @@ export const connectWallet = async () => {
     console.log('Attempting to connect to wallet...');
 
     const { wallet } = await connect({
+      connectors: getConnectors(),
       modalMode: "alwaysAsk",
-      modalTheme: "light",
+      modalTheme: "dark"
     });
 
     if (!wallet) {
@@ -66,10 +78,8 @@ export const connectWallet = async () => {
     await wallet.enable();
 
     if (wallet.isConnected) {
-      const address = wallet.selectedAddress;
-      globalWallet = wallet;
-      console.log('Wallet successfully connected. Address:', address);
-      return address;
+      console.log('Wallet successfully connected. Address:', wallet.selectedAddress);
+      return wallet;
     } else {
       throw new Error('Wallet connection failed');
     }
@@ -86,9 +96,7 @@ export function logout() {
 
 export async function getTokenBalances(walletAddress) {
   try {
-    const { wallet } = await connect({
-      modalMode: "neverAsk",
-    });
+    const wallet = await getWallet();
     console.log("Wallet info", wallet);
 
     const tokenBalances = {
diff --git a/frontend/test/services/wallet.test.js b/frontend/test/services/wallet.test.js
index 5949382e7..c98ae749b 100644
--- a/frontend/test/services/wallet.test.js
+++ b/frontend/test/services/wallet.test.js
@@ -1,5 +1,6 @@
 import { connect } from 'starknetkit';
-import { checkForCRMToken, connectWallet, getTokenBalances, getBalances, logout } from '../../src/services/wallet';
+import { InjectedConnector } from 'starknetkit/injected';
+import { checkForCRMToken, connectWallet, getTokenBalances, getBalances, logout, getWallet, getConnectors } from '../../src/services/wallet';
 import { ETH_ADDRESS, STRK_ADDRESS, USDC_ADDRESS } from '../../src/utils/constants';
 
 jest.mock('starknetkit', () => ({
@@ -10,7 +11,7 @@ jest.mock('starknetkit', () => ({
 jest.mock(
   'starknetkit/injected',
   () => ({
-    InjectedConnector: jest.fn(),
+    InjectedConnector: jest.fn().mockImplementation((options) => options),
   }),
   { virtual: true }
 );
@@ -71,6 +72,140 @@ describe('Wallet Services', () => {
     });
   });
 
+  describe('getConnectors', () => {
+    it('should return connectors array with injected connectors', () => {
+      const mockGetItem = jest.fn();
+      Object.defineProperty(window, 'localStorage', {
+        value: {
+          getItem: mockGetItem.mockReturnValue(null),
+        },
+        writable: true,
+      });
+
+      const connectors = getConnectors();
+
+      expect(connectors).toEqual([
+        new InjectedConnector({ options: { id: 'argentX' } }),
+        new InjectedConnector({ options: { id: 'braavos' } }),
+      ]);
+    });
+
+    ['argentX', 'braavos'].forEach((connector) => {
+      it(`should return connectors array with injected connectors from local storage (${connector})`, () => {
+        const mockGetItem = jest.fn();
+        Object.defineProperty(window, 'localStorage', {
+          value: {
+            getItem: mockGetItem.mockReturnValue(connector),
+          },
+          writable: true,
+        });
+
+        const connectors = getConnectors();
+
+        expect(connectors).toEqual([
+          new InjectedConnector({ options: { id: connector } }),
+        ]);
+      })
+    });
+  });
+
+  describe('getWallet', () => {
+    const testCases = [
+      { connectorId: 'argentX', expectedAddress: '0x123' },
+      { connectorId: 'braavos', expectedAddress: '0x456' },
+    ];
+
+    testCases.forEach(({ connectorId, expectedAddress }) => {
+      it(`should return wallet object if wallet is connected with ${connectorId}`, async () => {
+        const mockStarknet = {
+          wallet: {
+            isConnected: true,
+            enable: jest.fn(),
+            selectedAddress: expectedAddress,
+          },
+        };
+
+        connect.mockResolvedValue(mockStarknet);
+
+        const mockGetItem = jest.fn().mockReturnValue(connectorId);
+        const mockSetItem = jest.fn();
+        
+        Object.defineProperty(window, 'localStorage', {
+          value: {
+            getItem: mockGetItem,
+          },
+          writable: true,
+        });
+
+        const wallet = await getWallet();
+        
+        expect(mockGetItem).toHaveBeenCalledWith('starknetLastConnectedWallet');
+
+        expect(connect).toHaveBeenCalledWith(
+          expect.objectContaining({
+            connectors: expect.arrayContaining([
+              expect.objectContaining({
+                options: expect.objectContaining({
+                  id: connectorId,
+                }),
+              }),
+            ]),
+            modalMode: 'neverAsk',
+          })
+        );
+        expect(wallet.isConnected).toBe(true);
+        expect(wallet.enable).toHaveBeenCalled();
+        expect(wallet.selectedAddress).toBe(expectedAddress);
+      });
+    })
+    
+    it('should return wallet object if wallet is not choosen before', async () => {
+      const mockStarknet = {
+        wallet: {
+          isConnected: true,
+          enable: jest.fn(),
+          selectedAddress: '0x123',
+        },
+      };
+
+      connect.mockResolvedValue(mockStarknet);
+
+      const mockGetItem = jest.fn().mockReturnValue(null);
+      
+      Object.defineProperty(window, 'localStorage', {
+        value: {
+          getItem: mockGetItem,
+        },
+        writable: true,
+      });
+
+      const wallet = await getWallet();
+      
+      expect(mockGetItem).toHaveBeenCalledWith('starknetLastConnectedWallet');
+
+      expect(connect).toHaveBeenCalledWith(
+        expect.objectContaining({
+          connectors: expect.arrayContaining([
+            expect.objectContaining({
+              options: expect.objectContaining({
+                id: 'argentX'
+              }),
+            }),
+            expect.objectContaining({
+              options: expect.objectContaining({
+                id: 'braavos'
+              }),
+            }),
+          ]),
+          modalMode: 'neverAsk'
+        })
+      );
+      expect(wallet.isConnected).toBe(true);
+      expect(wallet.enable).toHaveBeenCalled();
+      expect(wallet.selectedAddress).toBe('0x123');
+    });
+  });
+
   describe('connectWallet', () => {
     it('should successfully connect wallet and return address', async () => {
       const mockStarknet = {
@@ -83,16 +218,18 @@ describe('Wallet Services', () => {
 
       connect.mockResolvedValue(mockStarknet);
 
-      const address = await connectWallet();
+      const wallet = await connectWallet();
 
       expect(connect).toHaveBeenCalledWith(
         expect.objectContaining({
+          connectors: expect.any(Array),
           modalMode: 'alwaysAsk',
-          modalTheme: 'light'
+          modalTheme: 'dark'
         })
       );
       expect(mockStarknet.wallet.enable).toHaveBeenCalled();
-      expect(address).toBe('0x123');
+      expect(wallet.selectedAddress).toBe('0x123');
+      expect(wallet.isConnected).toBe(true);
     });
 
     it('should throw error when StarkNet object is not found', async () => {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 19368239f..3f9c8f1d6 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3266,11 +3266,6 @@ acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
 
-acorn@^7.0.0:
-  version "7.4.1"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
 acorn@^7.1.1:
   version "7.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
@@ -4326,7 +4321,7 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -4872,6 +4867,21 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@4:
   dependencies:
     ms "^2.1.3"
 
+debug@2.6.9:
+  version "2.6.9"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+
+  dependencies:
+    ms "2.0.0"
+
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@4:
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -8104,6 +8114,11 @@ lilconfig@^3.1.3:
   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz"
   integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
 
+lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
 limes@1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/limes/-/limes-1.1.0.tgz"
@@ -8398,6 +8413,7 @@ micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
     braces "^3.0.3"
     picomatch "^2.3.1"
 
+
 middleware-flow@0.8.0:
   version "0.8.0"
   resolved "https://registry.npmjs.org/middleware-flow/-/middleware-flow-0.8.0.tgz"
@@ -8423,11 +8439,12 @@ mime@^3.0.0:
   resolved "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz"
   integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
 
+
 mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz"
   integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
-
+  
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
@@ -8546,6 +8563,16 @@ ms@2.0.0:
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
   integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
 
+ms@^2.1.1, ms@^2.1.3, ms@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
 multicast-dns@^7.2.5:
   version "7.2.5"
   resolved "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz"
@@ -11000,6 +11027,11 @@ stethoskop@1.0.0:
   dependencies:
     node-statsd "0.1.1"
 
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
 stop-iteration-iterator@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz"
@@ -11152,7 +11184,7 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-stringify-object@^3.3.0, stringify-object@3.3.0:
+stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz"
   integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
diff --git a/web_app/db/seed_data.py b/web_app/db/seed_data.py
index 2f506d36b..8ea6de1cd 100644
--- a/web_app/db/seed_data.py
+++ b/web_app/db/seed_data.py
@@ -18,6 +18,7 @@
     TransactionStatus,
     User,
     Vault,
+    ExtraDeposit
 )
 
 logging.basicConfig(level=logging.INFO)
@@ -87,6 +88,34 @@ def create_positions(session: SessionLocal, users: list[User]) -> list[Position]
         logger.info("No positions created.")
     return positions
 
+def create_extra_deposits(session: SessionLocal, positions: list[Position]) -> None:
+    """
+    Create and save fake extra deposit records associated with given positions.
+    Args:
+        session (Session): SQLAlchemy session object.
+        positions (list): List of Position objects to associate with extra deposits.
+    """
+    extra_deposits = []
+    for position in positions:
+        num_deposits = fake.random_int(min=0, max=3)
+        for _ in range(num_deposits):
+            extra_deposit = ExtraDeposit(
+                position_id=position.id,
+                token_symbol=position.token_symbol,  
+                amount=str(  
+                    fake.random_number(digits=5)  
+                ),
+                added_at=fake.date_time_this_decade(),  
+            )
+            extra_deposits.append(extra_deposit)
+    
+    if extra_deposits:
+        session.bulk_save_objects(extra_deposits)
+        session.commit()
+        logger.info(f"Created {len(extra_deposits)} extra deposits for {len(positions)} positions.")
+    else:
+        logger.info("No extra deposits created.")
+
 
 def create_airdrops(session: SessionLocal, users: list[User]) -> None:
     """
@@ -193,6 +222,7 @@ def create_transaction(session: SessionLocal, positions: list[Position]) -> None
         # Populate the database
         users = create_users(session)
         positions = create_positions(session, users)
+        create_extra_deposits(session, positions)
         # create_airdrops(session, users)
         # create_telegram_users(session, users)
         create_vaults(session, users)