diff --git a/.github/workflows/pull-request-build-lint-web-apps.yml b/.github/workflows/pull-request-build-lint-web-apps.yml
index 435ec2093b..d4a986155b 100644
--- a/.github/workflows/pull-request-build-lint-web-apps.yml
+++ b/.github/workflows/pull-request-build-lint-web-apps.yml
@@ -49,5 +49,8 @@ jobs:
       - name: Check Affected format
         run: pnpm turbo run check:format --affected
 
+      - name: Check Affected types
+        run: pnpm turbo run check:types --affected
+
       - name: Build Affected
         run: pnpm turbo run build --affected
diff --git a/apps/admin/.eslintignore b/apps/admin/.eslintignore
index 27e50ad7c6..289da70598 100644
--- a/apps/admin/.eslintignore
+++ b/apps/admin/.eslintignore
@@ -1,4 +1,6 @@
 .next/*
+.react-router/*
+.vite/*
 out/*
 public/*
 dist/*
diff --git a/apps/admin/.prettierignore b/apps/admin/.prettierignore
index 3cd6b08a0f..0518c78f23 100644
--- a/apps/admin/.prettierignore
+++ b/apps/admin/.prettierignore
@@ -1,4 +1,6 @@
 .next
+.react-router
+.vite
 .vercel
 .tubro
 out/
diff --git a/apps/space/.eslintignore b/apps/space/.eslintignore
index 27e50ad7c6..289da70598 100644
--- a/apps/space/.eslintignore
+++ b/apps/space/.eslintignore
@@ -1,4 +1,6 @@
 .next/*
+.react-router/*
+.vite/*
 out/*
 public/*
 dist/*
diff --git a/apps/space/.prettierignore b/apps/space/.prettierignore
index 07bf87ab57..fe4d33d398 100644
--- a/apps/space/.prettierignore
+++ b/apps/space/.prettierignore
@@ -1,4 +1,6 @@
 .next
+.react-router
+.vite
 .vercel
 .tubro
 out/
diff --git a/apps/web/app/(all)/installations/[provider]/layout.tsx b/apps/web/app/(all)/installations/[provider]/layout.tsx
deleted file mode 100644
index 862fc54727..0000000000
--- a/apps/web/app/(all)/installations/[provider]/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Outlet } from "react-router";
-import type { Route } from "./+types/layout";
-
-export default function InstallationProviderLayout() {
-  return <Outlet />;
-}
-
-export const meta: Route.MetaFunction = () => [{ title: "Installations" }];
diff --git a/apps/web/app/(all)/installations/[provider]/page.tsx b/apps/web/app/(all)/installations/[provider]/page.tsx
deleted file mode 100644
index ebb995a5d2..0000000000
--- a/apps/web/app/(all)/installations/[provider]/page.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { useSearchParams } from "next/navigation";
-// ui
-import { LogoSpinner } from "@/components/common/logo-spinner";
-// services
-import { AppInstallationService } from "@/services/app_installation.service";
-import type { Route } from "./+types/page";
-
-// services
-const appInstallationService = new AppInstallationService();
-
-export default function AppPostInstallation({ params }: Route.ComponentProps) {
-  // params
-  const { provider } = params;
-  // query params
-  const searchParams = useSearchParams();
-  const installation_id = searchParams.get("installation_id");
-  const state = searchParams.get("state");
-  const code = searchParams.get("code");
-
-  useEffect(() => {
-    if (provider === "github" && state && installation_id) {
-      appInstallationService
-        .addInstallationApp(state.toString(), provider, { installation_id })
-        .then(() => {
-          window.opener = null;
-          window.open("", "_self");
-          window.close();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    } else if (provider === "slack" && state && code) {
-      const [workspaceSlug, projectId, integrationId] = state.toString().split(",");
-
-      if (!projectId) {
-        const payload = {
-          code,
-        };
-        appInstallationService
-          .addInstallationApp(state.toString(), provider, payload)
-          .then(() => {
-            window.opener = null;
-            window.open("", "_self");
-            window.close();
-          })
-          .catch((err) => {
-            throw err?.response;
-          });
-      } else {
-        const payload = {
-          code,
-        };
-        appInstallationService
-          .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
-          .then(() => {
-            window.opener = null;
-            window.open("", "_self");
-            window.close();
-          })
-          .catch((err) => {
-            throw err?.response;
-          });
-      }
-    }
-  }, [state, installation_id, provider, code]);
-
-  return (
-    <div className="absolute left-0 top-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
-      <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
-      <LogoSpinner />
-    </div>
-  );
-}
diff --git a/apps/web/ce/components/command-palette/power-k/context-detector.ts b/apps/web/ce/components/command-palette/power-k/context-detector.ts
index acc803bdc8..e84ca20b89 100644
--- a/apps/web/ce/components/command-palette/power-k/context-detector.ts
+++ b/apps/web/ce/components/command-palette/power-k/context-detector.ts
@@ -1,4 +1,4 @@
-import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import type { Params } from "react-router";
 // local imports
 import type { TPowerKContextTypeExtended } from "./types";
 
diff --git a/apps/web/ce/components/cycles/analytics-sidebar/base.tsx b/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
index 37a0707748..9164281908 100644
--- a/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
+++ b/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
@@ -1,5 +1,5 @@
 "use client";
-import type { FC } from "react";
+
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -19,7 +19,7 @@ type ProgressChartProps = {
   projectId: string;
   cycleId: string;
 };
-export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
+export const SidebarChart = observer((props: ProgressChartProps) => {
   const { workspaceSlug, projectId, cycleId } = props;
 
   // hooks
diff --git a/apps/web/ce/store/user/permission.store.ts b/apps/web/ce/store/user/permission.store.ts
index 11ce454783..e5a27f5347 100644
--- a/apps/web/ce/store/user/permission.store.ts
+++ b/apps/web/ce/store/user/permission.store.ts
@@ -18,7 +18,7 @@ export class UserPermissionStore extends BaseUserPermissionStore implements IUse
    * @returns { EUserPermissions | undefined }
    */
   getProjectRoleByWorkspaceSlugAndProjectId = computedFn(
-    (workspaceSlug: string, projectId: string): EUserPermissions | undefined =>
+    (workspaceSlug: string, projectId?: string): EUserPermissions | undefined =>
       this.getProjectRole(workspaceSlug, projectId)
   );
 }
