diff --git a/app/src/components/icons/Logo.tsx b/app/src/components/icons/Logo.tsx
index 06ed750..d15398c 100644
--- a/app/src/components/icons/Logo.tsx
+++ b/app/src/components/icons/Logo.tsx
@@ -124,7 +124,6 @@ export function LogoIconLarge() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="45" cy="45" r="45" fill="#FCFDFD" />
       <circle
         cx="45.1957"
         cy="45.1957"
diff --git a/app/src/pages/UserAuth.tsx b/app/src/pages/UserAuth.tsx
index a5a7c57..19393f9 100644
--- a/app/src/pages/UserAuth.tsx
+++ b/app/src/pages/UserAuth.tsx
@@ -2,7 +2,11 @@ import React, { useState, FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { LogoIconLarge } from "../components/icons/Logo";
 import { EyeIcon } from "../components/icons/ExportCommonIcons";
-import { useLoadingProgress, useOrganization, useUserName } from "../store/store";
+import {
+  useLoadingProgress,
+  useOrganization,
+  useUserName,
+} from "../store/store";
 import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
 import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
 
@@ -21,7 +25,7 @@ const UserAuth: React.FC = () => {
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const organization = (email.split("@")[1]).split(".")[0];
+    const organization = email.split("@")[1].split(".")[0];
     try {
       const res = await signInApi(email, password, organization);
 
@@ -39,7 +43,7 @@ const UserAuth: React.FC = () => {
       } else if (res.message === "User Not Found!!! Kindly signup...") {
         setError("Account not found");
       }
-    } catch (error) { }
+    } catch (error) {}
   };
 
   const handleRegister = async (e: FormEvent) => {
@@ -47,7 +51,7 @@ const UserAuth: React.FC = () => {
     if (email && password && userName) {
       setError("");
       try {
-        const organization = (email.split("@")[1]).split(".")[0];
+        const organization = email.split("@")[1].split(".")[0];
         const res = await signUpApi(userName, email, password, organization);
 
         if (res.message === "New User created") {
@@ -56,123 +60,121 @@ const UserAuth: React.FC = () => {
         if (res.message === "User already exists") {
           setError("User already exists");
         }
-      } catch (error) { }
+      } catch (error) {}
     } else {
       setError("Please fill all the fields!");
     }
   };
 
   return (
-    <>
-      <div className="auth-container">
-        <div className="logo-icon">
-          <LogoIconLarge />
-        </div>
-        <h1>Welcome to Dwinzo</h1>
-        <p>
-          {isSignIn ? (
-            <>
-              Don’t have an account?{" "}
-              <span
-                className="link"
-                onClick={() => setIsSignIn(false)}
-                style={{ cursor: "pointer" }}
-              >
-                Register here!
-              </span>
-            </>
-          ) : (
-            <>
-              Already have an account?{" "}
-              <span
-                className="link"
-                onClick={() => setIsSignIn(true)}
-                style={{ cursor: "pointer" }}
-              >
-                Login here!
-              </span>
-            </>
-          )}
-        </p>
+    <div className="auth-container">
+      <div className="logo-icon">
+        <LogoIconLarge />
+      </div>
+      <h1>Welcome to Dwinzo</h1>
+      <p>
+        {isSignIn ? (
+          <>
+            Don’t have an account?{" "}
+            <span
+              className="link"
+              onClick={() => setIsSignIn(false)}
+              style={{ cursor: "pointer" }}
+            >
+              Register here!
+            </span>
+          </>
+        ) : (
+          <>
+            Already have an account?{" "}
+            <span
+              className="link"
+              onClick={() => setIsSignIn(true)}
+              style={{ cursor: "pointer" }}
+            >
+              Login here!
+            </span>
+          </>
+        )}
+      </p>
 
-        <button className="google-login">
-          <span className="google-icon">G</span> Continue with Google
-        </button>
+      <button className="google-login">
+        <span className="google-icon">G</span> Continue with Google
+      </button>
 
-        {error && <div className="error-message">🛈 {error}</div>}
+      {error && <div className="error-message">🛈 {error}</div>}
 
-        <form
-          onSubmit={isSignIn ? handleLogin : handleRegister}
-          className="auth-form"
-        >
-          {!isSignIn && (
-            <input
-              type="text"
-              value={userName}
-              placeholder="Username"
-              onChange={(e) => setUserName(e.target.value)}
-              required
-            />
-          )}
+      <form
+        onSubmit={isSignIn ? handleLogin : handleRegister}
+        className="auth-form"
+      >
+        {!isSignIn && (
           <input
-            type="email"
-            name="email"
-            value={email}
-            placeholder="Email"
-            onChange={(e) => setEmail(e.target.value)}
+            type="text"
+            value={userName}
+            placeholder="Username"
+            onChange={(e) => setUserName(e.target.value)}
             required
           />
-          <div className="password-container">
-            <input
-              name="password"
-              type={showPassword ? "text" : "password"}
-              value={password}
-              placeholder="Password"
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-            <button
-              type="button"
-              className="toggle-password"
-              onClick={() => setShowPassword(!showPassword)}
-            >
-              <EyeIcon isClosed={showPassword} />
-            </button>
-          </div>
-          {!isSignIn && (
-            <div className="policy-checkbox">
-              <input type="checkbox" name="" id="" required />
-              <div className="label">
-                I have read and agree to the terms of service
-              </div>
-            </div>
-          )}
-          <button type="submit" className="continue-button">
-            {isSignIn ? "Continue" : "Register"}
+        )}
+        <input
+          type="email"
+          name="email"
+          value={email}
+          placeholder="Email"
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <div className="password-container">
+          <input
+            name="password"
+            type={showPassword ? "text" : "password"}
+            value={password}
+            placeholder="Password"
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <button
+            type="button"
+            className="toggle-password"
+            onClick={() => setShowPassword(!showPassword)}
+          >
+            <EyeIcon isClosed={showPassword} />
           </button>
-        </form>
-        <p className="policy">
-          By signing up for, or logging into, an account, you agree to our{" "}
-          <span
-            className="link"
-            onClick={() => navigate("/privacy")}
-            style={{ cursor: "pointer" }}
-          >
-            privacy policy
-          </span>{" "}
-          &{" "}
-          <span
-            className="link"
-            onClick={() => navigate("/terms")}
-            style={{ cursor: "pointer" }}
-          >
-            terms of service
-          </span>{" "}
-          whether you read them or not. You can also find these terms on our
-          website.
-        </p>
-      </div>
-    </>
+        </div>
+        {!isSignIn && (
+          <div className="policy-checkbox">
+            <input type="checkbox" name="" id="" required />
+            <div className="label">
+              I have read and agree to the terms of service
+            </div>
+          </div>
+        )}
+        <button type="submit" className="continue-button">
+          {isSignIn ? "Continue" : "Register"}
+        </button>
+      </form>
+      <p className="policy">
+        By signing up for, or logging into, an account, you agree to our{" "}
+        <span
+          className="link"
+          onClick={() => navigate("/privacy")}
+          style={{ cursor: "pointer" }}
+        >
+          privacy policy
+        </span>{" "}
+        &{" "}
+        <span
+          className="link"
+          onClick={() => navigate("/terms")}
+          style={{ cursor: "pointer" }}
+        >
+          terms of service
+        </span>{" "}
+        whether you read them or not. You can also find these terms on our
+        website.
+      </p>
+    </div>
   );
 };
 
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss
index 24fe99a..6bb3d57 100644
--- a/app/src/styles/abstracts/variables.scss
+++ b/app/src/styles/abstracts/variables.scss
@@ -6,83 +6,69 @@
 
 // text colors
 // ---------- light mode ----------
-
-// $text-color: #2b3344;
-// $text-disabled: #b7b7c6;
-// $input-text-color: #595965;
-// $highlight-text-color: #6f42c1;
-
-// ---------- dark mode ----------
-
-// $text-color-dark: #f3f3fd;
-// $text-disabled-dark: #6f6f7a;
-// $input-text-color-dark: #b5b5c8;
-// $highlight-text-color-dark: #B392F0;
-
-// background colors
-// ---------- light mode ----------
-
-// $background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
-// $background-color-secondary: #FCFDFD4D;
-// $background-color-accent: #6f42c1;
-// $background-color-button: #6f42c1;
-// $background-color-drop-down: #6F42C14D;
-// $background-color-input: #FFFFFF4D;
-// $background-color-input-focus: #F2F2F7;
-// $background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
-// $background-color-selected: #E0DFFF;
-// $background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
-
-// ---------- dark mode ----------
-
-// $background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
-// $background-color-secondary-dark: #19191D99;
-// $background-color-accent-dark: #6f42c1;
-// $background-color-button-dark: #6f42c1;
-// $background-color-drop-down-dark: #50505080;
-// $background-color-input-dark: #FFFFFF33;
-// $background-color-input-focus-dark: #333333;
-// $background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
-// $background-color-selected-dark: #403E66;
-// $background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
-
-// border colors
-// ---------- light mode ----------
-
-// $border-color: #E0DFFF;
-// $border-color-accent: #6F42C1;
-
-// ---------- dark mode ----------
-// $border-color-dark: #564B69;
-// $border-color-accent-dark: #6F42C1;
-
-// highlight colors
-// ---------- light mode ----------
-
-// $highlight-accent-color: #e0dfff;
-// $highlight-secondary-color: #c4abf1;
-
-// ---------- dark mode ----------
-// $highlight-accent-color-dark: #403e6a;
-// $highlight-secondary-color-dark: #c4abf1;
-
-// colors
-// $color1: #A392CD;
-// $color2: #7b4cd3;
-// $color3: #B186FF;
-// $color4: #8752E8;
-// $color5: #C7A8FF;
-
-
-// old variables
 $text-color: #2b3344;
 $text-disabled: #b7b7c6;
 $input-text-color: #595965;
+$highlight-text-color: #6f42c1;
 
+// ---------- dark mode ----------
 $text-color-dark: #f3f3fd;
 $text-disabled-dark: #6f6f7a;
 $input-text-color-dark: #b5b5c8;
+$highlight-text-color-dark: #B392F0;
 
+// background colors
+// ---------- light mode ----------
+$background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
+$background-color-secondary: #FCFDFD4D;
+$background-color-accent: #6f42c1;
+$background-color-button: #6f42c1;
+$background-color-drop-down: #6F42C14D;
+$background-color-input: #FFFFFF4D;
+$background-color-input-focus: #F2F2F7;
+$background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
+$background-color-selected: #E0DFFF;
+$background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
+
+// ---------- dark mode ----------
+$background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
+$background-color-secondary-dark: #19191D99;
+$background-color-accent-dark: #6f42c1;
+$background-color-button-dark: #6f42c1;
+$background-color-drop-down-dark: #50505080;
+$background-color-input-dark: #FFFFFF33;
+$background-color-input-focus-dark: #333333;
+$background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
+$background-color-selected-dark: #403E66;
+$background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
+
+// border colors
+// ---------- light mode ----------
+$border-color: #E0DFFF;
+$border-color-accent: #6F42C1;
+
+// ---------- dark mode ----------
+$border-color-dark: #564B69;
+$border-color-accent-dark: #6F42C1;
+
+// highlight colors
+// ---------- light mode ----------
+$highlight-accent-color: #E0DFFF;
+$highlight-secondary-color: #6F42C1;
+
+// ---------- dark mode ----------
+$highlight-accent-color-dark: #403E6A;
+$highlight-secondary-color-dark: #C4ABF1;
+
+// colors
+$color1: #A392CD;
+$color2: #7b4cd3;
+$color3: #B186FF;
+$color4: #8752E8;
+$color5: #C7A8FF;
+
+
+// old variables
 $accent-color: #6f42c1;
 $accent-color-dark: #c4abf1;
 $highlight-accent-color: #e0dfff;
diff --git a/app/src/styles/base/global.scss b/app/src/styles/base/global.scss
index 9b4e1e8..3ba017e 100644
--- a/app/src/styles/base/global.scss
+++ b/app/src/styles/base/global.scss
@@ -1,3 +1,5 @@
-section{
-    
-}
\ No newline at end of file
+section, .section{
+    padding: 12px;
+    outline: 1px solid var(--border-color);
+    border-radius: 16px;
+}