diff --git a/src/Routers/routes/ResourceRoutes.tsx b/src/Routers/routes/ResourceRoutes.tsx
index 4b4f3f63c58..357b7812513 100644
--- a/src/Routers/routes/ResourceRoutes.tsx
+++ b/src/Routers/routes/ResourceRoutes.tsx
@@ -1,21 +1,13 @@
-import { Redirect } from "raviger";
-
+import View from "@/components/Common/View";
 import BoardView from "@/components/Resource/ResourceBoard";
 import ResourceDetails from "@/components/Resource/ResourceDetails";
 import { ResourceDetailsUpdate } from "@/components/Resource/ResourceDetailsUpdate";
 import ListView from "@/components/Resource/ResourceList";
 
 import { AppRoutes } from "@/Routers/AppRouter";
-import { getDefaultView } from "@/Utils/viewStorageUtils";
 
 const ResourceRoutes: AppRoutes = {
-  "/resource": () => (
-    <Redirect
-      to={`/resource/${getDefaultView("defaultResourceView", "board")}`}
-    />
-  ),
-  "/resource/board": () => <BoardView />,
-  "/resource/list": () => <ListView />,
+  "/resource": () => <View name="resource" board={BoardView} list={ListView} />,
   "/resource/:id": ({ id }) => <ResourceDetails id={id} />,
   "/resource/:id/update": ({ id }) => <ResourceDetailsUpdate id={id} />,
 };
diff --git a/src/Routers/routes/ShiftingRoutes.tsx b/src/Routers/routes/ShiftingRoutes.tsx
index e59240d40d7..fe3b4effaa0 100644
--- a/src/Routers/routes/ShiftingRoutes.tsx
+++ b/src/Routers/routes/ShiftingRoutes.tsx
@@ -1,5 +1,4 @@
-import { Redirect } from "raviger";
-
+import View from "@/components/Common/View";
 import { ShiftCreate } from "@/components/Patient/ShiftCreate";
 import ShiftDetails from "@/components/Shifting/ShiftDetails";
 import { ShiftDetailsUpdate } from "@/components/Shifting/ShiftDetailsUpdate";
@@ -7,14 +6,9 @@ import BoardView from "@/components/Shifting/ShiftingBoard";
 import ListView from "@/components/Shifting/ShiftingList";
 
 import { AppRoutes } from "@/Routers/AppRouter";
