diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx
index 1ed97991183057711be6e4d9702139ec1c66d0f3..770166a65b5bc922ae1c268a732a8f1df5d7c311 100644
--- a/packages/client/src/components/App.tsx
+++ b/packages/client/src/components/App.tsx
@@ -140,7 +140,7 @@ const AppInner = () => {
       <CanvasWrapper />
       <ToolbarWrapper />
 
-      {/* <DynamicallyLoadChat /> */}
+      <DynamicallyLoadChat />
 
       <DebugModal />
       <SettingsSidebar />
diff --git a/packages/client/src/components/Chat/Chat.tsx b/packages/client/src/components/Chat/Chat.tsx
index d270935e0ed6451d51ed77cd780f17091e5b6818..31cbee7e550a0d2f9d6e873c3ea34dde453fc62f 100644
--- a/packages/client/src/components/Chat/Chat.tsx
+++ b/packages/client/src/components/Chat/Chat.tsx
@@ -1,12 +1,22 @@
 import { useEffect, useRef, useState } from "react";
+import { faComments } from "@fortawesome/free-solid-svg-icons";
+import { useAppContext } from "../../contexts/AppContext";
+import { SidebarBase } from "../SidebarBase";
 
 const Chat = () => {
-  const ref = useRef<HTMLDivElement | null>(null);
+  const { chatSidebar, setChatSidebar } = useAppContext();
 
   return (
-    <div ref={ref} style={{ position: "fixed", top: 0, left: 0, zIndex: 999 }}>
-      chat
-    </div>
+    <SidebarBase
+      shown={chatSidebar}
+      setSidebarShown={setChatSidebar}
+      icon={faComments}
+      title="Chat"
+      description=""
+      side="Right"
+    >
+      <div>hi</div>
+    </SidebarBase>
   );
 };
 
diff --git a/packages/client/src/components/Chat/OpenChatButton.tsx b/packages/client/src/components/Chat/OpenChatButton.tsx
index 1f1622110e8b27a6020210514833a910bc0e3e24..7e83bbb524a33daeaf267f21ada5ceb0ab33cfda 100644
--- a/packages/client/src/components/Chat/OpenChatButton.tsx
+++ b/packages/client/src/components/Chat/OpenChatButton.tsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faComments } from "@fortawesome/free-solid-svg-icons";
 
 const OpenChatButton = () => {
-  const { config } = useAppContext();
+  const { config, setChatSidebar } = useAppContext();
   const { notificationCount, doLogin } = useChatContext();
 
   return (
@@ -15,15 +15,12 @@ const OpenChatButton = () => {
       color="danger"
       size="sm"
     >
-      {
-        config?.chat?.element_host && 
-        <Button 
-          onPress={doLogin}
-          variant="faded"
-        >
+      {config?.chat?.element_host && (
+        <Button onPress={() => setChatSidebar((v) => !v)} variant="faded">
           <FontAwesomeIcon icon={faComments} />
           <p>Chat</p>
-        </Button>}
+        </Button>
+      )}
     </Badge>
   );
 };
diff --git a/packages/client/src/components/Settings/ChatSettings.tsx b/packages/client/src/components/Settings/ChatSettings.tsx
index 865335573b138cda000681977b632a3cda07026a..6673dc6db9e15a2335e7401271f60075d75c5876 100644
--- a/packages/client/src/components/Settings/ChatSettings.tsx
+++ b/packages/client/src/components/Settings/ChatSettings.tsx
@@ -18,14 +18,18 @@ export const ChatSettings = () => {
           />
           <h2 className="text-xl">Chat</h2>
         </div>
-        <p className="text-default-600 text-xs">Chatting with other canvas users</p>
+        <p className="text-default-600 text-xs">
+          Chatting with other canvas users
+        </p>
       </header>
       <section>
-        <React.Suspense>{loadChat && 
-          <div className="mt-4">
-            <InnerChatSettings />
-          </div>  
-        }</React.Suspense>
+        <React.Suspense>
+          {loadChat && (
+            <div className="mt-4">
+              <InnerChatSettings />
+            </div>
+          )}
+        </React.Suspense>
       </section>
     </div>
   );
diff --git a/packages/client/src/contexts/AppContext.tsx b/packages/client/src/contexts/AppContext.tsx
index 6651ad3386b9e0f739623537bfc0f3d47ae6a9fe..aa7e3919895dd293c77dd52d661b338498af91c1 100644
--- a/packages/client/src/contexts/AppContext.tsx
+++ b/packages/client/src/contexts/AppContext.tsx
@@ -24,6 +24,8 @@ interface IAppContext {
 
   loadChat: boolean;
   setLoadChat: (v: boolean) => void;
+  chatSidebar: boolean;
+  setChatSidebar: React.Dispatch<React.SetStateAction<boolean>>;
 
   infoSidebar: boolean;
   setInfoSidebar: (v: boolean) => void;
@@ -39,7 +41,7 @@ interface IAppContext {
   heatmapOverlay: IMapOverlay;
   setHeatmapOverlay: React.Dispatch<React.SetStateAction<IMapOverlay>>;
   pixelPulses: boolean;
-  setPixelPulses: (state: boolean) => void
+  setPixelPulses: (state: boolean) => void;
 
   profile?: string; // sub
   setProfile: (v?: string) => void;
@@ -101,6 +103,7 @@ export const AppContext = ({ children }: PropsWithChildren) => {
 
   // --- settings ---
   const [loadChat, _setLoadChat] = useState(false);
+  const [chatSidebar, setChatSidebar] = useState(false);
 
   const [pixels, setPixels] = useState({ available: 0 });
   const [undo, setUndo] = useState<{ available: true; expireAt: number }>();
@@ -125,7 +128,7 @@ export const AppContext = ({ children }: PropsWithChildren) => {
     opacity: 1,
     loading: false,
   });
-  const [pixelPulses, setPixelPulses] = useState<boolean>(false)
+  const [pixelPulses, setPixelPulses] = useState<boolean>(false);
 
   const [profile, setProfile] = useState<string>();
 
@@ -222,6 +225,8 @@ export const AppContext = ({ children }: PropsWithChildren) => {
         undo,
         loadChat,
         setLoadChat,
+        chatSidebar,
+        setChatSidebar,
         connected,
         hasAdmin,
         pixelWhois,