diff --git a/frontend/src/backendconnection/communication.ts b/frontend/src/backendconnection/communication.ts
index 14fe03a01b19add15d4881d168e692a6c2da16ed..fcd8fb0cad93bc840194ad63594cd7c94db95ce7 100644
--- a/frontend/src/backendconnection/communication.ts
+++ b/frontend/src/backendconnection/communication.ts
@@ -4,9 +4,14 @@ import {
   setPlaySeconds,
 } from "../player/PlayerSlice";
 
-import { setConnectionStatus } from "../connectionstatus/ConnectionStatusSlice";
+import { selectConnected, setConnectionStatus } from "../connectionstatus/ConnectionStatusSlice";
 
-import { all, put, select, takeEvery } from "redux-saga/effects";
+import { all, call, delay, put, retry, select, takeEvery } from "redux-saga/effects";
+import { connect } from "@giantmachines/redux-websocket/dist";
+
+export const getNewConnectionAction = (): any => {
+  return connect("wss://mpvsync.de:8432/")
+}
 
 export const requestPlay = {
   type: "REDUX_WEBSOCKET::SEND",
@@ -110,7 +115,15 @@ function* handleConnectionStatus(action: any) {
       break;
     }
     case "REDUX_WEBSOCKET::CLOSED": {
-      yield put(setConnectionStatus(false));
+      let con_status = yield select(selectConnected)
+      if(con_status === null){
+        console.log("in first case!yyy");
+        yield delay(500);
+        yield put(getNewConnectionAction());
+      } else {
+        console.log("in second");
+        yield put(setConnectionStatus(false));
+      }
       break;
     }
   }
diff --git a/frontend/src/connectionstatus/ConnectionStatusBar.tsx b/frontend/src/connectionstatus/ConnectionStatusBar.tsx
index 5fc0d493640212fa1dbdaffe2327808fa8394336..b0e85f8df2ce8eb1f78e2b7bbdfe6d275ca5b64c 100644
--- a/frontend/src/connectionstatus/ConnectionStatusBar.tsx
+++ b/frontend/src/connectionstatus/ConnectionStatusBar.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 interface StateProps {
-  connected: boolean;
+  connected: boolean | null;
 }
 
 export type Props = StateProps;
@@ -33,7 +33,7 @@ export function ConnectionStatusBar(
     <div className={classes.root}>
       <AppBar position="static" color="default">
         <Toolbar>
-          <Typography variant="h6" className={classes.title}>
+          <Typography style={{color: props.connected ? 'primary' : 'red'}} variant="h6" className={classes.title}>
             {props.connected
               ? "Connected to server"
               : "Lost connection to server"}
diff --git a/frontend/src/connectionstatus/ConnectionStatusSlice.ts b/frontend/src/connectionstatus/ConnectionStatusSlice.ts
index 1f96414802a85cf79b0794794858f896ed914677..8d60bbaeb5b58fd815967711e7dff758d1504be0 100644
--- a/frontend/src/connectionstatus/ConnectionStatusSlice.ts
+++ b/frontend/src/connectionstatus/ConnectionStatusSlice.ts
@@ -2,11 +2,11 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { RootState } from "../store/store";
 
 export interface ConnectionStatusState {
-  connected: boolean;
+  connected: boolean | null;
 }
 
 export const initialState: ConnectionStatusState = {
-  connected: false,
+  connected: null,
 };
 
 export type ConnectionStatusAction = PayloadAction<boolean>;
diff --git a/frontend/src/store/store.ts b/frontend/src/store/store.ts
index 38f9b540b06ed8c795228c3649b9341408460583..ddb0887c1aa57394af1e243ddbc35ce5688a94e2 100644
--- a/frontend/src/store/store.ts
+++ b/frontend/src/store/store.ts
@@ -5,17 +5,14 @@ import PlayerStateReducer from "../player/PlayerSlice";
 import ConnectionStatusStateReducer from "../connectionstatus/ConnectionStatusSlice";
 import UrlReducer from "../url/UrlSlice";
 
-import rootSaga from "../backendconnection/communication";
+import rootSaga, { getNewConnectionAction } from "../backendconnection/communication";
 
 import createSagaMiddleware from "redux-saga";
 
-import { connect } from "@giantmachines/redux-websocket";
-
 // Create the websocket instance.
 const reduxWebsocketMiddleware = reduxWebsocket({
   reconnectInterval: 1000,
   reconnectOnClose: true,
-  dateSerializer: (date: Date) => "haha",
 });
 // See https://github.com/giantmachines/redux-websocket
 // and https://www.npmjs.com/package/@giantmachines/redux-websocket
@@ -39,6 +36,7 @@ export const store = configureStore({
       serializableCheck: {
         // Ignore these action types
         ignoredActions: [
+          /*
           "REDUX_WEBSOCKET::CONNECT",
           "REDUX_WEBSOCKET::CLOSED",
           "REDUX_WEBSOCKET::ERROR",
@@ -49,6 +47,7 @@ export const store = configureStore({
           "REDUX_WEBSOCKET::OPEN",
           "REDUX_WEBSOCKET::MESSAGE",
           "REDUX_WEBSOCKET::SEND",
+          */
         ],
       },
     }),
@@ -57,7 +56,7 @@ export const store = configureStore({
   ],
 });
 
-store.dispatch(connect("wss://mpvsync.de:8432/"));
+store.dispatch(getNewConnectionAction());
 sagaMiddleware.run(rootSaga);
 
 export type RootState = ReturnType<typeof store.getState>;