diff --git a/Application/app/data.ts b/Application/app/data.ts
index 81910d7..f324d41 100644
--- a/Application/app/data.ts
+++ b/Application/app/data.ts
@@ -12,7 +12,7 @@ export const clubFeatures = [
         ],
     },
     {
-        title: "Open Office Hours",
+        title: "Open Office Hours (Every Sunday)",
         bgColor: "blue.600",
         items: [
             "Online learning can feel isolating--it's easy to think you're on your own",
diff --git a/Application/app/layout.tsx b/Application/app/layout.tsx
index abcc307..42e0316 100644
--- a/Application/app/layout.tsx
+++ b/Application/app/layout.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
@@ -5,6 +7,8 @@ import { Provider } from "@/components/ui/provider";
 import Navbar from "@/components/navbar";
 import Footer from "@/components/footer";
 import { Box, Flex } from "@chakra-ui/react/";
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
 
 
 const geistSans = Geist({
@@ -17,14 +21,17 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
-  title: "Coding United Club",
-  description: "Coding United Club for SNHU",
-};
+
 
 export default function RootLayout({
   children,}: Readonly<{
   children: React.ReactNode;}>) {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
diff --git a/Application/app/page.tsx b/Application/app/page.tsx
index 44e3f6b..4536612 100644
--- a/Application/app/page.tsx
+++ b/Application/app/page.tsx
@@ -23,7 +23,7 @@ export default function Home() {
   return (
     <>
       <title>{HomePage.getTitle()}</title>
-      <section className="relative h-[70vh] overflow-hidden">
+      <section className="relative h-[40vh] md:h-[70vh] overflow-hidden">
         <div className="relative w-full h-full group">
           {/* <!-- Background Image --> */}
           <img
@@ -34,7 +34,7 @@ export default function Home() {
 
         </div>
       </section>
-      <Container maxW="container.md" py={20} textAlign="center" bg="bg">
+      <Container maxW="container.md" py={{ base: 10, md: 20 }} textAlign="center" bg="bg">
         <VStack gap={10} align="stretch">
           <Box>
             <Heading as="h1" size="2xl" fontWeight="bold" letterSpacing="tight" color="fg">
@@ -51,7 +51,7 @@ export default function Home() {
           </Text>
         </VStack>
       </Container>
-      <Container maxW="container.md" py={20} textAlign="center" bg="bg">
+      <Container maxW="container.md" py={{ base: 10, md: 20 }} textAlign="center" bg="bg">
         <VStack gap={10} align="stretch">
           <Box>
             <Heading as="h1" size="2xl" fontWeight="bold" letterSpacing="tight" color="fg">
diff --git a/Application/components/footer.tsx b/Application/components/footer.tsx
index 6ac6dbc..2e9b73b 100644
--- a/Application/components/footer.tsx
+++ b/Application/components/footer.tsx
@@ -32,10 +32,10 @@ const Footer = () => {
                     gap={{ base: 4, md: 8}}
                     alignItems="center">
 
-                    <Link href="/" className="hover:text-blue-400 transition-colors">Home</Link>
-                    <Link href="/about" className="hover:text-blue-400 transition-colors">About Us</Link>
-                    <Link href="/faq" className="hover:text-blue-400 transition-colors">FAQ</Link>
-                    <Link href="/contact" className="hover:text-blue-400 transition-colors">Contact</Link>
+                    <Link href="/"  scroll={true} className="hover:text-blue-400 transition-colors">Home</Link>
+                    <Link href="/about" scroll={true} className="hover:text-blue-400 transition-colors">About Us</Link>
+                    <Link href="/faq" scroll={true} className="hover:text-blue-400 transition-colors">FAQ</Link>
+                    <Link href="/contact" scroll={true} className="hover:text-blue-400 transition-colors">Contact</Link>
                 </Stack>
             </Flex>
         </Box>
diff --git a/Application/components/navbar.tsx b/Application/components/navbar.tsx
index 754c02a..3c4d651 100644
--- a/Application/components/navbar.tsx
+++ b/Application/components/navbar.tsx
@@ -35,7 +35,9 @@ export default function Navbar() {
       zIndex="docked"
     >
       <Flex h={16} px={8} alignItems="center" justifyContent="space-between">
-        <Text fontSize="xl" fontWeight="bold">Coding United</Text>
+        <Link href="/">
+          <Text fontSize="xl" fontWeight="bold">Coding United</Text>
+        </Link>
 
         <HStack gap={4}>
           {/* Desktop Links */}
@@ -64,6 +66,9 @@ export default function Navbar() {
             onClick={() => setIsOpen(!isOpen)}
             variant="outline"
             aria-label="Toggle Menu"
+            color="white"
+            _hover={{ bg: "whiteAlpha.200" }}
+            borderColor="whiteAlpha.400"
           >
             {isOpen ? <HiX /> : <HiMenu />}
           </IconButton>
