From 876562e5b804fa2e526552f853ba8eff5053d603 Mon Sep 17 00:00:00 2001
From: Andrii Bogomolov <bogomolov.andrii@gmail.com>
Date: Fri, 6 Dec 2024 15:56:00 +0100
Subject: [PATCH 1/4] fix/all_styles

Desktop, tablet and mob styles were adjusted for header, dashboard, form, about, information sections.
---
 frontend/src/App.jsx                          |   2 +-
 frontend/src/components/Footer/Footer.jsx     |  11 +-
 frontend/src/components/Footer/footer.css     |  13 +-
 .../src/components/MetricCard/MetricCard.jsx  |   2 +-
 .../src/components/MetricCard/metricCard.css  |   2 +-
 frontend/src/components/NavigationLinks.jsx   |   8 +-
 .../TableOfContent/TableOfContents.jsx        |  16 +-
 .../table_of_content_styles.css               | 188 ++++++++--------
 frontend/src/components/TokenSelector.jsx     |  46 ++--
 frontend/src/components/WalletSection.jsx     |   7 +-
 frontend/src/components/header/header.css     | 112 +++++++++-
 .../mobDropdownMenu/mobDropdownMenu.css       |  28 ++-
 .../components/ui/ActionModal/actionModal.css |  88 ++++++--
 frontend/src/globals.css                      |   4 +
 frontend/src/pages/forms/Form.jsx             |   5 -
 frontend/src/pages/forms/form.css             |  20 +-
 frontend/src/pages/spotnet/about/About.jsx    |   2 +-
 frontend/src/pages/spotnet/about/about.css    |  17 +-
 .../src/pages/spotnet/dashboard/Dashboard.jsx | 121 ++++-------
 .../src/pages/spotnet/dashboard/dashboard.css | 200 ++++++++++++++----
 .../spotnet/documentation/documentation.css   |  16 +-
 .../pages/spotnet/information/information.css |  14 +-
 .../src/pages/spotnet/overview/overview.css   | 138 ++++++------
 frontend/src/pages/vault/stake/stake.css      |  43 ++--
 frontend/src/pages/vault/vaultLayout.css      |  58 +++--
 25 files changed, 692 insertions(+), 469 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ad2ecb8c..3a600107 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -105,7 +105,7 @@ function App() {
           <Route path="/form" element={<Form />} />
           <Route path="/documentation" element={<Documentation />} />
 
-            <Route path="/stake" element={<Stake />} />
+          <Route path="/stake" element={<Stake />} />
         </Routes>
       </main>
       <Footer />
diff --git a/frontend/src/components/Footer/Footer.jsx b/frontend/src/components/Footer/Footer.jsx
index 44794447..00b2cd87 100644
--- a/frontend/src/components/Footer/Footer.jsx
+++ b/frontend/src/components/Footer/Footer.jsx
@@ -68,7 +68,7 @@ function Footer() {
           </a>
         ))}
       </div>
-      <div className="footer-mob-nav px">
+      <div className="footer-mob-nav">
         <NavLink
           to="/dashboard"
           className={({ isActive }) => (isActive ? 'active-link footer-link-dashboard' : 'footer-link-dashboard')}
@@ -88,9 +88,8 @@ function Footer() {
             <span>Form</span>
           </div>
         </NavLink>
-        <div className="footer-mob-divider"></div>
-
-        <NavLink
+        {/* <div className="footer-mob-divider"></div> */}
+        {/* <NavLink
           to="/stake"
           className={({ isActive }) => (isActive ? 'active-link footer-link-form' : 'footer-link-form')}
         >
@@ -98,8 +97,8 @@ function Footer() {
             <FormIcon className="footer-icon" />
             <span>Vault</span>
           </div>
-        </NavLink>
-        
+        </NavLink> */}
+        {/* <div className="footer-line"></div> */}
       </div>
     </footer>
   );
diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css
index 2253e3f7..f660a9cb 100644
--- a/frontend/src/components/Footer/footer.css
+++ b/frontend/src/components/Footer/footer.css
@@ -30,6 +30,10 @@
   transition: transform 0.3s ease;
 }
 
+.footer-docs > a:last-child {
+  margin-right: 0;
+}
+
 .footer-docs a:hover {
   transform: scale(1.1);
 }
@@ -94,14 +98,13 @@
     height: 70px;
   }
 
- 
-
   .footer-mob-nav {
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 15px 25px;
+    justify-content: inherit;
+    padding: 15px;
+    gap: 60px;
     width: 100%;
   }
 
@@ -179,5 +182,5 @@
 }
 
 .footer-link-active {
-  color: #49ABD2 !important;
+  color: #49abd2 !important;
 }
diff --git a/frontend/src/components/MetricCard/MetricCard.jsx b/frontend/src/components/MetricCard/MetricCard.jsx
index 38280718..8b1f577d 100644
--- a/frontend/src/components/MetricCard/MetricCard.jsx
+++ b/frontend/src/components/MetricCard/MetricCard.jsx
@@ -8,7 +8,7 @@ export default function MetricCard({ title, value }) {
         <span className="label">{title}</span>
       </div>
       <div className="card-value">
-        <span className="top-card-value">{value}</span>
+        <span className="metric-card-value">{value}</span>
       </div>
     </div>
   );
diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css
index 2680b484..bcddb893 100644
--- a/frontend/src/components/MetricCard/metricCard.css
+++ b/frontend/src/components/MetricCard/metricCard.css
@@ -34,7 +34,7 @@
     line-height: 16px;
   }
 
-  .card-value .top-card-value {
+  .card-value .metric-card-value {
     font-size: 20px;
     line-height: 27px;
   }
diff --git a/frontend/src/components/NavigationLinks.jsx b/frontend/src/components/NavigationLinks.jsx
index ec474ed3..1ab3cb0c 100644
--- a/frontend/src/components/NavigationLinks.jsx
+++ b/frontend/src/components/NavigationLinks.jsx
@@ -11,10 +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 className="nav-divider"></div> */}
+    {/* <NavLink to="/stake" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}> */}
+    {/* Vault */}
+    {/* </NavLink> */}
   </div>
 );
 
