diff --git a/ao3 webpages/components/Login.jsx b/ao3 webpages/components/Login.jsx
index 224b7c7..6bbf87b 100644
--- a/ao3 webpages/components/Login.jsx	
+++ b/ao3 webpages/components/Login.jsx	
@@ -1,62 +1,58 @@
-import React, { useState,useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import "../css/Login.css";
 
 export default function Login() {
   const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  
+  const [password, setPassword]
+    = useState('');
   const [message, setMessage] = useState('');
   const [messageType, setMessageType] = useState('');
+
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
   };
-  useEffect(() => {
+
+  useEffect(()=> {
     // Check for existing tokens in localStorage
     const accessToken = localStorage.getItem('accessToken');
     const refreshToken = localStorage.getItem('refreshToken');
+
     console.log('Checking tokens:', { accessToken, refreshToken });
+
     if (accessToken && refreshToken) {
-      // Redirect to recommendations page if tokens are found
-      // window.location.href = '/dashboard';
-    const checkAuth = async () => {
-      try {
-        const response = await fetch('https://ao3-chrome-extension-backend.onrender.com/auth/validate', {
+      // Validate tokens before redirecting
+      const checkAuth = async () => {
+        try {
+          const response = await fetch('https://ao3-chrome-extension-backend.onrender.com/auth/validate', {
             method: 'GET',
             headers: {
-                'Content-Type': 'application/json',
-                'Tokens': JSON.stringify({ accessToken, refreshToken }),
+              'Content-Type': 'application/json',
+              'Tokens': JSON.stringify({ accessToken, refreshToken }),
             },
-        });
+          });
 
-        if (response.ok) {
-           window.location.href = '/dashboard';
-        } else {
+          if (response.ok) {
+            window.location.href = '/dashboard';
+          } else {
             // Tokens are invalid
             console.log('Token validation failed:', response.status);
-           alert("Token validation failed");
+            alert('Token validation failed');
+          }
+        } catch (error) {
+          console.error('Error during token validation:', error);
         }
-    } catch (error) {
-        console.error('Error during token validation:', error);
-       
-    }
-    }
-    checkAuth();
+      };
+
+      checkAuth();
     }
-  }
-  , []);
-  const dispatchTokenEvent = (accessToken, refreshToken) => {
-    const event = new CustomEvent("AO3_SEND_TOKENS", {
-      
-      detail: { accessToken, refreshToken }
-      
-    });
-    window.dispatchEvent(event);
-  };
+  }, []);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
+  
     try {
       const response = await fetch('https://ao3-chrome-extension-backend.onrender.com/auth/login', {
         method: 'POST',
@@ -64,26 +60,28 @@ export default function Login() {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
         body: new URLSearchParams({
-          email: email,
-          password: password,
+          email,
+          password,
         }),
       });
-
+  
       const data = await response.json();
       console.log('Response:', response);
       console.log('Response data:', data);
-
+  
       if (response.ok) {
         // Store tokens in localStorage
         localStorage.setItem('accessToken', data.accessToken);
-        localStorage.setItem('refreshToken', data.refreshToken); 
-
-        // Dispatch event to send tokens to the extension
-        dispatchTokenEvent(data.accessToken, data.refreshToken);
-
+        localStorage.setItem('refreshToken', data.refreshToken);
+  
+        // Send token to Chrome extension
+        chrome.runtime.sendMessage("nnmmeljlhmhpnfphcpifdahblfmhlilm", { action: "storeToken", token: data.refreshToken }, function(response) {
+          console.log('Token sent to extension');
+        });
+  
         setMessage('Login successful');
         setMessageType('success');
-
+  
         setTimeout(() => {
           window.location.href = '/dashboard';
         }, 1500);
@@ -97,14 +95,15 @@ export default function Login() {
       setMessageType('error');
     }
   };
+  
 
 
 
-  return (
-    <div className="login-container">
-      <div className="login-left">
-        {/* Logo placeholder */}
-        {/* <div style={{ 
+return (
+  <div className="login-container">
+    <div className="login-left">
+      {/* Logo placeholder */}
+      {/* <div style={{ 
           position: 'absolute',
           top: '50%',
           left: '50%',
@@ -126,122 +125,122 @@ export default function Login() {
             transform: 'rotate(45deg)'
           }}></div>
         </div> */}
-        <img src="../images/login1.png" alt="" />
-      </div>
-      <div className="login-right">
-        <div className="login-form-container">
-          <div className="login-form">
-            <h1 style={{ color: '#1e3a8a', fontSize: '24px', marginBottom: '8px' }}>Welcome back!</h1>
-            <p style={{ color: '#4b5563', fontSize: '14px', marginBottom: '24px' }}>
-              Log in to access your personalized AO3 tools. Continue your fanfiction journey right where you left off.
-            </p>
-            
-            <h2 style={{ color: '#1e3a8a', fontSize: '18px', marginBottom: '16px' }}>LOGIN</h2>
-            
-            {message && (
-              <div className={`message ${messageType}`}>
-                {message}
-              </div>
-            )}
-            
-            <form onSubmit={handleSubmit}>
-              <div style={{ marginBottom: '16px' }}>
-                
-                <input 
-                
-                  type="email" 
-                  placeholder="Email" 
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                  style={{
-                    width: '100%',
-                    padding: '10px',
-                    border: '1px solid #d1d5db',
-                    borderRadius: '4px',
-                    fontSize: '14px'
-                  }}
-                />
-                
-              </div>
-              <div style={{ marginBottom: '16px', position: 'relative' }}>
-                <input 
-                  type={showPassword ? "text" : "password"}
-                  placeholder="Password" 
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                  style={{
-                    width: '100%',
-                    padding: '10px',
-                    paddingRight: '40px',
-                    border: '1px solid #d1d5db',
-                    borderRadius: '4px',
-                    fontSize: '14px'
-                  }}
-                />
-                <button 
-                  type="button" 
-                  onClick={togglePasswordVisibility}
-                  style={{
-                    position: 'absolute',
-                    right: '10px',
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                    background: 'none',
-                    border: 'none',
-                    cursor: 'pointer',
-                    padding: '0',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                  }}
-                >
-                  {showPassword ? (
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ width: '20px', height: '20px' }}>
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-                    </svg>
-                  ) : (
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ width: '20px', height: '20px' }}>
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                    </svg>
-                  )}
-                </button>
-              </div>
-              <div className="remember-forgot">
-                <label className="remember-me">
-                  <input type="checkbox" />
-                  Remember me
-                </label>
-                <a href="#" style={{ color: '#1e3a8a', fontSize: '14px', textDecoration: 'none' }}>Forgot Password?</a>
-              </div>
-              <button 
-                type="submit" 
-                onClick={handleSubmit}
+      <img src="../images/login1.png" alt="" />
+    </div>
+    <div className="login-right">
+      <div className="login-form-container">
+        <div className="login-form">
+          <h1 style={{ color: '#1e3a8a', fontSize: '24px', marginBottom: '8px' }}>Welcome back!</h1>
+          <p style={{ color: '#4b5563', fontSize: '14px', marginBottom: '24px' }}>
+            Log in to access your personalized AO3 tools. Continue your fanfiction journey right where you left off.
+          </p>
+
+          <h2 style={{ color: '#1e3a8a', fontSize: '18px', marginBottom: '16px' }}>LOGIN</h2>
+
+          {message && (
+            <div className={`message ${messageType}`}>
+              {message}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit}>
+            <div style={{ marginBottom: '16px' }}>
+
+              <input
+
+                type="email"
+                placeholder="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
                 style={{
                   width: '100%',
                   padding: '10px',
-                  backgroundColor: '#1e3a8a',
-                  color: 'white',
-                  border: 'none',
+                  border: '1px solid #d1d5db',
                   borderRadius: '4px',
-                  fontSize: '16px',
-                  cursor: 'pointer',
-                  marginTop: '50px'
+                  fontSize: '14px'
+                }}
+              />
 
+            </div>
+            <div style={{ marginBottom: '16px', position: 'relative' }}>
+              <input
+                type={showPassword ? "text" : "password"}
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                style={{
+                  width: '100%',
+                  padding: '10px',
+                  paddingRight: '40px',
+                  border: '1px solid #d1d5db',
+                  borderRadius: '4px',
+                  fontSize: '14px'
+                }}
+              />
+              <button
+                type="button"
+                onClick={togglePasswordVisibility}
+                style={{
+                  position: 'absolute',
+                  right: '10px',
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: '0',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center'
                 }}
               >
-                Log In
+                {showPassword ? (
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ width: '20px', height: '20px' }}>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                  </svg>
+                ) : (
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ width: '20px', height: '20px' }}>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                  </svg>
+                )}
               </button>
