diff --git a/404.html b/404.html
index ed7173b..07d5c9d 100644
--- a/404.html
+++ b/404.html
@@ -10,9 +10,14 @@
     <meta content="#006b79" data-react-helmet="true" name="theme-color" />
     <title>404</title>
     <link rel="stylesheet" href="css/404.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 </head>
 <body onload="getRandomImage()">
+    <div id="particles-js"></div>
 <h1>Oops! A 404 Page!</h1>
+<div id="container">
     <p>we'll meet again
         <br>
         dont know where
@@ -23,8 +28,11 @@ <h1>Oops! A 404 Page!</h1>
         <br>
         just kidding! this page will likely never exist.. or theres an issue.. just let us know idk</p>
     <span id="result" align="center"> </span>
+    <div class="button-container">
     <a href="https://freakybob.site" id="index">Go to main page</a>
     <a href="https://github.com/Freakybob-Team/Freakybob.site/issues/new" id="issue">Make an issue</a>
+</div>
+</div>
     <audio autoplay loop><source src="https://freakybob.site/audio/EEK!.ogg" type="audio/ogg"></audio>
     <script>
         function getRandomImage() {
@@ -49,5 +57,7 @@ <h1>Oops! A 404 Page!</h1>
  return document.getElementById('result').innerHTML = '<img src="' + randomImage[number]+'" />'; 
 } 
     </script>
+<script type="text/javascript" src="particles.js"></script>
+<script type="text/javascript" src="app.js"></script>
 </body>
 </html>
