diff --git a/assets/css/custom.css b/assets/css/custom.css
index f7efaf4..f1787e8 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -263,7 +263,7 @@ header {
     position: absolute;
     bottom: 5%;
     transform-origin: bottom center;
-    z-index: 4;
+    z-index: 7;
     transition: transform 0.5s ease-out;
 }
 
@@ -377,6 +377,11 @@ header {
 
 /* --- Fantasy Forest Theme --- */
 
+body[data-theme="fantasy"] {
+    --primary-color: #9e7fde;
+    --accent-color: #d9abff;
+}
+
 body[data-theme="fantasy"] .cloud,
 body[data-theme="fantasy"] .hills {
     display: none;
@@ -392,6 +397,11 @@ body[data-theme="fantasy"] .hills {
     opacity: 0;
     transition: opacity 0.5s ease;
     pointer-events: none;
+    /* Background moved to #garden */
+}
+
+body[data-theme="fantasy"] #garden {
+    background: linear-gradient(to bottom, #1a0c2e, #3a1a5c);
 }
 
 body[data-theme="fantasy"] .fantasy-scene {
@@ -399,11 +409,11 @@ body[data-theme="fantasy"] .fantasy-scene {
 }
 
 body[data-theme="fantasy"] .sky {
-    background: linear-gradient(to bottom, #1a0c2e, #3a1a5c);
+    background: none;
 }
 
 body[data-theme="fantasy"] .ground {
-    background: #2a1a3c;
+    background: transparent;
 }
 
 .fantasy-moon {
@@ -422,85 +432,166 @@ body[data-theme="fantasy"] .ground {
 
 .fantasy-trees {
     position: absolute;
-    bottom: 10%;
+    bottom: 15%;
     left: 0;
     width: 100%;
     height: 50%;
     z-index: 6;
 }
 
-.fantasy-trees::before,
-.fantasy-trees::after {
-    content: '';
+.tree {
     position: absolute;
     bottom: 0;
-    width: 150px;
-    height: 200px;
-    background: #110a1f;
-    border-radius: 60% 60% 10px 10px;
+    width: 10px; /* Trunk width */
+    background: #2c1f3a;
     transform-origin: bottom center;
 }
 
-.fantasy-trees::before {
-    left: 10%;
-    transform: scale(0.9);
-    height: 180px;
-}
-
-.fantasy-trees::after {
-    right: 8%;
-    transform: scale(1.1);
-}
-
-.fantasy-mist {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 25%;
-    background: linear-gradient(to top, rgba(42, 26, 60, 0.8), transparent);
-    z-index: 7;
-}
-
-.fantasy-mushrooms {
-    position: absolute;
-    bottom: 12%;
-    width: 100%;
-    height: 10%;
-    z-index: 8;
-}
-
-.fantasy-mushrooms::before,
-.fantasy-mushrooms::after {
+.tree::after {
     content: '';
     position: absolute;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #00ffab;
-    box-shadow: 0 0 5px #00ffab, 0 0 10px #00ffab, 0 0 15px #00ffab;
-    animation: glowing-mushroom 3s infinite alternate;
+    bottom: 100%; /* Position the foliage above the trunk */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 120px;
+    background: #2c1f3a;
+    border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
+    box-shadow: 0 -10px 0 #2c1f3a, 20px -25px 0 5px #2c1f3a, -20px -25px 0 5px #2c1f3a;
 }
 
-.fantasy-mushrooms::before {
-    bottom: 20px;
+/* Individual tree styles for variety */
+.tree-1 {
+    left: 5%;
+    height: 150px;
+    transform: scale(0.8);
+}
+.tree-1::after {
+    width: 100px;
+    height: 150px;
+}
+
+.tree-2 {
     left: 20%;
-    animation-delay: 0.5s;
+    height: 180px;
+    transform: scale(1);
+}
+.tree-2::after {
+    border-radius: 40% 60% 40% 40% / 70% 70% 30% 30%;
+    box-shadow: 0 -15px 0 #2c1f3a, 25px -30px 0 8px #2c1f3a, -25px -30px 0 8px #2c1f3a;
 }
 
-.fantasy-mushrooms::after {
-    bottom: 10px;
-    left: 80%;
-    animation-delay: 1.5s;
+.tree-3 {
+    left: 35%;
+    height: 120px;
+    transform: scale(0.7);
+}
+.tree-3::after {
+    width: 70px;
+    height: 110px;
+    box-shadow: 0 -8px 0 #2c1f3a, 15px -20px 0 3px #2c1f3a, -15px -20px 0 3px #2c1f3a;
 }
 
-@keyframes glowing-mushroom {
-    0%, 100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-    50% {
-        opacity: 0.7;
-        transform: scale(0.9);
-    }
-}
\ No newline at end of file
+.tree-4 {
+    right: 5%;
+    height: 160px;
+    transform: scale(0.9);
+}
+.tree-4::after {
+    width: 90px;
+    height: 140px;
+    border-radius: 60% 40% 50% 50% / 70% 70% 30% 30%;
+}
+
+.tree-5 {
+    right: 25%;
+    height: 200px;
+    transform: scale(1.1);
+}
+.tree-5::after {
+    width: 110px;
+    height: 160px;
+    box-shadow: 0 -20px 0 #2c1f3a, 30px -40px 0 10px #2c1f3a, -30px -40px 0 10px #2c1f3a;
+}
+
+.tree-6 {
+    right: 40%;
+    height: 140px;
+    transform: scale(0.8);
+}
+
+/* --- Stars --- */
+@keyframes flicker {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}
+
+.stars-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60%; /* Cover the sky area */
+    z-index: 5;
+}
+
+.star {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: white;
+    border-radius: 50%;
+    animation: flicker 3s infinite alternate;
+}
+
+/* Random star positions and animation delays */
+.star:nth-child(1) { top: 10%; left: 5%; animation-delay: 0.1s; }
+.star:nth-child(2) { top: 50%; left: 10%; animation-delay: 0.5s; }
+.star:nth-child(3) { top: 20%; left: 15%; animation-delay: 1.2s; }
+.star:nth-child(4) { top: 40%; left: 20%; animation-delay: 0.8s; }
+.star:nth-child(5) { top: 60%; left: 25%; animation-delay: 0.3s; }
+.star:nth-child(6) { top: 15%; left: 30%; animation-delay: 1.5s; }
+.star:nth-child(7) { top: 35%; left: 35%; animation-delay: 0.2s; }
+.star:nth-child(8) { top: 55%; left: 40%; animation-delay: 1s; }
+.star:nth-child(9) { top: 5%; left: 45%; animation-delay: 0.7s; }
+.star:nth-child(10) { top: 25%; left: 50%; animation-delay: 1.3s; }
+.star:nth-child(11) { top: 45%; left: 55%; animation-delay: 0.4s; }
+.star:nth-child(12) { top: 65%; left: 60%; animation-delay: 1.1s; }
+.star:nth-child(13) { top: 10%; left: 65%; animation-delay: 0.6s; }
+.star:nth-child(14) { top: 30%; left: 70%; animation-delay: 1.4s; }
+.star:nth-child(15) { top: 50%; left: 75%; animation-delay: 0.9s; }
+.star:nth-child(16) { top: 70%; left: 80%; animation-delay: 0.1s; }
+.star:nth-child(17) { top: 20%; left: 85%; animation-delay: 1.6s; }
+.star:nth-child(18) { top: 40%; left: 90%; animation-delay: 0.3s; }
+.star:nth-child(19) { top: 60%; left: 95%; animation-delay: 1s; }
+.star:nth-child(20) { top: 5%; left: 98%; animation-delay: 0.5s; }
+.star:nth-child(21) { top: 15%; left: 2%; animation-delay: 1.2s; }
+.star:nth-child(22) { top: 35%; left: 8%; animation-delay: 0.8s; }
+.star:nth-child(23) { top: 55%; left: 12%; animation-delay: 0.2s; }
+.star:nth-child(24) { top: 25%; left: 18%; animation-delay: 1.5s; }
+.star:nth-child(25) { top: 45%; left: 22%; animation-delay: 0.4s; }
+.star:nth-child(26) { top: 65%; left: 28%; animation-delay: 1.1s; }
+.star:nth-child(27) { top: 10%; left: 32%; animation-delay: 0.6s; }
+.star:nth-child(28) { top: 30%; left: 38%; animation-delay: 1.4s; }
+.star:nth-child(29) { top: 50%; left: 42%; animation-delay: 0.9s; }
+.star:nth-child(30) { top: 70%; left: 48%; animation-delay: 0.1s; }
+.star:nth-child(31) { top: 20%; left: 52%; animation-delay: 1.6s; }
+.star:nth-child(32) { top: 40%; left: 58%; animation-delay: 0.3s; }
+.star:nth-child(33) { top: 60%; left: 62%; animation-delay: 1s; }
+.star:nth-child(34) { top: 5%; left: 68%; animation-delay: 0.5s; }
+.star:nth-child(35) { top: 25%; left: 72%; animation-delay: 1.3s; }
+.star:nth-child(36) { top: 45%; left: 78%; animation-delay: 0.4s; }
+.star:nth-child(37) { top: 65%; left: 82%; animation-delay: 1.1s; }
+.star:nth-child(38) { top: 10%; left: 88%; animation-delay: 0.6s; }
+.star:nth-child(39) { top: 30%; left: 92%; animation-delay: 1.4s; }
+.star:nth-child(40) { top: 50%; left: 96%; animation-delay: 0.9s; }
+.star:nth-child(41) { top: 70%; left: 3%; animation-delay: 0.2s; }
+.star:nth-child(42) { top: 15%; left: 9%; animation-delay: 1.5s; }
+.star:nth-child(43) { top: 35%; left: 14%; animation-delay: 0.8s; }
+.star:nth-child(44) { top: 55%; left: 19%; animation-delay: 0.1s; }
+.star:nth-child(45) { top: 25%; left: 24%; animation-delay: 1.2s; }
+.star:nth-child(46) { top: 45%; left: 29%; animation-delay: 0.7s; }
+.star:nth-child(47) { top: 65%; left: 34%; animation-delay: 1.6s; }
+.star:nth-child(48) { top: 10%; left: 39%; animation-delay: 0.3s; }
+.star:nth-child(49) { top: 30%; left: 44%; animation-delay: 1s; }
+.star:nth-child(50) { top: 50%; left: 49%; animation-delay: 0.5s; }
\ No newline at end of file
diff --git a/assets/pasted-20250917-221532-222d0fc4.png b/assets/pasted-20250917-221532-222d0fc4.png
new file mode 100644
index 0000000..f9f6828
Binary files /dev/null and b/assets/pasted-20250917-221532-222d0fc4.png differ
diff --git a/assets/pasted-20250917-221647-a17a0342.png b/assets/pasted-20250917-221647-a17a0342.png
new file mode 100644
index 0000000..c2fc242
Binary files /dev/null and b/assets/pasted-20250917-221647-a17a0342.png differ
diff --git a/assets/pasted-20250917-221825-c91c5ef0.png b/assets/pasted-20250917-221825-c91c5ef0.png
new file mode 100644
index 0000000..53a981b
Binary files /dev/null and b/assets/pasted-20250917-221825-c91c5ef0.png differ
diff --git a/assets/pasted-20250917-222131-0185c064.png b/assets/pasted-20250917-222131-0185c064.png
new file mode 100644
index 0000000..596948c
Binary files /dev/null and b/assets/pasted-20250917-222131-0185c064.png differ
diff --git a/assets/pasted-20250917-222344-28349d0f.png b/assets/pasted-20250917-222344-28349d0f.png
new file mode 100644
index 0000000..e2a945c
Binary files /dev/null and b/assets/pasted-20250917-222344-28349d0f.png differ
diff --git a/assets/pasted-20250917-223616-11873f05.png b/assets/pasted-20250917-223616-11873f05.png
new file mode 100644
index 0000000..6963fdb
Binary files /dev/null and b/assets/pasted-20250917-223616-11873f05.png differ
diff --git a/index.php b/index.php
index d593d8d..3f847db 100644
--- a/index.php
+++ b/index.php
@@ -57,9 +57,27 @@
                 <!-- FANTASY SCENE -->
                 <div class="fantasy-scene">
                     <div class="fantasy-moon"></div>
-                    <div class="fantasy-trees"></div>
-                    <div class="fantasy-mushrooms"></div>
-                    <div class="fantasy-mist"></div>
+                    <div class="stars-container">
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                        <div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
+                    </div>
+                    <div class="fantasy-trees">
+                        <div class="tree tree-1"></div>
+                        <div class="tree tree-2"></div>
+                        <div class="tree tree-3"></div>
+                        <div class="tree tree-4"></div>
+                        <div class="tree tree-5"></div>
+                        <div class="tree tree-6"></div>
+                    </div>
+                    
                 </div>
 
                 <!-- Garden elements will be loaded here -->
@@ -75,5 +93,24 @@
     <!-- Custom JS -->
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const themeButtons = document.querySelectorAll('.theme-btn');
+            const body = document.body;
+
+            themeButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const theme = button.getAttribute('data-theme');
+                    
+                    // Set theme on body
+                    body.setAttribute('data-theme', theme);
+
+                    // Update active button
+                    themeButtons.forEach(btn => btn.classList.remove('active'));
+                    button.classList.add('active');
+                });
+            });
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file