diff --git a/.cursor/mcp.json b/.cursor/mcp.json
index 0d33fb7e4..cf1de173f 100644
--- a/.cursor/mcp.json
+++ b/.cursor/mcp.json
@@ -6,16 +6,15 @@
     },
     "playwright": {
       "command": "npx",
-      "args": [
-        "@playwright/mcp@latest"
-      ]
+      "args": ["@playwright/mcp@latest"]
+    },
+    "figma": {
+      "url": "https://mcp.figma.com/mcp",
+      "type": "http"
     },
     "sequential-thinking": {
       "command": "npx",
-      "args": [
-        "-y",
-        "@modelcontextprotocol/server-sequential-thinking"
-      ]
+      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
     }
   }
 }
diff --git a/apps/dashboard/app/[daoId]/(main)/attack-profitability/page.tsx b/apps/dashboard/app/[daoId]/(main)/attack-profitability/page.tsx
index ab37244b5..cc34eaea5 100644
--- a/apps/dashboard/app/[daoId]/(main)/attack-profitability/page.tsx
+++ b/apps/dashboard/app/[daoId]/(main)/attack-profitability/page.tsx
@@ -73,20 +73,22 @@ export default async function AttackProfitabilityPage({
   }
 
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.attackProfitability.title}
-      icon={<Crosshair2Icon className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.attackProfitability.description}
-      riskLevel={
-        <RiskLevelCard status={daoConstants.attackProfitability?.riskLevel} />
-      }
-    >
-      <SubSectionsContainer>
-        <AttackProfitabilitySection
-          daoId={daoIdEnum}
-          attackProfitability={daoConstants.attackProfitability}
-        />
-      </SubSectionsContainer>
-    </TheSectionLayout>
+    <div>
+      <TheSectionLayout
+        title={PAGES_CONSTANTS.attackProfitability.title}
+        icon={<Crosshair2Icon className="section-layout-icon" />}
+        description={PAGES_CONSTANTS.attackProfitability.description}
+        riskLevel={
+          <RiskLevelCard status={daoConstants.attackProfitability?.riskLevel} />
+        }
+      >
+        <SubSectionsContainer>
+          <AttackProfitabilitySection
+            daoId={daoIdEnum}
+            attackProfitability={daoConstants.attackProfitability}
+          />
+        </SubSectionsContainer>
+      </TheSectionLayout>
+    </div>
   );
 }
diff --git a/apps/dashboard/app/[daoId]/(main)/layout.tsx b/apps/dashboard/app/[daoId]/(main)/layout.tsx
index 8bb96d426..441d48237 100644
--- a/apps/dashboard/app/[daoId]/(main)/layout.tsx
+++ b/apps/dashboard/app/[daoId]/(main)/layout.tsx
@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
 import { ALL_DAOS, DaoIdEnum } from "@/shared/types/daos";
 import NotFound from "@/app/not-found";
-import { BaseHeaderLayoutSidebar } from "@/shared/components/";
 import { HeaderMobile } from "@/widgets/HeaderMobile";
 import { HeaderDAOSidebar, HeaderSidebar, StickyPageHeader } from "@/widgets";
 import { Footer } from "@/shared/components/design-system/footer/Footer";
+// import { BaseHeaderLayoutSidebar } from "@/shared/components";
 
 type DaoParams = {
   daoId: string;
@@ -26,17 +26,21 @@ export default async function DaoLayout({ children, params }: DaoLayoutProps) {
 
   // For FULL, IN_ANALYSIS and ELECTION stages, render the layout with appropriate providers
   return (
-    <div className="bg-surface-background dark flex h-screen overflow-hidden">
-      <BaseHeaderLayoutSidebar>
-        <HeaderSidebar />
-        <HeaderDAOSidebar />
-      </BaseHeaderLayoutSidebar>
-      <main className="relative flex-1 overflow-auto lg:ml-[330px]">
-        <div className="md:hidden">
-          <StickyPageHeader />
+    <div className="bg-surface-background dark relative mx-auto flex h-screen max-w-screen-2xl">
+      <div className="active relative hidden h-screen lg:flex">
+        <div className="h-full w-[68px] shrink-0 overflow-y-auto">
+          <HeaderSidebar />
+        </div>
+        <div className="h-full shrink-0">
+          <HeaderDAOSidebar />
+        </div>
+      </div>
+      <main className="h-screen flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile />
+          <StickyPageHeader />
         </div>
-        <div className="flex min-h-screen w-full flex-col items-center">
+        <div className="flex w-full flex-col items-center overflow-y-scroll lg:h-screen">
           <div className="w-full flex-1">{children}</div>
           <Footer />
         </div>
diff --git a/apps/dashboard/app/[daoId]/(main)/risk-analysis/page.tsx b/apps/dashboard/app/[daoId]/(main)/risk-analysis/page.tsx
index 948d7b8bc..14684914e 100644
--- a/apps/dashboard/app/[daoId]/(main)/risk-analysis/page.tsx
+++ b/apps/dashboard/app/[daoId]/(main)/risk-analysis/page.tsx
@@ -99,31 +99,33 @@ export default async function RiskAnalysisPage({
   };
 
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.riskAnalysis.title}
-      icon={<Gauge className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.riskAnalysis.description}
-      riskLevel={<RiskLevelCard status={getHighestRiskLevel()} />}
-    >
-      <SubSectionsContainer>
-        <SubSection
-          subsectionTitle={PAGES_CONSTANTS.riskAnalysis.subTitle}
-          subsectionDescription={PAGES_CONSTANTS.riskAnalysis.subDescription}
-          dateRange=""
-        >
-          <RiskAnalysisSection daoId={daoIdEnum} />
-        </SubSection>
-        <DividerDefault isHorizontal />
-        <SubSection
-          subsectionTitle={PAGES_CONSTANTS.governanceImplementation.subTitle}
-          subsectionDescription={
-            PAGES_CONSTANTS.governanceImplementation.subDescription
-          }
-          dateRange=""
-        >
-          <GovernanceImplementationSection daoId={daoIdEnum} />
-        </SubSection>
-      </SubSectionsContainer>
-    </TheSectionLayout>
+    <div>
+      <TheSectionLayout
+        title={PAGES_CONSTANTS.riskAnalysis.title}
+        icon={<Gauge className="section-layout-icon" />}
+        description={PAGES_CONSTANTS.riskAnalysis.description}
+        riskLevel={<RiskLevelCard status={getHighestRiskLevel()} />}
+      >
+        <SubSectionsContainer>
+          <SubSection
+            subsectionTitle={PAGES_CONSTANTS.riskAnalysis.subTitle}
+            subsectionDescription={PAGES_CONSTANTS.riskAnalysis.subDescription}
+            dateRange=""
+          >
+            <RiskAnalysisSection daoId={daoIdEnum} />
+          </SubSection>
+          <DividerDefault isHorizontal />
+          <SubSection
+            subsectionTitle={PAGES_CONSTANTS.governanceImplementation.subTitle}
+            subsectionDescription={
+              PAGES_CONSTANTS.governanceImplementation.subDescription
+            }
+            dateRange=""
+          >
+            <GovernanceImplementationSection daoId={daoIdEnum} />
+          </SubSection>
+        </SubSectionsContainer>
+      </TheSectionLayout>
+    </div>
   );
 }
diff --git a/apps/dashboard/app/[daoId]/(main)/token-distribution/page.tsx b/apps/dashboard/app/[daoId]/(main)/token-distribution/page.tsx
index 63ff83ad6..795516508 100644
--- a/apps/dashboard/app/[daoId]/(main)/token-distribution/page.tsx
+++ b/apps/dashboard/app/[daoId]/(main)/token-distribution/page.tsx
@@ -73,14 +73,16 @@ export default async function TokenDistributionPage({
   }
 
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.tokenDistribution.title}
-      icon={<ArrowRightLeft className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.tokenDistribution.description}
-    >
-      <SubSectionsContainer>
-        <TokenDistributionSection daoId={daoIdEnum} />
-      </SubSectionsContainer>
-    </TheSectionLayout>
+    <div>
+      <TheSectionLayout
+        title={PAGES_CONSTANTS.tokenDistribution.title}
+        icon={<ArrowRightLeft className="section-layout-icon" />}
+        description={PAGES_CONSTANTS.tokenDistribution.description}
+      >
+        <SubSectionsContainer>
+          <TokenDistributionSection daoId={daoIdEnum} />
+        </SubSectionsContainer>
+      </TheSectionLayout>
+    </div>
   );
 }
diff --git a/apps/dashboard/app/[daoId]/(secondary)/governance/page.tsx b/apps/dashboard/app/[daoId]/(secondary)/governance/page.tsx
index 15f4bb714..659c41ebe 100644
--- a/apps/dashboard/app/[daoId]/(secondary)/governance/page.tsx
+++ b/apps/dashboard/app/[daoId]/(secondary)/governance/page.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { DaoIdEnum } from "@/shared/types/daos";
-import { BaseHeaderLayoutSidebar } from "@/shared/components/";
 
 import { HeaderMobile } from "@/widgets/HeaderMobile";
 import { HeaderDAOSidebar, HeaderSidebar, StickyPageHeader } from "@/widgets";
@@ -65,14 +64,18 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 export default function DaoPage() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
-      <BaseHeaderLayoutSidebar>
-        <HeaderSidebar />
-        <HeaderDAOSidebar />
-      </BaseHeaderLayoutSidebar>
-      <main className="relative flex-1 overflow-auto lg:ml-[330px]">
-        <div className="sm:hidden">
-          <StickyPageHeader />
+      <div className="active relative hidden h-screen lg:flex">
+        <div className="h-full w-[68px] shrink-0 overflow-y-auto">
+          <HeaderSidebar />
+        </div>
+        <div className="h-full shrink-0">
+          <HeaderDAOSidebar />
+        </div>
+      </div>
+      <main className="relative flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile />
+          <StickyPageHeader />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
           <div className="xl4k:max-w-7xl w-full flex-1">
diff --git a/apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/loading.tsx b/apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/loading.tsx
index ac92a05f1..7db6a93c5 100644
--- a/apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/loading.tsx
+++ b/apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/loading.tsx
@@ -3,9 +3,9 @@ import { ProposalSectionSkeleton } from "@/features/governance/components/propos
 export default function Loading() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
-      <main className="relative flex-1 overflow-auto pt-[57px] sm:ml-[70px] sm:pt-0">
+      <main className="relative flex-1 overflow-auto pt-[57px] lg:pt-0">
         <div className="flex min-h-screen w-full flex-col items-center">
-          <div className="xl4k:max-w-7xl w-full flex-1">
+          <div className="border-light-dark w-full max-w-screen-2xl flex-1 border">
             <ProposalSectionSkeleton />
           </div>
         </div>