diff --git a/clicker.html b/clicker.html
new file mode 100644
index 0000000..07a3258
--- /dev/null
+++ b/clicker.html
@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Freakybob Clicker</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #e4d501;
+            color: #bdca02;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+        }
+        #container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: row;
+            width: 80%;
+            max-width: 1200px;
+            background-color: #776607;
+            border-radius: 10px;
+            padding: 20px;
+        }
+        #shop {
+            width: 300px;
+            background-color: #a008ad;
+            border-radius: 10px;
+            padding: 10px;
+            box-shadow: 0 0 10px rgba(10, 10, 0, 0.5);
+            margin-right: 20px;
+        }
+        #click-area {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+        }
+        #clicker {
+            width: 200px;
+            height: 200px;
+            background-image: url('freaky (1).webp');
+            background-size: cover;
+            background-position: center;
+            cursor: pointer;
+            margin-bottom: 20px;
+            border: 2px solid #01b4eb;
+            border-radius: 50%;
+        }
+        #stats, #achievements {
+            margin-bottom: 20px;
+        }
+        button {
+            background-color: #4a6f8c;
+            color: #ffffff;
+            border: none;
+            padding: 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-top: 10px;
+            display: block;
+        }
+        button:hover:not(.disabled) {
+            background-color: #3a5e7a;
+        }
+        button.disabled {
+    background-color: #6c757d;
+    cursor: not-allowed;
+}
+
+button.enabled {
+    background-color: #4a6f8c;
+    cursor: pointer;
+}
+
+        #mute-button {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            padding: 10px 15px;
+            background-color: rgb(1, 170, 128);
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+            z-index: 1001;
+        }
+        #mute-button.muted {
+            background-color: #ff4d4d;
+        }
+        #achievements p {
+            background-color: #2a3c5d;
+            padding: 5px;
+            border-radius: 5px;
+            margin: 5px 0;
+        }
+        @keyframes slide-in-right {
+            0% {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            100% {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        @keyframes slide-out-right {
+            0% {
+                transform: translateX(0);
+                opacity: 1;
+            }
+            100% {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+        }
+        .achievement {
+            background-color: #2a3c5d;
+            padding: 5px;
+            border-radius: 5px;
+            margin: 5px 0;
+            color: white;
+            animation: slide-in-right 0.5s forwards;
+        }
+        .achievement.out {
+            animation: slide-out-right 0.5s forwards;
+        }
+    </style>
+</head>
+<body>
+    <!-- Audio elements without controls, autoplay and preload set -->
+    <audio id="background-music" loop autoplay preload="auto">
+        <source src="Sneaky-Snitch(chosic.com).mp3" type="audio/mp3">
+    </audio>
+
+    <audio id="click-sound" src="https://github.com/5quirre1/Freakybob.site/raw/main/i%E2%80%99m-spongebob-made-with-Voicemod.mp3"></audio>
+    <div id="container">
+        <div id="shop">
+            <h2>Shop</h2>
+            <button id="buy-autoclicker" class="disabled">Buy Autoclicker (100 clicks)</button>
+            <button id="buy-freakystar" class="disabled">Buy Freaky Star (300 clicks)</button>
+            <h3>Upgrades</h3>
+            <button id="buy-multiplier-1" class="disabled">1+ Clicks Multiplier (15 clicks)</button>
+            <button id="buy-multiplier-8" class="disabled">8+ Clicks Multiplier (120 clicks)</button>
+        </div>
+        <div id="click-area">
+            <div id="clicker"></div>
+            <div id="stats">
+                <p>Clicks: <span id="click-count">0</span></p>
+                <p>Clicks Per Second: <span id="clicks-per-second">0</span></p>
+            </div>
+            <div id="achievements">
+                <h2>Achievements</h2>
+            </div>
+        </div>
+    </div>
+    <!-- Mute/Unmute Button -->
+    <button id="mute-button">Mute Music</button>
+
+    <script>
+let clickCount = 0;
+let clicksPerSecond = 0;
+let autoClicker = false;
+let freakyStar = { owned: false, clicksPerSecond: 0 };
+let clickMultiplier = 1;
+let multipliers = {
+    1: { count: 0, max: 3, cost: 15, increment: 1 },
+    8: { count: 0, max: 3, cost: 120, increment: 8 }
+};
+const achievements = [
+    { name: 'Started this Journey', clicks: 1 },
+    { name: 'Beginner Clicker', clicks: 300 },
+    { name: 'You must love clicking freakybob', clicks: 900 },
+    { name: 'First 1000!', clicks: 1000 },
+    { name: 'Finger destroyer', clicks: 3000 },
+    { name: 'Intermediate clicker', clicks: 7000 },
+    { name: 'Mouse destroyer', clicks: 13000 },
+    { name: 'First 20,000!', clicks: 20000 },
+    { name: 'Beginner Freakybob', clicks: 27000 },
+    { name: 'King clicker', clicks: 70000 },
+    { name: "THE ULTIMATE FINGER DESTROYER!!", clicks: 100000 },
+    { name: 'Freakybob of the year!', clicks: 117000 },
+    { name: 'The literal Freakybob god', clicks: 130000 },
+    { name: 'The mouse is not dead yet!', clicks: 135000 },
+    { name: 'Freakybob of the century', clicks: 140000 },
+    { name: 'Freakybob of the millennium', clicks: 150000 },
+    { name: 'The ultimate Freakybob', clicks: 160000 },
+    { name: 'Freakybob of the universe', clicks: 190000 },
+    { name: 'The Freakybob God', clicks: 217000 },
+    { name: 'The..end..?', clicks: 240000 },
+    { name: 'For now...', clicks: 260000 }
+];
+
+const unlockedAchievements = new Set();
+let isMuted = false; // Default to unmuted
+
+function playClickSound() {
+    if (isMuted) return; // Prevent sound if muted
+
+    const clickSound = new Audio('https://github.com/5quirre1/Freakybob.site/raw/main/i%E2%80%99m-spongebob-made-with-Voicemod.mp3');
+    clickSound.play().catch(err => console.error(err));
+}
+
+function toggleMute() {
+    isMuted = !isMuted;
+    document.getElementById('mute-button').classList.toggle('muted', isMuted);
+    document.getElementById('background-music').muted = isMuted;
+    document.getElementById('mute-button').textContent = isMuted ? 'Unmute Music' : 'Mute Music';
+}
+
+function updateStats() {
+    document.getElementById('click-count').textContent = clickCount;
+    document.getElementById('clicks-per-second').textContent = clicksPerSecond;
+}
+
+function updateAchievements() {
+    const achievementsContainer = document.getElementById('achievements');
+    achievements.forEach(achievement => {
+        if (clickCount >= achievement.clicks && !unlockedAchievements.has(achievement.name)) {
+            unlockedAchievements.add(achievement.name);
+            const achievementElement = document.createElement('p');
+            achievementElement.textContent = achievement.name;
+            achievementElement.className = 'achievement';
+            achievementsContainer.appendChild(achievementElement);
+            setTimeout(() => {
+                achievementElement.classList.add('out');
+                setTimeout(() => achievementElement.remove(), 500);
+            }, 5000); // 5 seconds before fade out
+        }
+    });
+}
+
+function updateButtonStates() {
+    document.getElementById('buy-autoclicker').classList.toggle('disabled', clickCount < 100 || autoClicker);
+    document.getElementById('buy-freakystar').classList.toggle('disabled', clickCount < 300 || freakyStar.owned);
+    document.getElementById('buy-multiplier-1').classList.toggle('disabled', clickCount < multipliers[1].cost || multipliers[1].count >= multipliers[1].max);
+    document.getElementById('buy-multiplier-8').classList.toggle('disabled', clickCount < multipliers[8].cost || multipliers[8].count >= multipliers[8].max);
+}
+
+function buyItem(cost, itemName, enableNext) {
+    if (clickCount >= cost) {
+        clickCount -= cost;
+        updateButtonStates(); // Update button states after buying an item
+        if (enableNext) {
+            document.getElementById(enableNext).classList.remove('disabled');
+            document.getElementById(enableNext).classList.add('enabled');
+        }
+        updateStats();
+        updateAchievements();
+    }
+}
+
+function handleClick() {
+    playClickSound();
+    clickCount += 1 * clickMultiplier;
+    updateStats();
+    updateAchievements();
+    updateButtonStates(); // Update button states after a click
+}
+
+// Initialize game
+function initialize() {
+    document.getElementById('clicker').addEventListener('click', handleClick);
+    document.getElementById('buy-autoclicker').addEventListener('click', function() {
+        if (clickCount >= 100 && !autoClicker) {
+            autoClicker = true;
+            buyItem(100, 'buy-autoclicker', 'buy-freakystar');
+        }
+    });
+    document.getElementById('buy-freakystar').addEventListener('click', function() {
+        if (clickCount >= 300 && !freakyStar.owned) {
+            freakyStar.owned = true;
+            freakyStar.clicksPerSecond = 40;
+            buyItem(300, 'buy-freakystar', null);
+        }
+    });
+    document.getElementById('buy-multiplier-1').addEventListener('click', function() {
+        const upgrade = multipliers[1];
+        if (clickCount >= upgrade.cost && upgrade.count < upgrade.max) {
+            clickMultiplier += upgrade.increment;
+            upgrade.count += 1;
+            buyItem(upgrade.cost, 'buy-multiplier-1', null);
+        }
+    });
+    document.getElementById('buy-multiplier-8').addEventListener('click', function() {
+        const upgrade = multipliers[8];
+        if (clickCount >= upgrade.cost && upgrade.count < upgrade.max) {
+            clickMultiplier += upgrade.increment;
+            upgrade.count += 1;
+            buyItem(upgrade.cost, 'buy-multiplier-8', null);
+        }
+    });
+
+    // Auto-clicker and Freaky Star logic
+    setInterval(() => {
+        if (autoClicker) {
+            clickCount += 1 * clickMultiplier;
+            updateStats();
+            updateAchievements();
+        }
+    }, 1000);
+    
+    setInterval(() => {
+        if (freakyStar.owned) {
+            clickCount += freakyStar.clicksPerSecond;
+            updateStats();
+            updateAchievements();
+        }
+    }, 2000);
+
+    updateButtonStates(); // Set initial button states
+}
+
+initialize();
+
+// Add event listener for mute/unmute
+document.getElementById('mute-button').addEventListener('click', toggleMute);
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/css/404.css b/css/404.css
index cea1f97..7205f0b 100644
--- a/css/404.css
+++ b/css/404.css
@@ -1,24 +1,61 @@
+* {
+    font-family: "Poppins", serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+
 html, body {
     height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
-    background-color: #ee0c9b;
-    font-family: 'Comic Sans MS', sans-serif;
 }
 
+#container {
+    text-align: center;
+    margin-top: 0px;
+    font-size: 20px;
+    width: 1200px;
+    height: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 7px;
+    background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
+    padding:30px;
+    animation:pop-in 0.5s ease;
+    transition:
+    transform .4s ease,
+    box-shadow .4s ease;
+    animation:pop-in 0.6s ease;
+    color:#ffff;
+}
+
+#particles-js{
+    position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background: linear-gradient(135deg, #3c1053, #000000 70%, #150050);
+      }
+
 body {
     flex: 1;
     text-align: center;
 }
 
 h1 {
-    color: #333;
+    color: #fff;
     padding: 20px;
-    background-color: #87cefa;
     margin: 0;
-    border-bottom: 4px solid #e71292;
     font-size: 2em;
 }
 
@@ -31,20 +68,32 @@ footer {
     margin-top: auto;
 }
 
+img {
+    margin-bottom: 20px;
+    border-radius: 8px;
+}
+
+
 #issue {
-    background-color: #ffbb00;
-    border: none;
-    border-radius: 5px;
-    color: #333;
+    background: rgb(205,125,255);
+            background: -moz-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: -webkit-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cd7dff",endColorstr="#3d0087",GradientType=1);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 2px 20px 0 rgba(158,0,255,1);
+            border-radius: 8px;
+            color: #ffff;
     padding: 10px 20px;
     font-size: 1em;
     cursor: pointer;
-    margin-top: 20px;
+    margin-top: 200px;
     width: 150px;
     text-decoration: none;
     margin-right: auto;
     margin-left: auto;
     transition: all .4s ease;
+
 }
 
 #issue:hover {
@@ -53,10 +102,15 @@ footer {
 }
 
 #index {
-    background-color: #ffbb00;
-    border: none;
-    border-radius: 5px;
-    color: #333;
+    background: rgb(205,125,255);
+            background: -moz-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: -webkit-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cd7dff",endColorstr="#3d0087",GradientType=1);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 2px 20px 0 rgba(158,0,255,1);
+            color: #ffff;
+            border-radius: 8px;
     padding: 10px 20px;
     font-size: 1em;
     cursor: pointer;
@@ -81,4 +135,30 @@ footer {
     .gif {
         margin-left: -20px;
     }
-}
\ No newline at end of file
+}
+
+@keyframes pop-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-4rem) scale(1);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes penis {
+    0% {
+        box-shadow: none;
+  
+    }
+  
+    50%{
+       box-shadow:  0 0px 22px 0 rgba(158,0,255,1);
+    }
+  
+    100% {
+        box-shadow: none;
+    }
+  }
+  
diff --git a/css/dev.css b/css/dev.css
index 781e03a..d0c9cda 100644
--- a/css/dev.css
+++ b/css/dev.css
@@ -1,9 +1,42 @@
+* {
+    font-family: "Poppins", serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+
+
 body {
-    background-color: #ADD8E6;
-    font-family: Arial, sans-serif;
+    background: url('../images/luca-micheli-ruWkmt3nU58-unsplash.jpg');
     margin: 0;
     padding: 0;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#container {
+    text-align: center;
+    margin-top: 100px;
+    font-size: 20px;
+    width: 1200px;
+    height: 500px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 7px;
+    background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
+    padding:30px;
+    animation:pop-in 0.5s ease;
+    transition:
+    transform .4s ease,
+    box-shadow .4s ease;
+    animation:pop-in 0.6s ease;
 }
+
 h1 {
     color: #333;
     text-align: center;
@@ -14,34 +47,41 @@ h1 {
     flex-wrap: wrap;
     justify-content: center;
     margin: 20px;
+    gap: 20px;
 }
 .button-container button {
-    background: none;
-    border: 2px solid #555;
-    color: #555;
     font-size: 18px;
     cursor: pointer;
+    background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
     padding: 10px 20px;
-    border-radius: 5px;
     transition: color 0.3s, background-color 0.3s;
     margin: 5px;
 }
 .button-container button:hover {
     color: #ffffff;
-    background-color: rgb(191, 26, 224);
 }
 .contributors {
     text-align: center;
     margin-top: 30px;
 }
 .contributors button {
-    background-color: #9fd4f8;
-    border: none;
-    color: #070004;
+    transition: color 0.3s, background-color 0.3s;
+    background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
     font-size: 20px;
     cursor: pointer;
     padding: 10px;
     margin: 5px;
+    
 }
 .contributors button:hover {
     color: #fdfdf9;
@@ -50,7 +90,7 @@ h1 {
     text-align: center;
     margin: 20px;
     font-size: 18px;
-    color: #1446fb;
+    color: #ffff;
 }
 .image-container {
     text-align: center;
@@ -64,24 +104,8 @@ h1 {
 audio {
     display: none;
 }
-#pfpcred {
-    position: fixed;
-    background: none;
-    border: 2px solid #555;
-    color: #555;
-    font-size: 18px;
-    cursor: pointer;
-    padding: 5px px;
-    border-radius: 5px;
-    transition: color 0.3s, background-color 0.3s;
-    margin: 5px;
-    margin-left: 600px;
-}
-#pfpcred:hover {
-    color: #ffffff;
-    background-color: rgb(4, 128, 133);
-}
-#pfpcred {width: 170px;}
+
+
 
 @media (max-width: 600px) {
     .button-container button {
diff --git a/css/downloads.css b/css/downloads.css
index bb5886f..2a9ba8c 100644
--- a/css/downloads.css
+++ b/css/downloads.css
@@ -1,47 +1,100 @@
-body {
-    font-family: "Noto Sans", sans-serif;
-    background-color: rgb(1, 83, 121);
+* {
+    font-family: "Poppins", serif;
+    font-weight: 400;
+    font-style: normal;
 }
+
+#particles-js{
+    position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background: linear-gradient(135deg, #3c1053, #000000 70%, #150050);
+      }
+
+
+      #container {
+        text-align: center;
+        margin-top: 100px;
+        font-size: 20px;
+        width: 1200px;
+        height: 400px;
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 7px;
+        background: none;
+        background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+        border: 1px solid rgba(255,255,2555,0.18);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+        border-radius: 15px;
+        padding:30px;
+        animation:pop-in 0.5s ease;
+        transition:
+        transform .4s ease,
+        box-shadow .4s ease;
+        animation:pop-in 0.6s ease;
+    }
+
+
+    .button-container {
+        margin-top: 10px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 20px;
+    }
+      
     a {
-    padding: 15px 25px;
-    font-size: 20px;
-    cursor: pointer;
-    background-color: rgb(172, 147, 5);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-    transition: all 0.3s ease;
-    max-width: 220px;
-    width: 30%;
-    margin-left: 46%;
-    margin-right: 46%;
-    text-decoration: none;
+        
+        margin-top: 10px;
+            display: block;
+            height: 20px;
+            width: 400px;
+            padding: 20px 0px 20px 10px;
+            border-radius: 30px;
+            margin-left: 5px;
+            background: rgb(205,125,255);
+            background: -moz-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: -webkit-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cd7dff",endColorstr="#3d0087",GradientType=1);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 2px 20px 0 rgba(158,0,255,1);
+            background-size: 300%;
+            background-position: left;
+            text-align: center;
+            font-family: Helvetica;
+            font-size: 22px;
+            color: mintcream;
+            text-decoration: none;
+            transition: background-position 1s ease-in-out;
+            transition: all 1s ease-in-out;
+            position: absolute;
+            animation: penis 2s ease-in-out infinite;
 }
 h1 {
     text-align: center;
     color: white;
     font-size: 40px;
-    text-shadow: 10px 10px 10px rgba(248, 232, 3, 0.3);
 }
 h3 {
     text-align: center;
     color: white;
     font-size: 25px;
-    text-shadow: 10px 10px 10px rgba(248, 232, 3, 0.3);
 }
 #para1 {
     text-align: center;
     color: white;
     font-size: 20px;
-    text-shadow: 10px 10px 10px rgba(248, 232, 3, 0.3);
 }
 
 #para2 {
     text-align: center;
     color: white;
     font-size: 20px;
-    text-shadow: 10px 10px 10px rgba(248, 232, 3, 0.3);
 }
 
 @media (max-width: 770px) {
@@ -70,3 +123,30 @@ h3 {
         margin-left: 0%;
     }
   }
+
+
+  @keyframes pop-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-4rem) scale(1);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes penis {
+    0% {
+        box-shadow: none;
+  
+    }
+  
+    50%{
+       box-shadow:  0 0px 22px 0 rgba(158,0,255,1);
+    }
+  
+    100% {
+        box-shadow: none;
+    }
+  }
+  
diff --git a/css/freakymas.css b/css/freakymas.css
index ad88e6f..96c4abf 100644
--- a/css/freakymas.css
+++ b/css/freakymas.css
@@ -1,12 +1,18 @@
 /* thanks https://github.com/hyperstown/pure-snow.js/blob/master/style.css <3 */
+
+* {
+  font-family: "Delius Swash Caps", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
 body {
-  background: url("https://freakybob.site/images/chirstmas-1.png") no-repeat center center fixed;
+  background: url("../images/christmas-celebration-with-decorated-tree.jpg") no-repeat center center fixed;
   background-size: cover;
   overflow-x: hidden;
   min-height: 100vh;
   overflow-y: hidden;
   color: white;
-  font-family: 'Comic Sans MS', sans-serif;
   min-width: 100vw;
   display: flex;
   flex-direction: column;
@@ -30,37 +36,39 @@ body::before {
 
 
 h1 {
+  margin-top: 80px;
   position: sticky;
   font-family: 'Comic Sans MS', sans-serif;
   text-align: center;
   color: rgb(218, 203, 3);
   font-size: 42px;
-  margin-top: -20px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
-
 }
 
 h2 {
-  color: rgb(55, 255, 0);
+  color: #fff;
 }
 
-
 #info-button {
 margin-top: 12px;
   padding: 15px 25px;
   font-size: 18px;
   cursor: pointer;
-  background-color: rgb(41, 172, 5);
   color: white;
   border: none;
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
   max-width: 220px;
   width: 100%;
+  background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    animation: penis 2s  ease-in-out infinite;
+    margin-top: 10px;
 }
 #info-button:hover {
-  background-color: rgb(102, 255, 163);
   transform: translateY(-3px) scale(1.05);
 }
 #gallery-button {
@@ -68,17 +76,21 @@ margin-top: 12px;
   padding: 15px 25px;
   font-size: 18px;
   cursor: pointer;
-  background-color: rgb(50, 172, 5);
   color: white;
   border: none;
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
   max-width: 220px;
   width: 100%;
+  background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    animation: penis 2s  ease-in-out infinite;
+    margin-top: 10px;
 }
 #gallery-button:hover {
-  background-color: rgb(218, 3, 3);
   transform: translateY(-3px) scale(1.05);
 }
 #music-button {
@@ -86,17 +98,21 @@ margin-top: 12px;
   padding: 15px 25px;
   font-size: 18px;
   cursor: pointer;
-  background-color: rgb(218, 3, 3);
   color: white;
   border: none;
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
   max-width: 220px;
   width: 100%;
+  background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    animation: penis 2s  ease-in-out infinite;
+    margin-top: 10px;
 }
 #music-button:hover {
-  background-color: rgb(50, 172, 5);
   transform: translateY(-3px) scale(1.05);
 }
 