diff --git a/apps/web/core/components/cycles/cycle-peek-overview.tsx b/apps/web/core/components/cycles/cycle-peek-overview.tsx
index bcf447716e..817a6a283e 100644
--- a/apps/web/core/components/cycles/cycle-peek-overview.tsx
+++ b/apps/web/core/components/cycles/cycle-peek-overview.tsx
@@ -31,7 +31,7 @@ export const CyclePeekOverview: React.FC<Props> = observer((props) => {
 
   const handleClose = () => {
     const query = generateQueryParams(searchParams, ["peekCycle"]);
-    router.push(`${pathname}?${query}`, { showProgress: false });
+    router.push(`${pathname}?${query}`);
   };
 
   useEffect(() => {
diff --git a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
index efcc22583d..8b78e5790a 100644
--- a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -196,9 +196,9 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
 
     const query = generateQueryParams(searchParams, ["peekCycle"]);
     if (searchParams.has("peekCycle") && searchParams.get("peekCycle") === cycleId) {
-      router.push(`${pathname}?${query}`, { showProgress: false });
+      router.push(`${pathname}?${query}`);
     } else {
-      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`, { showProgress: false });
+      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`);
     }
   };
 
diff --git a/apps/web/core/components/cycles/list/cycles-list-item.tsx b/apps/web/core/components/cycles/list/cycles-list-item.tsx
index 6f8aec9c73..2b1f827fb9 100644
--- a/apps/web/core/components/cycles/list/cycles-list-item.tsx
+++ b/apps/web/core/components/cycles/list/cycles-list-item.tsx
@@ -59,9 +59,9 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
 
     const query = generateQueryParams(searchParams, ["peekCycle"]);
     if (searchParams.has("peekCycle") && searchParams.get("peekCycle") === cycleId) {
-      router.push(`${pathname}?${query}`, { showProgress: false });
+      router.push(`${pathname}?${query}`);
     } else {
-      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`, { showProgress: false });
+      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`);
     }
   };
 