diff --git a/frontend/src/components/TableOfContent/TableOfContents.jsx b/frontend/src/components/TableOfContent/TableOfContents.jsx
index 527f1dd6..cfe7b030 100644
--- a/frontend/src/components/TableOfContent/TableOfContents.jsx
+++ b/frontend/src/components/TableOfContent/TableOfContents.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import "./table_of_content_styles.css";
+import './table_of_content_styles.css';
 
 const TableOfContents = ({ items, defaultActiveId, tabelTitle, headerHeight = 80 }) => {
   const [activeId, setActiveId] = useState(defaultActiveId);
@@ -47,28 +47,28 @@ const TableOfContents = ({ items, defaultActiveId, tabelTitle, headerHeight = 80
   };
 
   return (
-    <div className={"table-of-contents"}>
+    <div className={'table-of-contents'}>
       <div className="toc-title-container">
-        <h3 className={"toc-title"}>{tabelTitle}</h3>
+        <h3 className={'toc-title'}>{tabelTitle}</h3>
       </div>
-      <nav className={"toc-nav"}>
+      <nav className={'toc-nav'}>
         {items.map((item, index) => (
-          <div key={index} className={"toc-item"}>
+          <div key={index} className={'toc-item'}>
             <a
               href={item.link}
               onClick={(e) => handleClick(e, item.link)}
-              className={`${"toc-link"} ${activeId === item.link.replace('#', '') ? 'active' : ''}`}
+              className={`${'toc-link'} ${activeId === item.link.replace('#', '') ? 'active' : ''}`}
             >
               • {item.title}
             </a>
             {item.subItems && (
-              <div className={"toc-subitems"}>
+              <div className={'toc-subitems'}>
                 {item.subItems.map((subItem, subIndex) => (
                   <a
                     key={subIndex}
                     href={subItem.link}
                     onClick={(e) => handleClick(e, subItem.link)}
-                    className={`${"toc-sublink"} ${activeId === subItem.link.replace('#', '') ? 'active' : ''}`}
+                    className={`${'toc-sublink'} ${activeId === subItem.link.replace('#', '') ? 'active' : ''}`}
                   >
                     {subItem.title}
                   </a>
diff --git a/frontend/src/components/TableOfContent/table_of_content_styles.css b/frontend/src/components/TableOfContent/table_of_content_styles.css
index 7cc67ab6..19e9be05 100644
--- a/frontend/src/components/TableOfContent/table_of_content_styles.css
+++ b/frontend/src/components/TableOfContent/table_of_content_styles.css
@@ -1,152 +1,158 @@
 .table-of-contents {
-    width: 374px;
-    padding: 2rem;
-    margin-top: 90px;
-    background: #00000F;
-    min-height: 100vh;
-    height: 100%;
-    position: fixed;
-    overflow-y: auto;
-    border-right: 1px solid rgba(255, 255, 255, 0.1);
-    display: flex;
-    flex-direction: column;
-    padding-left: 90px;
+  width: 374px;
+  padding: 2rem;
+  margin-top: 90px;
+  background: #00000f;
+  min-height: 100vh;
+  height: 100%;
+  position: fixed;
+  overflow-y: auto;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  padding-left: 90px;
 }
 
 .toc-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1.5rem;
-    color: var(--primary);
-    padding-bottom: 15px;
-    border-bottom: 1px solid #36294E;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+  color: var(--primary);
+  padding-bottom: 15px;
+  border-bottom: 1px solid #36294e;
 }
 
 .toc-title-container::after {
-    content: "";
-    height: 10px;
-    background: linear-gradient(to right, #74D6FD 0%, transparent 100%);
-
+  content: '';
+  height: 10px;
+  background: linear-gradient(to right, #74d6fd 0%, transparent 100%);
 }
 
 .toc-nav {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding-bottom: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-bottom: 80px;
 }
 
 .toc-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .toc-link {
-    color: var(--primary);
-    text-decoration: none;
-    font-size: 0.875rem;
-    opacity: 0.8;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    padding: 4px 8px;
-    border-radius: 4px;
-    width: 100%;
-    position: relative;
+  color: var(--primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  opacity: 0.8;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  width: 100%;
+  position: relative;
 }
 
 .toc-link:hover {
-    background: transparent;
-    color: #74D6FD;
+  background: transparent;
+  color: #74d6fd;
 }
 
 .toc-link.active {
-    color: #74D6FD;
-    opacity: 1;
-    background: transparent;
+  color: #74d6fd;
+  opacity: 1;
+  background: transparent;
 }
 
 .toc-link.active::after {
-    content: '';
-    position: absolute;
-    left: 8px;
-    right: 0;
-    bottom: -2px;
-    height: 1px;
-    background: linear-gradient(to right, #74D6FD 0%, transparent 100%);
+  content: '';
+  position: absolute;
+  left: 8px;
+  right: 0;
+  bottom: -2px;
+  height: 1px;
+  background: linear-gradient(to right, #74d6fd 0%, transparent 100%);
 }
 
 .toc-subitems {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-left: 1.5rem;
 }
 
 .toc-sublink {
-    color: var(--primary);
-    text-decoration: none;
-    font-size: 0.875rem;
-    opacity: 0.6;
-    padding: 4px 8px;
-    border-radius: 4px;
-    width: 100%;
-    position: relative;
-    transition: all 0.2s ease;
+  color: var(--primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  opacity: 0.6;
+  padding: 4px 8px;
+  border-radius: 4px;
+  width: 100%;
+  position: relative;
+  transition: all 0.2s ease;
 }
 
 .toc-sublink:hover {
-    background: transparent;
-    color: #74D6FD;
+  background: transparent;
+  color: #74d6fd;
 }
 
 .toc-sublink.active {
-    color: #74D6FD;
-    opacity: 1;
-    background: transparent;
+  color: #74d6fd;
+  opacity: 1;
+  background: transparent;
 }
 
 .toc-sublink.active::after {
-    content: '';
-    position: absolute;
-    left: 8px;
-    right: 0;
-    bottom: -2px;
-    height: 1px;
-    background: linear-gradient(to right, #74D6FD 0%, transparent 100%);
+  content: '';
+  position: absolute;
+  left: 8px;
+  right: 0;
+  bottom: -2px;
+  height: 1px;
+  background: linear-gradient(to right, #74d6fd 0%, transparent 100%);
 }
 
 .documentation-section {
-    margin-bottom: 4rem;
-    position: relative;
-    scroll-margin-top: 80px;
+  margin-bottom: 4rem;
+  position: relative;
+  scroll-margin-top: 80px;
 }
 
 html {
-    scroll-behavior: smooth;
-    scroll-padding-top: 80px;
+  scroll-behavior: smooth;
+  scroll-padding-top: 80px;
+}
+
+@media (max-width: 1440px) {
+  .table-of-contents {
+    width: 300px;
+    padding-left: 60px;
+  }
 }
 
 @media (max-width: 768px) {
-    .table-of-contents {
-        display: none;
-    }
+  .table-of-contents {
+    display: none;
+  }
 }
 
 .table-of-contents::-webkit-scrollbar {
-    width: 6px;
+  width: 6px;
 }
 
 .table-of-contents::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .table-of-contents::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
 }
 
 .table-of-contents::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
\ No newline at end of file
+  background: rgba(255, 255, 255, 0.2);
+}
diff --git a/frontend/src/components/TokenSelector.jsx b/frontend/src/components/TokenSelector.jsx
index cb8b6d40..f8e7ec04 100644
--- a/frontend/src/components/TokenSelector.jsx
+++ b/frontend/src/components/TokenSelector.jsx
@@ -2,39 +2,37 @@ import React from 'react';
 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';
-import { ReactComponent as DAI } from 'assets/icons/dai.svg';
 
 const Tokens = [
   { id: 'ethOption', component: <ETH />, label: 'ETH' },
   { id: 'usdcOption', component: <USDC />, label: 'USDC' },
   { id: 'strkOption', component: <STRK />, label: 'STRK' },
-  { id: 'daiOption', component: <DAI />, label: 'DAI' },
 ];
 
-
 const TokenSelector = ({ selectedToken, setSelectedToken }) => {
-  
-  return <div className='form-token'>
-    {Tokens.map((token) => (
-      <div className='token-card' key={token?.id}>
-        <div className="token-container">
-        <input
-          type='radio'
-          id={token.id}
-          checked={selectedToken === token.label}
-          name='token-options'
-          value={token.label}
-          onChange={() => setSelectedToken(token?.label)}
-        />
-          <label htmlFor={token?.id}>
-            <h5>
-              <span className="token-icon">{token?.component}</span> {token?.label}
-            </h5>
-          </label>
+  return (
+    <div className="form-token">
+      {Tokens.map((token) => (
+        <div className="token-card" key={token?.id}>
+          <div className="token-container">
+            <input
+              type="radio"
+              id={token.id}
+              checked={selectedToken === token.label}
+              name="token-options"
+              value={token.label}
+              onChange={() => setSelectedToken(token?.label)}
+            />
+            <label htmlFor={token?.id}>
+              <h5>
+                <span className="token-icon">{token?.component}</span> {token?.label}
+              </h5>
+            </label>
+          </div>
         </div>
-      </div>
-    ))}
-  </div>
+      ))}
+    </div>
+  );
 };
 
 export default TokenSelector;
diff --git a/frontend/src/components/WalletSection.jsx b/frontend/src/components/WalletSection.jsx
index 1ff370c9..0dc94869 100644
--- a/frontend/src/components/WalletSection.jsx
+++ b/frontend/src/components/WalletSection.jsx
@@ -2,10 +2,9 @@ import React, { useState, useEffect, useRef } from 'react';
 import Button from 'components/ui/Button/Button';
 import { useWalletStore } from 'stores/useWalletStore';
 
-
 const WalletSection = ({ onConnectWallet, onLogout }) => {
-      const { walletId } = useWalletStore();
- const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { walletId } = useWalletStore();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(window.innerWidth < 1025);
   const menuRef = useRef(null);
 
@@ -57,7 +56,7 @@ const WalletSection = ({ onConnectWallet, onLogout }) => {
             <div className="menu-dropdown">
               {/* Connect Wallet button for mob screens */}
               {isMobile && !walletId && (
-                <Button variant="primary" size="sm" onClick={onConnectWallet}>
+                <Button className="connect-btn" onClick={onConnectWallet}>
                   <span>Connect Wallet</span>
                 </Button>
               )}
diff --git a/frontend/src/components/header/header.css b/frontend/src/components/header/header.css
index a8b2b043..d6564829 100644
--- a/frontend/src/components/header/header.css
+++ b/frontend/src/components/header/header.css
@@ -121,23 +121,29 @@
   cursor: pointer;
   display: inline-block;
   position: relative;
+  top: -1px;
 }
 
 .menu-dropdown {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-start;
   align-items: center;
   position: absolute;
   top: 80px;
   right: 0;
   width: 300px;
-  height: 90px;
   border-radius: 10px;
   background: var(--header-button-bg);
   transition: all 0.3s ease;
+  padding: 16px;
+  box-sizing: border-box;
 }
 
 .logout-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   background: none;
   border: none;
@@ -146,6 +152,9 @@
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
+  width: 250px;
+  height: 50px;
+  border-radius: 900px;
 }
 
 .logout-button::before {
@@ -181,6 +190,15 @@
   background: var(--second-gradient);
 }
 
+.Toastify__toast {
+  margin-top: 90px;
+}
+
+.Toastify__toast-body {
+  font-size: 16px;
+  font-weight: 600;
+}
+
 @media (max-width: 1024px) {
   .nav-items {
     display: none;
@@ -200,14 +218,6 @@
     display: none;
   }
 
-  .menu-dropdown {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 300px;
-    height: 160px;
-  }
-
   .menu-dropdown .wallet-id {
     display: flex;
     align-items: center;
@@ -236,6 +246,14 @@
     font-size: 14px;
   }
 
+  .connect-btn {
+    width: 238px;
+    height: 48px;
+    top: 50%;
+    left: 50%;
+    font-size: 14px;
+  }
+
   .logout-button::before {
     content: '';
     width: 238px;
@@ -267,6 +285,16 @@
     height: 48px;
     font-size: 14px;
   }
+  .Toastify__toast {
+    left: 50px;
+    height: 60px;
+    width: 265px;
+  }
+
+  .Toastify__toast-body {
+    font-size: 13px;
+    font-weight: 500;
+  }
 }
 
 @media (max-width: 768px) {
@@ -277,7 +305,6 @@
 
   .menu-dropdown {
     width: 285px;
-    height: 152px;
   }
 
   .menu-dropdown .wallet-id {
@@ -290,6 +317,12 @@
     font-size: 12px;
   }
 
+  .connect-btn {
+    width: 238px;
+    height: 48px;
+    border-radius: 900px;
+  }
+
   .logout-button::before {
     width: 226px;
     height: 46px;
@@ -301,4 +334,61 @@
     height: 46px;
     font-size: 12px;
   }
+
+  .Toastify__toast {
+    left: 70px;
+    height: 40px;
+    width: 250px;
+  }
+
+  .Toastify__toast-body {
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-nav {
+    height: 80px;
+  }
+  .list-items {
+    padding: 0 25px;
+  }
+
+  .wallet-container {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    padding: 0;
+  }
+
+  .menu-dots {
+    padding: 0;
+  }
+
+  .Toastify__toast {
+    left: 200px;
+    width: 200px;
+    border-radius: 6px !important;
+  }
+
+  .Toastify__toast-body {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 320px) {
+  .list-items {
+    justify-content: flex-start;
+    padding: 0 25px;
+  }
+
+  .logo svg {
+    width: 200px;
+  }
+
+  .Toastify__toast {
+    left: 130px;
+    width: 180px;
+  }
 }
diff --git a/frontend/src/components/mobDropdownMenu/mobDropdownMenu.css b/frontend/src/components/mobDropdownMenu/mobDropdownMenu.css
index c15c7381..f23eacb7 100644
--- a/frontend/src/components/mobDropdownMenu/mobDropdownMenu.css
+++ b/frontend/src/components/mobDropdownMenu/mobDropdownMenu.css
@@ -147,7 +147,7 @@
   }
 
   .dropdown-item {
-    width: 290px;
+    width: 294px;
     height: 50px;
     font-size: 12px;
     margin-bottom: 12px;
@@ -159,3 +159,29 @@
     margin-right: 6px;
   }
 }
+
+@media (max-width: 480px) {
+  .dropdown-toggle {
+    padding: 5px 8px;
+  }
+
+  .dpd-icon {
+    margin-right: 4px;
+  }
+}
+
+@media (max-width: 320px) {
+  .dropdown-items {
+    padding: 22px;
+  }
+
+  .dropdown-menu {
+    width: 300px;
+    height: 280px;
+    transform: translate(-50%, -60%) !important;
+  }
+
+  .dropdown-item {
+    width: 256px;
+  }
+}
diff --git a/frontend/src/components/ui/ActionModal/actionModal.css b/frontend/src/components/ui/ActionModal/actionModal.css
index c48d45ae..a1a4dd0a 100644
--- a/frontend/src/components/ui/ActionModal/actionModal.css
+++ b/frontend/src/components/ui/ActionModal/actionModal.css
@@ -17,11 +17,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  max-width: 800px;
-  width: 90%;
   box-shadow: var(--primary-color);
   overflow: hidden;
-  padding: 60px;
 }
 
 .modal-box {
@@ -40,13 +37,14 @@
   border: var(--nav-divider-bg) 1px solid;
   background-color: var(--header-button-bg);
   border-radius: 24px;
+  height: 300px;
 }
 
 .modal-title {
   color: var(--primary);
   text-align: center;
   font-size: 16px;
-  padding-bottom: 10px;
+  padding: 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   margin-bottom: 24px;
 }
@@ -54,13 +52,13 @@
 .modal-content h2 {
   color: var(--primary);
   font-size: 24px;
-  font-weight: 500;
-  line-height: 1.3;
+  font-weight: 600;
+  line-height: 125%;
   max-width: 400px;
   margin: 0 auto 16px;
-
+  font-family: var(--font-family);
   &.no-content {
-    padding: 78px 0;
+    padding: 55px 0;
   }
 }
 
@@ -78,11 +76,10 @@
 }
 
 .modal-btn {
-  flex: 1;
   padding: 20px 16px;
   border-radius: 40px;
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 700;
   background-color: var(--plain-button-bg);
   cursor: pointer;
 }
@@ -119,13 +116,9 @@
   border: none;
 }
 
-/* Mobile Styles */
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1024px) {
   .modal-wrapper {
-    max-width: 390px;
-    width: 100%;
-    padding: 48px 24px;
-    border-radius: 24px;
+    width: 580px;
   }
 
   .modal-title {
@@ -137,25 +130,70 @@
   .modal-content {
     padding: 16px 0;
     border-radius: 16px;
+    height: 280px;
   }
 
   .modal-content h2 {
-    font-size: 16px;
+    font-size: 20px;
     margin-bottom: 12px;
-    max-width: 310px;
+    margin: 0 auto 10px;
+    &.no-content {
+      padding: 68px 0;
+    }
+  }
+
+  .modal-actions {
+    gap: 14px;
+  }
+
+  .modal-btn {
+    padding: 10px 10px;
+  }
+}
+
+/* Mobile Styles */
+@media screen and (max-width: 768px) {
+  .modal-wrapper {
+    width: 500px;
+  }
+
+  .modal-box {
+    border-radius: 16px;
+    width: 330px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    text-align: center;
+  }
+
+  .modal-title {
+    font-size: 13px;
+    padding: 6px;
+    margin-bottom: 14px;
+  }
+
+  .modal-content {
+    padding: 16px 0;
+    border-radius: 16px;
+    height: 200px;
+  }
 
+  .modal-content h2 {
+    font-size: 14px;
+    margin-bottom: 12px;
+    margin: 0 auto 10px;
     &.no-content {
-      padding: 32px 0;
+      padding: 43px 0;
     }
   }
 
   .modal-content p {
     font-size: 12px;
-    max-width: 320px;
   }
 
   .modal-actions {
     gap: 8px;
+    justify-content: center;
   }
 
   .modal-btn {
@@ -172,3 +210,13 @@
     font-size: 14px;
   }
 }
+
+@media screen and (max-width: 320px) {
+  .modal-wrapper {
+    width: 300px;
+  }
+
+  .modal-box {
+    width: 300px;
+  }
+}
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
index d1077814..14e0ceb7 100644
--- a/frontend/src/globals.css
+++ b/frontend/src/globals.css
@@ -87,3 +87,7 @@ a {
 li {
   list-style-type: none;
 }
+
+a.svelte-1mtuslq.svelte-1mtuslq {
+  display: none;
+}
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index 6d78f906..ee4e7451 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { ReactComponent as ETH } from '../../assets/icons/ethereum.svg';
 import { ReactComponent as USDC } from '../../assets/icons/borrow_usdc.svg';
 import { ReactComponent as STRK } from '../../assets/icons/strk.svg';
-import { ReactComponent as DAI } from '../../assets/icons/dai.svg';
 import TokenSelector from 'components/TokenSelector';
 import BalanceCards from 'components/BalanceCards';
 import MultiplierSelector from 'components/MultiplierSelector';
@@ -36,8 +35,6 @@ const Form = () => {
   const { data: positionData, refetch: refetchPosition } = useCheckPosition();
 
   const connectWalletHandler = () => {
-
-    
     connectWalletMutation.mutate();
   };
 
@@ -45,10 +42,8 @@ const Form = () => {
     { icon: <ETH />, title: 'ETH', balance: '0.00' },
     { icon: <USDC />, title: 'USDC', balance: '0.00' },
     { icon: <STRK />, title: 'STRK', balance: '0.00' },
-    { icon: <DAI />, title: 'DAI', balance: '0.00' },
   ]);
 
-
   const handleSubmit = async (e) => {
     e.preventDefault();
 
diff --git a/frontend/src/pages/forms/form.css b/frontend/src/pages/forms/form.css
index 023f1b22..e4475114 100644
--- a/frontend/src/pages/forms/form.css
+++ b/frontend/src/pages/forms/form.css
@@ -2,7 +2,7 @@
   background: url('/public/background.png') no-repeat;
   background-size: cover;
   background-position: center 50%;
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   gap: 30px;
@@ -39,7 +39,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: hsla(265, 65%, 8%, 1);
+  background-color: var(--dark-purple);
   cursor: pointer;
   height: 100%;
 }
@@ -108,7 +108,7 @@
 
 .form-token {
   display: flex;
-  justify-content: start;
+  justify-content: center;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
@@ -241,7 +241,7 @@ input[type='number'].error {
   display: flex;
   justify-content: space-between;
   max-width: 100%;
-  gap: 8px;
+  gap: 16px;
 }
 
 .balance-item {
@@ -265,7 +265,6 @@ input[type='number'].error {
 }
 
 .balance-item label:nth-child(2) {
-  font-size: 24px;
   font-size: 24px;
   color: var(--secondary);
   line-height: 32.68px;
@@ -308,15 +307,7 @@ input[type='number'].error {
 /* Responsiveness */
 /* Mobile */
 @media (max-width: 768px) {
-  -content-wrappe.formr {
-    background: url('/public/mobilebackground.png') no-repeat;
-    background-size: cover;
-    background-position: center -100px;
-    min-height: 83vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
+  .form-content-wrapper {
     gap: 0;
   }
 
@@ -369,7 +360,6 @@ input[type='number'].error {
     align-items: center;
     margin-right: 0;
     border-radius: 16px;
-    background: none;
   }
 
   .balance-item:first-child {
diff --git a/frontend/src/pages/spotnet/about/About.jsx b/frontend/src/pages/spotnet/about/About.jsx
index f2a80a29..95f49095 100644
--- a/frontend/src/pages/spotnet/about/About.jsx
+++ b/frontend/src/pages/spotnet/about/About.jsx
@@ -53,7 +53,7 @@ const About = () => {
             <div className="card-number flex">
               <h2>{card.number}</h2>
             </div>
-            <div className="card-icon">
+            <div className="card-icon-about">
               <card.icon />
             </div>
             <div className="card-title">
diff --git a/frontend/src/pages/spotnet/about/about.css b/frontend/src/pages/spotnet/about/about.css
index 002ed3d0..a3e215ec 100644
--- a/frontend/src/pages/spotnet/about/about.css
+++ b/frontend/src/pages/spotnet/about/about.css
@@ -24,7 +24,7 @@
   height: var(--star-size);
 }
 
-.card-icon {
+.card-icon-about {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -163,7 +163,7 @@
     width: 100%;
   }
 
-  .card-icon svg {
+  .card-icon-about svg {
     width: 100px;
     height: 100px;
   }
@@ -191,7 +191,8 @@
     font-size: 30px;
   }
 }
-@media (max-width: 1024px) {
+
+@media (max-width: 1150px) {
   .about-container {
     margin-bottom: 170px;
   }
@@ -218,7 +219,7 @@
     width: 100%;
   }
 
-  .card-icon svg {
+  .card-icon-about svg {
     width: 80px;
     height: 80px;
   }
@@ -246,7 +247,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 950px) {
   .card-about {
     width: 175px;
     height: 205px;
@@ -269,11 +270,11 @@
     margin-right: 12px;
   }
 
-  .card-icon {
+  .card-ico-aboutn {
     height: 80px;
   }
 
-  .card-icon svg {
+  .card-icon-about svg {
     width: 60px;
     height: 60px;
   }
@@ -303,7 +304,7 @@
   }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 768px) {
   .about-container {
     margin-bottom: 150px;
   }
diff --git a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
index d1dda68e..507e64de 100644
--- a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
+++ b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import './dashboard.css';
 import { ReactComponent as EthIcon } from 'assets/icons/ethereum.svg';
-import { ReactComponent as StrkIcon } from 'assets/icons/strk.svg';
+// import { ReactComponent as StrkIcon } from 'assets/icons/strk.svg';
 import { ReactComponent as UsdIcon } from 'assets/icons/usd_coin.svg';
 import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
 import { ReactComponent as CollateralIcon } from 'assets/icons/collateral_dynamic.svg';
@@ -9,7 +9,7 @@ import { ReactComponent as BorrowIcon } from 'assets/icons/borrow_dynamic.svg';
 import { ReactComponent as TelegramIcon } from 'assets/icons/telegram_dashboard.svg';
 import { TrendingDown, TrendingUp } from 'lucide-react';
 import Spinner from 'components/spinner/Spinner';
-import { ZETH_ADDRESS } from 'utils/constants';
+// import { ZETH_ADDRESS } from 'utils/constants';
 import useDashboardData from 'hooks/useDashboardData';
 import { useClosePosition } from 'hooks/useClosePosition';
 import Button from 'components/ui/Button/Button';
@@ -21,22 +21,17 @@ export default function Component({ telegramId }) {
   const { walletId } = useWalletStore();
   const [isCollateralActive, setIsCollateralActive] = useState(true);
   const [showModal, setShowModal] = useState(false);
-  const handleOpen = () => {
-    setShowModal(true);
-  };
+  const handleOpen = () => setShowModal(true);
+  const handleClose = () => setShowModal(false);
 
-  const handleClose = () => {
-    setShowModal(false);
+  const { data, isLoading } = useDashboardData(walletId) || {
+    data: { health_ratio: '1.5', current_sum: '0.05', start_sum: '0.04', borrowed: '10.0' },
+    isLoading: false,
   };
-
-  const { data, isLoading } = useDashboardData(walletId);
   const { mutate: closePositionEvent, isLoading: isClosing, error: closePositionError } = useClosePosition(walletId);
-
   const { subscribe } = useTelegramNotification();
 
-  const handleSubscribe = () => {
-    subscribe({ telegramId, walletId });
-  };
+  const handleSubscribe = () => subscribe({ telegramId, walletId });
 
   const [cardData, setCardData] = useState([
     {
@@ -73,71 +68,36 @@ export default function Component({ telegramId }) {
         return;
       }
 
-      if (!data || !data.zklend_position || !Array.isArray(data.zklend_position.products)) {
-        console.error('Data is missing or incorrectly formatted');
-        setLoading(false);
-        return;
-      }
-
-      const products = data.zklend_position.products;
-
-      if (products.length === 0) {
-        console.warn('No products found in zklend_position');
-        setCardData([
-          {
-            title: 'Collateral & Earnings',
-            icon: CollateralIcon,
-            balance: '0.00',
-            currencyName: 'Ethereum',
-            currencyIcon: EthIcon,
-          },
-          {
-            title: 'Borrow',
-            icon: BorrowIcon,
-            balance: '0.0',
-            currencyName: 'USD Coin',
-            currencyIcon: UsdIcon,
-          },
-        ]);
-        setHealthFactor('0.00');
-        setCurrentSum(data.current_sum || 0);
-        setStartSum(data.start_sum || 0);
+      if (!data) {
+        console.error('Data is missing');
         setLoading(false);
         return;
       }
 
-      const positions = products[0].positions || [];
-      const healthRatio = products[0].health_ratio;
-
-      const updatedCardData = positions.map((position, index) => {
-        const isFirstCard = index === 0;
-        const tokenAddress = position.tokenAddress;
-
-        if (isFirstCard) {
-          const isEthereum = tokenAddress === ZETH_ADDRESS;
-          const balance = parseFloat(position.totalBalances[Object.keys(position.totalBalances)[0]]);
-          setCurrentSum(data.current_sum);
-          setStartSum(data.start_sum);
-          return {
-            title: 'Collateral & Earnings',
-            icon: CollateralIcon,
-            balance: balance,
-            currencyName: isEthereum ? 'Ethereum' : 'STRK',
-            currencyIcon: isEthereum ? EthIcon : StrkIcon,
-          };
-        }
-
-        return {
+      const { health_ratio, current_sum, start_sum, borrowed } = data;
+
+      // Update card data using the new data structure
+      const updatedCardData = [
+        {
+          title: 'Collateral & Earnings',
+          icon: CollateralIcon,
+          balance: current_sum,
+          currencyName: 'Ethereum',
+          currencyIcon: EthIcon,
+        },
+        {
           title: 'Borrow',
           icon: BorrowIcon,
-          balance: position.totalBalances[Object.keys(position.totalBalances)[0]],
+          balance: borrowed,
           currencyName: 'USD Coin',
           currencyIcon: UsdIcon,
-        };
-      });
+        },
+      ];
 
       setCardData(updatedCardData);
-      setHealthFactor(healthRatio || '0.00');
+      setHealthFactor(health_ratio || '0.00');
+      setCurrentSum(current_sum || 0);
+      setStartSum(start_sum || 0);
       setLoading(false);
     };
 
@@ -156,7 +116,7 @@ export default function Component({ telegramId }) {
         {loading && <Spinner loading={loading} />}
         <h1 className="dashboard-title">zkLend Position</h1>
         <div className="dashboard-content">
-          <div className="dashboard-top-cards">
+          <div className="top-cards-dashboard">
             <div className="card">
               <div className="card-header">
                 <HealthIcon className="icon" />
@@ -174,7 +134,10 @@ export default function Component({ telegramId }) {
               </div>
               <div className="card-value">
                 <span className="currency-symbol">$</span>
-                <span className="top-card-value">{cardData[1]?.balance || '0.00'}</span>
+                <span className="top-card-value">
+                  {' '}
+                  {cardData[1]?.balance ? Number(cardData[1].balance).toFixed(8) : '0.00'}
+                </span>
               </div>
             </div>
           </div>
@@ -227,12 +190,8 @@ export default function Component({ telegramId }) {
                     <span className={currentSum === 0 ? 'current-sum-white' : getCurrentSumColor()}>
                       <span className="currency-symbol">$</span>
                       {currentSum}
-                      {currentSum > startSum && currentSum !== 0 && (
-                        <TrendingUp color="#60AF77" size={23} style={{ marginLeft: '8px' }} />
-                      )}
-                      {currentSum < startSum && currentSum !== 0 && (
-                        <TrendingDown color="#F42222" size={22} style={{ marginLeft: '8px' }} />
-                      )}
+                      {currentSum > startSum && currentSum !== 0 && <TrendingUp className="lucide-up-icon" />}
+                      {currentSum < startSum && currentSum !== 0 && <TrendingDown className="lucide-down-icon" />}
                     </span>
                   </span>
                 </div>
@@ -254,12 +213,18 @@ export default function Component({ telegramId }) {
               </div>
             )}
           </div>
-          <Button variant="primary" size="lg" onClick={() => closePositionEvent()} disabled={isClosing}>
+          <Button
+            variant="primary"
+            size="lg"
+            className="dashboard-btn"
+            onClick={() => closePositionEvent()}
+            disabled={isClosing}
+          >
             {isClosing ? 'Closing...' : 'Redeem'}
           </Button>
 
           {closePositionError && <div>Error: {closePositionError.message}</div>}
-          <Button variant="secondary" size="lg" onClick={handleOpen}>
+          <Button variant="secondary" size="lg" className="dashboard-btn" onClick={handleOpen}>
             <TelegramIcon className="tab-icon" />
             Enable telegram notification bot
           </Button>
diff --git a/frontend/src/pages/spotnet/dashboard/dashboard.css b/frontend/src/pages/spotnet/dashboard/dashboard.css
index c10d071a..60a70d96 100644
--- a/frontend/src/pages/spotnet/dashboard/dashboard.css
+++ b/frontend/src/pages/spotnet/dashboard/dashboard.css
@@ -46,7 +46,7 @@ body {
   text-align: center;
 }
 
-.dashboard-top-cards {
+.top-cards-dashboard {
   display: flex;
   gap: 1.8rem;
   width: 642px;
@@ -239,6 +239,20 @@ body {
   color: white;
 }
 
+.lucide-up-icon {
+  color: #60af77;
+  width: 23px;
+  height: 23px;
+  margin-left: 8px;
+}
+
+.lucide-down-icon {
+  color: #f42222;
+  width: 22px;
+  height: 22px;
+  margin-left: 8px;
+}
+
 .currency-symbol {
   margin-right: 4px;
   font-size: inherit;
@@ -305,6 +319,12 @@ body {
   font-weight: 600;
 }
 
+@media (max-width: 950px) {
+  .top-card-value {
+    font-size: 22px;
+  }
+}
+
 @media (max-width: 768px) {
   .dashboard-wrapper {
     padding: 1rem;
@@ -326,14 +346,13 @@ body {
     gap: 16px;
   }
 
-  .dashboard-top-cards {
+  .top-cards-dashboard {
     flex-direction: row;
-    gap: 12px;
-    width: 100%;
     height: auto;
     margin: 0 auto;
     align-items: center;
     justify-content: center;
+    width: 500px;
   }
 
   .card {
@@ -367,23 +386,13 @@ body {
     white-space: nowrap;
   }
 
-  .redeem-button {
+  .dashboard-btn {
     border-radius: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
-  }
-
-  .telegram-button {
-    margin-top: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 18px 24px 18px 24px;
-  }
-
-  .telegram-button::before {
-    border-radius: 16px;
+    width: 500px;
+    height: 55px;
   }
 
   .tab {
@@ -391,12 +400,12 @@ body {
   }
 
   .dashboard-info-card {
-    width: 100% !important;
     height: auto;
     min-height: 280px;
-    border-radius: 14px !important;
+    border-radius: 16px !important;
     padding: 16px 24px !important;
     margin: 20px auto;
+    width: 500px;
   }
 
   .tab-content {
@@ -410,12 +419,6 @@ body {
     height: auto;
   }
 
-  .redeem-button,
-  .telegram-button {
-    width: 100%;
-    height: 48px;
-  }
-
   .dashboard-title {
     font-size: 24px;
   }
@@ -425,17 +428,22 @@ body {
     font-weight: 600;
   }
 
+  .currency-symbol {
+    font-size: 18px;
+  }
+
   .currency-name {
     font-size: 18px;
   }
 
   .balance-label,
-  .balance-value {
+  .balance-value,
+  .current-sum-red {
     font-size: 14px;
   }
 
   .top-card-value {
-    font-size: 20px;
+    font-size: 18px;
   }
 
   .tabs {
@@ -465,19 +473,71 @@ body {
     bottom: -12px;
     width: calc(100% - 16px);
   }
+
+  .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;
+  }
 }
 
-@media (max-width: 425px) {
-  .dashboard-wrapper {
-    padding: 0.75rem;
+@media (max-width: 550px) {
+  .dashboard-info-card {
+    height: auto;
+    min-height: 280px;
+    padding: 14px 22px !important;
+    margin: 15px auto;
+    width: 450px;
   }
 
-  .dashboard-content {
-    gap: 32px;
+  .dashboard-btn {
+    width: 450px;
+  }
+
+  .top-cards-dashboard {
+    width: 450px;
   }
+}
 
+@media (max-width: 480px) {
   .dashboard-info-card {
-    max-width: 342px;
+    height: auto;
+    min-height: 280px;
+    padding: 14px 22px !important;
+    margin: 15px auto;
+    width: 380px;
+  }
+
+  .top-card-value {
+    font-size: 16px;
+  }
+
+  .dashboard-btn {
+    width: 380px;
+    font-size: 14px;
+    height: 50px;
+  }
+
+  .top-cards-dashboard {
+    width: 380px;
+    gap: 8px;
+  }
+  .dashboard-wrapper {
+    padding: 0.75rem;
+  }
+
+  .dashboard-content {
+    gap: 20px;
   }
 
   .tab-title {
@@ -486,16 +546,24 @@ body {
 
   .tab-content {
     width: fit-content;
+    font-size: 14px;
   }
 
-  .balance-info {
-    width: fit-content;
+  .currency-symbol {
+    font-size: 16px;
   }
 
-  .dashboard-top-cards {
-    width: 100%;
-    flex-direction: row;
-    gap: 8px;
+  .currency-name {
+    font-size: 16px;
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .balance-info {
+    width: fit-content;
   }
 
   .card {
@@ -504,7 +572,6 @@ body {
   }
 
   .card-header {
-    width: 120%;
     gap: 4px;
   }
 
@@ -513,3 +580,56 @@ body {
     font-size: 12px;
   }
 }
+
+@media (max-width: 400px) {
+  .dashboard-info-card {
+    height: auto;
+    min-height: 280px;
+    padding: 14px 22px !important;
+    margin: 15px auto;
+    width: 300px;
+  }
+
+  .top-cards-dashboard {
+    width: 300px;
+  }
+
+  .dashboard-btn {
+    width: 300px;
+    height: 45px;
+  }
+
+  .top-card-value {
+    font-size: 14px;
+  }
+
+  .tab-title {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 320px) {
+  .dashboard-info-card {
+    height: auto;
+    padding: 10px 10px !important;
+    margin: 15px auto;
+    width: 280px;
+  }
+
+  .top-cards-dashboard {
+    width: 280px;
+  }
+
+  .dashboard-btn {
+    width: 300px;
+    height: 45px;
+  }
+
+  .card {
+    padding: 10px 16px;
+  }
+
+  .tabs {
+    padding: 0;
+  }
+}
diff --git a/frontend/src/pages/spotnet/documentation/documentation.css b/frontend/src/pages/spotnet/documentation/documentation.css
index 54ed40e1..269f74f5 100644
--- a/frontend/src/pages/spotnet/documentation/documentation.css
+++ b/frontend/src/pages/spotnet/documentation/documentation.css
@@ -6,7 +6,6 @@
   padding-top: 70px;
 }
 
-
 .documentation-container::before {
   content: '';
   position: absolute;
@@ -14,8 +13,7 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-image:
-    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.25) 1px, transparent 1px),
+  background-image: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.25) 1px, transparent 1px),
     radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.25) 1px, transparent 1px),
     radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
   background-size: 100px 100px;
@@ -33,8 +31,8 @@
   min-height: 100vh;
 }
 
-.sections-container{
- margin-left: 20px;
+.sections-container {
+  margin-left: 20px;
 }
 
 .main-title {
@@ -54,6 +52,12 @@ html {
   scroll-padding-top: 80px;
 }
 
+@media (max-width: 1440px) {
+  .main-content {
+    margin-left: 280px;
+  }
+}
+
 @media (max-width: 768px) {
   .main-content {
     margin-left: 0;
@@ -63,4 +67,4 @@ html {
   .main-title {
     font-size: 2rem;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/spotnet/information/information.css b/frontend/src/pages/spotnet/information/information.css
index ca064f9e..d64ae9f6 100644
--- a/frontend/src/pages/spotnet/information/information.css
+++ b/frontend/src/pages/spotnet/information/information.css
@@ -29,7 +29,7 @@
 }
 
 .card-info h3 {
-  font-size: 60px;
+  font-size: 35px;
   min-height: 60px;
   font-family: var(--text-font);
   font-weight: 600;
@@ -91,7 +91,7 @@
   }
 
   .card-info h3 {
-    font-size: 55px;
+    font-size: 30px;
     min-height: 55px;
     margin-bottom: 0;
     margin-top: 3px;
@@ -120,7 +120,7 @@
     }
 
     .card-info h3 {
-      font-size: 45px;
+      font-size: 28px;
       min-height: 45px;
       margin-bottom: 0;
       margin-top: 3px;
@@ -153,6 +153,8 @@
 
   @media (max-width: 768px) {
     .card-info__container {
+      flex-direction: column;
+      align-items: center;
       width: 700px;
       margin-top: 120px;
       margin-bottom: 90px;
@@ -165,7 +167,7 @@
     }
 
     .card-info h3 {
-      font-size: 40px;
+      font-size: 26px;
       min-height: 40px;
       margin-bottom: 0;
       margin-top: 3px;
@@ -192,8 +194,6 @@
 
   @media (max-width: 480px) {
     .card-info__container {
-      flex-direction: column;
-      align-items: center;
       margin-top: 100px;
       margin-bottom: 80px;
     }
@@ -205,7 +205,7 @@
     }
 
     .card-info h3 {
-      font-size: 35px;
+      font-size: 26px;
       min-height: 35px;
       margin-bottom: 0;
       margin-top: 3px;
diff --git a/frontend/src/pages/spotnet/overview/overview.css b/frontend/src/pages/spotnet/overview/overview.css
index d905c3f8..7dd347fb 100644
--- a/frontend/src/pages/spotnet/overview/overview.css
+++ b/frontend/src/pages/spotnet/overview/overview.css
@@ -1,110 +1,108 @@
 .overview-container {
-    background: url('../../../../public/background.png') no-repeat;
-    background-size: cover;
-    background-position: center 39%;
-    min-height: 100vh;
-    min-width: 100vw;
-    max-width: 1440px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    color: white;
-    position: relative;
+  background: url('../../../../public/background.png') no-repeat;
+  background-size: cover;
+  background-position: center 39%;
+  min-height: 100vh;
+  min-width: 100vw;
+  max-width: 1440px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  color: white;
+  position: relative;
 }
 
-
 .sidebar {
-    width: 374px;
-    height: 912px;
-    min-height: 100vh;
-    position: fixed;
-    left: 0;
+  width: 374px;
+  height: 912px;
+  min-height: 100vh;
+  position: fixed;
+  left: 0;
 }
 
-
 .list-label-container {
-    padding: 10px 0;
-    color: white;
-    transition: color 0.3s, border-color 0.3s ease;
+  padding: 10px 0;
+  color: white;
+  transition:
+    color 0.3s,
+    border-color 0.3s ease;
 }
 
 /* Content */
 .content {
-    margin-top: 94px;
-    flex: 1;
-    margin-left: 394px;
-    padding: 24px 0px 0px 24px;
+  margin-top: 94px;
+  flex: 1;
+  margin-left: 300px;
+  padding: 24px 0px 0px 24px;
 }
 
 .content-title {
-    font-size: 32px;
-    font-weight: 600;
-    margin-bottom: 24px;
-    line-height: 43.54px;
+  font-size: 32px;
+  font-weight: 600;
+  margin-bottom: 24px;
+  line-height: 43.54px;
 }
 
 .section {
-    margin-bottom: 3rem;
-    max-width: 844px;
-    font-weight: 400;
+  margin-bottom: 3rem;
+  max-width: 844px;
+  font-weight: 400;
 }
 
 .section-title {
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    padding: 10px 0px;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  padding: 10px 0px;
 }
 
 .section-text {
-    font-size: 1rem;
-    line-height: 1.75;
-    color: white;
-    font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
+  color: white;
+  font-weight: 400;
 }
 
-
 /* Key Features */
 .key-features-title {
-    margin-top: 24px;
-    margin-bottom: 5px;
+  margin-top: 24px;
+  margin-bottom: 5px;
 }
 
-.key-features-list>li {
-    list-style-type: disc;
+.key-features-list > li {
+  list-style-type: disc;
 }
 
-.key-features-list>li {
-    line-height: 24px;
+.key-features-list > li {
+  line-height: 24px;
 }
 
-
-.how-it-works-list>li {
-    list-style: decimal;
-    color: white;
-    margin-top: 16px;
+.how-it-works-list > li {
+  list-style: decimal;
+  color: white;
+  margin-top: 16px;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
-    .overview-container {
-        flex-direction: column;
-    }
-
-    .sidebar {
-        width: 100%;
-        border-right: none;
-        border-bottom: 1px solid #2a2a2a;
-    }
-
-    .content {
-        padding: 1rem 2rem;
-    }
+  .overview-container {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #2a2a2a;
+  }
+
+  .content {
+    padding: 1rem 2rem;
+  }
 }
 
 @media (min-width: 2500px) {
-    .overview-container {
-        width: 100%;
-        margin: 0px auto;
-    }
-}
\ No newline at end of file
+  .overview-container {
+    width: 100%;
+    margin: 0px auto;
+  }
+}
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
index bebd8b44..cddee79e 100644
--- a/frontend/src/pages/vault/stake/stake.css
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -21,8 +21,6 @@
   background-color: hsla(261, 49%, 15%, 1);
 }
 
-
-
 .stake-card {
   width: 309px;
   background: var(--header-button-bg);
@@ -46,7 +44,6 @@
   justify-content: center;
   flex-direction: column;
   gap: 20px;
-  
 }
 
 .main-container {
@@ -60,7 +57,6 @@
   justify-content: center;
   flex-direction: column;
   align-items: center;
-
 }
 
 .top-cards {
@@ -203,8 +199,6 @@
   display: none;
 }
 
-
-
 /* Tablet and Mobile Responsiveness */
 @media screen and (max-width: 1024px) {
   .stake-wrapper {
@@ -223,37 +217,34 @@
     margin-left: 0;
     margin-right: 0;
     width: 100%;
-    
   }
 
-
   .balance-container {
     flex-direction: row;
     justify-content: flex-start;
-   align-items: center;
+    align-items: center;
     margin-bottom: 0;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
-    gap:5px;
+    gap: 5px;
     max-width: 100%;
     scrollbar-width: none;
     -ms-overflow-style: none;
   }
 
-  .balance-item {
+  /* .balance-item {
     height: fit-content;
     padding: 16px 24px;
     display: flex;
     width: 167px;
-    height:88px;
+    height: 88px;
     flex-direction: column;
     align-items: center;
     margin-right: 0;
     border-radius: 16px;
     border: 1px solid var(--light-purple);
-
     background-color: var(--dark-purple);
-  }
+  } */
 
   .balance-item:first-child {
     margin-left: 20px;
@@ -276,12 +267,11 @@
 
   .balance-item label:nth-child(2) {
     color: var(--secondary);
-    font-size: 14px;
+    /* font-size: 14px; */
   }
   .stake-title {
     font-size: 16px;
     font-weight: 400;
-
   }
 
   .main-card {
@@ -291,7 +281,6 @@
     border-radius: 12px;
     margin-left: 12px;
     margin-right: 11px;
-   
   }
 
   .clicked-network-selector-container .network-dropdown {
@@ -321,13 +310,12 @@
   }
 
   .stake-button {
- font-size: 14px;
+    font-size: 14px;
     padding: 18px 24px;
-   
+
     align-self: center;
   }
 
-
   .balance-card {
     max-width: 100%;
     margin-top: 20px;
@@ -340,18 +328,17 @@
   .balance-display-container .mobile-screen-balance {
     display: block;
   }
- 
 }
 
 @media (min-width: 768px) and (max-width: 1024px) {
   .stake-wrapper {
-    display: flex; 
-    flex-direction: column; 
+    display: flex;
+    flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     margin: 0 auto;
     padding: 0 20px;
-    background-position: center; 
+    background-position: center;
   }
 
   .stake-container {
@@ -361,7 +348,7 @@
   }
 
   .top-cards {
-    display: flex; 
+    display: flex;
     flex-wrap: wrap;
     gap: 16px;
   }
@@ -374,7 +361,7 @@
   }
 
   .amount-field {
-    font-size: 24px; 
+    font-size: 24px;
     padding: 10px;
   }
 
@@ -384,8 +371,6 @@
     margin-left: 12px;
     margin-right: 11px;
     align-self: center;
-    width:85%;
-
+    width: 85%;
   }
-  
 }
diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
index e695ba4f..836aa31a 100644
--- a/frontend/src/pages/vault/vaultLayout.css
+++ b/frontend/src/pages/vault/vaultLayout.css
@@ -1,11 +1,11 @@
 .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;
+  /* 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 {
@@ -75,41 +75,33 @@
 
 .main-content {
   flex: 1;
-  padding: 0;
+  padding: 2rem 0;
   position: relative;
-  background-color: red;
-  margin: 0 auto;
 }
 
+@media (max-width: 1024px) {
+  .sidebar-title {
+    color: white;
+    font-size: 14px;
+    margin-bottom: 1rem;
+    padding-bottom: 8px;
+  }
 
-
-/* specify a range of with  */
-@media (min-width: 30px) and (max-width: 1023px) {
-  .layout {
-      display: block !important;
-      width: 100vw;
+  .nav-item {
+    gap: 0.5rem;
+    font-size: 12px;
+    padding-bottom: 10px;
   }
 }
 
-
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   .sidebar {
-    display: none !important;
+    width: 200px;
   }
 }
 
-@media (min-width: 1024px) {
-  /* .main-content {
-    max-width: 100vw;
-    width: 100%;
-  } */
-}
-
-/* Nest Hub (1024 x 600) */
-@media screen and (max-width: 1024px) and (min-height: 600px) {
-  
-  .layout {
-   justify-content: center;
+@media (max-width: 640px) {
+  .sidebar {
+    width: 160px;
   }
-  
-}
\ No newline at end of file
+}

From 1e16d9841316cef7bbd5ceaa76c3ebc5f725f6c4 Mon Sep 17 00:00:00 2001
From: djeck1432 <oleh.kostashchuk@gmail.com>
Date: Sat, 7 Dec 2024 12:23:19 +0100
Subject: [PATCH 2/4] fix issue

---
 web_app/api/telegram.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_app/api/telegram.py b/web_app/api/telegram.py
index b3c9e622..70a3cf6d 100644
--- a/web_app/api/telegram.py
+++ b/web_app/api/telegram.py
@@ -47,7 +47,7 @@ async def generate_telegram_link(wallet_id: str):
     if not user:
         raise HTTPException(status_code=404, detail="User not found")
 
-    subscription_link = create_start_link(bot, user.id, encode=True)
+    subscription_link = await create_start_link(bot, user.id, encode=True)
     return {"subscription_link": subscription_link}
 
 

From 90eaa4418217034cb021b176e3795c2cdbf69642 Mon Sep 17 00:00:00 2001
From: djeck1432 <oleh.kostashchuk@gmail.com>
Date: Sat, 7 Dec 2024 12:51:08 +0100
Subject: [PATCH 3/4] add token symbol

---
 web_app/api/dashboard.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_app/api/dashboard.py b/web_app/api/dashboard.py
index 5b5a19b0..2d9d5835 100644
--- a/web_app/api/dashboard.py
+++ b/web_app/api/dashboard.py
@@ -66,10 +66,11 @@ async def get_dashboard(wallet_id: str) -> DashboardResponse:
         first_opened_position["start_price"],
         first_opened_position["amount"],
     )
+    token_symbol = first_opened_position["token_symbol"]
     return DashboardResponse(
         health_ratio=health_ratio,
-        multipliers={"ETH": first_opened_position["multiplier"]},
-        start_dates={"ETH": first_opened_position["created_at"]},
+        multipliers={token_symbol: str(first_opened_position["multiplier"])},
+        start_dates={token_symbol: first_opened_position["created_at"]},
         current_sum=current_sum,
         start_sum=start_sum,
         borrowed=str(start_sum * tvl),

From be589f48174fe59c86565f855aa6a0378e910e96 Mon Sep 17 00:00:00 2001
From: djeck1432 <oleh.kostashchuk@gmail.com>
Date: Sat, 7 Dec 2024 12:52:09 +0100
Subject: [PATCH 4/4] add new migration + refactoring

---
 ...a4342b007d_change_multiplier_field_type.py | 34 +++++++++++++++++++
 web_app/api/position.py                       |  1 -
 web_app/api/serializers/dashboard.py          |  2 +-
 web_app/api/serializers/transaction.py        |  4 +--
 web_app/contract_tools/blockchain_call.py     |  9 ++---
 web_app/contract_tools/mixins/deposit.py      |  2 +-
 web_app/contract_tools/mixins/health_ratio.py |  5 ---
 web_app/db/models.py                          |  6 ++--
 8 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 web_app/alembic/versions/cda4342b007d_change_multiplier_field_type.py

diff --git a/web_app/alembic/versions/cda4342b007d_change_multiplier_field_type.py b/web_app/alembic/versions/cda4342b007d_change_multiplier_field_type.py
new file mode 100644
index 00000000..59ac8f87
--- /dev/null
+++ b/web_app/alembic/versions/cda4342b007d_change_multiplier_field_type.py
@@ -0,0 +1,34 @@
+"""change multiplier field type
+
+Revision ID: cda4342b007d
+Revises: 1a6fada80369
+Create Date: 2024-12-07 12:37:05.550048
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = 'cda4342b007d'
+down_revision = '1a6fada80369'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.alter_column('position', 'multiplier',
+               existing_type=sa.INTEGER(),
+               type_=sa.NUMERIC(),
+               existing_nullable=False)
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.alter_column('position', 'multiplier',
+               existing_type=sa.NUMERIC(),
+               type_=sa.INTEGER(),
+               existing_nullable=False)
+    # ### end Alembic commands ###
diff --git a/web_app/api/position.py b/web_app/api/position.py
index d203014b..7b738cfa 100644
--- a/web_app/api/position.py
+++ b/web_app/api/position.py
@@ -70,7 +70,6 @@ async def create_position_with_transaction_data(
         form_data.amount,
         form_data.multiplier,
     )
-
     # Get the transaction data for the deposit
     deposit_data = await DepositMixin.get_transaction_data(
         form_data.token_symbol,
diff --git a/web_app/api/serializers/dashboard.py b/web_app/api/serializers/dashboard.py
index b0a6b4f4..3df448b9 100644
--- a/web_app/api/serializers/dashboard.py
+++ b/web_app/api/serializers/dashboard.py
@@ -16,7 +16,7 @@ class DashboardResponse(BaseModel):
     health_ratio: str = Field(
         ..., example="2.0", description="The health ratio of the user."
     )
-    multipliers: Dict[str, int | None] = Field(
+    multipliers: Dict[str, str | None] = Field(
         ..., example={"ETH": 1.5}, description="The multipliers applied to each asset."
     )
     start_dates: Dict[str, datetime | None] = Field(
diff --git a/web_app/api/serializers/transaction.py b/web_app/api/serializers/transaction.py
index f8fc2d5d..5597353a 100644
--- a/web_app/api/serializers/transaction.py
+++ b/web_app/api/serializers/transaction.py
@@ -1,7 +1,7 @@
 """
 This module defines the serializers for the transaction data.
 """
-
+from decimal import Decimal
 from pydantic import BaseModel, field_validator
 
 
@@ -40,7 +40,7 @@ class DepositData(BaseModel):
 
     token: str
     amount: str
-    multiplier: int
+    multiplier: Decimal
     borrow_portion_percent: int
 
     @field_validator("token", "amount", "multiplier", mode="before")
diff --git a/web_app/contract_tools/blockchain_call.py b/web_app/contract_tools/blockchain_call.py
index dd89f4fd..33f80190 100644
--- a/web_app/contract_tools/blockchain_call.py
+++ b/web_app/contract_tools/blockchain_call.py
@@ -214,7 +214,6 @@ async def get_balance(
                 token_address_int, "balanceOf", [holder_address_int]
             )
         except Exception as exc:
-            print(exc)
             logger.info(
                 f"Failed to get balance for {token_addr} due to an error: {exc}"
             )
@@ -228,7 +227,7 @@ async def get_loop_liquidity_data(
         self,
         deposit_token: str,
         amount: int,
-        multiplier: int,
+        multiplier: Decimal,
         wallet_id: str,
         borrowing_token: str,
     ) -> dict:
@@ -251,13 +250,11 @@ async def get_loop_liquidity_data(
         # Set pool key
         pool_key["token0"], pool_key["token1"] = deposit_token, borrowing_token
         # Set wallet id
-        wallet_id = self._convert_address(wallet_id)
         deposit_data = {
             "token": deposit_token,
             "amount": amount,
-            "multiplier": int(
-                float(multiplier) * 10
-            ),  # Moves for one decimal place, from 2.5 to 25
+            "multiplier": int(multiplier * 10),
+            # Moves for one decimal place, from 2.5 to 25
             "borrow_portion_percent": 80,
         }
 
diff --git a/web_app/contract_tools/mixins/deposit.py b/web_app/contract_tools/mixins/deposit.py
index dc54492e..f434ea5b 100644
--- a/web_app/contract_tools/mixins/deposit.py
+++ b/web_app/contract_tools/mixins/deposit.py
@@ -22,7 +22,7 @@ async def get_transaction_data(
         cls,
         deposit_token: str,
         amount: str,
-        multiplier: int,
+        multiplier: Decimal,
         wallet_id: str,
         borrowing_token: str,
     ) -> dict:
diff --git a/web_app/contract_tools/mixins/health_ratio.py b/web_app/contract_tools/mixins/health_ratio.py
index 7b8b309e..d04759b8 100644
--- a/web_app/contract_tools/mixins/health_ratio.py
+++ b/web_app/contract_tools/mixins/health_ratio.py
@@ -54,7 +54,6 @@ async def _get_z_balances(
             token: Decimal(balance)
             for token, balance in zip(reserves.keys(), await asyncio.gather(*tasks))
         }
-        print(balances)
         return balances
 
     @classmethod
@@ -154,7 +153,3 @@ async def get_health_ratio_and_tvl(
             )
         )
     )
-    # print(asyncio.run(CLIENT.get_balance(
-    #     "0x01b5bd713e72fdc5d63ffd83762f81297f6175a5e0a4771cdadbc1dd5fe72cb1",
-    #     "0x43523d3d7eb62a882efff9dc1664d7ceae8fe154866f3385d9c0bf0697a2c21", 18 )
-    # ))
diff --git a/web_app/db/models.py b/web_app/db/models.py
index 591beba4..30070cef 100644
--- a/web_app/db/models.py
+++ b/web_app/db/models.py
@@ -15,7 +15,7 @@
     DateTime,
     Enum,
     ForeignKey,
-    Integer,
+    NUMERIC,
     String,
     Float,
 )
@@ -68,7 +68,7 @@ class Position(Base):
     )
     token_symbol = Column(String, nullable=False)
     amount = Column(String, nullable=False)
-    multiplier = Column(Integer, nullable=False)
+    multiplier = Column(NUMERIC, nullable=False)
     created_at = Column(DateTime, nullable=False, default=func.now())
     status = Column(
         Enum(
@@ -81,7 +81,7 @@ class Position(Base):
     is_protection = Column(Boolean, default=False)
     liquidation_bonus = Column(Float, default=0.0)
     is_liquidated = Column(Boolean, default=False)
-    datetime_liquidation = Column(DateTime, nullable=False)
+    datetime_liquidation = Column(DateTime, nullable=True)
 
 
 class AirDrop(Base):