diff --git a/functions/src/models/TanamDocument.ts b/functions/src/models/TanamDocument.ts
index f24f2e5c..51cd9d12 100644
--- a/functions/src/models/TanamDocument.ts
+++ b/functions/src/models/TanamDocument.ts
@@ -9,8 +9,8 @@ export interface ITanamDocument<TimestampType> {
   documentType: string;
   revision?: number;
   publishedAt?: TimestampType;
-  createdAt: TimestampType;
-  updatedAt: TimestampType;
+  createdAt?: TimestampType;
+  updatedAt?: TimestampType;
 }
 
 export abstract class TanamDocument<TimestampType, FieldValueType> {
@@ -29,8 +29,8 @@ export abstract class TanamDocument<TimestampType, FieldValueType> {
   public documentType: string;
   public publishedAt?: TimestampType;
   public revision: number;
-  public readonly createdAt: TimestampType;
-  public readonly updatedAt: TimestampType;
+  public readonly createdAt?: TimestampType;
+  public readonly updatedAt?: TimestampType;
 
   abstract get status(): TanamPublishStatus;
   protected abstract getServerTimestamp(): FieldValueType;
diff --git a/hosting/package-lock.json b/hosting/package-lock.json
index 97c04e60..a6610535 100644
--- a/hosting/package-lock.json
+++ b/hosting/package-lock.json
@@ -8,6 +8,7 @@
       "name": "tanam-next",
       "version": "0.1.0",
       "dependencies": {
+        "@iconify-json/line-md": "^1.1.37",
         "@tiptap/pm": "^2.4.0",
         "@tiptap/react": "^2.4.0",
         "@tiptap/starter-kit": "^2.4.0",
@@ -755,6 +756,14 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/line-md": {
+      "version": "1.1.37",
+      "resolved": "https://registry.npmjs.org/@iconify-json/line-md/-/line-md-1.1.37.tgz",
+      "integrity": "sha512-qGezTafsQOX4N2STOV0gsSw/vr0u7DPXtg0jpVQTIa9ht1IXN68O+Qy7Ia2dHbuW4w5nz3UyhJzNrh7NB5T7BA==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/ri": {
       "version": "1.1.20",
       "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.20.tgz",
@@ -767,8 +776,7 @@
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
-      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
-      "dev": true
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
     },
     "node_modules/@iconify/utils": {
       "version": "2.1.24",
diff --git a/hosting/package.json b/hosting/package.json
index 9b31a75d..604de9ae 100644
--- a/hosting/package.json
+++ b/hosting/package.json
@@ -12,6 +12,7 @@
     "codecheck": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
+    "@iconify-json/line-md": "^1.1.37",
     "@tiptap/pm": "^2.4.0",
     "@tiptap/react": "^2.4.0",
     "@tiptap/starter-kit": "^2.4.0",
diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
index 0cb670a8..e7c4851c 100644
--- a/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
+++ b/hosting/src/app/(protected)/content/[documentTypeId]/page.tsx
@@ -8,6 +8,7 @@ import {useTanamDocuments} from "@/hooks/useTanamDocuments";
 import {Suspense, useEffect, useState} from "react";
 import {useParams} from "next/navigation";
 import {UserNotification} from "@/models/UserNotification";
+import {Button} from "@/components/Button";
 
 export default function DocumentTypeDocumentsPage() {
   const {documentTypeId} = useParams<{documentTypeId: string}>() ?? {};
@@ -19,10 +20,25 @@ export default function DocumentTypeDocumentsPage() {
     setNotification(docsError);
   }, [docsError]);
 
+  const addNewDocument = async () => {};
+
   return (
     <>
       <Suspense fallback={<Loader />}>
-        {documentType ? <PageHeader pageName={documentType.titlePlural.translated} /> : <Loader />}
+        {documentType ? (
+          <div className="flex items-center gap-4">
+            <PageHeader pageName={documentType.titlePlural.translated} />{" "}
+            <div className="mb-6">
+              <Button
+                onClick={addNewDocument}
+                title={`Add New ${documentType.titleSingular.translated}`}
+                style="rounded"
+              />
+            </div>
+          </div>
+        ) : (
+          <Loader />
+        )}
       </Suspense>
       {notification && (
         <Notification type={notification.type} title={notification.title} message={notification.message} />
diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/article/page.tsx
index b850db2a..aa954489 100644
--- a/hosting/src/app/(protected)/content/article/page.tsx
+++ b/hosting/src/app/(protected)/content/article/page.tsx
@@ -1,27 +1,51 @@
 "use client";
+import {Button} from "@/components/Button";
 import {DocumentTypeGenericList} from "@/components/DocumentType/DocumentTypeGenericList";
 import Loader from "@/components/common/Loader";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
-import {useTanamDocuments} from "@/hooks/useTanamDocuments";
+import {useCreateTanamDocument, useTanamDocuments} from "@/hooks/useTanamDocuments";
 import {UserNotification} from "@/models/UserNotification";
+import {useRouter} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
 
 export default function DocumentTypeDocumentsPage() {
   const {data: documentType} = useTanamDocumentType("article");
+  const {create, error: writeError} = useCreateTanamDocument(documentType?.id);
   const {data: documents, error: docsError} = useTanamDocuments("article");
   const [notification, setNotification] = useState<UserNotification | null>(null);
+  const router = useRouter();
 
   useEffect(() => {
-    setNotification(docsError);
-  }, [docsError]);
+    setNotification(docsError || writeError);
+  }, [docsError, writeError]);
+
+  const addNewArticle = async () => {
+    const id = await create();
+
+    router.push(`article/${id}`);
+  };
 
   return (
     <>
       <Suspense fallback={<Loader />}>
-        {documentType ? <PageHeader pageName={documentType.titlePlural.translated} /> : <Loader />}
+        {documentType ? (
+          <div className="flex items-center gap-4">
+            <PageHeader pageName={documentType.titlePlural.translated} />
+            <div className="mb-6">
+              <Button
+                title={`Add New ${documentType.titleSingular.translated}`}
+                onClick={addNewArticle}
+                style="rounded"
+              />
+            </div>
+          </div>
+        ) : (
+          <Loader />
+        )}
       </Suspense>
+
       {notification && (
         <Notification type={notification.type} title={notification.title} message={notification.message} />
       )}
diff --git a/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx b/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
index 667cb3a7..770f417f 100644
--- a/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
+++ b/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
@@ -18,7 +18,7 @@ export function DocumentTypeGenericList({documents, documentType}: TableOverview
             <p className="font-medium text-black dark:text-white">{document.data[documentType.titleField] as string}</p>
           </Link>,
           <p key={`${key}-${document.id}-date`} className="text-black dark:text-white">
-            {document.createdAt.toDate().toUTCString()}
+            {document.createdAt?.toDate().toUTCString()}
           </p>,
 
           <TableRowLabel
diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx
index 83a06242..21f7f717 100644
--- a/hosting/src/hooks/useTanamDocuments.tsx
+++ b/hosting/src/hooks/useTanamDocuments.tsx
@@ -1,7 +1,17 @@
 import {TanamDocumentClient} from "@/models/TanamDocumentClient";
 import {firestore} from "@/plugins/firebase";
 import {ITanamDocument} from "@functions/models/TanamDocument";
-import {Timestamp, collection, doc, onSnapshot, query, serverTimestamp, updateDoc, where} from "firebase/firestore";
+import {
+  Timestamp,
+  collection,
+  doc,
+  onSnapshot,
+  query,
+  serverTimestamp,
+  setDoc,
+  updateDoc,
+  where,
+} from "firebase/firestore";
 import {useEffect, useState} from "react";
 import {UserNotification} from "@/models/UserNotification";
 
@@ -111,6 +121,38 @@ export function useCrudTanamDocument(documentId?: string) {
       setIsLoading(false);
     }
   }
-
   return {update, isLoading, error};
 }
+
+export function useCreateTanamDocument(documentType?: string) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<UserNotification | null>(null);
+
+  async function create() {
+    setIsLoading(true);
+    try {
+      if (!documentType) {
+        setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
+        return;
+      }
+      const docRef = doc(collection(firestore, "tanam-documents"));
+      const docId = docRef.id;
+
+      const tanamDocument = new TanamDocumentClient(docId, {data: {}, documentType}).toJson();
+      await setDoc(docRef, tanamDocument);
+      return docId;
+    } catch (err) {
+      setError(
+        new UserNotification(
+          "error",
+          "UserNotification creating document",
+          "An error occurred while creating the document",
+        ),
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return {create, isLoading, error};
+}
diff --git a/hosting/tailwind.config.ts b/hosting/tailwind.config.ts
index 26d3ac94..217fe52b 100644
--- a/hosting/tailwind.config.ts
+++ b/hosting/tailwind.config.ts
@@ -332,7 +332,7 @@ const config: Config = {
   plugins: [
     require("@tailwindcss/typography"),
     iconsPlugin({
-      collections: getIconCollections(["ic", "ri"]),
+      collections: getIconCollections(["ic", "ri", "line-md"]),
     }),
   ],
 };