diff --git a/app/assets/css/blogAuthor.css b/app/assets/css/blogAuthor.css
new file mode 100644
index 0000000..fcf8af2
--- /dev/null
+++ b/app/assets/css/blogAuthor.css
@@ -0,0 +1,32 @@
+.BlogAuthor {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    & .meta {
+        display: flex;
+        flex-direction: column;
+        gap: .2rem;
+
+        & .name {
+            font-weight: bold;
+        }
+        & .date {
+            font-size: .8rem;
+        }
+    }
+
+    & .image {
+        --size: 50px;
+        height: var(--size);
+        width: var(--size);
+        border-radius: 50%;
+        overflow: hidden;
+
+        & img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/assets/css/blogCard.css b/app/assets/css/blogCard.css
new file mode 100644
index 0000000..027b501
--- /dev/null
+++ b/app/assets/css/blogCard.css
@@ -0,0 +1,44 @@
+.BlogCard {
+    overflow: hidden;
+    border-radius: 1rem;
+    background: var(--color-orange-black);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    transition: 150ms;
+    gap: 1rem;
+
+    &:hover {
+        scale: 1.05;
+    }
+
+    & .card-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 0 1.5rem 1rem;
+        gap: 1.5rem;
+    }
+
+    & .chip {
+        margin-bottom: 1rem;
+    }
+
+    & footer {
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+
+    & .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+        opacity: .5;
+
+        & .tag {
+            color: var(--color-orange);
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index da566fa..c2e4d07 100755
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -142,7 +142,7 @@ span.chip {
     border-radius: 999px;
     font-size: 1rem;
     height: max-content;
-    padding: .5em 1em;
+    padding: .2em 1em;
     user-select: none;
     display: flex;
     align-items: center;
@@ -288,6 +288,12 @@ span.chip {
     align-items: center;
 }
 
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 2rem;
+}
+
 .tip-container .tip {
     scale: 0;
     position: absolute;
diff --git a/app/components/Blog/Author.vue b/app/components/Blog/Author.vue
new file mode 100644
index 0000000..3cd93e7
--- /dev/null
+++ b/app/components/Blog/Author.vue
@@ -0,0 +1,29 @@
+<template>
+  <aside class="BlogAuthor">
+    <div class="image">
+      <img :src="image" :alt="`Bild von ${name}`" />
+    </div>
+    <div class="meta">
+      <span class="name">{{ name }}</span>
+      <span class="date">{{ dateFormatted }}</span>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  name : string
+  image : string
+  date : string
+}
+
+const { date } = defineProps<Props>()
+
+const formatter = new Intl.DateTimeFormat('de-DE', {
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit',
+})
+
+const dateFormatted = computed(() => formatter.format(new Date(date)))
+</script>
\ No newline at end of file
diff --git a/app/components/Blog/Card.vue b/app/components/Blog/Card.vue
new file mode 100644
index 0000000..8a6e544
--- /dev/null
+++ b/app/components/Blog/Card.vue
@@ -0,0 +1,42 @@
+<template>
+  <NuxtLink :to="link" class="BlogCard z-2">
+    <img :src="image" alt=" " aria-hidden="true" />
+    <div class="card-content">
+      <header>
+        <span class="chip">{{ category }}</span>
+        <h2>{{ title }}</h2>
+        <small>{{ description }}</small>
+      </header>
+      <main>
+        <ContentRenderer :value="excerpt" />
+      </main>
+      <footer>
+        <BlogAuthor :name="author.name" :image="author.image" :date="date" />
+        <div class="tags">
+          <span>tags</span>
+          <span class="tag" v-for="tag in tags">{{tag}}</span>
+        </div>
+      </footer>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  title : string
+  description : string
+  image : string
+  date : string
+  excerpt : { type: string, children?: any }
+  link : string
+  tags : string[]
+  category : string
+  author : {
+    name : string
+    image : string
+  }
+}
+
+defineProps<Props>()
+
+</script>
\ No newline at end of file
diff --git a/app/components/Card.vue b/app/components/Card.vue
index 2a077ad..70568fa 100644
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -8,7 +8,7 @@
 <script setup lang="ts">
 type Props = {
   title : string
-  titleTag ?: 'strong' | 'h3'
+  titleTag ?: 'strong' | 'h3' | 'h2'
 }
 
 defineProps<Props>()
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
new file mode 100644
index 0000000..b802c0a
--- /dev/null
+++ b/app/pages/blog/[slug].vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
new file mode 100644
index 0000000..d15f2ad
--- /dev/null
+++ b/app/pages/blog/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <section id="blog" class="Blog content">
+    <div class="grid">
+      <BlogCard v-for="article in articles" v-bind="makeBlogCard(article)" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const { data } = await useAsyncData('articles', () => queryCollection('blog').limit(10).all())
+
+const articles = data.value!
+
+const makeBlogCard = (article : typeof articles[0]) => ({
+  title: article.title,
+  description: article.description,
+  image: article.meta.image as string,
+  date: article.meta.date as string,
+  excerpt: article.excerpt,
+  link: article.path,
+  tags: article.meta.tags as string[],
+  category: article.meta.category as string,
+  author: article.meta.author as { name: string, image: string },
+})
+</script>
\ No newline at end of file
diff --git a/app/utils/navigation.ts b/app/utils/navigation.ts
index 8ec7d89..d29e9bc 100644
--- a/app/utils/navigation.ts
+++ b/app/utils/navigation.ts
@@ -23,4 +23,10 @@ export const navigation = [
     icon: 'ph:chats-circle-duotone',
     aria: 'Link dieser Seite: Kontakt'
   },
+  {
+    to: `/blog/`,
+    label: 'Blog',
+    icon: 'ph:book-open-user-duotone',
+    aria: 'Link dieser Seite: Blog'
+  },
 ]
\ No newline at end of file
diff --git a/content.config.ts b/content.config.ts
index bcb3581..61f4e44 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -4,7 +4,13 @@ export default defineContentConfig({
   collections: {
     blog: defineCollection({
       type: 'page',
-      source: 'blog/**/*.md'
+      source: 'blog/*.md',
+      schema: z.object({
+        excerpt: z.object({
+          type: z.string(),
+          children: z.any(),
+        }),
+      }),
     }),
 
     skills: defineCollection({
diff --git a/content/blog/0000.start.md b/content/blog/0000.start.md
new file mode 100644
index 0000000..3d7d7b1
--- /dev/null
+++ b/content/blog/0000.start.md
@@ -0,0 +1,18 @@
+---
+image: 'https://picsum.photos/600/250?random=4'
+title: 'Blogfussel - für mehr Fussel im Blog'
+description: 'Und nochmal...'
+navigation: true
+date: 2025-07-01
+category: 'start'
+tags: ['start', 'story']
+author:
+  name: 'webfussel'
+  image: '/img/og.webp'
+---
+
+Warum ich mich dazu entschlossen habe jetzt doch wieder mit dem Bloggen anzufangen? Nun ja, das hat alles angefangen, als man mich einfach so auf Instagram gesperrt hat.
+
+<!-- more -->
+
+Noch mehr Text
\ No newline at end of file
diff --git a/content/blog/0001.entry1.md b/content/blog/0001.entry1.md
new file mode 100644
index 0000000..3e24c7e
--- /dev/null
+++ b/content/blog/0001.entry1.md
@@ -0,0 +1,18 @@
+---
+image: 'https://picsum.photos/600/250?random=3'
+title: 'Post 1'
+description: 'Blablabla'
+navigation: true
+date: 2025-07-01
+category: 'test'
+tags: ['test', 'wasd']
+author:
+  name: 'webfussel'
+  image: '/img/og.webp'
+---
+
+Blablabla test 1 2 3
+
+<!-- more -->
+
+Noch mehr Text
\ No newline at end of file
diff --git a/content/blog/0002.entry2.md b/content/blog/0002.entry2.md
new file mode 100644
index 0000000..c1a08fc
--- /dev/null
+++ b/content/blog/0002.entry2.md
@@ -0,0 +1,18 @@
+---
+image: 'https://picsum.photos/600/250?random=2'
+title: 'Post 2'
+description: 'Blablabla'
+navigation: true
+date: 2025-07-01
+category: 'test'
+tags: ['test', 'asdf']
+author:
+  name: 'webfussel'
+  image: '/img/og.webp'
+---
+
+Blablabla test 1 2 3
+
+<!-- more -->
+
+Noch mehr Text
\ No newline at end of file
diff --git a/content/blog/0003.entry3.md b/content/blog/0003.entry3.md
new file mode 100644
index 0000000..92b070b
--- /dev/null
+++ b/content/blog/0003.entry3.md
@@ -0,0 +1,18 @@
+---
+image: 'https://picsum.photos/600/250?random=1'
+title: 'Post 3'
+description: 'Blablabla'
+navigation: true
+date: 2025-07-01
+category: 'test'
+tags: ['test', '123']
+author:
+  name: 'webfussel'
+  image: '/img/og.webp'
+---
+
+Blablabla test 1 2 3
+
+<!-- more -->
+
+Noch mehr Text
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6f4e0b8..0e6f4f6 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -43,6 +43,8 @@ export default defineNuxtConfig({
     '~/assets/css/burger.css',
     '~/assets/css/teaser.css',
     '~/assets/css/project.css',
+    '~/assets/css/blogCard.css',
+    '~/assets/css/blogAuthor.css',
   ],
 
   postcss: {