@@ -105,17 +121,21 @@ margin-top: 12px;
   padding: 15px 25px;
   font-size: 18px;
   cursor: pointer;
-  background-color: rgb(218, 3, 3);
   color: white;
   border: none;
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
   max-width: 220px;
   width: 100%;
+  background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    animation: penis 2s  ease-in-out infinite;
+    margin-top: 10px;
 }
 #team-button:hover {
-  background-color: rgb(50, 172, 5);
   transform: translateY(-3px) scale(1.05);
 }
 #activities-button {
@@ -123,20 +143,44 @@ margin-top: 12px;
   padding: 15px 25px;
   font-size: 18px;
   cursor: pointer;
-  background-color: rgb(50, 172, 5);
   color: white;
   border: none;
   border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
   max-width: 220px;
   width: 100%;
+  background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    animation: penis 2s  ease-in-out infinite;
+    margin-top: 10px;
 }
 #activities-button:hover {
-  background-color: rgb(218, 3, 3);
   transform: translateY(-3px) scale(1.05);
 }
 
+#activities-button:after {
+  content: '✨';
+  position: absolute;
+  color: #fffacd;
+  font-size: 1.2em;
+  top: -5px;
+  left: 15px;
+  animation: sparkle 2s infinite ease-in-out;
+}
+
+
+.ok {
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+.d {
+  margin-bottom: 10px;
+}
+
   
 #gpl-3 {
   text-align: center;
@@ -156,18 +200,20 @@ margin-top: 12px;
 }
 #music-player {
   position: fixed;
-  bottom: 20px;
+  bottom: 150px;
   right: 20px;
   width: 220px;
