diff --git a/src/app/cart/Buttons.tsx b/src/app/cart/Buttons.tsx
index b83ee081..fccc9a8f 100644
--- a/src/app/cart/Buttons.tsx
+++ b/src/app/cart/Buttons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ButtonsWrapper, QuantityButton, PlusMinusButton } from './styles';
+import {   QuantityButton, PlusMinusButton } from './styles';
 
 import {
   decreaseFromCart,
@@ -53,7 +53,7 @@ export default function Buttons(props: {
   // used hyphen instead of dash for display
 
   return (
-    <ButtonsWrapper>
+    
       <QuantityButton>
         <PlusMinusButton
           type="button"
@@ -71,6 +71,6 @@ export default function Buttons(props: {
           +
         </PlusMinusButton>
       </QuantityButton>
-    </ButtonsWrapper>
+   
   );
 }
diff --git a/src/app/cart/cartItem.tsx b/src/app/cart/cartItem.tsx
index b314023e..f0970f5c 100644
--- a/src/app/cart/cartItem.tsx
+++ b/src/app/cart/cartItem.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { removeCartItem } from '../../api/supabase/queries/cart_queries';
-
+import { Body2,Body2Light,Heading4Bold } from '@/styles/fonts';
 import {
   FavoriteDiv,
   TrashIcon,
@@ -10,6 +10,7 @@ import {
   Label,
   LabelBox,
   ImageDiv,
+  ImageBackground,
 } from './styles';
 
 import Buttons from './Buttons';
@@ -37,33 +38,31 @@ export default function CartItem(props: {
   }
 
   return (
-    <div>
-      <FavoriteDiv key={cartItemProduct.id}>
-        <ImageDiv>
-          <img
-            src={cartItemProduct.photo}
-            alt={cartItemProduct.name}
-            style={{ width: '130px', height: '130px', padding: '20px' }}
-          />
-        </ImageDiv>
-        <LabelBox>
-          <Label>{cartItemProduct.name}</Label>
-          <p>Category: {cartItemProduct.category}</p>
-        </LabelBox>
-        <Buttons
-          productNumber={cartItemProduct.id}
-          quantity={cartItemProduct.quantity}
-          setNumberOfItems={setNumberOfItems}
-          numberOfItems={numberOfItems}
-          count={count}
-          setCount={setCount}
-          setCart={setCart}
-          cart={cart}
+    <FavoriteDiv key={cartItemProduct.id}>
+      <ImageBackground>
+        <img
+          src={cartItemProduct.photo}
+          alt={cartItemProduct.name}
+          style={{ width: '150px', height: '150px', objectFit: 'cover' }}
         />
-        <TransparentButton onClick={() => removeProduct()}>
-          <TrashIcon style={{ cursor: 'pointer' }} />
-        </TransparentButton>
-      </FavoriteDiv>
-    </div>
+      </ImageBackground>
+      <LabelBox>
+        <Heading4Bold>{cartItemProduct.name}</Heading4Bold>
+        <Body2>Category: {cartItemProduct.category}</Body2>
+      </LabelBox>
+      <Buttons
+        productNumber={cartItemProduct.id}
+        quantity={cartItemProduct.quantity}
+        setNumberOfItems={setNumberOfItems}
+        numberOfItems={numberOfItems}
+        count={count}
+        setCount={setCount}
+        setCart={setCart}
+        cart={cart}
+      />
+      <TransparentButton onClick={() => removeProduct()}>
+        <TrashIcon style={{ cursor: 'pointer' }} />
+      </TransparentButton>
+    </FavoriteDiv>
   );
 }
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index ae188ffc..66b96ba0 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { fetchUser } from '@/api/supabase/queries/user_queries';
 import BackButton from '../../components/BackButton/BackButton';
-import { Heading1 } from '../../styles/fonts';
+import { Heading1 } from '@/styles/fonts';
 
 import OrderSummary from '../../components/OrderSummaryFolder/OrderSummary';
 
@@ -21,6 +21,12 @@ import {
   BackButtonDiv,
   InformationContainer,
   OutterDiv,
+  CartItemsDiv,
+  PageDiv,
+  CheckoutButton,
+  LeftColumnDiv,
+  RightColumnDiv,
+  ContentDiv,
 } from './styles';
 
 import { ProductWithQuantity } from '../../schema/schema';
@@ -52,30 +58,37 @@ export default function OrderPage() {
   return (
     <div>
       <NavBar />
-      <OutterDiv>
-        <BackButtonDiv>
-          <BackButton destination="/storefront" />
-        </BackButtonDiv>
-        <DeliveryContainer>
-          <InformationContainer>
-            <Heading1 style={{ marginBottom: '38px' }}>Cart</Heading1>
-            {cart.map(cartItem => (
-              <CartItem
-                key={cartItem.id}
-                cartItemProduct={cartItem}
-                setCart={setCart}
-                cart={cart}
-                setNumberOfItems={setNumberOfItems}
-                numberOfItems={numberOfItems}
-              />
-            ))}
-          </InformationContainer>
-          <OrderContainer>
+
+      <PageDiv>
+        <BackButton destination="./storefront" />
+        <ContentDiv>
+          <LeftColumnDiv>
+            <Heading1>Cart</Heading1>
+            <CartItemsDiv>
+              {cart.map(cartItem => (
+                <CartItem
+                  key={cartItem.id}
+                  cartItemProduct={cartItem}
+                  setCart={setCart}
+                  cart={cart}
+                  setNumberOfItems={setNumberOfItems}
+                  numberOfItems={numberOfItems}
+                />
+              ))}
+            </CartItemsDiv>
+          </LeftColumnDiv>
+          <RightColumnDiv>
             <OrderSummary cart={cart} numberOfItems={numberOfItems} />
-            <OrderButton onClick={() => checkDelivery()}>Check Out</OrderButton>
-          </OrderContainer>
-        </DeliveryContainer>
-      </OutterDiv>
+            <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>
+          </RightColumnDiv>
+        </ContentDiv>
+      </PageDiv>
     </div>
   );
 }
diff --git a/src/app/cart/styles.tsx b/src/app/cart/styles.tsx
index 9598dbd4..9df4f0a9 100644
--- a/src/app/cart/styles.tsx
+++ b/src/app/cart/styles.tsx
@@ -10,15 +10,35 @@ import Footer from '../../components/FooterFolder/Footer';
 export const FavoriteDiv = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: start;
-  justify-content: space-around;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 750px;
   width: 100%;
-  margin-bottom: 50px;
-  margin-top: 30px;
+`;
+
+export const ImageBackground = styled.div`
+  width: 200px;
+  height: 200px;
+  background-color: ${COLORS.lightGrey};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const CartItemsDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  width: 750px;
+  overflow: auto;
+  gap: 32px;
 `;
 
 export const ImageDiv = styled.div`
-  width: 130px;
+  width: 30px;
+  height: 30px;
+  color: ${COLORS.black};
 `;
 
 export const BackDiv = styled.button`
@@ -49,12 +69,6 @@ export const TrashIcon = styled(Trash2)`
   margin-top: 28px;
 `;
 
-export const NavBarZeroIndex = styled(NavBar)`
-  z-index: 0;
-  position: fixed;
-  margin-bottom: 100px;
-`;
-
 export const FooterMoved = styled(Footer)`
   transform: translateY(300px);
 `;
@@ -63,6 +77,7 @@ export const TransparentButton = styled.button`
   background-color: transparent;
   border: transparent;
   padding-left: 40px;
+  margin-bottom: 25px;
 `;
 
 export const NavBarMovedUP = styled(NavBar)`
@@ -89,6 +104,7 @@ export const QuantityButton = styled.div`
   background-color: ${COLORS.white};
   border: 2px solid ${COLORS.navy};
   color: ${COLORS.navy};
+  cursor: pointer;
 `;
 
 export const PlusMinusButton = styled.button`
@@ -108,17 +124,13 @@ export const Label = styled.p`
 
 export const LabelBox = styled.div`
   width: 150px;
-  height: 100%;
-  padding-left: 40px;
-  padding-right: 40px;
 `;
 
-export const PageDiv1 = styled.div`
+export const ContentDiv = styled.div`
   display: flex;
   flex-direction: row;
-  min-height: 100%; /*or 100vh */
-  flex-wrap: wrap;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  gap: 32px;
 `;
 
 export const BackButtonDiv1 = styled.div`
@@ -145,7 +157,7 @@ export const Wrapper = styled.div`
 `;
 
 export const OrderSummaryDiv = styled.div`
-  overflow: scroll;
+  overflow: auto;
   width: 350px;
   height: 300px;
   padding: 20px;
@@ -172,7 +184,7 @@ export const OrderTotalDiv = styled.div`
 export const LeftColumnDiv1 = styled.div`
   display: flex;
   flex-flow: column;
-  margin-left: 50px;
+  gap: 16px;
 `;
 
 export const CheckoutButton1 = styled.button`
@@ -201,8 +213,6 @@ export const Qty = styled.p`
 export const RightColumnDiv1 = styled.div`
   display: flex;
   flex-flow: column;
-  margin-left: 200px;
-  margin-top: 100px;
 `;
 
 export const WhiteBackgroundDiv = styled.div`
@@ -232,11 +242,12 @@ export const PShiftLeft = styled.p`
 `;
 
 export const PageDiv = styled.div`
+  height: 100%;
   display: flex;
-  flex-direction: col;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  padding: 20px;
+  flex-direction: column;
+  padding: 32px;
+  gap: 32px;
+  background-color: ${COLORS.offWhite};
 `;
 
 export const LeftColumnDiv = styled.div`
@@ -343,6 +354,7 @@ export const BackButtonDiv = styled.div`
 `;
 
 export const CheckoutButton = styled.button`
+  width: 350px;
   background: #1b3679;
   color: white;
   border: none;
diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx
index 9aad30f6..b205c97a 100644
--- a/src/app/favorites/page.tsx
+++ b/src/app/favorites/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Body1Bold, Body2 } from '@/styles/fonts';
+import { Body1Bold, Body2, Heading1 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
 
 import {
@@ -21,6 +21,7 @@ import {
   TransparentButton,
   ViewItem,
   Fullscreen,
+  ImageLinkWrapper,
 } from './styles';
 
 import { Product } from '../../schema/schema';
@@ -48,15 +49,17 @@ export default function FavoritesPage() {
       <NavBar />
       <OutterBox>
         <BackButton destination="./profileScreen" />
-        <h1>Favorites</h1>
+        <Heading1>Favorites</Heading1>
         <OutterFavoriteDiv>
           {Favorites.map(favorite => (
             <FavoriteDiv key={favorite.id}>
-              <img
-                src={favorite.photo}
-                alt={favorite.name}
-                style={{ width: '150px', height: '150px' }}
-              />
+              <ImageLinkWrapper href={'' + favorite.id}>
+                <img
+                  src={favorite.photo}
+                  alt={favorite.name}
+                  style={{ width: '150px', height: '150px' }}
+                />
+              </ImageLinkWrapper>
 
               <ProductNameDiv>
                 <Body1Bold>{favorite.name}</Body1Bold>
diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts
index 1cf4c27e..73664cce 100644
--- a/src/app/favorites/styles.ts
+++ b/src/app/favorites/styles.ts
@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 import { Heart } from 'react-feather';
+import Link from "next/link";
+import COLORS from '@/styles/colors';
 
 import NavBar from '../../components/NavBarFolder/NavBar';
 
@@ -58,6 +60,7 @@ export const HeartIcon = styled(Heart)`
 export const TransparentButton = styled.button`
   background-color: transparent;
   border: transparent;
+  cursor:pointer;
 `;
 
 export const NavBarMovedUP = styled(NavBar)`
@@ -93,3 +96,16 @@ export const Fullscreen = styled.div`
   flex-direction: column;
   align-items: center;
 `;
+
+export const ImageLinkWrapper = styled(Link)`
+width:100px;
+height:100px;
+background-color:${COLORS.lightGrey};
+padding:32px;
+margin-bottom:8px;
+display:flex;
+justify-content:center;
+align-items:center;
+box-shadow: 1px 1px 4px 1px rgba(0,0,0,.1);
+`;
+
diff --git a/src/app/globals.css b/src/app/globals.css
index 021ca9f4..4d40d22d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -82,7 +82,7 @@
 html,
 body {
   max-width: 100vw;
-  height: 100%;
+  min-height: 100vh;
 }
 
 body {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8815ba1b..4a385bbe 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import './globals.css';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Public_Sans } from 'next/font/google';
 
-const inter = Inter({ subsets: ['latin'] });
+const publicSans =  Public_Sans({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Shanti Project',
@@ -16,7 +16,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={publicSans.className}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index baab69c4..93fcea70 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -48,9 +48,9 @@ export default function App() {
         width={125}
         height={65}
         style={{
+          position: 'absolute',
           top: '30px',
           left: '30px',
-          position: 'absolute',
         }}
       />
       <LoginBox>
diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts
index 273a4576..41968785 100644
--- a/src/app/login/styles.ts
+++ b/src/app/login/styles.ts
@@ -76,7 +76,7 @@ export const EyeIcon = styled(Eye)`
 
 export const Fullscreen = styled.div`
   width: 100%;
-  height: 100%;
+  height: 100vh;
   display: grid;
 `;
 
diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts
index 81d02884..cce909c1 100644
--- a/src/app/profileScreen/styles.ts
+++ b/src/app/profileScreen/styles.ts
@@ -7,6 +7,7 @@ import { Heart } from 'react-feather';
 import NavBar from '../../components/NavBarFolder/NavBar';
 
 import Footer from '../../components/FooterFolder/Footer';
+import COLORS from '@/styles/colors';
 
 export const TextSpacing = styled.div`
   margin-top: 10px;
@@ -26,7 +27,7 @@ export const AccountDetails = styled.div`
   width: 500px;
   height: 350px;
   border-radius: 10px;
-  background: var(--White, #fff);
+  background: ${COLORS.white};
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
@@ -42,7 +43,7 @@ export const OrderHistory = styled.div`
   width: 600px;
   height: 350px;
   border-radius: 10px;
-  background-color: var(--White, #fff);
+  background: ${COLORS.white};
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   padding-top: 23px;
   padding-right: 23px;
@@ -56,7 +57,7 @@ export const FavoritesContainer = styled.div`
   width: 600px;
   height: 350px;
   border-radius: 10px;
-  background: var(--White, #fff);
+  background: ${COLORS.white};
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   padding-top: 23px;
   padding-right: 23px;
@@ -65,7 +66,7 @@ export const FavoritesContainer = styled.div`
 `;
 
 export const LogOutButton = styled.button`
-  background: #1b3679;
+  background: ${COLORS.navy};
   color: #fff;
   text-align: center;
   font-size: 20px;
diff --git a/src/app/storefront/StoreFrontNavBar.tsx b/src/app/storefront/StoreFrontNavBar.tsx
index 3be0ce2c..c1644826 100644
--- a/src/app/storefront/StoreFrontNavBar.tsx
+++ b/src/app/storefront/StoreFrontNavBar.tsx
@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
 import { fetchButtonCategories } from '@/api/supabase/queries/button_queries';
@@ -12,6 +11,7 @@ import {
   CartTotalCircle,
   UserProfileIcon,
   ShoppingCartIcon,
+  IconWithLabelLink,
 } from '../../components/NavBarFolder/styles';
 
 import { Product, StorefrontButtons } from '../../schema/schema';
@@ -116,14 +116,14 @@ export default function StoreFrontNavBar(props: {
 
   return (
     <NavBarComp>
-      <Link href="../storefront">
+      <IconWithLabelLink href="../storefront">
         <Image
           src="/images/ShantiLogo.png"
           alt="Shanti Logo"
-          width={147}
-          height={73}
+          width={125}
+          height={70}
         />
-      </Link>
+      </IconWithLabelLink>
       <ButtonsContainer>
         <FrontButton onClick={handlePrevious} $reachedStart={reachedStart}>
           <FrontArrow />
@@ -146,15 +146,15 @@ export default function StoreFrontNavBar(props: {
       </ButtonsContainer>
 
       <ButtonsDiv>
-        <Link href="../profileScreen">
+        <IconWithLabelLink href="../profileScreen">
           <UserProfileIcon />
-          <Body2>Users</Body2>
-        </Link>
-        <Link href="../cart">
+          <Body2>User</Body2>
+        </IconWithLabelLink>
+        <IconWithLabelLink href="../cart">
           <ShoppingCartIcon />
           <Body2>Cart</Body2>
           <CartTotalCircle $isZero={isZero}>{data}</CartTotalCircle>
-        </Link>
+        </IconWithLabelLink>
       </ButtonsDiv>
     </NavBarComp>
   );
diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx
index 479a7dd5..11722ab4 100644
--- a/src/components/BackButton/BackButton.tsx
+++ b/src/components/BackButton/BackButton.tsx
@@ -1,15 +1,12 @@
-import Link from 'next/link';
-import { Body2Bold } from '@/styles/fonts';
-import { BackDiv, ArrowLeftIcon } from './styles';
+import { Body1 } from '@/styles/fonts';
+import { BackLink, ArrowLeftIcon } from './styles';
 
 export default function BackButton(props: { destination: string }) {
   const { destination } = props;
   return (
-    <Link href={destination}>
-      <BackDiv>
-        <ArrowLeftIcon />
-        <Body2Bold>Back</Body2Bold>
-      </BackDiv>
-    </Link>
+    <BackLink href={destination}>
+      <ArrowLeftIcon />
+      <Body1>Back</Body1>
+    </BackLink>
   );
 }
diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts
index aae56682..82155a18 100644
--- a/src/components/BackButton/styles.ts
+++ b/src/components/BackButton/styles.ts
@@ -1,29 +1,22 @@
 import styled from 'styled-components';
 import { ArrowLeft } from 'react-feather';
-import Image from 'next/image';
+import Link from 'next/link';
 import COLORS from '../../styles/colors';
 
-export const BackDiv = styled.button`
+export const BackLink = styled(Link)`
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   color: ${COLORS.black};
-  background-color: transparent;
-  border: transparent;
-  margin-left: 0px;
-  margin-top: 55px;
+  width: 75px;
   gap: 5px;
   &:hover {
     text-decoration: underline;
   }
 `;
 
-export const ImageWithSize = styled(Image)`
-    width={23}
-    height={23}
-`;
-
 export const ArrowLeftIcon = styled(ArrowLeft)`
-  width: 17px;
-  height: 17px;
+  width: 24px;
+  height: 24px;
 `;
diff --git a/src/components/NavBarFolder/NavBar.tsx b/src/components/NavBarFolder/NavBar.tsx
index 96f8bb71..c0f92fd5 100644
--- a/src/components/NavBarFolder/NavBar.tsx
+++ b/src/components/NavBarFolder/NavBar.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
+import { Body2, Body2Bold } from '@/styles/fonts';
 import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries';
 
 import {
@@ -10,8 +10,7 @@ import {
   CartTotalCircle,
   UserProfileIcon,
   ShoppingCartIcon,
-  ProfileButton,
-  ProfileFont,
+  IconWithLabelLink,
 } from './styles';
 
 export default function NavBar({ ...rest }) {
@@ -36,27 +35,27 @@ export default function NavBar({ ...rest }) {
 
   return (
     <NavBarComp {...rest}>
-      <Link href="../storefront">
+      <IconWithLabelLink href="../storefront">
         <Image
           src="/images/ShantiLogo.png"
           alt="Shanti Logo"
           width={125}
           height={70}
         />
-      </Link>
+      </IconWithLabelLink>
 
       <ButtonsDiv>
-        <Link href="../profileScreen">
+        <IconWithLabelLink href="../profileScreen">
           <UserProfileIcon />
-          <p>User</p>
-        </Link>
-        <Link href="../cart">
-          <ProfileButton>
-            <ShoppingCartIcon />
-            <ProfileFont>Cart</ProfileFont>
-            <CartTotalCircle $isZero={isZero}>{data}</CartTotalCircle>
-          </ProfileButton>
-        </Link>
+          <Body2>User</Body2>
+        </IconWithLabelLink>
+        <IconWithLabelLink href="../cart">
+          <ShoppingCartIcon />
+          <Body2>Cart</Body2>
+          <CartTotalCircle $isZero={isZero}>
+            <Body2Bold>{data}</Body2Bold>
+          </CartTotalCircle>
+        </IconWithLabelLink>
       </ButtonsDiv>
     </NavBarComp>
   );
diff --git a/src/components/NavBarFolder/styles.ts b/src/components/NavBarFolder/styles.ts
index 46ce8b7d..fe42f4de 100644
--- a/src/components/NavBarFolder/styles.ts
+++ b/src/components/NavBarFolder/styles.ts
@@ -1,26 +1,29 @@
 import styled from 'styled-components';
 
 import { User, ShoppingCart } from 'react-feather';
+import Link from 'next/link';
 import COLORS from '../../styles/colors';
 
 export const CartTotalCircle = styled.div<{ $isZero?: boolean }>`
-  width: 20px;
-  height: 20px;
-  background: ${COLORS.marineBlue};
+  display: ${props => (props.$isZero ? 'none' : 'content')};
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  text-align: center;
-  transform: translate(19px, -58px);
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   color: ${COLORS.white};
-  display: ${props => (props.$isZero ? 'none' : 'content')};
+  background: ${COLORS.marineBlue};
 `;
 
 export const UserProfileIcon = styled(User)`
-  margin-left: 5px;
   color: ${COLORS.black};
 `;
 
 export const ShoppingCartIcon = styled(ShoppingCart)`
-  margin-left: 3px;
   color: ${COLORS.black};
 `;
 
@@ -28,23 +31,20 @@ export const NavBarComp = styled.nav`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding-left: 30px;
-  padding-right: 30px;
-  height: 140px;
-  padding-top: 20px;
+  align-items: center;
+  padding: 16px 32px;
   position: relative;
   width: 100%;
   background: ${COLORS.lightPeriwinkle};
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
-  z-index: 100;
 `;
 
 export const ButtonsDiv = styled.div`
-  width: 200px;
+  width: 100px;
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
-  padding-top: 15px;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 export const LocationDiv = styled.div`
@@ -64,15 +64,11 @@ export const Addie = styled.p`
   margin-bottom: 30px;
 `;
 
-export const ProfileButton = styled.button`
-  width: 40px;
-  height: 40px;
-  background-color: transparent;
-  border: none;
-`;
-export const ProfileFont = styled.div`
-  margin-left: 5px;
-  font-size: 18px;
-  font-style: normal;
+export const IconWithLabelLink = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
   color: ${COLORS.black};
+  position: relative;
 `;
diff --git a/src/components/ViewAllButton/styles.ts b/src/components/ViewAllButton/styles.ts
index 8533385b..3b7207d6 100644
--- a/src/components/ViewAllButton/styles.ts
+++ b/src/components/ViewAllButton/styles.ts
@@ -1,8 +1,7 @@
 import styled from 'styled-components';
-import Image from 'next/image';
 import COLORS from '../../styles/colors';
 
-export const ViewAllDiv = styled.button`
+export const ViewAllDiv = styled.div`
   display: flex;
   align-items: center;
   color: ${COLORS.black};
@@ -13,8 +12,4 @@ export const ViewAllDiv = styled.button`
   }
 `;
 
-export const ImageWithSize = styled(Image)`
-    width={23}
-    height={23}
-
-`;
+export const placeHolder = "";