diff --git a/frontend/src/pages/dashboard/dashboard.tsx b/frontend/src/pages/dashboard/dashboard.tsx
index cd4f3eba..8cfeaa93 100644
--- a/frontend/src/pages/dashboard/dashboard.tsx
+++ b/frontend/src/pages/dashboard/dashboard.tsx
@@ -1,4 +1,4 @@
-import { LayoutDashboard } from 'lucide-react';
+import { Calendar, CalendarDays, CalendarRange, LayoutDashboard, type LucideIcon } from 'lucide-react';
 import { useState, useTransition } from 'react';
 
 import { PageTitle } from '@/components/shared/page-title';
@@ -12,10 +12,10 @@ import { cn } from '@/lib/utils';
 import { DashboardAnalytics } from '@/pages/dashboard/dashboard-analytics';
 import { DashboardOverview } from '@/pages/dashboard/dashboard-overview';
 
-const periodOptions: { label: string; value: UsageStatsPeriod }[] = [
-    { label: 'Week', value: UsageStatsPeriod.Week },
-    { label: 'Month', value: UsageStatsPeriod.Month },
-    { label: 'Quarter', value: UsageStatsPeriod.Quarter },
+const periodOptions: { icon: LucideIcon; label: string; value: UsageStatsPeriod }[] = [
+    { icon: CalendarDays, label: 'Week', value: UsageStatsPeriod.Week },
+    { icon: Calendar, label: 'Month', value: UsageStatsPeriod.Month },
+    { icon: CalendarRange, label: 'Quarter', value: UsageStatsPeriod.Quarter },
 ];
 
 const VALID_PERIODS = new Set<string>(Object.values(UsageStatsPeriod));
@@ -112,12 +112,17 @@ function Dashboard() {
                                 value={period}
                             >
                                 <TabsList>
-                                    {periodOptions.map(({ label, value }) => (
+                                    {periodOptions.map(({ icon: Icon, label, value }) => (
                                         <TabsTrigger
+                                            aria-label={label}
                                             key={value}
                                             value={value}
                                         >
-                                            {label}
+                                            <Icon
+                                                aria-hidden="true"
+                                                className="size-4 sm:hidden"
+                                            />
+                                            <span className="hidden sm:inline">{label}</span>
                                         </TabsTrigger>
                                     ))}
                                 </TabsList>