diff --git a/web/components/analytics/custom-analytics/custom-analytics.tsx b/web/components/analytics/custom-analytics/custom-analytics.tsx
index d04733b56..3152596c8 100644
--- a/web/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/web/components/analytics/custom-analytics/custom-analytics.tsx
@@ -1,49 +1,51 @@
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Control, UseFormSetValue } from "react-hook-form";
+import useSWR, { mutate } from "swr";
+import { Control, UseFormSetValue, useForm } from "react-hook-form";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
-import {
-  AnalyticsGraph,
-  AnalyticsSelectBar,
-  AnalyticsSidebar,
-  AnalyticsTable,
-} from "components/analytics";
+import { AnalyticsGraph, AnalyticsSelectBar, AnalyticsSidebar, AnalyticsTable } from "components/analytics";
 // ui
 import { Loader, PrimaryButton } from "components/ui";
 // helpers
 import { convertResponseToBarGraphData } from "helpers/analytics.helper";
 // types
-import { IAnalyticsParams, IAnalyticsResponse, ICurrentUserResponse } from "types";
+import { IAnalyticsParams, IAnalyticsResponse, IUser } from "types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
+// services
+import analyticsService from "services/analytics.service";
 
 type Props = {
-  analytics: IAnalyticsResponse | undefined;
-  analyticsError: any;
-  params: IAnalyticsParams;
-  control: Control<IAnalyticsParams, any>;
-  setValue: UseFormSetValue<IAnalyticsParams>;
   fullScreen: boolean;
-  user: ICurrentUserResponse | undefined;
+  user?: IUser | undefined;
 };
 
