diff --git a/spaces/nuxt.config.ts b/spaces/nuxt.config.ts
index 943691e..50fba54 100644
--- a/spaces/nuxt.config.ts
+++ b/spaces/nuxt.config.ts
@@ -16,8 +16,8 @@ export default defineNuxtConfig({
         "nuxt-editorjs",
         '@nuxtjs/fontaine',
         '@nuxtjs/google-fonts',
-        '@vite-pwa/nuxt'
-
+        '@vite-pwa/nuxt',
+        'nuxt-viewport'
 
     ],
     routeRules: {
diff --git a/spaces/package.json b/spaces/package.json
index a55a6de..acdacd8 100644
--- a/spaces/package.json
+++ b/spaces/package.json
@@ -22,6 +22,7 @@
     "@fullcalendar/core": "^6.1.10",
     "@fullcalendar/daygrid": "^6.1.10",
     "@fullcalendar/interaction": "^6.1.10",
+    "@fullcalendar/list": "^6.1.10",
     "@fullcalendar/resource": "^6.1.10",
     "@fullcalendar/resource-timeline": "^6.1.10",
     "@fullcalendar/vue3": "^6.1.10",
@@ -37,6 +38,7 @@
     "buffer": "^6.0.3",
     "jsprintmanager": "^6.0.3",
     "nuxt-editorjs": "^1.0.4",
+    "nuxt-viewport": "^2.0.6",
     "papaparse": "^5.4.1",
     "pinia": "^2.1.7",
     "uuidv4": "^6.2.13"
diff --git a/spaces/pages/planningBoard.vue b/spaces/pages/planningBoard.vue
index 35d2d2e..63025aa 100644
--- a/spaces/pages/planningBoard.vue
+++ b/spaces/pages/planningBoard.vue
@@ -4,6 +4,14 @@ import dayGridPlugin from '@fullcalendar/daygrid'
 import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
 import deLocale from '@fullcalendar/core/locales/de'
 import interactionPlugin from '@fullcalendar/interaction'
+import listPlugin from '@fullcalendar/list';
+
+
+const viewport = useViewport()
+
+watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
+  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
+})
 
 const supabase = useSupabaseClient()
 
@@ -37,9 +45,15 @@ const createEvent = async () => {
 
 
 }
+const calendarOptionsList = reactive({
+  locale: deLocale,
+  plugins: [listPlugin],
+  initialView: "listWeek",
+  initialEvents: events,
+  nowIndicator: true
+})
 
