diff --git a/docs/.vuepress/client.ts b/docs/.vuepress/client.ts
index a1eaa58..0f91547 100644
--- a/docs/.vuepress/client.ts
+++ b/docs/.vuepress/client.ts
@@ -8,6 +8,7 @@ import ProcessStep from './components/ProcessStep.vue'
 import ProjectCard from './components/ProjectCard.vue'
 import ServiceCard from './components/ServiceCard.vue'
 import TeamMember from './components/TeamMember.vue'
+import CaptionedImage from './components/CaptionedImage.vue'
 
 export default defineClientConfig({
   enhance({ app }) {
@@ -18,7 +19,7 @@ export default defineClientConfig({
     app.component('ProjectCard', ProjectCard)
     app.component('TeamMember', TeamMember)
     app.component('ServiceCard', ServiceCard)
-
+    app.component('CaptionedImage', CaptionedImage)
   },
   setup() {
     setupTransparentNavbar({ type: "homepage" });
diff --git a/docs/.vuepress/components/CaptionedImage.vue b/docs/.vuepress/components/CaptionedImage.vue
new file mode 100644
index 0000000..41d032b
--- /dev/null
+++ b/docs/.vuepress/components/CaptionedImage.vue
@@ -0,0 +1,17 @@
+<template>
+  <figure>
+    <img :src="src" alt="" :width="width"/>
+    <figcaption>{{ caption }}</figcaption>
+  </figure>
+</template>
+<script>
+export default {
+  props: ['src', 'caption', 'width'],
+}
+</script>
+
+<style lang="scss">
+figcaption {
+    font-style: italic;
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vuepress/config/theme.ts b/docs/.vuepress/config/theme.ts
index c61c9cc..8ddf9f1 100644
--- a/docs/.vuepress/config/theme.ts
+++ b/docs/.vuepress/config/theme.ts
@@ -44,7 +44,7 @@ export default hopeTheme({
           link: '/projekte/democracy.app'
         },
         {
-          text: 'Ocelot-Social',
+          text: 'Ocelot.Social',
           link: '/projekte/ocelot.social'
         },
         {
diff --git a/docs/.vuepress/public/images/projects/dreammall-starmap.png b/docs/.vuepress/public/images/projects/dreammall-starmap.png
new file mode 100644
index 0000000..d7b86cd
Binary files /dev/null and b/docs/.vuepress/public/images/projects/dreammall-starmap.png differ
diff --git a/docs/.vuepress/public/images/projects/ocelot.png b/docs/.vuepress/public/images/projects/ocelot.png
new file mode 100644
index 0000000..4cac040
Binary files /dev/null and b/docs/.vuepress/public/images/projects/ocelot.png differ
diff --git a/docs/index.md b/docs/index.md
index 4a3c315..aa3edec 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -143,7 +143,7 @@ layout: BlankLayout
     <ProjectCard
       title="Ocelot.Social"
       description="Ocelot.social ist eine Open-Source Alternative für soziale Netzwerke wie Facebook, Instagram oder TikTok"
-      image="./images/projects/ocelot-newsfeed.png"
+      image="./images/projects/ocelot.png"
       :tags="['Social Media']"
       href="/projekte/ocelot.social.html"
     />
diff --git a/docs/projekte/dreammall.md b/docs/projekte/dreammall.md
index e18de0d..67d6788 100644
--- a/docs/projekte/dreammall.md
+++ b/docs/projekte/dreammall.md
@@ -6,6 +6,10 @@
 
 Das zentrale Element des Projektes ist eine *Sternenkarte*, welche die einzelnen Akteure und Projekte an einen fiktiven Sternenhimmel projiziert. Jeder Nutzer kann in Austausch mit Anderen gehen, in dem er seinen Raum öffnet und andere dazu einläd. Ein Raum ist eine Videokonferenz mit Chatfunktion, Bildschirmfreigabe, gemeinsamen Notizen, Whiteboard, Unterräumen und Vielem mehr.
 
+<br/>
+
+<CaptionedImage src="/images/projects/dreammall-starmap.png" caption="Bild: Die Sternenkarte von DreamMall" width="500px"/>
+
 Das Projekt befindet sich noch in Entwicklung.
 
 Für die Zukunft sind weitere Features zur Unterstützung der DreamMall Akteure bei Kommunikation und Projektumsetzung angedacht, z.B. 
@@ -16,7 +20,6 @@ Für die Zukunft sind weitere Features zur Unterstützung der DreamMall Akteure
 Mehr Infos auf [DreamMall.earth](https://dreammall.earth) und [GitHub](https://github.com/dreammall-earth/dreammall.earth).
 
 ## Techstack
-
 *DreamMall.earth* basiert auf der *Node.js*-Technologie. Es kommen *Vue*, *Vike*, *Vuetify*, *Apollo*, *GraphQL* und *Prisma* zum Einsatz. Die Video Konferenzen werden mit *BigBlueButton* realisiert.
 
 Für die konzeptionelle Arbeit an dem Projekt kommt *Figma* zum Einsatz.
diff --git a/docs/projekte/ocelot.social.md b/docs/projekte/ocelot.social.md
index 8a0b3a1..695d723 100644
--- a/docs/projekte/ocelot.social.md
+++ b/docs/projekte/ocelot.social.md
@@ -1,13 +1,16 @@
 # Ocelot.Social
-
-![Ocelot.Social](/images/projects/ocelot-newsfeed.png)
+![Ocelot.Social](/images/projects/ocelot.png)
 
 Dieses Projekt begann unter dem Namen Human Connection.
 Die Idee war, eine Alternative für soziale Netzwerke wie Facebook, Instagram oder TikTok zu schaffen, bei der die Nutzer nicht das Produkt sind.
 Nach der Schließung des Netzwerks von Human Connection wurde die Open-Source-Software weiterentwickelt.
 
 *Ocelot.social* kann durch beliebige Betreiber auf eigenen Servern gehostet, mit eigenem Branding und zu eignen Nutzungsbedingungen angeboten werden.
-Es kann individuell konfiguriert werden und ist skalierbar sowie erweiterbar, .
+Es kann individuell konfiguriert werden und ist skalierbar sowie erweiterbar.
+
+<br/>
+
+<CaptionedImage src="/images/projects/ocelot-newsfeed.png" caption="Bild: Ein Newsfeed in Ocelot.social" width="500px"/>
 
 Teste die [Demoversion](https://ocelot.social/de/get-started/).