diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index 149733e..44daf92 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -4,7 +4,7 @@
       <div class="relative flex h-16 justify-between">
         <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
           <!-- Mobile menu button -->
-          <DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-beammp-orange">
+          <DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 text-zinc-400 hover:bg-beammp-orange hover:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-beammp-orange">
             <span class="absolute -inset-0.5" />
             <span class="sr-only">Open main menu</span>
             <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
@@ -46,7 +46,7 @@
           </button>-->
 
           <!-- Profile dropdown -->
-          <Menu as="div" class="relative ml-3">
+          <Menu as="div" class="relative ml-3" v-if="false">
             <div>
               <MenuButton class="relative flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-beammp-orange focus:ring-offset-2">
                 <span class="absolute -inset-1.5" />
@@ -68,6 +68,11 @@
               </MenuItems>
             </transition>
           </Menu>
+          <div class="flex-shrink-0" v-else>
+            <button type="button" class="relative inline-flex items-center gap-x-1.5 rounded-md bg-beammp-orange px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-beammp-orange focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-beammp-orange ml-3">
+              Sign In
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -118,7 +123,10 @@ export default {
         { name: 'Store', href: 'https://store.beammp.com/', active: false },
         { name: 'GitHub', href: 'https://github.com/BeamMP', active: false },
         { name: 'Patreon', href: 'https://patreon.com/BeamMP', active: false },
-      ]
+      ],
+       user: [
+
+       ]
     };
   },
   methods: {
@@ -132,6 +140,9 @@ export default {
       }
     },
   },
+  mounted() {
+    console.log(this.user)
+  }
 };
 </script>
 
diff --git a/frontend/src/components/home/Creators.vue b/frontend/src/components/home/Creators.vue
new file mode 100644
index 0000000..a9138ec
--- /dev/null
+++ b/frontend/src/components/home/Creators.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="bg-beammp-white dark:bg-beammp-gray py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <h2 class="text-center text-lg font-semibold leading-8 text-zinc-600 dark:text-white">Used by your favorite content creators</h2>
+      <div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+        <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="https://tailwindui.com/plus/img/logos/158x48/transistor-logo-gray-900.svg" alt="Transistor" width="158" height="48" />
+        <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="https://tailwindui.com/plus/img/logos/158x48/reform-logo-gray-900.svg" alt="Reform" width="158" height="48" />
+        <img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="https://tailwindui.com/plus/img/logos/158x48/tuple-logo-gray-900.svg" alt="Tuple" width="158" height="48" />
+        <img class="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1" src="https://tailwindui.com/plus/img/logos/158x48/savvycal-logo-gray-900.svg" alt="SavvyCal" width="158" height="48" />
+        <img class="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1" src="https://tailwindui.com/plus/img/logos/158x48/statamic-logo-gray-900.svg" alt="Statamic" width="158" height="48" />
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/home/Hero.vue b/frontend/src/components/home/Hero.vue
index b87a15a..c66379c 100644
--- a/frontend/src/components/home/Hero.vue
+++ b/frontend/src/components/home/Hero.vue
@@ -11,27 +11,27 @@
           </div>
           <div id="button" class="lg:w-4/12 md:w-4/12 sm:w-4/12 xs:w-full hidden-xs buttons-wrapper">
             <div class="buttons mt-3">
-              <button @click="downloadInstaller" class="download-client js-show-story" href="beamMP.zip" download="">
+              <button @click="downloadInstaller" class="download-client js-show-story bg-beammp-green" href="beamMP.zip" download="">
                 <img class="os-icon" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg" alt="windows-logo">
                 <span class="text">Download Client</span>
-                <span class="description"> BeamMP_Installer.zip</span>
+                <span class="description text-zinc-100"> BeamMP_Installer.zip</span>
               </button>
             </div>
             <div class="buttons mt-3">
               <form action="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.exe">
-                <button class="download-client js-show-story" style="background: radial-gradient(circle,rgb(255 179 38 / 80%),rgb(255 176 0 / 65%)) center/100%;">
+                <button class="download-client js-show-story bg-beammp-orange" style="background: radial-gradient(circle,rgb(255 179 38 / 80%),rgb(255 176 0 / 65%)) center/100%;">
                   <img class="os-icon" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg" alt="windows-logo">
                   <span class="text">Download Server</span>
-                  <span class="description"> BeamMP-Server.exe</span>
+                  <span class="description text-zinc-800"> BeamMP-Server.exe</span>
                 </button>
               </form>
             </div>
             <div class="buttons mt-3">
               <form action="https://github.com/BeamMP/BeamMP-Server/releases/latest">
-                <button class="download-client js-show-story" style="background: radial-gradient(circle,rgb(255 179 38 / 80%),rgb(255 176 0 / 65%)) center/100%;">
+                <button class="download-client js-show-story bg-beammp-orange" style="background: radial-gradient(circle,rgb(255 179 38 / 80%),rgb(255 176 0 / 65%)) center/100%;">
                   <img class="os-icon" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-plain.svg" alt="linux-logo">
                   <span class="text">Download Server</span>
-                  <span class="description">Linux builds</span>
+                  <span class="description text-zinc-800">Linux builds</span>
                 </button>
               </form>
             </div>
diff --git a/frontend/src/components/home/Stats.vue b/frontend/src/components/home/Stats.vue
index b5c4fa9..26c729c 100644
--- a/frontend/src/components/home/Stats.vue
+++ b/frontend/src/components/home/Stats.vue
@@ -3,7 +3,7 @@
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-4">
         <div v-for="stat in stats" :key="stat.id" class="mx-auto flex max-w-xs flex-col gap-y-4">
-          <a :href="stat.link"><dt class="text-base leading-7 text-gray-600 dark:text-white">{{ stat.name }}</dt></a>
+          <a :href="stat.link"><dt class="text-base leading-7 text-zinc-600 dark:text-white">{{ stat.name }}</dt></a>
           <dd class="order-first text-3xl font-semibold tracking-tight text-beammp-orange sm:text-5xl dark:text-beammp-orange"><AnimatedNumber :number="stat.value"></AnimatedNumber></dd>
         </div>
       </dl>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 0bc3eca..ead5579 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,6 +1,7 @@
 <script setup>
 import Hero from '@/components/home/Hero.vue'
 import Stats from '@/components/home/Stats.vue'
+import Creators from '@/components/home/Creators.vue'
 import Communities from '@/components/home/Communities.vue'
 import Partners from '@/components/home/Partners.vue'
 import Featured2 from '@/components/home/Featured2.vue'
@@ -11,6 +12,7 @@ import Docs from '@/components/home/Docs.vue'
 <template>
   <Hero />
   <Stats />
+  <Creators />
   <Communities />
   <Featured2 />
   <Partners />