diff --git a/backend/src/predicTCR_server/app.py b/backend/src/predicTCR_server/app.py
index 8a79e4b..fb1af0d 100644
--- a/backend/src/predicTCR_server/app.py
+++ b/backend/src/predicTCR_server/app.py
@@ -446,6 +446,7 @@ def runner_result():
                     sources="TIL;PMBC;Other",
                     csv_required_columns="barcode;cdr3;chain",
                     runner_job_timeout_mins=60,
+                    about_md="",
                 )
             )
             db.session.commit()
diff --git a/backend/src/predicTCR_server/model.py b/backend/src/predicTCR_server/model.py
index 0b9bc4c..45fdab9 100644
--- a/backend/src/predicTCR_server/model.py
+++ b/backend/src/predicTCR_server/model.py
@@ -53,6 +53,7 @@ class Settings(db.Model):
     sources: Mapped[str] = mapped_column(String, nullable=False)
     csv_required_columns: Mapped[str] = mapped_column(String, nullable=False)
     runner_job_timeout_mins: Mapped[int] = mapped_column(Integer, nullable=False)
+    about_md: Mapped[str] = mapped_column(String, nullable=False)
 
     def as_dict(self):
         return {c: getattr(self, c) for c in inspect(self).attrs.keys()}
diff --git a/backend/tests/test_app.py b/backend/tests/test_app.py
index 7279674..3a59e39 100644
--- a/backend/tests/test_app.py
+++ b/backend/tests/test_app.py
@@ -142,6 +142,7 @@ def test_get_settings_valid(client):
         "sources": "TIL;PMBC;Other",
         "tumor_types": "Lung;Breast;Other",
         "runner_job_timeout_mins": 60,
+        "about_md": "",
     }
 
 
@@ -156,6 +157,7 @@ def test_update_settings_valid(client):
         "sources": "a;b;g",
         "tumor_types": "1;2;6",
         "runner_job_timeout_mins": 12,
+        "about_md": "# About",
         "invalid-key": "invalid",
     }
     response = client.post("/api/admin/settings", headers=headers, json=new_settings)
diff --git a/frontend/package.json b/frontend/package.json
index fdd65bb..774e490 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,9 @@
     "bootstrap-icons": "^1.11.3",
     "flowbite": "^2.5.2",
     "flowbite-vue": "^0.1.6",
+    "github-markdown-css": "^5.8.1",
     "pinia": "^2.2.2",
+    "showdown": "^2.1.0",
     "vue": "^3.5.10",
     "vue-router": "^4.4.5",
     "vueperslides": "^3.5.1"
@@ -27,6 +29,7 @@
     "@testing-library/vue": "^8.1.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.7.4",
+    "@types/showdown": "^2.0.6",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
     "@vitejs/plugin-vue": "^5.1.4",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 941fe14..ffe90ff 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -19,9 +19,15 @@ importers:
       flowbite-vue:
         specifier: ^0.1.6
         version: 0.1.6(tailwindcss@3.4.13)(vue@3.5.10(typescript@5.5.4))
+      github-markdown-css:
+        specifier: ^5.8.1
+        version: 5.8.1
       pinia:
         specifier: ^2.2.2
         version: 2.2.2(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4))
+      showdown:
+        specifier: ^2.1.0
+        version: 2.1.0
       vue:
         specifier: ^3.5.10
         version: 3.5.10(typescript@5.5.4)
@@ -44,6 +50,9 @@ importers:
       "@types/node":
         specifier: ^22.7.4
         version: 22.7.4
+      "@types/showdown":
+        specifier: ^2.0.6
+        version: 2.0.6
       "@typescript-eslint/eslint-plugin":
         specifier: ^8.7.0
         version: 8.7.0(@typescript-eslint/parser@8.7.0(eslint@8.57.1)(typescript@5.5.4))(eslint@8.57.1)(typescript@5.5.4)
@@ -966,6 +975,12 @@ packages:
         integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==,
       }
 
+  "@types/showdown@2.0.6":
+    resolution:
+      {
+        integrity: sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==,
+      }
+
   "@types/tough-cookie@4.0.5":
     resolution:
       {
@@ -1782,6 +1797,13 @@ packages:
       }
     engines: { node: ">= 6" }
 
