diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 804538a3..b41e6b5d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -55,7 +55,7 @@ module.exports = {
         {
           group: ['../pages/**', '../../pages/**', '../../../pages/**'],
           message: 'Use @/pages/* instead of relative paths'
-        }
+        },
       ]
     }],
   },
@@ -84,7 +84,7 @@ module.exports = {
             {
               "group": ["../db/**", "../../db/**"],
               "message": "Architecture: No direct DB imports from components. Import a hook/API instead."
-            }
+            },
           ]
         }]
       }
@@ -128,6 +128,19 @@ module.exports = {
           ]
         }]
       }
+    },
+    {
+      files: ["src/pages/**/*.{ts,tsx}", "src/components/**/*.{ts,tsx}"],
+      rules: {
+        "no-restricted-imports": ["error", {
+          "patterns": [
+            {
+              "group": ["@/components/ui/button"],
+              "message": "Pages should use AnalyticsButton from @/components/ui/analytics-button instead of Button to ensure proper user action tracking"
+            }
+          ]
+        }]
+      }
     }
   ],
 }
diff --git a/src/api/hooks/useKanbanBoard.ts b/src/api/hooks/useKanbanBoard.ts
index 94cb9310..e40474be 100644
--- a/src/api/hooks/useKanbanBoard.ts
+++ b/src/api/hooks/useKanbanBoard.ts
@@ -4,6 +4,7 @@ import { DragEndEvent } from '@dnd-kit/core'
 import { AppsWithTime } from '@/api/monitorApi/monitorApi' // Adjust path as needed for types
 import { ActivityRating } from '@/lib/app-directory/apps-types' // Adjust path as needed for types
 import { useAppUsage, useTags, useUpdateAppRatingMutation } from '@/api/hooks/useAppUsage'
+import { AnalyticsService } from '@/lib/analytics'
 
 
 // --- Type Definitions for Kanban Board ---
@@ -101,6 +102,7 @@ export const useKanbanBoard = ({ rangeMode, date }: { rangeMode: 'day' | 'week'
         updatedColumns[targetColumnId].push(app)
         updatedColumns[targetColumnId].sort((a, b) => b.duration - a.duration)
       }
+      AnalyticsService.trackEvent('app_dragged')
       return updatedColumns
     })
     updateAppRatingMutation.mutate({ appTagId, rating: rating as ActivityRating })
diff --git a/src/components/ActiveDevicesSettings.tsx b/src/components/ActiveDevicesSettings.tsx
index f39352f0..145c1165 100644
--- a/src/components/ActiveDevicesSettings.tsx
+++ b/src/components/ActiveDevicesSettings.tsx
@@ -1,5 +1,5 @@
 import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { useEffect, useState } from 'react'
 import { hostname } from '@tauri-apps/plugin-os'
 import { User } from '@supabase/supabase-js'
@@ -149,13 +149,18 @@ export function ActiveDevicesSettings({ user, maxDevices }: ActiveDevicesSetting
                     This Device
                   </Badge>
                 ) : (
-                  <Button
+                  <AnalyticsButton
                     variant="destructive"
                     size="sm"
                     onClick={() => handleDeviceLogout(device.id)}
+                    analyticsEvent="deactivate_device_clicked"
+                    analyticsProperties={{
+                      context: 'deactivate_device',
+                      button_location: 'active_devices_settings'
+                    }}
                   >
                     Deactivate
-                  </Button>
+                  </AnalyticsButton>
                 )}
               </div>
             </div>
diff --git a/src/components/AppSelector.tsx b/src/components/AppSelector.tsx
index 130bb4f8..6ecab48e 100644
--- a/src/components/AppSelector.tsx
+++ b/src/components/AppSelector.tsx
@@ -6,7 +6,7 @@ import { AppCategory, categoryEmojis } from '@/lib/app-directory/apps-types'
 import { useEffect, useRef, useState } from 'react'
 import { MonitorApi , App, Tag } from '@/api/monitorApi/monitorApi'
 import { AppIcon } from '@/components/AppIcon'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { DifficultySelector } from '@/components/difficulty-selector'
 import { CategoryTooltip } from '@/components/CategoryTooltip'
 import { PaywallDialog } from '@/components/PaywallDialog'