-  background-color: #006b7971; 
-  border: 4px solid #cd0b0b;
   border-radius: 15px;
   padding: 15px 10px;
   color: #fff;
   font-family: Arial, sans-serif;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
   text-align: center;
   z-index: 1000;
+  background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
 }
 
 
@@ -175,15 +221,22 @@ margin-top: 12px;
   font-size: 0.9em;
   font-weight: bold;
   margin-bottom: 8px;
-  color: #92fc77;
-  background-color: rgb(10, 95, 71);
+  background: rgb(131,58,180);
+background: -moz-radial-gradient(circle, rgba(131,58,180,.1) 0%, rgba(253,29,29,0.1) 50%, rgba(252,176,69,.1) 100%);
+background: -webkit-radial-gradient(circle, rgba(131,58,180,.1) 0%, rgba(253,29,29,.1) 50%, rgba(252,176,69,.1) 100%);
+background: radial-gradient(circle, rgba(131,58,180,.1) 0%, rgba(253,29,29,.1) 50%, rgba(252,176,69,.1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#fcb045",GradientType=.1);
   border-radius: 8px;
   padding: 5px 10px;
 }
 
 
 #music-player button {
-  background-color: #63b222; 
+  background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 100px solid rgba(255,255,255);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
   color: #fff;
   border: none;
   border-radius: 50%;
@@ -193,7 +246,6 @@ margin-top: 12px;
   font-size: 1em;
   cursor: pointer;
   transition: background-color 0.3s, transform 0.2s;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 #music-player #brainrot-button {
   font-size: 11px;
@@ -229,14 +281,7 @@ a {
 text-decoration: none;
 color: wheat;
 }
-#socials {
-transition: all 0.3s ease;
-text-align: center;
-margin-top: -20px;
-}
-#socials:hover {
-transform: translateY(-3px) scale(1.05);
-}
+
 #music-credits {
   text-align: center;
   margin-top: 20px;
@@ -252,6 +297,65 @@ transform: translateY(-3px) scale(1.05);
   color: orange;
 }
 
+.footer {
+  margin-top: 100px;
+  display: flex;
+        border: 1px solid #ffff;
+        width:2000px;
+        height:200px;
+        background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+}
+
+.footer p {
+  margin-left: 39%;
+}
+
+.footer img {
+  width: 60px;
+  height: 50px;
+}
+
+#social-buttons-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin-left: -425px;
+  margin-top: -10px;
+
+}
+
+#social-buttons-container img {
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  transition: 0.3s;
+}
+
+#discord-button img {
+  width: 80px;
+  height: 60px;
+}
+
+#pikidiary-button img {
+  width: 70px;
+  height: 40px;
+}
+
+#instagram-button {
+  width: 70px;
+  height: 40px;
+}
+
+#social-buttons-container img:hover {
+  transform: scale(1.1);
+}
+
 @media screen and (max-width: 600px) {
   h1 {
     margin-top: -60px;
@@ -328,11 +432,41 @@ margin-top: -10px;
 }
 }
 
+@keyframes penis {
+  0% {
+      box-shadow: none;
+
+  }
+
+  50%{
+     box-shadow:  0 0px 12px 0 rgb(201, 0, 201);
+  }
 
+  100% {
+      box-shadow: none;
+  }
+}
 
 
 
 
 
