diff --git a/components/base/SideNav.vue b/components/base/SideNav.vue
index 19e0e53..98bc6b7 100644
--- a/components/base/SideNav.vue
+++ b/components/base/SideNav.vue
@@ -5,14 +5,15 @@ const emit = defineEmits([
     'state'
 ])
 const store = useAuthStore();
-const account = ref({});
 const dashboardState = ref(0);
+const account = ref({});
+
 try {
   account.value = await $fetch('http://127.0.0.1:3890/v1/account/identity', {
     headers: {
       Authorization: `Bearer ${store.token}`
     }
-  })
+  });
 } catch (error) {
   if (error.response && error.response.status === 401) {
     store.logout()
@@ -21,6 +22,7 @@ try {
     console.error(error);
   }
 }
+
 function changeDashboardState(state: number) {
   switch (state) {
     case 0:
@@ -29,6 +31,9 @@ function changeDashboardState(state: number) {
     case 1:
       emit('state', 1)
       break;
+    case 2:
+      emit('state', 2)
+      break;
   }
 }
 function getPermsLevel(perm: number) {
@@ -37,6 +42,8 @@ function getPermsLevel(perm: number) {
       return 'User';
     case 1:
       return 'Moderator'
+    case 2:
+      return 'SAdmin'
   }
 }
 </script>
@@ -101,8 +108,8 @@ function getPermsLevel(perm: number) {
             <span class="tw-text-lg tw-text-center">Projects</span>
           </a>
           <a
-              v-if="account.moderation_level >= 1"
-              @click="changeDashboardState(3)"
+              v-if="account.moderation_level > 1"
+              @click="changeDashboardState(2)"
               class="tw-text-sm tw-font-medium tw-text-white tw-py-2 tw-px-2 hover:tw-bg-teal-500 hover:tw-text-white hover:tw-text-base tw-rounded-md tw-transition tw-duration-150 tw-ease-in-out"
           >
             <svg class="tw-w-8 tw-h-8 tw-fill-current tw-inline-block" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
diff --git a/components/card.vue b/components/card.vue
index 306818c..ea08a1e 100644
--- a/components/card.vue
+++ b/components/card.vue
@@ -33,7 +33,11 @@ export default {
         }
     },
     mounted() {
-        this.image += this.project.image
+        if (this.project.image !== undefined) {
+          this.image += this.project.image
+        } else {
+          this.image += 'default.png'
+        }
     }
 }
 </script>
diff --git a/components/dashboard/CRUD/CategoryCreation.vue b/components/dashboard/CRUD/CategoryCreation.vue
new file mode 100644
index 0000000..41fdfd7
--- /dev/null
+++ b/components/dashboard/CRUD/CategoryCreation.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+
+import ErrorModal from "~/components/InfoModals/ErrorModal.vue";
+import SuccessModal from "~/components/InfoModals/SuccessModal.vue";
+import {$fetch} from "ofetch";
+
+const success = ref(null);
+const error = ref(null);
+const store = useAuthStore();
+
+const account = await $fetch('http://127.0.0.1:3890/v1/account/identity', {
+  headers: {
+    Authorization: `Bearer ${store.token}`
+  }
+})
+
+const payload = ref({
+  accid: 0,
+  name: '',
+  description: ''
+})
+
+payload.value.accid = account.id;
+
+function closeSuccessModal() {
+  success.value.close()
+}
+
+async function create() {
+  let image;
+
+  const category = await $fetch('http://127.0.0.1:3890/v1/category/new', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${store.token}`
+    },
+    body: payload
+  })
+
+  if (eFile.value.name && eFile.value.name.length > 0) {
+    var formData = new FormData()
+    formData.append("id", category);
+    formData.append("file", eFile.value)
+
+
+    image = await $fetch('http://127.0.0.1:3890/v1/storage/uploadGameImage', {
+      method: 'POST',
+      body: formData,
+      headers: {
+        Authorization: `Bearer ${store.token}`
+      }
+    })
+  }
+}
+
+const image = ref({});
+let eFile = ref({});
+const preview = ref(false);
+
+async function imageref(e) {
+  let file = e.target.files
+  eFile.value = file[0];
+  if (file && file[0]) {
+    let reader = new FileReader
+    reader.onload = e => {
+      image.value = e.target.result
+    }
+    reader.readAsDataURL(file[0])
+  }
+  preview.value = true;
+}
+</script>
+
+<template>
+  <div class="tw-bg-gray-900 dark:tw-bg-gray-900 tw-h-553 tw-w-552">
+    <div class="tw-py-8 tw-px-4 tw-mx-auto tw-max-w-2xl ">
+      <h2 class=" tw-text-xl tw-font-bold tw-text-gray-900 dark:tw-text-white">Add a new game</h2>
+      <form v-on:submit.prevent="create">
+        <div class="">
+          <div class="sm:tw-col-span-2">
+            <label for="name" class="tw-block tw-mb-2 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-white">Name</label>
+            <input v-model="payload.name" type="text" name="name" id="name" class="tw-bg-gray-50 tw-border tw-border-gray-300 tw-text-gray-900 tw-text-sm tw-rounded-lg focus:tw-ring-primary-600 focus:tw-border-primary-600 tw-block tw-w-full tw-p-2.5 dark:tw-bg-gray-700 dark:tw-border-gray-600 dark:tw-placeholder-gray-400 dark:tw-text-white dark:focus:tw-ring-primary-500 dark:focus:tw-border-primary-500" placeholder="Name" required="required">
+          </div>
+          <div class="sm:tw-col-span-2 tw-mt-3">
+            <label for="desc" class="tw-block tw-mb-2 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-white">Description</label>
+            <input v-model="payload.description" type="text" name="desc" id="desc" class="tw-bg-gray-50 tw-border tw-border-gray-300 tw-text-gray-900 tw-text-sm tw-rounded-lg focus:tw-ring-primary-600 focus:tw-border-primary-600 tw-block tw-w-full tw-p-2.5 dark:tw-bg-gray-700 dark:tw-border-gray-600 dark:tw-placeholder-gray-400 dark:tw-text-white dark:focus:tw-ring-primary-500 dark:focus:tw-border-primary-500" placeholder="Description" required="required">
+          </div>
+          <div class="tw-mt-3">
+            <label for="dropzone-file" class="tw-block tw-mb-2 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-white">Project image</label>
+            <div class="tw-flex tw-items-center tw-justify-center tw-w-full">
+              <div>
+                <label for="dropzone-file" class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-auto tw-h-64 tw-border-2 tw-border-gray-300 tw-border-dashed tw-rounded-lg tw-cursor-pointer tw-bg-gray-50 dark:hover:tw-bg-bray-800 dark:tw-bg-gray-700 hover:tw-bg-gray-100 dark:tw-border-gray-600 dark:hover:tw-border-gray-500 dark:hover:tw-bg-gray-600">
+                  <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-5 tw-pb-6">
+                    <div v-if="preview"
+                         class="imagePreviewWrapper tw-rounded-lg"
+                         :style="{ 'background-image': `url(${image})` }">
+                    </div>
+                    <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-5 tw-pb-6" v-if="!preview">
+                      <svg aria-hidden="true" class="tw-w-10 tw-h-10 tw-mb-3 tw-text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
+                      <p class="tw-mb-2 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+                      <p class="tw-text-xs text-gray-500 dark:tw-text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+                    </div>
+                  </div>
+                </label>
+                <input id="dropzone-file" type="file" class="tw-hidden" @change="imageref" ref="fileInput" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <button type="submit" class="tw-inline-flex tw-items-center tw-px-5 tw-py-2 tw-mt-2 sm:tw-mt-4 tw-text-sm tw-font-medium tw-text-center tw-text-white tw-bg-violet-700 tw-rounded-lg focus:tw-ring-4 focus:tw-ring-violet-200 dark:focus:tw-ring-violet-900 hover:tw-bg-violet-800">
+          Create
+        </button>
+      </form>
+    </div>
+    <SuccessModal @ok="closeSuccessModal" ref="success"/>
+    <ErrorModal ref="error"/>
+  </div>
+</template>
+
+<style scoped>
+.imagePreviewWrapper {
+  width: 250px;
+  height: 250px;
+  display: block;
+  cursor: pointer;
+  background-size: cover;
+  background-position: center center;
+}
+</style>
diff --git a/components/dashboard/DevCard.vue b/components/dashboard/DevCard.vue
new file mode 100644
index 0000000..84691ac
--- /dev/null
+++ b/components/dashboard/DevCard.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-card
+      class="mx-auto"
+      max-width="184"
+  >
+    <v-img
+        :src='this.image'
+        width="184px"
+        contain
+    ></v-img>
+
+    <v-card-title>
+      {{ project.name }}
+    </v-card-title>
+
+    <v-card-subtitle style="margin-bottom: 3vh">
+      Modifications: {{ project.projects.length }}
+    </v-card-subtitle>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    project: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      image: 'http://127.0.0.1:3890/v1/storage/getCategoryAvatar?key='
+    }
+  },
+  mounted() {
+    if (this.project.image !== undefined) {
+      this.image += this.project.image
+    } else {
+      this.image += 'default.png'
+    }
+  }
+}
+</script>
+
+<style>
+.card-size {
+  width: 184px;
+  height: 287px;
+}
+.card-image {
+  width: 184px;
+  height: 260px;
+}
+</style>
diff --git a/components/dashboard/DevProjectCard.vue b/components/dashboard/DevProjectCard.vue
index c578e02..ffde5ba 100644
--- a/components/dashboard/DevProjectCard.vue
+++ b/components/dashboard/DevProjectCard.vue
@@ -16,7 +16,7 @@ function check() {
 </script>
 
 <template>
-  <div class="tw-flex tw-flex-col tw-w-auto tw-h-145 tw-items-center tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-shadow md:tw-flex-row hover:tw-bg-gray-100 dark:tw-border-gray-700 dark:tw-bg-gray-800 dark:hover:tw-bg-gray-700">
+  <div class="tw-flex tw-flex-col tw-w-auto tw-h-auto tw-items-center tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-shadow md:tw-flex-row hover:tw-bg-gray-100 dark:tw-border-gray-700 dark:tw-bg-gray-800 dark:hover:tw-bg-gray-700">
     <img class="tw-m-2 tw-rounded-lg tw-w-24 tw-h-24" :src="getImage(project.favicon_path)" />
     <div class="tw-flex tw-m-2 tw-flex-col tw-justify-center tw-leading-normal">
       <h5 class="tw-text-xl tw-font-bold tw-tracking-tight tw-text-gray-900 dark:tw-text-white">{{project.name}}</h5>
diff --git a/components/dashboard/Games.vue b/components/dashboard/Games.vue
deleted file mode 100644
index b5543d2..0000000
--- a/components/dashboard/Games.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div class="tw-min-h-screen tw-ml-5">
-    rtr
-  </div>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/components/dashboard/GamesAdmin.vue b/components/dashboard/GamesAdmin.vue
new file mode 100644
index 0000000..516b8ea
--- /dev/null
+++ b/components/dashboard/GamesAdmin.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+import CategoryCreation from "~/components/dashboard/CRUD/CategoryCreation.vue";
+import Modal from "~/components/base/Modal.vue";
+import DevCard from "~/components/dashboard/DevCard.vue";
+
+const creation = ref(false);
+
+const categories = await $fetch('http://127.0.0.1:3890/v1/category/all');
+
+function toggleCreationModal() {
+  creation.value = !creation.value
+}
+</script>
+<template>
+  <div class="tw-min-h-screen tw-ml-10 tw-p-5">
+    <button @click="toggleCreationModal"  class="tw-mt-3 tw-bg-blue-500 hover:tw-bg-blue-700 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded">
+      Create category
+    </button>
+    <div class="tw-flex tw-justify-center tw-items-center tw-flex-grow tw-mt-7">
+      <div class="tw-flex-col">
+        <div class="tw-grid tw-grid-cols-1 sm:tw-grid-cols-3 md:tw-grid-cols-5 lg:tw-grid-cols-5 tw-gap-4 tw-mt-5">
+          <div v-for="(category, index) in categories" :key="index">
+            <DevCard :project="category" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <Modal v-if="creation" @close="toggleCreationModal">
+      <CategoryCreation/>
+    </Modal>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/projectsCard.vue b/components/projectsCard.vue
index 8531e27..cf713cf 100644
--- a/components/projectsCard.vue
+++ b/components/projectsCard.vue
@@ -28,7 +28,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="tw-flex tw-flex-col tw-items-center tw-w-auto tw-h-145 tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-shadow md:tw-flex-row hover:tw-bg-gray-100 dark:tw-border-gray-700 dark:tw-bg-gray-800 dark:hover:tw-bg-gray-700">
+  <div class="tw-flex tw-flex-col tw-items-center tw-w-auto tw-h-auto tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-shadow md:tw-flex-row hover:tw-bg-gray-100 dark:tw-border-gray-700 dark:tw-bg-gray-800 dark:hover:tw-bg-gray-700">
     <img class="tw-m-2 tw-rounded-lg tw-w-24" :src="this.image" />
     <div class="tw-flex tw-m-2 tw-flex-col tw-justify-center tw-leading-normal">
       <h5 class="tw-text-xl tw-font-bold tw-tracking-tight tw-text-gray-900 dark:tw-text-white">{{project.name}}</h5>
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index ef6aecc..4753d85 100644
--- a/pages/categories/index.vue
+++ b/pages/categories/index.vue
@@ -3,7 +3,7 @@ import {defineComponent} from 'vue'
 import AllGames from "~/components/view/AllGames.vue";
 
 export default defineComponent({
-    name: "games",
+    name: "index",
     components: {AllGames}
 })
 </script>
diff --git a/pages/user/dashboard.vue b/pages/user/dashboard.vue
index 8eaef40..7f0f6b1 100644
--- a/pages/user/dashboard.vue
+++ b/pages/user/dashboard.vue
@@ -3,37 +3,32 @@ import {useAuthStore} from "~/stores/auth";
 import SideNav from "~/components/base/SideNav.vue";
 import {$fetch} from "ofetch";
 import Projects from "~/components/dashboard/Projects.vue";
+import Games from "~/pages/categories/index.vue";
+import GamesAdmin from "~/components/dashboard/GamesAdmin.vue";
 
 definePageMeta({
   middleware: [
     "auth"
   ]
 })
-
+const user = ref({});
 const store = useAuthStore();
 const state = ref(0);
 
-const {data: user} = await useAsyncData(
-    'user',
-    () => {
-      try {
-        return $fetch('http://127.0.0.1:3890/v1/account/identity', {
-          headers: {
-            Authorization: `Bearer ${store.token}`
-          }
-        });
-      } catch (error) {
-        if (error.response && error.response.status === 401) {
-          store.logout()
-          navigateTo('/')
-        } else {
-          console.error(error);
-        }
-      }
+try {
+  user.value = await $fetch('http://127.0.0.1:3890/v1/account/identity', {
+    headers: {
+      Authorization: `Bearer ${store.token}`
     }
-
-
-)
+  });
+} catch (error) {
+  if (error.response && error.response.status === 401) {
+    store.logout()
+    navigateTo('/')
+  } else {
+    console.error(error);
+  }
+}
 
 function changeState(e) {
   switch (e) {
@@ -43,6 +38,9 @@ function changeState(e) {
     case 1:
       state.value = 1;
       break;
+    case 2:
+      state.value = 2;
+      break;
 
   }
 }
@@ -74,7 +72,7 @@ function changeState(e) {
       </div>
     </div>
     <Projects v-if="state == 1" />
-    <Games v-if="user.moderation_level >= 1 && state == 3"/>
+    <GamesAdmin v-if="state == 2"/>
   </div>
 </template>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index fea7fc0..d7c075a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,14 +13,16 @@ module.exports = {
       width: {
         '550': '550px',
         '222': '90px',
-        '551': '650px'
+        '551': '650px',
+        '552': '550px'
       },
       height: {
         '550': '550px',
         '552': '400px',
         '222': '90px',
         '551': '650px',
-        '145': '145px'
+        '145': '145px',
+        '553': '570px'
       }
     },
   },