-            </form>
-            
-            <p style={{ textAlign: 'center', marginTop: '16px', fontSize: '14px', color: '#4b5563' }}>
-              Don't have an account? <a href="/signup" style={{ color: '#1e3a8a', textDecoration: 'none' }}>Signup</a>
-            </p>
-          </div>
+            </div>
+            <div className="remember-forgot">
+              <label className="remember-me">
+                <input type="checkbox" />
+                Remember me
+              </label>
+              <a href="#" style={{ color: '#1e3a8a', fontSize: '14px', textDecoration: 'none' }}>Forgot Password?</a>
+            </div>
+            <button
+              type="submit"
+              onClick={handleSubmit}
+              style={{
+                width: '100%',
+                padding: '10px',
+                backgroundColor: '#1e3a8a',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                fontSize: '16px',
+                cursor: 'pointer',
+                marginTop: '50px'
+
+              }}
+            >
+              Log In
+            </button>
+          </form>
+
+          <p style={{ textAlign: 'center', marginTop: '16px', fontSize: '14px', color: '#4b5563' }}>
+            Don't have an account? <a href="/signup" style={{ color: '#1e3a8a', textDecoration: 'none' }}>Signup</a>
+          </p>
         </div>
       </div>
     </div>
-  );
+  </div>
+);
 }
\ No newline at end of file