diff --git a/next.config.js b/next.config.js
index 028c0dc17..25525f662 100644
--- a/next.config.js
+++ b/next.config.js
@@ -90,7 +90,8 @@ const config = {
     // increase the default timeout for the proxy from 30s to 10m to allow for
     // long running requests to the backend
     proxyTimeout: 1000 * 60 * 10,
-    esmExternals: "loose"
+    esmExternals: "loose",
+    optimizePackageImports: ["@flanksource/icons"]
   },
   transpilePackages: ["monaco-editor"]
 };
diff --git a/src/App.tsx b/src/App.tsx
index 86b6b4b23..d04d3cbb8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { AdjustmentsIcon } from "@heroicons/react/solid";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Provider } from "jotai";
+import dynamic from "next/dynamic";
 import React, { ReactNode, useEffect, useState } from "react";
 import { IconType } from "react-icons";
 import { AiFillHeart } from "react-icons/ai";
@@ -21,14 +22,9 @@ import {
   useLocation
 } from "react-router-dom";
 import { Canary, Icon } from "./components";
-import AgentsPage from "./components/Agents/AgentPage";
 import AuthProviderWrapper from "./components/Authentication/AuthProviderWrapper";
 import { ErrorBoundary } from "./components/ErrorBoundary";
-import EditIntegrationPage from "./components/Integrations/EditIntegrationPage";
-import IntegrationsPage from "./components/Integrations/IntegrationsPage";
-import JobsHistorySettingsPage from "./components/JobsHistory/JobsHistorySettingsPage";
 import { withAuthorizationAccessCheck } from "./components/Permissions/AuthorizationAccessCheck";