diff --git a/apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/page.tsx b/apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/page.tsx
index 8ed158ee1..c07325bf0 100644
--- a/apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/page.tsx
+++ b/apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/page.tsx
@@ -61,12 +61,12 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 
 export default function ProposalPage() {
   return (
-    <div className="bg-surface-background dark flex h-screen overflow-hidden">
+    <div className="bg-surface-background border-light-dark dark flex h-screen max-w-screen-2xl overflow-hidden border">
       <BaseHeaderLayoutSidebar>
         <HeaderSidebar />
       </BaseHeaderLayoutSidebar>
-      <main className="relative flex-1 overflow-auto pt-[57px] sm:ml-[70px] sm:pt-0">
-        <div className="sm:hidden">
+      <main className="relative flex-1 overflow-auto pt-[57px] lg:pt-0">
+        <div className="lg:hidden">
           <HeaderMobile />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
diff --git a/apps/dashboard/app/alerts/page.tsx b/apps/dashboard/app/alerts/page.tsx
index c4802d392..f10a7a9d9 100644
--- a/apps/dashboard/app/alerts/page.tsx
+++ b/apps/dashboard/app/alerts/page.tsx
@@ -7,8 +7,8 @@ export default function DonatePage() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
diff --git a/apps/dashboard/app/contact/page.tsx b/apps/dashboard/app/contact/page.tsx
index 5cd99accb..3a831e53d 100644
--- a/apps/dashboard/app/contact/page.tsx
+++ b/apps/dashboard/app/contact/page.tsx
@@ -74,9 +74,9 @@ export default function ContactPage() {
   return (
     <div className="bg-surface-background dark flex h-screen">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
-          <div className="h-[57px] w-full sm:hidden" />
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
+          <div className="h-[57px] w-full lg:hidden" />
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
diff --git a/apps/dashboard/app/donate/page.tsx b/apps/dashboard/app/donate/page.tsx
index a58f88793..2404f612c 100644
--- a/apps/dashboard/app/donate/page.tsx
+++ b/apps/dashboard/app/donate/page.tsx
@@ -7,8 +7,8 @@ export default function DonatePage() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
diff --git a/apps/dashboard/app/faq/page.tsx b/apps/dashboard/app/faq/page.tsx
index 6d3c5e292..30da2f2ff 100644
--- a/apps/dashboard/app/faq/page.tsx
+++ b/apps/dashboard/app/faq/page.tsx
@@ -7,9 +7,9 @@ export default function FAQPage() {
   return (
     <div className="bg-surface-background dark flex h-screen">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
-          <div className="h-[57px] w-full sm:hidden" />
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
+          <div className="h-[57px] w-full lg:hidden" />
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
diff --git a/apps/dashboard/app/glossary/page.tsx b/apps/dashboard/app/glossary/page.tsx
index 05e1478e1..0dbe38db2 100644
--- a/apps/dashboard/app/glossary/page.tsx
+++ b/apps/dashboard/app/glossary/page.tsx
@@ -39,9 +39,9 @@ export default function GlossaryPage() {
     <div className="bg-surface-background dark flex h-screen">
       <HeaderSidebar />
 
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
-          <div className="h-[57px] w-full sm:hidden" />
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
+          <div className="h-[57px] w-full lg:hidden" />
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
 
@@ -51,7 +51,7 @@ export default function GlossaryPage() {
               title={PAGES_CONSTANTS.glossary.title}
               icon={<BookOpen className="section-layout-icon" />}
               description={PAGES_CONSTANTS.glossary.description}
-              className="bg-surface-background! sm:mt-0! gap-4! lg:gap-6!"
+              className="bg-surface-background! lg:mt-0! gap-4! lg:gap-6!"
             >
               <div className="border-light-dark flex flex-col gap-2 border-t border-dashed py-5 lg:flex-row lg:gap-10 lg:border-none">
                 {/* Sticky Sidebar - Left Side */}
diff --git a/apps/dashboard/app/layout.tsx b/apps/dashboard/app/layout.tsx
index 85a77da9d..e3e461235 100644
--- a/apps/dashboard/app/layout.tsx
+++ b/apps/dashboard/app/layout.tsx
@@ -67,7 +67,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         />
       </head>
       <body
-        className={`${inter.className} ${roboto.variable} overflow-x-hidden xl:overflow-hidden`}
+        className={`${inter.className} ${roboto.variable} bg-surface-background border-light-dark mx-auto max-w-screen-2xl overflow-x-hidden border xl:overflow-hidden`}
       >
         <GlobalProviders>
           {children}
diff --git a/apps/dashboard/app/not-found.tsx b/apps/dashboard/app/not-found.tsx
index 41a47dae0..d2481f714 100644
--- a/apps/dashboard/app/not-found.tsx
+++ b/apps/dashboard/app/not-found.tsx
@@ -15,8 +15,8 @@ const NotFound = () => {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
@@ -42,11 +42,11 @@ const NotFound = () => {
                 </p>
               </div>
 
-              <div className="mt-4 flex w-full flex-col items-center justify-center gap-2 md:flex-row">
+              <div className="mt-4 flex w-full flex-col items-center justify-center gap-2 lg:flex-row">
                 <Button
                   asChild
                   variant="primary"
-                  className="w-full md:w-auto"
+                  className="w-full lg:w-auto"
                   size="md"
                 >
                   <Link href="/">Go to Dashboard</Link>
@@ -54,7 +54,7 @@ const NotFound = () => {
                 <Button
                   asChild
                   variant="outline"
-                  className="w-full md:w-auto"
+                  className="w-full lg:w-auto"
                   size="md"
                 >
                   <Link
diff --git a/apps/dashboard/app/page.tsx b/apps/dashboard/app/page.tsx
index f13596db8..8932d90fe 100644
--- a/apps/dashboard/app/page.tsx
+++ b/apps/dashboard/app/page.tsx
@@ -7,9 +7,9 @@ export default function Home() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
-          <HeaderMobile />
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
+          <HeaderMobile className="fixed! top-0" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
           <div className="w-full flex-1">
diff --git a/apps/dashboard/app/terms-of-service/page.tsx b/apps/dashboard/app/terms-of-service/page.tsx
index 263d22dca..0ba971fc2 100644
--- a/apps/dashboard/app/terms-of-service/page.tsx
+++ b/apps/dashboard/app/terms-of-service/page.tsx
@@ -7,8 +7,8 @@ export default function TermsPage() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
diff --git a/apps/dashboard/features/alerts/AlertsSection.tsx b/apps/dashboard/features/alerts/AlertsSection.tsx
index e24ac72b7..b8cdcf257 100644
--- a/apps/dashboard/features/alerts/AlertsSection.tsx
+++ b/apps/dashboard/features/alerts/AlertsSection.tsx
@@ -14,13 +14,13 @@ export const AlertsSection = () => {
       description={
         "With one click, get real-time governance alerts. Stay ahead of governance updates and take the path to being an active delegate without checking manually."
       }
-      className="bg-surface-background! mt-[56px]! sm:mt-0! border-b-0!"
+      className="bg-surface-background! mt-[56px]! lg:mt-0! border-b-0!"
     >
       <div className="flex flex-col gap-2">
         {/* Dashed line separator - Mobile only */}
-        <div className="border-light-dark -mx-4 border-t border-dashed sm:hidden" />
+        <div className="border-light-dark -mx-4 border-t border-dashed lg:hidden" />
 
-        <div className="grid grid-cols-1 gap-3 py-5 md:grid-cols-3">
+        <div className="grid grid-cols-1 gap-3 py-5 lg:grid-cols-3">
           {ALERTS_ITEMS.map((alert: AlertItem) => (
             <AlertCard
               key={alert.title}
diff --git a/apps/dashboard/features/attack-profitability/AttackProfitabilitySection.tsx b/apps/dashboard/features/attack-profitability/AttackProfitabilitySection.tsx
index 98138dd69..c954b7cbc 100644
--- a/apps/dashboard/features/attack-profitability/AttackProfitabilitySection.tsx
+++ b/apps/dashboard/features/attack-profitability/AttackProfitabilitySection.tsx
@@ -52,7 +52,7 @@ export const AttackProfitabilitySection = ({
         title="Cost of Attack vs Profit"
         subtitle={getDateRange(days ?? "")}
         headerComponent={
-          <div className="flex w-full flex-col-reverse gap-3 pt-3 sm:flex-row sm:items-center">
+          <div className="flex w-full flex-col-reverse gap-3 pt-3 lg:flex-row lg:items-center">
             <BadgeStatus
               variant="outline"
               iconVariant={attackUpdate.hasData ? "success" : "warning"}
@@ -62,7 +62,7 @@ export const AttackProfitabilitySection = ({
             >
               Last updated: {attackUpdate.label}
             </BadgeStatus>
-            <div className="border-border-default hidden h-5 border sm:block" />
+            <div className="border-border-default hidden h-5 border lg:block" />
 
             <AttackProfitabilityToggleHeader
               treasuryMetric={treasuryMetric}
@@ -89,7 +89,7 @@ export const AttackProfitabilitySection = ({
         />
       </TheCardChartLayout>
       <div className="border-light-dark w-full border-t" />
-      <div className="grid w-full grid-cols-1 gap-5 sm:gap-6 md:grid-cols-2">
+      <div className="grid w-full grid-cols-1 gap-5 lg:grid-cols-2 lg:gap-6">
         <TheCardChartLayout
           title="Cost Comparison"
           subtitle="All values reflect current data."
diff --git a/apps/dashboard/features/attack-profitability/components/AttackCostBarChart.tsx b/apps/dashboard/features/attack-profitability/components/AttackCostBarChart.tsx
index f91e708d5..a29e9cdff 100644
--- a/apps/dashboard/features/attack-profitability/components/AttackCostBarChart.tsx
+++ b/apps/dashboard/features/attack-profitability/components/AttackCostBarChart.tsx
@@ -497,7 +497,7 @@ const CustomXAxisTick = ({ x, y, payload }: AxisTickProps) => {
         dy={10}
         textAnchor="middle"
         fill="#A1A1AA"
-        className="text-[12px] font-medium leading-4 sm:text-xs"
+        className="text-[12px] font-medium leading-4 lg:text-xs"
       >
         {firstLine}
       </text>
@@ -508,7 +508,7 @@ const CustomXAxisTick = ({ x, y, payload }: AxisTickProps) => {
           dy={28}
           textAnchor="middle"
           fill="#A1A1AA"
-          className="text-[12px] font-medium leading-4 sm:text-xs"
+          className="text-[12px] font-medium leading-4 lg:text-xs"
         >
           {secondLine}
         </text>
diff --git a/apps/dashboard/features/attack-profitability/components/AttackProfitabilityAccordion.tsx b/apps/dashboard/features/attack-profitability/components/AttackProfitabilityAccordion.tsx
index 77391fb39..7532692da 100644
--- a/apps/dashboard/features/attack-profitability/components/AttackProfitabilityAccordion.tsx
+++ b/apps/dashboard/features/attack-profitability/components/AttackProfitabilityAccordion.tsx
@@ -86,7 +86,7 @@ const AccordionData: AccordionDataProps[] = [
             proposal.
           </p>
         </div>
-        <div className="flex flex-col items-center gap-1 sm:flex-row">
+        <div className="flex flex-col items-center gap-1 lg:flex-row">
           <Badge className="group-hover:bg-surface-default">
             <p className="text-secondary text-xs font-semibold uppercase leading-none">
               Voting power in a proposal
@@ -122,7 +122,7 @@ const AccordionData: AccordionDataProps[] = [
             making it easier for an attacker to take control.
           </p>
         </div>
-        <div className="flex flex-col items-center gap-1 sm:flex-row">
+        <div className="flex flex-col items-center gap-1 lg:flex-row">
           <Badge className="group-hover:bg-surface-default">
             <ArrowDown className="text-secondary size-4" />
             <p className="text-secondary text-xs font-semibold uppercase leading-none">
@@ -155,7 +155,7 @@ const AccordionData: AccordionDataProps[] = [
           what an attacker would have as “minimum profit” from a well-executed
           capture.
         </div>
-        <div className="flex flex-col items-center gap-1 sm:flex-row">
+        <div className="flex flex-col items-center gap-1 lg:flex-row">
           <Badge className="group-hover:bg-surface-default">
             <p className="text-secondary text-xs font-semibold uppercase leading-none">
               Cost to attack
@@ -183,7 +183,7 @@ export const AttackProfitabilityAccordion = () => {
     <Accordion
       type="single"
       defaultValue="item-0"
-      className="text-primary flex h-full w-full flex-col gap-2 sm:gap-3"
+      className="text-primary flex h-full w-full flex-col gap-2 lg:gap-3"
     >
       {AccordionData.map((item, index) => (
         <AccordionItem
diff --git a/apps/dashboard/features/attack-profitability/components/AttackProfitabilityToggleHeader.tsx b/apps/dashboard/features/attack-profitability/components/AttackProfitabilityToggleHeader.tsx
index 7454cf1d0..f7b1aa9a9 100644
--- a/apps/dashboard/features/attack-profitability/components/AttackProfitabilityToggleHeader.tsx
+++ b/apps/dashboard/features/attack-profitability/components/AttackProfitabilityToggleHeader.tsx
@@ -19,11 +19,11 @@ export const AttackProfitabilityToggleHeader = ({
   const { daoId }: { daoId: string } = useParams();
 
   return (
-    <div className="flex items-start gap-1 sm:w-fit sm:items-end sm:gap-2 sm:pt-0 lg:flex-row lg:gap-3">
+    <div className="flex items-start gap-1 lg:w-fit lg:flex-row lg:items-end lg:gap-2 lg:gap-3 lg:pt-0">
       <div className="flex flex-row flex-wrap items-center gap-2 lg:gap-3">
         <div className="flex items-center gap-3">
           <div className="bg-surface-solid-success rounded-xs size-2" />
-          <p className="text-secondary hidden text-sm font-medium leading-normal sm:flex">
+          <p className="text-secondary hidden text-sm font-medium leading-normal lg:flex">
             Treasury
           </p>
         </div>
@@ -38,7 +38,7 @@ export const AttackProfitabilityToggleHeader = ({
       <div className="flex flex-row flex-wrap items-center gap-2 lg:gap-3">
         <div className="flex items-center gap-3">
           <div className="bg-surface-solid-error rounded-xs size-2" />
-          <p className="text-secondary hidden text-sm font-medium leading-normal sm:flex">
+          <p className="text-secondary hidden text-sm font-medium leading-normal lg:flex">
             Cost
           </p>
         </div>
diff --git a/apps/dashboard/features/attack-profitability/components/MultilineChartAttackProfitability.tsx b/apps/dashboard/features/attack-profitability/components/MultilineChartAttackProfitability.tsx
index 5d38b313b..dbf071ebb 100644
--- a/apps/dashboard/features/attack-profitability/components/MultilineChartAttackProfitability.tsx
+++ b/apps/dashboard/features/attack-profitability/components/MultilineChartAttackProfitability.tsx
@@ -251,7 +251,7 @@ export const MultilineChartAttackProfitability = ({
   return (
     <div
       className={cn(
-        "sm:border-light-dark sm:bg-surface-default text-primary relative flex h-[300px] w-full items-center justify-center rounded-lg",
+        "lg:border-light-dark lg:bg-surface-default text-primary relative flex h-[300px] w-full items-center justify-center rounded-lg",
         {
           "-mb-1 h-44": context === "overview",
         },
diff --git a/apps/dashboard/features/cookie/components/CookieConsent.tsx b/apps/dashboard/features/cookie/components/CookieConsent.tsx
index 175d591b4..7c801ae57 100644
--- a/apps/dashboard/features/cookie/components/CookieConsent.tsx
+++ b/apps/dashboard/features/cookie/components/CookieConsent.tsx
@@ -82,11 +82,11 @@ export const CookieConsent = ({ className }: CookieConsentProps) => {
   return (
     <div
       className={cn(
-        "fixed bottom-7 left-1/2 right-auto z-50 flex w-full -translate-x-1/2 flex-col gap-6 rounded-lg p-4 sm:max-w-[974px] sm:flex-row sm:items-center",
+        "fixed bottom-7 left-1/2 right-auto z-50 flex w-full -translate-x-1/2 flex-col gap-6 rounded-lg p-4 lg:max-w-[974px] lg:flex-row lg:items-center",
         className,
       )}
     >
-      <div className="border-border-default bg-surface-default relative z-50 flex w-full flex-col items-start gap-4 overflow-hidden rounded-lg border p-4 shadow-lg sm:flex-row sm:items-center sm:gap-6">
+      <div className="border-border-default bg-surface-default relative z-50 flex w-full flex-col items-start gap-4 overflow-hidden rounded-lg border p-4 shadow-lg lg:flex-row lg:items-center lg:gap-6">
         <Image
           className="absolute right-0 top-0 h-full w-[330px] object-cover opacity-50"
           src="/images/cookie.svg"
@@ -94,8 +94,8 @@ export const CookieConsent = ({ className }: CookieConsentProps) => {
           width={330}
           height={116}
         />
-        <div className="z-40 flex w-full items-start gap-6 sm:items-center">
-          <div className="relative hidden size-[116px] flex-shrink-0 items-center justify-center sm:flex">
+        <div className="z-40 flex w-full items-start gap-6 lg:items-center">
+          <div className="relative hidden size-[116px] flex-shrink-0 items-center justify-center lg:flex">
             <CookieBackground className="text-brand size-[116px]" />
             <CookieIcon className="text-brand absolute inset-0 left-1/2 top-1/2 size-[56px] -translate-x-1/2 -translate-y-1/2" />
           </div>
@@ -120,7 +120,7 @@ export const CookieConsent = ({ className }: CookieConsentProps) => {
             </DefaultLink>
           </div>
         </div>
-        <div className="z-50 flex w-full flex-shrink-0 gap-2 sm:w-auto">
+        <div className="z-50 flex w-full flex-shrink-0 gap-2 lg:w-auto">
           <Button onClick={handleAccept} variant="primary" size="sm">
             [Accept]
           </Button>
diff --git a/apps/dashboard/features/dao-overview/DaoOverviewSection.tsx b/apps/dashboard/features/dao-overview/DaoOverviewSection.tsx
index eced6c4cf..b36466b7a 100644
--- a/apps/dashboard/features/dao-overview/DaoOverviewSection.tsx
+++ b/apps/dashboard/features/dao-overview/DaoOverviewSection.tsx
@@ -52,26 +52,26 @@ export const DaoOverviewSection = ({ daoId }: { daoId: DaoIdEnum }) => {
 
   return (
     <Suspense fallback={<DaoOverviewSkeleton />}>
-      <div className="relative flex flex-col gap-5 md:gap-2">
+      <div className="relative flex flex-col gap-5 lg:gap-2">
         <DaoOverviewHeaderBackground
           color={daoConfig.color.svgColor}
           bgColor={daoConfig.color.svgBgColor}
         />
         <div className="relative z-10 mx-5 flex flex-col gap-4 pt-5">
-          <div className="border-inverted md:bg-inverted flex flex-col gap-1 md:flex-row md:border-2">
+          <div className="border-inverted lg:bg-inverted flex flex-col gap-1 lg:flex-row lg:border-2">
             <DaoAvatarIcon
               daoId={daoId}
-              className="border-inverted size-32 shrink-0 rounded-none border-2 md:border-none"
+              className="border-inverted size-32 shrink-0 rounded-none border-2 lg:border-none"
             />
 
             <DaoOverviewHeaderMetrics daoId={daoId} daoConfig={daoConfig} />
           </div>
         </div>
-        <div className="block md:hidden">
+        <div className="block lg:hidden">
           <DividerDefault isHorizontal />
         </div>
-        <div className="border-inverted grid grid-cols-1 gap-5 border-x md:mx-5 md:grid-cols-2 md:gap-2">
-          <div className="w-full px-5 md:px-0">
+        <div className="border-inverted grid grid-cols-1 gap-5 border-x lg:mx-5 lg:grid-cols-2 lg:gap-2">
+          <div className="w-full px-5 lg:px-0">
             <StagesContainer
               daoId={daoId}
               currentDaoStage={currentDaoStage}
@@ -79,7 +79,7 @@ export const DaoOverviewSection = ({ daoId }: { daoId: DaoIdEnum }) => {
               context="overview"
             />
           </div>
-          <div className="block md:hidden">
+          <div className="block lg:hidden">
             <DividerDefault isHorizontal />
           </div>
           <RiskAreaCardWrapper
@@ -89,34 +89,34 @@ export const DaoOverviewSection = ({ daoId }: { daoId: DaoIdEnum }) => {
               router.push(`/${daoId.toLowerCase()}/risk-analysis`);
             }}
             variant={RiskAreaCardEnum.DAO_OVERVIEW}
-            className="grid h-full grid-cols-2 gap-2 px-5 md:px-0"
+            className="grid h-full grid-cols-2 gap-2 px-5 lg:px-0"
           />
-          <div className="block md:hidden">
+          <div className="block lg:hidden">
             <DividerDefault isHorizontal />
           </div>
         </div>
         <div className="border-inverted mx-5 border-x">
           <MetricsCard daoId={daoId} daoConfig={daoConfig} />
         </div>
-        <div className="block md:hidden">
+        <div className="block lg:hidden">
           <DividerDefault isHorizontal />
         </div>
         <SecurityCouncilCard daoOverview={daoOverview} />
-        <div className="border-inverted grid grid-cols-1 gap-5 border-x md:mx-5 md:grid-cols-2 md:gap-2">
+        <div className="border-inverted grid grid-cols-1 gap-5 border-x lg:mx-5 lg:grid-cols-2 lg:gap-2">
           <AttackProfitabilityChartCard daoId={daoId} />
-          <div className="block md:hidden">
+          <div className="block lg:hidden">
             <DividerDefault isHorizontal />
           </div>
           <TokenDistributionChartCard daoId={daoId} />
         </div>
-        <div className="block md:hidden">
+        <div className="block lg:hidden">
           <DividerDefault isHorizontal />
         </div>
-        <div className="border-inverted grid grid-cols-1 gap-5 border-x md:mx-5 md:grid-cols-2 md:gap-2">
+        <div className="border-inverted grid grid-cols-1 gap-5 border-x lg:mx-5 lg:grid-cols-2 lg:gap-2">
           <div className="w-full">
             <AccountBalanceChartCard daoId={daoId} />
           </div>
-          <div className="block md:hidden">
+          <div className="block lg:hidden">
             <DividerDefault isHorizontal />
           </div>
           <div className="w-full">
diff --git a/apps/dashboard/features/dao-overview/components/AccountBalanceChartCard.tsx b/apps/dashboard/features/dao-overview/components/AccountBalanceChartCard.tsx
index 93756ce7f..948889193 100644
--- a/apps/dashboard/features/dao-overview/components/AccountBalanceChartCard.tsx
+++ b/apps/dashboard/features/dao-overview/components/AccountBalanceChartCard.tsx
@@ -54,7 +54,7 @@ export const AccountBalanceChartCard = ({ daoId }: { daoId: DaoIdEnum }) => {
   }, [accountBalanceVariations.data, daoId]);
 
   return (
-    <div className="sm:bg-surface-default flex w-full flex-col gap-4 px-5 md:p-4">
+    <div className="lg:bg-surface-default flex w-full flex-col gap-4 px-5 lg:p-4">
       <div className="flex h-5 items-center gap-2">
         <DefaultLink
           href={`${daoId.toLowerCase()}/holders-and-delegates?days=90d`}
diff --git a/apps/dashboard/features/dao-overview/components/AttackProfitabilityChartCard.tsx b/apps/dashboard/features/dao-overview/components/AttackProfitabilityChartCard.tsx
index 7a446a257..8dac744dc 100644
--- a/apps/dashboard/features/dao-overview/components/AttackProfitabilityChartCard.tsx
+++ b/apps/dashboard/features/dao-overview/components/AttackProfitabilityChartCard.tsx
@@ -46,7 +46,7 @@ export const AttackProfitabilityChartCard = ({ daoId }: Props) => {
   const metrics = useMemo(() => Object.values(METRICS_SCHEMA), []);
 
   return (
-    <div className="sm:bg-surface-default flex w-full flex-col gap-4 px-5 md:p-4">
+    <div className="lg:bg-surface-default flex w-full flex-col gap-4 px-5 lg:p-4">
       <CardHeader daoId={daoId} disabled={featureNotIncluded} />
 
       {featureNotIncluded ? (
diff --git a/apps/dashboard/features/dao-overview/components/DaoOverviewHeader.tsx b/apps/dashboard/features/dao-overview/components/DaoOverviewHeader.tsx
index cde5e201a..65ab08e9d 100644
--- a/apps/dashboard/features/dao-overview/components/DaoOverviewHeader.tsx
+++ b/apps/dashboard/features/dao-overview/components/DaoOverviewHeader.tsx
@@ -34,7 +34,7 @@ export const DaoOverviewHeader = ({
   const chainName = daoOverview.chain.name;
 
   return (
-    <div className="md:bg-border-default flex flex-col gap-3 pb-4 pt-2.5 md:flex-row md:items-center md:justify-between md:px-4 md:py-2.5">
+    <div className="lg:bg-border-default flex flex-col gap-3 pb-4 pt-2.5 lg:flex-row lg:items-center lg:justify-between lg:px-4 lg:py-2.5">
       <div className="flex items-center gap-3">
         <h3 className="text-primary font-mono text-lg font-medium uppercase leading-6">
           {daoConfig.name}
diff --git a/apps/dashboard/features/dao-overview/components/DaoOverviewHeaderMetrics.tsx b/apps/dashboard/features/dao-overview/components/DaoOverviewHeaderMetrics.tsx
index 2fef9b5fe..767542e4d 100644
--- a/apps/dashboard/features/dao-overview/components/DaoOverviewHeaderMetrics.tsx
+++ b/apps/dashboard/features/dao-overview/components/DaoOverviewHeaderMetrics.tsx
@@ -196,7 +196,7 @@ export const DaoOverviewHeaderMetrics = ({
         lastPrice={lastPrice}
         isLoading={isLoading}
       />
-      <div className="border-t-border-default md:bg-surface-default grid grid-cols-2 gap-4 border-t border-dashed pt-4 md:grid-cols-4 md:gap-0.5 md:border-none md:pt-0">
+      <div className="border-t-border-default lg:bg-surface-default grid grid-cols-2 gap-4 border-t border-dashed pt-4 lg:grid-cols-4 lg:gap-0.5 lg:border-none lg:pt-0">
         <DaoOverviewMetricCard
           title="Votable Supply"
           text={`${formattedValues.delegatedSupply} ${daoId} delegated`}
diff --git a/apps/dashboard/features/dao-overview/components/DaoOverviewMetricCard.tsx b/apps/dashboard/features/dao-overview/components/DaoOverviewMetricCard.tsx
index fe90cb951..c5737b8f2 100644
--- a/apps/dashboard/features/dao-overview/components/DaoOverviewMetricCard.tsx
+++ b/apps/dashboard/features/dao-overview/components/DaoOverviewMetricCard.tsx
@@ -19,7 +19,7 @@ export const DaoOverviewMetricCard = ({
 }) => (
   <div
     className={cn(
-      "md:bg-surface-default flex flex-col justify-start md:p-3",
+      "lg:bg-surface-default flex flex-col justify-start lg:p-3",
       className,
     )}
   >
diff --git a/apps/dashboard/features/dao-overview/components/MetricsCard.tsx b/apps/dashboard/features/dao-overview/components/MetricsCard.tsx
index 1c0a9fa06..e0aaad436 100644
--- a/apps/dashboard/features/dao-overview/components/MetricsCard.tsx
+++ b/apps/dashboard/features/dao-overview/components/MetricsCard.tsx
@@ -15,7 +15,7 @@ interface MetricsCardProps {
 }
 
 const COMMON_CARD_CLASSES =
-  "border-border-contrast border-b border-dashed pb-4 md:border-none md:p-3";
+  "border-border-contrast border-b border-dashed pb-4 lg:border-none lg:p-3";
 const TEXT_CLASSES = "mb-1";
 const BADGE_CLASSES = "bg-surface-opacity rounded-full px-1.5 py-0.5";
 
@@ -210,7 +210,7 @@ export const MetricsCard = ({ daoId, daoConfig }: MetricsCardProps) => {
   );
 
   return (
-    <div className="grid grid-cols-1 gap-4 md:grid-cols-4 md:justify-between md:gap-2 md:border-none">
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-4 lg:justify-between lg:gap-2 lg:border-none">
       <ProposalThresholdMetric
         daoId={daoId}
         proposalThresholdValue={proposalThresholdValue}
diff --git a/apps/dashboard/features/dao-overview/components/SecurityCouncilCard.tsx b/apps/dashboard/features/dao-overview/components/SecurityCouncilCard.tsx
index 9bb900bbd..01c0d847f 100644
--- a/apps/dashboard/features/dao-overview/components/SecurityCouncilCard.tsx
+++ b/apps/dashboard/features/dao-overview/components/SecurityCouncilCard.tsx
@@ -55,13 +55,13 @@ export const SecurityCouncilCard = ({
     <div className="flex flex-col gap-5">
       <div className="border-x-1 border-inverted mx-5">
         <div
-          className={"sm:bg-surface-default flex w-full flex-col gap-4 md:p-4"}
+          className={"lg:bg-surface-default flex w-full flex-col gap-4 lg:p-4"}
         >
-          <div className="flex w-full flex-col text-[13px] sm:flex-row sm:items-center sm:gap-2">
-            <p className="text-primary flex items-center gap-2 font-mono font-medium tracking-wider sm:px-0">
+          <div className="flex w-full flex-col text-[13px] lg:flex-row lg:items-center lg:gap-2">
+            <p className="text-primary flex items-center gap-2 font-mono font-medium tracking-wider lg:px-0">
               SECURITY COUNCIL
             </p>
-            <div className="hidden size-1 items-center rounded-full bg-[#3F3F46] sm:flex" />
+            <div className="hidden size-1 items-center rounded-full bg-[#3F3F46] lg:flex" />
             <div className="flex items-center gap-1.5">
               <UnderlinedLink
                 href={securityCouncil.multisig.externalLink}
@@ -75,13 +75,13 @@ export const SecurityCouncilCard = ({
                     {securityCouncil.multisig.threshold}/
                     {securityCouncil.multisig.signers}
                   </span>
-                  <span className="hidden sm:inline">
+                  <span className="hidden lg:inline">
                     required for transactions
                   </span>
-                  <span className="inline sm:hidden">required</span>
+                  <span className="inline lg:hidden">required</span>
                 </div>
               </UnderlinedLink>
-              <div className="hidden sm:flex">
+              <div className="hidden lg:flex">
                 <TooltipInfo text="The security council is set up as a multisig with eight signers, needing the signature of 4 out of 8 to execute a cancel transaction for an approved proposal in the Timelock contract." />
               </div>
             </div>
@@ -96,7 +96,7 @@ export const SecurityCouncilCard = ({
           </div>
         </div>
       </div>
-      <div className="block md:hidden">
+      <div className="block lg:hidden">
         <DividerDefault isHorizontal />
       </div>
     </div>
diff --git a/apps/dashboard/features/dao-overview/components/StageRequirementsTooltip.tsx b/apps/dashboard/features/dao-overview/components/StageRequirementsTooltip.tsx
index 2650409d2..a1b550f77 100644
--- a/apps/dashboard/features/dao-overview/components/StageRequirementsTooltip.tsx
+++ b/apps/dashboard/features/dao-overview/components/StageRequirementsTooltip.tsx
@@ -38,11 +38,11 @@ export const StageRequirementsTooltip = ({
   ])[Number(nextStage) % 3] as "text-error" | "text-warning" | "text-success";
   return (
     <div
-      className="sm:translate-x absolute left-0 top-[calc(100%-8px)] z-50 mt-2"
+      className="lg:translate-x absolute left-0 top-[calc(100%-8px)] z-50 mt-2"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <div className="stage-tooltip-box-shadow border-light-dark bg-surface-background relative w-[calc(100vw-44px)] rounded-lg border sm:w-[25vw]">
+      <div className="stage-tooltip-box-shadow border-light-dark bg-surface-background relative w-[calc(100vw-44px)] rounded-lg border lg:w-[25vw]">
         {/* Header */}
         <div className="p-4">
           <div className="flex justify-start">
diff --git a/apps/dashboard/features/dao-overview/components/TokenDistributionChartCard.tsx b/apps/dashboard/features/dao-overview/components/TokenDistributionChartCard.tsx
index 8ff23cb77..96714ff97 100644
--- a/apps/dashboard/features/dao-overview/components/TokenDistributionChartCard.tsx
+++ b/apps/dashboard/features/dao-overview/components/TokenDistributionChartCard.tsx
@@ -42,7 +42,7 @@ export const TokenDistributionChartCard = ({ daoId }: { daoId: DaoIdEnum }) => {
   ) as Record<string, MetricSchema>;
 
   return (
-    <div className="sm:bg-surface-default flex w-full flex-col gap-4 px-5 md:p-4">
+    <div className="lg:bg-surface-default flex w-full flex-col gap-4 px-5 lg:p-4">
       <div className="flex h-5 items-center gap-2">
         <DefaultLink
           href={`${daoId.toLowerCase()}/token-distribution`}
diff --git a/apps/dashboard/features/dao-overview/components/TopAccountsChart.tsx b/apps/dashboard/features/dao-overview/components/TopAccountsChart.tsx
index 10214ff33..332f6f0b6 100644
--- a/apps/dashboard/features/dao-overview/components/TopAccountsChart.tsx
+++ b/apps/dashboard/features/dao-overview/components/TopAccountsChart.tsx
@@ -50,7 +50,7 @@ export const TopAccountsChart = ({
   const handleCloseDrawer = useCallback(() => setSelectedAddress(null), []);
 
   return (
-    <div className="border-light-dark text-primary sm:bg-surface-default relative flex h-52 w-full items-center justify-center sm:rounded-lg">
+    <div className="border-light-dark text-primary lg:bg-surface-default relative flex h-52 w-full items-center justify-center lg:rounded-lg">
       <ResponsiveContainer width="100%" height="100%">
         <BarChart data={chartConfig.data} margin={{ top: 50, bottom: 20 }}>
           <Tooltip
diff --git a/apps/dashboard/features/dao-overview/components/VotingPowerChartCard.tsx b/apps/dashboard/features/dao-overview/components/VotingPowerChartCard.tsx
index 768bd7fee..2ab576fba 100644
--- a/apps/dashboard/features/dao-overview/components/VotingPowerChartCard.tsx
+++ b/apps/dashboard/features/dao-overview/components/VotingPowerChartCard.tsx
@@ -54,7 +54,7 @@ export const VotingPowerChartCard = ({ daoId }: { daoId: DaoIdEnum }) => {
   }, [votingPowerVariations.data, daoId]);
 
   return (
-    <div className="sm:bg-surface-default flex w-full flex-col gap-4 px-5 md:p-4">
+    <div className="lg:bg-surface-default flex w-full flex-col gap-4 px-5 lg:p-4">
       <div className="flex h-5 items-center gap-2">
         <DefaultLink
           href={`${daoId.toLowerCase()}/holders-and-delegates?days=90d&tab=delegates`}
diff --git a/apps/dashboard/features/dao-overview/skeleton/DaoOverviewSkeleton.tsx b/apps/dashboard/features/dao-overview/skeleton/DaoOverviewSkeleton.tsx
index 7d2f8dd68..006fc7f78 100644
--- a/apps/dashboard/features/dao-overview/skeleton/DaoOverviewSkeleton.tsx
+++ b/apps/dashboard/features/dao-overview/skeleton/DaoOverviewSkeleton.tsx
@@ -1,18 +1,18 @@
 export const DaoOverviewSkeleton = () => {
   return (
-    <div className="dark flex min-h-screen w-full flex-col gap-8 border-b-2 border-b-white/10 px-4 sm:gap-6 sm:border-none sm:p-5">
+    <div className="dark flex min-h-screen w-full flex-col gap-8 border-b-2 border-b-white/10 px-4 lg:gap-6 lg:border-none lg:p-5">
       <div className="flex-1 space-y-4">
         {/* First row - Full width card */}
         <div className="bg-surface-contrast h-32 w-full animate-pulse rounded-lg" />
 
         {/* Second row - Two equal cards */}
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           <div className="bg-surface-contrast h-56 animate-pulse rounded-lg" />
           <div className="bg-surface-contrast h-56 animate-pulse rounded-lg" />
         </div>
 
         {/* Third row - Four equal cards */}
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:grid-cols-4">
           <div className="bg-surface-contrast h-[90px] animate-pulse rounded-lg" />
           <div className="bg-surface-contrast h-[90px] animate-pulse rounded-lg" />
           <div className="bg-surface-contrast h-[90px] animate-pulse rounded-lg" />
@@ -20,13 +20,13 @@ export const DaoOverviewSkeleton = () => {
         </div>
 
         {/* Fourth row - Two equal cards */}
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           <div className="bg-surface-contrast h-56 animate-pulse rounded-lg" />
           <div className="bg-surface-contrast h-56 animate-pulse rounded-lg" />
         </div>
 
         {/* Fifth row - Two equal cards */}
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           <div className="bg-surface-contrast h-56 animate-pulse rounded-lg" />
           <div className="bg-surface-contrast h-56 animate-pulse rounded-lg" />
         </div>
diff --git a/apps/dashboard/features/donation/DonationSection.tsx b/apps/dashboard/features/donation/DonationSection.tsx
index e89717e90..664e0df51 100644
--- a/apps/dashboard/features/donation/DonationSection.tsx
+++ b/apps/dashboard/features/donation/DonationSection.tsx
@@ -15,11 +15,11 @@ export const DonationSection = () => {
       title={PAGES_CONSTANTS.donate.title}
       icon={<Heart className="section-layout-icon" />}
       description={PAGES_CONSTANTS.donate.description}
-      className="bg-surface-background! mt-[56px]! sm:mt-0!"
+      className="bg-surface-background! mt-[56px]! lg:mt-0!"
     >
       <div className="flex flex-col gap-2">
         {/* Dashed line separator - Mobile only */}
-        <div className="border-light-dark -mx-4 border-t border-dashed sm:hidden" />
+        <div className="border-light-dark -mx-4 border-t border-dashed lg:hidden" />
 
         {/* Main donation card with integrated benefits */}
         <DonationCard
@@ -31,7 +31,7 @@ export const DonationSection = () => {
           supportedChains={donation.supportedChains}
           chainLinks={donation.chainLinks}
         />
-        <div className="border-light-dark -mx-4 border-t sm:hidden" />
+        <div className="border-light-dark -mx-4 border-t lg:hidden" />
         {/* Funding sources */}
         <FundingSourcesCard
           title="FUNDING SOURCES"
diff --git a/apps/dashboard/features/donation/components/DonationCard.tsx b/apps/dashboard/features/donation/components/DonationCard.tsx
index d262bd6b1..80dc1300c 100644
--- a/apps/dashboard/features/donation/components/DonationCard.tsx
+++ b/apps/dashboard/features/donation/components/DonationCard.tsx
@@ -17,8 +17,8 @@ export const DonationCard = ({
   chainLinks = {},
 }: DonationCardProps) => {
   return (
-    <Card className="bg-surface-background md:bg-surface-default w-full rounded-none border-0 shadow-sm">
-      <CardContent className="px-0 py-5 md:p-5">
+    <Card className="bg-surface-background lg:bg-surface-default w-full rounded-none border-0 shadow-sm">
+      <CardContent className="px-0 py-5 lg:p-5">
         <div className="flex flex-col gap-4 lg:flex-row">
           <div className="flex-1 space-y-6">
             {/* Title and Description */}
@@ -69,7 +69,7 @@ export const DonationCard = ({
                     <p className="text-primary !text-alternative-sm font-mono font-medium uppercase tracking-wider">
                       Donate Through Any EVM
                     </p>
-                    <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
+                    <div className="grid grid-cols-2 gap-2 lg:flex lg:flex-wrap">
                       {supportedChains.map((chain, index) => {
                         const chainLink = chainLinks[chain];
                         return (
@@ -78,7 +78,7 @@ export const DonationCard = ({
                             href={chainLink}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className={`inline-block ${index === 0 ? "col-span-2 sm:col-span-1" : ""}`}
+                            className={`inline-block ${index === 0 ? "col-span-2 lg:col-span-1" : ""}`}
                           >
                             <Button variant="outline" size="sm">
                               <ExternalLink className="size-4" />
diff --git a/apps/dashboard/features/donation/components/FundingSourcesCard.tsx b/apps/dashboard/features/donation/components/FundingSourcesCard.tsx
index 2d6a14b6b..f462474cb 100644
--- a/apps/dashboard/features/donation/components/FundingSourcesCard.tsx
+++ b/apps/dashboard/features/donation/components/FundingSourcesCard.tsx
@@ -11,8 +11,8 @@ export const FundingSourcesCard = ({
   sources,
 }: FundingSourcesCardProps) => {
   return (
-    <Card className="bg-surface-background sm:bg-surface-default w-full rounded-none border-0 shadow-sm">
-      <CardContent className="px-0 py-5 sm:p-5">
+    <Card className="bg-surface-background lg:bg-surface-default w-full rounded-none border-0 shadow-sm">
+      <CardContent className="px-0 py-5 lg:p-5">
         <div className="flex flex-col gap-4">
           <div>
             <h3 className="text-primary !text-alternative-sm font-mono font-medium uppercase">
@@ -24,7 +24,7 @@ export const FundingSourcesCard = ({
           </div>
 
           {/* Horizontal layout for funding sources */}
-          <div className="grid grid-cols-1 gap-2 md:grid-cols-3">
+          <div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
             {sources.map((source, index) => (
               <Link
                 key={index}
@@ -33,7 +33,7 @@ export const FundingSourcesCard = ({
                 rel="noopener noreferrer"
                 className="block h-full cursor-pointer"
               >
-                <div className="bg-surface-default text-primary border-light-dark flex h-full items-center gap-3 border p-3 transition-colors hover:bg-[#27272A] sm:bg-transparent">
+                <div className="bg-surface-default text-primary border-light-dark flex h-full items-center gap-3 border p-3 transition-colors hover:bg-[#27272A] lg:bg-transparent">
                   <DaoAvatarIcon
                     daoId={source.daoId}
                     className="size-9"
diff --git a/apps/dashboard/features/faq/FaqSection.tsx b/apps/dashboard/features/faq/FaqSection.tsx
index 016dbcf62..5c1f405a1 100644
--- a/apps/dashboard/features/faq/FaqSection.tsx
+++ b/apps/dashboard/features/faq/FaqSection.tsx
@@ -47,15 +47,15 @@ export const FaqSection = () => {
     >
       <div className="flex flex-col gap-6">
         {/* Mobile-only dashed line separator */}
-        <div className="border-light-dark -mx-4 border-t border-dashed sm:hidden" />
+        <div className="border-light-dark -mx-4 border-t border-dashed lg:hidden" />
 
         {/* FAQ Items */}
         <div className="relative flex flex-wrap gap-2">
           <div
             className={cn(
-              "absolute inset-0 z-10 transition-all duration-200 ease-in-out sm:bg-black sm:transition-opacity",
+              "absolute inset-0 z-10 transition-all duration-200 ease-in-out lg:bg-black lg:transition-opacity",
               openCardIds.length > 0
-                ? "hidden sm:block sm:opacity-50"
+                ? "hidden lg:block lg:opacity-50"
                 : "pointer-events-none opacity-0",
             )}
             onClick={() => setOpenCardIds([])}
@@ -66,7 +66,7 @@ export const FaqSection = () => {
             const isOpen = openCardIds.includes(cardId);
 
             return (
-              <div key={index} className="w-full md:w-[calc(50%-4px)]">
+              <div key={index} className="w-full lg:w-[calc(50%-4px)]">
                 <FaqCard
                   faqItem={faqItem}
                   isOpen={isOpen}
diff --git a/apps/dashboard/features/glossary/components/GlossaryContent.tsx b/apps/dashboard/features/glossary/components/GlossaryContent.tsx
index 4a2b81909..1089db075 100644
--- a/apps/dashboard/features/glossary/components/GlossaryContent.tsx
+++ b/apps/dashboard/features/glossary/components/GlossaryContent.tsx
@@ -23,12 +23,12 @@ export function GlossaryContent({
             {glossaryData[letter].map((term, index) => (
               <div
                 key={index}
-                className="bg-surface-secondary grid grid-cols-1 p-3 md:grid-cols-5"
+                className="bg-surface-secondary grid grid-cols-1 p-3 lg:grid-cols-5"
               >
                 <h5 className="text-primary pr-4 font-mono text-[13px] font-medium uppercase leading-[20px] tracking-[0.06em]">
                   {term.title}
                 </h5>
-                <p className="font-inter text-secondary text-sm font-normal leading-[20px] md:col-span-4">
+                <p className="font-inter text-secondary text-sm font-normal leading-[20px] lg:col-span-4">
                   {term.definition}
                 </p>
               </div>
diff --git a/apps/dashboard/features/glossary/components/GlossaryKeyboard.tsx b/apps/dashboard/features/glossary/components/GlossaryKeyboard.tsx
index c1d05162c..017a4981a 100644
--- a/apps/dashboard/features/glossary/components/GlossaryKeyboard.tsx
+++ b/apps/dashboard/features/glossary/components/GlossaryKeyboard.tsx
@@ -93,7 +93,7 @@ export function GlossaryMobileKeyboard({
   return (
     <div
       className={cn(
-        "bg-surface-background border-border-default sticky top-[57px] z-10 flex w-full gap-2 overflow-x-scroll border-b px-4 py-3 sm:top-0 lg:hidden",
+        "bg-surface-background border-border-default sticky top-[57px] z-10 flex w-full gap-2 overflow-x-scroll border-b px-4 py-3 lg:top-0 lg:hidden",
         className,
       )}
     >
diff --git a/apps/dashboard/features/glossary/components/GlossarySearchResults.tsx b/apps/dashboard/features/glossary/components/GlossarySearchResults.tsx
index 8dd6f0b03..b4ef013b3 100644
--- a/apps/dashboard/features/glossary/components/GlossarySearchResults.tsx
+++ b/apps/dashboard/features/glossary/components/GlossarySearchResults.tsx
@@ -19,13 +19,13 @@ export function GlossarySearchResults({ results }: GlossarySearchResultsProps) {
           results.map((result, index) => (
             <div
               key={index}
-              className="bg-surface-secondary grid grid-cols-1 p-4 md:grid-cols-5"
+              className="bg-surface-secondary grid grid-cols-1 p-4 lg:grid-cols-5"
             >
               <h5 className="text-primary font-roboto-mono text-alternative-sm pr-4 font-medium uppercase leading-[20px] tracking-[0.78px]">
                 {result.term.title}
               </h5>
               <p
-                className="font-inter text-secondary text-alternative-sm font-normal leading-[20px] md:col-span-4"
+                className="font-inter text-secondary text-alternative-sm font-normal leading-[20px] lg:col-span-4"
                 style={{ fontStyle: "normal" }}
               >
                 {result.term.definition}
diff --git a/apps/dashboard/features/governance-implementation/GovernanceImplementationSection.tsx b/apps/dashboard/features/governance-implementation/GovernanceImplementationSection.tsx
index 1be158dea..712d1e1ca 100644
--- a/apps/dashboard/features/governance-implementation/GovernanceImplementationSection.tsx
+++ b/apps/dashboard/features/governance-implementation/GovernanceImplementationSection.tsx
@@ -48,9 +48,9 @@ export const GovernanceImplementationSection = ({
     <div className="relative flex flex-wrap gap-4">
       <div
         className={cn(
-          "absolute inset-0 z-10 transition-all duration-200 ease-in-out sm:bg-black sm:transition-opacity",
+          "absolute inset-0 z-10 transition-all duration-200 ease-in-out lg:bg-black lg:transition-opacity",
           openCardIds.length > 0
-            ? "hidden sm:block sm:opacity-50"
+            ? "hidden lg:block lg:opacity-50"
             : "pointer-events-none opacity-0",
         )}
         onClick={() => setOpenCardIds([])}
diff --git a/apps/dashboard/features/governance-implementation/components/GovernanceImplementationCard.tsx b/apps/dashboard/features/governance-implementation/components/GovernanceImplementationCard.tsx
index 69768fb22..0afe6cb28 100644
--- a/apps/dashboard/features/governance-implementation/components/GovernanceImplementationCard.tsx
+++ b/apps/dashboard/features/governance-implementation/components/GovernanceImplementationCard.tsx
@@ -37,7 +37,7 @@ export const GovernanceImplementationCard = ({
       rightContent={<RiskLevelCardSmall status={field.riskLevel} />}
       isOpen={isOpen}
       onToggle={onToggle}
-      className="md:w-[calc(50%-10px)]"
+      className="lg:w-[calc(50%-10px)]"
       showCorners={true}
     >
       <div className="flex flex-col gap-3">
diff --git a/apps/dashboard/features/governance/components/governance-overview/GovernanceSection.tsx b/apps/dashboard/features/governance/components/governance-overview/GovernanceSection.tsx
index 5d013a25d..defff8716 100644
--- a/apps/dashboard/features/governance/components/governance-overview/GovernanceSection.tsx
+++ b/apps/dashboard/features/governance/components/governance-overview/GovernanceSection.tsx
@@ -81,7 +81,7 @@ export const GovernanceSection = () => {
         title="Governance"
         icon={<Landmark className="section-layout-icon" />}
         description="View and vote on executable proposals from this DAO."
-        className="sm:bg-transparent"
+        className="lg:bg-transparent"
       >
         <div className="flex-1">
           {loading && proposals.length === 0 ? (
@@ -124,10 +124,10 @@ export const GovernanceSection = () => {
 
 const ProposalItemSkeleton = () => {
   return (
-    <div className="bg-surface-default relative flex w-full flex-col items-center justify-between gap-3 px-3 py-3 md:flex-row md:gap-6">
+    <div className="bg-surface-default relative flex w-full flex-col items-center justify-between gap-3 px-3 py-3 lg:flex-row lg:gap-6">
       <div className="bg-surface-hover absolute left-0 top-1/2 h-[calc(100%-24px)] w-[2px] -translate-y-1/2 animate-pulse" />
 
-      <div className="flex w-full flex-col items-start justify-between gap-2 md:w-auto">
+      <div className="flex w-full flex-col items-start justify-between gap-2 lg:w-auto">
         <SkeletonRow
           parentClassName="flex animate-pulse"
           className="h-5 w-64"
@@ -148,7 +148,7 @@ const ProposalItemSkeleton = () => {
         </div>
       </div>
 
-      <div className="flex w-full shrink-0 flex-col items-center gap-1 md:w-[220px]">
+      <div className="flex w-full shrink-0 flex-col items-center gap-1 lg:w-[220px]">
         <div className="flex w-full items-center justify-between gap-2">
           <SkeletonRow
             parentClassName="flex animate-pulse"
diff --git a/apps/dashboard/features/governance/components/proposal-overview/ProposalHeader.tsx b/apps/dashboard/features/governance/components/proposal-overview/ProposalHeader.tsx
index 693c8c2b0..a8b758a74 100644
--- a/apps/dashboard/features/governance/components/proposal-overview/ProposalHeader.tsx
+++ b/apps/dashboard/features/governance/components/proposal-overview/ProposalHeader.tsx
@@ -26,8 +26,8 @@ export const ProposalHeader = ({
   proposalStatus,
 }: ProposalHeaderProps) => {
   return (
-    <div className="text-primary bg-surface-background border-border-default sticky -top-[57px] z-20 flex h-[65px] w-full shrink-0 items-center justify-between gap-6 border-b py-2 sm:top-0">
-      <div className="mx-auto flex w-full max-w-7xl flex-1 items-center justify-between px-5">
+    <div className="text-primary bg-surface-background border-border-default sticky -top-[57px] z-20 flex h-[65px] w-full shrink-0 items-center justify-between gap-6 border-b py-2 lg:top-0">
+      <div className="mx-auto flex w-full flex-1 items-center justify-between px-5">
         <div className="flex items-center gap-2">
           <Link href={`/${daoId}/governance`}>
             <IconButton
diff --git a/apps/dashboard/features/governance/components/proposal-overview/ProposalItem.tsx b/apps/dashboard/features/governance/components/proposal-overview/ProposalItem.tsx
index 5987b7d85..d1725a4bb 100644
--- a/apps/dashboard/features/governance/components/proposal-overview/ProposalItem.tsx
+++ b/apps/dashboard/features/governance/components/proposal-overview/ProposalItem.tsx
@@ -100,7 +100,7 @@ export const ProposalItem = ({ proposal, className }: ProposalItemProps) => {
     <Link
       href={`/${daoId}/governance/proposal/${proposal.id}`}
       className={cn(
-        "text-primary bg-surface-default hover:bg-surface-contrast relative flex w-full cursor-pointer flex-col items-center justify-between gap-3 px-3 py-3 transition-colors duration-300 md:flex-row md:gap-6",
+        "text-primary bg-surface-default hover:bg-surface-contrast relative flex w-full cursor-pointer flex-col items-center justify-between gap-3 px-3 py-3 transition-colors duration-300 lg:flex-row lg:gap-6",
         className,
       )}
       id={proposal.id}
@@ -112,7 +112,7 @@ export const ProposalItem = ({ proposal, className }: ProposalItemProps) => {
         )}
       />
 
-      <div className="flex w-full flex-col items-start justify-between gap-0.5 md:w-auto">
+      <div className="flex w-full flex-col items-start justify-between gap-0.5 lg:w-auto">
         <h3 className="text-primary">{proposal.title}</h3>
         <div className="font-inter text-secondary flex items-center justify-center gap-2 text-[14px] font-normal not-italic leading-[20px]">
           <p className={getTextStatusColor(proposal.status)}>
@@ -132,7 +132,7 @@ export const ProposalItem = ({ proposal, className }: ProposalItemProps) => {
         </div>
       </div>
 
-      <div className="flex w-full shrink-0 flex-col items-center gap-1 md:w-[220px]">
+      <div className="flex w-full shrink-0 flex-col items-center gap-1 lg:w-[220px]">
         <div className="font-inter text-secondary flex w-full items-center justify-between gap-2 text-[14px] font-normal not-italic leading-5">
           <p>
             {" "}
diff --git a/apps/dashboard/features/governance/components/proposal-overview/ProposalSection.tsx b/apps/dashboard/features/governance/components/proposal-overview/ProposalSection.tsx
index bf895f1f1..14da3a98f 100644
--- a/apps/dashboard/features/governance/components/proposal-overview/ProposalSection.tsx
+++ b/apps/dashboard/features/governance/components/proposal-overview/ProposalSection.tsx
@@ -68,7 +68,7 @@ export const ProposalSection = () => {
         address={address}
         proposalStatus={proposal.status}
       />
-      <div className="mx-auto w-full max-w-7xl">
+      <div className="mx-auto w-full">
         <div className="bg-surface-background sticky top-[65px] z-10 hidden h-5 w-full lg:block" />
 
         <div className="flex flex-col gap-6 p-5 lg:flex-row lg:pt-0">
diff --git a/apps/dashboard/features/governance/components/proposal-overview/ProposalSectionSkeleton.tsx b/apps/dashboard/features/governance/components/proposal-overview/ProposalSectionSkeleton.tsx
index f7f466a15..af2ab6d58 100644
--- a/apps/dashboard/features/governance/components/proposal-overview/ProposalSectionSkeleton.tsx
+++ b/apps/dashboard/features/governance/components/proposal-overview/ProposalSectionSkeleton.tsx
@@ -5,7 +5,7 @@ export const ProposalSectionSkeleton = () => {
     <div>
       {/* Header Skeleton */}
       <div className="border-border-default mx-auto flex h-[65px] w-full shrink-0 items-center justify-between gap-6 border-b px-5 py-2">
-        <div className="m-auto flex w-full max-w-7xl items-center justify-between">
+        <div className="border-light-dark m-auto flex w-full max-w-screen-2xl items-center justify-between border">
           <div className="flex items-center gap-2">
             <SkeletonRow
               parentClassName="flex animate-pulse"
@@ -41,7 +41,7 @@ export const ProposalSectionSkeleton = () => {
       </div>
 
       {/* Main Content Skeleton */}
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 p-5 lg:flex-row">
+      <div className="border-light-dark mx-auto flex w-full max-w-screen-2xl flex-col gap-6 border p-5 lg:flex-row">
         {/* Left Side - Title, Info, Status */}
         <div className="left-0 top-5 flex h-fit w-full shrink-0 flex-col gap-6 self-start lg:sticky lg:w-[420px]">
           {/* Title Section Skeleton */}
diff --git a/apps/dashboard/features/governance/components/proposal-overview/TabsSection.tsx b/apps/dashboard/features/governance/components/proposal-overview/TabsSection.tsx
index 7045c2813..98a382140 100644
--- a/apps/dashboard/features/governance/components/proposal-overview/TabsSection.tsx
+++ b/apps/dashboard/features/governance/components/proposal-overview/TabsSection.tsx
@@ -21,7 +21,7 @@ export const TabsSection = ({ proposal }: TabsSectionProps) => {
   return (
     <div className="bg-surface-default flex flex-1 flex-col lg:min-w-0">
       {/* Tabs Section */}
-      <div className="bg-surface-default border-border-default sticky left-0 top-[7px] z-10 flex w-full shrink-0 gap-2 border-b px-4 sm:top-[65px] lg:top-[85px]">
+      <div className="bg-surface-default border-border-default sticky left-0 top-[7px] z-10 flex w-full shrink-0 gap-2 border-b px-4 lg:top-[65px] lg:top-[85px]">
         <Tab
           isActive={activeTab === "description"}
           onClick={() => setActiveTab("description")}
diff --git a/apps/dashboard/features/governance/components/proposal-overview/VotesTable.tsx b/apps/dashboard/features/governance/components/proposal-overview/VotesTable.tsx
index 1b7170030..4876f74fe 100644
--- a/apps/dashboard/features/governance/components/proposal-overview/VotesTable.tsx
+++ b/apps/dashboard/features/governance/components/proposal-overview/VotesTable.tsx
@@ -116,8 +116,8 @@ export const VotesTable = <TData, TValue>({
     <div className="scrollbar-custom border-border-default relative w-full overflow-x-auto rounded-md border">
       <table
         className={cn(
-          "text-secondary md:bg-surface-default w-full caption-bottom border-separate border-spacing-0 bg-transparent text-sm",
-          mobileTableFixed ? "table-fixed" : "table-auto md:table-fixed",
+          "text-secondary lg:bg-surface-default w-full caption-bottom border-separate border-spacing-0 bg-transparent text-sm",
+          mobileTableFixed ? "table-fixed" : "table-auto lg:table-fixed",
           className,
         )}
       >
diff --git a/apps/dashboard/features/holders-and-delegates/HoldersAndDelegatesSection.tsx b/apps/dashboard/features/holders-and-delegates/HoldersAndDelegatesSection.tsx
index a3efb63e4..d37e34909 100644
--- a/apps/dashboard/features/holders-and-delegates/HoldersAndDelegatesSection.tsx
+++ b/apps/dashboard/features/holders-and-delegates/HoldersAndDelegatesSection.tsx
@@ -80,22 +80,24 @@ export const HoldersAndDelegatesSection = ({ daoId }: { daoId: DaoIdEnum }) => {
   };
 
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.holdersAndDelegates.title}
-      subtitle={"Holders & Delegates"}
-      icon={<UserCheck className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.holdersAndDelegates.description}
-    >
-      <SubSectionsContainer>
-        <div className="flex h-full w-full items-center justify-between">
-          <HoldersAndDelegatesLeftComponent />
-          <SwitcherDateMobile
-            defaultValue={days || defaultDays}
-            setTimeInterval={setDays}
-          />
-        </div>
-        {tabComponentMap[activeTab as TabId]}
-      </SubSectionsContainer>
-    </TheSectionLayout>
+    <div>
+      <TheSectionLayout
+        title={PAGES_CONSTANTS.holdersAndDelegates.title}
+        subtitle={"Holders & Delegates"}
+        icon={<UserCheck className="section-layout-icon" />}
+        description={PAGES_CONSTANTS.holdersAndDelegates.description}
+      >
+        <SubSectionsContainer>
+          <div className="flex h-full w-full items-center justify-between">
+            <HoldersAndDelegatesLeftComponent />
+            <SwitcherDateMobile
+              defaultValue={days || defaultDays}
+              setTimeInterval={setDays}
+            />
+          </div>
+          {tabComponentMap[activeTab as TabId]}
+        </SubSectionsContainer>
+      </TheSectionLayout>
+    </div>
   );
 };
diff --git a/apps/dashboard/features/holders-and-delegates/components/HoldersAndDelegatesDrawer.tsx b/apps/dashboard/features/holders-and-delegates/components/HoldersAndDelegatesDrawer.tsx
index 6fac76437..b5d655e16 100644
--- a/apps/dashboard/features/holders-and-delegates/components/HoldersAndDelegatesDrawer.tsx
+++ b/apps/dashboard/features/holders-and-delegates/components/HoldersAndDelegatesDrawer.tsx
@@ -149,7 +149,7 @@ export const HoldersAndDelegatesDrawer = ({
                 </div>
                 <div className="flex items-center justify-center gap-2">
                   {/* Desktop */}
-                  <div className="hidden sm:block">
+                  <div className="hidden lg:block">
                     <EnsAvatar
                       address={address as `0x${string}`}
                       size="sm"
@@ -161,7 +161,7 @@ export const HoldersAndDelegatesDrawer = ({
                   </div>
 
                   {/* Mobile */}
-                  <div className="block sm:hidden">
+                  <div className="block lg:hidden">
                     <EnsAvatar
                       address={address as `0x${string}`}
                       size="sm"
diff --git a/apps/dashboard/features/holders-and-delegates/delegate/drawer/votes/DelegateProposalsActivity.tsx b/apps/dashboard/features/holders-and-delegates/delegate/drawer/votes/DelegateProposalsActivity.tsx
index e341ea1ea..155462dc1 100644
--- a/apps/dashboard/features/holders-and-delegates/delegate/drawer/votes/DelegateProposalsActivity.tsx
+++ b/apps/dashboard/features/holders-and-delegates/delegate/drawer/votes/DelegateProposalsActivity.tsx
@@ -102,7 +102,7 @@ export const DelegateProposalsActivity = ({
   return (
     <>
       <div className="p-4">
-        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
           <MetricCard
             icon={<Hand className="size-3.5" />}
             title="Voted Proposals"
diff --git a/apps/dashboard/features/holders-and-delegates/delegate/drawer/voting-power/VotingPower.tsx b/apps/dashboard/features/holders-and-delegates/delegate/drawer/voting-power/VotingPower.tsx
index 71f7b6a74..778cbbecb 100644
--- a/apps/dashboard/features/holders-and-delegates/delegate/drawer/voting-power/VotingPower.tsx
+++ b/apps/dashboard/features/holders-and-delegates/delegate/drawer/voting-power/VotingPower.tsx
@@ -18,7 +18,7 @@ const ChartLegend = ({
 }) => {
   if (loading) {
     return (
-      <div className="flex w-full flex-wrap items-center justify-between gap-2 sm:justify-normal sm:gap-3">
+      <div className="flex w-full flex-wrap items-center justify-between gap-2 lg:justify-normal lg:gap-3">
         {Array.from({ length: 10 }, (_, i) => (
           <div key={i} className="flex items-center gap-2">
             <SkeletonRow
@@ -36,7 +36,7 @@ const ChartLegend = ({
   }
 
   return (
-    <div className="flex w-full flex-wrap items-center justify-between gap-2 sm:justify-normal sm:gap-3">
+    <div className="flex w-full flex-wrap items-center justify-between gap-2 lg:justify-normal lg:gap-3">
       {items.map((item) => {
         return (
           <div key={item.label} className="flex items-center gap-2">
@@ -92,9 +92,9 @@ export const VotingPower = ({
   }
   return (
     <div className="flex w-full flex-col gap-4 p-4">
-      <div className="border-light-dark text-primary flex h-fit w-full flex-col gap-4 overflow-y-auto border p-4 sm:flex-row">
+      <div className="border-light-dark text-primary flex h-fit w-full flex-col gap-4 overflow-y-auto border p-4 lg:flex-row">
         <div className="flex h-full w-full flex-col">
-          <div className="flex w-full flex-col gap-4 md:flex-row">
+          <div className="flex w-full flex-col gap-4 lg:flex-row">
             <div>
               <ThePieChart
                 currentVotingPower={currentVotingPower}
@@ -120,10 +120,10 @@ export const VotingPower = ({
                 </div>
               </div>
 
-              <div className="hidden h-px w-full bg-[#27272A] sm:flex" />
+              <div className="hidden h-px w-full bg-[#27272A] lg:flex" />
 
               {/* Delegators */}
-              <div className="hidden flex-col gap-2 sm:flex">
+              <div className="hidden flex-col gap-2 lg:flex">
                 <p className="text-secondary text-alternative-xs font-mono font-medium uppercase">
                   Delegators
                 </p>
diff --git a/apps/dashboard/features/holders-and-delegates/token-holder/drawer/top-interactions/TopInteractions.tsx b/apps/dashboard/features/holders-and-delegates/token-holder/drawer/top-interactions/TopInteractions.tsx
index 4dc44721b..fe96c7661 100644
--- a/apps/dashboard/features/holders-and-delegates/token-holder/drawer/top-interactions/TopInteractions.tsx
+++ b/apps/dashboard/features/holders-and-delegates/token-holder/drawer/top-interactions/TopInteractions.tsx
@@ -18,7 +18,7 @@ const ChartLegend = ({
 }) => {
   if (loading) {
     return (
-      <div className="flex w-full flex-wrap items-center justify-between gap-2 sm:justify-normal sm:gap-3">
+      <div className="flex w-full flex-wrap items-center justify-between gap-2 lg:justify-normal lg:gap-3">
         {Array.from({ length: 10 }, (_, i) => (
           <div key={i} className="flex items-center gap-2">
             <SkeletonRow
@@ -36,7 +36,7 @@ const ChartLegend = ({
   }
 
   return (
-    <div className="flex w-full flex-wrap items-center justify-between gap-2 sm:justify-normal sm:gap-3">
+    <div className="flex w-full flex-wrap items-center justify-between gap-2 lg:justify-normal lg:gap-3">
       {items.map((item) => {
         return (
           <div key={item.label} className="flex items-center gap-2">
@@ -95,9 +95,9 @@ export const TopInteractions = ({
 
   return (
     <div className="flex w-full flex-col gap-4 p-4">
-      <div className="border-light-dark text-primary flex h-fit w-full flex-col gap-4 overflow-y-auto border p-4 sm:flex-row">
+      <div className="border-light-dark text-primary flex h-fit w-full flex-col gap-4 overflow-y-auto border p-4 lg:flex-row">
         <div className="flex h-full w-full flex-col">
-          <div className="flex w-full flex-col gap-4 md:flex-row">
+          <div className="flex w-full flex-col gap-4 lg:flex-row">
             <div>
               <TopInteractionsChart
                 currentValue={totalCount || 0}
@@ -147,9 +147,9 @@ export const TopInteractions = ({
                 </div>
               </div>
 
-              <div className="hidden h-px w-full bg-[#27272A] sm:flex" />
+              <div className="hidden h-px w-full bg-[#27272A] lg:flex" />
 
-              <div className="hidden flex-col gap-2 sm:flex">
+              <div className="hidden flex-col gap-2 lg:flex">
                 <p className="text-secondary text-alternative-xs font-mono font-medium uppercase">
                   Top Interaction (by aggregated value)
                 </p>
diff --git a/apps/dashboard/features/panel/PanelSection.tsx b/apps/dashboard/features/panel/PanelSection.tsx
index 93ce3213c..2963d048b 100644
--- a/apps/dashboard/features/panel/PanelSection.tsx
+++ b/apps/dashboard/features/panel/PanelSection.tsx
@@ -19,7 +19,7 @@ export const PanelSection = () => {
   const [currency, setCurrency] = useState<"usd" | "eth">("usd");
 
   return (
-    <div className="flex flex-col gap-8 p-4 pt-[70px] sm:gap-2 sm:pt-5">
+    <div className="flex flex-col gap-8 p-4 pt-[70px] lg:gap-2 lg:pt-5">
       <div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
         <DaoProtectionLevels />
         <TreasuryMonitoring />
@@ -60,14 +60,14 @@ const SwitcherCurrency = ({
   return (
     <Tabs
       defaultValue={currency}
-      className="mt-4 w-full gap-1 sm:mt-0 sm:w-auto"
+      className="mt-4 w-full gap-1 lg:mt-0 lg:w-auto"
     >
       <TabsList>
         {currencies.map((currency) => (
           <TabsTrigger
             key={currency}
             className={cn(
-              "w-full cursor-pointer px-2 text-sm font-medium sm:w-auto",
+              "w-full cursor-pointer px-2 text-sm font-medium lg:w-auto",
               isSmall
                 ? "min-w-[60px] px-1.5 py-0.5"
                 : "min-w-[84px] px-3 py-1.5",
diff --git a/apps/dashboard/features/panel/components/PanelTable.tsx b/apps/dashboard/features/panel/components/PanelTable.tsx
index ad4dc133f..cac319574 100644
--- a/apps/dashboard/features/panel/components/PanelTable.tsx
+++ b/apps/dashboard/features/panel/components/PanelTable.tsx
@@ -96,7 +96,7 @@ export const PanelTable = ({ currency }: PanelTableProps) => {
       return (
         <SkeletonRow
           parentClassName="flex animate-pulse justify-end w-full"
-          className="h-5 w-full max-w-20 md:max-w-32"
+          className="h-5 w-full max-w-20 lg:max-w-32"
         />
       );
     }
@@ -157,7 +157,7 @@ export const PanelTable = ({ currency }: PanelTableProps) => {
       return (
         <SkeletonRow
           parentClassName="flex animate-pulse justify-end w-full"
-          className="h-5 w-full max-w-20 md:max-w-32"
+          className="h-5 w-full max-w-20 lg:max-w-32"
         />
       );
     }
@@ -220,7 +220,7 @@ export const PanelTable = ({ currency }: PanelTableProps) => {
       return (
         <SkeletonRow
           parentClassName="flex animate-pulse justify-end w-full"
-          className="h-5 w-full max-w-20 md:max-w-32"
+          className="h-5 w-full max-w-20 lg:max-w-32"
         />
       );
     }
@@ -266,7 +266,7 @@ export const PanelTable = ({ currency }: PanelTableProps) => {
       return (
         <SkeletonRow
           parentClassName="flex animate-pulse justify-end w-full"
-          className="h-5 w-full max-w-20 md:max-w-32"
+          className="h-5 w-full max-w-20 lg:max-w-32"
         />
       );
     }
diff --git a/apps/dashboard/features/resilience-stages/ResilienceStagesSection.tsx b/apps/dashboard/features/resilience-stages/ResilienceStagesSection.tsx
index 83b304089..5b12296c3 100644
--- a/apps/dashboard/features/resilience-stages/ResilienceStagesSection.tsx
+++ b/apps/dashboard/features/resilience-stages/ResilienceStagesSection.tsx
@@ -29,20 +29,24 @@ export const ResilienceStagesSection = ({
   });
 
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.resilienceStages.title}
-      riskLevel={<RiskLevelCard status={stageToRiskMapping[currentDaoStage]} />}
-      icon={<BarChart className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.resilienceStages.description}
-    >
-      <SubSectionsContainer>
-        <StagesContainer
-          daoId={daoId}
-          currentDaoStage={currentDaoStage}
-          daoConfig={daoConfig}
-          context="section"
-        />
-      </SubSectionsContainer>
-    </TheSectionLayout>
+    <div>
+      <TheSectionLayout
+        title={PAGES_CONSTANTS.resilienceStages.title}
+        riskLevel={
+          <RiskLevelCard status={stageToRiskMapping[currentDaoStage]} />
+        }
+        icon={<BarChart className="section-layout-icon" />}
+        description={PAGES_CONSTANTS.resilienceStages.description}
+      >
+        <SubSectionsContainer>
+          <StagesContainer
+            daoId={daoId}
+            currentDaoStage={currentDaoStage}
+            daoConfig={daoConfig}
+            context="section"
+          />
+        </SubSectionsContainer>
+      </TheSectionLayout>
+    </div>
   );
 };
diff --git a/apps/dashboard/features/resilience-stages/components/StageContent.tsx b/apps/dashboard/features/resilience-stages/components/StageContent.tsx
index 9794d2726..2c7526964 100644
--- a/apps/dashboard/features/resilience-stages/components/StageContent.tsx
+++ b/apps/dashboard/features/resilience-stages/components/StageContent.tsx
@@ -39,8 +39,8 @@ export const StageContent = ({
 
   return (
     <div className="flex w-full flex-col gap-2">
-      <div className="bg-surface-contrast flex w-full flex-col gap-4 rounded-md p-3 sm:flex-row">
-        <div className="flex flex-col gap-1 sm:max-w-[200px]">
+      <div className="bg-surface-contrast flex w-full flex-col gap-4 rounded-md p-3 lg:flex-row">
+        <div className="flex flex-col gap-1 lg:max-w-[200px]">
           <h3 className="text-alternative-sm text-primary font-mono font-medium uppercase tracking-wide">
             {title}
           </h3>
diff --git a/apps/dashboard/features/resilience-stages/components/StageTag.tsx b/apps/dashboard/features/resilience-stages/components/StageTag.tsx
index 48623f078..55346a0ac 100644
--- a/apps/dashboard/features/resilience-stages/components/StageTag.tsx
+++ b/apps/dashboard/features/resilience-stages/components/StageTag.tsx
@@ -42,9 +42,9 @@ export const StageTag = ({
     >
       <span className="text-alternative-sm whitespace-nowrap font-mono text-[13px] font-medium leading-[20px]">
         {showNoTag && "NO "}
-        <span className="hidden sm:inline">STAGE </span>
+        <span className="hidden lg:inline">STAGE </span>
 
-        {showStageText && <span className="inline sm:hidden">STAGE </span>}
+        {showStageText && <span className="inline lg:hidden">STAGE </span>}
         {tagStage === Stage.UNKNOWN ? "?" : !showNoTag && tagStage}
       </span>
     </div>
diff --git a/apps/dashboard/features/resilience-stages/components/StagesContainer.tsx b/apps/dashboard/features/resilience-stages/components/StagesContainer.tsx
index 2d4ce6efa..7d69ea154 100644
--- a/apps/dashboard/features/resilience-stages/components/StagesContainer.tsx
+++ b/apps/dashboard/features/resilience-stages/components/StagesContainer.tsx
@@ -134,7 +134,7 @@ export const StagesContainer = ({
   return (
     <div
       className={cn("flex h-full w-full flex-col gap-1", {
-        "sm:bg-surface-default gap-4 md:p-4": context === "overview",
+        "lg:bg-surface-default gap-4 lg:p-4": context === "overview",
       })}
     >
       {context === "overview" && (
@@ -231,7 +231,7 @@ export const StagesContainer = ({
           />
           {context === "overview" && (
             <div
-              className="border-light-dark bg-surface-contrast relative flex items-center justify-between gap-1 border-b p-2 sm:border-none sm:p-3"
+              className="border-light-dark bg-surface-contrast relative flex items-center justify-between gap-1 border-b p-2 lg:border-none lg:p-3"
               onMouseLeave={() => !isMobile && setShowTooltip(false)}
             >
               {currentDaoStage === Stage.NONE ? (
diff --git a/apps/dashboard/features/risk-analysis/RiskAnalysisSection.tsx b/apps/dashboard/features/risk-analysis/RiskAnalysisSection.tsx
index ba4b33c13..ebc54ada2 100644
--- a/apps/dashboard/features/risk-analysis/RiskAnalysisSection.tsx
+++ b/apps/dashboard/features/risk-analysis/RiskAnalysisSection.tsx
@@ -97,20 +97,20 @@ export const RiskAnalysisSection = ({ daoId }: { daoId: DaoIdEnum }) => {
   });
 
   return (
-    <div className="flex flex-col gap-[13px] md:flex-row">
-      <div className="md:w-2/5">
+    <div className="flex flex-col gap-[13px] lg:flex-row">
+      <div className="lg:w-2/5">
         <RiskAreaCardWrapper
           title="Risk Areas"
           riskAreas={customizedRiskAreas}
           activeRiskId={activeRisk}
           onRiskClick={handleRiskClick}
-          className="grid-cols-2 sm:grid-cols-1"
+          className="grid-cols-2 lg:grid-cols-1"
           variant={RiskAreaCardEnum.RISK_ANALYSIS}
           withTitle={false}
         />
       </div>
 
-      <div className="md:w-3/5">
+      <div className="lg:w-3/5">
         {activeRisk ? (
           riskDescriptions[activeRisk]
         ) : (
diff --git a/apps/dashboard/features/risk-analysis/components/RiskDescription.tsx b/apps/dashboard/features/risk-analysis/components/RiskDescription.tsx
index 50695d2a4..60f7ab5d6 100644
--- a/apps/dashboard/features/risk-analysis/components/RiskDescription.tsx
+++ b/apps/dashboard/features/risk-analysis/components/RiskDescription.tsx
@@ -38,7 +38,7 @@ export const RiskDescription = ({
   };
 
   return (
-    <CorneredBox className="bg-surface-background sm:bg-surface-default p-4">
+    <CorneredBox className="bg-surface-background lg:bg-surface-default p-4">
       <div className="flex flex-col gap-4">
         {/* Header with title and risk level */}
         <div className="flex w-full items-center justify-start gap-2">
diff --git a/apps/dashboard/features/terms/TermsSection.tsx b/apps/dashboard/features/terms/TermsSection.tsx
index 3b7abf8cd..06a704443 100644
--- a/apps/dashboard/features/terms/TermsSection.tsx
+++ b/apps/dashboard/features/terms/TermsSection.tsx
@@ -145,7 +145,7 @@ export const TermsSection = () => {
     <div className="flex w-full justify-center">
       <TheSectionLayout
         title={PAGES_CONSTANTS.terms.title}
-        className="bg-surface-background! mt-[56px]! sm:mt-0! max-w-[770px] gap-4"
+        className="bg-surface-background! mt-[56px]! lg:mt-0! max-w-[770px] gap-4"
       >
         <div className="flex w-full flex-col items-center justify-center gap-2 px-2">
           <span className="text-secondary text-sm">
diff --git a/apps/dashboard/features/token-distribution/components/TokenDistributionDialog.tsx b/apps/dashboard/features/token-distribution/components/TokenDistributionDialog.tsx
index 6e2b45e0e..a0a27b227 100644
--- a/apps/dashboard/features/token-distribution/components/TokenDistributionDialog.tsx
+++ b/apps/dashboard/features/token-distribution/components/TokenDistributionDialog.tsx
@@ -102,10 +102,10 @@ export const TokenDistributionDialog = ({
               .map(([category, metrics], index, visibleEntries) => {
                 return (
                   <div key={category}>
-                    <CardTitle className="!text-alternative-sm text-secondary mb-1.5 flex items-center font-mono font-medium uppercase tracking-wide sm:gap-2.5">
+                    <CardTitle className="!text-alternative-sm text-secondary mb-1.5 flex items-center font-mono font-medium uppercase tracking-wide lg:gap-2.5">
                       {category}
                     </CardTitle>
-                    <div className="flex w-full flex-wrap gap-2 sm:gap-3">
+                    <div className="flex w-full flex-wrap gap-2 lg:gap-3">
                       {metrics.map((metric) => {
                         const isMetricAlreadyApplied = appliedMetrics[
                           category
diff --git a/apps/dashboard/features/token-distribution/components/TokenDistributionWrapper.tsx b/apps/dashboard/features/token-distribution/components/TokenDistributionWrapper.tsx
index 6bfae198f..1a6a577ff 100644
--- a/apps/dashboard/features/token-distribution/components/TokenDistributionWrapper.tsx
+++ b/apps/dashboard/features/token-distribution/components/TokenDistributionWrapper.tsx
@@ -10,7 +10,7 @@ export const TokenDistributionWrapper = ({
   return (
     <div
       className={cn(
-        "border-light-dark sm:bg-surface-default text-primary relative flex h-[300px] w-full flex-col items-center justify-center sm:rounded-lg",
+        "border-light-dark lg:bg-surface-default text-primary relative flex h-[300px] w-full flex-col items-center justify-center lg:rounded-lg",
         {
           "-mb-1 h-44": context === "overview",
         },
diff --git a/apps/dashboard/shared/components/accordions/AccordionContentArea.tsx b/apps/dashboard/shared/components/accordions/AccordionContentArea.tsx
index 72a6fc17e..d3765fe48 100644
--- a/apps/dashboard/shared/components/accordions/AccordionContentArea.tsx
+++ b/apps/dashboard/shared/components/accordions/AccordionContentArea.tsx
@@ -32,7 +32,7 @@ export const AccordionContentArea = ({
   return (
     <Card
       className={cn(
-        "border-light-dark bg-surface-default xl4k:max-w-full relative flex w-full flex-col flex-wrap rounded-none border shadow-sm transition-all duration-200 hover:cursor-pointer sm:gap-0 sm:gap-3.5",
+        "border-light-dark bg-surface-default xl4k:max-w-full relative flex w-full flex-col flex-wrap rounded-none border shadow-sm transition-all duration-200 hover:cursor-pointer lg:gap-0 lg:gap-3.5",
         isOpen ? "border-middle-dark z-20" : "hover:bg-middle-dark",
         className,
       )}
@@ -66,7 +66,7 @@ export const AccordionContentArea = ({
               -
             </span>
           </div>
-          <div className="flex items-center gap-2 sm:flex-col md:flex-row md:text-center">
+          <div className="flex items-center gap-2 lg:flex-row lg:flex-col lg:text-center">
             <h3 className="text-primary truncate text-sm font-medium">
               {title}
             </h3>
@@ -84,11 +84,11 @@ export const AccordionContentArea = ({
       </div>
       <div
         className={cn(
-          "border-middle-dark sm:bg-surface-default z-20 border-t p-3 sm:absolute sm:border",
+          "border-middle-dark lg:bg-surface-default z-20 border-t p-3 lg:absolute lg:border",
           "-left-px top-full w-[calc(100%+2px)]",
           isOpen
             ? "visible h-auto transition-all duration-500 ease-in-out"
-            : "hidden transition-all duration-300 ease-in-out sm:h-0",
+            : "hidden transition-all duration-300 ease-in-out lg:h-0",
         )}
         onClick={(e) => {
           if (isDesktop || isTablet) {
diff --git a/apps/dashboard/shared/components/alerts/BannerAlert.tsx b/apps/dashboard/shared/components/alerts/BannerAlert.tsx
index 0babcf7f8..837acecd9 100644
--- a/apps/dashboard/shared/components/alerts/BannerAlert.tsx
+++ b/apps/dashboard/shared/components/alerts/BannerAlert.tsx
@@ -47,8 +47,8 @@ export const BannerAlert = ({
         mapVariantToColor[variant],
       )}
     >
-      <div className="flex items-center gap-2 tracking-wider sm:flex-row">
-        <div className="flex flex-wrap items-center gap-1 sm:flex-row">
+      <div className="flex items-center gap-2 tracking-wider lg:flex-row">
+        <div className="flex flex-wrap items-center gap-1 lg:flex-row">
           <div className="flex gap-2 font-mono text-xs uppercase text-white">
             <div className="flex-shrink-0">{icon}</div>
             <div className="flex flex-wrap gap-1">{text}</div>
diff --git a/apps/dashboard/shared/components/buttons/ButtonHeaderSidebar.tsx b/apps/dashboard/shared/components/buttons/ButtonHeaderSidebar.tsx
index 0fe96cd61..68a179145 100644
--- a/apps/dashboard/shared/components/buttons/ButtonHeaderSidebar.tsx
+++ b/apps/dashboard/shared/components/buttons/ButtonHeaderSidebar.tsx
@@ -14,6 +14,7 @@ interface ButtonHeaderSidebarProps extends ButtonHTMLAttributes<
   className?: string;
   isGlobal?: boolean;
   isAction?: boolean;
+  isCollapsed?: boolean;
 }
 
 export const ButtonHeaderSidebar = ({
@@ -23,6 +24,7 @@ export const ButtonHeaderSidebar = ({
   className,
   isGlobal = false,
   isAction = false,
+  isCollapsed = false,
   onClick,
   ...props
 }: ButtonHeaderSidebarProps) => {
@@ -64,10 +66,12 @@ export const ButtonHeaderSidebar = ({
   }
 
   const baseClassName = cn(
-    "group flex w-full cursor-pointer items-center gap-3 rounded-md border border-transparent p-2 text-sm font-medium",
+    "flex h-[33px] w-full cursor-pointer items-center gap-2 px-2 py-2 text-sm font-medium transition-all",
     {
-      "cursor-default bg-white": isActive,
-      "hover:border-light-dark hover:bg-surface-contrast": !isActive,
+      "bg-primary text-inverted": isActive,
+      "bg-surface-background text-secondary hover:bg-surface-contrast":
+        !isActive,
+      "justify-center": isCollapsed,
     },
     className,
   );
@@ -75,19 +79,24 @@ export const ButtonHeaderSidebar = ({
   const content = (
     <>
       <Icon
-        className={cn("size-4", {
+        className={cn("size-4 shrink-0 transition-colors", {
           "text-inverted": isActive,
           "text-secondary group-hover:text-primary": !isActive,
         })}
       />
-      <p
-        className={cn({
-          "text-inverted": isActive,
-          "text-secondary group-hover:text-primary": !isActive,
-        })}
-      >
-        {label}
-      </p>
+      {!isCollapsed && (
+        <p
+          className={cn(
+            "flex-1 whitespace-nowrap text-[14px] font-medium leading-[20px] transition-colors",
+            {
+              "text-inverted": isActive,
+              "text-secondary group-hover:text-primary": !isActive,
+            },
+          )}
+        >
+          {label}
+        </p>
+      )}
     </>
   );
 
@@ -97,7 +106,7 @@ export const ButtonHeaderSidebar = ({
       <button
         type="button"
         onClick={onClick}
-        className={baseClassName}
+        className={cn(baseClassName, "group")}
         {...props}
       >
         {content}
@@ -112,7 +121,7 @@ export const ButtonHeaderSidebar = ({
       onClick={onClick}
       prefetch={true}
       {...props}
-      className={baseClassName}
+      className={cn(baseClassName, "group")}
     >
       {content}
     </Link>
diff --git a/apps/dashboard/shared/components/buttons/ButtonMainNav.tsx b/apps/dashboard/shared/components/buttons/ButtonMainNav.tsx
new file mode 100644
index 000000000..8fde378da
--- /dev/null
+++ b/apps/dashboard/shared/components/buttons/ButtonMainNav.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { cn } from "@/shared/utils/";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ButtonHTMLAttributes, ElementType } from "react";
+
+interface ButtonMainNavProps extends ButtonHTMLAttributes<
+  HTMLButtonElement | HTMLAnchorElement
+> {
+  page: string;
+  icon: ElementType;
+  label: string;
+  className?: string;
+  isGlobal?: boolean;
+  isAction?: boolean;
+}
+
+export const ButtonMainNav = ({
+  page,
+  icon: Icon,
+  label,
+  className,
+  isGlobal = false,
+  isAction = false,
+  onClick,
+  ...props
+}: ButtonMainNavProps) => {
+  const pathname = usePathname();
+
+  // Determine if this button should be highlighted as active
+  const isActive = (() => {
+    if (page === "/") {
+      if (isGlobal) {
+        // Panel (global) is active only on home page
+        return pathname === "/";
+      }
+    }
+    // Other pages are active when the pathname matches
+    return pathname === `/${page}` || pathname === `/${page}/`;
+  })();
+
+  // Generate the target path (only for navigation buttons)
+  let targetPath: string = "#";
+
+  if (!isAction) {
+    if (isGlobal) {
+      // Global pages always use absolute path (e.g., /alerts)
+      targetPath = page === "/" ? "/" : `/${page}`;
+    }
+  }
+
+  const baseClassName = cn(
+    "flex flex-col items-center justify-center gap-1 w-[56px] rounded-md py-2 transition-colors",
+    {
+      "bg-primary rounded-md": isActive,
+      "rounded-md hover:bg-surface-contrast": !isActive,
+    },
+    className,
+  );
+
+  const content = (
+    <>
+      <Icon
+        className={cn("size-4 shrink-0 transition-colors", {
+          "text-inverted": isActive,
+          "text-secondary group-hover:text-primary": !isActive,
+        })}
+      />
+      <p
+        className={cn(
+          "whitespace-pre-wrap text-center text-[12px] font-medium leading-[16px] transition-colors",
+          {
+            "text-inverted": isActive,
+            "text-secondary group-hover:text-primary": !isActive,
+          },
+        )}
+      >
+        {label}
+      </p>
+    </>
+  );
+
+  // Render as button for action buttons
+  if (isAction) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(baseClassName, "group")}
+        {...props}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  // Render as Link for navigation buttons
+  return (
+    <Link
+      href={targetPath}
+      onClick={onClick}
+      prefetch={true}
+      {...props}
+      className={cn(baseClassName, "group")}
+    >
+      {content}
+    </Link>
+  );
+};
diff --git a/apps/dashboard/shared/components/cards/BaseCardDaoInfo.tsx b/apps/dashboard/shared/components/cards/BaseCardDaoInfo.tsx
index f613f3b7d..7c63b6b76 100644
--- a/apps/dashboard/shared/components/cards/BaseCardDaoInfo.tsx
+++ b/apps/dashboard/shared/components/cards/BaseCardDaoInfo.tsx
@@ -29,8 +29,8 @@ interface BaseCardDaoInfoProps {
 
 export const BaseCardDaoInfo = ({ data }: BaseCardDaoInfoProps) => {
   return (
-    <Card className="sm:bg-surface-default xl4k:max-w-full w-full! flex flex-col border-none sm:max-w-full">
-      <CardHeader id="daoinfo-basecard-header" className="py-2! px-0 sm:p-2">
+    <Card className="lg:bg-surface-default xl4k:max-w-full w-full! flex flex-col border-none lg:max-w-full">
+      <CardHeader id="daoinfo-basecard-header" className="py-2! px-0 lg:p-2">
         <div
           className={cn(
             "flex w-full items-center",
@@ -42,7 +42,7 @@ export const BaseCardDaoInfo = ({ data }: BaseCardDaoInfoProps) => {
             {data.title}
             {data.optionalHeaderValue && (
               <>
-                <div className="hidden size-1 rounded-full bg-gray-600 sm:flex" />
+                <div className="hidden size-1 rounded-full bg-gray-600 lg:flex" />
                 {data.optionalHeaderValue}
               </>
             )}
@@ -50,9 +50,9 @@ export const BaseCardDaoInfo = ({ data }: BaseCardDaoInfoProps) => {
         </div>
       </CardHeader>
 
-      <CardContent className="flex h-full w-full flex-col gap-4 p-0 sm:gap-5 sm:p-2">
+      <CardContent className="flex h-full w-full flex-col gap-4 p-0 lg:gap-5 lg:p-2">
         {data.sections.map((section, index) => (
-          <div key={index} className="flex justify-between gap-2 sm:flex-col">
+          <div key={index} className="flex justify-between gap-2 lg:flex-col">
             <div className="flex w-full items-center gap-1.5">
               <p className="text-secondary text-sm font-normal">
                 {section.title}
@@ -60,7 +60,7 @@ export const BaseCardDaoInfo = ({ data }: BaseCardDaoInfoProps) => {
               {section.tooltip && <TooltipInfo text={section.tooltip} />}
             </div>
 
-            <div className="flex h-full w-full justify-end gap-2 sm:justify-start">
+            <div className="flex h-full w-full justify-end gap-2 lg:justify-start">
               {section.items.map((item, index) => (
                 <div key={index} className="flex">
                   {item}
diff --git a/apps/dashboard/shared/components/cards/RiskAreaCard.tsx b/apps/dashboard/shared/components/cards/RiskAreaCard.tsx
index 4367fda12..7bf0d2f02 100644
--- a/apps/dashboard/shared/components/cards/RiskAreaCard.tsx
+++ b/apps/dashboard/shared/components/cards/RiskAreaCard.tsx
@@ -134,7 +134,7 @@ const RiskAreaCardInternal = ({
         >
           <span
             className={cn(
-              "block font-mono font-medium text-black sm:tracking-wider",
+              "block font-mono font-medium text-black lg:tracking-wider",
               {
                 "!text-secondary": risk.level === RiskLevel.NONE,
                 "!text-success":
@@ -164,7 +164,7 @@ const RiskAreaCardInternal = ({
             riskLevelIcons[risk.level as RiskLevel]
           ) : (
             <div className="flex items-center justify-center font-mono text-xs">
-              <CounterClockwiseClockIcon className="text-secondary size-4 sm:size-5" />
+              <CounterClockwiseClockIcon className="text-secondary size-4 lg:size-5" />
             </div>
           )}
         </div>
@@ -283,7 +283,7 @@ export const RiskAreaCard = ({
           className={cn(
             "w-full p-1.5",
             isActive &&
-              "border-middle-dark bg-surface-background sm:bg-surface-default border-2",
+              "border-middle-dark bg-surface-background lg:bg-surface-default border-2",
           )}
         >
           <RiskAreaCardInternal
@@ -293,7 +293,7 @@ export const RiskAreaCard = ({
             variant={variant}
           />
         </div>
-        <div className="hidden h-full w-[13px] items-center justify-center sm:flex">
+        <div className="hidden h-full w-[13px] items-center justify-center lg:flex">
           {isActive && (
             <div className="border-l-middle-dark border-y-13 border-l-13 size-0 border-y-transparent" />
           )}
@@ -347,18 +347,18 @@ export const RiskAreaCardWrapper = ({
   return (
     <div
       className={cn("flex w-full flex-col gap-1", {
-        "sm:bg-surface-default gap-4 md:p-4":
+        "lg:bg-surface-default gap-4 lg:p-4":
           variant === RiskAreaCardEnum.DAO_OVERVIEW,
       })}
     >
       {/* Desktop title */}
       {withTitle &&
         (variant !== RiskAreaCardEnum.DAO_OVERVIEW ? (
-          <h3 className="text-primary mb-3 hidden font-mono text-xs font-medium tracking-wider sm:block">
+          <h3 className="text-primary mb-3 hidden font-mono text-xs font-medium tracking-wider lg:block">
             {title}
           </h3>
         ) : (
-          <div className="flex h-5 items-center gap-2 px-5 sm:px-0">
+          <div className="flex h-5 items-center gap-2 px-5 lg:px-0">
             <DefaultLink
               href={`${daoId.toLowerCase()}/risk-analysis`}
               openInNewTab={false}
diff --git a/apps/dashboard/shared/components/cards/RiskLevelCardSmall.tsx b/apps/dashboard/shared/components/cards/RiskLevelCardSmall.tsx
index 981bfc3cc..26dd86c9f 100644
--- a/apps/dashboard/shared/components/cards/RiskLevelCardSmall.tsx
+++ b/apps/dashboard/shared/components/cards/RiskLevelCardSmall.tsx
@@ -50,13 +50,13 @@ const RiskLabel = ({
 }) => (
   <div className="flex h-full flex-row gap-1 rounded-l-full">
     <p
-      className={`items-center gap-1 text-${color} hidden font-mono text-xs font-medium md:flex`}
+      className={`items-center gap-1 text-${color} hidden font-mono text-xs font-medium lg:flex`}
     >
       {status ?? "------"}
       {icon}
     </p>
     <p
-      className={`items-center gap-1 text-${color} flex font-mono text-xs font-medium md:hidden`}
+      className={`items-center gap-1 text-${color} flex font-mono text-xs font-medium lg:hidden`}
     >
       {icon}
     </p>
diff --git a/apps/dashboard/shared/components/cards/SwitchCardDaoInfoItem.tsx b/apps/dashboard/shared/components/cards/SwitchCardDaoInfoItem.tsx
index f94397f00..9fd405cf4 100644
--- a/apps/dashboard/shared/components/cards/SwitchCardDaoInfoItem.tsx
+++ b/apps/dashboard/shared/components/cards/SwitchCardDaoInfoItem.tsx
@@ -37,7 +37,7 @@ const CustomBadge = ({ switched, icon, href }: CustomBadgeProps) => {
   return (
     <Badge
       className={cn(
-        "!bg-surface-contrast/20 sm:bg-surface-contrast! gap-1.5! px-2.5! py-1! flex h-full w-full lg:w-fit",
+        "!bg-surface-contrast/20 lg:bg-surface-contrast! gap-1.5! px-2.5! py-1! flex h-full w-full lg:w-fit",
         {
           "hover:bg-middle-dark! cursor-pointer! transition-all duration-300":
             href,
diff --git a/apps/dashboard/shared/components/cards/TheCardChartLayout.tsx b/apps/dashboard/shared/components/cards/TheCardChartLayout.tsx
index be0fa0ff4..2de2a258e 100644
--- a/apps/dashboard/shared/components/cards/TheCardChartLayout.tsx
+++ b/apps/dashboard/shared/components/cards/TheCardChartLayout.tsx
@@ -32,13 +32,13 @@ export const TheCardChartLayout = ({
   infoText,
 }: TheCardChartLayoutProps) => {
   return (
-    <Card className="sm:border-light-dark sm:bg-surface-default xl4k:max-w-full flex flex-col gap-4 rounded-lg border-none sm:max-w-full sm:gap-0 sm:border">
+    <Card className="lg:border-light-dark lg:bg-surface-default xl4k:max-w-full flex flex-col gap-4 rounded-lg border-none lg:max-w-full lg:gap-0 lg:border">
       <CardContent className="flex h-full w-full flex-col gap-6 p-0">
         {title && (
           <div className="flex h-full w-full items-center">
             <div className="flex h-full w-full flex-col">
               <div className="flex h-full w-full gap-1.5">
-                <CardTitle className="!text-alternative-sm text-primary flex items-center text-nowrap font-mono font-medium uppercase tracking-wide sm:gap-2.5">
+                <CardTitle className="!text-alternative-sm text-primary flex items-center text-nowrap font-mono font-medium uppercase tracking-wide lg:gap-2.5">
                   {title}
                 </CardTitle>
                 {csvData && (
@@ -65,8 +65,8 @@ export const TheCardChartLayout = ({
           </div>
         )}
         {infoText && (
-          <CardDescription className="bg-surface-contrast flex w-full items-start gap-2 rounded-lg p-2 sm:items-center">
-            <div className="mt-0.5 sm:mt-0">
+          <CardDescription className="bg-surface-contrast flex w-full items-start gap-2 rounded-lg p-2 lg:items-center">
+            <div className="mt-0.5 lg:mt-0">
               <Info className="text-primary size-4 w-fit" />
             </div>
             <p className="text-secondary text-sm font-normal">{infoText}</p>
diff --git a/apps/dashboard/shared/components/containers/TheSectionLayout.tsx b/apps/dashboard/shared/components/containers/TheSectionLayout.tsx
index 7eb27cd37..de86ef06e 100644
--- a/apps/dashboard/shared/components/containers/TheSectionLayout.tsx
+++ b/apps/dashboard/shared/components/containers/TheSectionLayout.tsx
@@ -36,7 +36,7 @@ export const TheSectionLayout = ({
   return (
     <div
       className={cn(
-        "flex h-full w-full flex-col gap-8 border-none px-4 py-5 sm:gap-6 sm:p-5",
+        "flex h-full w-full flex-col gap-8 border-none px-4 py-5 lg:gap-6 lg:p-5",
         className,
       )}
     >
diff --git a/apps/dashboard/shared/components/design-system/alerts/banner-alert/BannerAlert.tsx b/apps/dashboard/shared/components/design-system/alerts/banner-alert/BannerAlert.tsx
index bb8e45dc1..d0fd68b99 100644
--- a/apps/dashboard/shared/components/design-system/alerts/banner-alert/BannerAlert.tsx
+++ b/apps/dashboard/shared/components/design-system/alerts/banner-alert/BannerAlert.tsx
@@ -53,8 +53,8 @@ export const BannerAlert = ({
         mapVariantToColor[variant],
       )}
     >
-      <div className="flex items-center gap-2 tracking-wider sm:flex-row">
-        <div className="flex flex-wrap items-center gap-1 sm:flex-row">
+      <div className="flex items-center gap-2 tracking-wider lg:flex-row">
+        <div className="flex flex-wrap items-center gap-1 lg:flex-row">
           <div className="flex gap-2 font-mono text-xs uppercase text-white">
             <div className="flex-shrink-0">{icon}</div>
             <div className="flex flex-wrap gap-1">
diff --git a/apps/dashboard/shared/components/design-system/alerts/inline-alert/InlineAlert.tsx b/apps/dashboard/shared/components/design-system/alerts/inline-alert/InlineAlert.tsx
index a51e1cfe2..d301efc17 100644
--- a/apps/dashboard/shared/components/design-system/alerts/inline-alert/InlineAlert.tsx
+++ b/apps/dashboard/shared/components/design-system/alerts/inline-alert/InlineAlert.tsx
@@ -34,7 +34,7 @@ export const InlineAlert = ({ text, variant = "info" }: InlineAlertProps) => {
           mapVariantToIcon[variant].bgColor,
         )}
       >
-        <div className="mt-0.5 sm:mt-0">{mapVariantToIcon[variant].icon}</div>
+        <div className="mt-0.5 lg:mt-0">{mapVariantToIcon[variant].icon}</div>
         <p className="text-secondary text-sm font-normal">{text}</p>
       </CardDescription>
     </div>
diff --git a/apps/dashboard/shared/components/design-system/footer/Footer.tsx b/apps/dashboard/shared/components/design-system/footer/Footer.tsx
index f2d263590..e157e23e2 100644
--- a/apps/dashboard/shared/components/design-system/footer/Footer.tsx
+++ b/apps/dashboard/shared/components/design-system/footer/Footer.tsx
@@ -34,7 +34,7 @@ export const Footer = ({ variant, className }: FooterProps) => {
 
   return (
     <footer className={cn(footerVariant({ variant }), className)}>
-      <div className="flex flex-col items-center justify-center gap-2 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-col items-center justify-center gap-2 lg:flex-row lg:items-center lg:justify-between">
         <div className="flex items-center gap-2">
           <DefaultLink
             href={releaseUrl}
@@ -56,7 +56,7 @@ export const Footer = ({ variant, className }: FooterProps) => {
             Blockful
           </DefaultLink>
         </div>
-        <div className="flex gap-2 sm:hidden">
+        <div className="flex gap-2 lg:hidden">
           <DefaultLink
             href="https://blockful.gitbook.io/anticapture/"
             openInNewTab
@@ -85,7 +85,7 @@ export const Footer = ({ variant, className }: FooterProps) => {
           </DefaultLink>
         </div>
         <div className="flex items-center gap-2">
-          <div className="hidden sm:flex">
+          <div className="hidden lg:flex">
             <DefaultLink
               href="https://blockful.gitbook.io/anticapture/"
               openInNewTab
@@ -94,7 +94,7 @@ export const Footer = ({ variant, className }: FooterProps) => {
             >
               Docs
             </DefaultLink>
-            <p className="text-dimmed mx-2 hidden items-center uppercase sm:flex">
+            <p className="text-dimmed mx-2 hidden items-center uppercase lg:flex">
               /
             </p>
             <DefaultLink
@@ -105,7 +105,7 @@ export const Footer = ({ variant, className }: FooterProps) => {
             >
               Terms of Service
             </DefaultLink>
-            <p className="text-dimmed mx-2 hidden items-center uppercase sm:flex">
+            <p className="text-dimmed mx-2 hidden items-center uppercase lg:flex">
               /
             </p>
             <DefaultLink
@@ -117,7 +117,7 @@ export const Footer = ({ variant, className }: FooterProps) => {
               Give Feedback
             </DefaultLink>
           </div>
-          <p className="text-dimmed hidden items-center uppercase sm:flex">/</p>
+          <p className="text-dimmed hidden items-center uppercase lg:flex">/</p>
           <Link
             href="https://github.com/blockful/anticapture"
             target="_blank"
diff --git a/apps/dashboard/shared/components/design-system/links/underlined-link/UnderlinedLink.stories.tsx b/apps/dashboard/shared/components/design-system/links/underlined-link/UnderlinedLink.stories.tsx
index 5778fe259..bcb4d2f03 100644
--- a/apps/dashboard/shared/components/design-system/links/underlined-link/UnderlinedLink.stories.tsx
+++ b/apps/dashboard/shared/components/design-system/links/underlined-link/UnderlinedLink.stories.tsx
@@ -60,8 +60,8 @@ export const WithIconAndResponsiveText: Story = {
       <>
         <Key className="text-tangerine size-3.5" />
         <span className="text-white">3/5</span>
-        <span className="hidden sm:inline">required for transactions</span>
-        <span className="inline sm:hidden"> required</span>
+        <span className="hidden lg:inline">required for transactions</span>
+        <span className="inline lg:hidden"> required</span>
       </>
     ),
   },
diff --git a/apps/dashboard/shared/components/design-system/section/SectionTitle.tsx b/apps/dashboard/shared/components/design-system/section/SectionTitle.tsx
index 8af99c46c..c920a6665 100644
--- a/apps/dashboard/shared/components/design-system/section/SectionTitle.tsx
+++ b/apps/dashboard/shared/components/design-system/section/SectionTitle.tsx
@@ -16,22 +16,22 @@ export const SectionTitle = ({
   return (
     <div className="flex w-full flex-col gap-2">
       <div className="flex w-full items-center justify-between">
-        <div className="flex flex-col items-center gap-2 sm:flex-row">
+        <div className="flex flex-col items-center gap-2 lg:flex-row">
           <div className="flex items-center gap-2">
             {icon}
-            <h4 className="text-primary text-xl font-medium leading-7 tracking-[-0.5%] sm:text-left">
+            <h4 className="text-primary text-xl font-medium leading-7 tracking-[-0.5%] lg:text-left">
               {title}
             </h4>
           </div>
-          <div className="hidden items-center sm:flex">{riskLevel}</div>
+          <div className="hidden items-center lg:flex">{riskLevel}</div>
         </div>
       </div>
       <div>
-        <p className="text-secondary flex w-full flex-col text-justify font-normal sm:text-sm">
+        <p className="text-secondary flex w-full flex-col text-justify font-normal lg:text-sm">
           {description}
         </p>
       </div>
-      <div className="flex items-center sm:hidden">{riskLevel}</div>
+      <div className="flex items-center lg:hidden">{riskLevel}</div>
     </div>
   );
 };
diff --git a/apps/dashboard/shared/components/design-system/section/SubSectionContainer.stories.tsx b/apps/dashboard/shared/components/design-system/section/SubSectionContainer.stories.tsx
index 3de05e1d2..f298eb4ce 100644
--- a/apps/dashboard/shared/components/design-system/section/SubSectionContainer.stories.tsx
+++ b/apps/dashboard/shared/components/design-system/section/SubSectionContainer.stories.tsx
@@ -186,7 +186,7 @@ export const WithMixedContent = {
         </div>
       </SubSection>
 
-      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         <SubSection subsectionTitle="Total Users" dateRange="Last 30 days">
           <div className="bg-surface-hover mt-4 rounded-lg p-4 text-center">
             <Users className="text-primary mx-auto mb-2 size-8" />
diff --git a/apps/dashboard/shared/components/design-system/section/SubSectionsContainer.tsx b/apps/dashboard/shared/components/design-system/section/SubSectionsContainer.tsx
index 88b1f237c..16d006aec 100644
--- a/apps/dashboard/shared/components/design-system/section/SubSectionsContainer.tsx
+++ b/apps/dashboard/shared/components/design-system/section/SubSectionsContainer.tsx
@@ -15,7 +15,7 @@ export const SubSectionsContainer = ({
   return (
     <div
       className={cn(
-        "sm:bg-surface-default flex h-full flex-col gap-6 sm:p-5",
+        "lg:bg-surface-default flex h-full flex-col gap-6 lg:p-5",
         className,
       )}
     >
diff --git a/apps/dashboard/shared/components/design-system/section/SubsectionTitle.tsx b/apps/dashboard/shared/components/design-system/section/SubsectionTitle.tsx
index 462625715..53f9fcf6f 100644
--- a/apps/dashboard/shared/components/design-system/section/SubsectionTitle.tsx
+++ b/apps/dashboard/shared/components/design-system/section/SubsectionTitle.tsx
@@ -19,7 +19,7 @@ export const SubsectionTitle = ({
   return (
     <div
       className={cn("flex h-full w-full flex-col justify-between gap-2", {
-        "sm:flex-row": switcherComponent,
+        "lg:flex-row": switcherComponent,
       })}
     >
       <div className="flex flex-col items-start">
diff --git a/apps/dashboard/shared/components/design-system/table/Table.tsx b/apps/dashboard/shared/components/design-system/table/Table.tsx
index f5d34a9f7..bc1a5aaf3 100644
--- a/apps/dashboard/shared/components/design-system/table/Table.tsx
+++ b/apps/dashboard/shared/components/design-system/table/Table.tsx
@@ -215,8 +215,8 @@ export const Table = <TData, TValue>({
     >
       <TableContainer
         className={cn(
-          "text-secondary md:bg-surface-default border-separate border-spacing-0 bg-transparent",
-          mobileTableFixed ? "table-fixed" : "table-auto md:table-fixed",
+          "text-secondary lg:bg-surface-default border-separate border-spacing-0 bg-transparent",
+          mobileTableFixed ? "table-fixed" : "table-auto lg:table-fixed",
         )}
       >
         <TableHeader className="bg-surface-contrast text-secondary sticky -top-px z-30 text-xs font-medium">
@@ -231,7 +231,7 @@ export const Table = <TData, TValue>({
                     className={cn(
                       header.column.getIndex() === 0 &&
                         stickyFirstColumn &&
-                        "bg-surface-contrast sticky-border-r sticky left-0 z-20 md:relative",
+                        "bg-surface-contrast sticky-border-r sticky left-0 z-20 lg:relative",
                       headerSizeVariants[size],
                       columnMeta?.columnClassName,
                     )}
@@ -312,7 +312,7 @@ export const Table = <TData, TValue>({
                             className={cn(
                               cell.column.getIndex() === 0 &&
                                 stickyFirstColumn &&
-                                "bg-surface-background sticky-border-r sm:bg-surface-default sticky left-0 z-20 shadow-md shadow-black md:relative md:bg-transparent",
+                                "bg-surface-background sticky-border-r lg:bg-surface-default sticky left-0 z-20 shadow-md shadow-black lg:relative lg:bg-transparent",
                               rowSizeVariants[size],
                               colMeta?.columnClassName,
                             )}
diff --git a/apps/dashboard/shared/components/design-system/table/components/TableContainer.tsx b/apps/dashboard/shared/components/design-system/table/components/TableContainer.tsx
index 2c9d060ef..553a53b85 100644
--- a/apps/dashboard/shared/components/design-system/table/components/TableContainer.tsx
+++ b/apps/dashboard/shared/components/design-system/table/components/TableContainer.tsx
@@ -9,7 +9,7 @@ export const TableContainer = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "md:border-light-dark scrollbar-thin relative w-full overflow-y-auto md:rounded-lg md:border",
+        "lg:border-light-dark scrollbar-thin relative w-full overflow-y-auto lg:rounded-lg lg:border",
         className,
       )}
       style={{
diff --git a/apps/dashboard/shared/components/design-system/table/components/TableHeader.tsx b/apps/dashboard/shared/components/design-system/table/components/TableHeader.tsx
index 031aa82a9..a2c931751 100644
--- a/apps/dashboard/shared/components/design-system/table/components/TableHeader.tsx
+++ b/apps/dashboard/shared/components/design-system/table/components/TableHeader.tsx
@@ -8,7 +8,7 @@ export const TableHeader = ({
     <thead
       data-slot="table-header"
       className={cn(
-        "bg-surface-contrast font-medium [&_th:first-child]:border-r [&_th:first-child]:border-white/10 md:[&_th]:border-none [&_tr]:border-b",
+        "bg-surface-contrast font-medium [&_th:first-child]:border-r [&_th:first-child]:border-white/10 lg:[&_th]:border-none [&_tr]:border-b",
         className,
       )}
       {...props}
diff --git a/apps/dashboard/shared/components/design-system/table/components/TableRow.tsx b/apps/dashboard/shared/components/design-system/table/components/TableRow.tsx
index f69fa0c70..e31ec1202 100644
--- a/apps/dashboard/shared/components/design-system/table/components/TableRow.tsx
+++ b/apps/dashboard/shared/components/design-system/table/components/TableRow.tsx
@@ -8,9 +8,9 @@ export const TableRow = ({
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-accent data-[state=selected]:bg-muted border-b transition-colors [&_td:first-child]:border-r [&_td:first-child]:border-white/10 md:[&_td:first-child]:border-none",
+        "hover:bg-accent data-[state=selected]:bg-muted border-b transition-colors [&_td:first-child]:border-r [&_td:first-child]:border-white/10 lg:[&_td:first-child]:border-none",
         // "[&_td:first-child]:sticky [&_td:first-child]:left-0 [&_td:first-child]:z-10",
-        // "[&_td:first-child]:shadow-[2px_0px_8px_2px_rgba(0,0,0,1.00)] sm:[&_td:first-child]:shadow-none",
+        // "[&_td:first-child]:shadow-[2px_0px_8px_2px_rgba(0,0,0,1.00)] lg:[&_td:first-child]:shadow-none",
         className,
       )}
       {...props}
diff --git a/apps/dashboard/shared/components/dropdowns/HeaderDAOSidebarDropdown.tsx b/apps/dashboard/shared/components/dropdowns/HeaderDAOSidebarDropdown.tsx
index 6ba41acd1..fdf0a0288 100644
--- a/apps/dashboard/shared/components/dropdowns/HeaderDAOSidebarDropdown.tsx
+++ b/apps/dashboard/shared/components/dropdowns/HeaderDAOSidebarDropdown.tsx
@@ -4,7 +4,7 @@ import React, { useState, useRef, useEffect, useCallback } from "react";
 import { Button } from "@/shared/components";
 import { useParams, useRouter } from "next/navigation";
 import { DaoIdEnum } from "@/shared/types/daos";
-import { ChevronsUpDown } from "lucide-react";
+import { ChevronsUpDown, ChevronsRight, ChevronsLeft } from "lucide-react";
 import { cn } from "@/shared/utils/";
 import { DaoAvatarIcon } from "@/shared/components/icons";
 import daoConfigByDaoId from "@/shared/dao-config";
@@ -17,7 +17,15 @@ type Item = {
   name: string;
 };
 
-export const HeaderDAOSidebarDropdown = () => {
+interface HeaderDAOSidebarDropdownProps {
+  isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
+}
+
+export const HeaderDAOSidebarDropdown = ({
+  isCollapsed = false,
+  onToggleCollapse,
+}: HeaderDAOSidebarDropdownProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selectedHeaderSidebarItem, setSelectedHeaderSidebarItem] =
     useState<number>(0);
@@ -85,33 +93,56 @@ export const HeaderDAOSidebarDropdown = () => {
 
   return (
     <div
-      className="border-light-dark relative z-50 inline-block h-[57px] w-full shrink-0 border-b sm:h-[65px]"
+      className="border-light-dark relative z-50 inline-block h-[57px] w-full shrink-0 border-b lg:h-[65px]"
       ref={dropdownRef}
+      onMouseLeave={() => setIsOpen(false)}
     >
-      <div className="flex h-full items-center justify-between px-3.5 py-3.5 sm:p-2">
+      <div className="flex h-full items-center px-2 py-2">
         <Button
           variant="ghost"
           size="sm"
-          className="w-full"
+          className="flex flex-1 items-center justify-between overflow-hidden rounded-none transition-all"
           onClick={toggleDropdown}
           aria-expanded={isOpen}
           aria-haspopup="menu"
         >
-          <div className="flex w-full items-center gap-2">
-            <div>{currentItem?.icon}</div>
-            <p className="text-primary text-[18px] font-medium leading-6">
-              {currentItem?.label}
-            </p>
-          </div>
-          <div>
-            <ChevronsUpDown className="text-secondary size-5" />
+          <div className="flex min-w-0 items-center gap-2">
+            <div className="shrink-0">{currentItem?.icon}</div>
+            {!isCollapsed && (
+              <p className="text-primary truncate whitespace-nowrap text-[18px] font-medium leading-6">
+                {currentItem?.label}
+              </p>
+            )}
           </div>
+          {!isCollapsed && (
+            <div className="shrink-0">
+              <ChevronsUpDown className="text-secondary size-5 transition-all duration-300" />
+            </div>
+          )}
         </Button>
       </div>
+      {onToggleCollapse && (
+        <button
+          onClick={onToggleCollapse}
+          className="bg-surface-default border-light-dark hover:bg-surface-contrast absolute right-0 top-1/2 z-50 -translate-y-1/2 translate-x-[65%] cursor-pointer border p-1 transition-colors"
+          aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          {isCollapsed ? (
+            <ChevronsRight className="text-primary size-[14px]" />
+          ) : (
+            <ChevronsLeft className="text-primary size-[14px]" />
+          )}
+        </button>
+      )}
 
       {isOpen && (
         <div
-          className="border-light-dark bg-surface-default absolute left-0 right-0 z-50 mx-4 mt-1 w-auto rounded-lg border shadow-lg transition-all duration-200 ease-in-out sm:mx-0"
+          className={cn(
+            "border-light-dark bg-surface-default absolute z-50 rounded-lg border shadow-lg transition-all duration-200 ease-in-out",
+            isCollapsed
+              ? "left-0 top-full w-[200px]"
+              : "left-0 right-0 mx-4 w-auto lg:mx-0",
+          )}
           role="menu"
         >
           {dropdownItems.map((item) => (
@@ -124,10 +155,10 @@ export const HeaderDAOSidebarDropdown = () => {
               role="menuitemradio"
               aria-checked={item.id === selectedHeaderSidebarItem}
             >
-              <div className="flex w-full items-center gap-1.5 sm:gap-2">
+              <div className="flex w-full items-center gap-1.5 lg:gap-2">
                 <DaoAvatarIcon
                   daoId={item.name as DaoIdEnum}
-                  className={cn("size-icon-xxs sm:size-icon-sm")}
+                  className={cn("size-icon-xxs lg:size-icon-sm")}
                   isRounded
                 />
                 <h1 className={cn("text-primary text-sm font-normal")}>
diff --git a/apps/dashboard/shared/components/index.ts b/apps/dashboard/shared/components/index.ts
index 188732e69..f04a9f2c7 100644
--- a/apps/dashboard/shared/components/index.ts
+++ b/apps/dashboard/shared/components/index.ts
@@ -4,6 +4,7 @@ export * from "@/shared/components/cards/BaseCardDaoInfo";
 export * from "@/shared/components/header/BaseHeaderLayoutSidebar";
 export * from "@/shared/components/buttons/ButtonHeaderSidebar";
 export * from "@/shared/components/buttons/ButtonHeaderDAOSidebarMobile";
+export * from "@/shared/components/buttons/ButtonMainNav";
 export * from "@/shared/components/dropdowns/HeaderDAOSidebarDropdown";
 export * from "@/shared/components/wallet/ConnectWallet";
 export * from "@/shared/components/cards/RiskLevelCard";
diff --git a/apps/dashboard/shared/components/messages/TelegramBotMessage.tsx b/apps/dashboard/shared/components/messages/TelegramBotMessage.tsx
index 458d41127..c3788a5a7 100644
--- a/apps/dashboard/shared/components/messages/TelegramBotMessage.tsx
+++ b/apps/dashboard/shared/components/messages/TelegramBotMessage.tsx
@@ -9,16 +9,16 @@ import { ANTICAPTURE_TELEGRAM_BOT } from "@/shared/constants/social-media";
 export const TelegramBotMessage = () => {
   const { daoId } = useParams() as { daoId: string };
   return (
-    <div className="flex items-center gap-3 tracking-wider sm:flex-row">
-      <Send className="text-primary hidden size-4 sm:block" />
-      <div className="flex flex-col gap-3 sm:flex-row">
+    <div className="flex items-center gap-3 tracking-wider lg:flex-row">
+      <Send className="text-primary hidden size-4 lg:block" />
+      <div className="flex flex-col gap-3 lg:flex-row">
         <div className="flex gap-3">
           <span className="text-primary font-mono font-normal">
             RECEIVE REAL-TIME{" "}
             {daoConfigByDaoId[
               daoId.toUpperCase() as DaoIdEnum
             ].name.toUpperCase()}{" "}
-            <span className="hidden sm:inline">SECURITY</span> UPDATES.
+            <span className="hidden lg:inline">SECURITY</span> UPDATES.
           </span>
         </div>
         <div className="flex items-center gap-3">
diff --git a/apps/dashboard/shared/components/skeletons/PageSkeleton.tsx b/apps/dashboard/shared/components/skeletons/PageSkeleton.tsx
index 020356c90..5b790149b 100644
--- a/apps/dashboard/shared/components/skeletons/PageSkeleton.tsx
+++ b/apps/dashboard/shared/components/skeletons/PageSkeleton.tsx
@@ -2,7 +2,7 @@
 
 export const PageSkeleton = () => {
   return (
-    <div className="flex min-h-screen w-full flex-col gap-8 border-b-2 border-b-white/10 px-4 sm:gap-6 sm:border-none sm:p-5">
+    <div className="flex min-h-screen w-full flex-col gap-8 border-b-2 border-b-white/10 px-4 lg:gap-6 lg:border-none lg:p-5">
       {/* Section Title Skeleton */}
       <div className="flex w-full flex-col gap-2">
         <div className="flex h-full w-full flex-col gap-6">
diff --git a/apps/dashboard/shared/components/skeletons/SkeletonDaoInfoCards.tsx b/apps/dashboard/shared/components/skeletons/SkeletonDaoInfoCards.tsx
index 286eb28c1..ac98cf5d6 100644
--- a/apps/dashboard/shared/components/skeletons/SkeletonDaoInfoCards.tsx
+++ b/apps/dashboard/shared/components/skeletons/SkeletonDaoInfoCards.tsx
@@ -9,10 +9,10 @@ import {
 
 export const SkeletonDaoInfoCards = () => {
   return (
-    <Card className="sm:bg-surface-default xl4k:max-w-full flex w-[342px]! flex-col border-none sm:w-full! sm:max-w-full">
+    <Card className="lg:bg-surface-default xl4k:max-w-full w-[342px]! lg:w-full! flex flex-col border-none lg:max-w-full">
       <CardHeader
         id="daoinfo-basecard-header"
-        className="min-h-[32px] px-0 py-2! sm:p-2"
+        className="py-2! min-h-[32px] px-0 lg:p-2"
       >
         <div className="flex w-full items-center justify-start">
           <CardTitle className="text-primary flex items-center gap-2 text-xs font-semibold uppercase">
@@ -22,11 +22,11 @@ export const SkeletonDaoInfoCards = () => {
         </div>
       </CardHeader>
 
-      <CardContent className="flex min-h-[71px] w-full flex-col gap-4 p-0 sm:gap-5 sm:p-2">
+      <CardContent className="flex min-h-[71px] w-full flex-col gap-4 p-0 lg:gap-5 lg:p-2">
         {[1, 2].map((_, index) => (
           <div
             key={index}
-            className="flex min-h-[32px] justify-between gap-2 sm:flex-col"
+            className="flex min-h-[32px] justify-between gap-2 lg:flex-col"
           >
             <div className="flex w-full items-center gap-1.5">
               <h1 className="text-secondary text-sm font-normal">
@@ -35,7 +35,7 @@ export const SkeletonDaoInfoCards = () => {
               <div className="size-3 animate-pulse rounded-full bg-gray-700/50" />
             </div>
 
-            <div className="flex h-full w-full justify-end gap-2 sm:justify-start">
+            <div className="flex h-full w-full justify-end gap-2 lg:justify-start">
               {[1, 2].map((_, itemIndex) => (
                 <div key={itemIndex} className="flex">
                   <div className="h-6 w-16 animate-pulse rounded-full bg-gray-700/50" />
diff --git a/apps/dashboard/shared/components/tables/TheTable.tsx b/apps/dashboard/shared/components/tables/TheTable.tsx
index 2700f98d8..b8125f336 100644
--- a/apps/dashboard/shared/components/tables/TheTable.tsx
+++ b/apps/dashboard/shared/components/tables/TheTable.tsx
@@ -115,8 +115,8 @@ export const TheTable = <TData, TValue>({
   return (
     <Table
       className={cn(
-        "text-secondary md:bg-surface-default border-separate border-spacing-0 bg-transparent",
-        mobileTableFixed ? "table-fixed" : "table-auto md:table-fixed",
+        "text-secondary lg:bg-surface-default border-separate border-spacing-0 bg-transparent",
+        mobileTableFixed ? "table-fixed" : "table-auto lg:table-fixed",
         className,
       )}
     >
diff --git a/apps/dashboard/shared/components/ui/button.tsx b/apps/dashboard/shared/components/ui/button.tsx
index 63149ce3b..5de60ed9f 100644
--- a/apps/dashboard/shared/components/ui/button.tsx
+++ b/apps/dashboard/shared/components/ui/button.tsx
@@ -36,7 +36,8 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
diff --git a/apps/dashboard/shared/components/ui/drawer.tsx b/apps/dashboard/shared/components/ui/drawer.tsx
index d5be2fb15..082ccb87d 100644
--- a/apps/dashboard/shared/components/ui/drawer.tsx
+++ b/apps/dashboard/shared/components/ui/drawer.tsx
@@ -60,7 +60,7 @@ function DrawerContent({
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
           "data-[vaul-drawer-direction=bottom]:border-border-default data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:h-full data-[vaul-drawer-direction=bottom]:max-w-[800px] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
           "data-[vaul-drawer-direction=right]:border-border-default data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-[801px] data-[vaul-drawer-direction=right]:rounded-l data-[vaul-drawer-direction=right]:border-l",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:lg:max-w-sm",
           className,
         )}
         {...props}
@@ -77,7 +77,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-header"
       className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center lg:gap-1.5 lg:text-left",
         className,
       )}
       {...props}
diff --git a/apps/dashboard/shared/components/ui/table.tsx b/apps/dashboard/shared/components/ui/table.tsx
index 6733997a4..b8a0642af 100644
--- a/apps/dashboard/shared/components/ui/table.tsx
+++ b/apps/dashboard/shared/components/ui/table.tsx
@@ -7,7 +7,7 @@ function Table({
   ...props
 }: React.HTMLAttributes<HTMLTableElement>) {
   return (
-    <div className="md:border-light-dark relative w-full overflow-auto md:rounded-lg md:border">
+    <div className="lg:border-light-dark relative w-full overflow-auto lg:rounded-lg lg:border">
       <table
         data-slot="table"
         className={cn("w-full caption-bottom text-sm", className)}
@@ -25,8 +25,8 @@ function TableHeader({
     <thead
       data-slot="table-header"
       className={cn(
-        "bg-surface-contrast font-medium [&_th:first-child]:border-r [&_th:first-child]:border-white/10 md:[&_th]:border-none [&_tr]:border-b",
-        // "[&_th:first-child]:shadow-[2px_0px_8px_2px_rgba(0,0,0,1.00)] sm:[&_th:first-child]:shadow-none",
+        "bg-surface-contrast font-medium [&_th:first-child]:border-r [&_th:first-child]:border-white/10 lg:[&_th]:border-none [&_tr]:border-b",
+        // "[&_th:first-child]:shadow-[2px_0px_8px_2px_rgba(0,0,0,1.00)] lg:[&_th:first-child]:shadow-none",
         className,
       )}
       {...props}
@@ -71,9 +71,9 @@ function TableRow({
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-accent data-[state=selected]:bg-muted [&_td]:border-b-light-dark transition-colors [&_td:first-child]:border-r [&_td:first-child]:border-r-white/10 md:[&_td:first-child]:border-r-0 [&_td]:border-b",
+        "hover:bg-accent data-[state=selected]:bg-muted [&_td]:border-b-light-dark transition-colors [&_td:first-child]:border-r [&_td:first-child]:border-r-white/10 lg:[&_td:first-child]:border-r-0 [&_td]:border-b",
         // "[&_td:first-child]:sticky [&_td:first-child]:left-0 [&_td:first-child]:z-10",
-        // "[&_td:first-child]:shadow-[2px_0px_8px_2px_rgba(0,0,0,1.00)] sm:[&_td:first-child]:shadow-none",
+        // "[&_td:first-child]:shadow-[2px_0px_8px_2px_rgba(0,0,0,1.00)] lg:[&_td:first-child]:shadow-none",
         className,
       )}
       {...props}
diff --git a/apps/dashboard/templates/DaoTemplate.tsx b/apps/dashboard/templates/DaoTemplate.tsx
index fdac32659..0e7d020bc 100644
--- a/apps/dashboard/templates/DaoTemplate.tsx
+++ b/apps/dashboard/templates/DaoTemplate.tsx
@@ -38,9 +38,9 @@ export const DaoTemplate = () => {
         text={"Currently in beta. Some data inconsistencies may occur."}
         storageKey={`beta-banner-dismissed-${daoIdEnum}`}
       /> */}
-      <div className="flex w-full flex-col items-center py-4 sm:gap-2 sm:p-3">
+      <div className="flex w-full flex-col items-center py-4 lg:gap-2 lg:p-3">
         <BannerAlert
-          icon={<Send className="hidden size-4 text-white sm:block" />}
+          icon={<Send className="hidden size-4 text-white lg:block" />}
           text={bannerAlertMessage}
           link={{
             url: ANTICAPTURE_TELEGRAM_BOT,
@@ -49,7 +49,7 @@ export const DaoTemplate = () => {
           storageKey={`banner-dismissed-${daoIdEnum}`}
         />
         {/* <BannerAlert
-          icon={<Info className="hidden size-4 text-white sm:block" />}
+          icon={<Info className="hidden size-4 text-white lg:block" />}
           text={bannerAlertMessage}
           storageKey={`banner-dismissed-${daoIdEnum}`}
           variant="highlight"
diff --git a/apps/dashboard/tsconfig.json b/apps/dashboard/tsconfig.json
index e1dd3e0f8..512226166 100644
--- a/apps/dashboard/tsconfig.json
+++ b/apps/dashboard/tsconfig.json
@@ -22,6 +22,12 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules", ".next"]
 }
diff --git a/apps/dashboard/widgets/HeaderDAOSidebar.tsx b/apps/dashboard/widgets/HeaderDAOSidebar.tsx
index d19662e2d..4c330fba8 100644
--- a/apps/dashboard/widgets/HeaderDAOSidebar.tsx
+++ b/apps/dashboard/widgets/HeaderDAOSidebar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { usePathname } from "next/navigation";
 import { DaoIdEnum } from "@/shared/types/daos";
 import {
@@ -11,8 +12,11 @@ import daoConfigByDaoId from "@/shared/dao-config";
 import { ArrowRightLeft, PieChart } from "lucide-react";
 import { Crosshair2Icon } from "@radix-ui/react-icons";
 import { PAGES_CONSTANTS } from "@/shared/constants/pages-constants";
+import { cn } from "@/shared/utils/";
+
 export const HeaderDAOSidebar = () => {
   const pathname = usePathname();
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   const isDefault = pathname === "/";
   const daoId = isDefault ? null : pathname.split("/")[1]?.toUpperCase();
@@ -24,18 +28,25 @@ export const HeaderDAOSidebar = () => {
 
   return (
     <aside
-      className={`border-light-dark bg-surface-background fixed left-[68px] top-0 z-50 hidden h-screen w-[258px] border-r md:block`}
+      className={cn(
+        "bg-surface-background border-light-dark relative z-50 h-screen border-r transition-all duration-300 lg:block",
+        isCollapsed ? "w-[68px] overflow-visible" : "w-[258px]",
+      )}
     >
-      <div className="flex h-full w-full flex-col">
-        <HeaderDAOSidebarDropdown />
+      <div className="z-50 flex h-full w-full flex-col">
+        <HeaderDAOSidebarDropdown
+          isCollapsed={isCollapsed}
+          onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
+        />
         <div className="flex h-full flex-col justify-between">
-          <div className="flex flex-col gap-3 p-4">
+          <div className="flex flex-col gap-[12px] p-2">
             {daoConfig.daoOverview && (
               <ButtonHeaderSidebar
                 page={PAGES_CONSTANTS.daoOverview.page}
                 icon={PieChart}
                 label={PAGES_CONSTANTS.daoOverview.title}
                 key={PAGES_CONSTANTS.daoOverview.title}
+                isCollapsed={isCollapsed}
               />
             )}
             {daoConfig.attackProfitability &&
@@ -45,6 +56,7 @@ export const HeaderDAOSidebar = () => {
                   icon={Crosshair2Icon}
                   label={PAGES_CONSTANTS.attackProfitability.title}
                   key={PAGES_CONSTANTS.attackProfitability.title}
+                  isCollapsed={isCollapsed}
                 />
               )}
             {daoConfig.riskAnalysis && (
@@ -53,6 +65,7 @@ export const HeaderDAOSidebar = () => {
                 icon={Gauge}
                 label={PAGES_CONSTANTS.riskAnalysis.title}
                 key={PAGES_CONSTANTS.riskAnalysis.title}
+                isCollapsed={isCollapsed}
               />
             )}
             {daoConfig.resilienceStages && (
@@ -61,6 +74,7 @@ export const HeaderDAOSidebar = () => {
                 icon={BarChart}
                 label={PAGES_CONSTANTS.resilienceStages.title}
                 key={PAGES_CONSTANTS.resilienceStages.title}
+                isCollapsed={isCollapsed}
               />
             )}
             {daoConfig.tokenDistribution && (
@@ -69,6 +83,7 @@ export const HeaderDAOSidebar = () => {
                 icon={ArrowRightLeft}
                 label={PAGES_CONSTANTS.tokenDistribution.title}
                 key={PAGES_CONSTANTS.tokenDistribution.title}
+                isCollapsed={isCollapsed}
               />
             )}
             {daoConfig.dataTables && (
@@ -77,6 +92,7 @@ export const HeaderDAOSidebar = () => {
                 icon={UserCheck}
                 label={PAGES_CONSTANTS.holdersAndDelegates.title}
                 key={PAGES_CONSTANTS.holdersAndDelegates.title}
+                isCollapsed={isCollapsed}
               />
             )}
 
@@ -86,6 +102,7 @@ export const HeaderDAOSidebar = () => {
                 icon={Landmark}
                 label="Governance"
                 key="Governance"
+                isCollapsed={isCollapsed}
               />
             )}
           </div>
diff --git a/apps/dashboard/widgets/HeaderMobile.tsx b/apps/dashboard/widgets/HeaderMobile.tsx
index e2477a169..175df5e7a 100644
--- a/apps/dashboard/widgets/HeaderMobile.tsx
+++ b/apps/dashboard/widgets/HeaderMobile.tsx
@@ -18,9 +18,11 @@ import { usePathname } from "next/navigation";
 import { AnticaptureIcon } from "@/shared/components/icons";
 
 export const HeaderMobile = ({
+  className,
   overlayClassName,
 }: {
   overlayClassName?: string;
+  className?: string;
 }) => {
   const [lastScrollY, setLastScrollY] = useState<number>(0);
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
@@ -106,7 +108,9 @@ export const HeaderMobile = ({
   }, [lastScrollY]);
 
   return (
-    <>
+    <div
+      className={cn("relative left-0 top-0 z-50 w-full lg:hidden", className)}
+    >
       {/* Header */}
       <div className="border-light-dark bg-surface-background absolute left-0 right-0 top-0 z-50 border-b px-4 py-1.5">
         <div className="flex items-center justify-between">
@@ -127,7 +131,6 @@ export const HeaderMobile = ({
           </div>
         </div>
       </div>
-
       {/* Mobile Menu - Overlay */}
       <div
         className={cn(
@@ -180,6 +183,6 @@ export const HeaderMobile = ({
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/apps/dashboard/widgets/HeaderSidebar.tsx b/apps/dashboard/widgets/HeaderSidebar.tsx
index 4d9925e6b..29c8369db 100644
--- a/apps/dashboard/widgets/HeaderSidebar.tsx
+++ b/apps/dashboard/widgets/HeaderSidebar.tsx
@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import Link from "next/link";
 import { BarChart4, Bell } from "lucide-react";
 import {
-  ButtonHeaderSidebar,
+  ButtonMainNav,
   ConnectWallet,
   BottomNavigationButtons,
 } from "@/shared/components";
@@ -30,7 +30,7 @@ export const HeaderSidebar = () => {
 
   return (
     <header
-      className={`border-light-dark bg-surface-background fixed left-0 top-0 z-50 hidden h-screen w-[68px] border-r sm:block`}
+      className={`border-light-dark bg-surface-background z-50 hidden h-screen w-[68px] border-r lg:block`}
     >
       <div className="flex h-full w-full flex-col items-start">
         <Link
@@ -43,12 +43,11 @@ export const HeaderSidebar = () => {
         <div className="flex h-full w-full flex-col items-center justify-between">
           <div className="flex h-full flex-col gap-1.5 p-1.5">
             {headerItems.map((item) => (
-              <ButtonHeaderSidebar
+              <ButtonMainNav
                 key={item.page || item.label}
                 page={item.page || ""}
                 icon={item.icon}
                 label={item.label}
-                className="text-xs! font-medium! flex-col gap-1"
                 isGlobal={item.isGlobal}
               />
             ))}
diff --git a/apps/dashboard/widgets/MessageStacker.tsx b/apps/dashboard/widgets/MessageStacker.tsx
index c18c912b1..944a96a76 100644
--- a/apps/dashboard/widgets/MessageStacker.tsx
+++ b/apps/dashboard/widgets/MessageStacker.tsx
@@ -44,7 +44,7 @@ export const MessageStacker = ({ messages }: MessageStackerProps) => {
   }
 
   return (
-    <div className="w-full gap-2 px-4 pt-4 sm:px-3 sm:py-2">
+    <div className="w-full gap-2 px-4 pt-4 lg:px-3 lg:py-2">
       <div className="flex w-full flex-col gap-2">
         {visibleMessages.map((message) => (
           <MessageItem