diff --git a/frontend/src/components/CardComponent.vue b/frontend/src/components/CardComponent.vue
new file mode 100644
index 0000000..461a764
--- /dev/null
+++ b/frontend/src/components/CardComponent.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { FwbCard } from "flowbite-vue";
+
+defineProps({
+  title: String,
+  img: String,
+});
+</script>
+
+<template>
+  <div class="flex mb-4 justify-center !max-w-full">
+    <fwb-card :img-src="img" variant="horizontal" href="">
+      <div class="p-5">
+        <h5
+          class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
+        >
+          {{ title }}
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          <slot></slot>
+        </p>
+      </div>
+    </fwb-card>
+  </div>
+</template>
diff --git a/frontend/src/components/ListComponent.vue b/frontend/src/components/ListComponent.vue
new file mode 100644
index 0000000..0051bf9
--- /dev/null
+++ b/frontend/src/components/ListComponent.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { FwbTimeline } from "flowbite-vue";
+</script>
+
+<template>
+  <fwb-timeline>
+    <slot></slot>
+  </fwb-timeline>
+</template>
diff --git a/frontend/src/components/ListItem.vue b/frontend/src/components/ListItem.vue
index 461a764..ba56743 100644
--- a/frontend/src/components/ListItem.vue
+++ b/frontend/src/components/ListItem.vue
@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import { FwbCard } from "flowbite-vue";
+import {
+  FwbTimelineBody,
+  FwbTimelineContent,
+  FwbTimelineItem,
+  FwbTimelinePoint,
+  FwbTimelineTitle,
+} from "flowbite-vue";
 
 defineProps({
   title: String,
-  img: String,
 });
 </script>
 
 <template>
-  <div class="flex mb-4 justify-center !max-w-full">
-    <fwb-card :img-src="img" variant="horizontal" href="">
-      <div class="p-5">
-        <h5
-          class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
-        >
-          {{ title }}
-        </h5>
-        <p class="font-normal text-gray-700 dark:text-gray-400">
-          <slot></slot>
-        </p>
-      </div>
-    </fwb-card>
-  </div>
+  <fwb-timeline-item>
+    <fwb-timeline-point>
+      <img src="/logo.png" alt="predicTCR" />
+    </fwb-timeline-point>
+    <fwb-timeline-content>
+      <fwb-timeline-title>{{ title }}</fwb-timeline-title>
+      <fwb-timeline-body>
+        <slot></slot>
+      </fwb-timeline-body>
+    </fwb-timeline-content>
+  </fwb-timeline-item>
 </template>
diff --git a/frontend/src/components/LoginComponent.vue b/frontend/src/components/LoginComponent.vue
index fa6c3aa..d3c907f 100644
--- a/frontend/src/components/LoginComponent.vue
+++ b/frontend/src/components/LoginComponent.vue
@@ -3,7 +3,6 @@ import { ref } from "vue";
 import { useUserStore } from "@/stores/user";
 import { FwbInput, FwbButton, FwbAlert } from "flowbite-vue";
 import { apiClient } from "@/utils/api-client";
-import ListItem from "@/components/ListItem.vue";
 import router from "@/router";
 const userStore = useUserStore();
 const login_email_address = ref("");
diff --git a/frontend/src/components/ResetComponent.vue b/frontend/src/components/ResetComponent.vue
index 796e7da..5fdeff3 100644
--- a/frontend/src/components/ResetComponent.vue
+++ b/frontend/src/components/ResetComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { apiClient } from "@/utils/api-client";
-import ListItem from "@/components/ListItem.vue";
+import CardComponent from "@/components/CardComponent.vue";
 import { FwbInput, FwbButton, FwbAlert } from "flowbite-vue";
 const reset_email_address = ref("");
 const reset_message = ref("");
