diff --git a/src/components/accessories/dashboard/admissions/Admissions.tsx b/src/components/accessories/dashboard/admissions/Admissions.tsx
index c8674658e..d2e74c7f3 100644
--- a/src/components/accessories/dashboard/admissions/Admissions.tsx
+++ b/src/components/accessories/dashboard/admissions/Admissions.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -25,10 +25,12 @@ export const Admissions: FC<IOwnProps> = ({ period }) => {
     dispatch(getAgeTypes());
     dispatch(getAdmissionTypes());
     dispatch(getWards());
-  }, [dispatch]);
+  }, [dispatch, period]);
+
   useEffect(() => {
     dispatch(getAdmissions({ admissionrange: period }));
-  }, [period]);
+  }, [period, dispatch]);
+
   const {
     admissionStatus,
     admissionTypeStatus,
diff --git a/src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx b/src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx
index a5b065f9b..eb043d99e 100644
--- a/src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx
+++ b/src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx
@@ -1,4 +1,3 @@
-import { Skeleton } from "@mui/lab";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +12,7 @@ import { TDashboardComponentProps } from "../../layouts/types";
 import { DataSummary } from "../../summary/DataSummary";
 import { IOwnProps } from "../types";
 
+import { Skeleton } from "@mui/material";
 import "../../card/styles.scss";
 
 export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
@@ -30,7 +30,7 @@ export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
 
   useEffect(() => {
     dispatch(getAdmissions({ admissionrange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   const { total, success, status, ageTypeStatus, data, csvData } =
     useAdmByAgeTypeData();
diff --git a/src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx b/src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx
index c4277bffa..53cd078b5 100644
--- a/src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx
+++ b/src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx b/src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx
index 1dec1ccdc..f50267c97 100644
--- a/src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx
+++ b/src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -25,13 +25,12 @@ export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const admtcardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    //dispatch(getAdmissions({ admissionrange: period }));
     dispatch(getAdmissionTypes());
   }, [dispatch]);
 
   useEffect(() => {
     dispatch(getAdmissions({ admissionrange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   const { total, success, status, admissionTypeStatus, data, csvData } =
     useAdmByAdmTypeData();
diff --git a/src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx b/src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx
index 738f359c7..7f4ff2517 100644
--- a/src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx
+++ b/src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -25,13 +25,12 @@ export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   const cardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    //dispatch(getAdmissions({ admissionrange: period }));
     dispatch(getWards());
   }, [dispatch]);
 
   useEffect(() => {
     dispatch(getAdmissions({ admissionrange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   const { total, success, status, wardStatus, data, csvData } =
     useAdmByAdmWardData();
diff --git a/src/components/accessories/dashboard/discharges/Discharges.tsx b/src/components/accessories/dashboard/discharges/Discharges.tsx
index f2dbd83ca..4092bcd8d 100644
--- a/src/components/accessories/dashboard/discharges/Discharges.tsx
+++ b/src/components/accessories/dashboard/discharges/Discharges.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -38,11 +38,11 @@ export const Discharges: FC<IOwnProps> = ({ period }) => {
     dispatch(getAgeTypes());
     dispatch(getDischargeTypes());
     dispatch(getWards());
-  }, [dispatch]);
+  }, [dispatch, period]);
 
   useEffect(() => {
     dispatch(getDischarges({ dischargerange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   return (
     <>
diff --git a/src/components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx b/src/components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx
index 85c839f98..ad2da2c2d 100644
--- a/src/components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx
+++ b/src/components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx b/src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx
index 7ac1ab75a..870fdc8c9 100644
--- a/src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx
+++ b/src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx b/src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx
index f92cd6abe..e54d6eba0 100644
--- a/src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx
+++ b/src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/src/components/accessories/dashboard/discharges/dischargesByWards/DischargesByWards.tsx b/src/components/accessories/dashboard/discharges/dischargesByWards/DischargesByWards.tsx
index bc2d57829..667b54c20 100644
--- a/src/components/accessories/dashboard/discharges/dischargesByWards/DischargesByWards.tsx
+++ b/src/components/accessories/dashboard/discharges/dischargesByWards/DischargesByWards.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -26,11 +26,11 @@ export const DischargesByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   useEffect(() => {
     dispatch(getDischarges({ dischargerange: period }));
     dispatch(getWards());
-  }, [dispatch]);
+  }, [dispatch, period]);
 
   useEffect(() => {
     dispatch(getDischarges({ dischargerange: period }));
-  }, [period]);
+  }, [period, dispatch]);
 
   const { total, success, status, wardStatus, data, csvData } =
     useDisByWardData();
diff --git a/src/components/accessories/dashboard/opds/Opds.tsx b/src/components/accessories/dashboard/opds/Opds.tsx
index 79a4e9608..1e47dd368 100644
--- a/src/components/accessories/dashboard/opds/Opds.tsx
+++ b/src/components/accessories/dashboard/opds/Opds.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -23,15 +23,8 @@ export const Opds: FC<IOwnProps> = ({ period }) => {
     );
     dispatch(getAgeTypes());
   }, [dispatch, period]);
-  const {
-    ageTypeStatus,
-    opdStatus,
-    dataByAgeType,
-    dataBySex,
-    success,
-    total,
-    opds,
-  } = useData();
+  const { ageTypeStatus, opdStatus, dataByAgeType, dataBySex, success, total } =
+    useData();
 
   return (
     <>
diff --git a/src/components/accessories/dashboard/opds/opdByAgeTypes/OpdByAgeTypes.tsx b/src/components/accessories/dashboard/opds/opdByAgeTypes/OpdByAgeTypes.tsx
index 46a1e59ba..a29b40f22 100644
--- a/src/components/accessories/dashboard/opds/opdByAgeTypes/OpdByAgeTypes.tsx
+++ b/src/components/accessories/dashboard/opds/opdByAgeTypes/OpdByAgeTypes.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/src/components/accessories/dashboard/opds/opdsBySex/OpdBySex.tsx b/src/components/accessories/dashboard/opds/opdsBySex/OpdBySex.tsx
index 51a1c322b..50e09736e 100644
--- a/src/components/accessories/dashboard/opds/opdsBySex/OpdBySex.tsx
+++ b/src/components/accessories/dashboard/opds/opdsBySex/OpdBySex.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@mui/lab";
+import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
 import React, { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/src/state/layouts/slice.ts b/src/state/layouts/slice.ts
index a047a42fa..91f6ec170 100644
--- a/src/state/layouts/slice.ts
+++ b/src/state/layouts/slice.ts
@@ -1,14 +1,14 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { initial } from "./initial";
-import * as thunks from "./thunk";
-import { ApiResponse } from "state/types";
 import { isEmpty } from "lodash";
 import { Layouts } from "react-grid-layout";
+import { ApiResponse } from "state/types";
 import {
   decodeLayoutConfig,
   encodeLayout,
   toolboxDashboards,
 } from "../../components/accessories/dashboard/layouts/consts";
+import { initial } from "./initial";
+import * as thunks from "./thunk";
 
 export const layoutSlice = createSlice({
   name: "layouts",
@@ -72,6 +72,9 @@ export const layoutSlice = createSlice({
           ...payload,
           configValue: encodeLayout({ layout, toolbox }),
         };
+
+        state.layouts = layout;
+        state.toolbox = toolbox;
       })
       .addCase(thunks.getLayouts.rejected, (state, action) => {
         state.getLayouts = ApiResponse.error(action.payload);