diff --git a/spaces/pages/customers.vue b/spaces/pages/customers.vue
deleted file mode 100644
index 0f0d8e0..0000000
--- a/spaces/pages/customers.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-  <div id="main">
-<!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
-    <div id="left">
-
-      <UButton @click="mode = 'create'">+ Kunde</UButton>
-
-      <div class="scrollList">
-        <a v-for="item in customers" @click="selectItem(item)">
-          <UCard class="listItem">
-            <UBadge>{{item.customerNumber}}</UBadge> {{item.name}}
-          </UCard>
-        </a>
-      </div>
-
-
-
-
-    </div>
-    <div id="right">
-            <UCard v-if="selectedItem.id && mode == 'show'" >
-        <template #header>
-          <UBadge>{{selectedItem.customerNumber}}</UBadge> {{selectedItem.name}}
-        </template>
-
-        {{selectedItem.infoData}}<br>
-
-        Kontakte:<br>
-<!--        <ul>
-          <li v-for="contact in selectedItem.contacts.data">{{contact.lastName}}, {{contact.firstName}}</li>
-        </ul>-->
-<!--        {{selectedItem.contacts.data}}-->
-        <br>
-        Projekte:<br>
-<!--        <ul>
-          <li v-for="project in selectedItem.projects.data"><router-link :to="'/projects?id=' + project.id">{{project.name}}</router-link></li>
-        </ul>-->
-
-        <br><br>
-
-        <template #footer>
-          <UButton
-              v-if="mode == 'show' && selectedItem.id"
-              @click="editCustomer"
-          >
-            Bearbeiten
-          </UButton>
-          <UButton
-              @click="cancelEditorCreate"
-              color="red"
-              class="ml-2"
-              disabled
-          >
-            Archivieren
-          </UButton>
-<!-- TODO: Kunde archivieren          -->
-        </template>
-
-
-
-      </UCard>
-      <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-        <template #header>
-          <UBadge>{{customerInfo.customerNumber}}</UBadge> {{customerInfo.name}}
-        </template>
-
-        <UFormGroup
-          label="Name:"
-        >
-          <UInput
-            v-model="customerInfo.name"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-          label="Kundennummer:"
-        >
-          <UInput
-            v-model="customerInfo.customerNumber"
-          />
-        </UFormGroup>
-
-        <UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
-          <UFormGroup
-              label="Kunde aktiv:"
-          >
-            <UCheckbox
-                v-model="customerInfo.active"
-            />
-          </UFormGroup>
-        </UTooltip>
-        <UFormGroup
-          label="Notizen:"
-        >
-          <UTextarea
-            v-model="customerInfo.notes"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-          label="Straße + Hausnummer"
-        >
-          <UInput
-            v-model="customerInfo.infoData.street"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="Postleitzahl"
-        >
-          <UInput
-              v-model="customerInfo.infoData.zip"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="Ort"
-        >
-          <UInput
-            v-model="customerInfo.infoData.city"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-          label="Telefon:"
-        >
-          <UInput
-              v-model="customerInfo.infoData.tel"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="E-Mail:"
-        >
-          <UInput
-              v-model="customerInfo.infoData.email"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="Webseite:"
-        >
-          <UInput
-              v-model="customerInfo.infoData.web"
-          />
-        </UFormGroup>
-        <UFormGroup
-          label="USt-Id:"
-        >
-          <UInput
-              v-model="customerInfo.infoData.ustid"
-          />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton
-              v-if="mode == 'edit'"
-              @click="updateCustomer"
-          >
-            Speichern
-          </UButton>
-          <UButton
-              v-else-if="mode == 'create'"
-              @click="createCustomer"
-          >
-            Erstellen
-          </UButton>
-          <UButton
-              @click="cancelEditorCreate"
-              color="red"
-              class="ml-2"
-          >
-            Abbrechen
-          </UButton>
-        </template>
-
-      </UCard>
-    </div>
-  </div>
-</template>
-
-<script setup>
-definePageMeta({
-  middleware: "auth"
-})
-
-const supabase = useSupabaseClient()
-const toast = useToast()
-const {customers } = storeToRefs(useDataStore())
-const {fetchCustomers} = useDataStore()
-
-
-let showCreateCustomer = ref(false)
-let customerInfo = ref({
-  name: "",
-  customerNumber: 0,
-  infoData: {}
-})
-
-const mode = ref("show")
-let selectedItem = ref({})
-
-const selectItem = (item) => {
-  selectedItem.value = item
-  window.scrollTo(0,0)
-}
-
-/*const createCustomer = async () => {
-  //await create('customers', customerInfo.value)
-  const {data,error} = await supabase
-      .from("customers")
-      .insert([customerInfo.value])
-      .select()
-
-  console.log(error)
-
-
-  customerInfo.value = {}
-  showCreateCustomer.value = false
-  fetchCustomers()
-}*/
-
-
-const createCustomer = async () => {
-  const {error} = await supabase
-      .from("customers")
-      .insert([customerInfo.value])
-      .select()
-
-  if(error) {
-    console.log(error)
-  } else {
-    mode.value = "show"
-    customerInfo.value = {
-      id: 0,
-      name: "",
-      infoData: {}
-    }
-    toast.add({title: "Kunde erfolgreich erstellt"})
-    fetchCustomers()
-  }
-}
-
-const editCustomer = async () => {
-  mode.value = 'edit';
-  customerInfo.value = selectedItem.value
-}
-
-const cancelEditorCreate = () => {
-  mode.value = "show"
-  customerInfo.value = {
-    id: 0,
-    name: "",
-    infoData: {}
-  }
-}
-
-const updateCustomer = async () => {
-  const {error} = await supabase
-      .from("customers")
-      .update(customerInfo.value)
-      .eq('id',customerInfo.value.id)
-  console.log(error)
-  mode.value = "show"
-  customerInfo.value = {
-    id: 0,
-    name: "",
-    infoData: {}
-  }
-  toast.add({title: "Kunde erfolgreich gespeichert"})
-  fetchCustomers()
-}
-
-
-</script>
-
-<style scoped>
-#main {
-  display: flex;
-  flex-direction: row;
-}
-#left {
-  width: 25vw;
-
-}
-
-
-
-#right {
-  width: 60vw;
-  padding-left: 3vw;
-}
-
-
-</style>
\ No newline at end of file
diff --git a/spaces/pages/customers/[mode]/[[id]].vue b/spaces/pages/customers/[mode]/[[id]].vue
new file mode 100644
index 0000000..af9ca19
--- /dev/null
+++ b/spaces/pages/customers/[mode]/[[id]].vue
@@ -0,0 +1,283 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+//
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+//Store
+const {customers } = storeToRefs(useDataStore())
+const {fetchCustomers, getCustomerById} = useDataStore()
+
+let currentCustomer = null
+
+
+
+//Working
+const mode = ref(route.params.mode || "show")
+const customerInfo = ref({
+  name: "",
+  customerNumber: 0,
+  infoData: {}
+})
+
+//Functions
+const setupPage = () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentCustomer = getCustomerById(Number(useRoute().params.id))
+  }
+
+  if(mode.value === "edit") customerInfo.value = currentCustomer
+
+
+
+}
+
+const createCustomer = async () => {
+  const {data,error} = await supabase
+      .from("customers")
+      .insert([customerInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    customerInfo.value = {
+      id: 0,
+      name: "",
+      infoData: {}
+    }
+    toast.add({title: "Kunde erfolgreich erstellt"})
+    await fetchCustomers()
+    router.push(`/customers/show/${data[0].id}`)
+    setupPage()
+  }
+}
+
+const editCustomer = async () => {
+  router.push(`/customers/edit/${currentCustomer.id}`)
+  setupPage()
+}
+
+const cancelEditorCreate = () => {
+  mode.value = "show"
+  customerInfo.value = {
+    id: 0,
+    name: "",
+    infoData: {}
+  }
+}
+
+const updateCustomer = async () => {
+  const {error} = await supabase
+      .from("customers")
+      .update(customerInfo.value)
+      .eq('id',customerInfo.value.id)
+  console.log(error)
+  mode.value = "show"
+  customerInfo.value = {
+    id: 0,
+    name: "",
+    infoData: {}
+  }
+  toast.add({title: "Kunde erfolgreich gespeichert"})
+  fetchCustomers()
+}
+
+
+
+setupPage()
+</script>
+
+<template>
+  <div>
+    <UCard v-if="currentCustomer && mode == 'show'" >
+      <template #header>
+        <UBadge
+            v-if="currentCustomer.active"
+        >
+          Kunde aktiv
+        </UBadge>
+        <UBadge
+          v-else
+          color="red"
+        >
+          Kunde gesperrt
+        </UBadge>
+        {{currentCustomer.name}}
+      </template>
+
+      Kundennummer: {{currentCustomer.customerNumber}} <br>
+
+      <UDivider
+          class="my-2"
+      />
+
+      Informationen:<br>
+      {{currentCustomer.infoData}}<br>
+
+      <UDivider
+        class="my-2"
+      />
+
+      Notizen:<br>
+      {{currentCustomer.notes}}<br>
+
+<!--      Kontakte:<br>
+      &lt;!&ndash;        <ul>
+      <li v-for="contact in currentCustomer.contacts.data">{{contact.lastName}}, {{contact.firstName}}</li>
+    </ul>&ndash;&gt;
+      &lt;!&ndash;        {{currentCustomer.contacts.data}}&ndash;&gt;
+      <br>
+      Projekte:<br>
+      &lt;!&ndash;        <ul>
+      <li v-for="project in currentCustomer.projects.data"><router-link :to="'/projects?id=' + project.id">{{project.name}}</router-link></li>
+    </ul>&ndash;&gt;-->
+
+
+
+      <template #footer>
+        <UButton
+            v-if="mode == 'show' && currentCustomer.id"
+            @click="editCustomer"
+        >
+          Bearbeiten
+        </UButton>
+        <UButton
+            @click="cancelEditorCreate"
+            color="red"
+            class="ml-2"
+            disabled
+        >
+          Archivieren
+        </UButton>
+        <!-- TODO: Kunde archivieren        -->
+      </template>
+
+
+
+    </UCard>
+    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
+      <template #header>
+        <UBadge>{{customerInfo.customerNumber}}</UBadge> {{customerInfo.name}}
+      </template>
+
+      <UFormGroup
+          label="Name:"
+      >
+        <UInput
+            v-model="customerInfo.name"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Kundennummer:"
+      >
+        <UInput
+            v-model="customerInfo.customerNumber"
+        />
+      </UFormGroup>
+
+      <UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
+        <UFormGroup
+            label="Kunde aktiv:"
+        >
+          <UCheckbox
+              v-model="customerInfo.active"
+          />
+        </UFormGroup>
+      </UTooltip>
+      <UFormGroup
+          label="Notizen:"
+      >
+        <UTextarea
+            v-model="customerInfo.notes"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Straße + Hausnummer"
+      >
+        <UInput
+            v-model="customerInfo.infoData.street"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Postleitzahl"
+      >
+        <UInput
+            v-model="customerInfo.infoData.zip"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Ort"
+      >
+        <UInput
+            v-model="customerInfo.infoData.city"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Telefon:"
+      >
+        <UInput
+            v-model="customerInfo.infoData.tel"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="E-Mail:"
+      >
+        <UInput
+            v-model="customerInfo.infoData.email"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Webseite:"
+      >
+        <UInput
+            v-model="customerInfo.infoData.web"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="USt-Id:"
+      >
+        <UInput
+            v-model="customerInfo.infoData.ustid"
+        />
+      </UFormGroup>
+
+      <template #footer>
+        <UButton
+            v-if="mode == 'edit'"
+            @click="updateCustomer"
+        >
+          Speichern
+        </UButton>
+        <UButton
+            v-else-if="mode == 'create'"
+            @click="createCustomer"
+        >
+          Erstellen
+        </UButton>
+        <UButton
+            @click="cancelEditorCreate"
+            color="red"
+            class="ml-2"
+        >
+          Abbrechen
+        </UButton>
+      </template>
+
+    </UCard>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/spaces/pages/customers/index.vue b/spaces/pages/customers/index.vue
new file mode 100644
index 0000000..b30c2f7
--- /dev/null
+++ b/spaces/pages/customers/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div id="main">
+    <!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
+
+    <UButton @click="router.push(`/customers/create/`)">+ Kunde</UButton>
+
+    <UTable
+        :rows="customers"
+        :columns="customerColumns"
+        @select="selectCustomer"
+
+    />
+
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const router = useRouter()
+const {customers } = storeToRefs(useDataStore())
+const mode = ref("show")
+
+const customerColumns = [
+  {
+    key: 'customerNumber',
+    label: "Kundennr.",
+    sortable: true
+  },
+  {
+    key: "name",
+    label: "Name",
+    sortable: true
+  }
+]
+
+
+const selectCustomer = (customer) => {
+  console.log(customer)
+  router.push(`/customers/show/${customer.id} `)
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/spaces/stores/data.ts b/spaces/stores/data.ts
index e8b7fee..0c20fc3 100644
--- a/spaces/stores/data.ts
+++ b/spaces/stores/data.ts
@@ -120,6 +120,7 @@ export const useDataStore = defineStore('data', {
         movementsBySpace: (state) => (spaceId:number) => state.movements.filter(move => move.spaceId === spaceId),
         getProductById: (state) => (productId:number) => state.products.find(product => product.id === productId),
         getProjectById: (state) => (projectId:number) => state.projects.find(project => project.id === projectId),
+        getCustomerById: (state) => (customerId:number) => state.customers.find(customer => customer.id === customerId),
         getFormSubmitsWithLabelProp: (state) => (state.formSubmits.map(submit => {return{...submit, label: submit.id}})),
         getResources: (state) => {
             return [