diff --git a/src/app/[productId]/Buttons.tsx b/src/app/[productId]/Buttons.tsx
index 80bea55a..3cfe8355 100644
--- a/src/app/[productId]/Buttons.tsx
+++ b/src/app/[productId]/Buttons.tsx
@@ -26,7 +26,11 @@ export default function Buttons(props: { productNumber: number }) {
   // used hyphen instead of dash for display
   const changeCart = () => {
     addToCart(productNumber, quantity);
-    toast(`you have added ${quantity} items to the cart!`);
+    if (quantity <= 1) {
+      toast(`you have added ${quantity} item to the cart!`);
+    } else {
+      toast(`you have added ${quantity} items to the cart!`);
+    }
   };
 
   return (
diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
index 375d5f11..8d461e89 100644
--- a/src/app/cart/cartItem.tsx
+++ b/src/app/cart/cartItem.tsx
@@ -9,6 +9,7 @@ import {
   TransparentButton,
   LabelBox,
   ImageBackground,
+  CategorySpacing,
 } from './styles';
 
 import Buttons from './Buttons';
@@ -46,7 +47,9 @@ export default function CartItem(props: {
       </ImageBackground>
       <LabelBox>
         <Heading4Bold>{cartItemProduct.name}</Heading4Bold>
-        <Body2>Category: {cartItemProduct.category}</Body2>
+        <CategorySpacing>
+          <Body2>Category: {cartItemProduct.category}</Body2>
+        </CategorySpacing>
       </LabelBox>
       <Buttons
         productNumber={cartItemProduct.id}
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index 55db4d97..21be107b 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -21,6 +21,7 @@ import {
   LeftColumnDiv,
   RightColumnDiv,
   ContentDiv,
+  OrderSumSectionSpacing,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -73,14 +74,16 @@ export default function OrderPage() {
           </CartItemsDiv>
         </LeftColumnDiv>
         <RightColumnDiv>
-          <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-          <CheckoutButton
-            // change this function so that the flow makes sense and that there is items within the cart
-            onClick={() => checkDelivery()}
-            disabled={numberOfItems === 0}
-          >
-            Check Out
-          </CheckoutButton>
+          <OrderSumSectionSpacing>
+            <OrderSummary cart={cart} numberOfItems={numberOfItems} />
+            <CheckoutButton
+              // change this function so that the flow makes sense and that there is items within the cart
+              onClick={() => checkDelivery()}
+              disabled={numberOfItems === 0}
+            >
+              Check Out
+            </CheckoutButton>
+          </OrderSumSectionSpacing>
         </RightColumnDiv>
       </ContentDiv>
     </PageDiv>
diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
index b9cee91a..ee956f99 100644
--- a/src/app/cart/styles.tsx
+++ b/src/app/cart/styles.tsx
@@ -11,9 +11,6 @@ export const FavoriteDiv = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  max-width: 750px;
-  width: 100%;
 `;
 
 export const ImageBackground = styled.div`
@@ -30,7 +27,6 @@ export const CartItemsDiv = styled.div`
   flex-direction: column;
   align-items: center;
   border-radius: 10px;
-  width: 750px;
   overflow: auto;
   gap: 32px;
   margin-top: 20px;
@@ -65,8 +61,9 @@ export const Backtext = styled.p`
 export const TrashIcon = styled(Trash2)`
   width: 30px;
   height: 30px;
-  color: black;
+  color: navy;
   margin-right: 30px;
+  margin-left: 50px;
   margin-top: 28px;
 `;
 
@@ -77,7 +74,7 @@ export const FooterMoved = styled(Footer)`
 export const TransparentButton = styled.button`
   background-color: transparent;
   border: transparent;
-  padding-left: 40px;
+  margin-left: 40px;
   margin-bottom: 25px;
 `;
 
@@ -102,10 +99,13 @@ export const QuantityButton = styled.div`
   width: 165px;
   height: 50px;
   border-radius: 8px;
+  font-size: 18px;
+  font-weight: bold;
   background-color: ${COLORS.white};
   border: 2px solid ${COLORS.navy};
   color: ${COLORS.navy};
   cursor: pointer;
+  margin-left: 200px;
 `;
 
 export const PlusMinusButton = styled.button`
@@ -125,13 +125,13 @@ export const Label = styled.p`
 
 export const LabelBox = styled.div`
   width: 150px;
+  margin-left: 50px;
 `;
 
 export const ContentDiv = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  gap: 100px;
   padding-left: 50px;
   background-color: ${COLORS.offWhite};
 `;
@@ -373,3 +373,11 @@ export const CheckoutButton = styled.button`
     background: #0e2351;
   }
 `;
+
+export const CategorySpacing = styled.div`
+  margin-top: 15px;
+`;
+
+export const OrderSumSectionSpacing = styled.div`
+  margin-left: 135px;
+`;
diff --git a/src/app/orderConfirmationDelivery/page.tsx b/src/app/orderConfirmationDelivery/page.tsx
index 2d2f902d..c82042cb 100644
--- a/src/app/orderConfirmationDelivery/page.tsx
+++ b/src/app/orderConfirmationDelivery/page.tsx
@@ -30,6 +30,7 @@ import {
 
 import { Product, User, Address } from '../../schema/schema';
 import { Body1Bold } from '../orderPage/styles';
+import { BackButtonDiv } from '../orderConfirmationPickUp/styles';
 
 export default function OrderConfirmationDelivery() {
   const [Cart, setCart] = useState<Product[]>([]);
@@ -62,6 +63,9 @@ export default function OrderConfirmationDelivery() {
       <NavBar />
       <CenterDiv>
         <PageDiv>
+          <BackButtonDiv>
+            <BackButton destination="./storefront" />
+          </BackButtonDiv>
           <BottomColumnDiv>
             <LeftColumnDiv>
               <BackButton destination="./storefront" />
@@ -81,8 +85,25 @@ export default function OrderConfirmationDelivery() {
                         }}
                       />
                       <LabelBox>
-                        <Body1Bold>{cartItem.name}</Body1Bold>
-                        <Body2Light>Category: {cartItem.category}</Body2Light>
+                        <div>
+                          <span
+                            style={{
+                              display: 'inline-block',
+                              fontWeight: 'bold',
+                              marginRight: '4px',
+                            }}
+                          >
+                            Quantity:
+                          </span>
+                          <span
+                            style={{
+                              display: 'inline-block',
+                              fontSize: '16px',
+                            }}
+                          >
+                            {cartItem.quantity}
+                          </span>
+                        </div>
                       </LabelBox>
                     </FavoriteDiv>
                   ))}
diff --git a/src/app/orderConfirmationPickUp/page.tsx b/src/app/orderConfirmationPickUp/page.tsx
index 871a0e1e..c9b612ce 100644
--- a/src/app/orderConfirmationPickUp/page.tsx
+++ b/src/app/orderConfirmationPickUp/page.tsx
@@ -95,7 +95,6 @@ export default function OrderConfirmationPickUp() {
               <TextDiv>
                 <Heading3Bold>Your order has been submitted</Heading3Bold>
               </TextDiv>
-
               <OutterFavoriteDiv>
                 <TextDiv1>
                   <Heading4Bold>Order No. {orderIDFromSearch}</Heading4Bold>
@@ -116,10 +115,30 @@ export default function OrderConfirmationPickUp() {
                       <LabelBox1>
                         <Body1Bold>{cartItem.name}</Body1Bold>
                         <br />
-                        <Body2Light>Category: {cartItem.category}</Body2Light>
+                        <Body2Light style={{ marginTop: '-10px' }}>
+                          Category: {cartItem.category}
+                        </Body2Light>
                       </LabelBox1>
                       <LabelBox>
-                        <Body1Bold>Quantity: {cartItem.quantity}</Body1Bold>
+                        <div>
+                          <span
+                            style={{
+                              display: 'inline-block',
+                              fontWeight: 'bold',
+                              marginRight: '4px',
+                            }}
+                          >
+                            Quantity:
+                          </span>
+                          <span
+                            style={{
+                              display: 'inline-block',
+                              fontSize: '16px',
+                            }}
+                          >
+                            {cartItem.quantity}
+                          </span>
+                        </div>
                       </LabelBox>
                     </FavoriteDiv>
                   ))}
@@ -128,7 +147,7 @@ export default function OrderConfirmationPickUp() {
             </LeftColumnDiv>
             <RightColumnDiv>
               <ShippingDetailsDiv>
-                <Heading3Bold>Delivery Information</Heading3Bold>
+                <Heading3Bold>Pickup Information</Heading3Bold>
                 <DetailsHeader>Time Slot</DetailsHeader>
                 <Body1>{organizePickupTime()} (10:00 am - 12:30 pm)</Body1>
                 <DetailsHeader>Location</DetailsHeader>
diff --git a/src/app/orderConfirmationPickUp/styles.ts b/src/app/orderConfirmationPickUp/styles.ts
index d142d103..4f2e25a8 100644
--- a/src/app/orderConfirmationPickUp/styles.ts
+++ b/src/app/orderConfirmationPickUp/styles.ts
@@ -242,7 +242,7 @@ export const BackButtonDiv = styled.div`
   text-align: left;
   width: 800px;
   margin-left: 80px;
-  margin-bottom: 40px;
+  margin-top: 40px;
 `;
 
 export const WhiteBackgroundDiv = styled.div`
@@ -302,7 +302,7 @@ export const ShippingDetailsDiv = styled.div`
   padding: 36px 34px;
   gap: 33px;
   max-height: 100%;
-  margin-top: 93px;
+  margin-top: 205px;
   margin-bottom: 30px;
   margin-right: 40px;
 `;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1ec1d3d6..ad5ea152 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 LoginForm from '@/components/LoginFormFolder/LoginForm';
+
+import {
+  Fullscreen,
+  LoginBox,
+  LoginContent,
+  WelcomeSign,
+  Button,
+  ErrorMessage,
+  EyeOffIcon,
+  EyeIcon,
+} from './login/styles';
+
+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>
   );
 }
diff --git a/src/components/NavBarFolder/styles.ts b/src/components/NavBarFolder/styles.ts
index fe42f4de..f96c286f 100644
--- a/src/components/NavBarFolder/styles.ts
+++ b/src/components/NavBarFolder/styles.ts
@@ -10,8 +10,8 @@ export const CartTotalCircle = styled.div<{ $isZero?: boolean }>`
   height: 24px;
   border-radius: 50%;
   position: absolute;
-  top: -12px;
-  right: -12px;
+  top: -13px;
+  right: -13px;
   display: flex;
   justify-content: center;
   align-items: center;