@@ -20,7 +20,7 @@ function do_reset() {
 </script>
 
 <template>
-  <ListItem title="Reset password">
+  <CardComponent title="Reset password">
     <p>
       If you have forgotten your password you can request a password reset email
       by entering the email address you used to sign up:
@@ -41,5 +41,5 @@ function do_reset() {
         {{ reset_message }}
       </fwb-alert>
     </div>
-  </ListItem>
+  </CardComponent>
 </template>
diff --git a/frontend/src/components/UsersTable.vue b/frontend/src/components/UsersTable.vue
index a9706bb..64432ea 100644
--- a/frontend/src/components/UsersTable.vue
+++ b/frontend/src/components/UsersTable.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// @ts-ignore
 import {
   FwbButton,
   FwbTable,
@@ -15,7 +14,6 @@ import {
 import type { User } from "@/utils/types";
 import { apiClient, logout } from "@/utils/api-client";
 import { ref, computed } from "vue";
-import SignupComponent from "@/components/SignupComponent.vue";
 
 const props = defineProps<{
   is_runner: boolean;
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
index a343643..d048c3c 100644
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -1,17 +1,8 @@
 <script setup lang="ts">
-import {
-  FwbA,
-  FwbJumbotron,
-  FwbButton,
-  FwbTimeline,
-  FwbTimelineBody,
-  FwbTimelineContent,
-  FwbTimelineItem,
-  FwbTimelinePoint,
-  FwbTimelineTitle,
-  FwbModal,
-} from "flowbite-vue";
+import { FwbA, FwbJumbotron, FwbButton, FwbModal } from "flowbite-vue";
 import { ref } from "vue";
+import ListComponent from "@/components/ListComponent.vue";
+import ListItem from "@/components/ListItem.vue";
 import LoginComponent from "@/components/LoginComponent.vue";
 import SignupComponent from "@/components/SignupComponent.vue";
 import { RouterLink } from "vue-router";
@@ -56,79 +47,43 @@ function openModalSignup() {
       </div>
     </fwb-jumbotron>
     <div class="p-4">
-      <fwb-timeline>
-        <fwb-timeline-item>
-          <fwb-timeline-point>
-            <img src="/logo.png" />
-          </fwb-timeline-point>
-          <fwb-timeline-content>
-            <fwb-timeline-title> About </fwb-timeline-title>
-            <fwb-timeline-body>
-              Based on code from the
-              <fwb-a href="https://www.dkfz.de/" target="_blank">DKFZ</fwb-a>.
-              Read our paper at
-              <fwb-a
-                href="https://www.nature.com/articles/s41587-024-02161-y"
-                target="_blank"
-                >Nature Biotechnology</fwb-a
-              >
-            </fwb-timeline-body>
-          </fwb-timeline-content>
-        </fwb-timeline-item>
-        <fwb-timeline-item>
-          <fwb-timeline-point>
-            <img src="/logo.png" />
-          </fwb-timeline-point>
-          <fwb-timeline-content>
-            <fwb-timeline-title> Feedback </fwb-timeline-title>
-            <fwb-timeline-body>
-              <p>
-                Questions or feedback about this service are welcome at
-                <fwb-a href="mailto:predictcr@dkfz.de">predictcr@dkfz.de</fwb-a>
-              </p>
-            </fwb-timeline-body>
-          </fwb-timeline-content>
-        </fwb-timeline-item>
-        <fwb-timeline-item>
-          <fwb-timeline-point>
-            <img src="/logo.png" />
-          </fwb-timeline-point>
-          <fwb-timeline-content>
-            <fwb-timeline-title> References </fwb-timeline-title>
-            <fwb-timeline-body>
-              <p>
-                The
-                <fwb-a href="https://github.com/ssciwr/predicTCR"
-                  >predicTCR web service</fwb-a
-                >
-                was developed by the
-                <fwb-a href="https://ssc.iwr.uni-heidelberg.de/"
-                  >Scientific Software Center</fwb-a
-                >
-                of Heidelberg University.
-              </p>
-            </fwb-timeline-body>
-          </fwb-timeline-content>
-        </fwb-timeline-item>
-        <fwb-timeline-item>
-          <fwb-timeline-point>
-            <img src="/logo.png" />
-          </fwb-timeline-point>
-          <fwb-timeline-content>
-            <fwb-timeline-title> Funding </fwb-timeline-title>
-            <fwb-timeline-body>
-              <div class="flex flex-col md:flex-row">
-                <a href="https://dktk.dkfz.de/"
-                  ><img class="h-8 m-2 md:pr-5" src="/dktk.jpg" alt="DKTK"
-                /></a>
-                <a href="https://www.dkfz.de/"
-                  ><img class="h-8 m-2" src="/dkfz.png" alt="DKFZ"
-                /></a>
-              </div>
-            </fwb-timeline-body>
-          </fwb-timeline-content>
-        </fwb-timeline-item>
-      </fwb-timeline>
+      <ListComponent>
+        <ListItem title="About">
+          Based on code from the
+          <fwb-a href="https://www.dkfz.de/" target="_blank">DKFZ</fwb-a>. Read
+          our paper at
+          <fwb-a
+            href="https://www.nature.com/articles/s41587-024-02161-y"
+            target="_blank"
+            >Nature Biotechnology</fwb-a
+          >
+        </ListItem>
+        <ListItem title="Feedback">
+          Questions or feedback about this service are welcome at
+          <fwb-a href="mailto:predictcr@dkfz.de">predictcr@dkfz.de</fwb-a>
+        </ListItem>
+        <ListItem title="References">
+          The
+          <fwb-a href="https://github.com/ssciwr/predicTCR"
+            >predicTCR web service</fwb-a
+          >
+          was developed by the
+          <fwb-a href="https://ssc.iwr.uni-heidelberg.de/"
+            >Scientific Software Center</fwb-a
+          >
+          of Heidelberg University.
+        </ListItem>
+        <ListItem title="Funding">
+          <div class="flex flex-col md:flex-row">
+            <a href="https://dktk.dkfz.de/"
+              ><img class="h-8 m-2 md:pr-5" src="/dktk.jpg" alt="DKTK"
+            /></a>
+            <a href="https://www.dkfz.de/"
+              ><img class="h-8 m-2" src="/dkfz.png" alt="DKFZ"
+            /></a>
+          </div>
+        </ListItem>
+      </ListComponent>
     </div>
   </main>
 
diff --git a/frontend/src/views/ActivateView.vue b/frontend/src/views/ActivateView.vue
index 9087ecc..68d5358 100644
--- a/frontend/src/views/ActivateView.vue
+++ b/frontend/src/views/ActivateView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ListItem from "@/components/ListItem.vue";
 import { ref } from "vue";
 import { apiClient } from "@/utils/api-client";
+import CardComponent from "@/components/CardComponent.vue";
 const props = defineProps({ activation_token: String });
 
 const title = ref("");
@@ -30,9 +30,9 @@ apiClient
 
 <template>
   <main>
-    <ListItem :title="title">
+    <CardComponent :title="title">
       <p>{{ message }}</p>
       <p>Go to <RouterLink to="/login">login</RouterLink> page.</p>
-    </ListItem>
+    </CardComponent>
   </main>
 </template>
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 1952877..747367f 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -1,15 +1,9 @@
 <script setup lang="ts">
 import SamplesTable from "@/components/SamplesTable.vue";
 import UsersTable from "@/components/UsersTable.vue";
-import {
-  FwbTimeline,
-  FwbTimelineBody,
-  FwbTimelineContent,
-  FwbTimelineItem,
-  FwbTimelinePoint,
-  FwbTimelineTitle,
-  FwbButton,
-} from "flowbite-vue";
+import ListComponent from "@/components/ListComponent.vue";
+import ListItem from "@/components/ListItem.vue";
+import { FwbButton } from "flowbite-vue";
 import { ref } from "vue";
 import type { Sample } from "@/utils/types";
 import { apiClient, logout } from "@/utils/api-client";
@@ -52,61 +46,29 @@ get_samples();
 <template>
   <main>
     <div class="p-4">
-      <fwb-timeline>
-        <fwb-timeline-item>
-          <fwb-timeline-point>
-            <img src="/logo.png" />
-          </fwb-timeline-point>
-          <fwb-timeline-content>
-            <fwb-timeline-title>Generate runner API Token</fwb-timeline-title>
-            <fwb-timeline-body>
-              <p>
-                Here you can generate a new runner user with an API token for
-                authentication. Note the token should be kept secret! It is
-                valid for 6 months, then you will need to generate a new one:
-              </p>
-              <p>
-                <fwb-button @click="generate_api_token">
-                  Generate API Token and copy to clipboard
-                </fwb-button>
-              </p>
-            </fwb-timeline-body>
-          </fwb-timeline-content>
-        </fwb-timeline-item>
-        <fwb-timeline-item>
-          <fwb-timeline-point>
-            <img src="/logo.png" />
-          </fwb-timeline-point>
-          <fwb-timeline-content>
-            <fwb-timeline-title>Runners</fwb-timeline-title>
-            <fwb-timeline-body>
-              <UsersTable :is_runner="true"></UsersTable>
-            </fwb-timeline-body>
-          </fwb-timeline-content>
-        </fwb-timeline-item>
-        <fwb-timeline-item>
-          <fwb-timeline-point>
-            <img src="/logo.png" />
-          </fwb-timeline-point>
-          <fwb-timeline-content>
-            <fwb-timeline-title>Users</fwb-timeline-title>
-            <fwb-timeline-body>
-              <UsersTable :is_runner="false"></UsersTable>
-            </fwb-timeline-body>
-          </fwb-timeline-content>
-        </fwb-timeline-item>
-        <fwb-timeline-item>
-          <fwb-timeline-point>
-            <img src="/logo.png" />
-          </fwb-timeline-point>
-          <fwb-timeline-content>
-            <fwb-timeline-title>Samples</fwb-timeline-title>
-            <fwb-timeline-body>
-              <SamplesTable :samples="samples" :admin="true"></SamplesTable>
-            </fwb-timeline-body>
-          </fwb-timeline-content>
-        </fwb-timeline-item>
-      </fwb-timeline>
+      <ListComponent title="Generate runner API Token">
+        <ListItem>
+          <p>
+            Here you can generate a new runner user with an API token for
+            authentication. Note the token should be kept secret! It is valid
+            for 6 months, then you will need to generate a new one:
+          </p>
+          <p>
+            <fwb-button @click="generate_api_token">
+              Generate API Token and copy to clipboard
+            </fwb-button>
+          </p>
+        </ListItem>
+        <ListItem title="Runners">
+          <UsersTable :is_runner="true"></UsersTable>
+        </ListItem>
+        <ListItem title="Users">
+          <UsersTable :is_runner="false"></UsersTable>
+        </ListItem>
+        <ListItem title="Samples">
+          <SamplesTable :samples="samples" :admin="true"></SamplesTable>
+        </ListItem>
+      </ListComponent>
     </div>
   </main>
 </template>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 0592903..ea09a49 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useUserStore } from "@/stores/user";
-import ListItem from "@/components/ListItem.vue";
+import CardComponent from "@/components/CardComponent.vue";
 import LoginComponent from "@/components/LoginComponent.vue";
 import AccountComponent from "@/components/AccountComponent.vue";
 import ResetComponent from "@/components/ResetComponent.vue";
@@ -13,9 +13,9 @@ const userStore = useUserStore();
       <AccountComponent></AccountComponent>
     </template>
     <template v-else>
-      <ListItem title="Login">
+      <CardComponent title="Login">
         <LoginComponent></LoginComponent>
-      </ListItem>
+      </CardComponent>
       <ResetComponent></ResetComponent>
     </template>
   </main>
diff --git a/frontend/src/views/ResetPasswordView.vue b/frontend/src/views/ResetPasswordView.vue
index d64f671..3762196 100644
--- a/frontend/src/views/ResetPasswordView.vue
+++ b/frontend/src/views/ResetPasswordView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ListItem from "@/components/ListItem.vue";
+import CardComponent from "@/components/CardComponent.vue";
 import { ref, computed } from "vue";
 import { apiClient, logout } from "@/utils/api-client";
 import { validate_password } from "@/utils/validation";
@@ -63,7 +63,7 @@ function reset_password() {
 
 <template>
   <main>
-    <ListItem :title="title" :icon="icon">
+    <CardComponent :title="title" :icon="icon">
       <form @submit.prevent="reset_password" v-if="show_form">
         <p>
           <label for="email_current">Email address:</label>
@@ -115,6 +115,6 @@ function reset_password() {
         {{ message }}
       </div>
       <p>Go to <RouterLink to="/login">login / signup</RouterLink> page.</p>
-    </ListItem>
+    </CardComponent>
   </main>
 </template>
diff --git a/frontend/src/views/SamplesView.vue b/frontend/src/views/SamplesView.vue
index 4f4cc3d..6a03f05 100644
--- a/frontend/src/views/SamplesView.vue
+++ b/frontend/src/views/SamplesView.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, onUnmounted } from "vue";
 import SamplesTable from "@/components/SamplesTable.vue";
+import ListComponent from "@/components/ListComponent.vue";
+import ListItem from "@/components/ListItem.vue";
 import { apiClient, logout } from "@/utils/api-client";
 import type { Sample } from "@/utils/types";
 import {
@@ -8,12 +10,6 @@ import {
   FwbSelect,
   FwbFileInput,
   FwbInput,
-  FwbTimeline,
-  FwbTimelineBody,
-  FwbTimelineContent,
-  FwbTimelineItem,
-  FwbTimelinePoint,
-  FwbTimelineTitle,
   FwbAlert,
 } from "flowbite-vue";
 
@@ -176,101 +172,85 @@ function add_sample() {
 
 <template>
   <main>
-    <fwb-timeline>
-      <fwb-timeline-item>
-        <fwb-timeline-point>
-          <img src="/logo.png" />
-        </fwb-timeline-point>
-        <fwb-timeline-content>
-          <fwb-timeline-title>Submit a sample</fwb-timeline-title>
-          <fwb-timeline-body>
-            <template v-if="submit_message.length > 0">
-              {{ submit_message }}
-            </template>
-            <template v-else>
-              <div class="flex flex-col mt-2">
-                <fwb-input
-                  v-model="sample_name"
-                  required
-                  label="Sample name"
-                  id="sample_name"
-                  placeholder="pXYZ_ABC_c1"
-                  maxlength="128"
-                  class="mb-2"
-                />
-                <fwb-select
-                  v-model="tumor_type"
-                  :options="tumor_types"
-                  id="tumor_type"
-                  label="Tumor type"
-                  class="mb-2"
-                />
-                <fwb-select
-                  v-model="source"
-                  :options="sources"
-                  id="source"
-                  label="Source"
-                  class="mb-2"
-                />
-                <fwb-file-input
-                  type="file"
-                  id="input_h5_file"
-                  label="H5 input file"
-                  name="h5 file"
-                  @change="on_h5_file_changed($event)"
-                  :key="h5_file_input_key"
-                  accept=".h5,.he5,.hdf5"
-                  title="Select the h5 file to upload"
-                  class="mb-2"
-                />
-                <fwb-file-input
-                  type="file"
-                  id="input_csv_file"
-                  label="CSV input file"
-                  name="csv file"
-                  @change="on_csv_file_changed($event)"
-                  :key="csv_file_input_key"
-                  accept=".csv,.txt"
-                  title="Select the csv file to upload"
-                  class="mb-2"
-                />
-                <fwb-button
-                  @click="add_sample"
-                  :disabled="
-                    selected_h5_file === null ||
-                    selected_csv_file === null ||
-                    sample_name.length === 0
-                  "
-                  >Submit
-                </fwb-button>
-                <fwb-alert type="danger" v-if="new_sample_error_message">
-                  {{ new_sample_error_message }}
-                </fwb-alert>
-              </div>
-            </template>
-          </fwb-timeline-body>
-        </fwb-timeline-content>
-      </fwb-timeline-item>
-      <fwb-timeline-item>
-        <fwb-timeline-point>
-          <img src="/logo.png" />
-        </fwb-timeline-point>
-        <fwb-timeline-content>
-          <fwb-timeline-title>My samples</fwb-timeline-title>
-          <fwb-timeline-body>
-            <template v-if="samples.length > 0">
-              <SamplesTable
-                :samples="samples"
-                :admin="false"
-                class="mt-2"
-              ></SamplesTable>
-            </template>
-            <template v-else>
-              <p>You don't yet have any samples.</p>
-            </template>
-          </fwb-timeline-body>
-        </fwb-timeline-content>
-      </fwb-timeline-item>
-    </fwb-timeline>
+    <ListComponent>
+      <ListItem title="Submit a sample">
+        <template v-if="submit_message.length > 0">
+          {{ submit_message }}
+        </template>
+        <template v-else>
+          <div class="flex flex-col mt-2">
+            <fwb-input
+              v-model="sample_name"
+              required
+              label="Sample name"
+              id="sample_name"
+              placeholder="pXYZ_ABC_c1"
+              maxlength="128"
+              class="mb-2"
+            />
+            <fwb-select
+              v-model="tumor_type"
+              :options="tumor_types"
+              id="tumor_type"
+              label="Tumor type"
+              class="mb-2"
+            />
+            <fwb-select
+              v-model="source"
+              :options="sources"
+              id="source"
+              label="Source"
+              class="mb-2"
+            />
+            <fwb-file-input
+              type="file"
+              id="input_h5_file"
+              label="H5 input file"
+              name="h5 file"
+              @change="on_h5_file_changed($event)"
+              :key="h5_file_input_key"
+              accept=".h5,.he5,.hdf5"
+              title="Select the h5 file to upload"
+              class="mb-2"
+            />
+            <fwb-file-input
+              type="file"
+              id="input_csv_file"
+              label="CSV input file"
+              name="csv file"
+              @change="on_csv_file_changed($event)"
+              :key="csv_file_input_key"
+              accept=".csv,.txt"
+              title="Select the csv file to upload"
+              class="mb-2"
+            />
+            <fwb-button
+              @click="add_sample"
+              :disabled="
+                selected_h5_file === null ||
+                selected_csv_file === null ||
+                sample_name.length === 0
+              "
+              >Submit
+            </fwb-button>
+            <fwb-alert type="danger" v-if="new_sample_error_message">
+              {{ new_sample_error_message }}
+            </fwb-alert>
+          </div>
+        </template>
+      </ListItem>
+      <ListItem title="My samples">
+        <template v-if="samples.length > 0">
+          <SamplesTable
+            :samples="samples"
+            :admin="false"
+            class="mt-2"
+          ></SamplesTable>
+        </template>
+        <template v-else>
+          <p>You don't yet have any samples.</p>
+        </template>
+      </ListItem>
+    </ListComponent>
   </main>
 </template>