-import { SchemaResourcePage } from "./components/SchemaResourcePage";
 import { SchemaResource } from "./components/SchemaResourcePage/SchemaResource";
 import {
   SchemaResourceType,
@@ -40,36 +36,6 @@ import { HealthPageContextProvider } from "./context/HealthPageContext";
 import { IncidentPageContextProvider } from "./context/IncidentPageContext";
 import { UserAccessStateContextProvider } from "./context/UserAccessContext/UserAccessContext";
 import { tables } from "./context/UserAccessContext/permissions";
-import {
-  ConfigChangesPage,
-  ConfigDetailsChangesPage,
-  ConfigDetailsPage,
-  ConfigListPage,
-  IncidentDetailsPage,
-  IncidentListPage,
-  LogsPage,
-  TopologyPage
-} from "./pages";
-import { ConnectionsPage } from "./pages/Settings/ConnectionsPage";
-import { EventQueueStatusPage } from "./pages/Settings/EventQueueStatus";
-import { FeatureFlagsPage } from "./pages/Settings/FeatureFlagsPage";
-import NotificationSilencedAddPage from "./pages/Settings/notifications/NotificationSilencedAddPage";
-import NotificationsPage from "./pages/Settings/notifications/NotificationsPage";
-import NotificationRulesPage from "./pages/Settings/notifications/NotificationsRulesPage";
-import NotificationsSilencedPage from "./pages/Settings/notifications/NotificationsSilencedPage";
-import { TopologyCardPage } from "./pages/TopologyCard";
-import { UsersPage } from "./pages/UsersPage";
-import { ConfigInsightsPage } from "./pages/config/ConfigInsightsList";
-import { ConfigDetailsChecksPage } from "./pages/config/details/ConfigDetailsChecksPage";
-import { ConfigDetailsInsightsPage } from "./pages/config/details/ConfigDetailsInsightsPage";
-import { ConfigDetailsPlaybooksPage } from "./pages/config/details/ConfigDetailsPlaybooks";
-import { ConfigDetailsRelationshipsPage } from "./pages/config/details/ConfigDetailsRelationshipsPage";
-import ConfigScrapersEditPage from "./pages/config/settings/ConfigScrapersEditPage";
-import ConfigScrapersPage from "./pages/config/settings/ConfigScrapersPage";
-import { HealthPage } from "./pages/health";
-import PlaybookRunsDetailsPage from "./pages/playbooks/PlaybookRunsDetails";
-import PlaybookRunsPage from "./pages/playbooks/PlaybookRunsPage";
-import { PlaybooksListPage } from "./pages/playbooks/PlaybooksList";
 import { features } from "./services/permissions/features";
 import { Head } from "./ui/Head";
 import { LogsIcon } from "./ui/Icons/LogsIcon";
@@ -79,6 +45,185 @@ import FullPageSkeletonLoader from "./ui/SkeletonLoader/FullPageSkeletonLoader";
 import { ToasterWithCloseButton } from "./ui/ToasterWithCloseButton";
 import { stringSortHelper } from "./utils/common";
 
+const TopologyPage = dynamic(
+  import("@flanksource-ui/pages/TopologyPage").then((mod) => mod.TopologyPage)
+);
+
+const TopologyCardPage = dynamic(
+  import("@flanksource-ui/pages/TopologyCard").then(
+    (mod) => mod.TopologyCardPage
+  )
+);
+
+const IncidentDetailsPage = dynamic(
+  import("@flanksource-ui/pages/incident/IncidentDetails").then(
+    (mod) => mod.IncidentDetailsPage
+  )
+);
+
+const IncidentListPage = dynamic(
+  import("@flanksource-ui/pages/incident/IncidentListPage").then(
+    (mod) => mod.IncidentListPage
+  )
+);
+
+const ConfigListPage = dynamic(
+  import("@flanksource-ui/pages/config/ConfigList").then(
+    (mod) => mod.ConfigListPage
+  )
+);
+
+const ConfigDetailsPage = dynamic(
+  import("@flanksource-ui/pages/config/details/ConfigDetailsPage").then(
+    (mod) => mod.ConfigDetailsPage
+  )
+);
+
+const ConfigDetailsChangesPage = dynamic(
+  import("@flanksource-ui/pages/config/details/ConfigDetailsChangesPage").then(
+    (mod) => mod.ConfigDetailsChangesPage
+  )
+);
+
+const PlaybooksListPage = dynamic(
+  import("@flanksource-ui/pages/playbooks/PlaybooksList").then(
+    (mod) => mod.PlaybooksListPage
+  )
+);
+
+const LogsPage = dynamic(
+  import("@flanksource-ui/pages/LogsPage").then((mod) => mod.LogsPage)
+);
+
+const ConfigChangesPage = dynamic(
+  import("@flanksource-ui/pages/config/ConfigChangesPage").then(
+    (mod) => mod.ConfigChangesPage
+  )
+);
+
+const PlaybookRunsPage = dynamic(
+  import("@flanksource-ui/pages/playbooks/PlaybookRunsPage").then(
+    (mod) => mod.default
+  )
+);
+
+const PlaybookRunsDetailsPage = dynamic(
+  import("@flanksource-ui/pages/playbooks/PlaybookRunsDetails").then(
+    (mod) => mod.default
+  )
+);
+
+const ConfigInsightsPage = dynamic(
+  import("@flanksource-ui/pages/config/ConfigInsightsList").then(
+    (mod) => mod.ConfigInsightsPage
+  )
+);
+
+const HealthPage = dynamic(
+  import("@flanksource-ui/pages/health").then((mod) => mod.HealthPage)
+);
+
+const ConnectionsPage = dynamic(() =>
+  import("@flanksource-ui/pages/Settings/ConnectionsPage").then(
+    (m) => m.ConnectionsPage
+  )
+);
+
+const EventQueueStatusPage = dynamic(() =>
+  import("@flanksource-ui/pages/Settings/EventQueueStatus").then(
+    (m) => m.EventQueueStatusPage
+  )
+);
+
+const FeatureFlagsPage = dynamic(() =>
+  import("@flanksource-ui/pages/Settings/FeatureFlagsPage").then(
+    (m) => m.FeatureFlagsPage
+  )
+);
+
+const NotificationSilencedAddPage = dynamic(
+  () =>
+    import(
+      "@flanksource-ui/pages/Settings/notifications/NotificationSilencedAddPage"
+    )
+);
+
+const NotificationsPage = dynamic(
+  () => import("@flanksource-ui/pages/Settings/notifications/NotificationsPage")
+);
+
+const NotificationRulesPage = dynamic(
+  () =>
+    import(
+      "@flanksource-ui/pages/Settings/notifications/NotificationsRulesPage"
+    )
+);
+
+const NotificationsSilencedPage = dynamic(
+  () =>
+    import(
+      "@flanksource-ui/pages/Settings/notifications/NotificationsSilencedPage"
+    )
+);
+
+const UsersPage = dynamic(() =>
+  import("@flanksource-ui/pages/UsersPage").then((m) => m.UsersPage)
+);
+
+const ConfigDetailsChecksPage = dynamic(() =>
+  import("@flanksource-ui/pages/config/details/ConfigDetailsChecksPage").then(
+    (m) => m.ConfigDetailsChecksPage
+  )
+);
+
+const ConfigDetailsInsightsPage = dynamic(() =>
+  import("@flanksource-ui/pages/config/details/ConfigDetailsInsightsPage").then(
+    (m) => m.ConfigDetailsInsightsPage
+  )
+);
+
+const ConfigDetailsPlaybooksPage = dynamic(() =>
+  import("@flanksource-ui/pages/config/details/ConfigDetailsPlaybooks").then(
+    (m) => m.ConfigDetailsPlaybooksPage
+  )
+);
+
+const ConfigDetailsRelationshipsPage = dynamic(() =>
+  import(
+    "@flanksource-ui/pages/config/details/ConfigDetailsRelationshipsPage"
+  ).then((mod) => mod.ConfigDetailsRelationshipsPage)
+);
+
+const ConfigScrapersEditPage = dynamic(
+  () => import("@flanksource-ui/pages/config/settings/ConfigScrapersEditPage")
+);
+
+const ConfigScrapersPage = dynamic(
+  () => import("@flanksource-ui/pages/config/settings/ConfigScrapersPage")
+);
+
+const EditIntegrationPage = dynamic(
+  () => import("./components/Integrations/EditIntegrationPage")
+);
+
+const IntegrationsPage = dynamic(
+  () => import("./components/Integrations/IntegrationsPage")
+);
+
+const JobsHistorySettingsPage = dynamic(
+  () => import("./components/JobsHistory/JobsHistorySettingsPage")
+);
+
+const AgentsPage = dynamic(
+  () => import("@flanksource-ui/components/Agents/AgentPage")
+);
+
+const SchemaResourcePage = dynamic(() =>
+  import("@flanksource-ui/components/SchemaResourcePage").then(
+    (mod) => mod.SchemaResourcePage
+  )
+);
+
 const isDevelopment = process.env.NODE_ENV === "development";
 
 export type NavigationItems = {
@@ -265,8 +410,8 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
         <Route
           path=":id"
           element={withAuthorizationAccessCheck(
-            <TopologyPage />,
-            tables.database,
+            <TopologyCardPage />,
+            tables.topologies,
             "read",
             true
           )}
diff --git a/src/components/Configs/ConfigsListFilters/ConfigTypesDropdown.tsx b/src/components/Configs/ConfigsListFilters/ConfigTypesDropdown.tsx
index fb6376700..f7a3957b4 100644
--- a/src/components/Configs/ConfigsListFilters/ConfigTypesDropdown.tsx
+++ b/src/components/Configs/ConfigsListFilters/ConfigTypesDropdown.tsx
@@ -2,12 +2,25 @@ import {
   ConfigTypeItem,
   getConfigsTypes
 } from "@flanksource-ui/api/services/configs";
-import { ReactSelectDropdown } from "@flanksource-ui/components/ReactSelectDropdown";
+import {
+  GroupByOptions,
+  MultiSelectDropdown
+} from "@flanksource-ui/ui/Dropdowns/MultiSelectDropdown";
 import { useQuery } from "@tanstack/react-query";
 import { useField } from "formik";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import ConfigsTypeIcon from "../ConfigsTypeIcon";
 
+function sortOptions(a: { label: string }, b: { label: string }) {
+  if (a.label === "All") {
+    return -1;
+  }
+  if (b.label === "All") {
+    return 1;
+  }
+  return a.label?.localeCompare(b.label);
+}
+
 type ConfigTypesDropdownProps = {
   label?: string;
 };
@@ -24,7 +37,7 @@ export function ConfigTypesDropdown({
     getConfigsTypes,
     {
       select: useCallback((data: ConfigTypeItem[] | null) => {
-        return data?.map((d) => {
+        const res = data?.map((d) => {
           const label =
             d.type?.split("::").length === 1
               ? d.type
@@ -34,55 +47,41 @@ export function ConfigTypesDropdown({
                   .trim();
 
           return {
-            id: d.type,
             value: d.type,
-            description: label,
-            name: d.type,
+            label: label,
             icon: (
               <ConfigsTypeIcon
                 showPrimaryIcon={false}
                 config={{ type: d.type }}
               />
             )
-          };
+          } satisfies GroupByOptions;
         });
+        return [
+          {
+            value: "all",
+            label: "All"
+          } satisfies GroupByOptions,
+          ...(res || []).sort(sortOptions)
+        ];
       }, [])
     }
   );
 
-  function sortOptions(a: { name: string }, b: { name: string }) {
-    if (a.name === "All") {
-      return -1;
-    }
-    if (b.name === "All") {
-      return 1;
-    }
-    return a.name?.localeCompare(b.name);
-  }
-
-  const configItemsOptionsItems = useMemo(
-    () =>
-      [
-        {
-          id: "All",
-          name: "All",
-          description: "All",
-          value: "All"
-        },
-        ...(configTypeOptions || [])
-      ].sort(sortOptions),
-    [configTypeOptions]
-  );
+  console.log(field.value);
 
   return (
-    <ReactSelectDropdown
+    <MultiSelectDropdown
       isLoading={isLoading}
-      items={configItemsOptionsItems}
+      options={configTypeOptions as GroupByOptions[]}
       name="configType"
-      onChange={(value) => {
-        if (value && value !== "All") {
+      isMulti={false}
+      closeMenuOnSelect={true}
+      // @ts-ignore
+      onChange={(value: GroupByOptions) => {
+        if (value && value.value.toLowerCase() !== "all") {
           field.onChange({
-            target: { name: "configType", value: value }
+            target: { name: "configType", value: value.value }
           });
         } else {
           field.onChange({
@@ -90,13 +89,18 @@ export function ConfigTypesDropdown({
           });
         }
       }}
-      value={field.value ?? "All"}
-      className="w-auto max-w-[400px]"
-      dropDownClassNames="w-auto max-w-[400px] left-0"
-      hideControlBorder
-      prefix={
-        <div className="whitespace-nowrap text-xs text-gray-500">{label}</div>
+      value={
+        field.value
+          ? (configTypeOptions?.find(
+              (option) => option.value === field.value
+            ) ?? configTypeOptions?.find((option) => option.value === "all"))
+          : {
+              value: "all",
+              label: "All"
+            }
       }
+      className="w-auto max-w-[400px]"
+      label="Config Type"
     />
   );
 }
diff --git a/src/components/Configs/Insights/Filters/ConfigInsightsFilters.tsx b/src/components/Configs/Insights/Filters/ConfigInsightsFilters.tsx
index 9668cd8c3..737b5b98c 100644
--- a/src/components/Configs/Insights/Filters/ConfigInsightsFilters.tsx
+++ b/src/components/Configs/Insights/Filters/ConfigInsightsFilters.tsx
@@ -15,7 +15,7 @@ export function ConfigInsightsFilters({
   return (
     <FormikFilterForm
       paramsToReset={paramsToReset}
-      filterFields={["type", "severity", "analyzer", "component"]}
+      filterFields={["type", "severity", "analyzer", "component", "configType"]}
     >
       <div className="mr-4 flex flex-row gap-4">
         <div className="flex items-center">
diff --git a/src/components/JobsHistory/__tests__/JobsHistoryTable.unit.test.tsx b/src/components/JobsHistory/__tests__/JobsHistoryTable.unit.test.tsx
deleted file mode 100644
index 832f16187..000000000
--- a/src/components/JobsHistory/__tests__/JobsHistoryTable.unit.test.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { MemoryRouter } from "react-router";
-import JobsHistoryTable, { JobHistory } from "./../JobsHistoryTable";
-
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn()
-}));
-
-describe("JobsHistoryTable", () => {
-  const data: JobHistory[] = [
-    {
-      id: "1",
-      name: "JobName1",
-      status: "SUCCESS",
-      duration_millis: 123456,
-      created_at: "2022-01-01T00:00:00Z",
-      success_count: 250,
-      error_count: 0,
-      hostname: "localhost",
-      resource_id: "resource_id",
-      resource_type: "topology",
-      time_start: "2022-01-01T00:00:00Z",
-      time_end: "2022-01-01T00:02:03Z",
-      resource_name: "resource_name_1"
-    },
-    {
-      id: "2",
-      name: "JobName2",
-      status: "FAILED",
-      duration_millis: 654321,
-      created_at: "2022-01-02T00:00:00Z",
-      success_count: 300,
-      error_count: 0,
-      hostname: "localhost",
-      resource_id: "resource_id_2",
-      resource_type: "canary",
-      time_start: "2022-01-01T00:00:00Z",
-      time_end: "2022-01-01T00:02:03Z",
-      resource_name: "resource_name_2"
-    }
-  ];
-
-  it("renders the table with the correct column headers", () => {
-    render(
-      <MemoryRouter>
-        <JobsHistoryTable jobs={data} pageCount={1} />
-      </MemoryRouter>
-    );
-    expect(
-      screen.getByRole("columnheader", { name: "Resource" })
-    ).toBeInTheDocument();
-
-    expect(
-      screen.getByRole("columnheader", { name: "Timestamp" })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("columnheader", { name: "Job Name" })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("columnheader", { name: "Status" })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("columnheader", { name: "Duration" })
-    ).toBeInTheDocument();
-  });
-
-  it("renders the table with the correct data cells", () => {
-    render(
-      <MemoryRouter>
-        <JobsHistoryTable jobs={data} pageCount={1} />
-      </MemoryRouter>
-    );
-
-    expect(
-      screen.getByRole("cell", {
-        name: /Job Name 1/i
-      })
-    ).toBeInTheDocument();
-    expect(screen.getByRole("cell", { name: "2m3s" })).toBeInTheDocument();
-    expect(
-      screen.getByRole("cell", { name: /resource_name_1/i })
-    ).toBeInTheDocument();
-
-    expect(
-      screen.getByRole("cell", { name: /Job Name 2/i })
-    ).toBeInTheDocument();
-    expect(screen.getByRole("cell", { name: "10m54s" })).toBeInTheDocument();
-    expect(
-      screen.getByRole("cell", { name: /resource_name_2/i })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/components/ReactSelectDropdown/index.tsx b/src/components/ReactSelectDropdown/index.tsx
index 1693ed4bd..54d538b2d 100644
--- a/src/components/ReactSelectDropdown/index.tsx
+++ b/src/components/ReactSelectDropdown/index.tsx
@@ -10,14 +10,13 @@ import {
   useState
 } from "react";
 import { Controller } from "react-hook-form";
-
+import CreatableSelect from "react-select/creatable";
 import Select, {
   SingleValue,
   StylesConfig,
   components,
   defaultTheme
-} from "react-select";
-import CreatableSelect from "react-select/creatable";
+} from "react-windowed-select";
 import { Avatar } from "../../ui/Avatar";
 
 const { colors } = defaultTheme;
@@ -232,6 +231,7 @@ export const ReactSelectDropdown = ({
                 }}
                 options={options}
                 placeholder={placeholder}
+                // @ts-expect-error
                 styles={selectStyles}
                 tabSelectsValue={false}
                 value={valueControlled}
@@ -279,9 +279,11 @@ export const ReactSelectDropdown = ({
           hideSelectedOptions={false}
           isClearable={false}
           menuIsOpen
+          // @ts-expect-error
           onChange={onSelectChange}
           options={options}
           placeholder={placeholder}
+          // @ts-expect-error
           styles={selectStyles}
           tabSelectsValue={false}
           value={value}
diff --git a/src/ui/Dropdowns/MultiSelectDropdown.tsx b/src/ui/Dropdowns/MultiSelectDropdown.tsx
index 15354fd8f..51c2ca630 100644
--- a/src/ui/Dropdowns/MultiSelectDropdown.tsx
+++ b/src/ui/Dropdowns/MultiSelectDropdown.tsx
@@ -1,11 +1,11 @@
 import { autoUpdate, useFloating } from "@floating-ui/react";
-import { Popover } from "@headlessui/react";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/solid";
 import clsx from "clsx";
 import { isArray } from "lodash";
 import React, { ComponentProps } from "react";
 import { createPortal } from "react-dom";
-import Select, { components } from "react-select";
+import Select, { components } from "react-windowed-select";
 
 export type GroupByOptions = {
   isTag?: boolean;
@@ -16,12 +16,13 @@ export type GroupByOptions = {
 
 type ConfigGroupByDropdownProps = Omit<
   ComponentProps<typeof Select>,
-  "components" | "defaultValue"
+  "components" | "defaultValue" | "windowThreshold"
 > & {
   label?: string;
   containerClassName?: string;
   dropDownClassNames?: string;
   defaultValue?: string;
+  closeMenuOnSelect?: boolean;
 };
 
 export function MultiSelectDropdown({
@@ -34,6 +35,8 @@ export function MultiSelectDropdown({
   dropDownClassNames = "w-auto max-w-[300px]",
   value,
   defaultValue,
+  closeMenuOnSelect = false,
+  onChange = () => {},
   ...props
 }: ConfigGroupByDropdownProps) {
   const { refs, floatingStyles } = useFloating({
@@ -43,9 +46,9 @@ export function MultiSelectDropdown({
 
   return (
     <Popover className="relative">
-      {({ open }) => (
+      {({ open, close }) => (
         <>
-          <Popover.Button ref={refs.setReference}>
+          <PopoverButton ref={refs.setReference}>
             <div className={containerClassName}>
               <div
                 className={clsx(
@@ -84,7 +87,7 @@ export function MultiSelectDropdown({
                         {(value as GroupByOptions)?.icon && (
                           <div>{(value as GroupByOptions).icon}</div>
                         )}
-                        {!(value as GroupByOptions) && (
+                        {(value as GroupByOptions) && (
                           <span className="block">
                             {(value as GroupByOptions).label?.toString()}
                           </span>
@@ -102,10 +105,10 @@ export function MultiSelectDropdown({
                 </span>
               </div>
             </div>
-          </Popover.Button>
+          </PopoverButton>
 
           {createPortal(
-            <Popover.Panel
+            <PopoverPanel
               ref={refs.setFloating}
               className={clsx(
                 "absolute flex flex-col rounded-sm bg-white shadow-lg"
@@ -118,6 +121,10 @@ export function MultiSelectDropdown({
                   isMulti={isMulti}
                   options={options}
                   value={value}
+                  onChange={(value, actionMeta) => {
+                    onChange(value, actionMeta);
+                    close();
+                  }}
                   {...props}
                   placeholder={"Search..."}
                   components={{
@@ -146,12 +153,14 @@ export function MultiSelectDropdown({
                       );
                     }
                   }}
+                  windowThreshold={0.5}
                   autoFocus
                   backspaceRemovesValue={false}
                   controlShouldRenderValue={false}
                   hideSelectedOptions={false}
                   menuIsOpen
                   tabSelectsValue={false}
+                  closeMenuOnSelect={closeMenuOnSelect}
                   styles={{
                     control: (provided) => ({
                       ...provided,
@@ -177,7 +186,7 @@ export function MultiSelectDropdown({
                   }}
                 />
               </div>
-            </Popover.Panel>,
+            </PopoverPanel>,
             document.body
           )}
         </>
diff --git a/src/ui/Layout/SidebarLayout.tsx b/src/ui/Layout/SidebarLayout.tsx
index 77feb059e..de0483b69 100644
--- a/src/ui/Layout/SidebarLayout.tsx
+++ b/src/ui/Layout/SidebarLayout.tsx
@@ -364,7 +364,9 @@ export function SidebarLayout({ navigation, settingsNav, checkPath }: Props) {
         </div>
       </div>
       <div className="flex h-screen flex-1 flex-col overflow-auto bg-gray-50">
-        <Outlet />
+        <React.Suspense fallback={<FullPageSkeletonLoader />}>
+          <Outlet />
+        </React.Suspense>
       </div>
     </div>
   );
diff --git a/src/ui/MRTDataTable/MRTDataTable.tsx b/src/ui/MRTDataTable/MRTDataTable.tsx
index 221afae78..ef7b77f31 100644
--- a/src/ui/MRTDataTable/MRTDataTable.tsx
+++ b/src/ui/MRTDataTable/MRTDataTable.tsx
@@ -4,15 +4,20 @@ import {
   VisibilityState
 } from "@tanstack/react-table";
 import {
-  MantineReactTable,
   MRT_ColumnDef,
   MRT_Row,
   MRT_TableInstance,
   useMantineReactTable
 } from "mantine-react-table";
+import dynamic from "next/dynamic";
 import useReactTablePaginationState from "../DataTable/Hooks/useReactTablePaginationState";
 import useReactTableSortState from "../DataTable/Hooks/useReactTableSortState";
 
+const MantineReactTable = dynamic(
+  () => import("mantine-react-table").then((mod) => mod.MantineReactTable),
+  { ssr: false }
+);
+
 type MRTDataTableProps<T extends Record<string, any> = {}> = {
   data: T[];
   columns: MRT_ColumnDef<T>[];
@@ -143,5 +148,6 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
     renderDetailPanel
   });
 
+  // @ts-expect-error
   return <MantineReactTable table={table} />;
 }