diff --git a/web/src/lib/elements/ui/dataTable/data-table-actions.svelte b/web/src/lib/elements/ui/dataTable/data-table-actions.svelte
index 6a710065a..76756e7b7 100644
--- a/web/src/lib/elements/ui/dataTable/data-table-actions.svelte
+++ b/web/src/lib/elements/ui/dataTable/data-table-actions.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
   import Ellipsis from 'lucide-svelte/icons/ellipsis';
   import * as DropdownMenu from '$lib/elements/ui/dropdown-menu';
-  import { Button } from '$lib/elements/ui/button';
+  import Button from '$lib/elements/ui/button/button.svelte';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
 
   export let id: string;
+  export let deleteEntry: (id: string) => Promise<void>;
+  export let getData: () => Promise<void>;
 </script>
 
 <DropdownMenu.Root>
@@ -15,11 +19,17 @@
   </DropdownMenu.Trigger>
   <DropdownMenu.Content>
     <DropdownMenu.Group>
-      <DropdownMenu.Label>Actions</DropdownMenu.Label>
-      <DropdownMenu.Item on:click={() => navigator.clipboard.writeText(id)}>Copy payment ID</DropdownMenu.Item>
+      <DropdownMenu.Label>Aktionen</DropdownMenu.Label>
+      <DropdownMenu.Item on:click={() => navigator.clipboard.writeText(id)}>ID kopieren</DropdownMenu.Item>
     </DropdownMenu.Group>
+    <DropdownMenu.Item on:click={() => goto(`${$page.url}/${id}`)}>Editieren</DropdownMenu.Item>
     <DropdownMenu.Separator />
-    <DropdownMenu.Item>View customer</DropdownMenu.Item>
-    <DropdownMenu.Item>View payment details</DropdownMenu.Item>
+    <DropdownMenu.Item
+      on:click={async () => {
+        await deleteEntry(id);
+        await getData();
+      }}
+      class="text-red-600">Löschen</DropdownMenu.Item
+    >
   </DropdownMenu.Content>
 </DropdownMenu.Root>
diff --git a/web/src/lib/elements/ui/dataTable/data-table-checkbox.svelte b/web/src/lib/elements/ui/dataTable/data-table-checkbox.svelte
index e36f95637..66c48f99a 100644
--- a/web/src/lib/elements/ui/dataTable/data-table-checkbox.svelte
+++ b/web/src/lib/elements/ui/dataTable/data-table-checkbox.svelte
@@ -1,8 +1,17 @@
 <script lang="ts">
   import { Checkbox } from '$lib/elements/ui/checkbox';
+  import { cn } from '$lib/utils';
   import type { Writable } from 'svelte/store';
 
   export let checked: Writable<boolean>;
+  export let white: Boolean;
 </script>
 
