diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index bf459ea..ba9b932 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,15 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import MessageList from './MessageList';
 import SendMessageForm from './SendMessageForm';
 import Conversation from '../../../model/Conversation';
 import LoadingPage from './loading';
-import io from "socket.io-client";
 import { Box, Stack, Typography } from '@mui/material';
 import ConversationAvatar from './ConversationAvatar';
 import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/conversation';
+import { SocketContext } from '../contexts/socket';
 
 const ConversationView = props => {
-  const [socket, setSocket] = useState()
+  const socket = useContext(SocketContext)
   const [conversation, setConversation] = useState()
   const [messages, setMessages] = useState([])
   const [isLoading, setIsLoading] = useState(true)
@@ -47,17 +47,6 @@
   )
 
   useEffect(() => {
-    console.log("io.connect")
-    const socket = io()
-    setSocket(socket)
-    return () => {
-      console.log("io.disconnect")
-      socket.disconnect()
-      setSocket(undefined)
-    }
-  }, [])
-
-  useEffect(() => {
     if (!conversation)
       return
     console.log(`io set conversation ${props.conversationId} `+ socket)
@@ -66,10 +55,11 @@
     socket.off('newMessage')
     socket.on('newMessage', (data) => {
       console.log("newMessage")
-      console.log(data)
-      setMessages(addMessage(messages, data))
+      setMessages(
+        (messages) => addMessage(messages, data)
+      )
     })
-  }, [conversation ? props.conversationId : "", socket])
+  }, [socket, setMessages])
 
   if (isLoading) {
       return <LoadingPage />
diff --git a/client/src/contexts/socket.js b/client/src/contexts/socket.js
new file mode 100644
index 0000000..bb59030
--- /dev/null
+++ b/client/src/contexts/socket.js
@@ -0,0 +1,9 @@
+
+import React from "react";
+
+export const SocketContext = React.createContext();
+export const SocketProvider = ({socket, children}) => (
+    <SocketContext.Provider value={socket}>
+        {children}
+    </SocketContext.Provider>
+)
\ No newline at end of file
diff --git a/client/src/index.js b/client/src/index.js
index cdd90a4..a8a1407 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -12,6 +12,8 @@
 import * as Sentry from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import socketio from 'socket.io-client';
+import { SocketProvider } from './contexts/socket.js';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -21,15 +23,19 @@
   },
 })
 
+const socket = socketio()
+
 const container = document.getElementById("root");
 const root = createRoot(container);
 root.render(
   <Provider store={store}>
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
-        <Router>
-          <App/>
-        </Router>
+        <SocketProvider socket={socket}>
+          <Router>
+            <App/>
+          </Router>
+        </SocketProvider>
       </QueryClientProvider>
     </React.StrictMode>
   </Provider>