-export const CustomAnalytics: React.FC<Props> = ({
-  analytics,
-  analyticsError,
-  params,
-  control,
-  setValue,
-  fullScreen,
-  user,
-}) => {
+const defaultValues: IAnalyticsParams = {
+  x_axis: "priority",
+  y_axis: "issue_count",
+  segment: null,
+  project: null,
+};
+
+export const CustomAnalytics: React.FC<Props> = ({ fullScreen, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
+
+  const params: IAnalyticsParams = {
+    x_axis: watch("x_axis"),
+    y_axis: watch("y_axis"),
+    segment: watch("segment"),
+    project: watch("project"),
+  };
+
+  const { data: analytics, error: analyticsError } = useSWR(
+    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
+  );
+
   const isProjectLevel = projectId ? true : false;
 
   const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
@@ -52,11 +54,7 @@ export const CustomAnalytics: React.FC<Props> = ({
   const { projects } = useProjects();
 
   return (
-    <div
-      className={`overflow-hidden flex flex-col-reverse ${
-        fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""
-      }`}
-    >
+    <div className={`overflow-hidden flex flex-col-reverse ${fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""}`}>
       <div className="col-span-3 flex flex-col h-full overflow-hidden">
         <AnalyticsSelectBar
           control={control}
@@ -77,12 +75,7 @@ export const CustomAnalytics: React.FC<Props> = ({
                   yAxisKey={yAxisKey}
                   fullScreen={fullScreen}
                 />
-                <AnalyticsTable
-                  analytics={analytics}
-                  barGraphData={barGraphData}
-                  params={params}
-                  yAxisKey={yAxisKey}
-                />
+                <AnalyticsTable analytics={analytics} barGraphData={barGraphData} params={params} yAxisKey={yAxisKey} />
               </div>
             ) : (
               <div className="grid h-full place-items-center p-5">
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
new file mode 100644
index 000000000..34f122b52
--- /dev/null
+++ b/web/components/headers/workspace-analytics.tsx
@@ -0,0 +1,33 @@
+import { useRouter } from "next/router";
+import { ArrowLeft } from "lucide-react";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+
+export const WorkspaceAnalyticsHeader = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      <div
+        className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      >
+        <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+          <div className="block md:hidden">
+            <button
+              type="button"
+              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+              onClick={() => router.back()}
+            >
+              <ArrowLeft fontSize={14} strokeWidth={2} />
+            </button>
+          </div>
+          <div>
+            <Breadcrumbs>
+              <BreadcrumbItem title="Workspace Analytics" />
+            </Breadcrumbs>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/layouts/app-layout/header.tsx b/web/layouts/app-layout/header.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/web/layouts/app-layout/index.ts b/web/layouts/app-layout/index.ts
index 8a235ad00..c4bfd4db3 100644
--- a/web/layouts/app-layout/index.ts
+++ b/web/layouts/app-layout/index.ts
@@ -1,3 +1,2 @@
 export * from "./layout";
 export * from "./sidebar";
-export * from "./header";
diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
index e088e4106..c3035d796 100644
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -5,10 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-import useProjects from "hooks/use-projects";
+
 // headless ui
 import { Tab } from "@headlessui/react";
 // services
@@ -29,36 +26,25 @@ import emptyAnalytics from "public/empty-state/analytics.svg";
 import { IAnalyticsParams } from "types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
-
-const defaultValues: IAnalyticsParams = {
-  x_axis: "priority",
-  y_axis: "issue_count",
-  segment: null,
-  project: null,
-};
+import { AppLayout } from "layouts/app-layout";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+import { WorkspaceAnalyticsHeader } from "components/headers/workspace-analytics";
 
 const tabsList = ["Scope and Demand", "Custom Analytics"];
 
-const Analytics = () => {
+const AnalyticsPage = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  // store
+  const { workspace: workspaceStore, project: projectStore, user: userStore } = useMobxStore();
 
-  const { user } = useUserAuth();
-  const { projects } = useProjects();
+  const user = userStore.currentUser;
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug?.toString()] : null;
 
-  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
-
-  const params: IAnalyticsParams = {
-    x_axis: watch("x_axis"),
-    y_axis: watch("y_axis"),
-    segment: watch("segment"),
-    project: watch("project"),
-  };
-
-  const { data: analytics, error: analyticsError } = useSWR(
-    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
-  );
+  // const { user } = useUserAuth();
+  // const { projects } = useProjects();
 
   const trackAnalyticsEvent = (tab: string) => {
     const eventPayload = {
@@ -83,70 +69,123 @@ const Analytics = () => {
   }, [user, workspaceSlug]);
 
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Workspace Analytics" />
-        </Breadcrumbs>
-      }
-    >
-      {projects ? (
-        projects.length > 0 ? (
-          <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-            <Tab.Group as={Fragment}>
-              <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
-                {tabsList.map((tab) => (
-                  <Tab
-                    key={tab}
-                    className={({ selected }) =>
-                      `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
-                        selected ? "bg-custom-background-80" : ""
-                      }`
-                    }
-                    onClick={() => trackAnalyticsEvent(tab)}
-                  >
-                    {tab}
-                  </Tab>
-                ))}
-              </Tab.List>
-              <Tab.Panels as={Fragment}>
-                <Tab.Panel as={Fragment}>
-                  <ScopeAndDemand fullScreen />
-                </Tab.Panel>
-                <Tab.Panel as={Fragment}>
-                  <CustomAnalytics
-                    analytics={analytics}
-                    analyticsError={analyticsError}
-                    params={params}
-                    control={control}
-                    setValue={setValue}
-                    user={user}
-                    fullScreen
-                  />
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
-          </div>
+    // <WorkspaceAuthorizationLayout
+    //   breadcrumbs={
+    //     <Breadcrumbs>
+    //       <BreadcrumbItem title="Workspace Analytics" />
+    //     </Breadcrumbs>
+    //   }
+    // >
+    //   {projects ? (
+    //     projects.length > 0 ? (
+    //       <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+    //         <Tab.Group as={Fragment}>
+    //           <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
+    //             {tabsList.map((tab) => (
+    //               <Tab
+    //                 key={tab}
+    //                 className={({ selected }) =>
+    //                   `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+    //                     selected ? "bg-custom-background-80" : ""
+    //                   }`
+    //                 }
+    //                 onClick={() => trackAnalyticsEvent(tab)}
+    //               >
+    //                 {tab}
+    //               </Tab>
+    //             ))}
+    //           </Tab.List>
+    //           <Tab.Panels as={Fragment}>
+    //             <Tab.Panel as={Fragment}>
+    //               <ScopeAndDemand fullScreen />
+    //             </Tab.Panel>
+    //             <Tab.Panel as={Fragment}>
+    //               <CustomAnalytics
+    //                 analytics={analytics}
+    //                 analyticsError={analyticsError}
+    //                 params={params}
+    //                 control={control}
+    //                 setValue={setValue}
+    //                 user={user}
+    //                 fullScreen
+    //               />
+    //             </Tab.Panel>
+    //           </Tab.Panels>
+    //         </Tab.Group>
+    //       </div>
+    //     ) : (
+    //       <EmptyState
+    //         title="You can see your all projects' analytics here"
+    //         description="Let's create your first project and analyze the stats with various graphs."
+    //         image={emptyAnalytics}
+    //         primaryButton={{
+    //           icon: <PlusIcon className="h-4 w-4" />,
+    //           text: "New Project",
+    //           onClick: () => {
+    //             const e = new KeyboardEvent("keydown", {
+    //               key: "p",
+    //             });
+    //             document.dispatchEvent(e);
+    //           },
+    //         }}
+    //       />
+    //     )
+    //   ) : null}
+    // </WorkspaceAuthorizationLayout>
+    <AppLayout header={<WorkspaceAnalyticsHeader />}>
+      <>
+        {projects && projects.length > 0 ? (
+          <>
+            <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+              <Tab.Group as={Fragment}>
+                <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
+                  {tabsList.map((tab) => (
+                    <Tab
+                      key={tab}
+                      className={({ selected }) =>
+                        `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                          selected ? "bg-custom-background-80" : ""
+                        }`
+                      }
+                      onClick={() => trackAnalyticsEvent(tab)}
+                    >
+                      {tab}
+                    </Tab>
+                  ))}
+                </Tab.List>
+                <Tab.Panels as={Fragment}>
+                  <Tab.Panel as={Fragment}>
+                    <ScopeAndDemand fullScreen />
+                  </Tab.Panel>
+                  <Tab.Panel as={Fragment}>
+                    <CustomAnalytics fullScreen />
+                  </Tab.Panel>
+                </Tab.Panels>
+              </Tab.Group>
+            </div>
+          </>
         ) : (
-          <EmptyState
-            title="You can see your all projects' analytics here"
-            description="Let's create your first project and analyse the stats with various graphs."
-            image={emptyAnalytics}
-            primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
-              text: "New Project",
-              onClick: () => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "p",
-                });
-                document.dispatchEvent(e);
-              },
-            }}
-          />
-        )
-      ) : null}
-    </WorkspaceAuthorizationLayout>
+          <>
+            <EmptyState
+              title="You can see your all projects' analytics here"
+              description="Let's create your first project and analyze the stats with various graphs."
+              image={emptyAnalytics}
+              primaryButton={{
+                icon: <PlusIcon className="h-4 w-4" />,
+                text: "New Project",
+                onClick: () => {
+                  const e = new KeyboardEvent("keydown", {
+                    key: "p",
+                  });
+                  document.dispatchEvent(e);
+                },
+              }}
+            />
+          </>
+        )}
+      </>
+    </AppLayout>
   );
-};
+});
 
-export default Analytics;
+export default AnalyticsPage;