diff --git a/web/pages/components/message-visiblity-toggle.tsx b/web/pages/components/message-visiblity-toggle.tsx
new file mode 100644
index 0000000000..c202e8d1e0
--- /dev/null
+++ b/web/pages/components/message-visiblity-toggle.tsx
@@ -0,0 +1,83 @@
+// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon 
+import React, { useState, useEffect } from "react";
+import { Button, Tooltip } from "antd";
+import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
+import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis";
+import { MessageType } from '../../types/chat';
+import { OUTCOME_TIMEOUT } from "../chat";
+import { isEmptyObject } from "../../utils/format";
+
+interface MessageToggleProps {
+  isVisible: boolean;
+  message: MessageType;
+  setMessage: (message: MessageType) => void,
+};
+
+
+export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) {
+  if (!message || isEmptyObject(message)) {
+    return null;
+  }
+
+  let outcomeTimeout = null;
+  const [outcome, setOutcome] = useState(0);
+
+  const { id: messageId } = message || {};
+
+  const resetOutcome = () => {
+    outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT);
+  };
+  
+  useEffect(() => {
+    return () => {
+      clearTimeout(outcomeTimeout);
+    };
+  });
+
+
+  const updateChatMessage = async () => {
+    clearTimeout(outcomeTimeout);
+    setOutcome(0);
+    const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {
+      auth: true,
+      method: 'POST',
+      data: {
+        visible: !isVisible,
+        idArray: [messageId],
+      },
+    });
+
+    if (result.success && result.message === "changed") {
+      setMessage({ ...message, visible: !isVisible });
+      setOutcome(1);
+    } else {
+      setMessage({ ...message, visible: isVisible });
+      setOutcome(-1);
+    }
+    resetOutcome();
+  }
+
+
+  let outcomeIcon = <CheckCircleFilled style={{ color: 'transparent' }} />;
+  if (outcome) {
+    outcomeIcon = outcome > 0 ? 
+    <CheckCircleFilled style={{ color: 'var(--ant-success)' }} /> :
+    <ExclamationCircleFilled style={{ color: 'var(--ant-warning)' }} />;
+  }
+
+  const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`;
+  return (
+    <div className={`toggle-switch ${isVisible ? '' : 'hidden'}`}>
+      <span className="outcome-icon">{outcomeIcon}</span>
+      <Tooltip title={toolTipMessage} placement="topRight">
+        <Button
+          shape="circle"
+          size="small"
+          type="text"
+          icon={ isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined /> }
+          onClick={updateChatMessage}
+        />
+      </Tooltip>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/web/utils/apis.ts b/web/utils/apis.ts
index 1769f1c92f..39acf45a7c 100644
--- a/web/utils/apis.ts
+++ b/web/utils/apis.ts
@@ -63,6 +63,8 @@ export const CREATE_WEBHOOK = `${API_LOCATION}webhooks/create`;
 // hard coded social icons list
 export const SOCIAL_PLATFORMS_LIST = `${NEXT_PUBLIC_API_HOST}api/socialplatforms`;
 
+export const TEMP_UPDATER_API = LOGS_ALL;
+
 
 const GITHUB_RELEASE_URL = "https://api.github.com/repos/owncast/owncast/releases/latest";
 
@@ -72,12 +74,6 @@ interface FetchOptions {
   auth?: boolean;
 };
 
-export async function fetchData(url: string, options?: FetchOptions) {
-// TEMP
-export const TEMP_UPDATER_API = LOGS_ALL;
-
-const GITHUB_RELEASE_URL = "https://api.github.com/repos/owncast/owncast/releases/latest";
-
 export async function fetchData(url: string, options?: object) {
   const {
     data,