+  commander@9.5.0:
+    resolution:
+      {
+        integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==,
+      }
+    engines: { node: ^12.20.0 || >=14 }
+
   computeds@0.0.1:
     resolution:
       {
@@ -2476,6 +2498,13 @@ packages:
       }
     engines: { node: ">= 0.4" }
 
+  github-markdown-css@5.8.1:
+    resolution:
+      {
+        integrity: sha512-8G+PFvqigBQSWLQjyzgpa2ThD9bo7+kDsriUIidGcRhXgmcaAWUIpCZf8DavJgc+xifjbCG+GvMyWr0XMXmc7g==,
+      }
+    engines: { node: ">=10" }
+
   glob-parent@5.1.2:
     resolution:
       {
@@ -4001,6 +4030,13 @@ packages:
         integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==,
       }
 
+  showdown@2.1.0:
+    resolution:
+      {
+        integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==,
+      }
+    hasBin: true
+
   side-channel@1.0.6:
     resolution:
       {
@@ -5313,6 +5349,8 @@ snapshots:
 
   "@types/resolve@1.20.2": {}
 
+  "@types/showdown@2.0.6": {}
+
   "@types/tough-cookie@4.0.5": {}
 
   "@types/web-bluetooth@0.0.20": {}
@@ -5928,6 +5966,8 @@ snapshots:
 
   commander@4.1.1: {}
 
+  commander@9.5.0: {}
+
   computeds@0.0.1: {}
 
   concat-map@0.0.1: {}
@@ -6466,6 +6506,8 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
 
+  github-markdown-css@5.8.1: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -7289,6 +7331,10 @@ snapshots:
 
   shell-quote@1.8.1: {}
 
+  showdown@2.1.0:
+    dependencies:
+      commander: 9.5.0
+
   side-channel@1.0.6:
     dependencies:
       call-bind: 1.0.7
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a4e0897..3be933d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,8 +8,11 @@ import {
   FwbNavbarLogo,
 } from "flowbite-vue";
 import { useUserStore } from "@/stores/user";
+import { useSettingsStore } from "@/stores/settings";
 import FooterComponent from "@/components/FooterComponent.vue";
 const userStore = useUserStore();
+const settingsStore = useSettingsStore();
+settingsStore.refresh();
 const login_title = computed(() => {
   if (userStore.user !== null) {
     return userStore.user.email;
@@ -21,14 +24,17 @@ const login_title = computed(() => {
 <template>
   <fwb-navbar>
     <template #logo>
-      <fwb-navbar-logo alt="predicTCR v2" image-url="/logo.png" link="#">
+      <fwb-navbar-logo alt="predicTCR v2" image-url="/logo.png" link="/">
         predicTCR v2
       </fwb-navbar-logo>
     </template>
     <template #default="{ isShowMenu }">
       <fwb-navbar-collapse :is-show-menu="isShowMenu">
         <fwb-navbar-link link="#">
-          <RouterLink to="/">About</RouterLink>
+          <RouterLink to="/">Home</RouterLink>
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          <RouterLink to="/about">About</RouterLink>
         </fwb-navbar-link>
         <fwb-navbar-link link="#">
           <RouterLink to="/samples">My samples</RouterLink>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 66b0f22..5a3075e 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,5 +1,46 @@
 @import "../../node_modules/flowbite-vue/dist/index.css";
+@import "github-markdown-css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.markdown-body {
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 45px;
+}
+
+@media (max-width: 767px) {
+  .markdown-body {
+    padding: 15px;
+  }
+}
+
+/* additional css for markdown rendering to restore ul/ol removed by tailwind */
+
+.markdown-body ul {
+  list-style-type: disc;
+  list-style-position: inside;
+}
+
+.markdown-body ol {
+  list-style-type: decimal;
+  list-style-position: inside;
+}
+
+.markdown-body ul ul,
+ol ul {
+  list-style-type: circle;
+  list-style-position: inside;
+  margin-left: 15px;
+}
+
+.markdown-body ol ol,
+ul ol {
+  list-style-type: lower-latin;
+  list-style-position: inside;
+  margin-left: 15px;
+}
diff --git a/frontend/src/components/HeadingComponent.vue b/frontend/src/components/HeadingComponent.vue
new file mode 100644
index 0000000..26a244a
--- /dev/null
+++ b/frontend/src/components/HeadingComponent.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { FwbJumbotron } from "flowbite-vue";
+</script>
+
+<template>
+  <fwb-jumbotron
+    header-text="predicTCR v2"
+    header-classes="text-slate-100"
+    sub-text="Prediction of tumor-reactive T cells and TCRs from scRNA-seq data."
+    sub-text-classes="text-slate-300"
+    class="mb-4 bg-slate-800 bg-splash bg-no-repeat bg-center bg-cover md:rounded-lg py-0 lg:py-0 pt-8 lg:pt-8"
+  >
+    <slot></slot>
+  </fwb-jumbotron>
+</template>
diff --git a/frontend/src/components/MarkdownComponent.vue b/frontend/src/components/MarkdownComponent.vue
new file mode 100644
index 0000000..000f4f0
--- /dev/null
+++ b/frontend/src/components/MarkdownComponent.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import showdown from "showdown";
+
+const props = defineProps({
+  markdown: {
+    type: String,
+    required: true,
+  },
+});
+
+const markdownConverter = new showdown.Converter();
+const convertedHtml = markdownConverter.makeHtml(props.markdown);
+</script>
+
+<template>
+  <article class="markdown-body">
+    <div v-html="convertedHtml"></div>
+  </article>
+</template>
diff --git a/frontend/src/components/SettingsTable.vue b/frontend/src/components/SettingsTable.vue
index f72cc22..ea281d8 100644
--- a/frontend/src/components/SettingsTable.vue
+++ b/frontend/src/components/SettingsTable.vue
@@ -1,32 +1,15 @@
 <script setup lang="ts">
-import { FwbButton, FwbInput, FwbRange } from "flowbite-vue";
-import { ref } from "vue";
+import { FwbButton, FwbInput, FwbRange, FwbTextarea } from "flowbite-vue";
+import { useSettingsStore } from "@/stores/settings";
 import { apiClient, logout } from "@/utils/api-client";
-import type { Settings } from "@/utils/types";
-
-const settings = ref(null as Settings | null);
-
-function get_settings() {
-  apiClient
-    .get("/settings")
-    .then((response) => {
-      settings.value = response.data;
-    })
-    .catch((error) => {
-      if (error.response.status > 400) {
-        logout();
-      }
-      console.log(error);
-    });
-}
-
-get_settings();
+const settingsStore = useSettingsStore();
+settingsStore.refresh();
 
 function update_settings() {
   apiClient
-    .post("admin/settings", settings.value)
+    .post("admin/settings", settingsStore.settings)
     .then(() => {
-      get_settings();
+      console.log("Settings updated");
     })
     .catch((error) => {
       if (error.response.status > 400) {
@@ -38,54 +21,60 @@ function update_settings() {
 </script>
 
 <template>
-  <div class="flex flex-col m-2 p-2" v-if="settings">
+  <div class="flex flex-col m-2 p-2" v-if="settingsStore.settings">
     <fwb-range
-      v-model="settings.default_personal_submission_quota"
+      v-model="settingsStore.settings.default_personal_submission_quota"
       :steps="1"
       :min="0"
       :max="99"
-      :label="`Default personal quota: ${settings.default_personal_submission_quota}`"
+      :label="`Default personal quota: ${settingsStore.settings.default_personal_submission_quota}`"
       class="mb-2"
     />
     <fwb-range
-      v-model="settings.default_personal_submission_interval_mins"
+      v-model="settingsStore.settings.default_personal_submission_interval_mins"
       :steps="1"
       :min="0"
       :max="60"
-      :label="`Default interval between submissions: ${settings.default_personal_submission_interval_mins} minutes`"
+      :label="`Default interval between submissions: ${settingsStore.settings.default_personal_submission_interval_mins} minutes`"
       class="mb-2"
     />
     <fwb-range
-      v-model="settings.global_quota"
+      v-model="settingsStore.settings.global_quota"
       :steps="1"
       :min="0"
       :max="9999"
-      :label="`Remaining global quota: ${settings.global_quota}`"
+      :label="`Remaining global quota: ${settingsStore.settings.global_quota}`"
       class="mb-2"
     />
     <fwb-input
-      v-model="settings.tumor_types"
+      v-model="settingsStore.settings.tumor_types"
       class="mb-2"
       label="Tumor types (separated by ;)"
     ></fwb-input>
     <fwb-input
-      v-model="settings.sources"
+      v-model="settingsStore.settings.sources"
       class="mb-2"
       label="Sources (separated by ;)"
     ></fwb-input>
     <fwb-input
-      v-model="settings.csv_required_columns"
+      v-model="settingsStore.settings.csv_required_columns"
       class="mb-2"
       label="Required columns in CSV file (separated by ;)"
     ></fwb-input>
     <fwb-range
-      v-model="settings.runner_job_timeout_mins"
+      v-model="settingsStore.settings.runner_job_timeout_mins"
       :steps="1"
       :min="1"
       :max="360"
-      :label="`Timeout for runner jobs: ${settings.runner_job_timeout_mins} minutes`"
+      :label="`Timeout for runner jobs: ${settingsStore.settings.runner_job_timeout_mins} minutes`"
       class="mb-2"
     />
+    <fwb-textarea
+      v-model="settingsStore.settings.about_md"
+      :rows="32"
+      class="mb-2"
+      label="About page text (markdown)"
+    ></fwb-textarea>
     <fwb-button @click="update_settings" class="mt-2" color="green">
       Save settings</fwb-button
     >
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 965323e..7184978 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { useUserStore } from "@/stores/user";
-import HomeView from "@/views/AboutView.vue";
+import HomeView from "@/views/HomeView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,6 +10,11 @@ const router = createRouter({
       name: "home",
       component: HomeView,
     },
+    {
+      path: "/about",
+      name: "about",
+      component: () => import("../views/AboutView.vue"),
+    },
     {
       path: "/login",
       name: "login",
diff --git a/frontend/src/stores/settings.ts b/frontend/src/stores/settings.ts
new file mode 100644
index 0000000..1626b59
--- /dev/null
+++ b/frontend/src/stores/settings.ts
@@ -0,0 +1,31 @@
+import { ref } from "vue";
+import type { Settings } from "@/utils/types";
+import { defineStore } from "pinia";
+import { apiClient } from "@/utils/api-client";
+
+export const useSettingsStore = defineStore("settings", () => {
+  const settings = ref({
+    id: 1,
+    default_personal_submission_quota: 1,
+    default_personal_submission_interval_mins: 1,
+    global_quota: 1,
+    tumor_types: "",
+    sources: "",
+    csv_required_columns: "",
+    runner_job_timeout_mins: 1,
+    about_md: "",
+  } as Settings);
+
+  function refresh() {
+    apiClient
+      .get("settings")
+      .then((response) => {
+        settings.value = response.data as Settings;
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+
+  return { settings, refresh };
+});
diff --git a/frontend/src/utils/types.ts b/frontend/src/utils/types.ts
index 578cd9f..db9317c 100644
--- a/frontend/src/utils/types.ts
+++ b/frontend/src/utils/types.ts
@@ -34,6 +34,7 @@ export type Settings = {
   sources: string;
   csv_required_columns: string;
   runner_job_timeout_mins: number;
+  about_md: string;
 };
 
 export type Job = {
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
index f16fe17..4e40d12 100644
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -1,110 +1,14 @@
 <script setup lang="ts">
-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";
-import CarouselComponent from "@/components/CarouselComponent.vue";
-const showModalLogin = ref(false);
-function closeModals() {
-  showModalSignup.value = false;
-  showModalLogin.value = false;
-}
-function openModalLogin() {
-  showModalSignup.value = false;
-  showModalLogin.value = true;
-}
-const showModalSignup = ref(false);
-function openModalSignup() {
-  showModalLogin.value = false;
-  showModalSignup.value = true;
-}
+import { useSettingsStore } from "@/stores/settings";
+import HeadingComponent from "@/components/HeadingComponent.vue";
+import MarkdownComponent from "@/components/MarkdownComponent.vue";
+
+const settingsStore = useSettingsStore();
 </script>
 
 <template>
   <main class="flex flex-col items-center justify-center">
-    <fwb-jumbotron
-      header-text="predicTCR v2"
-      header-classes="text-slate-100"
-      sub-text="Prediction of tumor-reactive T cells and TCRs from scRNA-seq data."
-      sub-text-classes="text-slate-300"
-      class="mb-4 bg-slate-800 bg-splash bg-no-repeat bg-center bg-cover md:rounded-lg py-0 lg:py-0 pt-8 lg:pt-8"
-    >
-      <div class="flex flex-row justify-center">
-        <fwb-button
-          @click="openModalSignup"
-          class="mr-4 inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800"
-        >
-          Sign up
-        </fwb-button>
-        <fwb-button
-          @click="openModalLogin"
-          class="mr-2 inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-gray-500 hover:bg-gray-600"
-        >
-          Log in
-        </fwb-button>
-      </div>
-      <CarouselComponent class="mt-4" />
-    </fwb-jumbotron>
-    <div class="p-4">
-      <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>
+    <HeadingComponent />
+    <MarkdownComponent :markdown="settingsStore.settings.about_md" />
   </main>
-
-  <fwb-modal size="md" v-if="showModalLogin" @close="closeModals">
-    <template #header>
-      <div class="flex items-center text-lg">Login</div>
-    </template>
-    <template #body>
-      <LoginComponent />
-      <RouterLink to="/login">Forgot your password?</RouterLink>
-    </template>
-  </fwb-modal>
-
-  <fwb-modal size="md" v-if="showModalSignup" @close="closeModals">
-    <template #header>
-      <div class="flex items-center text-lg">Sign up</div>
-    </template>
-    <template #body>
-      <SignupComponent />
-    </template>
-  </fwb-modal>
 </template>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 0000000..79bd662
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { FwbA, FwbButton, FwbModal } from "flowbite-vue";
+import { ref } from "vue";
+import HeadingComponent from "@/components/HeadingComponent.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";
+import CarouselComponent from "@/components/CarouselComponent.vue";
+const showModalLogin = ref(false);
+function closeModals() {
+  showModalSignup.value = false;
+  showModalLogin.value = false;
+}
+function openModalLogin() {
+  showModalSignup.value = false;
+  showModalLogin.value = true;
+}
+const showModalSignup = ref(false);
+function openModalSignup() {
+  showModalLogin.value = false;
+  showModalSignup.value = true;
+}
+</script>
+
+<template>
+  <main class="flex flex-col items-center justify-center">
+    <HeadingComponent>
+      <div class="flex flex-row justify-center">
+        <fwb-button
+          @click="openModalSignup"
+          class="mr-4 inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800"
+        >
+          Sign up
+        </fwb-button>
+        <fwb-button
+          @click="openModalLogin"
+          class="mr-2 inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-gray-500 hover:bg-gray-600"
+        >
+          Log in
+        </fwb-button>
+      </div>
+      <CarouselComponent class="mt-4" />
+    </HeadingComponent>
+    <div class="p-4">
+      <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>
+
+  <fwb-modal size="md" v-if="showModalLogin" @close="closeModals">
+    <template #header>
+      <div class="flex items-center text-lg">Login</div>
+    </template>
+    <template #body>
+      <LoginComponent />
+      <RouterLink to="/login">Forgot your password?</RouterLink>
+    </template>
+  </fwb-modal>
+
+  <fwb-modal size="md" v-if="showModalSignup" @close="closeModals">
+    <template #header>
+      <div class="flex items-center text-lg">Sign up</div>
+    </template>
+    <template #body>
+      <SignupComponent />
+    </template>
+  </fwb-modal>
+</template>
diff --git a/frontend/src/views/SamplesView.vue b/frontend/src/views/SamplesView.vue
index 909f085..a78c0c5 100644
--- a/frontend/src/views/SamplesView.vue
+++ b/frontend/src/views/SamplesView.vue
@@ -14,6 +14,8 @@ import {
   FwbModal,
   FwbCheckbox,
 } from "flowbite-vue";
+import { useSettingsStore } from "@/stores/settings";
+const settingsStore = useSettingsStore();
 
 type OptionsType = {
   name: string;
@@ -106,25 +108,9 @@ function string_to_options(str: string): Array<OptionsType> {
   return items.map((x) => ({ value: x, name: x }));
 }
 
-function update_options() {
-  apiClient
-    .get("settings")
-    .then((response) => {
-      const settings = response.data as Settings;
-      console.log(settings);
-      tumor_types.value = string_to_options(settings.tumor_types);
-      sources.value = string_to_options(settings.sources);
-      required_columns.value = settings.csv_required_columns.split(";");
-    })
-    .catch((error) => {
-      if (error.response.status > 400) {
-        logout();
-      }
-      console.log(error);
-    });
-}
-
-update_options();
+tumor_types.value = string_to_options(settingsStore.settings.tumor_types);
+sources.value = string_to_options(settingsStore.settings.sources);
+required_columns.value = settingsStore.settings.csv_required_columns.split(";");
 
 const samples = ref([] as Sample[]);