diff --git a/KakeysBakery/Components/Layout/MainFooter.razor b/KakeysBakery/Components/Layout/MainFooter.razor
new file mode 100644
index 0000000..51c4e91
--- /dev/null
+++ b/KakeysBakery/Components/Layout/MainFooter.razor
@@ -0,0 +1,16 @@
+<footer class="footer mt-auto py-4 d-flex justify-content-center layout" data-bs-theme="dark">
+    <div class="container d-flex align-items-center justify-content-center">
+        <div class="col-md-4 d-flex align-items-center">
+            <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
+                <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
+            </a>
+            <span class="d-flex align-items-center justify-content-center mb-3 mb-md-0 text-body-secondary">© 2024 Company, Inc</span>
+        </div>
+
+        <ul class="nav col-md-4 justify-content-end list-unstyled d-flex pe-5">
+        <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-facebook" /></a></li>
+        <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-instagram" /></a></li>
+        <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-twitter" /></a></li>
+        </ul>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/KakeysBakery/Components/Layout/MainFooter.razor.css b/KakeysBakery/Components/Layout/MainFooter.razor.css
new file mode 100644
index 0000000..e3baf2f
--- /dev/null
+++ b/KakeysBakery/Components/Layout/MainFooter.razor.css
@@ -0,0 +1,19 @@
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.i {
+    font-family: Trebuchet MS;
+    font-size: 1.6rem;
+    color: #dee2e6;
+}
+
+.footer {
+    background-color: #4E362E
+}
\ No newline at end of file
diff --git a/KakeysBakery/Components/Layout/MainLayout.razor b/KakeysBakery/Components/Layout/MainLayout.razor
index 6edb2f0..989ed7f 100644
--- a/KakeysBakery/Components/Layout/MainLayout.razor
+++ b/KakeysBakery/Components/Layout/MainLayout.razor
@@ -2,13 +2,13 @@
 
 <div class="page">
     <main>
-        <MyNavMenu />
+        <NavMenu />
 
-        <article class="content px-4 mt-5 vh-100" style="background-color: #F5E5D8;">
+        <article class="content px-4 mt-5 min-vh-100" style="background-color: #F5E5D8;">
             @Body
         </article>
 
-        <MyFooter />
+        <MainFooter />
     </main>
 </div>
 
diff --git a/KakeysBakery/Components/Layout/MyFooter.razor b/KakeysBakery/Components/Layout/MyFooter.razor
deleted file mode 100644
index 24ab89c..0000000
--- a/KakeysBakery/Components/Layout/MyFooter.razor
+++ /dev/null
@@ -1,15 +0,0 @@
-<footer class="footer mt-auto py-4 d-flex justify-content-center layout" data-bs-theme="dark" style="background-color: #4E362E;">
-
-    <div class="col-md-4 d-flex align-items-center">
-        <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
-            <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
-        </a>
-        <span class="mb-3 mb-md-0 text-body-secondary">© 2024 Company, Inc</span>
-    </div>
-
-    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex pe-5">
-        <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-facebook" /></a></li>
-        <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-instagram" /></a></li>
-        <li class="ms-3"><a class="text-body-secondary" href="#"><i class="bi bi-twitter" /></a></li>
-    </ul>
-</footer>
\ No newline at end of file
diff --git a/KakeysBakery/Components/Layout/MyFooter.razor.css b/KakeysBakery/Components/Layout/MyFooter.razor.css
deleted file mode 100644
index 195fc08..0000000
--- a/KakeysBakery/Components/Layout/MyFooter.razor.css
+++ /dev/null
@@ -1,99 +0,0 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    /*position: absolute;*/
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
-    height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.i {
-    font-family: Trebuchet MS;
-    font-size: 1.6rem;
-    color: #dee2e6;
-}
-
-.nav-item {
-    font-family: Trebuchet MS;
-    font-size: 1.6rem;
-    font-weight: 100;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 0.5rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 0rem;
-    }
-
-    .nav-item ::deep .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        width: 100%;
-    }
-
-.nav-item ::deep span.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
-@media (min-width: 641px) {
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}
diff --git a/KakeysBakery/Components/Layout/MyNavMenu.razor b/KakeysBakery/Components/Layout/NavMenu.razor
similarity index 71%
rename from KakeysBakery/Components/Layout/MyNavMenu.razor
rename to KakeysBakery/Components/Layout/NavMenu.razor
index 2678959..431a1f7 100644
--- a/KakeysBakery/Components/Layout/MyNavMenu.razor
+++ b/KakeysBakery/Components/Layout/NavMenu.razor
@@ -6,49 +6,42 @@
             <span class="navbar-toggler-icon"></span>
         </button>
         
-        <div class="d-xl-none position-absolute top-0 start-50 translate-middle-x d-flex justify-content-center">
+        <div class="d-xl-none position-absolute top-0 start-50 translate-middle-x d-flex justify-content-center" style="z-index:1">
             <img style="width:16rem" src="images/BlackLogo.png" />
         </div>
         
         <div class="collapse navbar-collapse py-3" id="navbarSupportedContent">
             <div class="navbar-nav ms-auto me-auto mb-2 mb-lg-0 position-relative">
-                <span class="d-none d-lg-block position-absolute top-100 start-0 translate-middle p-5 my-5" style="z-index:0">
+                <span class="d-none d-lg-block position-absolute top-100 start-0 translate-middle p-5 my-5" style="z-index:1">
                     <img class="mt-5 pt-5" style="width:60%; height:auto;" src="images/BlackLogo.png" />
                 </span>
 
-                <NavLink class="nav-link mx-1" href="#" style="z-index:1" Match="NavLinkMatch.All">
+                <NavLink class="nav-link mx-1" href="#" style="z-index:2" Match="NavLinkMatch.All">
                     <span class="nav-item" href="#">Home</span>
                 </NavLink>