-<Checkbox bind:checked={$checked} />
+{#if white}
+  <Checkbox
+    bind:checked={$checked}
+    class={cn('border-white data-[state=checked]:bg-white data-[state=checked]:text-foreground')}
+  />
+{:else}
+  <Checkbox bind:checked={$checked} />
+{/if}
diff --git a/web/src/lib/elements/ui/dataTable/data-table.svelte b/web/src/lib/elements/ui/dataTable/data-table.svelte
index 7993a217d..00320ff18 100644
--- a/web/src/lib/elements/ui/dataTable/data-table.svelte
+++ b/web/src/lib/elements/ui/dataTable/data-table.svelte
@@ -1,6 +1,13 @@
+<script context="module" lang="ts">
+  export type DataItem = {
+    id: string;
+
+    [key: string]: string | string[] | number;
+  };
+</script>
+
 <script lang="ts">
   import { createTable, Render, Subscribe, createRender } from 'svelte-headless-table';
-  import { writable } from 'svelte/store';
   import * as Table from '$lib/elements/ui/table';
   import DataTableActions from './data-table-actions.svelte';
   import {
@@ -9,46 +16,50 @@
     addTableFilter,
     addHiddenColumns,
     addSelectedRows,
+    type SortKey,
   } from 'svelte-headless-table/plugins';
   import { Button } from '$lib/elements/ui/button';
-  import ArrowUpDown from 'lucide-svelte/icons/arrow-up-down';
   import ChevronDown from 'lucide-svelte/icons/chevron-down';
-  import { Input } from '$lib/elements/ui/input';
   import * as DropdownMenu from '$lib/elements/ui/dropdown-menu';
   import DataTableCheckbox from './data-table-checkbox.svelte';
+  import { ArrowDown, ArrowUp } from 'lucide-svelte';
+  import { Input } from '$lib/elements/ui/input';
+  import { writable, type Writable } from 'svelte/store';
 
-  interface DataItem {
-    id: string;
-
-    [key: string]: string | string[] | number;
-  }
-
-  export let data: DataItem[];
+  let tableData: Writable<DataItem[]> = writable([]);
   export let columnNames;
+  export let keys;
+  export let totalElements: Writable<number> = writable(0);
+  export let loadPage: (
+    index: number,
+    toSort: string,
+    filter: string,
+  ) => Promise<{
+    data: DataItem[];
+    totalElements: number;
+  }>;
+  export let deleteEntry: (id: string) => Promise<void>;
 
-  const table = createTable(writable(data), {
-    page: addPagination(),
-    sort: addSortBy(),
-    filter: addTableFilter({
-      fn: ({ filterValue, value }) => value.toLowerCase().includes(filterValue.toLowerCase()),
-    }),
+  const table = createTable(tableData, {
+    page: addPagination({ serverSide: true, serverItemCount: totalElements, initialPageSize: 10 }), //TODO: change page size, 10 only for testing
+    sort: addSortBy({ serverSide: true }),
+    filter: addTableFilter({ serverSide: true }),
     hide: addHiddenColumns(),
     select: addSelectedRows(),
   });
 
-  let idKey = Object.keys(data[0])[0];
-  console.log(idKey);
   let columns = table.createColumns([
     table.column({
       //first column only contains the checkboxes.
       accessor: (item) => {
-        return item[idKey]; //'item' is of type 'unknown' error dont know how to fix
+        return item[keys[0]];
       },
       id: 'id',
       header: (_, { pluginStates }) => {
         const { allPageRowsSelected } = pluginStates.select;
         return createRender(DataTableCheckbox, {
           checked: allPageRowsSelected,
+          white: true,
         });
       },
       cell: ({ row }, { pluginStates }) => {
@@ -57,6 +68,7 @@
 
         return createRender(DataTableCheckbox, {
           checked: isSelected,
+          white: false,
         });
       },
       plugins: {
@@ -67,14 +79,14 @@
     }),
   ]);
   for (const [i, columnName] of columnNames.entries()) {
-    let currentKey = Object.keys(data[0])[i + 1];
     columns = columns.concat(
       table.createColumns([
         table.column({
           accessor: (item: DataItem) => {
-            return item[currentKey];
+            return item[keys[i + 1]];
           },
           header: columnName,
+          id: keys[i + 1],
         }),
       ]),
     );
@@ -84,12 +96,12 @@
     table.createColumns([
       table.column({
         accessor: (item) => {
-          return item[idKey];
+          return item[keys[0]];
         },
         header: '',
         id: 'actions',
         cell: ({ value }) => {
-          return createRender(DataTableActions, { id: value.toString() });
+          return createRender(DataTableActions, { id: value.toString(), deleteEntry, getData });
         },
         plugins: {
           sort: {
@@ -100,12 +112,20 @@
     ]),
   );
 
-  const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, flatColumns, rows } =
-    table.createViewModel(columns);
+  let tableOptions = {
+    rowDataId: (item: { [x: string]: any }, index: number) => {
+      return item ? item['id'] : index;
+    },
+  };
+  const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, flatColumns, rows } = table.createViewModel(
+    columns,
+    tableOptions,
+  );
   const { hasNextPage, hasPreviousPage, pageIndex } = pluginStates.page;
   const { filterValue } = pluginStates.filter;
   const { hiddenColumnIds } = pluginStates.hide;
-  const { selectedDataIds } = pluginStates.select;
+  const { selectedDataIds, allPageRowsSelected } = pluginStates.select;
+  const { sortKeys } = pluginStates.sort;
 
   const ids = flatColumns.map((col) => col.id);
   let hideForId = Object.fromEntries(ids.map((id) => [id, true]));
@@ -114,20 +134,54 @@
     .filter(([, hide]) => !hide)
     .map(([id]) => id);
 
-  const hidableCols = ['status', 'email', 'amount'];
+  const hidableCols = keys.slice(1);
+
+  async function getData() {
+    let sortKey: SortKey = $sortKeys[0];
+    let sortString;
+    sortString = sortKey ? `${sortKey.id},${sortKey.order}` : '';
+    let result = await loadPage($pageIndex, sortString, $filterValue);
+    tableData.set(result.data);
+    totalElements.set(result.totalElements);
+  }
+
+  async function onDeleteKey(e: KeyboardEvent) {
+    if (e.code !== 'Delete') {
+      return;
+    }
+    let promises: Promise<void>[] = [];
+    Object.keys($selectedDataIds).forEach((row) => {
+      promises.push(deleteEntry(row));
+    });
+    await Promise.all(promises);
+    $allPageRowsSelected = false;
+    await getData();
+  }
+
+  $: async () => {
+    $filterValue;
+    $pageIndex;
+    await getData();
+  };
 </script>
 
+<svelte:window on:keydown={onDeleteKey} />
 <div>
   <div class="flex items-center py-4">
-    <Input bind:value={$filterValue} class="max-w-sm" placeholder="Suche..." type="text" />
+    <Input
+      bind:value={$filterValue}
+      class="max-w-sm rounded-none border-0 border-b-4 border-foreground focus-visible:ring-0 focus-visible:border-b-4"
+      placeholder="Suche..."
+      type="text"
+    />
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild let:builder>
-        <Button builders={[builder]} class="ml-auto" variant="outline">
-          Filter
+        <Button builders={[builder]} class="ml-auto" variant="secondary">
+          Spalten
           <ChevronDown class="ml-2 h-4 w-4" />
         </Button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content class="text-primary">
         {#each flatColumns as col}
           {#if hidableCols.includes(col.id)}
             <DropdownMenu.CheckboxItem bind:checked={hideForId[col.id]}>
@@ -138,19 +192,29 @@
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   </div>
-  <div class="rounded-md border">
+  <div>
     <Table.Root {...$tableAttrs}>
-      <Table.Header>
+      <Table.Header class="bg-foreground">
         {#each $headerRows as headerRow}
           <Subscribe rowAttrs={headerRow.attrs()}>
             <Table.Row>
               {#each headerRow.cells as cell (cell.id)}
                 <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
-                  <Table.Head {...attrs} class="[&:has([role=checkbox])]:pl-3">
+                  <Table.Head {...attrs} class="[&:has([role=checkbox])]:pl-4">
                     {#if cell.id !== 'actions' && cell.id !== 'id'}
-                      <Button variant="ghost" on:click={props.sort.toggle}>
+                      <Button
+                        variant="ghost"
+                        on:click={(event) => {
+                          props.sort.toggle(event);
+                          getData();
+                        }}
+                        class="text-white"
+                      >
                         <Render of={cell.render()} />
-                        <ArrowUpDown class={'ml-2 h-4 w-4'} />
+                        <div class="flex ml-2">
+                          <ArrowUp class="h-4 w-4 {props.sort.order === 'asc' ? 'text-accent' : ''}" />
+                          <ArrowDown class="ml-[-4px] h-4 w-4 {props.sort.order === 'desc' ? 'text-accent' : ''}" />
+                        </div>
                       </Button>
                     {:else}
                       <Render of={cell.render()} />
@@ -184,10 +248,22 @@
       {Object.keys($selectedDataIds).length} von{' '}
       {$rows.length} Zeile(n) ausgewählt.
     </div>
-    <Button disabled={!$hasPreviousPage} on:click={() => ($pageIndex = $pageIndex - 1)} size="sm" variant="outline"
+    <Button
+      disabled={!$hasPreviousPage}
+      on:click={() => {
+        $pageIndex--;
+      }}
+      size="sm"
+      variant="secondary"
       >Zurück
     </Button>
-    <Button disabled={!$hasNextPage} on:click={() => ($pageIndex = $pageIndex + 1)} size="sm" variant="outline"
+    <Button
+      disabled={!$hasNextPage}
+      on:click={() => {
+        $pageIndex++;
+      }}
+      size="sm"
+      variant="secondary"
       >Weiter
     </Button>
   </div>
diff --git a/web/src/lib/elements/ui/table/table-body.svelte b/web/src/lib/elements/ui/table/table-body.svelte
index 1ce161d8a..43807c959 100644
--- a/web/src/lib/elements/ui/table/table-body.svelte
+++ b/web/src/lib/elements/ui/table/table-body.svelte
@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<tbody class={cn('[&_tr:last-child]:border-0', className)} {...$$restProps}>
+<tbody class={cn('[&_tr:last-child]:border-0 bg-white', className)} {...$$restProps}>
   <slot />
 </tbody>
diff --git a/web/src/lib/elements/ui/table/table-row.svelte b/web/src/lib/elements/ui/table/table-row.svelte
index 3f7d400bc..548d828c9 100644
--- a/web/src/lib/elements/ui/table/table-row.svelte
+++ b/web/src/lib/elements/ui/table/table-row.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <tr
-  class={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+  class={cn('border-b transition-colors data-[state=selected]:bg-muted', className)}
   {...$$restProps}
   on:click
   on:keydown
diff --git a/web/src/lib/elements/ui/table/table.svelte b/web/src/lib/elements/ui/table/table.svelte
index c1a6213fc..79f4ccb57 100644
--- a/web/src/lib/elements/ui/table/table.svelte
+++ b/web/src/lib/elements/ui/table/table.svelte
@@ -8,7 +8,7 @@
   export { className as class };
 </script>
 
-<div class="relative w-full overflow-auto">
+<div class="relative w-full overflow-auto rounded-md border border-foreground">
   <table class={cn('w-full caption-bottom text-sm', className)} {...$$restProps}>
     <slot />
   </table>
diff --git a/web/src/routes/admin/(resources)/rooms/+page.svelte b/web/src/routes/admin/(resources)/rooms/+page.svelte
index 6ef6c3d52..12ad638ce 100644
--- a/web/src/routes/admin/(resources)/rooms/+page.svelte
+++ b/web/src/routes/admin/(resources)/rooms/+page.svelte
@@ -1,25 +1,49 @@
 <script lang="ts">
-  import DataTable from '$lib/elements/ui/dataTable/data-table.svelte';
-  let columnNames = ['Name', 'Gebäude', 'Kapazität', 'test'];
+  import DataTable, { type DataItem } from '$lib/elements/ui/dataTable/data-table.svelte';
+  import { deleteRoom, getRooms, type Pageable, type PageRoom } from '$lib/sdk/fetch-client';
+  import { error } from '@sveltejs/kit';
 
-  //demo data from shadcn
-  const data = [
-    {
-      id: '728ed52f',
-      amount: 100,
-      status: 'pending',
-      email: 'm@example.com',
-    },
-    {
-      id: '489e1d42',
-      amount: 125,
-      status: 'processing',
-      email: ['test1', 'test2'],
-    },
-  ];
+  let columnNames = ['Name', 'Gebäude', 'Kapazität', 'Tags'];
+  let keys = ['id', 'Name', 'buildingName', 'capacity', 'tags'];
+
+  async function loadPage(index: number, sortString: string, filter: string) {
+    let pageable: Pageable = { page: index, size: 10, sort: [sortString] };
+    let result: PageRoom;
+    try {
+      result = await getRooms(pageable, {
+        name: filter,
+        buildingName: filter,
+        capacity: /^\d+$/.test(filter) ? (filter as unknown as number) : undefined,
+      });
+      let dataItems: DataItem[] = result.content
+        ? result.content.map(
+            (room): DataItem => ({
+              id: room.id,
+              name: room.name,
+              buildingName: room.buildingName,
+              capacity: room.capacity,
+              tags: room.tags.map((tag) => tag.name),
+            }),
+          )
+        : [];
+      return {
+        data: dataItems,
+        totalElements: Number(result.totalElements),
+      };
+    } catch {
+      error(400, { message: 'Could not fetch page' });
+    }
+  }
+
+  async function deleteEntry(id: string) {
+    try {
+      await deleteRoom(id);
+    } catch {
+      error(400, { message: `could not delete room with id ${id}` });
+    }
+  }
 </script>
 
-<!--not yet formatted-->
-<div class="container mx-auto py-10 bg-white w-full mt-5">
-  <DataTable {data} {columnNames} />
+<div class="mx-auto p-10 w-full">
+  <DataTable {columnNames} {keys} {loadPage} {deleteEntry} />
 </div>
diff --git a/web/src/routes/admin/(resources)/rooms/+page.ts b/web/src/routes/admin/(resources)/rooms/+page.ts
index 63e341069..4f84b06ef 100644
--- a/web/src/routes/admin/(resources)/rooms/+page.ts
+++ b/web/src/routes/admin/(resources)/rooms/+page.ts
@@ -3,7 +3,7 @@ import type { PageLoad } from './$types';
 export const load = (() => {
   return {
     meta: {
-      title: 'Raummangement',
+      title: 'Räume',
     },
   };
 }) satisfies PageLoad;
diff --git a/web/src/routes/admin/(resources)/students/+page.svelte b/web/src/routes/admin/(resources)/students/+page.svelte
index e69de29bb..3e229cd52 100644
--- a/web/src/routes/admin/(resources)/students/+page.svelte
+++ b/web/src/routes/admin/(resources)/students/+page.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import DataTable, { type DataItem } from '$lib/elements/ui/dataTable/data-table.svelte';
+  import { deleteStudent, getStudents, type Pageable, type PageStudent } from '$lib/sdk/fetch-client';
+  import { error } from '@sveltejs/kit';
+
+  let columnNames = ['Vorname', 'Nachname', 'Tags'];
+  let keys = ['id', 'firstName', 'lastName', 'tags'];
+
+  async function loadPage(index: number, sortString: string, filter: string) {
+    let pageable: Pageable = { page: index, size: 10, sort: [sortString] };
+    try {
+      const result: PageStudent = await getStudents(pageable, {
+        firstName: filter,
+        lastName: filter,
+      });
+      let dataItems: DataItem[] = result.content
+        ? result.content.map(
+            (student): DataItem => ({
+              id: student.id,
+              firstName: student.firstName,
+              lastName: student.lastName,
+              tags: student.tags.map((tag) => tag.name),
+            }),
+          )
+        : [];
+      return {
+        data: dataItems,
+        totalElements: Number(result.totalElements),
+      };
+    } catch {
+      error(400, { message: 'Could not fetch page' });
+    }
+  }
+
+  async function deleteEntry(id: string) {
+    try {
+      await deleteStudent(id);
+    } catch {
+      error(400, { message: `could not delete student with id ${id}` });
+    }
+  }
+</script>
+
+<div class="p-10 w-full">
+  <!--Avoids warning that fetch calls should be in onMount or load function, there must be a better solution-->
+  <DataTable {columnNames} {keys} {loadPage} {deleteEntry} />
+</div>
diff --git a/web/src/routes/admin/(resources)/students/+page.ts b/web/src/routes/admin/(resources)/students/+page.ts
index 28d058bbb..cd20f810c 100644
--- a/web/src/routes/admin/(resources)/students/+page.ts
+++ b/web/src/routes/admin/(resources)/students/+page.ts
@@ -3,7 +3,7 @@ import type { PageLoad } from './$types';
 export const load = (() => {
   return {
     meta: {
-      title: 'Students',
+      title: 'Schüler',
     },
   };
 }) satisfies PageLoad;
diff --git a/web/src/routes/admin/(resources)/subjects/+page.svelte b/web/src/routes/admin/(resources)/subjects/+page.svelte
index e69de29bb..35e71371e 100644
--- a/web/src/routes/admin/(resources)/subjects/+page.svelte
+++ b/web/src/routes/admin/(resources)/subjects/+page.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { DataItem } from '$lib/elements/ui/dataTable/data-table.svelte';
+  import DataTable from '$lib/elements/ui/dataTable/data-table.svelte';
+  import { deleteSubject, getSubjects, type Pageable, type PageSubject } from '$lib/sdk/fetch-client';
+  import { error } from '@sveltejs/kit';
+
+  let columnNames = ['Name', 'Tags'];
+  let keys = ['id', 'name', 'tags'];
+
+  async function loadPage(index: number, sortString: string, filter: string) {
+    let pageable: Pageable = { page: index, size: 10, sort: [sortString] };
+    try {
+      const result: PageSubject = await getSubjects(pageable, {
+        name: filter,
+      });
+      let dataItems: DataItem[] = result.content
+        ? result.content.map(
+            (subject): DataItem => ({
+              id: subject.id,
+              name: subject.name,
+              tags: subject.tags.map((tag) => tag.name),
+            }),
+          )
+        : [];
+      return {
+        data: dataItems,
+        totalElements: Number(result.totalElements),
+      };
+    } catch {
+      error(400, { message: 'Could not fetch page' });
+    }
+  }
+
+  async function deleteEntry(id: string) {
+    try {
+      await deleteSubject(id);
+    } catch {
+      error(400, { message: `could not delete subject with id ${id}` });
+    }
+  }
+</script>
+
+<div class="p-10 w-full">
+  <DataTable {columnNames} {keys} {loadPage} {deleteEntry} />
+</div>
diff --git a/web/src/routes/admin/(resources)/subjects/+page.ts b/web/src/routes/admin/(resources)/subjects/+page.ts
index a730e47c2..06d9483ef 100644
--- a/web/src/routes/admin/(resources)/subjects/+page.ts
+++ b/web/src/routes/admin/(resources)/subjects/+page.ts
@@ -3,7 +3,7 @@ import type { PageLoad } from './$types';
 export const load = (() => {
   return {
     meta: {
-      title: 'Subjects',
+      title: 'Fächer',
     },
   };
 }) satisfies PageLoad;
diff --git a/web/src/routes/admin/(resources)/tags/+page.svelte b/web/src/routes/admin/(resources)/tags/+page.svelte
index e69de29bb..adde457cb 100644
--- a/web/src/routes/admin/(resources)/tags/+page.svelte
+++ b/web/src/routes/admin/(resources)/tags/+page.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import DataTable, { type DataItem } from '$lib/elements/ui/dataTable/data-table.svelte';
+  import { deleteTag, getTags, type Pageable, type PageTag } from '$lib/sdk/fetch-client';
+  import { error } from '@sveltejs/kit';
+
+  let columnNames = ['Name'];
+  let keys = ['id', 'name'];
+
+  async function loadPage(index: number, sortString: string, filter: string) {
+    let pageable: Pageable = { page: index, size: 10, sort: [sortString] };
+    try {
+      const result: PageTag = await getTags(pageable, {
+        name: filter,
+      });
+      let dataItems: DataItem[] = result.content
+        ? result.content.map(
+            (tag): DataItem => ({
+              id: tag.id,
+              name: tag.name,
+            }),
+          )
+        : [];
+      return {
+        data: dataItems,
+        totalElements: Number(result.totalElements),
+      };
+    } catch {
+      error(400, { message: 'Could not fetch page' });
+    }
+  }
+
+  async function deleteEntry(id: string) {
+    try {
+      await deleteTag(id);
+    } catch {
+      error(400, { message: `could not delete tag with id ${id}` });
+    }
+  }
+</script>
+
+<div class="p-10 w-full">
+  <DataTable {columnNames} {keys} {loadPage} {deleteEntry} />
+</div>
diff --git a/web/src/routes/admin/(resources)/teachers/+page.svelte b/web/src/routes/admin/(resources)/teachers/+page.svelte
index aef951b0c..75493d12d 100644
--- a/web/src/routes/admin/(resources)/teachers/+page.svelte
+++ b/web/src/routes/admin/(resources)/teachers/+page.svelte
@@ -1,14 +1,48 @@
 <script lang="ts">
-  import WorkingHours from '$lib/components/ui/working-hours/working-hours-day-container.svelte';
-  import { WeekDay } from '$lib/utils';
+  import DataTable, { type DataItem } from '$lib/elements/ui/dataTable/data-table.svelte';
+  import { deleteTeacher, getTeachers, type Pageable, type PageTeacher } from '$lib/sdk/fetch-client';
+  import { error } from '@sveltejs/kit';
+
+  let columnNames = ['Vorname', 'Nachname', 'Akronym', 'Fächer', 'Tags'];
+  let keys = ['id', 'firstName', 'lastName', 'acronym', 'subjects', 'tags'];
+
+  async function loadPage(index: number, sortString: string, filter: string) {
+    let pageable: Pageable = { page: index, size: 10, sort: [sortString] };
+    try {
+      const result: PageTeacher = await getTeachers(pageable, {
+        firstName: filter,
+        lastName: filter,
+        acronym: filter,
+      });
+      let dataItems: DataItem[] = result.content
+        ? result.content.map(
+            (teacher): DataItem => ({
+              id: teacher.id,
+              firstName: teacher.firstName,
+              lastName: teacher.lastName,
+              acronym: teacher.acronym,
+              tags: teacher.tags.map((tag) => tag.name),
+            }),
+          )
+        : [];
+      return {
+        data: dataItems,
+        totalElements: Number(result.totalElements),
+      };
+    } catch {
+      error(400, { message: 'Could not fetch page' });
+    }
+  }
+
+  async function deleteEntry(id: string) {
+    try {
+      await deleteTeacher(id);
+    } catch {
+      error(400, { message: `could not delete teacher with id ${id}` });
+    }
+  }
 </script>
 
-123
-<div class="h-[200px]"></div>
-<div class="flex flex-col gap-2">
-  <WorkingHours weekDay={WeekDay.MONDAY} />
-  <WorkingHours weekDay={WeekDay.TUESDAY} />
-  <WorkingHours weekDay={WeekDay.WEDNESDAY} />
-  <WorkingHours weekDay={WeekDay.THURSDAY} />
-  <WorkingHours weekDay={WeekDay.FRIDAY} />
+<div class="p-10 w-full">
+  <DataTable {columnNames} {keys} {loadPage} {deleteEntry} />
 </div>
diff --git a/web/src/routes/admin/(resources)/teachers/+page.ts b/web/src/routes/admin/(resources)/teachers/+page.ts
index 01c21a69a..8aad531d5 100644
--- a/web/src/routes/admin/(resources)/teachers/+page.ts
+++ b/web/src/routes/admin/(resources)/teachers/+page.ts
@@ -3,7 +3,7 @@ import type { PageLoad } from './$types';
 export const load = (() => {
   return {
     meta: {
-      title: 'Teachers',
+      title: 'Lehrer',
     },
   };
 }) satisfies PageLoad;