diff --git a/app/src/components/auth/auth.js b/app/src/components/auth/auth.js
index 8748fa3..68d937e 100644
--- a/app/src/components/auth/auth.js
+++ b/app/src/components/auth/auth.js
@@ -1,13 +1,11 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { onAuthStateChanged, signOut } from 'firebase/auth';
+import { onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';
 import { useRouter } from 'next/navigation';
 import { auth } from '../../../shared/firebase';
-import Login from './login/login';
-import Signup from './signup/signup';
-import Logout from './logout/logout';
 import styles from './auth.module.css';
+import { NEXT_PUBLIC_API_URL } from '../../../shared/api';
 
 const Auth = () => {
   const [user, setUser] = useState(null);
@@ -28,15 +26,122 @@ const Auth = () => {
     return () => unsubscribe();
   }, [router]);
 
-  const handleLogout = async () => {
-    try {
-      await signOut(auth);
-      setUser(null);
-      setShowLogin(true); // Reset to Login view
-      router.push('/auth'); // Redirect to auth page
-    } catch (error) {
-      console.error('Logout failed:', error.message);
-    }
+  const Login = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState(false);
+
+    const handleLogin = async (e) => {
+      e.preventDefault();
+      setError('');
+      setSuccess(false);
+
+      try {
+        const userCredential = await signInWithEmailAndPassword(auth, email, password);
+        console.log('User logged in:', userCredential.user);
+        setSuccess(true);
+      } catch (err) {
+        console.error('Error logging in:', err);
+        setError(err.message);
+      }
+    };
+
+    return (
+      <div>
+        <form className={styles.authForm} onSubmit={handleLogin}>
+          <label>Email:</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <label>Password:</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <button type="submit">Login</button>
+        </form>
+        {success && <p className={`${styles.authMessage} ${styles.success}`}>Login successful!</p>}
+        {error && <p className={`${styles.authMessage} ${styles.error}`}>{error}</p>}
+      </div>
+    );
+  };
+
+  const Signup = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState(false);
+
+    const handleSignup = async (e) => {
+      e.preventDefault();
+      setError('');
+      setSuccess(false);
+
+      try {
+        // Step 1: Send request to the API to sign up
+        const response = await fetch(`${NEXT_PUBLIC_API_URL}/auth/signup`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            email: email,
+            password: password,
+          }),
+        });
+
+        const data = await response.json();
+        console.log('API Response:', data);
+
+        if (!response.ok) {
+          setError(data.error || 'Failed to sign up in API');
+          return; // Exit if API call fails
+        }
+
+        // Step 2: If API call is successful, proceed with Firebase Authentication
+        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+        console.log('User signed up with Firebase:', userCredential.user);
+
+        setSuccess(true);
+        console.log('User created successfully:', userCredential.user);
+
+        // Only redirect after the user is signed up successfully
+        router.push('/dashboard'); // Redirect to dashboard after signup
+      } catch (err) {
+        console.error('Error signing up:', err);
+        setError(err.message || 'Something went wrong');
+      }
+    };
+
+    return (
+      <div>
+        <form className={styles.authForm} onSubmit={handleSignup}>
+          <label>Email:</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <label>Password:</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <button type="submit">Sign Up</button>
+        </form>
+        {success && <p className={`${styles.authMessage} ${styles.success}`}>Sign up successful!</p>}
+        {error && <p className={`${styles.authMessage} ${styles.error}`}>{error}</p>}
+      </div>
+    );
   };
 
   return (
@@ -44,17 +149,12 @@ const Auth = () => {
       {user ? (
         <div>
           <h2 className={styles.authHeader}>Welcome, {user.email}</h2>
-          <p className={styles.authMessage}>
-            You are already signed in.
-          </p>
+          <p className={styles.authMessage}>You are already signed in.</p>
           <br />
-          <Logout onLogout={handleLogout} />
         </div>
       ) : (
         <div>
-          <h2 className={styles.authHeader}>
-            {showLogin ? 'Login' : 'Signup'}
-          </h2>
+          <h2 className={styles.authHeader}>{showLogin ? 'Login' : 'Signup'}</h2>
           <div className={styles.toggleContainer}>
             <button
               className={`${styles.button} ${showLogin ? styles.active : ''}`}
diff --git a/app/src/components/auth/login/login.js b/app/src/components/auth/login/login.js
deleted file mode 100644
index db39321..0000000
--- a/app/src/components/auth/login/login.js
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { signInWithEmailAndPassword } from 'firebase/auth';
-import { auth } from '../../../../shared/firebase';
-import styles from '../auth.module.css';
-
-const Login = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState(false);
-
-  const handleLogin = async (e) => {
-    e.preventDefault();
-    setError('');
-    setSuccess(false);
-
-    try {
-      const userCredential = await signInWithEmailAndPassword(auth, email, password);
-      console.log('User logged in:', userCredential.user);
-      setSuccess(true);
-    } catch (err) {
-      console.error('Error logging in:', err);
-      setError(err.message);
-    }
-  };
-
-  return (
-    <div>
-      <form className={styles.authForm} onSubmit={handleLogin}>
-        <label>Email:</label>
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <label>Password:</label>
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          required
-        />
-        <button type="submit">Login</button>
-      </form>
-      {success && <p className={`${styles.authMessage} ${styles.success}`}>Login successful!</p>}
-      {error && <p className={`${styles.authMessage} ${styles.error}`}>{error}</p>}
-    </div>
-  );
-};
-
-export default Login;
diff --git a/app/src/components/auth/logout/logout.js b/app/src/components/auth/logout/logout.js
deleted file mode 100644
index a251dd4..0000000
--- a/app/src/components/auth/logout/logout.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { signOut } from 'firebase/auth';
-import { auth } from '../../../../shared/firebase';
-import styles from '../auth.module.css';
-
-const Logout = () => {
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState(false);
-
-  const handleLogout = async () => {
-    setError('');
-    setSuccess(false);
-
-    try {
-      await signOut(auth);
-      console.log('User logged out');
-      setSuccess(true);
-    } catch (err) {
-      console.error('Error logging out:', err);
-      setError(err.message);
-    }
-  };
-
-  return (
-    <div>
-      <form className={styles.authForm}>
-        <button onClick={handleLogout}>Logout</button>
-      </form>
-      {success && <p className={`${styles.authMessage} ${styles.success}`}>Logout successful!</p>}
-      {error && <p className={`${styles.authMessage} ${styles.error}`}>{error}</p>}
-    </div>
-  );
-};
-
-export default Logout;
\ No newline at end of file
diff --git a/app/src/components/auth/signup/signup.js b/app/src/components/auth/signup/signup.js
deleted file mode 100644
index d497dfa..0000000
--- a/app/src/components/auth/signup/signup.js
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { createUserWithEmailAndPassword } from 'firebase/auth';
-import { auth } from '../../../../shared/firebase';
-import styles from '../auth.module.css';
-import { useRouter } from 'next/navigation';
-import { NEXT_PUBLIC_API_URL } from '../../../../shared/api';
-
-const Signup = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState(false);
-  const router = useRouter();  // Use router for redirection
-
-  const handleSignup = async (e) => {
-    e.preventDefault();
-    setError('');
-    setSuccess(false);
-
-    try {
-      // Step 1: Send request to the API to sign up
-      const response = await fetch(`${NEXT_PUBLIC_API_URL}/auth/signup`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          email: email,
-          password: password,
-        }),
-      });
-
-      const data = await response.json();
-      console.log('API Response:', data);
-
-      if (!response.ok) {
-        setError(data.error || 'Failed to sign up in API');
-        return; // Exit if API call fails
-      }
-
-      // Step 2: If API call is successful, proceed with Firebase Authentication
-      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
-      console.log('User signed up with Firebase:', userCredential.user);
-
-      setSuccess(true);
-      console.log('User created successfully:', userCredential.user);
-
-      // Only redirect after the user is signed up successfully
-      router.push('/dashboard'); // Redirect to dashboard after signup
-    } catch (err) {
-      console.error('Error signing up:', err);
-      setError(err.message || 'Something went wrong');
-    }
-  };
-
-  return (
-    <div>
-      <form className={styles.authForm} onSubmit={handleSignup}>
-        <label>Email:</label>
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <label>Password:</label>
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          required
-        />
-        <button type="submit">Sign Up</button>
-      </form>
-      {success && <p className={`${styles.authMessage} ${styles.success}`}>Sign up successful!</p>}
-      {error && <p className={`${styles.authMessage} ${styles.error}`}>{error}</p>}
-    </div>
-  );
-};
-
-export default Signup;
diff --git a/app/src/components/dashboard/dashboard.js b/app/src/components/dashboard/dashboard.js
index 56d2b34..49d3aaf 100644
--- a/app/src/components/dashboard/dashboard.js
+++ b/app/src/components/dashboard/dashboard.js
@@ -4,7 +4,6 @@ import React, { useState, useEffect } from 'react';
 import { onAuthStateChanged, signOut } from 'firebase/auth';
 import { useRouter } from 'next/navigation';
 import { auth } from '../../../shared/firebase';