-                <NavLink class="nav-link mx-1" href="Order" style="z-index:1" Match="NavLinkMatch.All">
+                <NavLink class="nav-link mx-1" href="Order" style="z-index:2" Match="NavLinkMatch.All">
                     <span class="nav-item" href="#">Order</span>
                 </NavLink>
-                <NavLink class="nav-link mx-1" href="Customize" style="z-index:1" Match="NavLinkMatch.All">
+                <NavLink class="nav-link mx-1" href="Customize" style="z-index:2" Match="NavLinkMatch.All">
                     <span class="nav-item" href="#">Customize</span>
                 </NavLink>
-                <NavLink class="nav-link mx-1" href="AboutUs" style="z-index:1" Match="NavLinkMatch.All">
+                <NavLink class="nav-link mx-1" href="AboutUs" style="z-index:2" Match="NavLinkMatch.All">
                     <span class="nav-item" href="#">About Us</span>
                 </NavLink>
-                <NavLink class="nav-link mx-1" href="ContactUs" style="z-index:1" Match="NavLinkMatch.All">
+                <NavLink class="nav-link mx-1" href="ContactUs" style="z-index:2" Match="NavLinkMatch.All">
                     <span class="nav-item" href="#">Contact Us</span>
                 </NavLink>
             </div>
 
             <div class="navbar-nav mb-2 mb-lg-0" data-bs-theme="dark">
                 <div class="nav-item px-1 d-flex justify-content-center">
-                    <a class="d-none d-lg-inline nav-link bi bi-cart-fill px-3 pb-5" href="#"></a>
-                    <a class="d-lg-none nav-link" href="#">cart</a>
+                    <a class="d-none d-lg-inline nav-link bi bi-cart-fill px-3 pb-5" href="cart"></a>
+                    <a class="d-lg-none nav-link" href="cart">cart</a>
                 </div>
 
-                <NavLink class="nav-link mx-1" href="cart" style="z-index:1" Match="NavLinkMatch.All">
-                    <span class="nav-item" href="#">Cart</span>
-                </NavLink>
-                <NavLink class="nav-link mx-1" href="login" style="z-index:1" Match="NavLinkMatch.All">
-                    <span class="nav-item" href="#">Login</span>
-                </NavLink>
-
                 <div class="nav-item px-1 d-flex justify-content-center">
-                    <a class="d-none d-lg-inline d-flex nav-link px-3 pb-5" href="#"><i class="bi bi-person-square "></i></a>
-                    <a class="d-lg-none nav-link" href="#">login</a>
+                    <a class="d-none d-lg-inline d-flex nav-link px-3 pb-5" href="login"><i class="bi bi-person-square "></i></a>
+                    <a class="d-lg-none nav-link" href="login">login</a>
                 </div>
             </div>
 
diff --git a/KakeysBakery/Components/Layout/MyNavMenu.razor.css b/KakeysBakery/Components/Layout/NavMenu.razor.css
similarity index 100%
rename from KakeysBakery/Components/Layout/MyNavMenu.razor.css
rename to KakeysBakery/Components/Layout/NavMenu.razor.css
diff --git a/KakeysBakery/Components/Pages/Home.razor b/KakeysBakery/Components/Pages/Home.razor
index 11718c4..87693ee 100644
--- a/KakeysBakery/Components/Pages/Home.razor
+++ b/KakeysBakery/Components/Pages/Home.razor
@@ -3,9 +3,11 @@
 <PageTitle>Home</PageTitle>
 
 
-<div class="d-flex justify-content-center mt-3">
+<div class="d-flex justify-content-center mt-3 position-relative">
     <img src="images/SweetnessCupcakes.png" id="cupcake1" />
-    <p class="sweet">Sweetness in every bite</p>
+    @* <p class="sweet">Sweetness in every bite</p> *@
+    <p class="position-absolute testsweet h1">Sweetness in every bite</p>
+
 </div>
 
 <div class="d-flex justify-content-center d-flex flex-wrap my-5">
diff --git a/KakeysBakery/Components/Pages/Home.razor.css b/KakeysBakery/Components/Pages/Home.razor.css
index 697b168..f900c7d 100644
--- a/KakeysBakery/Components/Pages/Home.razor.css
+++ b/KakeysBakery/Components/Pages/Home.razor.css
@@ -35,7 +35,7 @@
 .sweet {
     position: absolute;
     left: 55%;
-    top: 480px;
+    top: 60%;
     color: brown;
     background-color: white;
     background-color: rgb(255, 255, 255, .5);
@@ -47,6 +47,20 @@
     font-weight: 900;
 }
 
+.testsweet {
+    color: brown;
+    background-color: white;
+    background-color: rgb(255, 255, 255, .5);
+    padding: 30px 25px 40px 30px;
+    border-radius: 5px;
+    font-family: BakeryFont;
+    /*font-size: 4vw;*/
+    font-style: oblique;
+    font-weight: 900;
+    left: 65%;
+    top: 60%;
+}
+
 #description {
     padding: 30px 25px 40px 60px;
     float: right;
@@ -56,8 +70,10 @@
 }
 
 /*smallest screen*/
+
 @media screen and (max-width: 1200px) {
-    .sweet {
+    .testsweet {
+        color: green;
         left: 50%;
     }
 
@@ -67,8 +83,9 @@
 }
 
 /*biggest screen*/
-@media screen and (min-width: 1200px) {
-    .sweet {
+@media screen and (min-width: 1463px) {
+    .testsweet {
+        color: blue;
         left: 68%;
         font-size: 2.5vw;
     }