+@keyframes swag {
+  from {
+    color: #6666ff;
+  }
+  10% {
+    color: #0099ff;
+  }
+  50% {
+    color: #00ff00;
+  }
+  75% {
+    color: #ff3399;
+  }
+  100% {
+    color: #6666ff;
+  }
+}
 
 
diff --git a/css/info copy.css b/css/info copy.css
new file mode 100644
index 0000000..1b077d6
--- /dev/null
+++ b/css/info copy.css	
@@ -0,0 +1,313 @@
+body {
+     background-color: rgb(193, 111, 12);
+    font-family: "Noto Sans", sans-serif;
+}
+h1 {
+    text-align: center;
+    color: rgb(217, 224, 16);
+}
+p {
+    text-align: center;
+    color: rgb(206, 190, 190);
+}
+h2 {
+    text-align: center;
+    font-size: 20px;
+    color: #dbde06;
+}
+h3 {
+    text-align: center;
+    font-size: 40px;
+    color: #dbde06;
+    margin-top: -50px;
+}
+a {
+    color: rgb(203, 171, 233);
+
+}
+h4 {
+    text-align: center;
+    font-size: 40px;
+    color: #e0ba9c;
+    margin-top: -5px;
+}
+#para4 {
+    color: rgb(2, 254, 250);
+    font-size: 20px;
+}
+#para5 {
+    color: aqua;
+    margin-top: -50px;
+}
+#para6 {
+    color: rgb(12, 240, 149);
+    margin-top: 40px;
+    text-align: left;
+}
+.button-container {
+    text-align: center;
+    margin-top: 20px;
+}
+.button-container button {
+    background: none;
+    border: none;
+    color: #e7d915;
+    margin: 0 15px;
+    font-size: 20px;
+    cursor: pointer;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: 2px solid #c107b5;
+    transition: color 0.7s, background-color 0.7s;
+}
+.button-container button:hover {
+    color: #0f000f;
+    background-color: #f3ef14;
+    transform: scale(1.1);
+}
+.content-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 40px;
+}
+#freakybob-orgin, #freakybob-found {
+    margin-left: 20px;
+    margin-top: 20px;
+}
+#freakybob-orgin:hover, #freakybob-found:hover {
+    transition: 0.8s;
+    transform: scale(1.1);
+}
+#freakybob-found {
+    width: 320px;
+}
+#bought-freakybob {
+    margin-left: 20px;
+    width: 320px;
+    margin-top: 40px;
+}
+#bought-freakybob:hover {
+    transition: 0.8s;
+    transform: scale(1.1);
+}
+
+#carousel-container {
+    margin-top: 120px;
+}
+#carousel {
+    display: flex;
+    overflow: hidden;
+    width: 400px;
+}
+.carousel-images {
+    display: flex;
+    transition: transform 0.5s ease;
+    border-radius: 8px;
+}
+.carousel-images img {
+    width: 400px;
+    height: auto;
+    cursor: pointer;
+}
+#para1, #para2, #para3 {
+    text-align: left;
+    margin-top: 20px;
+    font-size: 14px;
+    color: #bede09;
+}
+
+.modal {
+    display: none; 
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    justify-content: center;
+    align-items: center;
+}
+.modal img {
+    max-width: 90%;
+    max-height: 90%;
+    border: 5px solid white;
+    border-radius: 10px;
+}
+.close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: white;
+    font-size: 40px;
+    font-weight: bold;
+    cursor: pointer;
+}
+.point-button {
+    border-radius: 7px;
+    color: #a9e411;
+    border: none;
+    font-size: medium;
+    cursor: pointer;
+   margin-left: 634px;
+   background-color: #106d7e;
+}
+.point-button:hover {
+    transform: scale(1.1);
+    transition: 0.7s;
+    background-color: #f3ef14;
+    color: #0f000f;
+}
+.DouKnow-button {
+    border-radius: 7px;
+    color: #a9e411;
+    border: none;
+    font-size: medium;
+    cursor: pointer;
+   margin-left: 579px;
+   background-color: #106d7e;
+}
+.DouKnow-button:hover {
+    transform: scale(1.1);
+    transition: 0.7s;
+    background-color: #f3ef14;
+    color: #0f000f;
+}
+.description {
+    color: rgb(209, 223, 15);
+    background-color: rgb(8, 128, 128);
+    border-radius: 9px;
+    font-size: 20px;
+}
+.close-button {
+    background-color: #c107b5;
+    color: rgb(40, 187, 187);
+    border: none;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+  }
+@media (max-width: 768px) {
+    .content-wrapper {
+        flex-direction: column;
+        align-items: center;
+        margin: 20px 5%;
+    }
+    #freakybob-orgin, #freakybob-found {
+        margin-left: 0;
+        margin-top: 20px;
+    }
+    #bought-freakybob {
+        margin-left: 0;
+        margin-top: 20px;
+    }
+    .carousel-button {
+    background-color: #c107b5;
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    font-size: 18px;
+}
+.carousel-button:hover {
+    background-color: #f3ef14;
+    color: #0f000f;
+}
+#carousel-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: -10px;
+    margin-right: -5px;
+}
+#carousel {
+    display: flex;
+    overflow: hidden;
+    width: 300px;
+    height: 200px;
+}
+.carousel-images {
+    display: flex;
+    transition: transform 0.5s ease;
+}
+.carousel-images img {
+    width: 300px;
+    height: auto;
+    cursor: pointer;
+}
+#para1, #para2, #para3 {
+    text-align: left;
+    margin-top: 20px;
+    font-size: 14px;
+    color: #bede09;
+}
+#para4 {
+    color: rgb(2, 254, 250);
+    font-size: 20px;
+}
+.modal {
+    display: none; 
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    justify-content: center;
+    align-items: center;
+}
+.modal img {
+    max-width: 110%;
+    max-height: 160%;
+    border: 5px solid white;
+    border-radius: 10px;
+}
+.close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: white;
+    font-size: 40px;
+    font-weight: bold;
+    cursor: pointer;
+}
+h3 {
+    text-align: center;
+    font-size: 40px;
+    color: #dbde06;
+    margin-top: 90px;
+}
+h4 {
+    text-align: center;
+    font-size: 40px;
+    color: #dbde06;
+    margin-top: -30px;
+}
+
+#para6 {
+    color: rgb(12, 221, 218);
+    font-size: 20px;
+    text-align: center;
+
+}
+.point-button {
+    background-color: #106d7e;
+    margin-left: 30px;
+    border: #dbde06;
+    border-radius: 7px;
+}
+.DouKnow-button {
+    margin-top:20px;
+    background-color: #106d7e;
+    margin-left: -1px;
+    border: #dbde06;
+    border-radius: 7px;
+}
+} 
+/* :3 */
diff --git a/css/info.css b/css/info.css
index 0c90cc9..6fc95d0 100644
--- a/css/info.css
+++ b/css/info.css
@@ -1,326 +1,200 @@
-body {
-     background-color: rgb(193, 111, 12);
-    font-family: "Noto Sans", sans-serif;
-}
-h1 {
-    text-align: center;
-    color: rgb(217, 224, 16);
+
+* {
+    font-family: "Poppins", serif;
+    font-weight: 400;
+    font-style: normal;
 }
+
+#particles-js{
+    position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background: linear-gradient(135deg, #3c1053, #000000 70%, #150050);
+      }
+    
 p {
-    text-align: center;
-    color: rgb(206, 190, 190);
+  text-align: center;
+  font-size: 40px;
+  color: rgb(255, 255, 255);
+  transition: all 1s ease-in-out;
+  margin-bottom: 10px;
 }
-h2 {
-    text-align: center;
-    font-size: 20px;
-    color: #dbde06;
-}
-h3 {
-    text-align: center;
-    font-size: 40px;
-    color: #dbde06;
-    margin-top: -50px;
+h1 {
+    margin-bottom: 10px;
+  text-align: center;
+  font-size: 30px;
+  color: rgb(255, 255, 255);
+  transition: all 1s ease-in-out;
 }
-a {
-    color: rgb(203, 171, 233);
 
+#para1, #para2, #para3, #para4 {
+    font-size:25px;
 }
-h4 {
+
+h2, h3 {
     text-align: center;
-    font-size: 40px;
-    color: #e0ba9c;
-    margin-top: -5px;
-}
-#para4 {
-    color: rgb(2, 254, 250);
-    font-size: 20px;
-}
-#para5 {
-    color: aqua;
-    margin-top: -50px;
-}
-#para6 {
-    color: rgb(12, 240, 149);
-    margin-top: 40px;
-    text-align: left;
+  font-size: 20px;
+  color: rgb(255, 255, 255);
+  transition: all 1s ease-in-out;
+  margin-top: 100px;
 }
 .button-container {
+    margin-top: -20px;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: 20px;
+        }
+        .button-container a {
+            display: block;
+            height: 20px;
+            width: 400px;
+            padding: 20px 0px 20px 10px;
+            border-radius: 30px;
+            margin-left: 5px;
+            background: rgb(205,125,255);
+            background: -moz-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: -webkit-linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            background: linear-gradient(90deg, rgba(205,125,255,1) 0%, rgba(61,0,135,1) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cd7dff",endColorstr="#3d0087",GradientType=1);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 2px 20px 0 rgba(158,0,255,1);
+            background-size: 300%;
+            background-position: left;
+            text-align: center;
+            font-family: Helvetica;
+            font-size: 22px;
+            color: mintcream;
+            text-decoration: none;
+            transition: background-position 1s ease-in-out;
+            transition: all 1s ease-in-out;
+            position: absolute;
+            animation: penis 2s ease-in-out infinite;
+        }
+        .button-container a:hover {
+            position: right;
+        }
+#container {
     text-align: center;
-    margin-top: 20px;
-}
-.button-container button {
-    background: none;
-    border: none;
-    color: #e7d915;
-    margin: 0 15px;
+    margin-top: 100px;
     font-size: 20px;
-    cursor: pointer;
-    padding: 10px 20px;
-    border-radius: 5px;
-    border: 2px solid #c107b5;
-    transition: color 0.7s, background-color 0.7s;
-}
-.button-container button:hover {
-    color: #0f000f;
-    background-color: #f3ef14;
-    transform: scale(1.1);
-}
-.content-wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin: 40px;
-}
-#freakybob-orgin, #freakybob-found {
-    margin-left: 20px;
-    margin-top: 20px;
-}
-#freakybob-orgin:hover, #freakybob-found:hover {
-    transition: 0.8s;
-    transform: scale(1.1);
-}
-#freakybob-found {
-    width: 320px;
-}
-#bought-freakybob {
-    margin-left: 20px;
-    width: 320px;
-    margin-top: 40px;
-}
-#bought-freakybob:hover {
-    transition: 0.8s;
-    transform: scale(1.1);
-}
-.carousel-button {
-    background-color: #c107b5;
-    color: white;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    font-size: 18px;
+    width: 1200px;
+    height: 1800px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 7px;
+    background: none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
+    padding:30px;
+    animation:pop-in 0.5s ease;
+    transition:
+    transform .4s ease,
+    box-shadow .4s ease;
+    animation:pop-in 0.6s ease;
 }
-.carousel-button:hover {
-    background-color: #f3ef14;
-    color: #0f000f;
+
+
+#freakybob-found, #bought-freakybob, #freakybob-orgin {
+    border-radius: 8px;
 }
+
 #carousel-container {
+    gap: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 120px;
 }
 #carousel {
+    gap: 20px;
     display: flex;
     overflow: hidden;
     width: 400px;
 }
 .carousel-images {
+    gap: 20px;
     display: flex;
     transition: transform 0.5s ease;
 }
 .carousel-images img {
+    border-radius: 8px;
+    gap: 20px;
     width: 400px;
-    height: auto;
+    height: 200px   ;
     cursor: pointer;
 }
-#para1, #para2, #para3 {
-    text-align: left;
-    margin-top: 20px;
-    font-size: 14px;
-    color: #bede09;
-}
 