@@ -514,7 +514,7 @@ export function AppSelector({
           
           {onIsAllowListChange && (
             <div className="flex items-center gap-1">
-              <Button
+              <AnalyticsButton
                 variant="ghost"
                 size="sm"
                 className={cn(
@@ -525,25 +525,35 @@ export function AppSelector({
                   e.stopPropagation()
                   handleAllowListChange(false)
                 }}
+                analyticsEvent="block_list_clicked"
+                analyticsProperties={{
+                  context: 'block_list',
+                  button_location: 'app_selector'
+                }}
               >
                 Block
-              </Button>
+              </AnalyticsButton>
 
               {!canUseAllowList ? (
                 <PaywallDialog>
-                  <Button
+                  <AnalyticsButton
                     variant="ghost"
                     size="sm"
                     className={cn(
                       'h-6 px-2 text-xs text-muted-foreground/80 hover:text-foreground',
                       isAllowList && 'bg-muted/50'
                     )}
+                    analyticsEvent="allow_list_clicked"
+                    analyticsProperties={{
+                      context: 'allow_list',
+                      button_location: 'app_selector'
+                    }}
                   >
                     Allow
-                  </Button>
+                  </AnalyticsButton>
                 </PaywallDialog>
               ) : (
-                <Button
+                <AnalyticsButton
                   variant="ghost"
                   size="sm"
                   className={cn(
@@ -554,9 +564,14 @@ export function AppSelector({
                     e.stopPropagation()
                     handleAllowListChange(true)
                   }}
+                  analyticsEvent="allow_list_clicked"
+                  analyticsProperties={{
+                    context: 'allow_list',
+                    button_location: 'app_selector'
+                  }}
                 >
                   Allow
-                </Button>
+                </AnalyticsButton>
               )}
             </div>
           )}
diff --git a/src/components/FriendsComparisonCard.tsx b/src/components/FriendsComparisonCard.tsx
index 30792020..d94fb181 100644
--- a/src/components/FriendsComparisonCard.tsx
+++ b/src/components/FriendsComparisonCard.tsx
@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Progress } from '@/components/ui/progress'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Badge } from '@/components/ui/badge'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Users, UserPlus, Mail, Send, Check, X } from 'lucide-react'
@@ -173,7 +173,8 @@ const PendingInvitesTab = () => {
                   <div className="text-xs text-muted-foreground">Email: {invite.from_auth_user_email || invite.to_email}</div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Button
+                  <AnalyticsButton
+                    analyticsEvent="accept_friend_request_clicked"
                     size="sm"
                     onClick={() => handleAcceptInviteWithLoading(invite.id)}
                     className="h-8 px-3"
@@ -181,8 +182,9 @@ const PendingInvitesTab = () => {
                     icon={<Check className="h-3 w-3" />}
                   >
                     Accept
-                  </Button>
-                  <Button
+                  </AnalyticsButton>
+                  <AnalyticsButton
+                    analyticsEvent="decline_friend_request_clicked"
                     size="sm"
                     variant="outline"
                     onClick={() => handleDeclineInviteWithLoading(invite.id)}
@@ -191,21 +193,22 @@ const PendingInvitesTab = () => {
                     icon={<X className="h-3 w-3" />}
                   >
                     Decline
-                  </Button>
+                  </AnalyticsButton>
                 </div>
               </div>
             ))}
           </div>
           {receivedRequests.length > visibleReceived && (
             <div className="text-center mt-4">
-              <Button 
+              <AnalyticsButton 
+                analyticsEvent="load_more_received_invites_clicked"
                 variant="outline" 
                 size="sm" 
                 onClick={handleLoadMoreReceived}
                 className="text-xs"
               >
                 Load More ({receivedRequests.length - visibleReceived} remaining)
-              </Button>
+              </AnalyticsButton>
             </div>
           )}
         </div>
@@ -232,14 +235,15 @@ const PendingInvitesTab = () => {
           </div>
           {sentRequests.length > visibleSent && (
             <div className="text-center mt-4">
-              <Button 
+              <AnalyticsButton 
+                analyticsEvent="load_more_sent_invites_clicked"
                 variant="outline" 
                 size="sm" 
                 onClick={handleLoadMoreSent}
                 className="text-xs"
               >
                 Load More ({sentRequests.length - visibleSent} remaining)
-              </Button>
+              </AnalyticsButton>
             </div>
           )}
         </div>
@@ -295,9 +299,16 @@ const EmptyFriendsState = () => {
             required
             disabled={isInviting}
           />
-          <Button type="submit" size="lg" className="flex items-center gap-2" loading={isInviting} icon={<Send className="h-5 w-5" />}>
+          <AnalyticsButton 
+            analyticsEvent="invite_friends_clicked"
+            type="submit" 
+            size="lg" 
+            className="flex items-center gap-2" 
+            loading={isInviting} 
+            icon={<Send className="h-5 w-5" />}
+          >
             Invite
-          </Button>
+          </AnalyticsButton>
         </div>
       </form>
     </div>
@@ -358,10 +369,16 @@ export const FriendsComparisonCard = ({
               }
             </p>
           </div>
-          <Button variant="outline" size="sm" className="flex items-center gap-1" onClick={handleInviteClick}>
+          <AnalyticsButton 
+            analyticsEvent="invite_friends_clicked"
+            variant="outline" 
+            size="sm" 
+            className="flex items-center gap-1" 
+            onClick={handleInviteClick}
+          >
             <UserPlus className="h-4 w-4" />
             Invite Friends
-          </Button>
+          </AnalyticsButton>
         </div>
       </CardHeader>
       <CardContent>
@@ -429,17 +446,23 @@ export const FriendsComparisonCard = ({
                   />
                 </div>
                 <div className="flex justify-end gap-2">
-                  <Button
+                  <AnalyticsButton
+                    analyticsEvent="invite_friends_canceled"
                     type="button"
                     variant="outline"
                     onClick={() => setShowInviteModal(false)}
                     disabled={isInviting}
                   >
                     Cancel
-                  </Button>
-                  <Button type="submit" loading={isInviting} icon={<Send className="h-5 w-5" />}>
+                  </AnalyticsButton>
+                  <AnalyticsButton 
+                    analyticsEvent="invite_friends_sent"
+                    type="submit" 
+                    loading={isInviting} 
+                    icon={<Send className="h-5 w-5" />}
+                  >
                     Send Invite
-                  </Button>
+                  </AnalyticsButton>
                 </div>
               </div>
             </form>
diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
index eae74038..6585eac9 100644
--- a/src/components/ModeToggle.tsx
+++ b/src/components/ModeToggle.tsx
@@ -1,6 +1,6 @@
 import { Moon, Sun } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,11 +15,11 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <AnalyticsButton variant="outline" size="icon" analyticsEvent="mode_toggle_clicked">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
+          <span className="sr -only">Toggle theme</span>
+        </AnalyticsButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setTheme('light')}>
diff --git a/src/components/NotificationBanner.tsx b/src/components/NotificationBanner.tsx
index e0edf513..d8ba9fa2 100644
--- a/src/components/NotificationBanner.tsx
+++ b/src/components/NotificationBanner.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useGetActiveNotification, useUpdateNotificationStatus } from '@/api/hooks/useNotifications'
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from './ui/analytics-button'
 
 interface NotificationAction {
   label: string
@@ -51,14 +51,15 @@ export const NotificationBanner: React.FC = () => {
       <span className="font-medium">{activeNotification.content}</span>
       <div className="flex items-center gap-2">
         {notificationAction && (
-          <Button
+          <AnalyticsButton
+            analyticsEvent="notification_dismissed"
             variant="outline"
             size="sm"
             className="border-white/30 text-white hover:bg-white/10 hover:text-white"
             onClick={notificationAction.action}
           >
             {notificationAction.label}
-          </Button>
+          </AnalyticsButton>
         )}
         <button 
           className="p-1 rounded hover:bg-primary/80 transition-colors" 
diff --git a/src/components/NotificationPanel/ActionButton.tsx b/src/components/NotificationPanel/ActionButton.tsx
index fc101730..9ec09347 100644
--- a/src/components/NotificationPanel/ActionButton.tsx
+++ b/src/components/NotificationPanel/ActionButton.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Hotkey } from '@/components/ui/hotkey'
 import { cn } from '@/lib/utils/tailwind.util'
+import { AnalyticsEvent } from '../../lib/analytics'
 
 interface ActionButtonProps {
   buttonText: string
@@ -10,6 +11,7 @@ interface ActionButtonProps {
   shortcutParts: string[]
   pressedKeys: Set<string>
   onClick: () => void
+  analyticsEvent: AnalyticsEvent
 }
 
 const getHotkeyColor = (iconColor: string): string => {
@@ -27,10 +29,11 @@ export const ActionButton = ({
   iconColor,
   shortcutParts,
   pressedKeys,
-  onClick
+  onClick,
+  analyticsEvent
 }: ActionButtonProps) => {
   return (
-    <Button
+    <AnalyticsButton
       variant="outline"
       size="sm"
       className={cn(
@@ -40,6 +43,7 @@ export const ActionButton = ({
       )}
       onClick={onClick}
       disabled={buttonState !== 'idle' || isDisabled}
+      analyticsEvent={analyticsEvent}
     >
       <span>
         {buttonState === 'idle' && buttonText}
@@ -76,6 +80,6 @@ export const ActionButton = ({
           })}
         </div>
       )}
-    </Button>
+    </AnalyticsButton>
   )
 }
diff --git a/src/components/NotificationPanel/NotificationPanel.tsx b/src/components/NotificationPanel/NotificationPanel.tsx
index 2ef2405f..bab394fc 100644
--- a/src/components/NotificationPanel/NotificationPanel.tsx
+++ b/src/components/NotificationPanel/NotificationPanel.tsx
@@ -14,8 +14,9 @@ import { EbbListen } from '@/lib/ebbListen'
 import { useShortcutStore } from '@/lib/stores/shortcutStore'
 import { useShortcutKeyDetection } from '../../hooks/useShortcutKeyDetection'
 import { EbbWorker } from '../../lib/ebbWorker'
+import { AnalyticsEvent } from '../../lib/analytics'
 
-type NotificationType = 'session-start' | 'quick-start' | 'smart-start-suggestion' | 'doomscroll-start-suggestion' | 'blocked-app' | 'blocked-app-hard' | 'session-end' | 'session-warning' | 'end-session' | 'scheduled-session-reminder' | 'scheduled-session-start'  
+export type NotificationType = 'session-start' | 'quick-start' | 'smart-start-suggestion' | 'doomscroll-start-suggestion' | 'blocked-app' | 'blocked-app-hard' | 'session-end' | 'session-warning' | 'end-session' | 'scheduled-session-reminder' | 'scheduled-session-start'  
 
 interface NotificationPayload {
   timeCreating?: number
@@ -485,6 +486,7 @@ export const NotificationPanel = () => {
             shortcutParts={shortcutParts}
             pressedKeys={pressedKeys}
             onClick={handleButtonClick}
+            analyticsEvent={`notification_${notificationType}_button_clicked` as AnalyticsEvent}
           />
         )}
 
diff --git a/src/components/RangeModeSelector.tsx b/src/components/RangeModeSelector.tsx
index 6aef78ea..6ad6b7c9 100644
--- a/src/components/RangeModeSelector.tsx
+++ b/src/components/RangeModeSelector.tsx
@@ -3,7 +3,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { cn } from '@/lib/utils/tailwind.util'
 
 export type RangeMode = 'day' | 'week' | 'month'
@@ -31,7 +31,8 @@ export function RangeModeSelector({ value, onChange, className }: RangeModeSelec
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button
+        <AnalyticsButton
+          analyticsEvent="range_mode_selector_clicked"
           variant="outline"
           className={cn(
             'justify-start text-left font-normal',
@@ -41,20 +42,21 @@ export function RangeModeSelector({ value, onChange, className }: RangeModeSelec
           <div className="flex items-center gap-2">
             {selectedOption.label}
           </div>
-        </Button>
+        </AnalyticsButton>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-1" align="end" sideOffset={4}>
         <div className="flex flex-col">
           {rangeOptions.map((option) => (
-            <Button
+            <AnalyticsButton
               key={option.value}
               variant={value === option.value ? 'default' : 'ghost'}
               size="sm"
               className="justify-start px-3 py-1 text-xs font-medium rounded-lg"
               onClick={() => onChange(option.value)}
+              analyticsEvent={'range_mode_clicked'}
             >
               {option.label}
-            </Button>
+            </AnalyticsButton>
           ))}
         </div>
       </PopoverContent>
diff --git a/src/components/ScheduleSessionModal.tsx b/src/components/ScheduleSessionModal.tsx
index 41d604e7..ac61eb04 100644
--- a/src/components/ScheduleSessionModal.tsx
+++ b/src/components/ScheduleSessionModal.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { DialogFooter } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -8,6 +8,7 @@ import { useGetWorkflows } from '@/api/hooks/useWorkflow'
 import { RecurrenceSettings } from '@/api/ebbApi/focusScheduleApi'
 import { cn } from '@/lib/utils/tailwind.util'
 import { Workflow } from '@/api/ebbApi/workflowApi'
+import { NoAnalyticsButton } from './ui/no-analytics-button'
 
 interface ScheduleSessionModalProps {
   scheduleId?: string
@@ -151,7 +152,7 @@ export function ScheduleSessionModal({ scheduleId, onClose }: ScheduleSessionMod
       <div className="space-y-4">
         <label className="text-sm font-medium">Recurrence</label>
         <div className="flex gap-2">
-          <Button
+          <NoAnalyticsButton
             type="button"
             variant={recurrenceType === 'daily' ? 'default' : 'outline'}
             size="sm"
@@ -161,8 +162,8 @@ export function ScheduleSessionModal({ scheduleId, onClose }: ScheduleSessionMod
             }}
           >
             Daily
-          </Button>
-          <Button
+          </NoAnalyticsButton>
+          <NoAnalyticsButton
             type="button"
             variant={recurrenceType === 'weekly' ? 'default' : 'outline'}
             size="sm"
@@ -172,7 +173,7 @@ export function ScheduleSessionModal({ scheduleId, onClose }: ScheduleSessionMod
             }}
           >
             Weekly
-          </Button>
+          </NoAnalyticsButton>
         </div>
 
         {recurrenceType === 'weekly' && (
@@ -180,7 +181,7 @@ export function ScheduleSessionModal({ scheduleId, onClose }: ScheduleSessionMod
             <label className="text-sm font-medium">Select Days</label>
             <div className="flex gap-1">
               {dayNames.map((day, index) => (
-                <Button
+                <NoAnalyticsButton
                   key={day}
                   type="button"
                   variant={selectedDays.includes(index) ? 'default' : 'outline'}
@@ -189,7 +190,7 @@ export function ScheduleSessionModal({ scheduleId, onClose }: ScheduleSessionMod
                   onClick={() => handleDayToggle(index)}
                 >
                   {day}
-                </Button>
+                </NoAnalyticsButton>
               ))}
             </div>
           </div>
@@ -207,19 +208,20 @@ export function ScheduleSessionModal({ scheduleId, onClose }: ScheduleSessionMod
       </div>
 
       <DialogFooter>
-        <Button
+        <NoAnalyticsButton
           variant="outline"
           onClick={onClose}
           disabled={isSubmitting}
         >
           Cancel
-        </Button>
-        <Button
+        </NoAnalyticsButton>
+        <AnalyticsButton
+          analyticsEvent={scheduleId ? 'schedule_session_modal_updated' : 'schedule_session_modal_created'}
           onClick={handleSubmit}
           disabled={isSubmitting || !selectedWorkflowId || selectedDays.length === 0}
         >
           {isSubmitting ? 'Saving...' : scheduleId ? 'Update Schedule' : 'Create Schedule'}
-        </Button>
+        </AnalyticsButton>
       </DialogFooter>
     </div>
   )
diff --git a/src/components/ShortcutInput.tsx b/src/components/ShortcutInput.tsx
index 5250ee0c..c90c6a49 100644
--- a/src/components/ShortcutInput.tsx
+++ b/src/components/ShortcutInput.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Hotkey } from '@/components/ui/hotkey'
 import { X, Check } from 'lucide-react'
@@ -166,7 +166,8 @@ export function ShortcutInput({ popoverAlign = 'center' }: ShortcutInputProps) {
   return (
     <Popover open={isOpen} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
-        <Button 
+        <AnalyticsButton 
+          analyticsEvent='shortcut_input_clicked'
           variant='outline' 
           className='min-w-[140px] h-12 text-lg font-mono flex items-center gap-2 group relative'
         >
@@ -185,7 +186,7 @@ export function ShortcutInput({ popoverAlign = 'center' }: ShortcutInputProps) {
           ) : (
             <span className='text-muted-foreground text-sm'>Click to set</span>
           )}
-        </Button>
+        </AnalyticsButton>
       </PopoverTrigger>
       <PopoverContent className='w-64 relative' align={popoverAlign}>
         {snapshot?.isClosing && (
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 139d2a29..8f31bbe1 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button'
+import { NoAnalyticsButton } from '@/components/ui/no-analytics-button'
 import { Link, useLocation } from 'react-router-dom'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { SettingsGearIcon } from '@/components/icons/GearIcon'
@@ -29,7 +29,7 @@ export function Sidebar() {
           {/* Category dashboard link */}
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
+              <NoAnalyticsButton
                 variant="ghost"
                 iconSize={5}
                 className={`w-9 h-9 p-2 ${location.pathname === '/' ? 'text-foreground [&>svg]:text-foreground' : 'text-muted-foreground [&>svg]:text-muted-foreground'}`}
@@ -38,7 +38,7 @@ export function Sidebar() {
                 <Link to="/">
                   <HomeIcon size={20} />
                 </Link>
-              </Button>
+              </NoAnalyticsButton>
             </TooltipTrigger>
             <TooltipContent side="right" sideOffset={10}>Today</TooltipContent>
           </Tooltip>
@@ -46,7 +46,7 @@ export function Sidebar() {
           {isFocusScheduleFeatureEnabled(user?.email) && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button
+                <NoAnalyticsButton
                   variant="ghost"
                   iconSize={5}
                   className={`w-9 h-9 p-2 ${location.pathname === '/focus-schedule' ? 'text-foreground [&>svg]:text-foreground' : 'text-muted-foreground [&>svg]:text-muted-foreground'}`}
@@ -55,14 +55,14 @@ export function Sidebar() {
                   <Link to="/focus-schedule">
                     <CalendarDaysIcon size={20} />
                   </Link>
-                </Button>
+                </NoAnalyticsButton>
               </TooltipTrigger>
               <TooltipContent side="right" sideOffset={10}>Focus Schedule</TooltipContent>
             </Tooltip>
           )}
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
+              <NoAnalyticsButton
                 variant="ghost"
                 iconSize={5}
                 className={`w-9 h-9 p-2 relative ${location.pathname === '/category-dashboard' ? 'text-foreground [&>svg]:text-foreground' : 'text-muted-foreground [&>svg]:text-muted-foreground'}`}
@@ -71,14 +71,14 @@ export function Sidebar() {
                 <Link to="/category-dashboard">
                   <ChartIcon size={20} />
                 </Link>
-              </Button>
+              </NoAnalyticsButton>
             </TooltipTrigger>
             <TooltipContent side="right" sideOffset={10}>Categories</TooltipContent>
           </Tooltip>
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
+              <NoAnalyticsButton
                 variant="ghost"
                 iconSize={5}
                 className={`w-9 h-9 p-2 relative ${location.pathname === '/friends-analytics' ? 'text-foreground [&>svg]:text-foreground' : 'text-muted-foreground [&>svg]:text-muted-foreground'}`}
@@ -90,7 +90,7 @@ export function Sidebar() {
                     <div className="absolute w-3 h-3 bg-red-500 rounded-full border border-background" style={{ top: '4px', right: '4px' }}/>
                   )}
                 </Link>
-              </Button>
+              </NoAnalyticsButton>
             </TooltipTrigger>
             <TooltipContent side="right" sideOffset={10}>Friends</TooltipContent>
           </Tooltip>
@@ -98,7 +98,7 @@ export function Sidebar() {
 
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
+              <NoAnalyticsButton
                 variant="ghost"
                 iconSize={5}
                 className={`w-9 h-9 p-2 ${location.pathname === '/community' ? 'text-foreground [&>svg]:text-foreground' : 'text-muted-foreground [&>svg]:text-muted-foreground'}`}
@@ -107,7 +107,7 @@ export function Sidebar() {
                 <Link to="/community">
                   <GlobeIcon size={20} />
                 </Link>
-              </Button>
+              </NoAnalyticsButton>
             </TooltipTrigger>
             <TooltipContent side="right" sideOffset={10}>Community</TooltipContent>
           </Tooltip>
@@ -116,9 +116,9 @@ export function Sidebar() {
         {!hasProAccess && (
           <div className="p-2 border-t flex justify-center">
             <PaywallDialog>
-              <Button variant="ghost" iconSize={5} className="w-9 h-9 p-2">
+              <NoAnalyticsButton variant="ghost" iconSize={5} className="w-9 h-9 p-2">
                 <KeyIcon size={20} className="text-yellow-500" />
-              </Button>
+              </NoAnalyticsButton>
             </PaywallDialog>
           </div>
         )}
@@ -126,7 +126,7 @@ export function Sidebar() {
         <div className="p-2 border-t flex justify-center">
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
+              <NoAnalyticsButton
                 variant="ghost"
                 iconSize={5}
                 className={`w-9 h-9 p-2 ${location.pathname === '/settings' ? 'text-foreground [&>svg]:text-foreground' : 'text-muted-foreground [&>svg]:text-muted-foreground'}`}
@@ -135,7 +135,7 @@ export function Sidebar() {
                 <Link to="/settings">
                   <SettingsGearIcon size={20} />
                 </Link>
-              </Button>
+              </NoAnalyticsButton>
             </TooltipTrigger>
             <TooltipContent side="right" sideOffset={10}>Settings</TooltipContent>
           </Tooltip>
diff --git a/src/components/SlackFocusToggle.tsx b/src/components/SlackFocusToggle.tsx
index 377124b5..0ad173fe 100644
--- a/src/components/SlackFocusToggle.tsx
+++ b/src/components/SlackFocusToggle.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { SlackIcon } from '@/components/icons/SlackIcon'
 import { Switch } from '@/components/ui/switch'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Input } from '@/components/ui/input'
 import {
   Dialog,
@@ -195,24 +195,26 @@ export function SlackFocusToggle({ slackSettings, onSlackSettingsChange }: Slack
                 </div>
               </div>
 
-              <Button 
+              <AnalyticsButton 
+                analyticsEvent='slack_focus_settings_save_clicked'
                 onClick={handleSavePreferences} 
                 className="w-full"
                 disabled={updatePreferencesMutation.isPending}
               >
                 {updatePreferencesMutation.isPending ? 'Saving...' : 'Save Preferences'}
-              </Button>
+              </AnalyticsButton>
             </div>
 
             <div className="pt-4 border-t">
-              <Button 
+              <AnalyticsButton 
+                analyticsEvent='slack_focus_settings_more_settings_clicked'
                 variant="outline" 
                 onClick={navigateToSettings}
                 className="w-full"
               >
                 <ExternalLink className="h-4 w-4 mr-2" />
                 More Slack Settings
-              </Button>
+              </AnalyticsButton>
             </div>
           </div>
         </DialogContent>
diff --git a/src/components/SocialStatusSummary.tsx b/src/components/SocialStatusSummary.tsx
index b802b5df..b8acd5e1 100644
--- a/src/components/SocialStatusSummary.tsx
+++ b/src/components/SocialStatusSummary.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Skeleton } from '@/components/ui/skeleton'
 import { ConnectIcon } from '@/components/icons/ConnectIcon'
 import { useConnectedStore } from '@/lib/stores/connectedStore'
@@ -82,7 +82,8 @@ const StatusButton = ()=> {
   if(!connected) {
     return (
       <div className="relative">
-        <Button 
+        <AnalyticsButton 
+          analyticsEvent='connect_to_friends_clicked'
           variant="outline" 
           size="sm" 
           onClick={handleClick} 
@@ -91,7 +92,7 @@ const StatusButton = ()=> {
         >
           {isOffline ? 'Offline' : 'Connect '}
           <ConnectIcon size={20} />
-        </Button>
+        </AnalyticsButton>
         <div className="absolute inset-0 border border-primary/50 rounded-md animate-ping opacity-75" style={{animationDuration: '3s'}}></div>
       </div>
     )
diff --git a/src/components/TimeSelector.tsx b/src/components/TimeSelector.tsx
index 4c4f16cb..66f41957 100644
--- a/src/components/TimeSelector.tsx
+++ b/src/components/TimeSelector.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Check, ChevronsUpDown } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import {
   Command,
   CommandEmpty,
@@ -195,7 +195,8 @@ export function TimeSelector({ value: externalValue, onChange }: TimeSelectorPro
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button
+        <AnalyticsButton
+          analyticsEvent='focus_session_duration_selector_clicked'
           variant='outline'
           role='combobox'
           aria-expanded={open}
@@ -206,7 +207,7 @@ export function TimeSelector({ value: externalValue, onChange }: TimeSelectorPro
               (customOption?.value === value ? customOption.label : 'Select duration')
             : 'Select duration'}
           <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
-        </Button>
+        </AnalyticsButton>
       </PopoverTrigger>
       <PopoverContent className='w-[--radix-popover-trigger-width] p-0'>
         <Command shouldFilter={false}>
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index bb791f31..bb4efc56 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { X } from 'lucide-react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Logo } from '@/components/ui/logo'
@@ -8,6 +8,7 @@ import { useShortcutStore } from '@/lib/stores/shortcutStore'
 import { CircleHelpIcon } from './icons/CircleHelpIcon'
 import { Tooltip, TooltipContent , TooltipTrigger } from './ui/tooltip'
 import { SocialStatusSummary } from './SocialStatusSummary'
+import { NoAnalyticsButton } from './ui/no-analytics-button'
 
 interface TopNavProps {
   variant?: 'default' | 'modal'
@@ -44,7 +45,8 @@ export function TopNav({ variant = 'default' }: TopNavProps) {
           <div className="flex items-center gap-2">
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button 
+                <AnalyticsButton 
+                  analyticsEvent='top_nav_feedback_clicked'
                   variant="ghost" 
                   iconSize={5}
                   className={`w-9 h-9 p-2 ${location.pathname === '/feedback' ? 'text-foreground [&>svg]:text-foreground' : 'text-muted-foreground [&>svg]:text-muted-foreground'}`}
@@ -53,12 +55,13 @@ export function TopNav({ variant = 'default' }: TopNavProps) {
                   <Link to="/feedback">
                     <CircleHelpIcon size={20} />
                   </Link>
-                </Button>
+                </AnalyticsButton>
               </TooltipTrigger>
               <TooltipContent side="bottom" sideOffset={10}>Feedback</TooltipContent>
             </Tooltip>
             {variant === 'default' ? (
-              <Button  
+              <AnalyticsButton  
+                analyticsEvent='top_nav_start_focus_clicked'
                 size="sm" 
                 onClick={handleStartFlowSession}
               >
@@ -70,11 +73,15 @@ export function TopNav({ variant = 'default' }: TopNavProps) {
                     ))}
                   </div>
                 )}
-              </Button>
+              </AnalyticsButton>
             ) : (
-              <Button variant="ghost" size="icon" onClick={() => navigate('/')}>
+              <NoAnalyticsButton 
+                variant="ghost" 
+                size="icon" 
+                onClick={() => navigate('/')}
+              >
                 <X className="h-6 w-6" />
-              </Button>
+              </NoAnalyticsButton>
             )}
           </div>
         </div>
diff --git a/src/components/TypewriterModeToggle.tsx b/src/components/TypewriterModeToggle.tsx
deleted file mode 100644
index 02f91c15..00000000
--- a/src/components/TypewriterModeToggle.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useState } from 'react'
-import { TypeOutline, KeyRound } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { PaywallDialog } from '@/components/PaywallDialog'
-import { usePermissions } from '@/hooks/usePermissions'
-
-interface TypewriterModeToggleProps {
-  typewriterMode: boolean
-  onToggle: (value: boolean) => void
-}
-
-export function TypewriterModeToggle({ typewriterMode, onToggle }: TypewriterModeToggleProps) {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-  const { canUseTypewriter } = usePermissions()
-
-  return (
-    <div>
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-        <PopoverTrigger asChild>
-          <div
-            onMouseEnter={() => setIsPopoverOpen(true)}
-            onMouseLeave={() => setIsPopoverOpen(false)}
-          >
-            {canUseTypewriter ? (
-              <Button
-                variant="ghost"
-                size="icon"
-                className={`text-muted-foreground ${typewriterMode ? 'bg-transparent hover:bg-transparent' : ''}`}
-                onClick={(e) => {
-                  e.preventDefault()
-                  onToggle(!typewriterMode)
-                }}
-              >
-                <div className="relative">
-                  <TypeOutline className="h-4 w-4" />
-                  <div className={`absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full ${typewriterMode ? 'bg-green-600' : 'bg-muted'}`} />
-                </div>
-              </Button>
-            ) : (
-              <PaywallDialog>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="text-muted-foreground"
-                >
-                  <div className="relative">
-                    <TypeOutline className="h-4 w-4" />
-                    <div className="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full bg-muted" />
-                  </div>
-                </Button>
-              </PaywallDialog>
-            )}
-          </div>
-        </PopoverTrigger>
-        <PopoverContent side="top" align="center" className="w-56">
-          <div className="flex items-center justify-between">
-            <p className="text-sm font-medium">Typewriter Mode</p>
-            {canUseTypewriter ? (
-              <Badge variant={typewriterMode ? 'default' : 'secondary'} className={`text-xs px-1.5 py-0 ${typewriterMode ? 'bg-green-600' : ''}`}>
-                {typewriterMode ? 'On' : 'Off'}
-              </Badge>
-            ) : (
-              <KeyRound className="h-4 w-4 text-yellow-500" />
-            )}
-          </div>
-          <p className="text-xs text-muted-foreground mt-2">De-emphasize everything but the active window</p>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-} 
diff --git a/src/components/UsageSummary.tsx b/src/components/UsageSummary.tsx
index 6b683c3a..a75b2fdf 100644
--- a/src/components/UsageSummary.tsx
+++ b/src/components/UsageSummary.tsx
@@ -16,7 +16,7 @@ import {
 import { Skeleton } from './ui/skeleton'
 import { GraphableTimeByHourBlock, AppsWithTime } from '@/api/monitorApi/monitorApi'
 import { AppIcon } from '@/components/AppIcon'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { useRef, useEffect, useState } from 'react'
 import { Switch } from '@/components/ui/switch'
 import { useCreateNotification, useGetNotificationBySentId } from '@/api/hooks/useNotifications'
@@ -236,14 +236,15 @@ export const UsageSummary = ({
             <CardContent>
               <div className="flex items-center space-x-2">
                 {sortedAppUsage.slice(0, 3).map((app, index) => (
-                  <Button
+                  <AnalyticsButton
+                    analyticsEvent='usage_summary_top_apps_clicked'
                     key={index}
                     variant="ghost"
                     className="w-8 h-8 p-0"
                     onClick={showTopAppsButton ? scrollToAppUsage : undefined}
                   >
                     <AppIcon app={app} />
-                  </Button>
+                  </AnalyticsButton>
                 ))}
               </div>
             </CardContent>
diff --git a/src/components/UserProfileSettings.tsx b/src/components/UserProfileSettings.tsx
index 77d6f3ba..2677da7a 100644
--- a/src/components/UserProfileSettings.tsx
+++ b/src/components/UserProfileSettings.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { PaywallDialog } from '@/components/PaywallDialog'
@@ -99,7 +99,8 @@ export function UserProfileSettings({ user }: UserProfileSettingsProps) {
           </div>
 
           <div className="flex items-center gap-3">
-            <Button 
+            <AnalyticsButton 
+              analyticsEvent='user_profile_settings_login_with_google_clicked'
               variant="outline" 
               size="sm" 
               onClick={handleGoogleLogin}
@@ -124,7 +125,7 @@ export function UserProfileSettings({ user }: UserProfileSettingsProps) {
                 />
               </svg>
               Login with Google
-            </Button>
+            </AnalyticsButton>
           </div>
         </div>
       </div>
@@ -157,7 +158,13 @@ export function UserProfileSettings({ user }: UserProfileSettingsProps) {
                       {license?.licenseType && <p>Type: {license.licenseType}</p>}
                       {license?.expirationDate && <p>Updates until: {format(new Date(license.expirationDate), 'PP')}</p>}
                       {license?.licenseType === 'subscription' && (
-                        <Button size="sm" variant="outline" onClick={handleManageSubscription} className="mt-2 w-full">Manage Subscription</Button>
+                        <AnalyticsButton 
+                          analyticsEvent='user_profile_settings_manage_subscription_clicked'
+                          size="sm" 
+                          variant="outline" 
+                          onClick={handleManageSubscription} 
+                          className="mt-2 w-full"
+                        >Manage Subscription</AnalyticsButton>
                       )}
                     </TooltipContent>
                   </Tooltip>
@@ -181,10 +188,15 @@ export function UserProfileSettings({ user }: UserProfileSettingsProps) {
         </div>
 
         <div className="flex items-center gap-3">
-          <Button variant="outline" size="sm" onClick={handleLogout}>
+          <AnalyticsButton 
+            analyticsEvent='user_profile_settings_logout_clicked'
+            variant="outline" 
+            size="sm" 
+            onClick={handleLogout}
+          >
             <LogOut className="h-4 w-4 mr-2" />
              Logout
-          </Button>
+          </AnalyticsButton>
         </div>
       </div>
     </div>
diff --git a/src/components/developer/ResetAppData.tsx b/src/components/developer/ResetAppData.tsx
index ac990ce8..0f4cf39b 100644
--- a/src/components/developer/ResetAppData.tsx
+++ b/src/components/developer/ResetAppData.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react'
-import { Button } from '@/components/ui/button'
 import { invoke } from '@tauri-apps/api/core'
 import { StorageUtils } from '@/lib/utils/storage.util'
 import { logAndToastError } from '@/lib/utils/ebbError.util'
 import { useAuth } from '../../hooks/useAuth'
+import { NoAnalyticsButton } from '../ui/no-analytics-button'
 
 export const ResetAppData = () => {
   const [isResetting, setIsResetting] = useState(false)
@@ -52,21 +52,21 @@ export const ResetAppData = () => {
         This will reset all app data to simulate a first-time experience. Your existing data will be backed up.
       </p>
       <div className="flex space-x-4">
-        <Button
+        <NoAnalyticsButton
           variant="destructive"
           onClick={handleResetAppData}
           disabled={isResetting}
         >
           {isResetting ? 'Resetting...' : 'Reset App Data'}
-        </Button>
+        </NoAnalyticsButton>
 
-        <Button
+        <NoAnalyticsButton
           variant="outline"
           onClick={handleRestoreAppData}
           disabled={isRestoring}
         >
           {isRestoring ? 'Restoring...' : 'Restore Last Backup'}
-        </Button>
+        </NoAnalyticsButton>
       </div>
     </div>
   )
diff --git a/src/components/difficulty-selector/DifficultyButton.tsx b/src/components/difficulty-selector/DifficultyButton.tsx
index 320e36af..3db1dda3 100644
--- a/src/components/difficulty-selector/DifficultyButton.tsx
+++ b/src/components/difficulty-selector/DifficultyButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { cn } from '@/lib/utils/tailwind.util'
 import { KeyRound } from 'lucide-react'
 import { PaywallDialog } from '../PaywallDialog'
@@ -23,7 +23,8 @@ export function DifficultyButton({
       key={difficulty.value}
       className="relative"
     >
-      <Button
+      <AnalyticsButton
+        analyticsEvent='difficulty_selector_clicked'
         variant={isSelected ? 'secondary' : 'ghost'}
         className={cn(
           'flex flex-col items-start h-auto px-2 py-1.5 text-sm gap-0.5 w-full',
@@ -47,17 +48,18 @@ export function DifficultyButton({
         <span className="text-xs text-muted-foreground pl-6">
           {difficulty.description}
         </span>
-      </Button>
+      </AnalyticsButton>
       {difficulty.value === 'hard' && isDisabled && (
         <div className="absolute right-2 top-1/2 -translate-y-1/2">
           <PaywallDialog>
-            <Button
+            <AnalyticsButton
+              analyticsEvent='paywall_dialog_hard_clicked'
               variant="ghost"
               size="icon"
               className="h-4 w-4 p-0 hover:bg-transparent"
             >
               <KeyRound className="h-3 w-3 text-yellow-500" />
-            </Button>
+            </AnalyticsButton>
           </PaywallDialog>
         </div>
       )}
diff --git a/src/components/difficulty-selector/DifficultySelector.tsx b/src/components/difficulty-selector/DifficultySelector.tsx
index 31c22e61..8b7e9af5 100644
--- a/src/components/difficulty-selector/DifficultySelector.tsx
+++ b/src/components/difficulty-selector/DifficultySelector.tsx
@@ -3,7 +3,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { cn } from '@/lib/utils/tailwind.util'
 import { DifficultyButton } from './DifficultyButton'
 import { SignalBars } from './SignalBars'
@@ -47,7 +47,8 @@ export function DifficultySelector({ value, onChange, className, disabledOptions
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button
+        <AnalyticsButton
+          analyticsEvent='difficulty_selector_clicked'
           variant="ghost"
           size="sm"
           className={cn(
@@ -58,7 +59,7 @@ export function DifficultySelector({ value, onChange, className, disabledOptions
           onClick={(e) => e.stopPropagation()}
         >
           <SignalBars level={selectedDifficulty.level} />
-        </Button>
+        </AnalyticsButton>
       </PopoverTrigger>
       <PopoverContent 
         className="w-[290px] p-1" 
diff --git a/src/components/ui/analytics-button.tsx b/src/components/ui/analytics-button.tsx
new file mode 100644
index 00000000..955cdaf6
--- /dev/null
+++ b/src/components/ui/analytics-button.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { Button, type ButtonProps } from './button'
+import { AnalyticsService, type AnalyticsEvent, type AnalyticsEventProperties } from '@/lib/analytics'
+
+export interface AnalyticsButtonProps extends ButtonProps {
+  analyticsEvent: AnalyticsEvent
+  analyticsProperties?: AnalyticsEventProperties
+}
+
+const AnalyticsButton = React.forwardRef<HTMLButtonElement, AnalyticsButtonProps>(
+  ({ analyticsEvent, analyticsProperties, onClick, ...props }, ref) => {
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      console.log('AnalyticsButton clicked:', { analyticsEvent, analyticsProperties })
+      // Track the analytics event
+      AnalyticsService.trackEvent(analyticsEvent, analyticsProperties)
+      
+      // Call the original onClick handler
+      if (onClick) {
+        onClick(e)
+      }
+    }
+
+    return (
+      <Button
+        ref={ref}
+        onClick={handleClick}
+        {...props}
+      />
+    )
+  },
+)
+AnalyticsButton.displayName = 'AnalyticsButton'
+
+export { AnalyticsButton }
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index c562e817..113f2ae7 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -3,6 +3,7 @@ import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { DayPicker } from 'react-day-picker'
 
 import { cn } from '@/lib/utils/tailwind.util'
+// eslint-disable-next-line
 import { buttonVariants } from '@/components/ui/button'
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
diff --git a/src/components/ui/no-analytics-button.tsx b/src/components/ui/no-analytics-button.tsx
new file mode 100644
index 00000000..8e3f4c63
--- /dev/null
+++ b/src/components/ui/no-analytics-button.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Button, type ButtonProps } from './button'
+
+
+
+const NoAnalyticsButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ ...props }, ref) => {
+
+    return (
+      <Button
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+NoAnalyticsButton.displayName = 'NoAnalyticsButton'
+
+export { NoAnalyticsButton }
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
new file mode 100644
index 00000000..db5d48df
--- /dev/null
+++ b/src/lib/analytics.ts
@@ -0,0 +1,167 @@
+import { default as posthog } from 'posthog-js'
+import { NotificationType } from '@/components/NotificationPanel/NotificationPanel'
+
+export type AnalyticsEvent = 
+  // Focus Session Events
+  | 'start_focus_clicked'
+  | 'end_early_clicked'
+  | 'focus_session_completed'
+  | 'add_time_clicked'
+  | 'allow_list_clicked'
+  | 'block_list_clicked'
+  | 'focus_session_duration_selector_clicked'
+  
+  // Schedule Management Events
+  | 'create_schedule_clicked'
+  | 'edit_schedule_clicked'
+  | 'delete_schedule_clicked'
+  
+  // Navigation Events
+  | 'sidebar_nav_clicked'
+  | 'top_nav_help_clicked'
+  
+  // Workflow Events
+  | 'workflow_selected'
+  | 'workflow_edited'
+  | 'workflow_deleted'
+  
+  // Media Control Events
+  | 'music_play_clicked'
+  | 'music_pause_clicked'
+  | 'music_next_clicked'
+  | 'music_previous_clicked'
+  
+  // Upgrade/Pro Events
+  | 'get_pro_clicked'
+  | 'paywall_shown'
+
+  // Onboarding Events
+  | 'accessibility_enabled'
+  | 'shortcut_tutorial_completed'
+
+  // Category Dashboard Events
+  | 'date_picker_clicked'
+
+  // Login Events
+  | 'login_clicked'
+  | 'login_skipped'
+
+  // Slack Onboarding Events
+  | 'slack_connect_clicked'
+  | 'slack_connect_skipped'
+
+  // Settings Page Events
+  | 'delete_account_clicked'
+  | 'delete_account_clicked_canceled'
+  | 'delete_account_clicked_confirmed'
+
+  // Integration Settings Events
+  | 'spotify_disconnect_clicked'
+  | 'spotify_connect_clicked'
+  | 'slack_configure_clicked'
+  | 'music_disconnect_clicked_canceled'
+  | 'music_disconnect_clicked_confirmed'
+
+  // Friends Analytics Events
+  | 'offline_indicator_clicked'
+  | 'connect_to_friends_clicked'
+  | 'accept_friend_request_clicked'
+  | 'decline_friend_request_clicked'
+  | 'load_more_received_invites_clicked'
+  | 'load_more_sent_invites_clicked'
+  | 'invite_friends_clicked'
+  | 'invite_friends_canceled'
+  | 'invite_friends_sent'
+
+  // Active Devices Settings Events
+  | 'deactivate_device_clicked'
+
+  // Mode Toggle Events
+  | 'mode_toggle_clicked'
+
+  // Notification Banner Events
+  | 'notification_dismissed'
+  | NotificationType
+
+  // Range Mode Events
+  | 'range_mode_selector_clicked'
+  | 'range_mode_clicked'
+
+  // Schedule Session Modal Events
+  | 'schedule_session_modal_clicked'
+  | 'schedule_session_modal_canceled'
+  | 'schedule_session_modal_created'
+  | 'schedule_session_modal_updated'
+  | 'schedule_session_modal_deleted'
+
+  // Customize Shortcut Events
+  | 'shortcut_input_clicked'
+
+  // Slack Focus Toggle Events
+  | 'slack_focus_settings_save_clicked'
+  | 'slack_focus_settings_more_settings_clicked'
+
+  // Social Status Summary Events
+  | 'connect_to_friends_clicked'
+
+  // Top Nav Events
+  | 'top_nav_feedback_clicked'
+  | 'top_nav_start_focus_clicked'
+
+  // Usage Summary Events
+  | 'usage_summary_top_apps_clicked'
+
+  // User Profile Settings Events
+  | 'user_profile_settings_login_with_google_clicked'
+  | 'user_profile_settings_manage_subscription_clicked'
+  | 'user_profile_settings_logout_clicked'
+
+  // Paywall Dialog Events
+  | 'paywall_dialog_hard_clicked'
+
+  // Difficulty Selector Events
+  | 'difficulty_selector_clicked'
+
+  // App Kanban Board Events
+  | 'app_dragged'
+
+export interface AnalyticsEventProperties {
+  // Focus session properties
+  difficulty?: 'easy' | 'medium' | 'hard'
+  session_duration?: number
+  workflow_id?: string
+  workflow_name?: string
+  
+  // Navigation properties
+  destination?: string
+  source?: string
+  
+  // Schedule properties
+  schedule_type?: 'one_time' | 'recurring'
+  recurrence_type?: 'daily' | 'weekly' | 'monthly'
+  
+  // General properties
+  button_location?: string
+  keyboard_shortcut_used?: boolean
+  context?: string
+}
+
+const trackEvent = (
+  event: AnalyticsEvent, 
+  properties?: AnalyticsEventProperties
+): void => {
+  console.log('Tracking event:', event, properties)
+  try {
+    posthog.capture(event, {
+      ...properties,
+      timestamp: new Date().toISOString(),
+      app_version: '0.4.7',
+    })
+  } catch (error) {
+    console.warn('Failed to track analytics event:', event, error)
+  }
+}
+
+export const AnalyticsService = {
+  trackEvent,
+}
diff --git a/src/pages/AccessibilityPage.tsx b/src/pages/AccessibilityPage.tsx
index a7f8e938..f80970cc 100644
--- a/src/pages/AccessibilityPage.tsx
+++ b/src/pages/AccessibilityPage.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { useNavigate } from 'react-router-dom'
 import { useState, useEffect } from 'react'
 import { Github, Lock, Loader2, CheckCircle2 } from 'lucide-react'
@@ -138,15 +138,17 @@ export const AccessibilityPage = () => {
 
         <div className="max-w-xs mx-auto w-full border-b mb-12" />
 
-        <Button
+        <AnalyticsButton
           size="lg"
           onClick={permissionStatus === 'granted' ?
             handleComplete :
             handleRequestPermissions}
           className="mb-4"
+          analyticsEvent="accessibility_enabled"
+          analyticsProperties={{ button_location: 'accessibility_page' }}
         >
           {permissionStatus === 'granted' ? 'Continue' : 'Enable Permissions'}
-        </Button>
+        </AnalyticsButton>
 
         <div className="flex items-center gap-2 mt-4">
           {(permissionStatus === 'checking' || permissionStatus === 'not_granted') && (
diff --git a/src/pages/CategoryDashboardPage.tsx b/src/pages/CategoryDashboardPage.tsx
index e0b37a95..2b78c381 100644
--- a/src/pages/CategoryDashboardPage.tsx
+++ b/src/pages/CategoryDashboardPage.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties, useEffect, useState } from 'react'
 import { Layout } from '@/components/Layout'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Progress } from '@/components/ui/progress'
 import { Calendar } from '@/components/ui/calendar'
 import { formatTime } from '@/components/UsageSummary'
@@ -215,9 +215,14 @@ export default function CategoryDashboardPage () {
             <RangeModeSelector value={rangeMode} onChange={setRangeMode} />
             <Popover>
               <PopoverTrigger asChild>
-                <Button
+                <AnalyticsButton
                   variant="outline"
                   className="justify-start text-left font-normal"
+                  analyticsEvent="date_picker_clicked"
+                  analyticsProperties={{
+                    destination: 'date_picker',
+                    source: 'category_dashboard_page'
+                  }}
                 >
                   <div className="flex items-center gap-2">
                     {date.toLocaleDateString() === new Date().toLocaleDateString()
@@ -225,7 +230,7 @@ export default function CategoryDashboardPage () {
                       : DateTime.fromJSDate(date).toFormat('LLL dd, yyyy')}
                     <ChevronDown className="h-4 w-4" />
                   </div>
-                </Button>
+                </AnalyticsButton>
               </PopoverTrigger>
               <PopoverContent className="w-auto p-0">
                 <Calendar
diff --git a/src/pages/DeviceLimitPage.tsx b/src/pages/DeviceLimitPage.tsx
index fc4da3bb..cc44158e 100644
--- a/src/pages/DeviceLimitPage.tsx
+++ b/src/pages/DeviceLimitPage.tsx
@@ -1,7 +1,7 @@
 import { ActiveDevicesSettings } from '@/components/ActiveDevicesSettings'
 import { Layout } from '@/components/Layout'
 import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { PaywallDialog } from '@/components/PaywallDialog'
 import { AlertCircle } from 'lucide-react'
 import { useAuth } from '@/hooks/useAuth'
@@ -25,7 +25,17 @@ export function DeviceLimitPage() {
                        You have reached the max of 1 active devices for free accounts.
                        Please deactivate an existing one or{' '}
                   <PaywallDialog>
-                    <Button variant="link" className="p-0 h-auto text-yellow-700 underline font-semibold">upgrade to Ebb Pro</Button>
+                    <AnalyticsButton 
+                      variant="link" 
+                      className="p-0 h-auto text-yellow-700 underline font-semibold"
+                      analyticsEvent="get_pro_clicked"
+                      analyticsProperties={{
+                        context: 'device_limit',
+                        button_location: 'device_limit_page'
+                      }}
+                    >
+                      upgrade to Ebb Pro
+                    </AnalyticsButton>
                   </PaywallDialog>{' '}
                        for up to 3 macOS devices. The first registered device is always active and free.
                 </>
diff --git a/src/pages/FeedbackPage.tsx b/src/pages/FeedbackPage.tsx
index c20afa68..183e2d5e 100644
--- a/src/pages/FeedbackPage.tsx
+++ b/src/pages/FeedbackPage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Card } from '@/components/ui/card'
 import { Layout } from '@/components/Layout'
 import { CommunityCard } from '@/components/CommunityCard'
@@ -99,9 +99,14 @@ export default function FeedbackPage() {
                   style={{ resize: 'none', overflow: 'hidden' }}
                 />
                 <div className="flex justify-end">
-                  <Button type="submit" disabled={submitting || !feedback.trim()}>
+                  <AnalyticsButton 
+                    type="submit" 
+                    disabled={submitting || !feedback.trim()}
+                    analyticsEvent="top_nav_help_clicked"
+                    analyticsProperties={{ button_location: 'feedback_page' }}
+                  >
                     {submitting ? 'Submitting...' : 'Submit Feedback'}
-                  </Button>
+                  </AnalyticsButton>
                 </div>
               </form>
             )}
diff --git a/src/pages/FlowPage/FlowPage.tsx b/src/pages/FlowPage/FlowPage.tsx
index 6e477a5c..034c4e00 100644
--- a/src/pages/FlowPage/FlowPage.tsx
+++ b/src/pages/FlowPage/FlowPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { FlowSession } from '@/db/ebb/flowSessionRepo'
 import { DateTime, Duration } from 'luxon'
 import { FlowSessionApi } from '@/api/ebbApi/flowSessionApi'
@@ -399,33 +399,36 @@ export const FlowPage = () => {
       </div>
 
       <div className="flex items-center space-x-4">
-        <Button
+        <AnalyticsButton
           variant="ghost"
           size="icon"
           onClick={handlePrevious}
           className={clickedButton === 'prev' ? 'scale-90 transition-transform' : 'transition-transform'}
+          analyticsEvent="music_previous_clicked"
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="19 20 9 12 19 4 19 20"></polygon><line x1="5" y1="19" x2="5" y2="5"></line></svg>
-        </Button>
-        <Button
+        </AnalyticsButton>
+        <AnalyticsButton
           size="icon"
           className={`h-12 w-12 ${clickedButton === 'play' ? 'scale-90 transition-transform' : 'transition-transform'}`}
           onClick={handlePlayPause}
+          analyticsEvent={isPlaying ? 'music_pause_clicked' : 'music_play_clicked'}
         >
           {isPlaying ? (
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
           ) : (
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
           )}
-        </Button>
-        <Button
+        </AnalyticsButton>
+        <AnalyticsButton
           variant="ghost"
           size="icon"
           onClick={handleNext}
           className={clickedButton === 'next' ? 'scale-90 transition-transform' : 'transition-transform'}
+          analyticsEvent="music_next_clicked"
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
-        </Button>
+        </AnalyticsButton>
       </div>
     </div>
   )
diff --git a/src/pages/FlowPage/Timer.tsx b/src/pages/FlowPage/Timer.tsx
index 0bc5a4d3..8df65842 100644
--- a/src/pages/FlowPage/Timer.tsx
+++ b/src/pages/FlowPage/Timer.tsx
@@ -5,7 +5,7 @@ import { useState, useEffect } from 'react'
 import { FlowSession } from '@/db/ebb/flowSessionRepo'
 import { useFlowTimer } from '@/lib/stores/flowTimer'
 import { logAndToastError } from '@/lib/utils/ebbError.util'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 
 const getDurationFormatFromSeconds = (seconds: number) => {
   const duration = Duration.fromMillis(seconds * 1000)
@@ -95,12 +95,17 @@ export const Timer = ({ flowSession }: { flowSession: FlowSession | null }) => {
         {time}
       </div>
       {flowSession?.duration && (
-        <Button
+        <AnalyticsButton
           variant="outline"
           size="sm"
           onClick={handleAddTime}
           className="mt-2"
           disabled={isAddingTime || cooldown}
+          analyticsEvent="add_time_clicked"
+          analyticsProperties={{
+            context: 'add_time',
+            session_duration: totalDuration?.as('seconds') || 0
+          }}
         >
           {isAddingTime ? (
             <>
@@ -112,7 +117,7 @@ export const Timer = ({ flowSession }: { flowSession: FlowSession | null }) => {
           ) : (
             'Add 15 min'
           )}
-        </Button>
+        </AnalyticsButton>
       )}
     </>
   )
diff --git a/src/pages/FocusSchedulePage.tsx b/src/pages/FocusSchedulePage.tsx
index 4120dee0..299dfbeb 100644
--- a/src/pages/FocusSchedulePage.tsx
+++ b/src/pages/FocusSchedulePage.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Layout } from '@/components/Layout'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Card, CardHeader, CardTitle } from '@/components/ui/card'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
 import { useFocusSchedulesWithWorkflow, useDeleteFocusSchedule } from '@/api/hooks/useFocusSchedule'
@@ -76,10 +76,18 @@ export default function FocusSchedulePage() {
                 Schedule focus sessions to protect your most productive times
                 </p>
               </div>
-              <Button onClick={handleCreateNew} variant="outline" className="border-primary">
+              <AnalyticsButton 
+                onClick={handleCreateNew} 
+                variant="outline" 
+                className="border-primary"
+                analyticsEvent="create_schedule_clicked"
+                analyticsProperties={{
+                  button_location: 'focus_schedule_page'
+                }}
+              >
                 <Calendar className="w-4 h-4 mr-2" />
               Create Schedule
-              </Button>
+              </AnalyticsButton>
             </div>
           )}
           <div className="space-y-4">
@@ -104,20 +112,30 @@ export default function FocusSchedulePage() {
                         </div>
                       </div>
                       <div className="flex items-center gap-2">
-                        <Button 
+                        <AnalyticsButton 
                           variant="outline" 
                           size="sm"
                           onClick={() => handleEditSchedule(schedule.id)}
+                          analyticsEvent="edit_schedule_clicked"
+                          analyticsProperties={{
+                            schedule_type: schedule.recurrence?.type ? 'recurring' : 'one_time',
+                            button_location: 'focus_schedule_page'
+                          }}
                         >
                           Edit
-                        </Button>
-                        <Button 
+                        </AnalyticsButton>
+                        <AnalyticsButton 
                           variant="outline" 
                           size="sm"
                           onClick={() => handleDeleteSchedule(schedule.id)}
+                          analyticsEvent="delete_schedule_clicked"
+                          analyticsProperties={{
+                            schedule_type: schedule.recurrence?.type ? 'recurring' : 'one_time',
+                            button_location: 'focus_schedule_page'
+                          }}
                         >
                           <Trash2 className="w-4 h-4" />
-                        </Button>
+                        </AnalyticsButton>
                       </div>
                     </div>
                   </CardHeader>
@@ -130,10 +148,16 @@ export default function FocusSchedulePage() {
                 <p className="text-muted-foreground mb-6">
                   Create your first focus schedule to start protecting your productive time.
                 </p>
-                <Button onClick={handleCreateNew}>
+                <AnalyticsButton 
+                  onClick={handleCreateNew}
+                  analyticsEvent="create_schedule_clicked"
+                  analyticsProperties={{
+                    button_location: 'focus_schedule_page_empty_state'
+                  }}
+                >
                   <Calendar className="w-4 h-4 mr-2" />
                   Create Your First Schedule
-                </Button>
+                </AnalyticsButton>
               </div>
             )}
           </div>
@@ -164,8 +188,28 @@ export default function FocusSchedulePage() {
                 </DialogDescription>
               </DialogHeader>
               <DialogFooter>
-                <Button variant="outline" onClick={() => setShowDeleteDialog(false)}>Cancel</Button>
-                <Button variant="destructive" onClick={confirmDelete}>Delete</Button>
+                <AnalyticsButton 
+                  variant="outline" 
+                  onClick={() => setShowDeleteDialog(false)}
+                  analyticsEvent="delete_schedule_clicked"
+                  analyticsProperties={{
+                    button_location: 'delete_dialog',
+                    context: 'cancel'
+                  }}
+                >
+                  Cancel
+                </AnalyticsButton>
+                <AnalyticsButton 
+                  variant="destructive" 
+                  onClick={confirmDelete}
+                  analyticsEvent="delete_schedule_clicked"
+                  analyticsProperties={{
+                    button_location: 'delete_dialog',
+                    context: 'confirm'
+                  }}
+                >
+                  Delete
+                </AnalyticsButton>
               </DialogFooter>
             </DialogContent>
           </Dialog>
diff --git a/src/pages/FriendsAnalyticsPage/FriendsAnalyticsPreview.tsx b/src/pages/FriendsAnalyticsPage/FriendsAnalyticsPreview.tsx
index 872e3538..fcdc0eba 100644
--- a/src/pages/FriendsAnalyticsPage/FriendsAnalyticsPreview.tsx
+++ b/src/pages/FriendsAnalyticsPage/FriendsAnalyticsPreview.tsx
@@ -8,7 +8,7 @@ import { useNetworkStore } from '@/lib/stores/networkStore'
 import { useUpdateProfileLocation, useProfile } from '@/api/hooks/useProfile'
 import { logAndToastError } from '@/lib/utils/ebbError.util'
 import { ConnectIcon } from '@/components/icons/ConnectIcon'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { DateTime } from 'luxon'
 
@@ -349,15 +349,20 @@ export const FriendsAnalyticsPreview = () => {
                 <p className="text-muted-foreground mb-6">
                   Check your internet connection to connect with friends and see detailed analytics.
                 </p>
-                <Button 
+                <AnalyticsButton 
                   disabled
                   className="gap-2 w-full"
                   size="lg"
                   variant="secondary"
+                  analyticsEvent="offline_indicator_clicked"
+                  analyticsProperties={{
+                    destination: 'offline_indicator',
+                    source: 'friends_analytics_preview'
+                  }}
                 >
                   Offline
                   <div className="h-2 w-2 rounded-full bg-red-500" />
-                </Button>
+                </AnalyticsButton>
               </>
             ) : (
               <>
@@ -365,15 +370,20 @@ export const FriendsAnalyticsPreview = () => {
                 <p className="text-muted-foreground mb-6">
                   Connect with the community to unlock detailed analytics, compare with friends, and track your progress!
                 </p>
-                <Button 
+                <AnalyticsButton 
                   onClick={handleConnect}
                   disabled={isUpdatingProfileLocation}
                   className="gap-2 w-full"
                   size="lg"
+                  analyticsEvent="connect_to_friends_clicked"
+                  analyticsProperties={{
+                    context: 'friends_connect',
+                    button_location: 'friends_analytics_preview'
+                  }}
                 >
                   {isUpdatingProfileLocation ? 'Connecting...' : 'Connect'}
                   <ConnectIcon size={20} />
-                </Button>
+                </AnalyticsButton>
               </>
             )}
           </motion.div>
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index dce42934..58e32f3e 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,5 +1,5 @@
 import { Layout } from '@/components/Layout'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { ChevronDown } from 'lucide-react'
 import { DateTime } from 'luxon'
 import {
@@ -55,9 +55,14 @@ export const HomePage = () => {
               <RangeModeSelector value={rangeMode} onChange={setRangeMode} />
               <Popover>
                 <PopoverTrigger asChild>
-                  <Button
+                  <AnalyticsButton
                     variant="outline"
                     className="justify-start text-left font-normal"
+                    analyticsEvent="date_picker_clicked"
+                    analyticsProperties={{
+                      destination: 'date_picker',
+                      source: 'homepage'
+                    }}
                   >
                     <div className="flex items-center gap-2">
                       {date.toLocaleDateString() === new Date().toLocaleDateString()
@@ -65,7 +70,7 @@ export const HomePage = () => {
                         : DateTime.fromJSDate(date).toFormat('LLL dd, yyyy')}
                       <ChevronDown className="h-4 w-4" />
                     </div>
-                  </Button>
+                  </AnalyticsButton>
                 </PopoverTrigger>
                 <PopoverContent className="w-auto p-0">
                   <Calendar
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index c47ad482..fc960354 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Logo } from '@/components/ui/logo'
 import supabase from '@/lib/integrations/supabase'
 import { invoke } from '@tauri-apps/api/core'
@@ -65,13 +65,18 @@ export const LoginPage = () => {
       </div>
       <p className="text-lg mb-8 text-muted-foreground">Focus starts here.</p>
       {error && <p className="text-sm text-destructive mb-4">{error}</p>}
-      <Button 
+      <AnalyticsButton 
         type="button" 
         variant="outline" 
         size="lg"
         iconSize={5}
         className="flex items-center justify-center gap-2 min-w-[240px] mb-4"
         onClick={handleGoogleLogin}
+        analyticsEvent="login_clicked"
+        analyticsProperties={{
+          context: 'google_login',
+          button_location: 'login_page'
+        }}
       >
         <svg className="h-5 w-5" viewBox="0 0 24 24">
           <path
@@ -92,17 +97,22 @@ export const LoginPage = () => {
           />
         </svg>
         Continue with Google
-      </Button>
+      </AnalyticsButton>
       
-      <Button 
+      <AnalyticsButton 
         type="button" 
         variant="ghost" 
         size="lg"
         className="min-w-[240px] text-muted-foreground hover:text-foreground"
         onClick={handleSkipLogin}
+        analyticsEvent="login_skipped"
+        analyticsProperties={{
+          context: 'skip_login',
+          button_location: 'login_page'
+        }}
       >
         Do this later
-      </Button>
+      </AnalyticsButton>
       
       <div className="mt-6 max-w-[240px] w-full">
         <div className="h-px bg-border mb-6" />
diff --git a/src/pages/SettingsPage/Integrations/IntegrationSettings.tsx b/src/pages/SettingsPage/Integrations/IntegrationSettings.tsx
index 16ec56cd..b633eb32 100644
--- a/src/pages/SettingsPage/Integrations/IntegrationSettings.tsx
+++ b/src/pages/SettingsPage/Integrations/IntegrationSettings.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { SpotifyIcon } from '@/components/icons/SpotifyIcon'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { SpotifyAuthService } from '@/lib/integrations/spotify/spotifyAuth'
 import { SpotifyApiService } from '@/lib/integrations/spotify/spotifyApi'
 import { logAndToastError } from '@/lib/utils/ebbError.util'
@@ -121,25 +121,35 @@ export const IntegrationSettings = () => {
             </div>
             <div>
               {activeService === 'spotify' ? (
-                <Button
+                <AnalyticsButton
                   variant="outline"
                   size="sm"
                   onClick={() => handleUnlink('spotify')}
+                  analyticsEvent="spotify_disconnect_clicked"
+                  analyticsProperties={{
+                    context: 'spotify_disconnect',
+                    button_location: 'integration_settings'
+                  }}
                 >
               Disconnect
-                </Button>
+                </AnalyticsButton>
               ) : (
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <span>
-                      <Button
+                      <AnalyticsButton
                         variant="outline"
                         size="sm"
                         disabled={activeService === 'apple' || isLoading}
                         onClick={handleSpotifyConnect}
+                        analyticsEvent="spotify_connect_clicked"
+                        analyticsProperties={{
+                          context: 'spotify_connect',
+                          button_location: 'integration_settings'
+                        }}
                       >
                     Connect
-                      </Button>
+                      </AnalyticsButton>
                     </span>
                   </TooltipTrigger>
                   {activeService === 'apple' && (
@@ -165,8 +175,28 @@ export const IntegrationSettings = () => {
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setShowUnlinkDialog(false)}>Cancel</Button>
-            <Button variant="destructive" onClick={confirmUnlink}>Disconnect</Button>
+            <AnalyticsButton 
+              variant="outline" 
+              onClick={() => setShowUnlinkDialog(false)}
+              analyticsEvent="music_disconnect_clicked_canceled"
+              analyticsProperties={{
+                destination: 'cancel_disconnect',
+                source: 'integration_settings'
+              }}
+            >
+              Cancel
+            </AnalyticsButton>
+            <AnalyticsButton 
+              variant="destructive" 
+              onClick={confirmUnlink}
+              analyticsEvent="music_disconnect_clicked_confirmed"
+              analyticsProperties={{
+                context: 'confirm_disconnect',
+                button_location: 'integration_settings'
+              }}
+            >
+              Disconnect
+            </AnalyticsButton>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/src/pages/SettingsPage/Integrations/SlackSettings.tsx b/src/pages/SettingsPage/Integrations/SlackSettings.tsx
index c696c426..a3e8891a 100644
--- a/src/pages/SettingsPage/Integrations/SlackSettings.tsx
+++ b/src/pages/SettingsPage/Integrations/SlackSettings.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { SlackIcon } from '@/components/icons/SlackIcon'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { SlackDisconnectModal } from '@/components/SlackDisconnectModal'
 
 import { useSlackStatus } from '@/api/hooks/useSlack'
@@ -73,26 +73,36 @@ export const SlackSettings = () => {
         </div>
         <div>
           {slackStatus?.workspaces?.length || 0 > 0 ? (
-            <Button
+            <AnalyticsButton
               variant="outline"
               size="sm"
               onClick={handleDisconnect}
               disabled={!slackStatus?.workspaces?.length}
+              analyticsEvent="slack_configure_clicked"
+              analyticsProperties={{
+                context: 'slack_configure',
+                button_location: 'slack_settings'
+              }}
             >
               Configure
-            </Button>
+            </AnalyticsButton>
           ) : (
             <Tooltip>
               <TooltipTrigger asChild>
                 <span>
-                  <Button
+                  <AnalyticsButton
                     variant="outline"
                     size="sm"
                     onClick={handleConnect}
                     disabled={!slackStatus?.workspaces?.length}
+                    analyticsEvent="slack_connect_clicked"
+                    analyticsProperties={{
+                      context: 'slack_connect',
+                      button_location: 'slack_settings'
+                    }}
                   >
                     Connect
-                  </Button>
+                  </AnalyticsButton>
                 </span>
               </TooltipTrigger>
             </Tooltip>
diff --git a/src/pages/SettingsPage/SettingsPage.tsx b/src/pages/SettingsPage/SettingsPage.tsx
index 334c3735..26ee787f 100644
--- a/src/pages/SettingsPage/SettingsPage.tsx
+++ b/src/pages/SettingsPage/SettingsPage.tsx
@@ -1,7 +1,7 @@
 import { Layout } from '@/components/Layout'
 import { ModeToggle } from '@/components/ModeToggle'
 import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 
 import {
   Dialog,
@@ -198,12 +198,14 @@ export function SettingsPage() {
                     </div>
                   </div>
                   <div className="flex-shrink-0">
-                    <Button
+                    <AnalyticsButton
                       variant="destructive"
                       onClick={() => setShowDeleteAccountDialog(true)}
+                      analyticsEvent="delete_account_clicked"
+                      analyticsProperties={{ button_location: 'settings_page' }}
                     >
                         Delete Account
-                    </Button>
+                    </AnalyticsButton>
                   </div>
                 </div>
               </div>
@@ -255,20 +257,24 @@ export function SettingsPage() {
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button
+            <AnalyticsButton
               variant="outline"
               onClick={() => setShowDeleteAccountDialog(false)}
               disabled={isDeleting}
+              analyticsEvent="delete_account_clicked_canceled"
+              analyticsProperties={{ button_location: 'settings_page' }}
             >
                 Cancel
-            </Button>
-            <Button
+            </AnalyticsButton>
+            <AnalyticsButton
               variant="destructive"
               onClick={handleDeleteAccount}
               disabled={isDeleting}
+              analyticsEvent="delete_account_clicked_confirmed"
+              analyticsProperties={{ button_location: 'settings_page' }}
             >
               {isDeleting ? 'Deleting...' : 'Delete Account'}
-            </Button>
+            </AnalyticsButton>
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/src/pages/ShortcutTutorialPage.tsx b/src/pages/ShortcutTutorialPage.tsx
index a60be939..2c1dd0db 100644
--- a/src/pages/ShortcutTutorialPage.tsx
+++ b/src/pages/ShortcutTutorialPage.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { useNavigate } from 'react-router-dom'
 import { OnboardingUtils } from '@/lib/utils/onboarding.util'
 import { ShortcutInput } from '@/components/ShortcutInput'
@@ -52,13 +52,18 @@ export const ShortcutTutorialPage = () => {
         </p>
       </div>
 
-      <Button
+      <AnalyticsButton
         size='lg'
         onClick={handleComplete}
         className='min-w-[200px]'
+        analyticsEvent="shortcut_tutorial_completed"
+        analyticsProperties={{
+          destination: 'onboarding_continue',
+          source: 'shortcut_tutorial_page'
+        }}
       >
         Continue
-      </Button>
+      </AnalyticsButton>
     </div>
   )
 }
diff --git a/src/pages/SlackOnboardingPage.tsx b/src/pages/SlackOnboardingPage.tsx
index 406e0c7c..24edbee0 100644
--- a/src/pages/SlackOnboardingPage.tsx
+++ b/src/pages/SlackOnboardingPage.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { useNavigate } from 'react-router-dom'
 import { SlackIcon } from '@/components/icons/SlackIcon'
 import { OnboardingUtils } from '@/lib/utils/onboarding.util'
@@ -35,22 +35,32 @@ export const SlackOnboardingPage = () => {
         <div className="max-w-xs mx-auto w-full border-b mb-12" />
 
         <div className="flex flex-col gap-3 w-full max-w-xs">
-          <Button
+          <AnalyticsButton
             size="lg"
             onClick={handleConnect}
             disabled={!user}
             className="mb-2"
+            analyticsEvent="slack_connect_clicked"
+            analyticsProperties={{
+              context: 'slack_connect',
+              button_location: 'slack_onboarding_page'
+            }}
           >
             {!user ? 'Login Required' : 'Connect Slack'}
-          </Button>
+          </AnalyticsButton>
           
-          <Button
+          <AnalyticsButton
             variant="outline"
             size="lg"
             onClick={handleSkip}
+            analyticsEvent="slack_connect_skipped"
+            analyticsProperties={{
+              destination: 'skip_slack',
+              source: 'slack_onboarding_page'
+            }}
           >
             Skip for Now
-          </Button>
+          </AnalyticsButton>
         </div>
 
         {!user && (
diff --git a/src/pages/StartFlowPage/StartFlowPage.tsx b/src/pages/StartFlowPage/StartFlowPage.tsx
index 4166fd2f..a66e8d7e 100644
--- a/src/pages/StartFlowPage/StartFlowPage.tsx
+++ b/src/pages/StartFlowPage/StartFlowPage.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { motion } from 'framer-motion'
-import { Button } from '@/components/ui/button'
+import { AnalyticsButton } from '@/components/ui/analytics-button'
 import { Card, CardContent } from '@/components/ui/card'
 import { TopNav } from '@/components/TopNav'
 import { TimeSelector } from '@/components/TimeSelector'
@@ -17,6 +17,7 @@ import { logAndToastError } from '@/lib/utils/ebbError.util'
 import { error as logError } from '@tauri-apps/plugin-log'
 import { BlockingPreferenceApi } from '@/api/ebbApi/blockingPreferenceApi'
 import { usePostHog } from 'posthog-js/react'
+import { AnalyticsService } from '@/lib/analytics'
 import { Input } from '@/components/ui/input'
 import { FlowSessionApi } from '@/api/ebbApi/flowSessionApi'
 import { SmartFocusSelector } from '@/pages/StartFlowPage/SmartFocusSelector'
@@ -274,13 +275,20 @@ export const StartFlowPage = () => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
         e.preventDefault()
+        // Track keyboard shortcut usage
+        AnalyticsService.trackEvent('start_focus_clicked', {
+          workflow_id: selectedWorkflowId || undefined,
+          workflow_name: selectedWorkflow?.name,
+          button_location: 'start_flow_page',
+          keyboard_shortcut_used: true,
+        })
         handleBegin()
       }
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [handleBegin])
+  }, [handleBegin, selectedWorkflowId, selectedWorkflow?.name])
 
   return (
     <div className="flex flex-col h-screen">
@@ -373,16 +381,23 @@ export const StartFlowPage = () => {
             </div>
 
 
-            <Button
+            <AnalyticsButton
               className="w-full"
               onClick={handleBegin}
+              analyticsEvent="start_focus_clicked"
+              analyticsProperties={{
+                workflow_id: selectedWorkflowId || undefined,
+                workflow_name: selectedWorkflow?.name,
+                button_location: 'start_flow_page',
+                keyboard_shortcut_used: false,
+              }}
             >
               Start Focus
               <div className="ml-2 flex items-center gap-1">
                 <kbd className="rounded bg-violet-900 px-1.5 font-mono text-sm">⌘</kbd>
                 <kbd className="rounded bg-violet-900 px-1.5 font-mono text-sm">↵</kbd>
               </div>
-            </Button>
+            </AnalyticsButton>
           </CardContent>
         </Card>
       </div>