diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1ec1d3d6..8fec7ba4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,34 +1,88 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 'use client';
 
-import React, { useEffect } from 'react';
-
-import Link from 'next/link';
-// import { fullFavItemTest } from '../api/supabase/queries/tests/user_test';
-
-export default function Checkout() {
-  // testFetchUserData();
-  // testAddUserAddress();
-  // testFetchOrderByUUID();
-  // testFetchOrders();
-  // testGetOrderById();
-  // testToggleOrderProgress();
-  // testFetchProducts();
-  // testFetchProductByName();
-  // testFetchPickupData();
-  // testFetchPickupTimesByUUID();
-  // testUpdateAllOrdersProgressToTrue();
-  // useEffect(() => {
-  //   async function testEverything() {
-  //     await arrayOfFavorites();
-  //   }
-  //   testEverything();
-  // });
+import { useState } from 'react';
+import Image from 'next/image';
+import supabase from '@/api/supabase/createClient';
+import { Body1, Heading1 } from '@/styles/fonts';
+
+import {
+  Fullscreen,
+  LoginBox,
+  LoginContent,
+  WelcomeSign,
+  Button,
+  ErrorMessage,
+  EyeOffIcon,
+  EyeIcon,
+} from './login/styles';
+import LoginForm from '@/components/LoginFormFolder/LoginForm';
+
+export default function App() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isError, setIsError] = useState<boolean>(false);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+
+  const handleLogin = async () => {
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    setErrorMessage('');
+
+    if (error) {
+      setErrorMessage('Incorrect email or password');
+      setIsError(true);
+    } else {
+      window.location.href = '/storefront';
+    }
+  };
 
   return (
-    <main>
-      <Link href="/login">Login</Link>
-    </main>
+    <Fullscreen>
+      <Image
+        src="/images/ShantiLogo.png"
+        alt="logo pic"
+        width={125}
+        height={65}
+        style={{
+          position: 'absolute',
+          top: '30px',
+          left: '30px',
+        }}
+      />
+      <LoginBox>
+        <LoginContent>
+          <WelcomeSign>
+            <Heading1>Welcome</Heading1>
+          </WelcomeSign>
+
+          <LoginForm
+            isError={isError}
+            changeUserName={setEmail}
+            changePassword={setPassword}
+            showPassword={showPassword}
+          />
+          {showPassword ? (
+            <EyeIcon
+              onClick={() => setShowPassword(false)}
+              style={{ cursor: 'pointer' }}
+            />
+          ) : (
+            <EyeOffIcon
+              onClick={() => setShowPassword(true)}
+              style={{ cursor: 'pointer' }}
+            />
+          )}
+
+          {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+          <Button style={{ cursor: 'pointer' }} onClick={handleLogin}>
+            <Body1>Log In</Body1>
+          </Button>
+        </LoginContent>
+      </LoginBox>
+    </Fullscreen>
   );
 }