diff --git a/public/gallery/bettereagle_chip.png b/public/gallery/bettereagle_chip.png
new file mode 100644
index 0000000..b7f2e46
Binary files /dev/null and b/public/gallery/bettereagle_chip.png differ
diff --git a/public/gallery/mrbenword.png b/public/gallery/mrbenword.png
new file mode 100644
index 0000000..400645d
Binary files /dev/null and b/public/gallery/mrbenword.png differ
diff --git a/public/gallery/spacecsdesign.jpg b/public/gallery/spacecsdesign.jpg
new file mode 100644
index 0000000..5b05b5d
Binary files /dev/null and b/public/gallery/spacecsdesign.jpg differ
diff --git a/src/app/components/BottomBar.tsx b/src/app/components/BottomBar.tsx
index 303c756..4a36cc1 100644
--- a/src/app/components/BottomBar.tsx
+++ b/src/app/components/BottomBar.tsx
@@ -7,15 +7,7 @@ export default function BottomBar() {
     return (
         <footer className="static bottom-0 bg-zinc-950 p-4 z-5 w-full justify-end">
             Developed by the Mr. Ben Merch Store club at Allen High School. To contribute,
-            see
-            <a
-                className="text-textDim"
-                href="https://github.com/Mr-Ben-Merch-Store/Website"
-            >
-                {' '}
-                our repository
-            </a>
-            !
+            see <a className="text-blue-500" href="https://discord.gg/E8NzVDaAS9">  our discord server!</a>
         </footer>
     );
 }
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
index 52500ef..d5ca85a 100644
--- a/src/app/components/Navbar.tsx
+++ b/src/app/components/Navbar.tsx
@@ -10,12 +10,12 @@ export default function Navbar() {
     const toggleMenu = () => setIsOpen(!isOpen);
 
     return (
-        <nav className="bg-zinc-950 p-4 relative">
+        <nav className="bg-zinc-950 p-4 relative min-h-[65px]">
             <div className="flex items-center justify-between mx-10">
                 {/* Hamburger Menu */}
                 <button
                     onClick={toggleMenu}
-                    className="lg:hidden absolute left-0 top-1/2 transform -translate-y-1/2 p-2 z-20"
+                    className="lg:hidden absolute left-0 top-1/2 transform -translate-y-1/2 p-2 z-30"
                 >
                     {isOpen ? (
                         <XMarkIcon className="w-10 h-10 text-textLight" />
@@ -26,19 +26,20 @@ export default function Navbar() {
 
                 {/* Desktop Links */}
                 <div className="flex items-center space-x-12 text-2xl text-textLight">
-                    <li className="list-none">
-                        <Link href=".">Home</Link>
+                    <li className="nav-link list-none">
+                        <Link href="/">Home</Link>
                     </li>
-                    <li className="lg:flex hidden">
+                <li className="nav-link hidden lg:block">
                         <Link href="/about">About</Link>
-                    </li>
-                    <li className="lg:flex hidden">
-                        <Link href="/store">Store</Link>
-                    </li>
+                </li>
+                <li className="nav-link hidden lg:block">
+                    <Link href="/store">Store</Link>
+                </li>
+
                 </div>
 
                 {/* Mobile Cart Icon */}
-                <div className="flex items-center lg:hidden absolute right-0 top-1/2 transform -translate-y-1/2 pr-4">
+                <div className="flex items-center lg:hidden absolute right-0 top-1/2 transform -translate-y-1/2 pr-4 z-30">
                     <Link href="/cart">
                         <ShoppingCartIcon className="w-10 h-10 text-textLight" />
                     </Link>
@@ -56,7 +57,7 @@ export default function Navbar() {
             <ul
                 className={`absolute top-16 left-0 bg-zinc-950 ${
                     isOpen ? 'animate-slide-in-left' : 'hidden'
-                } text-textLight transition-all duration-300 ease-in-out z-10 w-auto max-w-xs p-4`}
+                } text-textLight transition-all duration-300 ease-in-out z-20 w-auto max-w-xs p-4`}
             >
                 <li className="py-4 border-b border-gray-700">
                     <Link href="/">Home</Link>
diff --git a/src/app/globals.css b/src/app/globals.css
index 2adab1a..5ca4105 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,12 +2,45 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Keyframe animation for the line growing from the middle to the sides */
+@keyframes hover-line {
+    0% {
+        width: 0;
+        left: 50%;
+    }
+    100% {
+        width: 100%;
+        left: 0;
+    }
+}
+
+.nav-link {
+    position: relative;
+    cursor: pointer;
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    background-color: #63d297;
+    transition: all 0.3s ease;
+}
+
+.nav-link:hover::after {
+    animation: hover-line 0.3s forwards;
+}
+
+
 h1 {
     @apply font-semibold text-7xl text-white animate-bounce-in my-10;
 }
 
 hr {
-    @apply bg-textMid h-1 border-none;
+    @apply bg-textMid h-3 border-none;
 }
 
 h2 {
@@ -27,5 +60,28 @@ footer {
 }
 
 p a {
-    color: #B4FFDC;
+    color: #3392d1;
+}
+
+nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.scrollable-gallery::-webkit-scrollbar {
+    width: 8px;
+}
+
+.scrollable-gallery::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.scrollable-gallery::-webkit-scrollbar-thumb {
+    background: #63d297;
+    border-radius: 10px;
+}
+
+.scrollable-gallery::-webkit-scrollbar-thumb:hover {
+    background: #5ec28d;
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 107c0ad..a43ba0b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,12 +3,30 @@ import { Metadata } from 'next';
 export const metadata: Metadata = {
     title: 'Home',
 };
+
 export default function Home() {
     return (
         <>
-            <h1>Welcome to the Mr. Ben Merch Store</h1>
+            <h1>Welcome to Mr.Ben&apos;s Merch Store</h1>
             <hr />
-            <h2 className="my-80 text-textLight">Coming Soon!!</h2>
+            <h2 className="my-20 text-textLight text-center">Concept designs:</h2>
+        
+            <div className="w-1/2 mx-auto overflow-x-auto scrollable-gallery">
+                <div className="whitespace-nowrap scroll-smooth snap-x snap-mandatory flex py-10">
+                    <div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
+                        <img src="gallery/bettereagle_chip.png" alt="Concept 1" className="w-full h-full object-cover rounded-lg" />
+                    </div>
+                    <div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
+                        <img src="gallery/spacecsdesign.jpg" alt="Concept 2" className="w-full h-full object-cover rounded-lg" />
+                    </div>
+                    <div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
+                        <img src="gallery/mrbenword.png" alt="Concept 3" className="w-full h-full object-cover rounded-lg" />
+                    </div>
+                    <div className="inline-block w-64 h-64 m-4 bg-transparent snap-center flex-shrink-0">
+                        <img src="product images/shirt1.png" alt="Concept 4" className="w-full h-full object-cover rounded-lg" />
+                    </div>
+                </div>
+            </div>
         </>
     );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9edc00f..14f3d33 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,101 +1,105 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
-    content: [
-        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-    ],
-    theme: {
-        extend: {
-            backgroundImage: {
-                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-                'gradient-conic':
-                    'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-            },
-            colors: {
-                theme: '#63d297',
-                bgBase: '#000000',
-                bgDim: '#083331',
-                bgMid: '#0F4948',
-                bgLight: '#196660',
-                textDark: '#2F9987',
-                textDim: '#51CCA6',
-                textMid: '#6BE3B1',
-                textLight: '#7EFFC3'
-                
-            },
-            fontFamily: {
-                sans: [
-                    'Lucida Sans',
-                    'Lucida Sans Regular',
-                    'Lucida Grande',
-                    'Lucida Sans Unicode',
-                    'Geneva',
-                    'Verdana',
-                    'sans-serif',
-                ],
-            },
-            animation: {
-                'bounce-in': 'bounce-in-top 1.1s both',
-                'slide-in-left': 'slide-in-left 0.5s ease-out forwards',
-            },
-            keyframes: {
-                'bounce-in-top': {
-                    '0%': {
-                        transform: 'translateY(-500px)',
-                        'animation-timing-function': 'ease-in',
-                        opacity: '0',
-                    },
-                    '38%': {
-                        transform: 'translateY(0)',
-                        'animation-timing-function': 'ease-out',
-                        opacity: '0',
-                    },
-
-                    '55%': {
-                        transform: 'translateY(-65px)',
-                        'animation-timing-function': 'ease-in',
-                    },
-
-                    '72%': {
-                        transform: 'translateY(0)',
-                        'animation-timing-function': 'ease-out',
-                    },
-
-                    '81%': {
-                        transform: 'translateY(-28px)',
-                        'animation-timing-function': 'ease-in',
-                    },
-
-                    '90%': {
-                        transform: 'translateY(0)',
-                        'animation-timing-function': 'ease-out',
-                    },
-
-                    '95%': {
-                        transform: 'translateY(-8px)',
-                        'animation-timing-function': 'ease-in',
-                    },
-
-                    '100%': {
-                        transform: 'translateY(0)',
-                        'animation-timing-function': 'ease-out',
-                    },
-                },
-                'slide-in-left': {
-                    '0%': {
-                        transform: 'translateX(-100%)',
-                        opacity: '0',
-                    },
-                    '100%': {
-                        transform: 'translateX(0)',
-                        opacity: '1',
-                    },
-                },
-            },
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      colors: {
+        theme: '#63d297',
+        bgBase: '#000000',
+        bgDim: '#083331',
+        bgMid: '#0F4948',
+        bgLight: '#196660',
+        textDark: '#2F9987',
+        textDim: '#51CCA6',
+        textMid: '#6BE3B1',
+        textLight: '#7EFFC3'
+      },
+      fontFamily: {
+        sans: [
+          'Lucida Sans',
+          'Lucida Sans Regular',
+          'Lucida Grande',
+          'Lucida Sans Unicode',
+          'Geneva',
+          'Verdana',
+          'sans-serif',
+        ],
+      },
+      animation: {
+        'bounce-in': 'bounce-in-top 1.1s both',
+        'slide-in-left': 'slide-in-left 0.5s ease-out forwards',
+        'hover-line': 'hover-line 0.3s ease-out forwards', // New animation for hover line
+      },
+      keyframes: {
+        'bounce-in-top': {
+          '0%': {
+            transform: 'translateY(-500px)',
+            'animation-timing-function': 'ease-in',
+            opacity: '0',
+          },
+          '38%': {
+            transform: 'translateY(0)',
+            'animation-timing-function': 'ease-out',
+            opacity: '0',
+          },
+          '55%': {
+            transform: 'translateY(-65px)',
+            'animation-timing-function': 'ease-in',
+          },
+          '72%': {
+            transform: 'translateY(0)',
+            'animation-timing-function': 'ease-out',
+          },
+          '81%': {
+            transform: 'translateY(-28px)',
+            'animation-timing-function': 'ease-in',
+          },
+          '90%': {
+            transform: 'translateY(0)',
+            'animation-timing-function': 'ease-out',
+          },
+          '95%': {
+            transform: 'translateY(-8px)',
+            'animation-timing-function': 'ease-in',
+          },
+          '100%': {
+            transform: 'translateY(0)',
+            'animation-timing-function': 'ease-out',
+          },
+        },
+        'slide-in-left': {
+          '0%': {
+            transform: 'translateX(-100%)',
+            opacity: '0',
+          },
+          '100%': {
+            transform: 'translateX(0)',
+            opacity: '1',
+          },
         },
+        'hover-line': {
+          '0%': {
+            width: '0',
+            left: '50%',
+          },
+          '100%': {
+            width: '100%',
+            left: '0',
+          },
+        },
+      },
     },
-    plugins: [],
+  },
+  plugins: [],
 };
-export default config;
\ No newline at end of file
+
+export default config;