-import { getDefaultView } from "@/Utils/viewStorageUtils";
 
 const ShiftingRoutes: AppRoutes = {
-  "/shifting": () => (
-    <Redirect to={`/shifting/${getDefaultView("defaultShiftView", "board")}`} />
-  ),
-  "/shifting/board": () => <BoardView />,
-  "/shifting/list": () => <ListView />,
+  "/shifting": () => <View name="shifting" board={BoardView} list={ListView} />,
   "/shifting/:id": ({ id }) => <ShiftDetails id={id} />,
   "/shifting/:id/update": ({ id }) => <ShiftDetailsUpdate id={id} />,
   "/facility/:facilityId/patient/:patientId/shift/new": ({
diff --git a/src/Utils/useView.ts b/src/Utils/useView.ts
new file mode 100644
index 00000000000..278ca8e223d
--- /dev/null
+++ b/src/Utils/useView.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export function useView(name: string): [string, (view: string) => void] {
+  const [view, setView] = useState(() => localStorage.getItem(name) || "board");
+
+  const updateView = (view: string) => {
+    setView(view);
+    localStorage.setItem(name, view);
+  };
+
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setView(localStorage.getItem(name) || "board");
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [name]);
+
+  return [view, updateView];
+}
diff --git a/src/Utils/viewStorageUtils.ts b/src/Utils/viewStorageUtils.ts
deleted file mode 100644
index 655ad6677cc..00000000000
--- a/src/Utils/viewStorageUtils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const getDefaultView = (key: string, defaultValue: string): string => {
-  return localStorage.getItem(key) || defaultValue;
-};
-
-export const setDefaultView = (key: string, value: string): void => {
-  localStorage.setItem(key, value);
-};
diff --git a/src/components/Common/View.tsx b/src/components/Common/View.tsx
new file mode 100644
index 00000000000..ac8ea05903b
--- /dev/null
+++ b/src/components/Common/View.tsx
@@ -0,0 +1,27 @@
+import React, { ComponentType } from "react";
+
+import { useView } from "@/Utils/useView";
+
+export default function View({
+  name,
+  board,
+  list,
+}: {
+  name: string;
+  board: ComponentType<{ setView: (view: string) => void }>;
+  list: ComponentType<{ setView: (view: string) => void }>;
+}) {
+  const [view, setView] = useView(`${name}DefaultView`);
+
+  const views: Record<
+    "board" | "list",
+    ComponentType<{ setView: (view: string) => void }>
+  > = {
+    board,
+    list,
+  };
+
+  const SelectedView = views[view as keyof typeof views] || board;
+
+  return <SelectedView setView={setView} />;
+}
diff --git a/src/components/Resource/ResourceBoard.tsx b/src/components/Resource/ResourceBoard.tsx
index 300d61b89e4..877b64c7d91 100644
--- a/src/components/Resource/ResourceBoard.tsx
+++ b/src/components/Resource/ResourceBoard.tsx
@@ -25,7 +25,6 @@ import { RESOURCE_CHOICES } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
-import { setDefaultView } from "@/Utils/viewStorageUtils";
 
 const KanbanBoard = lazy(
   () => import("@/components/Kanban/Board"),
@@ -36,7 +35,11 @@ const resourceStatusOptions = RESOURCE_CHOICES.map((obj) => obj.text);
 const COMPLETED = ["COMPLETED", "REJECTED"];
 const ACTIVE = resourceStatusOptions.filter((o) => !COMPLETED.includes(o));
 
-export default function BoardView() {
+export default function BoardView({
+  setView,
+}: {
+  setView: (view: string) => void;
+}) {
   const { qParams, FilterBadges, advancedFilter, updateQuery } = useFilters({
     limit: -1,
     cacheBlacklist: ["title"],
@@ -46,11 +49,6 @@ export default function BoardView() {
   const appliedFilters = formatFilter(qParams);
   const { t } = useTranslation();
 
-  const onListViewBtnClick = () => {
-    navigate("/resource/list", { query: qParams });
-    setDefaultView("defaultResourceView", "list");
-  };
-
   return (
     <div className="flex-col px-2 pb-2">
       <div className="flex w-full flex-col items-center justify-between lg:flex-row">
@@ -96,7 +94,7 @@ export default function BoardView() {
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <Button
               variant={"primary"}
-              onClick={onListViewBtnClick}
+              onClick={() => setView("list")}
               className="h-10.8 px-4 py-2"
             >
               <CareIcon icon="l-list-ul" className="mr-2" />
diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index aff52f36295..ef546edb388 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -1,4 +1,4 @@
-import { Link, navigate } from "raviger";
+import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import Chip from "@/CAREUI/display/Chip";
@@ -22,9 +22,12 @@ import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import { formatDateTime } from "@/Utils/utils";
-import { setDefaultView } from "@/Utils/viewStorageUtils";
 
-export default function ListView() {
+export default function ListView({
+  setView,
+}: {
+  setView: (view: string) => void;
+}) {
   const {
     qParams,
     Pagination,
@@ -36,10 +39,6 @@ export default function ListView() {
 
   const { t } = useTranslation();
 
-  const onBoardViewBtnClick = () => {
-    navigate("/resource/board", { query: qParams });
-    setDefaultView("defaultResourceView", "board");
-  };
   const appliedFilters = formatFilter(qParams);
 
   const { loading, data, refetch } = useTanStackQueryInstead(
@@ -232,7 +231,7 @@ export default function ListView() {
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <Button
               variant={"primary"}
-              onClick={onBoardViewBtnClick}
+              onClick={() => setView("board")}
               className="h-10.8 px-4 py-2"
             >
               <CareIcon icon="l-list-ul" className="mr-2" />
diff --git a/src/components/Shifting/ShiftingBoard.tsx b/src/components/Shifting/ShiftingBoard.tsx
index bad235467b0..508e0b45e72 100644
--- a/src/components/Shifting/ShiftingBoard.tsx
+++ b/src/components/Shifting/ShiftingBoard.tsx
@@ -30,13 +30,12 @@ import {
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
-import { setDefaultView } from "@/Utils/viewStorageUtils";
 
 const KanbanBoard = lazy(
   () => import("@/components/Kanban/Board"),
 ) as KanbanBoardType;
 
-export default function BoardView() {
+export default function ({ setView }: { setView: (view: string) => void }) {
   const { qParams, updateQuery, FilterBadges, advancedFilter } = useFilters({
     limit: -1,
     cacheBlacklist: ["patient_name"],
@@ -77,10 +76,6 @@ export default function BoardView() {
 
   const [boardFilter, setBoardFilter] = useState(activeBoards);
   const { t } = useTranslation();
-  const onListViewBtnClick = () => {
-    navigate("/shifting/list", { query: qParams });
-    setDefaultView("defaultShiftView", "list");
-  };
 
   return (
     <div className="flex-col px-2 pb-2">
@@ -127,7 +122,7 @@ export default function BoardView() {
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <Button
               variant={"primary"}
-              onClick={onListViewBtnClick}
+              onClick={() => setView("list")}
               className="h-10.8 px-4 py-2"
             >
               <CareIcon icon="l-list-ul" className="mr-2" />
diff --git a/src/components/Shifting/ShiftingList.tsx b/src/components/Shifting/ShiftingList.tsx
index d56daf2ec5f..6ab57b50fb8 100644
--- a/src/components/Shifting/ShiftingList.tsx
+++ b/src/components/Shifting/ShiftingList.tsx
@@ -1,4 +1,3 @@
-import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -19,11 +18,14 @@ import useFilters from "@/hooks/useFilters";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
-import { setDefaultView } from "@/Utils/viewStorageUtils";
 
 import ShiftingTable from "./ShiftingTable";
 
-export default function ListView() {
+export default function ListView({
+  setView,
+}: {
+  setView: (view: string) => void;
+}) {
   const {
     qParams,
     updateQuery,
@@ -34,10 +36,7 @@ export default function ListView() {
   } = useFilters({ cacheBlacklist: ["patient_name"] });
 
   const { t } = useTranslation();
-  const onBoardViewBtnClick = () => {
-    navigate("/shifting/board", { query: qParams });
-    setDefaultView("defaultShiftView", "board");
-  };
+
   const {
     data: shiftData,
     loading,
@@ -83,7 +82,7 @@ export default function ListView() {
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <Button
               variant={"primary"}
-              onClick={onBoardViewBtnClick}
+              onClick={() => setView("board")}
               className="h-10.8 px-4 py-2"
             >
               <CareIcon icon="l-list-ul" className="mr-2" />
diff --git a/src/components/Users/ManageUsers.tsx b/src/components/Users/ManageUsers.tsx
index e2ab7f319e7..8258ccb8096 100644
--- a/src/components/Users/ManageUsers.tsx
+++ b/src/components/Users/ManageUsers.tsx
@@ -26,8 +26,8 @@ import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import { useView } from "@/Utils/useView";
 import { classNames } from "@/Utils/utils";
-import { getDefaultView, setDefaultView } from "@/Utils/viewStorageUtils";
 
 export default function ManageUsers() {
   const { t } = useTranslation();
@@ -48,9 +48,7 @@ export default function ManageUsers() {
   const userTypes = authUser.is_superuser
     ? [...USER_TYPES]
     : USER_TYPES.slice(0, userIndex + 1);
-  const [activeTab, setActiveTab] = useState(
-    getDefaultView("usersDefaultView", "card") === "list" ? 1 : 0,
-  );
+  const [activeTab, setActiveTab] = useView("usersDefaultView");
 
   const { data: homeFacilityData } = useTanStackQueryInstead(
     routes.getAnyFacility,
@@ -109,9 +107,7 @@ export default function ManageUsers() {
     return <Loading />;
   }
   const handleTabChange = (tab: number) => {
-    setActiveTab(tab);
-    const newView = tab === 1 ? "list" : "card";
-    setDefaultView("usersDefaultView", newView);
+    setActiveTab(tab === 1 ? "list" : "card");
   };
 
   manageUsers = (
@@ -120,7 +116,7 @@ export default function ManageUsers() {
         users={userListData?.results ?? []}
         onSearch={(username) => updateQuery({ username })}
         searchValue={qParams.username}
-        activeTab={activeTab}
+        activeTab={activeTab === "list" ? 1 : 0}
         onTabChange={handleTabChange}
       />
       <Pagination totalCount={userListData.count} />