diff --git a/content/categories/berichte/_index.md b/content/categories/berichte/_index.md
new file mode 100644
index 0000000..621be9d
--- /dev/null
+++ b/content/categories/berichte/_index.md
@@ -0,0 +1,8 @@
+---
+title: Berichte
+description: null
+image: ""
+style:
+  background: "#e2ae4e"
+  color: "#252424"
+---
diff --git a/content/categories/buchrezension/_index.md b/content/categories/buchrezension/_index.md
new file mode 100644
index 0000000..715e955
--- /dev/null
+++ b/content/categories/buchrezension/_index.md
@@ -0,0 +1,8 @@
+---
+title: Buchrezension
+description:
+image: 
+style:
+    background: "#2a9d8f"
+    color: "#fff"
+---
\ No newline at end of file
diff --git a/content/categories/gedicht/_index.md b/content/categories/gedicht/_index.md
new file mode 100644
index 0000000..c2ba432
--- /dev/null
+++ b/content/categories/gedicht/_index.md
@@ -0,0 +1,8 @@
+---
+title: Gedicht
+description: null
+image: null
+style:
+  background: "#3947bb"
+  color: "#fff"
+---
diff --git a/content/categories/horoskope/_index.md b/content/categories/horoskope/_index.md
new file mode 100644
index 0000000..c6b8d14
--- /dev/null
+++ b/content/categories/horoskope/_index.md
@@ -0,0 +1,8 @@
+---
+title: Horoskope
+description: null
+image: /media/img_2148.jpeg
+style:
+  background: "#ba55d2"
+  color: "#fff"
+---
diff --git a/content/categories/umweltschutz/_index.md b/content/categories/umweltschutz/_index.md
new file mode 100644
index 0000000..5d79eb6
--- /dev/null
+++ b/content/categories/umweltschutz/_index.md
@@ -0,0 +1,8 @@
+---
+title: Umweltschutz
+description: Klimanews, Tipps & co.
+image: null
+style:
+  background: "#98cba9"
+  color: "#000000"
+---
diff --git a/content/categories/zum-knobeln/_index.md b/content/categories/zum-knobeln/_index.md
new file mode 100644
index 0000000..870540d
--- /dev/null
+++ b/content/categories/zum-knobeln/_index.md
@@ -0,0 +1,8 @@
+---
+title: zum Knobeln
+description: null
+image: null
+style:
+  background: "#e06163"
+  color: "#fff"
+---
diff --git a/layouts/admin/list.html b/layouts/admin/list.html
index f7929ec..f5e88eb 100644
--- a/layouts/admin/list.html
+++ b/layouts/admin/list.html
@@ -37,9 +37,8 @@
                  textAlign: "center",
                  textDecoration: "none",
                  display: "inline-block",
-                 cursor: "pointer",
                  borderRadius: "4px",
-                 fontSize: "14px",
+                 alignSelf: "center",
                },
              },
              value ? "Entwurf" : "Veröffentlicht"
@@ -59,15 +58,35 @@
                  textAlign: "center",
                  textDecoration: "none",
                  display: "inline-block",
-                 cursor: "pointer",
                  borderRadius: "4px",
-                 fontSize: "14px",
+                 alignSelf: "center",
                },
              },
              value ? "Entwurf" : "Veröffentlicht"
            )
          );
 
+         CMS.registerFieldPreview("categories", "style", ({ value }) =>
+           h(
+             "div",
+             {
+               style: {
+                 backgroundColor: value.background,
+                 color: value.color,
+                 border: "none",
+                 padding: "2px 6px",
+                 textAlign: "center",
+                 textDecoration: "none",
+                 display: "inline-block",
+                 borderRadius: "4px",
+                 alignSelf: "center",
+               },
+             },
+             "Test"
+           )
+         );
+
+
          CMS.registerPreviewTemplate(
            "post",
            ({ widgetFor, entry, fields, collection }) => {
@@ -165,6 +184,51 @@
            }
          );
 