-.modal {
-    display: none; 
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
-    justify-content: center;
-    align-items: center;
-}
-.modal img {
-    max-width: 90%;
-    max-height: 90%;
-    border: 5px solid white;
-    border-radius: 10px;
-}
-.close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    color: white;
-    font-size: 40px;
-    font-weight: bold;
-    cursor: pointer;
-}
-.point-button {
-    border-radius: 7px;
-    color: #a9e411;
-    border: none;
-    font-size: medium;
-    cursor: pointer;
-   margin-left: 634px;
-   background-color: #106d7e;
-}
-.point-button:hover {
-    transform: scale(1.1);
-    transition: 0.7s;
-    background-color: #f3ef14;
-    color: #0f000f;
-}
-.DouKnow-button {
-    border-radius: 7px;
-    color: #a9e411;
-    border: none;
-    font-size: medium;
-    cursor: pointer;
-   margin-left: 579px;
-   background-color: #106d7e;
-}
-.DouKnow-button:hover {
-    transform: scale(1.1);
-    transition: 0.7s;
-    background-color: #f3ef14;
-    color: #0f000f;
-}
-.description {
-    color: rgb(209, 223, 15);
-    background-color: rgb(8, 128, 128);
-    border-radius: 9px;
-    font-size: 20px;
-}
-.close-button {
-    background-color: #c107b5;
-    color: rgb(40, 187, 187);
-    border: none;
-    padding: 10px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 4px 2px;
-    cursor: pointer;
-  }
-@media (max-width: 768px) {
-    .content-wrapper {
-        flex-direction: column;
-        align-items: center;
-        margin: 20px 5%;
+
+@media screen and (max-width: 600px) {
+    p {
+        font-size: 40px;
     }
-    #freakybob-orgin, #freakybob-found {
-        margin-left: 0;
-        margin-top: 20px;
+
+    h1 {
+        font-size: 20px;
     }
-    #bought-freakybob {
-        margin-left: 0;
-        margin-top: 20px;
+    #countdown {
+        font-size: 15px;
+        width: 300px;
+        height: 300px;
+        margin-top: 50px;
+        margin-bottom: 10px;
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 7px;
     }
-    .carousel-button {
-    background-color: #c107b5;
-    color: white;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    font-size: 18px;
-}
-.carousel-button:hover {
-    background-color: #f3ef14;
-    color: #0f000f;
-}
-#carousel-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: -10px;
-    margin-right: -5px;
-}
-#carousel {
-    display: flex;
-    overflow: hidden;
-    width: 300px;
-    height: 200px;
-}
-.carousel-images {
-    display: flex;
-    transition: transform 0.5s ease;
-}
-.carousel-images img {
-    width: 300px;
-    height: auto;
-    cursor: pointer;
-}
-#para1, #para2, #para3 {
-    text-align: left;
-    margin-top: 20px;
-    font-size: 14px;
-    color: #bede09;
-}
-#para4 {
-    color: rgb(2, 254, 250);
-    font-size: 20px;
-}
-.modal {
-    display: none; 
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
-    justify-content: center;
-    align-items: center;
-}
-.modal img {
-    max-width: 110%;
-    max-height: 160%;
-    border: 5px solid white;
-    border-radius: 10px;
-}
-.close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    color: white;
-    font-size: 40px;
-    font-weight: bold;
-    cursor: pointer;
-}
-h3 {
-    text-align: center;
-    font-size: 40px;
-    color: #dbde06;
-    margin-top: 90px;
-}
-h4 {
-    text-align: center;
-    font-size: 40px;
-    color: #dbde06;
-    margin-top: -30px;
+    .button-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: 20px;
+        }
+        .button-container button {
+            background: none;
+            border: 2px solid #d1219c;
+            color: #17e0bf;
+            font-size: 18px;
+            cursor: pointer;
+            padding: 10px 20px;
+            border-radius: 5px;
+            transition: color 0.3s, background-color 0.3s;
+            margin: 5px;
+        }
+        .button-container button:hover {
+            color: #ffffff;
+            background-color: rgb(6, 110, 124);
+        }
 }
 
-#para6 {
-    color: rgb(12, 221, 218);
-    font-size: 20px;
-    text-align: center;
+@keyframes pop-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-4rem) scale(1);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 
-}
-.point-button {
-    background-color: #106d7e;
-    margin-left: 30px;
-    border: #dbde06;
-    border-radius: 7px;
-}
-.DouKnow-button {
-    margin-top:20px;
-    background-color: #106d7e;
-    margin-left: -1px;
-    border: #dbde06;
-    border-radius: 7px;
-}
-} 
-/* :3 */
+  @keyframes penis {
+    0% {
+        box-shadow: none;
+  
+    }
+  
+    50%{
+       box-shadow:  0 0px 22px 0 rgba(158,0,255,1);
+    }
+  
+    100% {
+        box-shadow: none;
+    }
+  }
+  
diff --git a/css/team.css b/css/team.css
index b042901..bb2e217 100644
--- a/css/team.css
+++ b/css/team.css
@@ -1,11 +1,19 @@
+* {
+    font-family: "Poppins", serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+
 body {
-    background-color: #277811;
-    font-family: "Comic Sans MS", "Comic Sans";
+    background: url(../images/17001-3840x2160-desktop-4k-mountain-wallpaper.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
     margin: 0;
     padding: 0;
 }
 h1 {
-    color: #13f0b2;
+    color: #fff;
     text-align: center;
     margin: 20px;
 }
@@ -16,21 +24,23 @@ h1 {
     margin: 20px;
 }
 .button-container button {
-    background: none;
-    border: 2px solid #0ebd9d;
-    color: #74d5b9;
+    background:none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
     font-size: 18px;
     cursor: pointer;
     padding: 10px 20px;
-    border-radius: 5px;
     transition: color 0.3s, background-color 0.3s;
     margin: 5px;
 }
 .button-container button:hover {
     color: #ffffff;
-    background-color: rgb(191, 26, 224);
 }
 
+
 .contributors button:hover {
     color: #fdfdf9;
 }
@@ -39,6 +49,7 @@ h1 {
     margin: 20px;
     font-size: 18px;
     color: #f8f9f9;
+    background:none;
 }
 .image-container {
     text-align: center;
@@ -53,22 +64,51 @@ audio {
     display: none;
 }
 h2 {
-    color: #75e207;
-    margin-left: 120px;
+    color: #ffff;
+    margin-left: 20px;
 }
+
+
 .graphics {
-    margin-left: 60px;
-    background-color: #13f0b176;
+    margin-left: 440px;
+    background:none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
     border-radius: 8px;
-    height: 250px;
-    width: 300px;
+    height: 255px;
+    width: 500px;
+    text-align: center;
 }
+
+.testers {
+
+    text-align: center;
+    margin-top: -150px;
+    margin-left: 550px;
+    height: 255px;
+    width:500px;
+    background:none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
+    border-radius: 8px;
+}
+
 #Sspruce, #Tina {
+    background:none;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1)rgba(255,255,255,0)) ;
+    border: 1px solid rgba(255,255,2555,0.18);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,37);
+    border-radius: 15px;
     margin-top: 30px;
     height: 40px;
     width: 100px;
-    background-color: #75e207;
-    border-radius: 7px;
     margin-left: 20px;
     border: none;
     cursor: pointer;
@@ -76,8 +116,7 @@ h2 {
     
 }
 #Sspruce:hover, #Tina:hover {
-    color: #1d896c;
-    background-color: rgb(104, 238, 15);
+    color: #ffffff;
     text-decoration: underline;
 }
 
diff --git a/dev.html b/dev.html
index 9d3dfbc..de78ccf 100644
--- a/dev.html
+++ b/dev.html
@@ -10,11 +10,14 @@
     <meta content="https://raw.githubusercontent.com/Freakybob-Team/Freakybob.site/main/images/Freaky_Bob_founding.png" property="og:image" />
     <meta content="#006b79" data-react-helmet="true" name="theme-color" />
     <link rel="icon" type="image/png" href="images/Freaky_Bob_founding.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <title>Team</title>
     <link rel="stylesheet" href="css/dev.css">
 </head>
 <body>
-
+    <div id="container">
     <h1>These are the people who develop for freakybob.site!</h1>
     <audio
         src="audio/Carefree(chosic.com).mp3"
@@ -43,7 +46,7 @@ <h1>These are the people who develop for freakybob.site!</h1>
     <div class="image-container" id="person-image" style="display: none;">
         <img id="image" alt="Person Image">
     </div>
-    <a href="https://freakybob.site/credpfp"><button id="pfpcred">For pfp credit, please click here!</button></a>
+</div>
     <script src="js/dev.js"></script>
 </body>
 </html>
diff --git a/downloads.html b/downloads.html
index f9dce51..558a204 100644
--- a/downloads.html
+++ b/downloads.html
@@ -12,13 +12,22 @@
     <link rel="icon" type="image/x-icon" href="images/Main.ico">
     <title>Downloads! | Freakybob.site</title>
     <link rel="stylesheet" href="css/downloads.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 </head>
 <body>
+    <div id="particles-js"></div>
 <h1>Downloads</h1>
+<div id="container">
 <h3>Freakybob.efi</h3>
 <p id="para2"><strong>Created by: mpax235</strong></p>
 <p id="para1">An EFI program that prints freakybob.</p>
+<div class="button-container">
 <a href="https://cdn.freakybob.site/Freakybob.efi">Download</a>
-<p id="para2">THIS PAGE IS <s>NOT</s> READY FOR PUBLIC USE!!</p>
+</div>
+</div>
+<script type="text/javascript" src="particles.js"></script>
+   <script type="text/javascript" src="app.js"></script>
 </body>
 </html>
