diff --git a/cypress/e2e/home/home.cy.ts b/cypress/e2e/home/home.cy.ts
index 1a9848f..22426e3 100644
--- a/cypress/e2e/home/home.cy.ts
+++ b/cypress/e2e/home/home.cy.ts
@@ -2,6 +2,6 @@ describe('Home Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173');
 
-        cy.get('h1').should('contain', 'Home');
+        cy.contains('UserId:');
     });
 });
diff --git a/src/components/LoginPopup.tsx b/src/components/LoginPopup.tsx
index 6033abb..80a339c 100644
--- a/src/components/LoginPopup.tsx
+++ b/src/components/LoginPopup.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import '../css/login.css';
 
@@ -9,12 +10,14 @@ type Props = {
 
 export default function LoginPopup({ isOpen, onClose }: Props) {
     const { login, user } = useAuth();
+    const navigate = useNavigate();
 
     useEffect(() => {
         if (user && isOpen) {
             onClose();
+            navigate('/');
         }
-    }, [user, isOpen, onClose]);
+    }, [user, isOpen, onClose, navigate]);
 
     if (!isOpen) return null;
 
diff --git a/src/components/navbar/NavbarLink.tsx b/src/components/navbar/NavbarLink.tsx
index 7a4f920..47a1d5a 100644
--- a/src/components/navbar/NavbarLink.tsx
+++ b/src/components/navbar/NavbarLink.tsx
@@ -10,6 +10,10 @@ export default function NavbarLink({ label, nav }: NavbarLinkProps) {
     const navigate = useNavigate();
 
     const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+        if (location.pathname === nav) {
+            return;
+        }
+
         e.preventDefault();
 
         const content = document.querySelector('.app-content');
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
index e2eb7fb..3d2c507 100644
--- a/src/contexts/AuthContext.tsx
+++ b/src/contexts/AuthContext.tsx
@@ -35,6 +35,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
                 headers: {
                     Accept: 'application/json',
                 },
+                credentials: 'include',
             });
 
             if (response.ok) {
diff --git a/src/css/app-layout.css b/src/css/app-layout.css
index 979d6af..b15b87b 100644
--- a/src/css/app-layout.css
+++ b/src/css/app-layout.css
@@ -8,7 +8,6 @@
 
 .app-content {
     padding: 3rem;
-    width: 100%;
     position: relative;
     overflow: hidden;
     transition:
diff --git a/src/css/carousel.css b/src/css/carousel.css
index 7803865..5373094 100644
--- a/src/css/carousel.css
+++ b/src/css/carousel.css
@@ -11,7 +11,7 @@
 }
 
 .carousel {
-    width: 100%;
+    width: 72rem;
     background: var(--carousel-bg);
     height: 18rem;
     border-radius: 2rem;
diff --git a/src/css/home.css b/src/css/home.css
new file mode 100644
index 0000000..6e19381
--- /dev/null
+++ b/src/css/home.css
@@ -0,0 +1,13 @@
+.home-grid {
+    display: grid;
+    width: 50rem;
+    grid-template-columns: 24rem 24rem;
+    gap: 2rem;
+}
+
+.home-grid-panel {
+    height: 20rem;
+    background: #e8e8e8;
+    border-radius: 3rem;
+    padding: 2rem;
+}
diff --git a/src/css/login.css b/src/css/login.css
index 218bcfa..f6fbefa 100644
--- a/src/css/login.css
+++ b/src/css/login.css
@@ -1,3 +1,11 @@
+.register-btn {
+    color: var(--standard-bw-text);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 1rem;
+    border: 1px solid black;
+}
+
 .popup-overlay {
     position: fixed;
     inset: 0;
@@ -38,10 +46,6 @@
     font-size: 14px;
 }
 
-.popup-button:hover {
-    background-color: #f0f0f0;
-}
-
 .popup-close-x {
     position: absolute;
     top: 8px;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 7758cfa..f90ebae 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,8 +1,27 @@
+import { useState } from 'react';
+import LoginPopup from '../components/LoginPopup.tsx';
+import '../css/login.css';
+import '../css/home.css';
+import { useAuth } from '../contexts/AuthContext';
+
 export default function Home() {
+    const [showLogin, setShowLogin] = useState(false);
+    const { user } = useAuth();
     return (
         <>
-            <div>
-                <h1>Home</h1>
+            <div className="home-grid">
+                <div className="home-grid-panel">
+                    <a className="register-btn" onClick={() => setShowLogin(true)}>
+                        Register
+                    </a>
+                    <LoginPopup isOpen={showLogin} onClose={() => setShowLogin(false)} />
+                    <p style={{ color: 'black' }}>
+                        UserId: <span style={{ color: user?.id ? 'green' : 'red' }}>{user?.id ?? 'Not logged in'}</span>
+                    </p>
+                </div>
+                <div className="home-grid-panel"></div>
+                <div className="home-grid-panel"></div>
+                <div className="home-grid-panel"></div>
             </div>
         </>
     );
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
deleted file mode 100644
index 4f570fc..0000000
--- a/src/pages/Login.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Navigate, useLocation } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
-import { Shield, Sparkles } from 'lucide-react';
-
-const Login = () => {
-    const { user, login } = useAuth();
-    const location = useLocation();
-    const from = location.state?.from?.pathname || '/becapy';
-
-    if (user) {
-        return <Navigate to={from} replace />;
-    }
-
-    return (
-        <div
-            style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '100%',
-                height: '100vh',
-            }}
-        >
-            <div
-                className="glass-panel"
-                style={{
-                    padding: '3rem',
-                    maxWidth: '450px',
-                    width: '90%',
-                    textAlign: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '2rem',
-                    animation: 'fadeIn 0.8s ease-out',
-                }}
-            >
-                <div
-                    style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        gap: '1rem',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: 'var(--accent-primary)',
-                            padding: '1rem',
-                            borderRadius: '20px',
-                        }}
-                    >
-                        <Shield size={40} color="white" />
-                    </div>
-                    <h1 className="logo-text" style={{ fontSize: '2rem' }}>
-                        Be CAPY
-                    </h1>
-                </div>
-
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                    <button
-                        onClick={() => login}
-                        className="primary-button"
-                        style={{
-                            padding: '1rem',
-                            fontSize: '1.1rem',
-                            width: '100%',
-                            display: 'flex',
-                            gap: '1rem',
-                        }}
-                    >
-                        <img
-                            src="https://www.google.com/favicon.ico"
-                            alt="Google"
-                            style={{ width: '20px', height: '20px' }}
-                        />
-                        Continue with Google
-                    </button>
-                    <button
-                        onClick={() => login}
-                        className="primary-button"
-                        style={{
-                            padding: '1rem',
-                            fontSize: '1.1rem',
-                            width: '100%',
-                            display: 'flex',
-                            gap: '1rem',
-                        }}
-                    >
-                        <img
-                            src="https://www.google.com/favicon.ico"
-                            alt="Google"
-                            style={{ width: '20px', height: '20px' }}
-                        />
-                        Continue with Microsoft
-                    </button>
-
-                    <div
-                        style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '1rem',
-                            color: 'var(--text-secondary)',
-                            fontSize: '0.9rem',
-                        }}
-                    >
-                        <div style={{ flex: 1, height: '1px', background: 'var(--border-color)' }}></div>
-                        <span>SECURE ACCESS</span>
-                        <div style={{ flex: 1, height: '1px', background: 'var(--border-color)' }}></div>
-                    </div>
-                </div>
-
-                <div
-                    style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '0.5rem',
-                        justifyContent: 'center',
-                        color: 'var(--text-secondary)',
-                        fontSize: '0.85rem',
-                    }}
-                >
-                    <Sparkles size={14} className="text-accent" />
-                    <span>Interactive dashboard for RPI students</span>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default Login;
diff --git a/src/pages/Testing.tsx b/src/pages/Testing.tsx
index 5e1aaf1..630d762 100644
--- a/src/pages/Testing.tsx
+++ b/src/pages/Testing.tsx
@@ -1,17 +1,12 @@
-import { useState } from 'react';
 import DarkModeToggle from '../components/DarkModeToggle.tsx';
-import LoginPopup from '../components/LoginPopup.tsx';
 
 export default function Testing() {
-    const [showLogin, setShowLogin] = useState(false);
     return (
         <>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', color: 'black' }}>
                 <h1>[dev] Testing</h1>
                 <p>This page is for misc features that have been developed, but not placed.</p>
                 <DarkModeToggle />
-                <a onClick={() => setShowLogin(true)}>Register</a>
-                <LoginPopup isOpen={showLogin} onClose={() => setShowLogin(false)} />
             </div>
         </>
     );