diff --git a/web/src/App.tsx b/web/src/App.tsx
index 1c29fce..90cee4d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -8,7 +8,7 @@ import AppHeader from './AppHeader';
 import useSocket from 'hooks/useSocket';
 
 function App() {
-  const { servicesGroupedByName, serversGroupedByHost, updateCount } =
+  const { servicesGroupedByName, serversGroupedByHost, updateCount ,connectionStatus,sendJsonMessage} =
     useSocket();
 
   const [servicesGroupByName, setServicesGroupByName] = React.useState<any>({});
@@ -26,11 +26,11 @@ function App() {
   const router = createBrowserRouter([
     {
       path: '/',
-      element: <ServerList serversGroupedByHost={servicesGroupByHost} />,
+      element: <ServerList serversGroupedByHost={servicesGroupByHost}  connectionStatus={connectionStatus} sendJsonMessage={sendJsonMessage}/>,
     },
     {
       path: '/:host',
-      element: <ServerDetail servicesGroupedByName={servicesGroupByName} />,
+      element: <ServerDetail servicesGroupedByName={servicesGroupByName} connectionStatus={connectionStatus} sendJsonMessage={sendJsonMessage} />,
     },
   ]);
 
diff --git a/web/src/server/ServerDetail.tsx b/web/src/server/ServerDetail.tsx
index a838501..7e1bdf2 100644
--- a/web/src/server/ServerDetail.tsx
+++ b/web/src/server/ServerDetail.tsx
@@ -16,13 +16,16 @@ import {
 
 export default function ServerDetail({
   servicesGroupedByName,
+  connectionStatus,
+  sendJsonMessage
 }: {
   servicesGroupedByName: ServerGroupedByNameResponseType;
+  connectionStatus: string;
+  sendJsonMessage:(arg0: any)=>void;
 }) {
   const { host } = useParams<{ host: string }>();
 
   const [tabIndex, setTabIndex] = React.useState<number>(0);
-  const { connectionStatus, sendJsonMessage } = useSocket();
   sendJsonMessage({ FilterBy: host });
 
   const handleChangeTabIndex = (
diff --git a/web/src/server/ServerList.tsx b/web/src/server/ServerList.tsx
index c7bf907..34b4e75 100644
--- a/web/src/server/ServerList.tsx
+++ b/web/src/server/ServerList.tsx
@@ -10,12 +10,15 @@ import { ServerGroupedByHostResponseType } from './ServerType';
 
 export default function ServerList({
   serversGroupedByHost,
+  connectionStatus,
+  sendJsonMessage
 }: {
   serversGroupedByHost: ServerGroupedByHostResponseType;
+  connectionStatus: string;
+  sendJsonMessage:(arg0: any)=>void;
 }) {
   const navigate = useNavigate();
 
-  const { connectionStatus, sendJsonMessage } = useSocket();
 
   useEffect(() => {
     sendJsonMessage({ FilterBy: '' });