diff --git a/components/playlists/AddPlaylistsModal.vue b/components/playlists/AddPlaylistsModal.vue
new file mode 100644
index 0000000..c6e7196
--- /dev/null
+++ b/components/playlists/AddPlaylistsModal.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import UserSpotifyPlaylistsView from './UserSpotifyPlaylistsView.vue';
+
+
+const emit = defineEmits(['close-modal', 'refresh']);
+
+const playlistError = ref('')
+
+</script>
+
+<template> 
+    <div class="fixed top-0 bottom-0 left-0 right-0 flex justify-center z-50 bg-black bg-opacity-85">
+        <div class="mt-[10%] md:mt-[5%] w-full sm:w-3/6 xl:w-2/6 2xl:w-2/6 max-h-[80vh] md:max-h-[50vh] rounded-3xl flex flex-col align-center text-center bg-white px-5 pt-10">
+            <p class="text-3xl font-bold my-3">Your Playlists</p>
+            <UserSpotifyPlaylistsView @refresh="emit('refresh')"/>
+            <p v-if="playlistError" class="error-message">{{ playlistError }}</p>
+            <p class="px-8">If you can't see your playlist here, make sure to add it to your Spotify profile.</p>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white mx-auto block" @click="emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+button {
+    width: 150px;
+    height: 40px;
+    font-size: 14px;
+    border-radius: 16px;
+}
+</style>
diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 80ba2be..bfab3fd 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -13,17 +13,17 @@ const props = defineProps({
     default: 'Playlist',
     required: true
   },
-  controlElement: {
-    type: String,
-    default: null
+  userPlaylist : {
+    type: Boolean,
+    default: false
   },
-    startGame: {
-        type: Boolean,
-        default: false
-    }
+  startGame: {
+    type: Boolean,
+    default: false
+  }
 });
 
-const emit = defineEmits(['chose-playlist'])
+const emit = defineEmits(['chose-playlist','refresh'])
 
 const showModal = ref(false);
 </script>
@@ -54,7 +54,7 @@ const showModal = ref(false);
   <!-- Modal for (un)following playlists -->
   <PlaylistsPlaylistModal 
     v-show="showModal" :playlist-id="props.playlistId" :playlist-name="props.name"
-    :playlist-cover="props.cover" @close-modal="showModal = false" />
+    :playlist-cover="props.cover" :user-playlist="props.userPlaylist" @close-modal="showModal = false" @refresh="emit('refresh')"/>
 </template>
 
 <style scoped>
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index ef794a3..f85a3e2 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -17,13 +17,21 @@ const props = defineProps({
     startGame: {
         type: Boolean,
         default: false
+    },
+    onAction: {
+      type: Function as PropType<() => void>,
+      default: () => {}
+    },
+    actionLabel: {
+      type: String,
+      default: ''
     }
 });
 
 const emit = defineEmits(['chose-playlist'])
 
 /* Filter the playlists array for playlits where the ID exists in the genre. */