-import Logout from '../auth/logout/logout';
 import styles from './dashboard.module.css';
 
 const Dashboard = () => {
@@ -40,9 +39,16 @@ const Dashboard = () => {
         <div>
           <h2 className={styles.dashboardHeader}>Welcome to your Dashboard, {user.email}</h2>
           <div className={styles.dashboardContent}>
-            <p className={styles.dashboardMessage}>Here you can manage your account, settings, and more.</p>
+            <p className={styles.dashboardMessage}>
+              Here you can manage your account, settings, and more.
+            </p>
             <br />
-            <Logout onLogout={handleLogout} />
+            <button
+              className={styles.logoutButton}
+              onClick={handleLogout}
+            >
+              Logout
+            </button>
           </div>
         </div>
       ) : (
@@ -54,4 +60,4 @@ const Dashboard = () => {
   );
 };
 
-export default Dashboard;
\ No newline at end of file
+export default Dashboard;
diff --git a/app/src/components/dashboard/dashboard.module.css b/app/src/components/dashboard/dashboard.module.css
index 907c663..16e6996 100644
--- a/app/src/components/dashboard/dashboard.module.css
+++ b/app/src/components/dashboard/dashboard.module.css
@@ -1,153 +1,166 @@
-  .authContainer {
-
-    --primary-bg: #0d1117;
-    --primary-accent: #1f6feb;
-    --secondary-accent: #58a6ff;
-    --text-primary: #c9d1d9;
-    --text-secondary: #8b949e;
-    --error-color: #ff7b72;
-    --success-color: #56d364;
-    --button-hover: #30363d;
-
-    
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 20px auto;
-    padding: 20px;
-    max-width: 95%;
-    width: 400px;
-    background-color: var(--primary-bg);
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-    animation: fadeIn 0.5s ease-in-out;
-  }
-  
-  .authHeader {
-    font-size: 24px;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 20px;
-    text-align: center;
-  }
-  
-  .authMessage {
-    font-size: 16px;
-    color: var(--text-secondary);
-    margin-top: 15px;
-    text-align: center;
+/* General Container Styling */
+.dashboardContainer {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  /* Gradient background */
+  color: #f5f5f5;
+  /* Slightly lighter text for better contrast */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  animation: fadeIn 1s ease-in-out;
+  transition: all 0.3s ease;
+  text-align: center;
+  /* Ensures proper centering of text */
+}
+
+/* Header Styling */
+.dashboardHeader {
+  font-size: clamp(1.8rem, 4vw, 2.5rem);
+  font-weight: bold;
+  color: #64b5f6;
+  text-align: center;
+  margin-bottom: 20px;
+  animation: bounceIn 1s ease-out;
+}
+
+/* Content Styling */
+.dashboardContent {
+  background: rgba(28, 28, 28, 0.9);
+  margin: auto;
+  border: 1px solid #64b5f6;
+  border-radius: 15px;
+  padding: 20px;
+  width: 100%;
+  max-width: 700px;
+  text-align: center;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
+  animation: slideUp 0.8s ease-in-out;
+  backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dashboardMessage {
+  font-size: clamp(1rem, 2.5vw, 1.5rem);
+  margin-bottom: 20px;
+  color: #b0bec5;
+}
+
+/* Button Styling */
+.logoutButton {
+  padding: 15px 25px;
+  background: linear-gradient(135deg, #64b5f6, #42a5f5);
+  border: none;
+  border-radius: 12px;
+  font-size: clamp(0.9rem, 2vw, 1.2rem);
+  font-weight: 600;
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.logoutButton:hover {
+  background: linear-gradient(135deg, #42a5f5, #1e88e5);
+  transform: scale(1.1) rotate(-1deg);
+}
+
+.logoutButton:active {
+  transform: scale(0.95) rotate(1deg);
+}
+
+/* Loading State */
+.dashboardLoading {
+  font-size: clamp(1.2rem, 3vw, 1.8rem);
+  color: #e0e0e0;
+  text-align: center;
+  animation: pulse 1.5s infinite;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
   }
-  
-  .success {
-    color: var(--success-color);
+
+  to {
+    opacity: 1;
   }
-  
-  .error {
-    color: var(--error-color);
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
   }
-  
-  .authForm {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    width: 100%;
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
   }
-  
-  .authForm label {
-    font-size: 14px;
-    color: var(--text-secondary);
+}
+
+@keyframes bounceIn {
+
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
   }
-  
-  .authForm input {
-    padding: 10px;
-    font-size: 14px;
-    color: var(--text-primary);
-    background-color: #161b22;
-    border: 1px solid var(--primary-accent);
-    border-radius: 6px;
-    outline: none;
-    transition: all 0.3s ease-in-out;
+
+  40% {
+    transform: translateY(-15px);
   }
-  
-  .authForm input:focus {
-    border-color: var(--secondary-accent);
-    box-shadow: 0 0 4px var(--secondary-accent);
+
+  60% {
+    transform: translateY(-10px);
   }
-  
-  .authForm button {
-    padding: 12px 0;
-    font-size: 14px;
-    font-weight: 600;
-    color: #fff;
-    background-color: var(--primary-accent);
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.3s ease-in-out;
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 0.6;
   }
-  
-  .authForm button:hover {
-    background-color: var(--secondary-accent);
+
+  50% {
+    opacity: 1;
   }
-  
-  .toggleContainer {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: 15px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .dashboardContainer {
+    padding: 10px;
   }
-  
-  .button {
-    flex: 1;
-    padding: 10px 0;
-    margin: 0 5px;
-    font-size: 14px;
-    font-weight: 600;
-    text-align: center;
-    border: 1px solid var(--primary-accent);
-    border-radius: 6px;
-    background: transparent;
-    color: var(--primary-accent);
-    cursor: pointer;
-    transition: all 0.3s ease-in-out;
+
+  .dashboardContent {
+    padding: 15px;
+    margin: 10px;
   }
-  
-  .button:hover {
-    background-color: var(--button-hover);
-    color: var(--secondary-accent);
+
+  .dashboardMessage {
+    font-size: 1rem;
   }
-  
-  .active {
-    background-color: var(--primary-accent);
-    color: #fff;
-    border: none;
+
+  .logoutButton {
+    padding: 12px 18px;
   }
-  
-  @media (max-width: 768px) {
-    .authContainer {
-      width: 100%;
-      padding: 15px;
-    }
-  
-    .authHeader {
-      font-size: 20px;
-    }
-  
-    .button {
-      font-size: 13px;
-    }
+}
+
+@media (max-width: 480px) {
+  .dashboardHeader {
+    font-size: 1.5rem;
   }
-  
-  /* Animations */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+
+  .logoutButton {
+    padding: 10px 15px;
   }
-  
\ No newline at end of file
+}
\ No newline at end of file