diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 259360815..7fcfab372 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3,6 +3,8 @@ import './assets/css/main.css';
 import Footer from './layout/Footer';
 import Navbar from './layout/NavBar';
 import Home from './pages/Home';
+import Login from './pages/Login';
+import Profile from './pages/Profile';
 
 const router = createBrowserRouter([
   {
@@ -16,10 +18,8 @@ const router = createBrowserRouter([
     ),
     children: [
       { path: '/', element: <Home /> },
-      // { path: '/profile', element: <Profile /> },
-      // { path: '/transfer', element: <Transfer /> },
-      // { path: '/deposit', element: <Deposit /> },
-      // { path: '/withdraw', element: <Withdraw /> },
+      { path: '/login', element: <Login /> },
+      { path: '/profile', element: <Profile /> },
       // { path: '/transactions', element: <Transactions /> },
     ],
   },
diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css
index 47ee63267..7c08d53aa 100644
--- a/frontend/src/assets/css/main.css
+++ b/frontend/src/assets/css/main.css
@@ -8,6 +8,9 @@ html {
 
 body {
   margin: 0;
+}
+
+#root {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
diff --git a/frontend/src/components/FeatureItem.jsx b/frontend/src/components/FeatureItem.jsx
index c3b8b09b2..902e51a9f 100644
--- a/frontend/src/components/FeatureItem.jsx
+++ b/frontend/src/components/FeatureItem.jsx
@@ -1,19 +1,19 @@
 import PropTypes from 'prop-types';
 
-FeatureItem.propTypes = {
-    icon: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    children: PropTypes.string.isRequired
-}
+const FeatureItem = ({ icon, title, children }) => {
+  return (
+    <div className='feature-item'>
+      <img src={icon} alt='Feature Icon' className='feature-icon' />
+      <h3 className='feature-item-title'>{title}</h3>
+      <p>{children}</p>
+    </div>
+  );
+};
 
-const FeatureItem = ({icon, title, children}) => {
-    return (
-        <div className='feature-item'>
-            <img src={icon} alt='Feature Icon' className='feature-icon' />
-            <h3 className='feature-item-title'>{title}</h3>
-            <p>{children}</p>
-        </div>
-    );
-}
+FeatureItem.propTypes = {
+  icon: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  children: PropTypes.string.isRequired,
+};
 
-export default FeatureItem;
\ No newline at end of file
+export default FeatureItem;
diff --git a/frontend/src/layout/NavBar.jsx b/frontend/src/layout/NavBar.jsx
index 15a608e5c..b6ac8afda 100644
--- a/frontend/src/layout/NavBar.jsx
+++ b/frontend/src/layout/NavBar.jsx
@@ -1,22 +1,22 @@
+import { NavLink } from 'react-router-dom';
 import argBankLogo from '../assets/img/argentBankLogo.png';
 
 const Navbar = () => {
   return (
     <nav className='main-nav'>
-      <a className='main-nav-logo' href='./index.html'>
+      <NavLink className='main-nav-logo' to='/'>
         <img
           className='main-nav-logo-image'
           src={argBankLogo}
           alt='Argent Bank Logo'
         />
         <h1 className='sr-only'>Argent Bank</h1>
-      </a>
+      </NavLink>
       <div>
-        <a className='main-nav-item' href='./sign-in.html'>
-           
+        <NavLink className='main-nav-item' to='/login'>
           <i className='fa fa-user-circle'></i>
           Sign In
-        </a>
+        </NavLink>
       </div>
     </nav>
   );
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 116e07327..97a52bce9 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -5,36 +5,39 @@ import FeatureItem from '../components/FeatureItem';
 import Banner from '../components/Banner';
 
 const Home = () => {
-    const featureItems = [
-        {
-            icon: iconChat,
-            title: 'You are our #1 priority',
-            description: 'Need to talk to a representative? You can get in touch through our 24/7 chat or through a phone call in less than 5 minutes.',
-        },
-        {
-            icon: iconMoney,
-            title: 'More savings means higher rates',
-            description: 'The more you save with us, the higher your interest rate will be!',
-        },
-        {
-            icon: iconSecurity,
-            title: 'Security you can trust',
-            description: 'We use top of the line encryption to make sure your data and money is always safe.',
-        },
-    ];
+  const featureItems = [
+    {
+      icon: iconChat,
+      title: 'You are our #1 priority',
+      description:
+        'Need to talk to a representative? You can get in touch through our 24/7 chat or through a phone call in less than 5 minutes.',
+    },
+    {
+      icon: iconMoney,
+      title: 'More savings means higher rates',
+      description:
+        'The more you save with us, the higher your interest rate will be!',
+    },
+    {
+      icon: iconSecurity,
+      title: 'Security you can trust',
+      description:
+        'We use top of the line encryption to make sure your data and money is always safe.',
+    },
+  ];
 
-    return (
-        <main>
-            <Banner />
-            <section className='features'>
-                {featureItems.map((item, index) => (
-                    <FeatureItem key={index} icon={item.icon} title={item.title}>
-                        {item.description}
-                    </FeatureItem>
-                ))}
-            </section>
-        </main>
-    );
+  return (
+    <main>
+      <Banner />
+      <section className='features'>
+        {featureItems.map((item, index) => (
+          <FeatureItem key={index} icon={item.icon} title={item.title}>
+            {item.description}
+          </FeatureItem>
+        ))}
+      </section>
+    </main>
+  );
 };
 
 export default Home;
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
new file mode 100644
index 000000000..3f94114f6
--- /dev/null
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const Login = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const response = await fetch('http://localhost:3001/api/v1/user/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password }),
+    });
+
+    const data = await response.json();
+
+    if (response.ok) {
+      localStorage.setItem('token', data.body.token);
+      console.log(data.message);
+      navigate('/profile');
+    } else {
+      window.alert(data.message);
+    }
+  };
+
+  return (
+    <main className='main bg-dark'>
+      <section className='sign-in-content'>
+        <i className='fa fa-user-circle sign-in-icon'></i>
+        <h1>Sign In</h1>
+        <form onSubmit={handleSubmit}>
+          <div className='input-wrapper'>
+            <label htmlFor='username'>Username</label>
+            <input
+              type='email'
+              id='username'
+              placeholder='Email'
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <div className='input-wrapper'>
+            <label htmlFor='password'>Password</label>
+            <input
+              type='password'
+              id='password'
+              placeholder='Password'
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+          <div className='input-remember'>
+            <input type='checkbox' id='remember-me' />
+            <label htmlFor='remember-me'>Remember me</label>
+          </div>
+          <button className='sign-in-button'>Sign In</button>
+        </form>
+      </section>
+    </main>
+  );
+};
+
+export default Login;
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
new file mode 100644
index 000000000..3157e0416
--- /dev/null
+++ b/frontend/src/pages/Profile.jsx
@@ -0,0 +1,48 @@
+const Profile = () => {
+  // const { user } = useAuth();
+  return (
+    <main className='main bg-dark'>
+      <div className='header'>
+        <h1>
+          Welcome back
+          <br />
+          Tony Jarvis!
+        </h1>
+        <button className='edit-button'>Edit Name</button>
+      </div>
+      <h2 className='sr-only'>Accounts</h2>
+      <section className='account'>
+        <div className='account-content-wrapper'>
+          <h3 className='account-title'>Argent Bank Checking (x8349)</h3>
+          <p className='account-amount'>$2,082.79</p>
+          <p className='account-amount-description'>Available Balance</p>
+        </div>
+        <div className='account-content-wrapper cta'>
+          <button className='transaction-button'>View transactions</button>
+        </div>
+      </section>
+      <section className='account'>
+        <div className='account-content-wrapper'>
+          <h3 className='account-title'>Argent Bank Savings (x6712)</h3>
+          <p className='account-amount'>$10,928.42</p>
+          <p className='account-amount-description'>Available Balance</p>
+        </div>
+        <div className='account-content-wrapper cta'>
+          <button className='transaction-button'>View transactions</button>
+        </div>
+      </section>
+      <section className='account'>
+        <div className='account-content-wrapper'>
+          <h3 className='account-title'>Argent Bank Credit Card (x8349)</h3>
+          <p className='account-amount'>$184.30</p>
+          <p className='account-amount-description'>Current Balance</p>
+        </div>
+        <div className='account-content-wrapper cta'>
+          <button className='transaction-button'>View transactions</button>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default Profile;
\ No newline at end of file