diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index ec7327d23..541f1f218 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,19 +1,10 @@
 import { cookies } from "next/headers"
 
 import { DefaultQueryClientProvider } from "@/providers/query"
-import { Label } from "@/components/ui/label"
 import { Metadata } from "next"
 import { SelectedWorkflowProvider } from "@/providers/selected-workflow"
-import { Switch } from "@/components/ui/switch"
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { UserNav } from "@/components/user-nav"
 import { Workspace } from "@/components/workspace"
-import WorkflowSwitcher from "@/components/workflow-switcher"
-
-import {
-  WorkflowIcon,
-  BellRingIcon,
-} from "lucide-react"
+import { Navbar } from "@/components/navbar"
 
 export const metadata: Metadata = {
   title: "Workflows | Tracecat",
@@ -42,32 +33,7 @@ export default function DashboardPage() {
     <DefaultQueryClientProvider>
       <SelectedWorkflowProvider>
         <div className="flex flex-col h-screen">
-          <div className="border-b">
-            <div className="flex h-16 items-center px-4">
-              <div className="flex space-x-8">
-                <WorkflowSwitcher />
-                <Tabs defaultValue="workspace-view">
-                  <TabsList className="grid w-full grid-cols-2">
-                    <TabsTrigger value="workflow">
-                      <WorkflowIcon className="h-4 w-4 mr-2" />
-                      Workflow
-                    </TabsTrigger>
-                    <TabsTrigger value="cases">
-                      <BellRingIcon className="h-4 w-4 mr-2" />
-                      Cases
-                    </TabsTrigger>
-                  </TabsList>
-                </Tabs>
-              </div>
-              <div className="ml-auto flex items-center space-x-8">
-                <div className="flex items-center space-x-2">
-                  <Switch id="airplane-mode" />
-                  <Label htmlFor="airplane-mode">Enable workflow</Label>
-                </div>
-                <UserNav />
-              </div>
-            </div>
-          </div>
+          <Navbar />
           <div className="flex flex-col flex-grow">
             <Workspace
               defaultLayout={defaultLayout}
diff --git a/frontend/src/components/forms/workflow.tsx b/frontend/src/components/forms/workflow.tsx
index 6721f2519..9e8d7208a 100644
--- a/frontend/src/components/forms/workflow.tsx
+++ b/frontend/src/components/forms/workflow.tsx
@@ -80,9 +80,9 @@ export function WorkflowForm({ workflowId, workflowTitle, workflowDescription, w
           <div className="space-y-3">
             <h4 className="text-sm font-medium">Workflow Status</h4>
             <div className="flex justify-between">
-              <Badge variant="outline" className={`py-1 px-4 ${workflowStatus === "online" ? 'bg-green-100' : 'bg-gray-100'}`}>
+              <Badge variant="outline" className={`py-1 px-4 ${workflowStatus === "online" ? 'bg-green-600/10' : 'bg-gray-100'}`}>
                 <CircleIcon className={`mr-2 h-3 w-3 ${workflowStatus === "online" ? 'fill-green-600 text-green-600' : 'fill-gray-400 text-gray-400'}`} />
-                <span className={`text-muted-foreground ${workflowStatus === "online" ? 'text-green-600' : 'text-gray-600'}`}>{statusCapitalized}</span>
+                <span className={`${workflowStatus === "online" ? 'text-green-600' : 'text-gray-600'}`}>{statusCapitalized}</span>
               </Badge>
               <Tooltip>
                 <TooltipTrigger asChild>
diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
new file mode 100644
index 000000000..a2847dc69
--- /dev/null
+++ b/frontend/src/components/navbar.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState } from "react"
+import axios from "axios"
+
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { UserNav } from "@/components/user-nav"
+import WorkflowSwitcher from "@/components/workflow-switcher"
+import { useSelectedWorkflowMetadata } from "@/providers/selected-workflow"
+
+import {
+  WorkflowIcon,
+  BellRingIcon,
+} from "lucide-react"
+
+
+export function Navbar() {
+
+  const { selectedWorkflowMetadata } = useSelectedWorkflowMetadata(); // This assumes the existence of such a hook
+  const [enableWorkflow, setEnableWorkflow] = useState(false);
+  const selectedWorkflowId = selectedWorkflowMetadata.id;
+
+  useEffect(() => {
+    const updateWorkflowStatus = async () => {
+      if (selectedWorkflowMetadata && selectedWorkflowId) {
+        const status = enableWorkflow ? "online" : "offline";
+        try {
+          await axios.post(`http://localhost:8000/workflows/${selectedWorkflowId}`, JSON.stringify({
+            status: status,
+          }), {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
+          console.log(`Workflow ${selectedWorkflowId} set to ${status}`);
+        } catch (error) {
+          console.error("Failed to update workflow status:", error);
+        }
+      }
+    };
+
+    updateWorkflowStatus();
+  }, [enableWorkflow, selectedWorkflowMetadata]);
+
+  return (
+    <div className="border-b">
+      <div className="flex h-16 items-center px-4">
+        <div className="flex space-x-8">
+          <WorkflowSwitcher />
+          <Tabs defaultValue="workspace-view">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="workflow">
+                <WorkflowIcon className="h-4 w-4 mr-2" />
+                Workflow
+              </TabsTrigger>
+              <TabsTrigger value="cases">
+                <BellRingIcon className="h-4 w-4 mr-2" />
+                Cases
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+        <div className="ml-auto flex items-center space-x-8">
+          <div className="flex items-center space-x-2">
+            <Switch
+              id="enable-workflow"
+              checked={enableWorkflow}
+              onCheckedChange={(newCheckedState) => setEnableWorkflow(newCheckedState)}
+            />
+            <Label className="w-32" htmlFor="enable-workflow">{enableWorkflow ? "Disable workflow" : "Enable workflow"}</Label>
+          </div>
+          <UserNav />
+        </div>
+      </div>
+    </div>
+  )
+}