--- a/home/index.html
+++ b/home/index.html
@ -7,17 +7,38 @@
    <link rel="icon" href="../static/site/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="styles.css">
 </head>
-<body><img src="logo.png" id="logo">
+<body>
+    
+    <img src="start.png" alt="">
    <div id="menu">
-        <div>
-            <img src="logo.png" id="logo">
+        <div id="image-container">
+            <img src="empty.png" id="large-image">
        </div>
        <div>
-            <a href="./art/index.html" class="seed"><img src="seed.png"></a>
-            <a href="./shrine/index.html" class="seed"><img src="seed.png"></a>
-            <a href="./friends/index.html" class="seed"><img src="seed.png"></a>
-            <a href="./about/index.html" class="seed"><img src="seed.png"></a>
+            <a href="./art/index.html" class="seed" id="art"><img src="seed.png"></a>
+            <a href="./shrine/index.html" class="seed" id="shrine"><img src="seed.png"></a>
+            <a href="./friends/index.html" class="seed" id="friends"><img src="seed.png"></a>
+            <a href="./stuff/index.html" class="seed" id="stuff"><img src="seed.png"></a>
        </div>
    </div>
+    
+
+    <script>const menuItems = document.querySelectorAll('.seed');
+        const largeImage = document.getElementById('large-image');
+        const imageContainer = document.getElementById('image-container');
+        
+        menuItems.forEach(item => {
+            item.addEventListener('mouseenter', () => {
+                const subfolder = item.getAttribute('id');
+                const imgSrc = `${subfolder}.png`; // Generating image path from subfolder name
+                largeImage.src = imgSrc;
+                imageContainer.style.opacity = 1;
+            });
+        
+            item.addEventListener('mouseleave', () => {
+                imageContainer.style.opacity = 0;
+            });
+        });
+        </script>
 </body>
 </html>
--- a/home/styles.css
+++ b/home/styles.css
@ -1,20 +1,30 @@
+body, html {
+    height: 100%;
+    margin: 0;
+    overflow: hidden; /* Prevents scrollbar from appearing */
+  }
 body {
    display: flex;
    justify-content: center;
    align-items: center;
+    flex-direction: column;
    }
+    

 #menu {
    width: 800px;
    height: 400px;
-    margin-top: 100px;
-    border: 10px groove seagreen;
-    background-color: rgb(240, 106, 106);
+
+    
+    
    background-size: contain;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
+    max-width: 100%;
+    height: auto;
+    transition: transform 0.3s, scale 0.3s;
    
 }

@ -34,11 +44,15 @@ p{
 }
 .seed {
    display: block;
-    margin-bottom: 10px; /* Adjust the spacing between seeds as needed */
+    margin-bottom: 90px; /* Adjust the spacing between seeds as needed */
 }
 .seed img {
    transition: transform 0.3s ease;
 }
 .seed img:hover {
    transform: scale(1.1);
-}
+}
+
+#image-container {
+    transition: opacity 0.5s ease; /* Fade transition */
+}
--- a/styles.css
+++ b/styles.css
@ -17,5 +17,5 @@ transition: transform 0.3s, scale 0.3s;
 }

 .logo:hover {
-transform: scale(1.2) rotate(360deg); /* Rotates the logo 360 degrees */
-}
+transform: scale(1.5) rotate(360deg); /* Rotates the logo 360 degrees */
+}