diff --git a/cognee-frontend/src/ui/Layout/Header.tsx b/cognee-frontend/src/ui/Layout/Header.tsx
index 7a1d2e906..69968076a 100644
--- a/cognee-frontend/src/ui/Layout/Header.tsx
+++ b/cognee-frontend/src/ui/Layout/Header.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
import { useBoolean } from "@/utils";
import { CloseIcon, CloudIcon, CogneeIcon } from "../Icons";
-import { CTAButton, GhostButton, IconButton, Modal } from "../elements";
+import { CTAButton, GhostButton, IconButton, Modal, StatusDot } from "../elements";
import syncData from "@/modules/cloud/syncData";
interface HeaderProps {
@@ -23,6 +23,11 @@ export default function Header({ user }: HeaderProps) {
setFalse: closeSyncModal,
} = useBoolean(false);
+ const {
+ value: isMCPStatusOpen,
+ setTrue: setMCPStatusOpen,
+ } = useBoolean(false);
+
const handleDataSyncConfirm = () => {
syncData()
.finally(() => {
@@ -39,6 +44,10 @@ export default function Header({ user }: HeaderProps) {
+
+
+ MCP status
+
Sync
diff --git a/cognee-frontend/src/ui/elements/StatusDot.tsx b/cognee-frontend/src/ui/elements/StatusDot.tsx
new file mode 100644
index 000000000..4eb71a6e0
--- /dev/null
+++ b/cognee-frontend/src/ui/elements/StatusDot.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const StatusDot = ({ isActive, className }: { isActive: boolean, className?: string }) => {
+ return (
+
+ );
+};
+
+export default StatusDot;
diff --git a/cognee-frontend/src/ui/elements/index.ts b/cognee-frontend/src/ui/elements/index.ts
index 551b06596..0133f56f6 100644
--- a/cognee-frontend/src/ui/elements/index.ts
+++ b/cognee-frontend/src/ui/elements/index.ts
@@ -8,5 +8,6 @@ export { default as IconButton } from "./IconButton";
export { default as GhostButton } from "./GhostButton";
export { default as NeutralButton } from "./NeutralButton";
export { default as StatusIndicator } from "./StatusIndicator";
+export { default as StatusDot } from "./StatusDot";
export { default as Accordion } from "./Accordion";
export { default as Notebook } from "./Notebook";