diff --git a/images/140533-3840x2160-desktop-4k-mountain-background.jpg b/images/140533-3840x2160-desktop-4k-mountain-background.jpg
new file mode 100644
index 0000000..c886d91
Binary files /dev/null and b/images/140533-3840x2160-desktop-4k-mountain-background.jpg differ
diff --git a/images/17001-3840x2160-desktop-4k-mountain-wallpaper.jpg b/images/17001-3840x2160-desktop-4k-mountain-wallpaper.jpg
new file mode 100644
index 0000000..1bbc2be
Binary files /dev/null and b/images/17001-3840x2160-desktop-4k-mountain-wallpaper.jpg differ
diff --git a/images/christmas-celebration-with-decorated-tree.jpg b/images/christmas-celebration-with-decorated-tree.jpg
new file mode 100644
index 0000000..34866c8
Binary files /dev/null and b/images/christmas-celebration-with-decorated-tree.jpg differ
diff --git a/images/luca-micheli-ruWkmt3nU58-unsplash.jpg b/images/luca-micheli-ruWkmt3nU58-unsplash.jpg
new file mode 100644
index 0000000..805cc94
Binary files /dev/null and b/images/luca-micheli-ruWkmt3nU58-unsplash.jpg differ
diff --git a/images/trees-with-christmas-lights_729895-13.avif b/images/trees-with-christmas-lights_729895-13.avif
new file mode 100644
index 0000000..aed477d
Binary files /dev/null and b/images/trees-with-christmas-lights_729895-13.avif differ
diff --git a/index.html b/index.html
index 3b0fadf..be7e1d6 100644
--- a/index.html
+++ b/index.html
@@ -76,6 +76,9 @@
     <link rel="icon" type="image/x-icon" href="images/FreakybobDOTsite.png">
     <link rel="stylesheet" href="css/freakymas.css">
     <link rel="manifest" href="/manifest.json">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 </head>
 <body>
     <div id="snow" data-count="200"></div>
@@ -84,7 +87,6 @@
         <a>To continue to the website, please enable JavaScript.</a>
     </noscript>
     <h1 id="main-title">Freakybob</h1>
-    <a href="https://freakybob.site/Socials" class="socials" id="socials">Socials</a>
 
     <a href="https://freakybob.site/info"><button id="info-button">Check out the info page!</button></a>
     <h2>
@@ -98,19 +100,44 @@ <h2>
     <a href="https://freakybob.site/activities" id="activities"><button id="activities-button">More activities!</button></a>
     
 <script src="js/index.js"></script>
-<div align='center'><a href='https://www.free-website-hit-counter.com'><img src='https://www.free-website-hit-counter.com/zc.php?d=9&id=1001&s=14' border='0' alt='Free Website Hit Counter'></a><br /><small></small></div>
-
-<div id="gplLicenseText">
-    <footer><p id="gpl-3">No Rights Reserved. All pages are licensed under GPL-3.</p></footer>
-    <!--<footer id="music-credits">Music by <a href="https://pixabay.com/users/calvinclavier-16027823/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=250834">Calvin Clavier</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=250834">Pixabay</a></footer>-->
-</div>
 <div id="music-player">
     <div id="current-song">Playing: Greg Sexy sim</div>
     <button id="prev-button">◁</button>
-    <button id="play-pause-button">▷II</button>
+    <button id="play-pause-button">II</button>
     <button id="next-button">▷</button>
     <button id="brainrot-button">Enable Brainrot Mode</button>
 </div>
+<div class="d"></div>
+<div align='center' ><a href='https://www.free-website-hit-counter.com' ><img class="ok" src='https://www.free-website-hit-counter.com/zc.php?d=9&id=1001&s=14' border='0' alt='Free Website Hit Counter'></a><br /><small></small></div>
+
+<div id="gplLicenseText">
+    <!--<footer id="music-credits">Music by <a href="https://pixabay.com/users/calvinclavier-16027823/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=250834">Calvin Clavier</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=250834">Pixabay</a></footer>-->
+</div>
+
+<footer>
+    <div class="footer"><p id="gpl-3">No Rights Reserved. All pages are licensed under GPL-3.</p>
+        <div id="social-buttons-container">
+            <a href="https://github.com/Freakybob-Team/Freakybob.site" id="github-button">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/GitHub_Invertocat_Logo.svg/640px-GitHub_Invertocat_Logo.svg.png" alt="GitHub Logo">
+            </a>
+            <a href="https://discord.gg/T9z27hv7FN" id="discord-button">
+                <img src="images/discord.png" alt="Discord logo">
+            </a>
+            <a href="https://bsky.app/profile/freakybob.site" id="bluesky-button">
+                <img src="images/Bluesky.png" alt="Bluesky logo">
+            </a>
+            <a href="https://pikidiary.lol/users/freakybob" id="pikidiary-button">
+                <img src="images/piki.png" alt="Pikidiary logo">
+            </a>
+            <a href="http://blog.freakybob.site/" id="freakyblog-logo">
+                <img src="images/freakyblog.png" alt="freakyblog">
+            </a>
+            <a href="https://www.instagram.com/freakybobteam/" id="instagram-button">
+                <img src="images/Instagram_icon.webp">
+            </a>
+        </div>
+    </div>
+</footer>
     <script src="js\christmasmusic.js"></script>
 </body>
 </html>
diff --git a/info copy.html b/info copy.html
new file mode 100644
index 0000000..a6ce6a3
--- /dev/null
+++ b/info copy.html	
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Info page :3</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A place for Freakybob.">
+    <meta content="Info Page :3" property="og:title" />
+    <meta content="Infromation about freakybob.site!" property="og:description" />
+    <meta content="https://freakybob.site/info" property="og:url" />
+    <meta content="https://raw.githubusercontent.com/Freakybob-Team/Freakybob.site/main/images/Freaky_Bob_info.png" property="og:image" />
+    <meta content="#006b79" data-react-helmet="true" name="theme-color" />
+    <link rel="icon" type="image/png" href="images/Freaky_Bob_info.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/info.css">
+</head>
+<body>
+    <audio autoplay loop><source src="https://archive.org/download/wiiumusic/39%20-%20Wii%20U%20Chat%20-%20Lobby%20%28TV%29.mp3" type="audio/mp3"></audio>
+    <p>Mobile Css is done! You can now look at this page better on mobile :3! (The Images model is still broken on mobile, sowwy)</p>
+    <strong><h1>Welcome to Freakybob.site</h1></strong>
+    <div class="button-container">
+        <a href="https://freakybob.site">
+            <button>Go back to Freakybob.site!</button>
+        </a>
+    </div>
+    <strong><p>Since you're here, you probably want to know what this is about :3</p></strong>
+    <h2>freakybob.site is a website that was created by <a href="https://github.com/5quirre1" id="squirre1">5quirre1</a> and <a href="https://github.com/wish13yt" id="wish">wish13yt</a>. This all started from Wish mentioning a "freakybob" domain. Everyone was looking at domains until Squirrel found a domain on a domain website. The domain was "freakybob.site" for $4.00. Squirrel bought it almost instantly starting the well deserved birth of freakybob.site!</h2>
+
+    <div class="content-wrapper">
+        <div class="image-container">
+            <img src="images/freakyboborigin.png" id="freakybob-orgin" alt="freakybob origin">
+            <strong><p id="para1">A screenshot of Wish saying "steam gift 50$ - freakybob.com" which inspired Squirrel to buy and create freakybob.site</p></strong>
+            <img src="images/Foundfreakybob.site.png" id="freakybob-found" alt="Found freakybob site">
+            <strong><p id="para2">A screenshot of Squirrel finding the domain "freakybob.site"</p></strong>
+            <img src="images/bought.png" id="bought-freakybob" alt="bought-freakybob">
+            <strong><p id="para3">A screenshot of Squirrel showing that he bought freakybob.site</p></strong>
+        </div>
+
+        <div id="carousel-container">
+            <button class="carousel-button" onclick="prevImage()">&#10094;</button>
+            <div id="carousel">
+                <div class="carousel-images" id="image-track">
+                    <img src="Snapshots/Aug 19.png" alt="Image 1">
+                    <img src="Snapshots/Aug 20.png" alt="Image 2">
+                    <img src="Snapshots/Aug 22.png" alt="Image 3">
+                    <img src="Snapshots/Aug 23.png" alt="Image 4">
+                </div>
+            </div>
+            <button class="carousel-button" onclick="nextImage()">&#10095;</button>
+        </div>
+    </div>
+<!--I FEEL SO FREAKY JUST LIKE FREAKYBOB!!!-->
+    <div id="image-modal" class="modal">
+        <span class="close" onclick="closeModal()">&times;</span>
+        <img id="modal-image" src="" alt="Enlarged image">
+    </div>
+<strong><h3>Can this website get taken down by Viacom, Nickolodeon or Nintendo?</h3></strong>
+
+<p id="para4">We are not using any copyrighted music, images, or videos (YouTube embeds) in this website. The only music you hear throughout the website is copyright free music and Nintendo Wii U music from the <a href="https://archive.org/details/wiiumusic">Internet Archive.</a> Since we are not selfhosting the music and pirating anything, Nintendo should not be able to take down the website, BUT if anything were to happen, We would be cooked since Nintendo is money hungry.</p>
+
+<strong><h4>Some Questions we've heard from people</h4></strong>
+
+<p id="para5">We know this website is very confusing asf so I'ma answer some of the most common questions !!</p>
+
+<button class="point-button" onclick="showInfo('point')">What is the point of this website?</button>
+
+<button class="DouKnow-button" onclick="showInfo('DouKnow')">Squirrel, Do you even know anything to put here?</button>
+<!--I love this website, Can't believe people say this vruh !!-->
+<!-- squirrel didn't refresh his CSS cache so he thought the CSS was broken and even wanted to go into maintenance....-->
+ <!--Stfu wish or I'll send luni to your house :3-->
+<div id="description" class="description"></div>
+<script src="js/info.js"></script>
+</body>
+</html>
diff --git a/info.html b/info.html
index a6ce6a3..8970632 100644
--- a/info.html
+++ b/info.html
@@ -15,62 +15,43 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/info.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 </head>
 <body>
     <audio autoplay loop><source src="https://archive.org/download/wiiumusic/39%20-%20Wii%20U%20Chat%20-%20Lobby%20%28TV%29.mp3" type="audio/mp3"></audio>
