diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
index 13e5177d6..8b9621521 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -1,14 +1,15 @@
-import { useMemo } from "react";
+"use client";
+
+import { useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 // plane package imports
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import type { AnalyticsTab } from "@plane/types";
-import { Tabs } from "@plane/ui";
-import type { TabItem } from "@plane/ui";
+import { Tabs } from "@plane/propel/tabs";
 // components
+import { cn } from "@plane/utils";
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
 import { PageHead } from "@/components/core/page-title";
 // hooks
@@ -17,7 +18,7 @@ import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
-import { getAnalyticsTabs } from "@/plane-web/components/analytics/tabs";
+import { useAnalyticsTabs } from "@/plane-web/components/analytics/use-analytics-tabs";
 import type { Route } from "./+types/page";
 
 function AnalyticsPage({ params }: Route.ComponentProps) {
@@ -35,31 +36,32 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
   const { currentWorkspace } = useWorkspace();
   const { allowPermissions } = useUserPermissions();
 
+  const pageTitle = currentWorkspace?.name
+    ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
+    : undefined;
+
   // permissions
   const canPerformEmptyStateActions = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.WORKSPACE
   );
 
-  // derived values
-  const pageTitle = currentWorkspace?.name
-    ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
-    : undefined;
-  const ANALYTICS_TABS = useMemo<AnalyticsTab[]>(() => getAnalyticsTabs(t), [t]);
-  const tabs: TabItem[] = useMemo(
-    () =>
-      ANALYTICS_TABS.map((tab) => ({
-        key: tab.key,
-        label: tab.label,
-        content: <tab.content />,
-        onClick: () => {
-          router.push(`/${currentWorkspace?.slug}/analytics/${tab.key}`);
-        },
-        disabled: tab.isDisabled,
-      })),
-    [ANALYTICS_TABS, router, currentWorkspace?.slug]
-  );
-  const defaultTab = tabId;
+  const workspaceSlug = params.workspaceSlug;
+  const ANALYTICS_TABS = useAnalyticsTabs(workspaceSlug.toString());
+
+  const [selectedTab, setSelectedTab] = useState(tabId || ANALYTICS_TABS[0]?.key);
+
+  useEffect(() => {
+    if (tabId) {
+      setSelectedTab(tabId);
+    }
+  }, [tabId]);
+
+  // Handle tab change
+  const handleTabChange = (value: string) => {
+    setSelectedTab(value);
+    router.push(`/${currentWorkspace?.slug}/analytics/${value}`);
+  };
 
   return (
     <>
@@ -67,19 +69,43 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
       {workspaceProjectIds && (
         <>
           {workspaceProjectIds.length > 0 || loader === "init-loader" ? (
-            <div className="flex h-full overflow-hidden bg-custom-background-100 justify-between items-center  ">
-              <Tabs
-                tabs={tabs}
-                storageKey={`analytics-page-${currentWorkspace?.id}`}
-                defaultTab={defaultTab}
-                size="md"
-                tabListContainerClassName="px-6 py-2 border-b border-custom-border-200 flex items-center justify-between"
-                tabListClassName="my-2 w-auto"
-                tabClassName="px-3"
-                tabPanelClassName="h-full overflow-hidden overflow-y-auto px-2"
-                storeInLocalStorage={false}
-                actions={<AnalyticsFilterActions />}
-              />
+            <div className="flex h-full overflow-hidden bg-custom-background-100 ">
+              <Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
+                <div className={"flex flex-col w-full h-full"}>
+                  <div
+                    className={cn(
+                      "px-6 py-2 border-b border-custom-border-200 flex items-center gap-4 overflow-hidden w-full justify-between"
+                    )}
+                  >
+                    <Tabs.List className={"my-2 overflow-x-auto flex w-fit"}>
+                      {ANALYTICS_TABS.map((tab) => (
+                        <Tabs.Trigger
+                          key={tab.key}
+                          value={tab.key}
+                          disabled={tab.isDisabled}
+                          size="md"
+                          className="px-3"
+                        >
+                          {tab.label}
+                        </Tabs.Trigger>
+                      ))}
+                    </Tabs.List>
+
+                    <div className="flex-shrink-0">
+                      <AnalyticsFilterActions />
+                    </div>
+                  </div>
+                  {ANALYTICS_TABS.map((tab) => (
+                    <Tabs.Content
+                      key={tab.key}
+                      value={tab.key}
+                      className={"h-full overflow-hidden overflow-y-auto px-2"}
+                    >
+                      <tab.content />
+                    </Tabs.Content>
+                  ))}
+                </div>
+              </Tabs>
             </div>
           ) : (
             <EmptyStateDetailed
diff --git a/apps/web/ce/components/analytics/use-analytics-tabs.tsx b/apps/web/ce/components/analytics/use-analytics-tabs.tsx
new file mode 100644
index 000000000..71f1ab15f
--- /dev/null
+++ b/apps/web/ce/components/analytics/use-analytics-tabs.tsx
@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { useTranslation } from "@plane/i18n";
+import { getAnalyticsTabs } from "./tabs";
+
+export const useAnalyticsTabs = (workspaceSlug: string) => {
+  const { t } = useTranslation();
+
+  const analyticsTabs = useMemo(() => getAnalyticsTabs(t), [t]);
+
+  return analyticsTabs;
+};
diff --git a/apps/web/core/components/analytics/analytics-filter-actions.tsx b/apps/web/core/components/analytics/analytics-filter-actions.tsx
index dad42c0a0..2c10cf7eb 100644
--- a/apps/web/core/components/analytics/analytics-filter-actions.tsx
+++ b/apps/web/core/components/analytics/analytics-filter-actions.tsx
@@ -4,11 +4,10 @@ import { observer } from "mobx-react";
 import { useAnalytics } from "@/hooks/store/use-analytics";
 import { useProject } from "@/hooks/store/use-project";
 // components
-import DurationDropdown from "./select/duration";
 import { ProjectSelect } from "./select/project";
 
 const AnalyticsFilterActions = observer(function AnalyticsFilterActions() {
-  const { selectedProjects, selectedDuration, updateSelectedProjects, updateSelectedDuration } = useAnalytics();
+  const { selectedProjects, updateSelectedProjects } = useAnalytics();
   const { joinedProjectIds } = useProject();
   return (
     <div className="flex items-center justify-end gap-2">
diff --git a/apps/web/core/components/analytics/overview/active-project-item.tsx b/apps/web/core/components/analytics/overview/active-project-item.tsx
index e579f8de5..710e0f0dd 100644
--- a/apps/web/core/components/analytics/overview/active-project-item.tsx
+++ b/apps/web/core/components/analytics/overview/active-project-item.tsx
@@ -1,6 +1,7 @@
 // plane package imports
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // plane web hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -33,9 +34,9 @@ function ActiveProjectItem(props: Props) {
   if (!projectDetails) return null;
 
   return (
-    <div className="flex items-center justify-between gap-2  ">
-      <div className="flex items-center gap-2">
-        <div className="flex h-8  w-8 items-center justify-center rounded-xl bg-custom-background-80">
+    <div className="flex items-center justify-between gap-2 w-full">
+      <div className="flex items-center gap-2 flex-1 overflow-hidden">
+        <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-custom-background-80 shrink-0">
           <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
             {projectDetails?.logo_props ? (
               <Logo logo={projectDetails?.logo_props} size={16} />
@@ -46,13 +47,15 @@ function ActiveProjectItem(props: Props) {
             )}
           </span>
         </div>
-        <p className="text-sm font-medium">{projectDetails?.name}</p>
+        <Tooltip tooltipContent={projectDetails?.name} position="top-start">
+          <p className="text-sm font-medium truncate">{projectDetails?.name}</p>
+        </Tooltip>
       </div>
       <CompletionPercentage
         percentage={completed_issues && total_issues ? Math.round((completed_issues / total_issues) * 100) : 0}
       />
     </div>
   );
-}
+};
 
 export default ActiveProjectItem;
diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx
index 08cec2d95..c86be241f 100644
--- a/packages/propel/src/tabs/tabs.tsx
+++ b/packages/propel/src/tabs/tabs.tsx
@@ -41,7 +41,7 @@ const TabsList = React.forwardRef(function TabsList(
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60 relative overflow-auto",
+        "flex w-full items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60 relative overflow-auto",
         className
       )}
       {...props}