diff --git a/functions/src/models/TanamDocument.ts b/functions/src/models/TanamDocument.ts
index 51cd9d12..642194fa 100644
--- a/functions/src/models/TanamDocument.ts
+++ b/functions/src/models/TanamDocument.ts
@@ -32,7 +32,14 @@ export abstract class TanamDocument<TimestampType, FieldValueType> {
   public readonly createdAt?: TimestampType;
   public readonly updatedAt?: TimestampType;
 
-  abstract get status(): TanamPublishStatus;
+  get status(): TanamPublishStatus {
+    if (!this.publishedAt) {
+      return "unpublished";
+    } else {
+      return "published";
+    }
+  }
+
   protected abstract getServerTimestamp(): FieldValueType;
 
   toJson(): object {
diff --git a/functions/src/models/TanamDocumentAdmin.ts b/functions/src/models/TanamDocumentAdmin.ts
index 38cb866a..7b4ec7b3 100644
--- a/functions/src/models/TanamDocumentAdmin.ts
+++ b/functions/src/models/TanamDocumentAdmin.ts
@@ -1,22 +1,12 @@
 import {FieldValue, Timestamp} from "firebase-admin/firestore";
-import {ITanamDocument, TanamDocument, TanamPublishStatus} from "./TanamDocument";
 import {DocumentSnapshot} from "firebase-functions/v2/firestore";
+import {ITanamDocument, TanamDocument} from "./TanamDocument";
 
 export class TanamDocumentAdmin extends TanamDocument<Timestamp, FieldValue> {
   constructor(id: string, json: ITanamDocument<Timestamp>) {
     super(id, json);
   }
 
-  get status(): TanamPublishStatus {
-    if (!this.publishedAt) {
-      return "unpublished";
-    } else if (this.publishedAt.toMillis() > Timestamp.now().toMillis()) {
-      return "scheduled";
-    } else {
-      return "published";
-    }
-  }
-
   getServerTimestamp(): FieldValue {
     return FieldValue.serverTimestamp();
   }
diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
index 1bfc5aca..20554a37 100644
--- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -12,7 +12,7 @@ export default function DocumentDetailsPage() {
   const router = useRouter();
   const {documentId} = useParams<{documentId: string}>() ?? {};
   const {data: document, error: documentError} = useTanamDocument(documentId);
-  const {update, error: writeError} = useCrudTanamDocument(documentId);
+  const {update, error: writeError} = useCrudTanamDocument();
   const [readonlyMode] = useState<boolean>(false);
   const [notification, setNotification] = useState<UserNotification | null>(null);
   if (!!document?.documentType && document?.documentType !== "article") {
@@ -26,7 +26,12 @@ export default function DocumentDetailsPage() {
 
   async function onDocumentContentChange(content: string) {
     console.log("[onDocumentContentChange]", content);
-    await update({data: {...document?.data, content}});
+    if (!document) {
+      return;
+    }
+
+    document.data.content = content;
+    await update(document);
   }
 
   return (
diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/article/page.tsx
index aa954489..dea7e72f 100644
--- a/hosting/src/app/(protected)/content/article/page.tsx
+++ b/hosting/src/app/(protected)/content/article/page.tsx
@@ -5,24 +5,26 @@ import Loader from "@/components/common/Loader";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
 import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
-import {useCreateTanamDocument, useTanamDocuments} from "@/hooks/useTanamDocuments";
+import {useCrudTanamDocument, 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 {create, error: crudError} = useCrudTanamDocument();
   const {data: documents, error: docsError} = useTanamDocuments("article");
   const [notification, setNotification] = useState<UserNotification | null>(null);
   const router = useRouter();
 
   useEffect(() => {
-    setNotification(docsError || writeError);
-  }, [docsError, writeError]);
+    setNotification(docsError || crudError);
+  }, [docsError, crudError]);
 
   const addNewArticle = async () => {
-    const id = await create();
+    const id = await create(documentType?.id);
+
+    if (!id) return;
 
     router.push(`article/${id}`);
   };
diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
index 40e73142..7466811e 100644
--- a/hosting/src/components/Button.tsx
+++ b/hosting/src/components/Button.tsx
@@ -36,16 +36,16 @@ export function Button({title, onClick, style = "normal", color = "primary", chi
 
   switch (color) {
     case "primary":
-      styles.push("bg-primary", "text-white");
+      styles.push("bg-primary", !style ? "text-white" : "");
       break;
     case "meta-3":
-      styles.push("bg-meta-3", "text-white");
+      styles.push("bg-meta-3", !style ? "text-white" : "");
       break;
     case "black":
-      styles.push("bg-black", "text-white");
+      styles.push("bg-black", !style ? "text-white" : "");
       break;
     default:
-      styles.push("bg-primary", "text-white");
+      styles.push("bg-primary", !style ? "text-white" : "");
   }
 
   switch (style) {
diff --git a/hosting/src/components/Header/index.tsx b/hosting/src/components/Header/index.tsx
index 37b5e5d6..22506662 100644
--- a/hosting/src/components/Header/index.tsx
+++ b/hosting/src/components/Header/index.tsx
@@ -1,14 +1,18 @@
 import DarkModeSwitcher from "@/components/Header/DarkModeSwitcher";
 import DropdownUser from "@/components/Header/DropdownUser";
+import {TogglePublishDocument} from "@/components/TogglePublishDocument";
 import {useAuthentication} from "@/hooks/useAuthentication";
 import Image from "next/image";
 import Link from "next/link";
 
 const Header = (props: {sidebarOpen: string | boolean | undefined; setSidebarOpen: (arg0: boolean) => void}) => {
   const {authUser} = useAuthentication();
+
   return (
     <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
       <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+        <TogglePublishDocument />
+
         <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
           {/* <!-- Hamburger Toggle BTN --> */}
           <button
diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx
new file mode 100644
index 00000000..5a53f14a
--- /dev/null
+++ b/hosting/src/components/TogglePublishDocument.tsx
@@ -0,0 +1,30 @@
+import {Button} from "@/components/Button";
+import {useTanamDocument} from "@/hooks/useTanamDocuments";
+import {useParams} from "next/navigation";
+
+export function TogglePublishDocument() {
+  const {documentId} = useParams<{documentId: string}>() ?? {};
+  const {data: document, changeStatus} = useTanamDocument(documentId);
+
+  async function onTogglePublishDocument() {
+    if (!document) {
+      return;
+    }
+
+    // Toggle the status of the document
+    return changeStatus(document.status === "published" ? "unpublished" : "published");
+  }
+
+  return (
+    documentId && (
+      <>
+        <Button
+          title={document?.status === "published" ? "Unpublish" : "Publish"}
+          onClick={onTogglePublishDocument}
+          style="outline"
+          color="primary"
+        />
+      </>
+    )
+  );
+}
diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx
index 21f7f717..816c7e44 100644
--- a/hosting/src/hooks/useTanamDocuments.tsx
+++ b/hosting/src/hooks/useTanamDocuments.tsx
@@ -1,19 +1,10 @@
+"use client";
 import {TanamDocumentClient} from "@/models/TanamDocumentClient";
+import {UserNotification} from "@/models/UserNotification";
 import {firestore} from "@/plugins/firebase";
-import {ITanamDocument} from "@functions/models/TanamDocument";
-import {
-  Timestamp,
-  collection,
-  doc,
-  onSnapshot,
-  query,
-  serverTimestamp,
-  setDoc,
-  updateDoc,
-  where,
-} from "firebase/firestore";
+import {TanamPublishStatus} from "@functions/models/TanamDocument";
+import {collection, doc, onSnapshot, query, serverTimestamp, setDoc, updateDoc, where} from "firebase/firestore";
 import {useEffect, useState} from "react";
-import {UserNotification} from "@/models/UserNotification";
 
 interface UseTanamDocumentsResult {
   data: TanamDocumentClient[];
@@ -59,6 +50,7 @@ export function useTanamDocuments(documentTypeId?: string): UseTanamDocumentsRes
 
 interface UseTanamDocumentResult {
   data: TanamDocumentClient | null;
+  changeStatus: (status: TanamPublishStatus) => Promise<void>;
   error: UserNotification | null;
 }
 
@@ -92,67 +84,66 @@ export function useTanamDocument(documentId?: string): UseTanamDocumentResult {
     return () => unsubscribe();
   }, [documentId]);
 
-  return {data, error};
-}
-
-export function useCrudTanamDocument(documentId?: string) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<UserNotification | null>(null);
+  /**
+   * Method to publish or unpublish a document
+   *
+   * @param {TanamPublishStatus} status Flag to publish or unpublish the document
+   * @return {Promise<void>} Promise
+   */
+  async function changeStatus(status: TanamPublishStatus): Promise<void> {
+    if (!documentId) {
+      setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
+      return;
+    }
 
-  async function update(data: Partial<ITanamDocument<Timestamp>>): Promise<void> {
-    setIsLoading(true);
     try {
-      if (!documentId) {
-        setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
-        return;
-      }
-
       const typeRef = doc(firestore, "tanam-documents", documentId);
-      await updateDoc(typeRef, {...data, updatedAt: serverTimestamp()});
+      await updateDoc(typeRef, {
+        publishedAt: status === "published" ? serverTimestamp() : null,
+        status,
+      } as Partial<TanamDocumentClient>);
     } catch (err) {
       setError(
-        new UserNotification(
-          "error",
-          "UserNotification updating document",
-          "An error occurred while updating the document",
-        ),
+        new UserNotification("error", "Error publishing document", "An error occurred while publishing the document"),
       );
-    } finally {
-      setIsLoading(false);
     }
   }
-  return {update, isLoading, error};
+
+  return {data, changeStatus, error};
 }
 
-export function useCreateTanamDocument(documentType?: string) {
-  const [isLoading, setIsLoading] = useState(false);
+export function useCrudTanamDocument() {
   const [error, setError] = useState<UserNotification | null>(null);
 
-  async function create() {
-    setIsLoading(true);
+  async function create(documentType?: string) {
     try {
       if (!documentType) {
-        setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
+        setError(new UserNotification("error", "Missing parameter", "Document type 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);
+      const tanamDocument = new TanamDocumentClient(docId, {data: {}, documentType});
+      await setDoc(docRef, tanamDocument.toJson());
       return docId;
     } catch (err) {
       setError(
-        new UserNotification(
-          "error",
-          "UserNotification creating document",
-          "An error occurred while creating the document",
-        ),
+        new UserNotification("error", "Error creating document", "An error occurred while creating the document"),
+      );
+    }
+  }
+
+  async function update(document: TanamDocumentClient): Promise<void> {
+    try {
+      const typeRef = doc(firestore, "tanam-documents", document.id);
+      await updateDoc(typeRef, document.toJson());
+    } catch (err) {
+      setError(
+        new UserNotification("error", "Error updating document", "An error occurred while updating the document"),
       );
-    } finally {
-      setIsLoading(false);
     }
   }
 
-  return {create, isLoading, error};
+  return {error, create, update};
 }
diff --git a/hosting/src/models/TanamDocumentClient.ts b/hosting/src/models/TanamDocumentClient.ts
index e0a7bd7e..8d19e07b 100644
--- a/hosting/src/models/TanamDocumentClient.ts
+++ b/hosting/src/models/TanamDocumentClient.ts
@@ -1,4 +1,4 @@
-import {ITanamDocument, TanamDocument, TanamPublishStatus} from "@functions/models/TanamDocument";
+import {ITanamDocument, TanamDocument} from "@functions/models/TanamDocument";
 import {DocumentSnapshot, FieldValue, serverTimestamp, Timestamp} from "firebase/firestore";
 
 export class TanamDocumentClient extends TanamDocument<Timestamp, FieldValue> {
@@ -6,16 +6,6 @@ export class TanamDocumentClient extends TanamDocument<Timestamp, FieldValue> {
     super(id, json);
   }
 
-  get status(): TanamPublishStatus {
-    if (!this.publishedAt) {
-      return "unpublished";
-    } else if (this.publishedAt.toMillis() > Timestamp.now().toMillis()) {
-      return "scheduled";
-    } else {
-      return "published";
-    }
-  }
-
   getServerTimestamp(): FieldValue {
     return serverTimestamp();
   }