From 50bee75d1553f654fdde4ba1a6a1fbbac5362115 Mon Sep 17 00:00:00 2001
From: Andrii Bogomolov <bogomolov.andrii@gmail.com>
Date: Thu, 31 Oct 2024 22:57:50 +0100
Subject: [PATCH] feat/css-optimization

All styles for pages and components were optimized. Please check it out and merge if all is ok. Thank you.
---
 frontend/src/App.jsx                          |   1 +
 frontend/src/components/Footer/footer.css     |  50 +--
 .../src/components/Telegram/telegramLogin.css |  78 ++--
 frontend/src/components/header/header.css     | 140 +++----
 frontend/src/components/spinner/Spinner.jsx   |  10 +-
 frontend/src/components/spinner/spinner.css   |  11 +-
 frontend/src/globals.css                      |  44 ++
 frontend/src/pages/forms/Form.jsx             |   2 +-
 frontend/src/pages/forms/form.css             | 375 +++++++-----------
 frontend/src/pages/spotnet/about/About.jsx    |  34 +-
 frontend/src/pages/spotnet/about/about.css    |  46 +--
 .../src/pages/spotnet/dashboard/Dashboard.jsx |  13 +-
 .../src/pages/spotnet/dashboard/dashboard.css |  53 +--
 .../src/pages/spotnet/dont_miss/DontMiss.jsx  |   9 +-
 .../src/pages/spotnet/dont_miss/dont_miss.css |  24 +-
 frontend/src/pages/spotnet/home/Home.jsx      |  35 +-
 frontend/src/pages/spotnet/home/home.css      | 166 +++-----
 .../pages/spotnet/information/Information.jsx | 125 +++---
 .../pages/spotnet/information/information.css |  45 +--
 .../pages/spotnet/partnership/Partnership.jsx |  10 +-
 20 files changed, 508 insertions(+), 763 deletions(-)
 create mode 100644 frontend/src/globals.css

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9770a3f4..48a16c86 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
+import './globals.css';
 import Header from './components/header/Header';
 import Dashboard from 'pages/spotnet/dashboard/Dashboard';
 import Footer from 'components/Footer/Footer';
diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css
index 31f3c0d5..b89034b7 100644
--- a/frontend/src/components/Footer/footer.css
+++ b/frontend/src/components/Footer/footer.css
@@ -1,31 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --primary: #fff;
-  --footer-bg-color: #1a1c24;
-  --footer-text-color: #e7ebf5;
-  --card-bg-color: #0b0c10;
-  --footer-line-color: rgba(231, 235, 245, 0.2);
-}
-
-body {
-  overflow-x: hidden;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-a {
-  text-decoration: none;
-}
-
-li {
-  list-style-type: none;
-}
-
 .footer-container {
   padding: 24px 0;
   background-color: var(--footer-bg-color);
@@ -47,9 +19,6 @@ li {
   text-align: center;
   color: var(--footer-text-color);
   margin-top: 16px;
-}
-
-.follow-us-text {
   margin-bottom: 0;
 }
 
@@ -71,8 +40,14 @@ li {
   align-items: center;
   gap: 6px;
   cursor: pointer;
-  background-color: var(--card-bg-color);
+  background-color: var(--primary-color);
   transition: background-color 0.3s ease;
+  margin: 0;
+  font-family: var(--text-font);
+  font-weight: 500;
+  font-size: 28px;
+  text-align: center;
+  color: var(--primary);
 }
 
 .social-card:hover {
@@ -80,16 +55,7 @@ li {
 }
 
 .social-card:active {
-  background-color: var(--card-bg-color);
-}
-
-.social-card {
-  margin: 0;
-  font-family: var(--text-font);
-  font-weight: 500;
-  font-size: 28px;
-  text-align: center;
-  color: var(--primary);
+  background-color: var(--primary-color);
 }
 
 .social-card a {
diff --git a/frontend/src/components/Telegram/telegramLogin.css b/frontend/src/components/Telegram/telegramLogin.css
index 56244156..12663702 100644
--- a/frontend/src/components/Telegram/telegramLogin.css
+++ b/frontend/src/components/Telegram/telegramLogin.css
@@ -1,61 +1,57 @@
 .telegram-login {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .user-info {
-    background: var(--gradient);
-    border-radius: 8px;
-    height: 52px;
-    width: 190px;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 10px;
+  background: var(--gradient);
+  border-radius: 8px;
+  height: 52px;
+  width: 190px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
 }
 
 .user-photo {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    object-fit: cover;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
 }
 
 .user-name {
-    color: var(--black);
-    font-size: 16px;
-    font-family: var(--text-font);
-    font-weight: 700;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  color: var(--black);
+  font-size: 16px;
+  font-family: var(--text-font);
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .btn-telegram {
-    background: var(--button-gradient);
-    color: var(--black);
-    border: none;
-    height: 52px;
-    padding: 0 20px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 20px;
-    font-family: var(--text-font);
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  background: var(--button-gradient);
+  color: var(--black);
+  border: none;
+  height: 52px;
+  padding: 0 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 20px;
+  font-family: var(--text-font);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .btn-telegram:hover {
-    background: var(--button-gradient-hover);
+  background: var(--button-gradient-hover);
 }
 
 .btn-telegram:active {
-    background: var(--button-gradient-active);
+  background: var(--button-gradient-active);
 }
-
-/* div.user-photo-placeholder {
-    add style to user placeholder
-} */
\ No newline at end of file
diff --git a/frontend/src/components/header/header.css b/frontend/src/components/header/header.css
index d09e163a..e3be5096 100644
--- a/frontend/src/components/header/header.css
+++ b/frontend/src/components/header/header.css
@@ -1,36 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
-  --primary: #fff;
-  --secondary-color: #1a1c24;
-  --black: #000;
-  --primary: #fff;
-  --button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
-  --button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
-  --button-gradient-active: linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%);
-  --brand: #74d6fd;
-  --secondary: #e7ecf0;
-}
-
-body {
-  overflow-x: hidden;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-a {
-  text-decoration: none;
-}
-
-li {
-  list-style-type: none;
-}
-
 nav {
   height: 80px;
   display: flex;
@@ -62,18 +29,18 @@ nav {
 }
 
 .wallet-section {
-    position: absolute;
-    right: 10px;
-    display: flex;
-    gap: 10px;
+  position: absolute;
+  right: 10px;
+  display: flex;
+  gap: 10px;
 }
 
 .nav-items a {
-    position: relative;
-    color: var(--secondary);
-    font-family:var(--text-font);
-    font-size: 20px;
-    transition: color 0.3s;
+  position: relative;
+  color: var(--secondary);
+  font-family: var(--text-font);
+  font-size: 20px;
+  transition: color 0.3s;
 }
 
 .nav-items a:hover {
@@ -81,54 +48,53 @@ nav {
 }
 
 .nav-items a.active-link {
-    color: var(--brand);
-    font-weight: 700;
-}
-
-.gradient-button{
-    border-radius: 8px;
-    border: none;
-    height: 52px;
-    width: 190px;
-    font-size: 20px;
-    font-family: var(--text-font);
-    color: var(--black);
-    font-weight: 700;
-    background: var(--button-gradient);
-    line-height: 100%;
-} 
+  color: var(--brand);
+  font-weight: 700;
+}
+
+.gradient-button {
+  border-radius: 8px;
+  border: none;
+  height: 52px;
+  width: 190px;
+  font-size: 20px;
+  font-family: var(--text-font);
+  color: var(--black);
+  font-weight: 700;
+  background: var(--button-gradient);
+  line-height: 100%;
+}
 
 .logout-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 190px;
-    height: 52px;
-    border-radius: 8px;
-    border: 1px solid var(--brand);
-    background-color: transparent;
-    color: #fff;
-    font-family: var(--text-font, 'Rethink Sans', sans-serif);
-    font-size: 20px;
-    font-weight: 700;
-    line-height: 100%;
-    transition: all 0.3s ease;
-  }
-
-  .logout-button:hover {
-    background: var(--button-gradient, linear-gradient(55deg, #74d6fd 0%, #e01dee 100%));
-    border: none;
-  }
-
-  .logout-button:active {
-    background: var(--button-gradient-active, linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%));
-  }
-
-  .logout-button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 190px;
+  height: 52px;
+  border-radius: 8px;
+  border: 1px solid var(--brand);
+  background-color: transparent;
+  color: var(--primary);
+  font-family: var(--text-font);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 100%;
+  transition: all 0.3s ease;
+}
+
+.logout-button:hover {
+  background: var(--button-gradient-hover);
+  border: none;
+}
 
+.logout-button:active {
+  background: var(--button-gradient-active);
+}
+
+.logout-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 
 .gradient-button:hover {
   background: var(--button-gradient-hover);
diff --git a/frontend/src/components/spinner/Spinner.jsx b/frontend/src/components/spinner/Spinner.jsx
index 3d955956..a6d0a20f 100644
--- a/frontend/src/components/spinner/Spinner.jsx
+++ b/frontend/src/components/spinner/Spinner.jsx
@@ -4,12 +4,12 @@ import './spinner.css';
 const Spinner = ({ loading }) => {
   return (
     loading && (
-      <div className='spinner-wrapper'>
-        <div className='spinner-content'>
-          <div className='spinner-border text-light' role='status'>
-            <span className='visually-hidden'>Loading...</span>
+      <div className="spinner-wrapper">
+        <div className="spinner-content">
+          <div className="spinner-border text-light" role="status">
+            <span className="visually-hidden">Loading...</span>
           </div>
-          <span className='loading-text'>Loading...</span>
+          <span className="loading-text">Loading...</span>
         </div>
       </div>
     )
diff --git a/frontend/src/components/spinner/spinner.css b/frontend/src/components/spinner/spinner.css
index 93d5b462..3dc0fcd8 100644
--- a/frontend/src/components/spinner/spinner.css
+++ b/frontend/src/components/spinner/spinner.css
@@ -1,12 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --spinner-bgn: rgba(0, 0, 0, 0.5);
-  --spinner-content: #393939;
-  --text-color: #ffffff;
-}
-
 .spinner-wrapper {
   position: fixed;
   top: 0;
@@ -40,5 +31,5 @@
   font-family: var(--text-font);
   font-weight: 600;
   font-size: 28px;
-  color: var(--text-color);
+  color: var(--primary);
 }
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
new file mode 100644
index 00000000..7a6a4a7e
--- /dev/null
+++ b/frontend/src/globals.css
@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
+:root {
+  --text-font: 'Rethink Sans', sans-serif;
+  --primary: #fff;
+  --primary-color: #0b0c10;
+  --black: #000;
+  --brand: #74d6fd;
+  --secondary: #e7ecf0;
+  --secondary-color: #1a1c24;
+  --collateral-color: #1d9259;
+  --borrow-color: #f42222;
+  --spinner-bgn: rgba(0, 0, 0, 0.5);
+  --spinner-content: #393939;
+  --footer-bg-color: #1a1c24;
+  --footer-text-color: #e7ebf5;
+  --footer-line-color: rgba(231, 235, 245, 0.2);
+  --gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
+  --button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
+  --button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
+  --button-gradient-active: linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%);
+  --dashboard-bg: rgba(11, 12, 16, 1);
+  --card-bg-filter: blur(42.1875px);
+  --card-box-shadow: inset 4px 4px 9px 0 rgba(153, 234, 255, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
+  --card-bg-gradient: linear-gradient(135deg, rgba(116, 214, 253, 0.5) 0%, rgba(11, 12, 16, 0.5) 100%);
+  --card-border: 0.5px solid #4e7787;
+}
+
+body {
+  overflow-x: hidden;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+}
+
+li {
+  list-style-type: none;
+}
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index 20a0ef6a..760e4c5b 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -97,7 +97,7 @@ const Form = ({ walletId, setWalletId }) => {
           </div>
           <h5>Select Multiplier</h5>
           <MultiplierSelector setSelectedMultiplier={setSelectedMultiplier} />
-          <div className="submit">
+          <div>
             <button type="submit" className="form-button">
               Submit
             </button>
diff --git a/frontend/src/pages/forms/form.css b/frontend/src/pages/forms/form.css
index 73c8afb1..6491e9b6 100644
--- a/frontend/src/pages/forms/form.css
+++ b/frontend/src/pages/forms/form.css
@@ -1,19 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
-  --secondary-color: #1a1c24;
-  --blue-color: #74d6fd;
-  --primary-color: #0b0c10;
-  --black: #000;
-  --primary: #fff;
-  --secondary: #e7ecf0;
-  --button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
-  --button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
-  --button-gradient-active: linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%);
-}
-
 .form-container {
   margin-top: 4rem !important;
   margin-bottom: 12rem !important;
@@ -28,34 +12,6 @@
   padding-right: 12px;
 }
 
-.form-card {
-  width: 280px;
-  height: 124px;
-  background: linear-gradient(
-      0deg,
-      rgba(72, 143, 162, 0.03) 0%,
-      rgba(72, 143, 162, 0.03) 100%
-    ),
-    linear-gradient(
-      123deg,
-      rgba(116, 214, 253, 0.5) 0.63%,
-      rgba(11, 12, 16, 0.5) 100.03%
-    );
-  flex-direction: column;
-  border-radius: 8px;
-  border: 0.5px solid #74d6fd;
-  box-shadow:
-    0px 3.75px 3.75px 0px rgba(0, 0, 0, 0.15),
-    3.75px 3.75px 9.375px 0px rgba(153, 234, 255, 0.25) inset;
-  backdrop-filter: blur(21.09375px);
-}
-
-.form-card-text {
-  font-size: 20px;
-  margin-bottom: 8px;
-  margin-top: 8px;
-}
-
 .form-wrapper {
   width: max-content;
   margin: 0 auto;
@@ -65,27 +21,8 @@
   text-align: center;
 }
 
-.form-card__container {
-  display: flex;
-  margin-bottom: 50px;
-  gap: 18px;
-}
-
-.form-card__container > * {
-  color: white;
-}
-
-.form-card__container svg {
-  width: 22px;
-  height: 22px;
-}
-
-.form-card__container p {
-  color: darkgray;
-}
-
 .token-card label {
-  border: 1px solid var(--blue-color);
+  border: 1px solid var(--brand);
   border-radius: 8px;
   padding: 5px;
   width: 120px;
@@ -98,30 +35,20 @@
   background: var(--secondary-color);
 }
 
-.token-card:has(input[type="radio"]:checked) h5 {
-    color: black;
+.token-card:has(input[type='radio']:checked) h5 {
+  color: var(--black);
 }
 
-.token-card:has(input[type="radio"]:checked) h5 svg path {
-    fill: black;
+.token-card:has(input[type='radio']:checked) h5 svg path {
+  fill: var(--black);
 }
 
-/* .token-card:active {
-    background: var(--blue-color);
-    border-radius: 8px;
-    color: var(--black);
-} */
-
-/* component:active {
-    color: var(--black);
-} */
-
 .token-card label svg {
-  fill: var(--black); /* Установите цвет иконки в черный */
+  fill: var(--black);
 }
 
 .token-card label:active svg {
-  fill: var(--blue-color); /* Добавьте эффект при наведении, если нужно */
+  fill: var(--brand);
 }
 
 .token-label {
@@ -132,24 +59,24 @@
 
 .token-label input {
   background-color: transparent;
-  border: 1px solid var(--blue-color);
+  border: 1px solid var(--brand);
   border-radius: 8px;
   padding: 10px;
 }
 
 .token-label-component svg {
-    fill: red;
+  fill: red;
 }
 
-.form-wrapper > *{
-    color: white;
-    margin-bottom: 10px;
+.form-wrapper > * {
+  color: var(--primary);
+  margin-bottom: 10px;
 }
 
 .token-card h5 {
   margin-top: 9px;
   font-size: 20px;
-  color: white;
+  color: var(--primary);
 }
 
 .token-card svg {
@@ -176,44 +103,43 @@
   height: 15px;
 }
 
-.recommended p{
-    background-color: var(--blue-color);
-    width: 120px;
-    height: 15px;
-    text-align: center;
-    font-weight: bold;
-    font-size: 11px;
-    border-radius: 5px 5px 0 0;
-    display: flex;
-    align-items: center;
-    color: black;
-    font-family: var(--text-font);
-    justify-content: center;
+.recommended p {
+  background-color: var(--brand);
+  width: 120px;
+  height: 15px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 11px;
+  border-radius: 5px 5px 0 0;
+  display: flex;
+  align-items: center;
+  color: black;
+  font-family: var(--text-font);
+  justify-content: center;
 }
 
 .recommended-item {
-    display: flex;
-    align-items: flex-end !important;
-    font-size: 20px;
-
+  display: flex;
+  align-items: flex-end !important;
+  font-size: 20px;
 }
 
-.multiplier-item label{
-    border: 1px solid var(--blue-color);
-    width: 120px;
-    height: 50px;
-    border-radius: 8px;
-    font-size: 24px;
-    display: flex;
-    justify-content: center;
+.multiplier-item label {
+  border: 1px solid var(--brand);
+  width: 120px;
+  height: 50px;
+  border-radius: 8px;
+  font-size: 24px;
+  display: flex;
+  justify-content: center;
 }
 
 .multiplier-item:not(.recommended-item) label {
-    align-items: center;
-    font-size: 21px;
+  align-items: center;
+  font-size: 21px;
 }
 
-input[type="radio"] {
+input[type='radio'] {
   display: none;
   padding: 10px;
   border: 1px solid #ccc;
@@ -222,23 +148,25 @@ input[type="radio"] {
   box-sizing: border-box;
 }
 
-.token-card input[type="radio"]:checked + label {
-  background-color: var(--blue-color);
+.token-card input[type='radio']:checked + label {
+  background-color: var(--brand);
 }
 
-.multiplier-item input[type="radio"]:checked + label {
-    border-color: var(--blue-color);
-    box-shadow: 0 4px 20px var(--blue-color);
+.multiplier-item input[type='radio']:checked + label {
+  border-color: var(--brand);
+  box-shadow: 0 4px 20px var(--brand);
 }
 
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-input[type="number"] {
+input[type='number'] {
+  appearance: textfield;
   -moz-appearance: textfield;
+  -webkit-appearance: none;
   color: var(--primary);
 }
 
@@ -250,7 +178,7 @@ input[type="number"] {
   margin-bottom: 5px;
 }
 
-input[type="number"].error {
+input[type='number'].error {
   border-color: red;
   background-color: #ffe6e6;
   color: var(--black);
@@ -264,10 +192,7 @@ input[type="number"].error {
   height: 208px;
   flex-shrink: 0;
   border-radius: 2000px;
-  background: var(
-    --gradient,
-    linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%)
-  );
+  background: var(--gradient);
   filter: blur(80px);
 }
 
@@ -279,10 +204,7 @@ input[type="number"].error {
   height: 208px;
   flex-shrink: 0;
   border-radius: 2000px;
-  background: var(
-    --gradient,
-    linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%)
-  );
+  background: var(--gradient);
   filter: blur(80px);
 }
 
@@ -308,99 +230,98 @@ input[type="number"].error {
 }
 
 @media (min-width: 1800px) {
-    .form-card{
-        width: 400px;
-    }
-
-    .form-token label, .multiplier-card label{
-        width: 150px;
-        height: 60px;
-    }
-
-    input[type='number']{
-        height: 60px;
-    }
-
-    .recommended p {
-        width: 150px;
-        height: 22px;
-        font-size: 15px;
-    }
-}
-
-.forms-gradient .card-gradient:nth-child(1){
-    position: absolute;
-    top: 240px;
-    left: -156px;
-    width: 232px;
-    height: 208px;
-    flex-shrink: 0;
-    border-radius: 2000px;
-    background: var(--gradient, linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%));
-    filter: blur(111px);
-}
-
-.forms-gradient .card-gradient:nth-child(2){
-    position: absolute;
-    right: -70px;
-    bottom: -55px;
-    width: 232px;
-    height: 208px;
-    flex-shrink: 0;
-    border-radius: 2000px;
-    background: var(--gradient, linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%));
-    /* Blur */
-    filter: blur(123px);
-}
-
-.form-alert{
-    display: flex;
-    align-items: center;
-}
-
-.form-alert-hex{
-    margin-left: auto;
-}
-
-.balance-container{
-    display: flex;
-    margin-bottom: 60px;
-    justify-content: space-between;
-}
-
-.balance-item{
-    display: flex;
-    flex-direction: column;
-    background-color: #74D6FD80;
-    height: 129px;
-    width: 300px;
-    align-items: center;
-    border-radius: 8px;
-    border: 0.5px solid #4e7787;
-    justify-content: center;
-    background: linear-gradient(150deg, #74D6FD80 1.13%, #0B0C1080 103.45%);
-    margin-right: 20px;
-    box-shadow: 3.75px 3.75px 9.38px 0px #99EAFF40 inset;
-}
-
-.balance-item label:nth-child(1){
-    font-size: 20px;
-    color: var(--secondary);
-    letter-spacing: 0.5px;
-}
-
-.balance-item label:nth-child(2){
-    font-size: 32px;
-    color: var(--secondary);
-}
-
-.balance-title{
-    display: flex;
-    align-items: center;
-}
-
-.balance-title svg{
-    margin-right: 5px;
-    height: 25px;
-    width: 24px ;
-}
\ No newline at end of file
+  .form-card {
+    width: 400px;
+  }
+
+  .form-token label,
+  .multiplier-card label {
+    width: 150px;
+    height: 60px;
+  }
+
+  input[type='number'] {
+    height: 60px;
+  }
+
+  .recommended p {
+    width: 150px;
+    height: 22px;
+    font-size: 15px;
+  }
+}
+
+.forms-gradient .card-gradient:nth-child(1) {
+  position: absolute;
+  top: 240px;
+  left: -156px;
+  width: 232px;
+  height: 208px;
+  flex-shrink: 0;
+  border-radius: 2000px;
+  background: var(--gradient);
+  filter: blur(111px);
+}
+
+.forms-gradient .card-gradient:nth-child(2) {
+  position: absolute;
+  right: -70px;
+  bottom: -55px;
+  width: 232px;
+  height: 208px;
+  flex-shrink: 0;
+  border-radius: 2000px;
+  background: var(--gradient);
+  filter: blur(123px);
+}
+
+.form-alert {
+  display: flex;
+  align-items: center;
+}
+
+.form-alert-hex {
+  margin-left: auto;
+}
+
+.balance-container {
+  display: flex;
+  margin-bottom: 60px;
+  justify-content: space-between;
+}
+
+.balance-item {
+  display: flex;
+  flex-direction: column;
+  height: 129px;
+  width: 300px;
+  align-items: center;
+  border-radius: 8px;
+  border: var(--card-border);
+  justify-content: center;
+  background: var(--card-bg-gradient);
+  margin-right: 20px;
+  box-shadow: var(--card-box-shadow);
+}
+
+.balance-item label:nth-child(1) {
+  font-size: 20px;
+  color: var(--secondary);
+  letter-spacing: 0.5px;
+}
+
+.balance-item label:nth-child(2) {
+  font-size: 32px;
+  color: var(--secondary);
+}
+
+.balance-title {
+  display: flex;
+  align-items: center;
+}
+
+.balance-title svg {
+  margin-right: 5px;
+  height: 25px;
+  width: 24px;
+}
diff --git a/frontend/src/pages/spotnet/about/About.jsx b/frontend/src/pages/spotnet/about/About.jsx
index 65d01d57..3daa3f47 100644
--- a/frontend/src/pages/spotnet/about/About.jsx
+++ b/frontend/src/pages/spotnet/about/About.jsx
@@ -10,8 +10,7 @@ const CardData = [
   {
     number: '1',
     title: 'ZkLend ETH collateral',
-    description:
-      'ETH/STRK from your wallet is deposited as collateral on ZkLend.',
+    description: 'ETH/STRK from your wallet is deposited as collateral on ZkLend.',
     icon: ZkLend,
   },
   {
@@ -41,37 +40,36 @@ const About = () => {
     { top: 7, left: 80, size: 8 },
   ];
   return (
-    <div className='about-container'>
+    <div className="about-container">
       {starData.map((star, index) => (
         <Star
           key={index}
+          className="about-star"
           style={{
-            position: 'absolute',
-            top: `${star.top}%`,
-            left: `${star.left}%`,
-            width: `${star.size}%`,
-            height: `${star.size}%`,
+            '--star-top': `${star.top}%`,
+            '--star-left': `${star.left}%`,
+            '--star-size': `${star.size}%`,
           }}
         />
       ))}
-      <h1 className='about-title'>How it works</h1>
-      <div className='card-container flex'>
-        <div className='card-gradients'>
-          <div className='card-gradient'></div>
-          <div className='card-gradient'></div>
+      <h1 className="about-title">How it works</h1>
+      <div className="card-container flex">
+        <div>
+          <div className="card-gradient"></div>
+          <div className="card-gradient"></div>
         </div>
         {CardData.map((card, index) => (
-          <div key={index} className='card-about flex'>
-            <div className='card-number flex'>
+          <div key={index} className="card-about flex">
+            <div className="card-number flex">
               <h2>{card.number}</h2>
             </div>
-            <div className='card-icon'>
+            <div className="card-icon">
               <card.icon />
             </div>
-            <div className='card-title'>
+            <div className="card-title">
               <h4>{card.title}</h4>
             </div>
-            <div className='card-description'>
+            <div className="card-description">
               <h6>{card.description}</h6>
             </div>
           </div>
diff --git a/frontend/src/pages/spotnet/about/about.css b/frontend/src/pages/spotnet/about/about.css
index c93b9563..16eb2a49 100644
--- a/frontend/src/pages/spotnet/about/about.css
+++ b/frontend/src/pages/spotnet/about/about.css
@@ -1,15 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
-  --secondary-color: #1a1c24;
-  --secondary: #e7ecf0;
-  --brand: #74d6fd;
-  --primary: #fff;
-  --primary-color: #0b0c10;
-}
-
 .flex {
   display: flex;
   align-items: center;
@@ -28,6 +16,14 @@
   background-color: var(--primary-color);
 }
 
+.about-star {
+  position: absolute;
+  top: var(--star-top);
+  left: var(--star-left);
+  width: var(--star-size);
+  height: var(--star-size);
+}
+
 .card-icon {
   width: 120px;
   height: 120px;
@@ -52,16 +48,8 @@
 .card-about {
   width: 320px;
   height: 355px;
-  background: linear-gradient(
-      0deg,
-      rgba(72, 143, 162, 0.03) 0%,
-      rgba(72, 143, 162, 0.03) 100%
-    ),
-    linear-gradient(
-      123deg,
-      rgba(116, 214, 253, 0.5) 0.63%,
-      rgba(11, 12, 16, 0.5) 100.03%
-    );
+  background: linear-gradient(0deg, rgba(72, 143, 162, 0.03) 0%, rgba(72, 143, 162, 0.03) 100%),
+    linear-gradient(123deg, rgba(116, 214, 253, 0.5) 0.63%, rgba(11, 12, 16, 0.5) 100.03%);
   flex-direction: column;
   gap: 15px;
   border-radius: 20px;
@@ -88,10 +76,6 @@
   line-height: 140%;
 }
 
-.card-about {
-  color: var(--primary);
-}
-
 .card-number {
   position: absolute;
   top: -25px;
@@ -121,10 +105,7 @@
   height: 208px;
   flex-shrink: 0;
   border-radius: 2000px;
-  background: var(
-    --gradient,
-    linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%)
-  );
+  background: var(--gradient, linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%));
   /* Blur */
   filter: blur(80px);
 }
@@ -137,10 +118,7 @@
   height: 208px;
   flex-shrink: 0;
   border-radius: 2000px;
-  background: var(
-    --gradient,
-    linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%)
-  );
+  background: var(--gradient, linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%));
   /* Blur */
   filter: blur(80px);
 }
diff --git a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
index 90f79019..5111a575 100644
--- a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
+++ b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx
@@ -124,22 +124,21 @@ const Dashboard = ({ walletId }) => {
       {starData.map((star, index) => (
         <Star
           key={index}
+          className="dashboard-star"
           style={{
-            position: 'absolute',
-            top: `${star.top}%`,
-            left: `${star.left}%`,
-            width: `${star.size}%`,
-            height: `${star.size}%`,
+            '--star-top': `${star.top}%`,
+            '--star-left': `${star.left}%`,
+            '--star-size': `${star.size}%`,
           }}
         />
       ))}
-      <div className="backdround-gradients position-relative">
+      <div className="position-relative">
         <div className="backdround-gradient"></div>
         <div className="backdround-gradient"></div>
       </div>
       <h1 className="text-white text-center zkLend-text">zkLend Position</h1>
       <div className="card card-health-factor mx-auto d-flex flex-column align-items-center justify-content-center card-shadow">
-        <div className="content bg-custom-health d-flex align-items-center px-4 py-3 rounded bg-card-health">
+        <div className="bg-custom-health d-flex align-items-center px-4 py-3 rounded bg-card-health">
           <span className="dashboard-text-color health-text-size">Health factor:</span>
           <span className="text-white text-style">{healthFactor}</span>
         </div>
diff --git a/frontend/src/pages/spotnet/dashboard/dashboard.css b/frontend/src/pages/spotnet/dashboard/dashboard.css
index 96de31bd..94ea28ea 100644
--- a/frontend/src/pages/spotnet/dashboard/dashboard.css
+++ b/frontend/src/pages/spotnet/dashboard/dashboard.css
@@ -1,27 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
-  --primary-color: #0b0c10;
-  --collateral-color: #1d9259;
-  --borrow-color: #f42222;
-  --card-box-shadow: 0px 3.75px 3.75px 0px rgba(0, 0, 0, 0.15),
-    3.75px 3.75px 9.375px 0px rgba(153, 234, 255, 0.25) inset;
-  --background-main: rgba(11, 12, 16, 1);
-  --primary-color: #0b0c10;
-  --black: #000;
-  --primary: #fff;
-  --secondary: #e7ecf0;
-  --button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
-  --button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
-  --button-gradient-active: linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%);
-}
-
 body {
-  background-color: var(--background-main);
+  background-color: var(--dashboard-bg);
   font-family:
-    "Rethink Sans",
+    'Rethink Sans',
     -apple-system,
     Roboto,
     Helvetica,
@@ -40,6 +20,14 @@ body {
   color: var(--secondary);
 }
 
+.dashboard-star {
+  position: absolute;
+  top: var(--star-top);
+  left: var(--star-left);
+  width: var(--star-size);
+  height: var(--star-size);
+}
+
 /* DESKTOP */
 /* Health factor styles */
 
@@ -70,15 +58,11 @@ body {
 }
 
 .card-health-factor {
-  background: linear-gradient(
-    to bottom right,
-    rgba(116, 214, 253, 0.5) 0%,
-    rgba(11, 12, 16, 0.5) 100%
-  );
+  background: var(--card-bg-gradient);
   padding: 36px;
   border-radius: 6px;
   width: 100%;
-  border: 0.5px solid #74d6fd;
+  border: var(--card-border);
   height: 146px;
 }
 
@@ -123,12 +107,8 @@ body {
 
 .card-custom-styles {
   flex: 1;
-  background: linear-gradient(
-    to bottom right,
-    rgba(116, 214, 253, 0.5) 0%,
-    rgba(11, 12, 16, 0.5) 100%
-  );
-  border: 0.5px solid #74d6fd;
+  background: var(--card-bg-gradient);
+  border: var(--card-border);
 }
 
 .card-custom-styles:first-child {
@@ -185,10 +165,7 @@ body {
   height: 128px;
   flex-shrink: 0;
   border-radius: 2000px;
-  background: var(
-    --gradient,
-    linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%)
-  );
+  background: var(--gradient);
   filter: blur(80px);
 }
 
diff --git a/frontend/src/pages/spotnet/dont_miss/DontMiss.jsx b/frontend/src/pages/spotnet/dont_miss/DontMiss.jsx
index 932c2d1e..f1afddcb 100644
--- a/frontend/src/pages/spotnet/dont_miss/DontMiss.jsx
+++ b/frontend/src/pages/spotnet/dont_miss/DontMiss.jsx
@@ -27,12 +27,11 @@ const DontMiss = ({ walletId }) => {
       {starData.map((star, index) => (
         <Star
           key={index}
+          className="miss-star"
           style={{
-            position: 'absolute',
-            top: `${star.top}%`,
-            left: `${star.left}%`,
-            width: `${star.size}%`,
-            height: `${star.size}%`,
+            '--star-top': `${star.top}%`,
+            '--star-left': `${star.left}%`,
+            '--star-size': `${star.size}%`,
           }}
         />
       ))}
diff --git a/frontend/src/pages/spotnet/dont_miss/dont_miss.css b/frontend/src/pages/spotnet/dont_miss/dont_miss.css
index 2d9dbc5c..2c51c5aa 100644
--- a/frontend/src/pages/spotnet/dont_miss/dont_miss.css
+++ b/frontend/src/pages/spotnet/dont_miss/dont_miss.css
@@ -1,15 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --secondary-color: #1a1c24;
-  --brand: #74d6fd;
-  --primary-color: #0b0c10;
-  --black: #000;
-  --primary: #fff;
-  --secondary: #e7ecf0;
-}
-
 .dont-miss__container {
   height: 70vh;
   display: flex;
@@ -30,10 +18,6 @@
   margin-bottom: 0;
 }
 
-.miss-btn {
-  width: 400px;
-}
-
 .miss-button {
   position: relative;
 }
@@ -43,3 +27,11 @@
   right: -50px;
   top: 26px;
 }
+
+.miss-star {
+  position: absolute;
+  top: var(--star-top);
+  left: var(--star-left);
+  width: var(--star-size);
+  height: var(--star-size);
+}
diff --git a/frontend/src/pages/spotnet/home/Home.jsx b/frontend/src/pages/spotnet/home/Home.jsx
index cbd23019..7d502a23 100644
--- a/frontend/src/pages/spotnet/home/Home.jsx
+++ b/frontend/src/pages/spotnet/home/Home.jsx
@@ -52,52 +52,49 @@ function Home({ walletId }) {
 
   return (
     <div className="home">
-      <div className="decorations">
+      <div>
         {decorationData.map((decoration, index) => (
           <Decoration
             key={index}
+            className="decoration"
             style={{
-              position: 'absolute',
-              top: `${decoration.top}%`,
-              left: `${decoration.left}%`,
-              width: `${decoration.size}%`,
-              height: `${decoration.size}%`,
-              zIndex: '-1',
+              '--top': `${decoration.top}%`,
+              '--left': `${decoration.left}%`,
+              '--size': `${decoration.size}%`,
             }}
           />
         ))}
       </div>
       <div className="top-gradient"></div>
-      <div className="stars">
+      <div>
         {starsData.map((star, index) => (
           <SmallStar
             key={index}
+            className="small-star"
             style={{
-              position: 'absolute',
-              top: `${star.top}%`,
-              left: `${star.left}%`,
+              '--top': `${star.top}%`,
+              '--left': `${star.left}%`,
             }}
           />
         ))}
         {starData.map((star, index) => (
           <Star
             key={index}
+            className="star"
             style={{
-              position: 'absolute',
-              top: `${star.top}%`,
-              left: `${star.left}%`,
-              width: `${star.size}%`,
-              height: `${star.size}%`,
+              '--top': `${star.top}%`,
+              '--left': `${star.left}%`,
+              '--size': `${star.size}%`,
             }}
           />
         ))}
-        <Starknet style={{ position: 'absolute', top: '0', right: '20px' }} />
+        <Starknet className="starknet" />
       </div>
       <h2 className="center-text">
         <span className="blue-color">Earn</span> by leveraging your assets
-        <span className="gradient"> with Spotnet</span>
+        <span className="text-gradient"> with Spotnet</span>
       </h2>
-      <h5 className="subtitle-text-styles">
+      <h5>
         Maximize the potential of your resources and start earning today. Join Spotnet and unlock new opportunities to
         grow your wealth!
       </h5>
diff --git a/frontend/src/pages/spotnet/home/home.css b/frontend/src/pages/spotnet/home/home.css
index c508a7b4..72b22a1d 100644
--- a/frontend/src/pages/spotnet/home/home.css
+++ b/frontend/src/pages/spotnet/home/home.css
@@ -1,18 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
-  --secondary-color: #1a1c24;
-  --blue-color: #74d6fd;
-  --primary-color: #0b0c10;
-  --black: #000;
-  --primary: #fff;
-  --secondary: #e7ecf0;
-  --button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
-  --button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
-  --button-gradient-active: linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%);
-}
-
 body {
   background-color: var(--primary-color);
   width: 100vw;
@@ -20,45 +5,82 @@ body {
 
 .home {
   position: relative;
-  width: 100%;
   display: flex;
-  right: 10px;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  flex-direction: column;
   height: calc(100vh - 160px);
+  color: var(--secondary);
+  text-align: center;
+  margin-top: 10px;
+  right: 10px;
+}
+
+.decoration,
+.small-star,
+.star {
+  position: absolute;
+  z-index: -1;
+}
+
+.decoration {
+  top: var(--top);
+  left: var(--left);
+  width: var(--size);
+  height: var(--size);
+}
+
+.small-star {
+  top: var(--top);
+  left: var(--left);
+}
+
+.star {
+  top: var(--top);
+  left: var(--left);
+  width: var(--size);
+  height: var(--size);
+}
+
+.top-gradient,
+.bottom-gradient {
+  background: var(--gradient);
+  height: 100px;
+  width: 60%;
+  margin: 0;
+  border-radius: 2000px 2000px 0 0;
+  filter: blur(100px);
+  z-index: -1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.top-gradient {
+  top: -50px;
+}
+.bottom-gradient {
+  bottom: -50px;
 }
 
 .center-text {
-  font-size: 70px;
   font-weight: 600;
   font-family: var(--text-font);
-  width: 800px;
-  margin: 0 auto;
   color: var(--primary);
-  background-color: transparent;
-  text-align: center;
+  margin: 0 auto;
 }
 
 .blue-color {
-  color: var(--blue-color);
+  color: var(--brand);
 }
 
-.gradient {
+.text-gradient {
   background: var(--gradient);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
-.home {
-  color: var(--secondary);
-  width: 650px;
-  text-align: center;
-  font-size: 1em;
-  margin-top: 10px;
-}
-
 .launch-button {
   background: var(--button-gradient);
   border: none;
@@ -66,60 +88,37 @@ body {
   height: 52px;
   width: 400px;
   font-size: 20px;
-  margin-top: 20px;
   font-family: var(--text-font);
   font-weight: 700;
   transition: background 1.3s ease;
+  margin-top: 20px;
 }
 
 .launch-button:hover {
   background: var(--button-gradient-hover);
 }
-
 .launch-button:active {
   background: var(--button-gradient-active);
 }
 
-.top-gradient,
-.bottom-gradient {
-  background: var(--gradient);
-  height: 100px;
-  width: 60%;
-  margin: 0;
-  border-radius: 2000px 2000px 0 0;
-  filter: blur(100px);
-  z-index: -1;
-}
-
-.top-gradient {
+.starknet {
   position: absolute;
-  top: -50px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.bottom-gradient {
-  position: absolute;
-  bottom: -50px;
-  left: 50%;
-  transform: translateX(-50%);
+  top: 0;
+  right: 20px;
 }
 
 @media (min-width: 1800px) {
-  .home {
-    background-color: transparent;
-    width: 100%;
-    position: relative;
-  }
   .center-text {
     font-size: 100px;
     width: 1200px;
   }
+
   .launch-button {
     width: 650px;
     font-size: 26px;
     height: 70px;
   }
+
   .home h5 {
     font-size: 1.4em;
     width: 800px;
@@ -127,12 +126,6 @@ body {
 }
 
 @media (max-width: 1800px) {
-  .home {
-    background-color: transparent;
-    width: 100%;
-    position: relative;
-  }
-
   .center-text {
     font-size: 80px;
     width: 1000px;
@@ -150,20 +143,7 @@ body {
   }
 }
 
-@media (max-width: 1710px) {
-  .home {
-    width: 100%;
-    position: relative;
-    right: 20px;
-  }
-}
-
 @media (max-width: 1440px) {
-  .home {
-    position: relative;
-    left: 10px;
-    width: 97%;
-  }
   .center-text {
     font-size: 70px;
     max-width: 750px;
@@ -180,31 +160,7 @@ body {
   }
 }
 
-@media (max-width: 1550px) {
-  .home {
-    width: 100%;
-  }
-  .center-text {
-    font-size: 70px;
-    max-width: 750px;
-  }
-}
-
-@media (max-width: 1400px) {
-  .home {
-    position: relative;
-    width: 105%;
-    background-color: transparent;
-    left: -10px;
-  }
-}
-
 @media (max-width: 1280px) {
-  .home {
-    width: 95%;
-    left: 15px;
-  }
-
   .center-text {
     font-size: 50px;
     max-width: 600px;
diff --git a/frontend/src/pages/spotnet/information/Information.jsx b/frontend/src/pages/spotnet/information/Information.jsx
index 98e8ed52..36a7d4b4 100644
--- a/frontend/src/pages/spotnet/information/Information.jsx
+++ b/frontend/src/pages/spotnet/information/Information.jsx
@@ -1,76 +1,73 @@
 import './information.css';
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import StarMaker from "../../../components/StarMaker"; 
+import StarMaker from '../../../components/StarMaker';
 
 const Information = () => {
-    const [data, setData] = useState({ total_opened_amount: 0, unique_users: 0 });
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
+  const [data, setData] = useState({ total_opened_amount: 0, unique_users: 0 });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                const response = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/api/get_stats`);
-                setData({
-                    total_opened_amount: response.data.total_opened_amount,
-                    unique_users: response.data.unique_users,
-                });
-            } catch (error) {
-                setError(error.response ? error.response.data.message : error.message);
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchData();
-    }, []);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(`${process.env.REACT_APP_BACKEND_URL}/api/get_stats`);
+        setData({
+          total_opened_amount: response.data.total_opened_amount,
+          unique_users: response.data.unique_users,
+        });
+      } catch (error) {
+        setError(error.response ? error.response.data.message : error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
 
-    const starData = [
-        { top: 9, left: -6.2, size: 20 },
-        { top: 9, left: 39, size: 15 },
-        { top: -8, left: 85, size: 18 },
-        { top: 74, left: 43, size: 22 },
-    ];
+    fetchData();
+  }, []);
 
-    const formatCurrency = (value) => {
-        if (value < 1000) {
-            return new Intl.NumberFormat('en-US', {
-                style: 'currency',
-                currency: 'USD',
-                maximumFractionDigits: 1
-            }).format(value);
-        }
-        return new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: 'USD',
-            notation: 'compact',
-            maximumFractionDigits: 1
-        }).format(value);
-    };
+  const starData = [
+    { top: 9, left: -6.2, size: 20 },
+    { top: 9, left: 39, size: 15 },
+    { top: -8, left: 85, size: 18 },
+    { top: 74, left: 43, size: 22 },
+  ];
 
+  const formatCurrency = (value) => {
+    if (value < 1000) {
+      return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 1,
+      }).format(value);
+    }
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      notation: 'compact',
+      maximumFractionDigits: 1,
+    }).format(value);
+  };
 
-    return (
-        <div className="information">
-            <div className="card-info__container">
-                <div className="card-info flex">
-                    <h1>TVL</h1>
-                    <h3>
-                        {loading ? "Loading..." : error ? `Error: ${error}` : formatCurrency(data.total_opened_amount)}
-                    </h3>
-                </div>
-                <div className="card-gradients infos">
-                    <div className="card-gradient"></div>
-                    <div className="card-gradient"></div>
-                </div>
-                <div className="card-info flex">
-                    <h1>Users</h1>
-                    <h3>{loading ? "Loading..." : error ? `Error: ${error}` : data.unique_users}</h3>
-                </div>
-                <StarMaker starData={starData} />
-            </div>
+  return (
+    <div className="information">
+      <div className="card-info__container">
+        <div className="card-info flex">
+          <h1>TVL</h1>
+          <h3>{loading ? 'Loading...' : error ? `Error: ${error}` : formatCurrency(data.total_opened_amount)}</h3>
+        </div>
+        <div className="infos">
+          <div className="card-gradient"></div>
+          <div className="card-gradient"></div>
+        </div>
+        <div className="card-info flex">
+          <h1>Users</h1>
+          <h3>{loading ? 'Loading...' : error ? `Error: ${error}` : data.unique_users}</h3>
         </div>
-    );
-}
+        <StarMaker starData={starData} />
+      </div>
+    </div>
+  );
+};
 
 export default Information;
diff --git a/frontend/src/pages/spotnet/information/information.css b/frontend/src/pages/spotnet/information/information.css
index ac2bc0ec..da6701d4 100644
--- a/frontend/src/pages/spotnet/information/information.css
+++ b/frontend/src/pages/spotnet/information/information.css
@@ -1,18 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-:root {
-  --text-font: "Rethink Sans", sans-serif;
-  --gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
-  --secondary-color: #1a1c24;
-  --blue-color: #74d6fd;
-  --primary-color: #0b0c10;
-  --black: #000;
-  --primary: #fff;
-  --secondary: #e7ecf0;
-  --button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
-  --button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
-  --button-gradient-active: linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%);
-}
-
 .information {
   height: 70vh;
   display: flex;
@@ -30,24 +15,13 @@
 .card-info {
   width: 450px;
   height: 300px;
-  background: linear-gradient(
-      0deg,
-      rgba(72, 143, 162, 0.03) 0%,
-      rgba(72, 143, 162, 0.03) 100%
-    ),
-    linear-gradient(
-      123deg,
-      rgba(116, 214, 253, 0.5) 0.63%,
-      rgba(11, 12, 16, 0.5) 100.03%
-    );
+  background: var(--card-bg-gradient);
   flex-direction: column;
   gap: 15px;
   border-radius: 20px;
-  border: 0.5px solid #74d6fd;
-  box-shadow:
-    0px 3.75px 3.75px 0px rgba(0, 0, 0, 0.15),
-    3.75px 3.75px 9.375px 0px rgba(153, 234, 255, 0.25) inset;
-  backdrop-filter: blur(21.09375px);
+  border: var(--card-border);
+  box-shadow: var(--card-box-shadow);
+  backdrop-filter: var(--card-bg-filter);
 }
 
 .card-info {
@@ -79,10 +53,7 @@
   height: 208px;
   flex-shrink: 0;
   border-radius: 2000px;
-  background: var(
-    --gradient,
-    linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%)
-  );
+  background: var(--gradient);
   filter: blur(120px);
 }
 
@@ -94,10 +65,6 @@
   height: 208px;
   flex-shrink: 0;
   border-radius: 2000px;
-  background: var(
-    --gradient,
-    linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%)
-  );
-  /* Blur */
+  background: var(--gradient);
   filter: blur(120px);
 }
diff --git a/frontend/src/pages/spotnet/partnership/Partnership.jsx b/frontend/src/pages/spotnet/partnership/Partnership.jsx
index 52cd8108..2194895b 100644
--- a/frontend/src/pages/spotnet/partnership/Partnership.jsx
+++ b/frontend/src/pages/spotnet/partnership/Partnership.jsx
@@ -1,5 +1,5 @@
-import './partnership.css';
 import React from 'react';
+import './partnership.css';
 import { ReactComponent as ZklendLogo } from 'assets/images/zklend_logo.svg';
 import { ReactComponent as EkuboLogo } from 'assets/images/ekubo_logo.svg';
 import { ReactComponent as Star } from 'assets/particles/star.svg';
@@ -16,7 +16,7 @@ const Partnership = () => {
   const starData = [{ top: 10, left: 75, size: 15 }];
 
   return (
-    <div className='partnership-container'>
+    <div className="partnership-container">
       {starData.map((star, index) => (
         <Star
           key={index}
@@ -29,9 +29,9 @@ const Partnership = () => {
           }}
         />
       ))}
-      <h1 className='about-title'>Partnership</h1>
-      <div className='partnership-content'>
-        <div className='partnership-logo'>{logos}</div>
+      <h1 className="about-title">Partnership</h1>
+      <div className="partnership-content">
+        <div className="partnership-logo">{logos}</div>
       </div>
     </div>
   );