-    <p>Mobile Css is done! You can now look at this page better on mobile :3! (The Images model is still broken on mobile, sowwy)</p>
-    <strong><h1>Welcome to Freakybob.site</h1></strong>
+    <div id="particles-js"></div>
+    <div id="container">
+        <strong><p>Since you're here, you probably want to know what this is about :3</p></strong>
+        
     <div class="button-container">
-        <a href="https://freakybob.site">
-            <button>Go back to Freakybob.site!</button>
-        </a>
+        <a href="index.html">Go back to Freakybob.site!</a>
     </div>
-    <strong><p>Since you're here, you probably want to know what this is about :3</p></strong>
-    <h2>freakybob.site is a website that was created by <a href="https://github.com/5quirre1" id="squirre1">5quirre1</a> and <a href="https://github.com/wish13yt" id="wish">wish13yt</a>. This all started from Wish mentioning a "freakybob" domain. Everyone was looking at domains until Squirrel found a domain on a domain website. The domain was "freakybob.site" for $4.00. Squirrel bought it almost instantly starting the well deserved birth of freakybob.site!</h2>
-
-    <div class="content-wrapper">
-        <div class="image-container">
+    <h2>freakybob.site is a website that was created by <a href="https://github.com/5quirre1">5quirre1</a> and <a href="https://github.com/wish13yt">wish13yt</a>. This all started from Wish mentioning a "freakybob" domain. Everyone was looking at domains until Squirrel found a domain on a domain website. The domain was "freakybob.site" for $4.00. Squirrel bought it almost instantly starting the well deserved birth of freakybob.site!</h2>
             <img src="images/freakyboborigin.png" id="freakybob-orgin" alt="freakybob origin">
             <strong><p id="para1">A screenshot of Wish saying "steam gift 50$ - freakybob.com" which inspired Squirrel to buy and create freakybob.site</p></strong>
             <img src="images/Foundfreakybob.site.png" id="freakybob-found" alt="Found freakybob site">
             <strong><p id="para2">A screenshot of Squirrel finding the domain "freakybob.site"</p></strong>
             <img src="images/bought.png" id="bought-freakybob" alt="bought-freakybob">
             <strong><p id="para3">A screenshot of Squirrel showing that he bought freakybob.site</p></strong>
-        </div>
-
-        <div id="carousel-container">
-            <button class="carousel-button" onclick="prevImage()">&#10094;</button>
-            <div id="carousel">
-                <div class="carousel-images" id="image-track">
-                    <img src="Snapshots/Aug 19.png" alt="Image 1">
-                    <img src="Snapshots/Aug 20.png" alt="Image 2">
-                    <img src="Snapshots/Aug 22.png" alt="Image 3">
-                    <img src="Snapshots/Aug 23.png" alt="Image 4">
+                    <div class="carousel-images" id="image-track">
+                        <marquee>
+                        <img src="Snapshots/Aug 19.png" alt="Image 1">
+                        <img src="Snapshots/Aug 20.png" alt="Image 2">
+                        <img src="Snapshots/Aug 22.png" alt="Image 3">
+                        <img src="Snapshots/Aug 23.png" alt="Image 4">
+                    </marquee>
+                    
+                    </div>
+                    <strong><h3>Can this website get taken down by Viacom, Nickolodeon or Nintendo?</h3></strong>
+                
+                <p id="para4">We are not using any copyrighted music, images, or videos (YouTube embeds) in this website. The only music you hear throughout the website is copyright free music and Nintendo Wii U music from the <a href="https://archive.org/details/wiiumusic">Internet Archive.</a> Since we are not selfhosting the music and pirating anything, Nintendo should not be able to take down the website, BUT if anything were to happen, We would be cooked since Nintendo is money hungry.</p>
                 </div>
-            </div>
-            <button class="carousel-button" onclick="nextImage()">&#10095;</button>
-        </div>
-    </div>
-<!--I FEEL SO FREAKY JUST LIKE FREAKYBOB!!!-->
-    <div id="image-modal" class="modal">
-        <span class="close" onclick="closeModal()">&times;</span>
-        <img id="modal-image" src="" alt="Enlarged image">
-    </div>
-<strong><h3>Can this website get taken down by Viacom, Nickolodeon or Nintendo?</h3></strong>
-
-<p id="para4">We are not using any copyrighted music, images, or videos (YouTube embeds) in this website. The only music you hear throughout the website is copyright free music and Nintendo Wii U music from the <a href="https://archive.org/details/wiiumusic">Internet Archive.</a> Since we are not selfhosting the music and pirating anything, Nintendo should not be able to take down the website, BUT if anything were to happen, We would be cooked since Nintendo is money hungry.</p>
-
-<strong><h4>Some Questions we've heard from people</h4></strong>
-
-<p id="para5">We know this website is very confusing asf so I'ma answer some of the most common questions !!</p>
-
-<button class="point-button" onclick="showInfo('point')">What is the point of this website?</button>
-
-<button class="DouKnow-button" onclick="showInfo('DouKnow')">Squirrel, Do you even know anything to put here?</button>
-<!--I love this website, Can't believe people say this vruh !!-->
-<!-- squirrel didn't refresh his CSS cache so he thought the CSS was broken and even wanted to go into maintenance....-->
- <!--Stfu wish or I'll send luni to your house :3-->
-<div id="description" class="description"></div>
+</div>
 <script src="js/info.js"></script>
+
+<script type="text/javascript" src="particles.js"></script>
+   <script type="text/javascript" src="app.js"></script>
 </body>
 </html>
diff --git a/team.html b/team.html
index 57acdc1..89da8f0 100644
--- a/team.html
+++ b/team.html
@@ -12,25 +12,30 @@
     <link rel="icon" type="image/png" href="images/Freaky_Bob_team.png">
     <title>Team</title>
     <link rel="stylesheet" href="css/team.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     </head>
     <body>
         <audio autoplay loop src="audio/Carefree(chosic.com).mp3">
     </audio>
+    <div class="OK">
     <h1 style="text-align: center;">The Team!!!</h1>
     <div class="button-container">
         <a href="https://freakybob.site">
             <button>Go back to Main Website :3</button>
         </a>
     </div>
+
+    </div>
     <div class="theteam">
-        <h2>Graphics team</h2>
         <div class="graphics">
+            <h2>Graphics team</h2>
             <button onclick="showInfo('sspruce')" id="Sspruce">Sspruce</button>
-        </div>
-
-        <h2>Testers team</h2>
-        <div class="graphics">
-            <button onclick="showInfo('tina')" id="Tina">Tina</button>
+            <div class="testers">
+                <h2>tester team</h2>
+                <button onclick="showInfo('tina')" id="Tina">Tina</button>
+            </div>
         </div>
     </div>
     <strong><div id="description" class="description"></div></strong>
