diff --git a/frontend/package.json b/frontend/package.json
index 85232ce..fdd65bb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,7 +19,8 @@
     "flowbite-vue": "^0.1.6",
     "pinia": "^2.2.2",
     "vue": "^3.5.10",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "vueperslides": "^3.5.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.10.4",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 1891e41..941fe14 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -28,6 +28,9 @@ importers:
       vue-router:
         specifier: ^4.4.5
         version: 4.4.5(vue@3.5.10(typescript@5.5.4))
+      vueperslides:
+        specifier: ^3.5.1
+        version: 3.5.1(vue@3.5.10(typescript@5.5.4))
     devDependencies:
       "@rushstack/eslint-patch":
         specifier: ^1.10.4
@@ -4645,6 +4648,14 @@ packages:
       typescript:
         optional: true
 
+  vueperslides@3.5.1:
+    resolution:
+      {
+        integrity: sha512-g/Lauv1svlSaERzLNeys0oeLmpDFiXkIa+lxg+lJma6m6wXqJKzKKVIi8Kvc95XPnl42n7PYYJyr0+FMV6WZGw==,
+      }
+    peerDependencies:
+      vue: ^2.6.14 || ^3.2.0
+
   w3c-xmlserializer@5.0.0:
     resolution:
       {
@@ -7724,6 +7735,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
+  vueperslides@3.5.1(vue@3.5.10(typescript@5.5.4)):
+    dependencies:
+      vue: 3.5.10(typescript@5.5.4)
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 21808d3..a4e0897 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -48,5 +48,5 @@ const login_title = computed(() => {
   <div class="flex flex-col items-stretch justify-center">
     <RouterView />
   </div>
-  <FooterComponent></FooterComponent>
+  <FooterComponent class="sticky"></FooterComponent>
 </template>
diff --git a/frontend/src/assets/news.json b/frontend/src/assets/news.json
new file mode 100644
index 0000000..84d4787
--- /dev/null
+++ b/frontend/src/assets/news.json
@@ -0,0 +1,32 @@
+[
+  {
+    "id": 1,
+    "url": "https://www.dkfz.de",
+    "text": "News item #1: some text about a paper written that used predicTCR. Click on this text to open the associated link."
+  },
+  {
+    "id": 2,
+    "url": "https://www.dkfz.de",
+    "text": "News item #2: some text about a paper written that used predicTCR."
+  },
+  {
+    "id": 3,
+    "url": "https://www.dkfz.de",
+    "text": "News item #3: some text about a paper written that used predicTCR."
+  },
+  {
+    "id": 4,
+    "url": "https://www.dkfz.de",
+    "text": "News item #4: some text about a paper written that used predicTCR."
+  },
+  {
+    "id": 5,
+    "url": "https://www.dkfz.de",
+    "text": "News item #5: some text about a paper written that used predicTCR."
+  },
+  {
+    "id": 6,
+    "url": "https://www.dkfz.de",
+    "text": "News item #6: some text about a paper written that used predicTCR."
+  }
+]
diff --git a/frontend/src/components/CarouselComponent.vue b/frontend/src/components/CarouselComponent.vue
new file mode 100644
index 0000000..3d1b77c
--- /dev/null
+++ b/frontend/src/components/CarouselComponent.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { VueperSlides, VueperSlide } from "vueperslides";
+import "vueperslides/dist/vueperslides.css";
+import items from "@/assets/news.json";
+</script>
+
+<template>
+  <vueper-slides
+    autoplay
+    duration="3000"
+    fixed-height="130px"
+    :touchable="false"
+  >
+    <vueper-slide v-for="item in items" v-bind:key="item.id">
+      <template #content>
+        <div
+          class="h-full mx-14 flex flex-col justify-center text-slate-300 pb-4"
+        >
+          <a :href="item.url" target="_blank">{{ item.text }}</a>
+        </div>
+      </template>
+    </vueper-slide>
+  </vueper-slides>
+</template>
diff --git a/frontend/src/components/FooterComponent.vue b/frontend/src/components/FooterComponent.vue
index 08730fc..690d316 100644
--- a/frontend/src/components/FooterComponent.vue
+++ b/frontend/src/components/FooterComponent.vue
@@ -4,7 +4,6 @@ import {
   FwbFooterCopyright,
   FwbFooterLinkGroup,
   FwbFooterLink,
-  FwbFooterBrand,
 } from "flowbite-vue";
 </script>
 
diff --git a/frontend/src/components/vueperslides.d.ts b/frontend/src/components/vueperslides.d.ts
new file mode 100644
index 0000000..67995cf
--- /dev/null
+++ b/frontend/src/components/vueperslides.d.ts
@@ -0,0 +1,4 @@
+declare module "vueperslides" {
+  class VueperSlides extends DefineComponent {}
+  class VueperSlide extends DefineComponent {}
+}
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
index 00bebca..f16fe17 100644
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -6,6 +6,7 @@ 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;
@@ -29,7 +30,7 @@ function openModalSignup() {
       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"
+      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
@@ -45,6 +46,7 @@ function openModalSignup() {
           Log in
         </fwb-button>
       </div>
+      <CarouselComponent class="mt-4" />
     </fwb-jumbotron>
     <div class="p-4">
       <ListComponent>