diff --git a/web/components/issue-layouts/layout-selection.tsx b/web/components/issue-layouts/layout-selection.tsx
index d1499ed7e..f5f3d77fd 100644
--- a/web/components/issue-layouts/layout-selection.tsx
+++ b/web/components/issue-layouts/layout-selection.tsx
@@ -36,7 +36,7 @@ export const LayoutSelection = observer(() => {
       icon: Columns,
     },
     {
-      key: "gantt",
+      key: "gantt_chart",
       title: "Gantt",
       icon: GanttChart,
     },
diff --git a/web/components/issue-layouts/root.tsx b/web/components/issue-layouts/root.tsx
index 23752fe49..660f398f2 100644
--- a/web/components/issue-layouts/root.tsx
+++ b/web/components/issue-layouts/root.tsx
@@ -1,14 +1,36 @@
 import React from "react";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { RootStore } from "store/root";
-import { TIssueLayouts } from "store/issue-views/issue_filters";
-import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { IssueKanBanViewRoot } from "./kanban";
+import { LayoutSelection } from "./layout-selection";
+import { IssueDropdown } from "./helpers/dropdown";
+import { FilterSelection } from "./filters";
+import { DisplayFiltersSelection } from "./display-filters";
 
-export const IssuesRoot = observer(() => {
-  const store: RootStore = useMobxStore();
-  const { issueFilters: issueFilterStore, issueView: issueStore } = store;
+export const IssuesRoot = () => {
+  console.log("issue root");
 
-  return <div>issue root</div>;
-});
+  return (
+    <div className="w-full h-full relative flex flex-col overflow-hidden">
+      <div className="flex-shrink-0 h-[60px] border-b border-gray-200">
+        <div className="w-full h-full p-2 px-5 relative flex justify-between items-center gap-2">
+          <div>
+            <div>Filter Header</div>
+          </div>
+          <div className="relative flex items-center gap-2">
+            <IssueDropdown title={"Filters"}>
+              <FilterSelection />
+            </IssueDropdown>
+            <IssueDropdown title={"View"}>
+              <DisplayFiltersSelection />
+            </IssueDropdown>
+            <LayoutSelection />
+          </div>
+        </div>
+      </div>
+      <div className="flex-shrink-0 border-b border-gray-200">Hello</div>
+      <div className="w-full h-full relative overflow-hidden">
+        <IssueKanBanViewRoot />
+      </div>
+    </div>
+  );
+};
diff --git a/web/pages/kanban.tsx b/web/pages/kanban.tsx
deleted file mode 100644
index 1a7d5b073..000000000
--- a/web/pages/kanban.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-// components
-import { IssueKanBanViewRoot } from "components/issue-layouts/kanban";
-import { LayoutSelection } from "components/issue-layouts/layout-selection";
-// issue dropdowns
-import { IssueDropdown } from "components/issue-layouts/helpers/dropdown";
-// filter components
-import { FilterSelection } from "components/issue-layouts/filters";
-import { DisplayFiltersSelection } from "components/issue-layouts/display-filters";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const KanBanViewRoot = () => {
-  const workspaceSlug: string = "plane-demo";
-  const projectSlug: string = "08d59d96-9dfb-40e5-aa30-ecc66319450f";
-  const moduleSlug: string = "05613afc-29ea-4fd8-a025-a3cdfed209d1";
-  const cycleSlug: string = "1f66a767-00d1-422c-8f8f-6925282b7249";
-  const viewSlug: string = "64e6ecca-80ca-4f7c-8476-d650fca9d5b9";
-
-  const store: RootStore = useMobxStore();
-  const { issueFilters: issueFilterStore, issueView: issueViewStore } = store;
-
-  React.useEffect(() => {
-    const init = async () => {
-      console.log("started--->");
-      // my issues under a workspace
-      // await issueViewStore.getMyIssuesAsync(workspaceSlug);
-
-      // project issues under and workspace and project
-      await issueViewStore.getProjectIssuesAsync(workspaceSlug, projectSlug);
-
-      // module issues under and workspace and project
-      // await issueViewStore.getIssuesForModulesAsync(workspaceSlug, projectSlug, moduleSlug);
-
-      // cycle issues under and workspace and project
-      // await issueViewStore.getIssuesForCyclesAsync(workspaceSlug, projectSlug, cycleSlug);
-
-      // cycle issues under and workspace and project
-      // await issueViewStore.getIssuesForViewsAsync(workspaceSlug, projectSlug, viewSlug);
-      console.log("ended--->");
-    };
-
-    init();
-  }, []);
-
-  return (
-    <div className="w-screen min-h-[600px] h-screen">
-      <div className="w-full h-full relative flex flex-col overflow-hidden">
-        <div className="flex-shrink-0 h-[60px] border-b border-gray-200">
-          <div className="w-full h-full p-2 px-5 relative flex justify-between items-center gap-2">
-            <div>
-              <div>Filter Header</div>
-            </div>
-            <div className="relative flex items-center gap-2">
-              <IssueDropdown title={"Filters"}>
-                <FilterSelection />
-              </IssueDropdown>
-              <IssueDropdown title={"View"}>
-                <DisplayFiltersSelection />
-              </IssueDropdown>
-              <LayoutSelection />
-            </div>
-          </div>
-        </div>
-        <div className="flex-shrink-0 border-b border-gray-200">Hello</div>
-        <div className="w-full h-full relative overflow-hidden">
-          <IssueKanBanViewRoot />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default KanBanViewRoot;
diff --git a/web/pages/m-store/[workspace_slug]/[project_slug]/cycles/[cycle_slug].tsx b/web/pages/m-store/[workspace_slug]/[project_slug]/cycles/[cycle_slug].tsx
new file mode 100644
index 000000000..52676e376
--- /dev/null
+++ b/web/pages/m-store/[workspace_slug]/[project_slug]/cycles/[cycle_slug].tsx
@@ -0,0 +1,36 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// components
+import { IssuesRoot } from "components/issue-layouts/root";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const KanBanViewRoot = () => {
+  const router = useRouter();
+  const { workspace_slug, project_slug, cycle_slug } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+    cycle_slug: string;
+  };
+
+  const store: RootStore = useMobxStore();
+  const { issueView: issueViewStore } = store;
+
+  React.useEffect(() => {
+    console.log("request init--->");
+    const init = async () =>
+      await issueViewStore.getIssuesForCyclesAsync(workspace_slug, project_slug, cycle_slug);
+    if (workspace_slug && project_slug && cycle_slug) init();
+    console.log("request completed--->");
+  }, [workspace_slug, project_slug, cycle_slug, issueViewStore]);
+
+  return (
+    <div className="w-screen min-h-[600px] h-screen">
+      <IssuesRoot />
+    </div>
+  );
+};
+
+export default KanBanViewRoot;
diff --git a/web/pages/m-store/[workspace_slug]/[project_slug]/issues.tsx b/web/pages/m-store/[workspace_slug]/[project_slug]/issues.tsx
new file mode 100644
index 000000000..c6319bcaa
--- /dev/null
+++ b/web/pages/m-store/[workspace_slug]/[project_slug]/issues.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// components
+import { IssuesRoot } from "components/issue-layouts/root";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const KanBanViewRoot = () => {
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+  };
+
+  const store: RootStore = useMobxStore();
+  const { issueView: issueViewStore } = store;
+
+  React.useEffect(() => {
+    console.log("request init--->");
+    const init = async () =>
+      await issueViewStore.getProjectIssuesAsync(workspace_slug, project_slug);
+    if (workspace_slug && project_slug) init();
+    console.log("request completed--->");
+  }, [workspace_slug, project_slug, issueViewStore]);
+
+  return (
+    <div className="w-screen min-h-[600px] h-screen">
+      <IssuesRoot />
+    </div>
+  );
+};
+
+export default KanBanViewRoot;
diff --git a/web/pages/m-store/[workspace_slug]/[project_slug]/modules/[module_slug].tsx b/web/pages/m-store/[workspace_slug]/[project_slug]/modules/[module_slug].tsx
new file mode 100644
index 000000000..c5aad04fa
--- /dev/null
+++ b/web/pages/m-store/[workspace_slug]/[project_slug]/modules/[module_slug].tsx
@@ -0,0 +1,36 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// components
+import { IssuesRoot } from "components/issue-layouts/root";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const KanBanViewRoot = () => {
+  const router = useRouter();
+  const { workspace_slug, project_slug, module_slug } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+    module_slug: string;
+  };
+
+  const store: RootStore = useMobxStore();
+  const { issueView: issueViewStore } = store;
+
+  React.useEffect(() => {
+    console.log("request init--->");
+    const init = async () =>
+      await issueViewStore.getIssuesForModulesAsync(workspace_slug, project_slug, module_slug);
+    if (workspace_slug && project_slug && module_slug) init();
+    console.log("request completed--->");
+  }, [workspace_slug, project_slug, module_slug, issueViewStore]);
+
+  return (
+    <div className="w-screen min-h-[600px] h-screen">
+      <IssuesRoot />
+    </div>
+  );
+};
+
+export default KanBanViewRoot;
diff --git a/web/pages/m-store/[workspace_slug]/[project_slug]/views/[view_slug].tsx b/web/pages/m-store/[workspace_slug]/[project_slug]/views/[view_slug].tsx
new file mode 100644
index 000000000..8da9d22c4
--- /dev/null
+++ b/web/pages/m-store/[workspace_slug]/[project_slug]/views/[view_slug].tsx
@@ -0,0 +1,36 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// components
+import { IssuesRoot } from "components/issue-layouts/root";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const KanBanViewRoot = () => {
+  const router = useRouter();
+  const { workspace_slug, project_slug, view_slug } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+    view_slug: string;
+  };
+
+  const store: RootStore = useMobxStore();
+  const { issueView: issueViewStore } = store;
+
+  React.useEffect(() => {
+    console.log("request init--->");
+    const init = async () =>
+      await issueViewStore.getIssuesForViewsAsync(workspace_slug, project_slug, view_slug);
+    if (workspace_slug && project_slug && view_slug) init();
+    console.log("request completed--->");
+  }, [workspace_slug, project_slug, view_slug, issueViewStore]);
+
+  return (
+    <div className="w-screen min-h-[600px] h-screen">
+      <IssuesRoot />
+    </div>
+  );
+};
+
+export default KanBanViewRoot;
diff --git a/web/pages/m-store/[workspace_slug]/my-issues.tsx b/web/pages/m-store/[workspace_slug]/my-issues.tsx
new file mode 100644
index 000000000..766381fd2
--- /dev/null
+++ b/web/pages/m-store/[workspace_slug]/my-issues.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// components
+import { IssuesRoot } from "components/issue-layouts/root";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const KanBanViewRoot = () => {
+  const router = useRouter();
+  const { workspace_slug } = router.query as { workspace_slug: string };
+
+  const store: RootStore = useMobxStore();
+  const { issueView: issueViewStore } = store;
+
+  React.useEffect(() => {
+    console.log("request init--->");
+    const init = async () => await issueViewStore.getMyIssuesAsync(workspace_slug);
+    if (workspace_slug) init();
+    console.log("request completed--->");
+  }, [workspace_slug, issueViewStore]);
+
+  return (
+    <div className="w-screen min-h-[600px] h-screen">
+      <IssuesRoot />
+    </div>
+  );
+};
+
+export default KanBanViewRoot;
diff --git a/web/store/issue-views/Issues.ts b/web/store/issue-views/Issues.ts
index 74803dc8a..f3b021f00 100644
--- a/web/store/issue-views/Issues.ts
+++ b/web/store/issue-views/Issues.ts
@@ -18,7 +18,7 @@ export interface IIssuesLayout {
   kanban: IIssues;
   calendar: IIssues;
   spreadsheet: IIssues;
-  gantt: IIssues;
+  gantt_chart: IIssues;
 }
 
 export interface IIssueState {
diff --git a/web/store/issue-views/issue_data.ts b/web/store/issue-views/issue_data.ts
index eff9a13db..f4de061e7 100644
--- a/web/store/issue-views/issue_data.ts
+++ b/web/store/issue-views/issue_data.ts
@@ -108,21 +108,21 @@ export const issueFilterVisibilityData: any = {
     },
   },
   others: {
-    layout: ["list", "kanban", "calendar", "spreadsheet", "gantt"],
+    layout: ["list", "kanban", "calendar", "spreadsheet", "gantt_chart"],
     filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "due_date"],
     display_properties: {
       list: true,
       kanban: true,
       calendar: true,
       spreadsheet: true,
-      gantt: false,
+      gantt_chart: false,
     },
     display_filters: {
       list: ["group_by", "order_by", "issue_type", "sub_issue", "show_empty_groups"],
       kanban: ["group_by", "order_by", "issue_type", "sub_issue", "show_empty_groups"],
       calendar: ["issue_type"],
       spreadsheet: ["issue_type"],
-      gantt: ["order_by", "issue_type", "sub_issue"],
+      gantt_chart: ["order_by", "issue_type", "sub_issue"],
     },
     extra_options: {
       list: {
@@ -141,7 +141,7 @@ export const issueFilterVisibilityData: any = {
         access: false,
         values: [],
       },
-      gantt: {
+      gantt_chart: {
         access: true,
         values: ["sub_issue"],
       },
diff --git a/web/store/issue-views/issue_filters.ts b/web/store/issue-views/issue_filters.ts
index 2b26a52f4..5dc063711 100644
--- a/web/store/issue-views/issue_filters.ts
+++ b/web/store/issue-views/issue_filters.ts
@@ -23,7 +23,7 @@ import {
 } from "./issue_data";
 
 export type TIssueViews = "my_issues" | "issues" | "modules" | "views" | "cycles";
-export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
+export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
 
 export interface IIssueFilter {
   priority: string[] | undefined;
@@ -758,7 +758,7 @@ class IssueFilterStore implements IIssueFilterStore {
         "type",
         "sub_issues",
       ];
-    if (_layout === "gantt")
+    if (_layout === "gantt_chart")
       filteredParams = [
         "priority",
         "state",