-const filteredPlaylists = computed(() => 
+const filteredPlaylists = computed(() =>
     props.playlists.filter((item) => props.playlistIds.includes(item.spotifyId))
 );
 
@@ -35,15 +43,19 @@ function handleChosePlaylist(playlist: GetPlaylistResponse) {
 <template>
     <div class="w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-hidden">
         <!-- Header with genre name -->
-        <div class="mb-1 text-xs md:text-base mt-2 pt-2">
+        <div class="flex mb-1 text-xs md:text-base mt-2 pt-2 justify-between">
             <p>{{ genre }}</p>
+            <button v-if="props.onAction && props.actionLabel" class="flex items-center text-gray-700" @click="props.onAction()">
+            <Icon name="mdi:plus"/>
+            {{ props.actionLabel }}
+        </button>
         </div>
 
         <!-- Boxes with the name and cover of the playlist in the genre -->
         <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
-            <PlaylistsPlaylistBox 
-                v-for="item in filteredPlaylists" 
-                :key="item.id" 
+            <PlaylistsPlaylistBox
+                v-for="item in filteredPlaylists"
+                :key="item.id"
                 :playlist-id="item.spotifyId"
                 :name="item.name"
                 :start-game="props.startGame"
diff --git a/components/playlists/PlaylistModal.vue b/components/playlists/PlaylistModal.vue
index 00a7138..3618f0e 100644
--- a/components/playlists/PlaylistModal.vue
+++ b/components/playlists/PlaylistModal.vue
@@ -14,24 +14,57 @@ const props = defineProps({
     playlistCover: {
         type: String,
         required: true
+    },
+    userPlaylist: {
+        type: Boolean,
+        default: false
     }
 });
 
-onUpdated(async () => { playlistStatus.value = await getPlaylistStatus()});
+onUpdated(async () => { playlistStatus.value = await getPlaylistStatus() });
 
-const emit = defineEmits(['close-modal']);
+const emit = defineEmits(['close-modal', 'refresh']);
 
 const { playlistStatus, getPlaylistStatus, followPlaylist, unfollowPlaylist } = useSpotify(props.playlistId);
+
+async function addPlaylist() {
+    emit('close-modal')
+    await $fetch('/api/v1/playlist', {
+    method: 'POST',
+    body: {
+      id: props.playlistId,
+      name: props.playlistName,
+      spotifyId: props.playlistId,
+      categories: ["User created"],
+      enabled: true
+    }   
+  })
+  emit('refresh')
+}
 </script>
 
 <template>
     <div class="fixed top-0 bottom-0 left-0 right-0 flex justify-center bg-black bg-opacity-85 z-50">
-        <div class="mt-[10%] w-5/6 md:w-1/6 h-5/6 md:h-3/6 rounded-3xl flex flex-col items-center justify-center text-center bg-white">
-            <p class="text-xl mb-2">{{  playlistName }}</p>
+        <div
+            class="mt-[10%] md:mt-[5%] w-full md:w-1/6 max-h-[80vh] md:max-h-[50vh] m-5 rounded-3xl flex flex-col items-center justify-center text-center bg-white">
+            <p class="text-xl font-bold mb-10 w-2/3">{{ playlistName }}</p>
             <NuxtImg :src="playlistCover" class="rounded-2xl h-40 w-40 mb-6" />
-            <button v-if="!playlistStatus" class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="followPlaylist">Follow Playlist</button>
-            <button v-else class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="unfollowPlaylist">Unfollow Playlist</button>
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="emit('close-modal')">Close</button>
+            <div v-if="!props.userPlaylist">
+                <button 
+                    v-if="!playlistStatus" class="bg-yellow-500 hover:bg-yellow-600 text-red-600"
+                    @click="followPlaylist">Follow Playlist</button>
+                <button 
+                    v-else class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="unfollowPlaylist">Unfollow
+                    Playlist</button>
+            </div>
+            <div v-else>
+                <button 
+                    class="bg-yellow-500 hover:bg-yellow-600 text-red-600"
+                    @click="addPlaylist">Add Playlist</button>
+            </div>
+            <button 
+                class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white"
+                @click="emit('close-modal')">Close</button>
         </div>
     </div>
 </template>
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index d5f138d..6737708 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { GetPlaylistResponse } from "@/types/api/playlists";
+import type {GetPlaylistResponse} from "@/types/api/playlists";
 
 const props = defineProps({
   startGame: {
@@ -9,10 +9,14 @@ const props = defineProps({
 })
 
 const playlists = ref<GetPlaylistResponse[]>([]);
+const userPlaylistIds = ref<{ category: "User created"; ids: number[] }[]>([]);
+const userPlaylists = ref<GetPlaylistResponse[]>([]);
 const categories = ref<{ category: string; ids: string[] }[]>([]);
 
 const session = useSupabaseSession();
 
+const showModal = ref(false);
+
 onMounted(async () => {
   if (session.value) {
     await getPlaylists();
@@ -28,23 +32,35 @@ async function getPlaylists() {
     playlists.value = [...data];
 
     playlists.value.forEach(playlist => {
-      // Skip disabled playlists
-      if(!playlist.enabled) return;
 
+      if (!playlist.enabled) return;
+
+      /* Filter all IDs of playlists in each category. */
       playlist.categories.forEach(category => {
-        // Check if the category already exists in the array
-        const existingCategory = categories.value.find(item => item.category === category);
+        if (category === "User created") {
+          const existingUserCategory = userPlaylistIds.value.find(item => item.category === "User created");
 
-        if (existingCategory) {
-          // Add the new ID if not already present
-          if (!existingCategory.ids.includes(playlist.id)) {
-            existingCategory.ids.push(playlist.id);
+          if (existingUserCategory) {
+            if (!existingUserCategory.ids.includes(playlist.id)) {
+              existingUserCategory.ids.push(playlist.id);
+            }
+          } else {
+            userPlaylistIds.value.push({category: "User created", ids: [playlist.id]});
           }
         } else {
-          // Add a new entry if the category does not exist
-          categories.value.push({ category, ids: [playlist.id] });
+          const existingCategory = categories.value.find(item => item.category === category);
+
+          if (existingCategory) {
+            if (!existingCategory.ids.includes(playlist.id)) {
+              existingCategory.ids.push(playlist.id);
+            }
+          } else {
+            categories.value.push({category, ids: [playlist.id]});
+          }
         }
       });
+      const userCreatedIds = userPlaylistIds.value.flatMap(item => item.ids);
+      userPlaylists.value = playlists.value.filter(playlist => userCreatedIds.includes(playlist.id));
     });
   } catch (error) {
     console.error("Failed to fetch playlists:", error);
@@ -52,14 +68,29 @@ async function getPlaylists() {
 }
 
 function handleChosePlaylist(playlist: GetPlaylistResponse) {
-    emit('chose-playlist', playlist)
+  emit('chose-playlist', playlist)
 }
 </script>
 
 <template>
+  <PlaylistsAddPlaylistsModal v-show="showModal" @close-modal="showModal = false" @refresh="getPlaylists"/>
+
   <div class="flex flex-col">
-    <div class="overflow-y-auto">
-      <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories" :start-game="props.startGame" @chose-playlist="handleChosePlaylist"/>
+    <div class="overflow-y-auto" style="max-height: 85vh;">
+      <PlaylistsPlaylistContainer
+          v-for="categoryEl in categories" :key="categoryEl.category"
+          :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists"
+          :categories="categories" :start-game="props.startGame"
+          @chose-playlist="handleChosePlaylist"/>
+      <PlaylistsPlaylistContainer
+          v-for="item in userPlaylistIds" :key="item.category" :genre="item.category" :playlist-ids="item.ids"
+          :playlists="userPlaylists"
+          action-label="Add Playlist" :on-action="() => {showModal = true}" :start-game="props.startGame"
+          @refresh="getPlaylists" @chose-playlist="handleChosePlaylist"/>
+      <button
+          v-if="userPlaylists.length === 0" class="p-2 bg-blue-500 text-white rounded-3xl ml-2"
+          @click="showModal = true">Add own Playlist
+      </button>
     </div>
   </div>
 </template>
diff --git a/components/playlists/UserSpotifyPlaylistsView.vue b/components/playlists/UserSpotifyPlaylistsView.vue
new file mode 100644
index 0000000..7887ef4
--- /dev/null
+++ b/components/playlists/UserSpotifyPlaylistsView.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import useSpotify from '@/composables/useSpotify';
+import type { Playlist } from "@/types/api/playlist"
+
+const { getUserPlaylists } = useSpotify("");
+
+const userPlaylists = ref<Playlist[] | null>([]);
+
+onMounted(async () => {
+    userPlaylists.value = await getUserPlaylists();;
+})
+
+const emit = defineEmits(['refresh']);
+
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 px-3 py-3 rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-y-auto">
+        <div class="w-full bg-gray-200 rounded-3xl">
+            <!-- Boxes with the name and cover of the playlist in the genre -->
+            <div class="grid grid-cols-3 gap-1 justify-items-center items-center">
+                <PlaylistsPlaylistBox 
+                    v-for="item in userPlaylists" :key="item.id" :playlist-id="item.spotifyId"
+                    :name="item.name" v-bind="item.cover ? { cover: item.cover.toString() } : {}" :user-playlist="true"
+                    class="flex-grow-0 flex-shrink-0" @refresh="emit('refresh')" />
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/composables/useSpotify.ts b/composables/useSpotify.ts
index 9c3fd02..e7e316f 100644
--- a/composables/useSpotify.ts
+++ b/composables/useSpotify.ts
@@ -1,9 +1,13 @@
 /* Communicate with Spotify API */
+import type { Playlist } from "@/types/api/playlist"
+
 export default function useSpotify(playlistId: string) {
     const playlistStatus = ref<boolean | null>(null);
+    const userPlaylists = ref<Playlist[]>([]);
 
     const session = useSupabaseSession();
     const token = ref('');
+
     if (session.value) {
         token.value = session.value.provider_token ?? '';
     }
@@ -24,12 +28,12 @@ export default function useSpotify(playlistId: string) {
 
             const data = await res.json();
             playlistStatus.value = data[0];
-            return data[0];
+            return playlistStatus.value;
         } catch (error) {
             console.error('Failed to get playlist status:', error);
             return null;
         }
-    }
+    };
 
     async function followPlaylist(): Promise<void> {
         try {
@@ -51,7 +55,7 @@ export default function useSpotify(playlistId: string) {
         } catch (error) {
             console.error('Error following playlist:', error);
         }
-    }
+    };
 
     async function unfollowPlaylist(): Promise<void> {
         try {
@@ -72,6 +76,43 @@ export default function useSpotify(playlistId: string) {
         } catch (error) {
             console.error('Error unfollowing playlist:', error);
         }
+    };
+
+    async function getUserPlaylists(): Promise<Playlist[] | null> {
+        try {
+            const res = await fetch(`https://api.spotify.com/v1/users/${session.value?.user.user_metadata.provider_id}/playlists`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${token.value}`,
+                },
+            });
+
+            if (!res.ok) {
+                console.error(`Error: ${res.status} - ${res.statusText}`);
+                return null;
+            }
+
+            const data = await res.json();
+
+            console.log(data)
+
+            data.items.forEach(item => {
+                if (!userPlaylists.value.some(playlist => playlist.id === item.id)) {
+                    userPlaylists.value.push({ 
+                        id: item.id, 
+                        spotifyId: item.id, 
+                        cover: item.images[0].url, 
+                        enabled: true, 
+                        name: item.name
+                    } as Playlist);
+                }
+            });
+            
+            return userPlaylists.value;
+        } catch (error) {
+            console.error('Failed to get playlists:', error);
+            return null;
+        }
     }
 
     return {
@@ -79,5 +120,6 @@ export default function useSpotify(playlistId: string) {
         getPlaylistStatus,
         followPlaylist,
         unfollowPlaylist,
+        getUserPlaylists
     };
 }
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index f34d9e2..a143333 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -42,7 +42,8 @@ export default defineEventHandler(async (event) => {
         id: result.data.id,
         name: result.data.name,
         spotifyId: result.data.spotifyId,
-        cover: coverUrl
+        cover: coverUrl,
+        enabled: result.data.enabled
     }
 
     const categoriesInsert = result.data.categories.map((category) => ({