diff --git a/.env.staging-dev b/.env.staging-dev
new file mode 100644
index 0000000..ba27c23
--- /dev/null
+++ b/.env.staging-dev
@@ -0,0 +1,5 @@
+VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=986632811207348294&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Foauth2%2Fcallback&response_type=code&scope=identify"
+VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
+VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
+
+VITE_APP_TITLE="Claptrap DEV NEXT"
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index fa40b2f..e4e3cb2 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "vue.volar",
-    "arcanis.vscode-zipfs",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ]
diff --git a/src/components/Header/HeaderComponent.vue b/src/components/Header/HeaderComponent.vue
index 62a570b..61f1cb1 100644
--- a/src/components/Header/HeaderComponent.vue
+++ b/src/components/Header/HeaderComponent.vue
@@ -1,12 +1,16 @@
 <template>
   <v-app-bar class="bg-brown-darken-4">
-    <v-app-bar-title class="text-yellow font-weight-black text-h4">
+    <v-app-bar-title class="text-primary font-weight-black text-h4">
       <div class="d-flex align-center">
         <router-link to="/">
           <v-avatar><v-img src="/icon.png"></v-img></v-avatar>
         </router-link>
         <span class="ml-3 d-none d-sm-inline">
-          <router-link to="/" class="text-yellow" style="text-decoration: none">
+          <router-link
+            to="/"
+            class="text-primary"
+            style="text-decoration: none"
+          >
             Claptrap Bot
           </router-link>
         </span>
diff --git a/src/components/Header/ServerListComponent.vue b/src/components/Header/ServerListComponent.vue
index 6df9abe..196a40f 100644
--- a/src/components/Header/ServerListComponent.vue
+++ b/src/components/Header/ServerListComponent.vue
@@ -6,7 +6,7 @@
           v-for="guild of guilds"
           :key="guild.id"
           :value="guild.id"
-          active-color="yellow"
+          active-color="primary"
           :to="getToUrl(guild)"
           :disabled="shouldBeDisabled(guild)"
         >
diff --git a/src/components/guild/Settings/SettingListComponent.vue b/src/components/guild/Settings/SettingListComponent.vue
index c212a67..d494791 100644
--- a/src/components/guild/Settings/SettingListComponent.vue
+++ b/src/components/guild/Settings/SettingListComponent.vue
@@ -9,7 +9,7 @@
     >
       <v-progress-circular
         indeterminate
-        color="yellow"
+        color="primary"
         size="200"
         width="15"
       ></v-progress-circular>
diff --git a/src/components/guild/Settings/fields/BoolFieldComponent.vue b/src/components/guild/Settings/fields/BoolFieldComponent.vue
index 536325c..0d5505d 100644
--- a/src/components/guild/Settings/fields/BoolFieldComponent.vue
+++ b/src/components/guild/Settings/fields/BoolFieldComponent.vue
@@ -5,7 +5,7 @@
         <v-switch
           :id="fieldDescription.id"
           :label="fieldDescription.name"
-          color="yellow"
+          color="primary"
           :messages="fieldDescription.description"
           density="compact"
           hide-details="auto"
diff --git a/src/components/guild/Settings/fields/SelectFieldComponent.vue b/src/components/guild/Settings/fields/SelectFieldComponent.vue
index 6fcec77..b186be3 100644
--- a/src/components/guild/Settings/fields/SelectFieldComponent.vue
+++ b/src/components/guild/Settings/fields/SelectFieldComponent.vue
@@ -4,7 +4,7 @@
       <v-autocomplete
         :id="fieldDescription.id"
         :label="fieldDescription.name"
-        color="yellow"
+        color="primary"
         :messages="fieldDescription.description"
         density="compact"
         hide-details="auto"
diff --git a/src/components/guild/Settings/fields/TextFieldComponent.vue b/src/components/guild/Settings/fields/TextFieldComponent.vue
index bb67bc3..7a11ada 100644
--- a/src/components/guild/Settings/fields/TextFieldComponent.vue
+++ b/src/components/guild/Settings/fields/TextFieldComponent.vue
@@ -4,7 +4,7 @@
       <v-text-field
         :id="fieldDescription.id"
         :label="fieldDescription.name"
-        color="yellow"
+        color="primary"
         :messages="fieldDescription.description"
         density="compact"
         hide-details="auto"
diff --git a/src/components/guild/home/SettingPreviewComponent.vue b/src/components/guild/home/SettingPreviewComponent.vue
index 5a3d697..18efa96 100644
--- a/src/components/guild/home/SettingPreviewComponent.vue
+++ b/src/components/guild/home/SettingPreviewComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card title="Guild Settings" :disabled="!properties.guild?.canManage">
     <template v-slot:prepend>
-      <v-icon color="yellow" size="x-large">mdi-cog</v-icon>
+      <v-icon color="primary" size="x-large">mdi-cog</v-icon>
     </template>
     <v-card-text class="d-flex justify-center">
       <v-btn
diff --git a/src/components/guild/home/StatsPreviewComponent.vue b/src/components/guild/home/StatsPreviewComponent.vue
index 4495ea5..df7eeb6 100644
--- a/src/components/guild/home/StatsPreviewComponent.vue
+++ b/src/components/guild/home/StatsPreviewComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card title="Stats" disabled>
     <template v-slot:prepend>
-      <v-icon color="yellow" size="x-large">mdi-crown</v-icon>
+      <v-icon color="primary" size="x-large">mdi-crown</v-icon>
     </template>
   </v-card>
 </template>
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 3a483d8..0e569c9 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -5,8 +5,18 @@ import "vuetify/styles";
 // Vuetify
 import { createVuetify } from "vuetify";
 
+const darkTheme = {
+  dark: true,
+  colors: {
+    primary: "#FFC107",
+  },
+};
+
 export default createVuetify({
   theme: {
-    defaultTheme: "dark",
+    defaultTheme: "darkTheme",
+    themes: {
+      darkTheme,
+    },
   },
 });
diff --git a/src/views/oauth/OauthCallbackView.vue b/src/views/oauth/OauthCallbackView.vue
index e0c4440..e66b0f3 100644
--- a/src/views/oauth/OauthCallbackView.vue
+++ b/src/views/oauth/OauthCallbackView.vue
@@ -4,7 +4,7 @@
       <v-progress-circular
         size="200"
         width="17"
-        color="yellow"
+        color="primary"
         indeterminate
       ></v-progress-circular>
     </v-col>
diff --git a/src/views/oauth/OauthRedirectView.vue b/src/views/oauth/OauthRedirectView.vue
index f6f12ed..0d90bd1 100644
--- a/src/views/oauth/OauthRedirectView.vue
+++ b/src/views/oauth/OauthRedirectView.vue
@@ -4,7 +4,7 @@
       <v-progress-circular
         size="200"
         width="17"
-        color="yellow"
+        color="primary"
         indeterminate
       ></v-progress-circular>
     </v-col>