+         CMS.registerPreviewTemplate(
+           "categories",
+           ({ widgetFor, entry }) => {
+             return h(
+              "main",
+        		  { className: "article-page full-width" },
+      				h("article", { className: "main-article", style: {margin: "16px"} },
+      					h("header", { className: "article-header" },
+      						h("div", { className: "article-details" },
+       							h("header", { className: "article-category" },
+      								h("a", { style: { "background-color": entry.data.style.background, "color": entry.data.style.color } }, entry.data.title)
+      							),
+      		          h("div", { className: "article-title-wrapper" },
+      				        h("h2", { className: "article-title" },
+                        h("a", {}, entry.data.title)
+      			          ),
+                      h("h3", { className: "article-subtitle" },
+                        entry.data.description
+                      )
+      		          ),
+                    h("footer", { className: "article-time" },
+                      h("div", {},
+                        h("time", { className: "article-time--published" }, ((entry.data.date != null && entry.data.date != "") ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""))
+                      )
+                    )
+      						)
+      					),
+      				),
+             );
+           }
+         );
+
+         CMS.registerEventListener({
+          name: "change",
+          collection: "categories",
+          // file: 'global', // You can specify a file if in a file collection
+          field: 'image',
+          handler: ({ data, collection, field }) => {
+            return {
+              ...data,
+              image: data.image.replace("static", ""),
+            }
+          },
+        });
+
       {{ $sass := resources.Get "scss/style.scss" }}
       {{ $style := $sass | resources.ToCSS | minify | resources.Fingerprint "sha256" }}
       CMS.registerPreviewStyle("{{ $style.RelPermalink }}")
diff --git a/static/admin/collections.js b/static/admin/collections.js
index 742f9a3..6aee281 100644
--- a/static/admin/collections.js
+++ b/static/admin/collections.js
@@ -183,4 +183,68 @@ const PagesCollection = {
   ],
 };
 
-export { PostCollection, PagesCollection };
+const CategoriesCollection = {
+  name: "categories",
+  label: "Kategorien",
+  description: "Hier könnt ihr Kategorien erstellen oder bearbeiten.",
+  icon: "color",
+  folder: "content/categories",
+  path: "{{slug}}/_index",
+  slug: "{{title}}",
+  create: true,
+  editor: {
+    preview: true,
+    frame: true,
+    size: "half",
+  },
+  filter: {
+    field: "title",
+    pattern: "^(?!Kategorien)"
+  },
+  summary_fields: ["title", "description", "style"],
+  media_folder: "/static/media",
+  public_folder: "/media",
+  fields: [
+    {
+      name: "title",
+      label: "Titel",
+      widget: "string",
+      required: true,
+    },
+    {
+      name: "description",
+      label: "Beschreibung",
+      widget: "text",
+      required: false,
+    },
+    {
+      name: "image",
+      label: "Titelbild",
+      widget: "image",
+      required: false,
+    },
+    {
+      name: "style",
+      label: "Aussehen",
+      widget: "object",
+      required: true,
+      collapsed: false,
+      fields: [
+        {
+          name: "background",
+          label: "Hintergrundfarbe",
+          widget: "color",
+          required: true,
+        },
+        {
+          name: "color",
+          label: "Schriftfarbe",
+          widget: "color",
+          required: true,
+        }
+      ]
+    }
+  ]
+};
+
+export { PostCollection, PagesCollection, CategoriesCollection };
diff --git a/static/admin/config.js b/static/admin/config.js
index 0b1c9f5..ba2da93 100644
--- a/static/admin/config.js
+++ b/static/admin/config.js
@@ -1,4 +1,4 @@
-import { PagesCollection, PostCollection } from "./collections.js";
+import { PagesCollection, PostCollection, CategoriesCollection } from "./collections.js";
 
 const config = {
   backend: {
@@ -32,7 +32,8 @@ const config = {
   },
   collections: [
     PostCollection,
-    PagesCollection
+    PagesCollection,
+    CategoriesCollection,
   ],
 };