diff --git a/frontend/package.json b/frontend/package.json
index 1cd6074..3de9bcd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "vue-scrollactive": "^0.9.3",
     "@vuelidate/core": "^2.0.2",
     "@vuelidate/validators": "^2.0.2",
-    "vuetify": "3.2.2",
+    "vuetify": "3.3.17",
     "vuex": "^4.1.0",
     "vue-gtag": "^2.0.1"
   },
diff --git a/frontend/src/components/Dashboard/DashboardMain.vue b/frontend/src/components/Dashboard/DashboardMain.vue
index 6e88393..04fbd86 100644
--- a/frontend/src/components/Dashboard/DashboardMain.vue
+++ b/frontend/src/components/Dashboard/DashboardMain.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
-    <app-dashboard-header />
-    <v-row xs12>
+    <v-row>
+      <v-col>
+        <app-dashboard-header />
+      </v-col>
+    </v-row>
+    <v-row align="baseline">
       <v-col>
         <app-hacknight />
         <app-hacknights-participants v-if="getHacknight" />
diff --git a/frontend/src/components/Dashboard/Hacknight/HacknightWrapper.vue b/frontend/src/components/Dashboard/Hacknight/HacknightWrapper.vue
index e3d0194..36239c9 100644
--- a/frontend/src/components/Dashboard/Hacknight/HacknightWrapper.vue
+++ b/frontend/src/components/Dashboard/Hacknight/HacknightWrapper.vue
@@ -1,72 +1,54 @@
 <template>
-  <v-container fluid text-xs-center>
-    <v-row align="center" justify="center">
+  <v-container fluid text-xs-center class="pt-6">
+    <v-row align="center" justify="center" class="pt-6">
       <v-col cols="12" sm="6">
         <v-alert
           type="error"
-          :value="!!getError"
+          :model-value="!!getError"
+          :text="getError"
           transition="slide-y-transition"
-          dismissible
-          >{{ getError }}</v-alert
-        >
+          closable
+        ></v-alert>
       </v-col>
     </v-row>
     <v-row align="center" justify="center">
-      <v-col cols="12" sm="6">
+      <v-col cols="10" sm="4" align-self="end">
         <v-select
           v-model="selectedHacknight"
+          color="#0CAEE7"
+          variant="underlined"
           :items="getHacknights"
-          item-text="date"
+          item-title="date"
           item-value="id"
           label="Select Hacknight"
           @input="onGetHacknight"
         >
-          <template v-slot:append-outer>
-            <v-btn
-              class="add-hacknight-btn"
-              @click="datePicker = true"
-              offset-y
-            >
-              <v-icon left dark>mdi-plus</v-icon>
-              New
-            </v-btn>
-          </template>
         </v-select>
       </v-col>
+      <v-col cols="2" sm="2" align-self="end">
+        <v-btn
+          class="add-hacknight-btn"
+          @click="datePicker = true"
+          offset-y
+          prepend-icon="fa:fas fa-plus"
+        >
+          New
+        </v-btn>
+      </v-col>
     </v-row>
     <v-dialog v-model="datePicker" max-width="500">
-      <v-card>
-        <v-card-title></v-card-title>
-        <v-card-text>
-          <v-date-picker
-            v-model="date"
-            show-adjacent-months
-            :max="getTodayDate"
-            color="#0CAEE7"
-            @dblclick:date="onCreateHacknight"
-            :allowed-dates="allowedDates"
-            full-width
-          ></v-date-picker>
-        </v-card-text>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-
-          <v-btn
-            color="#607d8b"
-            text
-            @click="
-              onCreateHacknight(date);
-              datePicker = false;
-            "
-          >
-            Create
-          </v-btn>
-          <v-btn color="#607d8b" text @click="datePicker = false">
-            Cancel
-          </v-btn>
-        </v-card-actions>
-      </v-card>
+      <v-date-picker
+        v-model="date"
+        show-adjacent-months
+        :max="getTodayDate"
+        color="#0CAEE7"
+        @click:save="
+          onCreateHacknight();
+          datePicker = false;
+        "
+        @click:cancel="datePicker = false"
+        full-width
+      ></v-date-picker>
     </v-dialog>
   </v-container>
 </template>
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index d093be9..fc3ff7f 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-import 'vuetify/styles'
+import 'vuetify/styles';
 // eslint-disable-next-line
 import * as components from 'vuetify/components';
 // eslint-disable-next-line
@@ -8,12 +8,17 @@ import * as directives from 'vuetify/directives';
 import { aliases, fa } from 'vuetify/iconsets/fa';
 // eslint-disable-next-line
 import { mdi } from 'vuetify/iconsets/mdi';
+// eslint-disable-next-line
+import { VDatePicker } from 'vuetify/labs/VDatePicker';
 
 import '@mdi/font/css/materialdesignicons.css';
 import { createVuetify } from 'vuetify';
 
 const vuetify = createVuetify({
-  components,
+  components: {
+    ...components,
+    VDatePicker,
+  },
   directives,
   icons: {
     defaultSet: 'fa',
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index ab1fea2..4ea8935 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -8900,10 +8900,10 @@ vue@3.2.47:
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
 
-vuetify@3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.2.2.tgz#a4a39bec15e96b4f9f9be6353e19f156abd91c35"
-  integrity sha512-syFfeZVH6dycltqVCx4tDn68fR3r697+Jt7vJW1l3i9a5ClnwpdRBWtE6dt2bjClS2K/VpWYt+rAsLiG7sGU/g==
+vuetify@3.3.17:
+  version "3.3.17"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.3.17.tgz#a7649c6f677beeed4b86baf6e3fece1596cc99e4"
+  integrity sha512-HO1Tl0saXb45Fi/PvpB8ZSn06Ix4JNiodEVkAdOyW6jq3MSIMho8xiOSQ0qQ7DoXyeTnWEvPuG3StbVAwH8tyw==
 
 vuex@^4.1.0:
   version "4.1.0"