diff --git a/apps/web/core/components/icons/attachment/audio-file-icon.tsx b/apps/web/core/components/icons/attachment/audio-file-icon.tsx
index 6e5d9c213e..67b50f3421 100644
--- a/apps/web/core/components/icons/attachment/audio-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/audio-file-icon.tsx
@@ -8,5 +8,5 @@ export type AudioIconProps = {
 };
 
 export const AudioIcon: React.FC<AudioIconProps> = ({ width, height }) => (
-  <img src={AudioFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="AudioFileIcon" />
+  <img src={AudioFileIcon} width={width} height={height} alt="AudioFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/css-file-icon.tsx b/apps/web/core/components/icons/attachment/css-file-icon.tsx
index 786bb52a78..78e07be54e 100644
--- a/apps/web/core/components/icons/attachment/css-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/css-file-icon.tsx
@@ -5,5 +5,5 @@ import CssFileIcon from "@/app/assets/attachment/css-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const CssIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={CssFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="CssFileIcon" />
+  <img src={CssFileIcon} width={width} height={height} alt="CssFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/csv-file-icon.tsx b/apps/web/core/components/icons/attachment/csv-file-icon.tsx
index d11cea5974..f050c92a28 100644
--- a/apps/web/core/components/icons/attachment/csv-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/csv-file-icon.tsx
@@ -5,5 +5,5 @@ import CSVFileIcon from "@/app/assets/attachment/csv-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const CsvIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={CSVFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="CSVFileIcon" />
+  <img src={CSVFileIcon} width={width} height={height} alt="CSVFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/default-file-icon.tsx b/apps/web/core/components/icons/attachment/default-file-icon.tsx
index b2fbd7981e..ee8c33c42f 100644
--- a/apps/web/core/components/icons/attachment/default-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/default-file-icon.tsx
@@ -5,11 +5,5 @@ import DefaultFileIcon from "@/app/assets/attachment/default-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const DefaultIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img
-    src={DefaultFileIcon}
-    width={width}
-    height={height}
-    className="h-full w-full object-contain"
-    alt="DefaultFileIcon"
-  />
+  <img src={DefaultFileIcon} width={width} height={height} alt="DefaultFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/doc-file-icon.tsx b/apps/web/core/components/icons/attachment/doc-file-icon.tsx
index fa5b646b83..f60c7097ae 100644
--- a/apps/web/core/components/icons/attachment/doc-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/doc-file-icon.tsx
@@ -5,5 +5,5 @@ import DocFileIcon from "@/app/assets/attachment/doc-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const DocIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={DocFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="DocFileIcon" />
+  <img src={DocFileIcon} width={width} height={height} alt="DocFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/figma-file-icon.tsx b/apps/web/core/components/icons/attachment/figma-file-icon.tsx
index d2b073a05d..17c1328292 100644
--- a/apps/web/core/components/icons/attachment/figma-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/figma-file-icon.tsx
@@ -5,5 +5,5 @@ import FigmaFileIcon from "@/app/assets/attachment/figma-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const FigmaIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={FigmaFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="FigmaFileIcon" />
+  <img src={FigmaFileIcon} width={width} height={height} alt="FigmaFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/html-file-icon.tsx b/apps/web/core/components/icons/attachment/html-file-icon.tsx
index e79bf97711..e2d4dd9ed0 100644
--- a/apps/web/core/components/icons/attachment/html-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/html-file-icon.tsx
@@ -5,5 +5,5 @@ import HtmlFileIcon from "@/app/assets/attachment/html-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const HtmlIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={HtmlFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="HtmlFileIcon" />
+  <img src={HtmlFileIcon} width={width} height={height} alt="HtmlFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/img-file-icon.tsx b/apps/web/core/components/icons/attachment/img-file-icon.tsx
index 730f0aa2dc..e70399584c 100644
--- a/apps/web/core/components/icons/attachment/img-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/img-file-icon.tsx
@@ -5,5 +5,5 @@ import ImgFileIcon from "@/app/assets/attachment/img-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const ImgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={ImgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ImgFileIcon" />
+  <img src={ImgFileIcon} width={width} height={height} alt="ImgFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/jpg-file-icon.tsx b/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
index ee7cfff0c8..e3815612a9 100644
--- a/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
@@ -5,5 +5,5 @@ import JpgFileIcon from "@/app/assets/attachment/jpg-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const JpgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={JpgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JpgFileIcon" />
+  <img src={JpgFileIcon} width={width} height={height} alt="JpgFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/js-file-icon.tsx b/apps/web/core/components/icons/attachment/js-file-icon.tsx
index e45b79b441..7104579a01 100644
--- a/apps/web/core/components/icons/attachment/js-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/js-file-icon.tsx
@@ -5,5 +5,5 @@ import JsFileIcon from "@/app/assets/attachment/js-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const JavaScriptIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" />
+  <img src={JsFileIcon} width={width} height={height} alt="JsFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/pdf-file-icon.tsx b/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
index 1d5baa6e16..c21b987da2 100644
--- a/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
@@ -5,5 +5,5 @@ import PDFFileIcon from "@/app/assets/attachment/pdf-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const PdfIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={PDFFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PDFFileIcon" />
+  <img src={PDFFileIcon} width={width} height={height} alt="PDFFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/png-file-icon.tsx b/apps/web/core/components/icons/attachment/png-file-icon.tsx
index f2a6366d6f..621cabf1e2 100644
--- a/apps/web/core/components/icons/attachment/png-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/png-file-icon.tsx
@@ -5,5 +5,5 @@ import PngFileIcon from "@/app/assets/attachment/png-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const PngIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={PngFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PngFileIcon" />
+  <img src={PngFileIcon} width={width} height={height} alt="PngFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/rar-file-icon.tsx b/apps/web/core/components/icons/attachment/rar-file-icon.tsx
index 02fdc57179..611758c74a 100644
--- a/apps/web/core/components/icons/attachment/rar-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/rar-file-icon.tsx
@@ -5,5 +5,5 @@ import RarFileIcon from "@/app/assets/attachment/rar-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const RarIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={RarFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="RarFileIcon" />
+  <img src={RarFileIcon} width={width} height={height} alt="RarFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/sheet-file-icon.tsx b/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
index 17dc8cd1c1..3c86a47219 100644
--- a/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
@@ -5,5 +5,5 @@ import SheetFileIcon from "@/app/assets/attachment/excel-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const SheetIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={SheetFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SheetFileIcon" />
+  <img src={SheetFileIcon} width={width} height={height} alt="SheetFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/svg-file-icon.tsx b/apps/web/core/components/icons/attachment/svg-file-icon.tsx
index 32bef67cab..8f610b8ff3 100644
--- a/apps/web/core/components/icons/attachment/svg-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/svg-file-icon.tsx
@@ -5,5 +5,5 @@ import SvgFileIcon from "@/app/assets/attachment/svg-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const SvgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={SvgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SvgFileIcon" />
+  <img src={SvgFileIcon} width={width} height={height} alt="SvgFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/txt-file-icon.tsx b/apps/web/core/components/icons/attachment/txt-file-icon.tsx
index 54d792d9b7..687ad54e05 100644
--- a/apps/web/core/components/icons/attachment/txt-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/txt-file-icon.tsx
@@ -5,5 +5,5 @@ import TxtFileIcon from "@/app/assets/attachment/txt-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const TxtIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={TxtFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="TxtFileIcon" />
+  <img src={TxtFileIcon} width={width} height={height} alt="TxtFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/video-file-icon.tsx b/apps/web/core/components/icons/attachment/video-file-icon.tsx
index b9a77026aa..892bcac54a 100644
--- a/apps/web/core/components/icons/attachment/video-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/video-file-icon.tsx
@@ -5,5 +5,5 @@ import VideoFileIcon from "@/app/assets/attachment/video-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const VideoIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={VideoFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="VideoFileIcon" />
+  <img src={VideoFileIcon} width={width} height={height} alt="VideoFileIcon" />
 );
diff --git a/apps/web/core/components/icons/attachment/zip-file-icon.tsx b/apps/web/core/components/icons/attachment/zip-file-icon.tsx
index e2c847647d..5830d719e8 100644
--- a/apps/web/core/components/icons/attachment/zip-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/zip-file-icon.tsx
@@ -5,5 +5,5 @@ import ZipFileIcon from "@/app/assets/attachment/zip-icon.png?url";
 import type { ImageIconPros } from "../types";
 
 export const ZipIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={ZipFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ZipFileIcon" />
+  <img src={ZipFileIcon} width={width} height={height} alt="ZipFileIcon" />
 );
diff --git a/apps/web/core/components/power-k/core/context-detector.ts b/apps/web/core/components/power-k/core/context-detector.ts
index b96d607b4a..929b62c635 100644
--- a/apps/web/core/components/power-k/core/context-detector.ts
+++ b/apps/web/core/components/power-k/core/context-detector.ts
@@ -1,4 +1,4 @@
-import type { Params } from "next/dist/shared/lib/router/utils/route-matcher";
+import type { Params } from "react-router";
 // plane web imports
 import { detectExtendedContextFromURL } from "@/plane-web/components/command-palette/power-k/context-detector";
 // local imports
diff --git a/apps/web/core/components/power-k/core/types.ts b/apps/web/core/components/power-k/core/types.ts
index 6c1125eb0c..0ced81e28f 100644
--- a/apps/web/core/components/power-k/core/types.ts
+++ b/apps/web/core/components/power-k/core/types.ts
@@ -1,4 +1,4 @@
-import type { AppRouterProgressInstance } from "@bprogress/next";
+import type { useRouter } from "next/navigation";
 // plane web imports
 import type {
   TPowerKContextTypeExtended,
@@ -19,7 +19,7 @@ export type TPowerKContext = {
   shouldShowContextBasedActions: boolean;
   setShouldShowContextBasedActions: (shouldShowContextBasedActions: boolean) => void;
   // Router for navigation
-  router: AppRouterProgressInstance;
+  router: ReturnType<typeof useRouter>;
   // UI control
   closePalette: () => void;
   setActiveCommand: (command: TPowerKCommandConfig | null) => void;
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index 6234b89c4f..e01fc65937 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -119,7 +119,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "settings",
-      action: () => router.push(`/${workspaceSlug}/settings/projects/${project.id}`, { showProgress: false }),
+      action: () => router.push(`/${workspaceSlug}/settings/projects/${project.id}`),
       title: "Settings",
       icon: Settings,
       shouldRender: !isArchived && (hasAdminRole || hasMemberRole),
diff --git a/apps/web/core/layouts/auth-layout/project-wrapper.tsx b/apps/web/core/layouts/auth-layout/project-wrapper.tsx
index ce166a6a59..3ed74d0bd0 100644
--- a/apps/web/core/layouts/auth-layout/project-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/project-wrapper.tsx
@@ -64,19 +64,15 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   const { getProjectEstimates } = useProjectEstimates();
 
   // derived values
-  const projectExists = projectId ? getProjectById(projectId.toString()) : null;
+  const projectExists = projectId ? getProjectById(projectId) : null;
   const projectMemberInfo = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
   const hasPermissionToCurrentProject = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     EUserPermissionsLevel.PROJECT,
-    workspaceSlug.toString(),
-    projectId?.toString()
-  );
-  const isWorkspaceAdmin = allowPermissions(
-    [EUserPermissions.ADMIN],
-    EUserPermissionsLevel.WORKSPACE,
-    workspaceSlug.toString()
+    workspaceSlug,
+    projectId
   );
+  const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE, workspaceSlug);
 
   // Initialize module timeline chart
   useEffect(() => {
@@ -86,60 +82,60 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
 
   // fetching project details
   useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(workspaceSlug.toString(), projectId.toString()) : null,
-    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? PROJECT_DETAILS(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug, projectId) : null
   );
 
   // fetching user project member information
   useSWR(
-    workspaceSlug && projectId ? PROJECT_ME_INFORMATION(workspaceSlug.toString(), projectId.toString()) : null,
-    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? PROJECT_ME_INFORMATION(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug, projectId) : null
   );
   // fetching project labels
   useSWR(
-    workspaceSlug && projectId ? PROJECT_LABELS(workspaceSlug.toString(), projectId.toString()) : null,
-    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_LABELS(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project members
   useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug.toString(), projectId.toString()) : null,
-    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project states
   useSWR(
-    workspaceSlug && projectId ? PROJECT_STATES(workspaceSlug.toString(), projectId.toString()) : null,
-    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_STATES(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project estimates
   useSWR(
-    workspaceSlug && projectId ? PROJECT_ESTIMATES(workspaceSlug.toString(), projectId.toString()) : null,
-    workspaceSlug && projectId ? () => getProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_ESTIMATES(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => getProjectEstimates(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project cycles
   useSWR(
-    workspaceSlug && projectId ? PROJECT_ALL_CYCLES(workspaceSlug.toString(), projectId.toString()) : null,
-    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_ALL_CYCLES(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project modules
   useSWR(
-    workspaceSlug && projectId ? PROJECT_MODULES(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_MODULES(workspaceSlug, projectId) : null,
     workspaceSlug && projectId
       ? async () => {
-          await fetchModulesSlim(workspaceSlug.toString(), projectId.toString());
-          await fetchModules(workspaceSlug.toString(), projectId.toString());
+          await fetchModulesSlim(workspaceSlug, projectId);
+          await fetchModules(workspaceSlug, projectId);
         }
       : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project views
   useSWR(
-    workspaceSlug && projectId ? PROJECT_VIEWS(workspaceSlug.toString(), projectId.toString()) : null,
-    workspaceSlug && projectId ? () => fetchViews(workspaceSlug.toString(), projectId.toString()) : null,
+    workspaceSlug && projectId ? PROJECT_VIEWS(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => fetchViews(workspaceSlug, projectId) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
diff --git a/apps/web/core/store/user/base-permissions.store.ts b/apps/web/core/store/user/base-permissions.store.ts
index 817574b937..0d9e28612d 100644
--- a/apps/web/core/store/user/base-permissions.store.ts
+++ b/apps/web/core/store/user/base-permissions.store.ts
@@ -112,7 +112,7 @@ export abstract class BaseUserPermissionStore implements IBaseUserPermissionStor
    * @param { string } projectId
    * @returns { EUserPermissions | undefined }
    */
-  protected getProjectRole = computedFn((workspaceSlug: string, projectId: string): EUserPermissions | undefined => {
+  protected getProjectRole = computedFn((workspaceSlug: string, projectId?: string): EUserPermissions | undefined => {
     if (!workspaceSlug || !projectId) return undefined;
     const projectRole = this.workspaceProjectsPermissions?.[workspaceSlug]?.[projectId];
     if (!projectRole) return undefined;
diff --git a/packages/propel/src/calendar/calendar.stories.tsx b/packages/propel/src/calendar/calendar.stories.tsx
index 6f72d3eff3..2a70fbfb6d 100644
--- a/packages/propel/src/calendar/calendar.stories.tsx
+++ b/packages/propel/src/calendar/calendar.stories.tsx
@@ -184,10 +184,10 @@ export const TwoMonths: Story = {
 };
 
 export const Uncontrolled: Story = {
-  render(args) {
+  render() {
     return (
       <div className="p-4">
-        <Calendar {...args} mode="single" defaultMonth={new Date(2024, 0)} className="rounded-md border" />
+        <Calendar mode="single" defaultMonth={new Date(2024, 0)} showOutsideDays className="rounded-md border" />
       </div>
     );
   },
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
index dff8076751..87e4b23e1d 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
@@ -17,6 +17,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Default",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -43,6 +49,12 @@ export const Default: Story = {
 };
 
 export const OpenToEmojiTab: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Emoji Tab",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -66,6 +78,12 @@ export const OpenToEmojiTab: Story = {
 };
 
 export const OpenToIconTab: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Icon Tab",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -94,6 +112,12 @@ export const OpenToIconTab: Story = {
 };
 
 export const LucideIcons: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Lucide Icons",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -121,6 +145,12 @@ export const LucideIcons: Story = {
 };
 
 export const MaterialIcons: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Material Icons",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -148,6 +178,12 @@ export const MaterialIcons: Story = {
 };
 
 export const CloseOnSelectDisabled: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Close On Select Disabled",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValues, setSelectedValues] = useState<TChangeHandlerProps[]>([]);
@@ -192,6 +228,12 @@ export const CloseOnSelectDisabled: Story = {
 };
 
 export const CustomSearchPlaceholder: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Custom Search",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -214,6 +256,12 @@ export const CustomSearchPlaceholder: Story = {
 };
 
 export const SearchDisabled: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Search Disabled",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -236,6 +284,12 @@ export const SearchDisabled: Story = {
 };
 
 export const CustomIconColor: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Custom Icon Color",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
@@ -262,6 +316,12 @@ export const CustomIconColor: Story = {
 };
 
 export const DifferentPlacements: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Different Placements",
+  },
   render() {
     const [isOpen1, setIsOpen1] = useState(false);
     const [isOpen2, setIsOpen2] = useState(false);
@@ -316,6 +376,12 @@ export const DifferentPlacements: Story = {
 };
 
 export const InFormContext: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "In Form Context",
+  },
   render() {
     const [isOpen, setIsOpen] = useState(false);
     const [formData, setFormData] = useState({
diff --git a/packages/propel/src/spinners/circular-bar-spinner.tsx b/packages/propel/src/spinners/circular-bar-spinner.tsx
index 3be8af43aa..fb773397a8 100644
--- a/packages/propel/src/spinners/circular-bar-spinner.tsx
+++ b/packages/propel/src/spinners/circular-bar-spinner.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
+export interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
   height?: string;
   width?: string;
   className?: string | undefined;
diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx
index 98db1b6bd6..efc2f185fc 100644
--- a/packages/ui/src/sortable/draggable.tsx
+++ b/packages/ui/src/sortable/draggable.tsx
@@ -1,12 +1,6 @@
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
-import {
-  draggable,
-  dropTargetForElements,
-} from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
-import {
-  attachClosestEdge,
-  extractClosestEdge,
-} from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { isEqual } from "lodash-es";
 import React, { useEffect, useRef, useState } from "react";
 import { DropIndicator } from "../drop-indicator";
diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx
index 36391a18b3..29198ed8b5 100644
--- a/packages/ui/src/sortable/sortable.tsx
+++ b/packages/ui/src/sortable/sortable.tsx
@@ -1,4 +1,4 @@
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import React, { Fragment, useEffect, useMemo } from "react";
 import { Draggable } from "./draggable";