-
-const calendarOptions = reactive({
+const calendarOptionsTimeline = reactive({
   schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
   locale: deLocale,
   plugins: [resourceTimelinePlugin, interactionPlugin],
@@ -140,12 +154,21 @@ const calendarOptions = reactive({
 
       </UCard>
     </UModal>
-    <FullCalendar
-      :options="calendarOptions"
-    />
+
+    <div v-if="viewport.isLessThan('tablet')">
+      <FullCalendar
+        :options="calendarOptionsList"
+      />
+    </div>
+    <div v-else>
+      <FullCalendar
+          :options="calendarOptionsTimeline"
+      />
+    </div>
+
+
   </div>
 </template>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/spaces/pages/tasks.vue b/spaces/pages/tasks.vue
index 509540d..54ad196 100644
--- a/spaces/pages/tasks.vue
+++ b/spaces/pages/tasks.vue
@@ -112,72 +112,84 @@
             </USelectMenu>-->
     </div>
 
+    <div v-if="viewport.isLessThan('tablet')" class="scrollList">
+      <a
+        v-for="task in tasks.filter(item => item.categorie != 'Erledigt')"
+      >
+        <UCard class="listItem">
+          <template #header>
+            <UBadge>{{task.categorie}}</UBadge> {{task.name}}
+          </template>
+          {{task.description}}
 
+        </UCard>
+      </a>
+    </div>
+    <div v-else>
 
+      <div id="taskCatList">
+        <div id="catNew">
+          <h3>Offene Aufgaben</h3>
+          <div class="taskScrollList" v-if="tasks.length > 0">
+            <a
+                v-for="taskNew in tasks.filter(task => task.categorie == 'Offen')"
+                @click="inspectTask(taskNew)"
+            >
+              <UCard class="listItem">
+                {{taskNew.name}}
+                <UBadge
+                    v-for="user in taskNew.users"
+                    class="mr-2"
+                >
+                  {{user}}
+                </UBadge>
+              </UCard>
+            </a>
 
+          </div>
 
-    <div id="taskCatList">
-      <div id="catNew">
-        <h3>Offene Aufgaben</h3>
-        <div class="taskScrollList" v-if="tasks.length > 0">
-          <a
-              v-for="taskNew in tasks.filter(task => task.categorie == 'Offen')"
-              @click="inspectTask(taskNew)"
-          >
-            <UCard class="listItem">
-              {{taskNew.name}}
-              <UBadge
-                  v-for="user in taskNew.users"
-                  class="mr-2"
-              >
-                {{user}}
-              </UBadge>
-            </UCard>
-          </a>
 
         </div>
+        <div id="catInProgress">
+          <h3>Aufgaben in Bearbeitung</h3>
+          <div class="taskScrollList" v-if="tasks.length > 0">
+            <a
+                v-for="taskNew in tasks.filter(task => task.categorie == 'In Bearbeitung')"
+                @click="inspectTask(taskNew)"
+            >
+              <UCard class="listItem">
+                {{taskNew.name}}
+                <UBadge
+                    v-for="user in taskNew.users"
+                    class="mr-2"
+                >
+                  {{user}}
+                </UBadge>
+              </UCard>
+            </a>
+          </div>
 
-
-      </div>
-      <div id="catInProgress">
-        <h3>Aufgaben in Bearbeitung</h3>
-        <div class="taskScrollList" v-if="tasks.length > 0">
-          <a
-              v-for="taskNew in tasks.filter(task => task.categorie == 'In Bearbeitung')"
-              @click="inspectTask(taskNew)"
-          >
-            <UCard class="listItem">
-              {{taskNew.name}}
-              <UBadge
-                  v-for="user in taskNew.users"
-                  class="mr-2"
-              >
-                {{user}}
-              </UBadge>
-            </UCard>
-          </a>
         </div>
+        <div id="catUrgent">
+          <h3>Dringende Aufgaben</h3>
+          <div class="taskScrollList" v-if="tasks.length > 0">
+            <a
+                v-for="taskNew in tasks.filter(task => task.categorie == 'Dringend')"
+                @click="inspectTask(taskNew)"
+            >
+              <UCard class="listItem">
+                {{taskNew.name}}
+                <UBadge
+                    v-for="user in taskNew.users"
+                    class="mr-2"
+                >
+                  {{user}}
+                </UBadge>
+              </UCard>
+            </a>
+          </div>
 
-      </div>
-      <div id="catUrgent">
-        <h3>Dringende Aufgaben</h3>
-        <div class="taskScrollList" v-if="tasks.length > 0">
-          <a
-              v-for="taskNew in tasks.filter(task => task.categorie == 'Dringend')"
-              @click="inspectTask(taskNew)"
-          >
-            <UCard class="listItem">
-              {{taskNew.name}}
-              <UBadge
-                  v-for="user in taskNew.users"
-                  class="mr-2"
-              >
-                {{user}}
-              </UBadge>
-            </UCard>
-          </a>
         </div>
-
       </div>
     </div>
   </UPage>
@@ -189,6 +201,12 @@ definePageMeta({
   middleware: "auth",
 })
 
+const viewport = useViewport()
+
+watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
+  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
+})
+
 const toast = useToast()
 const supabase = useSupabaseClient()
 const {tasks} = storeToRefs(useDataStore())