diff --git a/xtablo-expo/.env b/xtablo-expo/.env
new file mode 100644
index 0000000..e20486f
--- /dev/null
+++ b/xtablo-expo/.env
@@ -0,0 +1 @@
+EXPO_PUBLIC_STREAM_CHAT_API_KEY="t5vvvddteapa"
\ No newline at end of file
diff --git a/xtablo-expo/providers/ChatProvider.tsx b/xtablo-expo/providers/ChatProvider.tsx
index 3693972..06f3b19 100644
--- a/xtablo-expo/providers/ChatProvider.tsx
+++ b/xtablo-expo/providers/ChatProvider.tsx
@@ -1,4 +1,5 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { ActivityIndicator } from "react-native";
 import { StreamChat } from "stream-chat";
 import { Chat, OverlayProvider } from "stream-chat-expo";
 
@@ -7,7 +8,11 @@ export default function ChatProvider({
 }: {
   children: React.ReactNode;
 }) {
-  const client = StreamChat.getInstance("t5vvvddteapa");
+  const [isReady, setIsReady] = useState(false);
+
+  const client = StreamChat.getInstance(
+    process.env.EXPO_PUBLIC_STREAM_CHAT_API_KEY as string
+  );
 
   useEffect(() => {
     const connect = async () => {
@@ -18,12 +23,21 @@ export default function ChatProvider({
         },
         client.devToken("artslidd")
       );
+      setIsReady(true);
       const channel = client.channel("messaging", "hello");
       await channel.watch();
     };
     connect();
+    return () => {
+      client.disconnectUser();
+      setIsReady(false);
+    };
   }, []);
 
+  if (!isReady) {
+    return <ActivityIndicator />;
+  }
+
   return (
     <OverlayProvider>
       <Chat client={client}>{children}</Chat>