From 9fd1d2e496510cd81d9f889179936a743ea09365 Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucas.diassantana@gmail.com>
Date: Tue, 23 Jun 2026 11:43:34 -0300
Subject: [PATCH 1/7] style(dashboard): refresh the overview page within the
 design system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Panel borders for definition, uppercase tracking-wide section/stat labels for
hierarchy, tighter density + badge refinement, and a neon-accent hover on the
quick-action rows. All via existing lucky-* tokens + shadcn primitives — no new
palette, fonts, or deps. Reference treatment for the site-wide refresh.
---
 .../frontend/src/pages/DashboardOverview.tsx  | 127 +++++++++++-------
 1 file changed, 81 insertions(+), 46 deletions(-)

diff --git a/packages/frontend/src/pages/DashboardOverview.tsx b/packages/frontend/src/pages/DashboardOverview.tsx
index 8f424e33b..66b8f43f6 100644
--- a/packages/frontend/src/pages/DashboardOverview.tsx
+++ b/packages/frontend/src/pages/DashboardOverview.tsx
@@ -94,12 +94,12 @@ function CompactStat({
     delta?: number
 }) {
     return (
-        <div className='flex items-center justify-between gap-3 px-4 py-3'>
+        <div className='flex items-center justify-between gap-3 px-4 py-3 transition-colors hover:bg-lucky-bg-active/25'>
             <div className='flex items-center gap-2.5 min-w-0'>
                 {icon && (
                     <span
                         className={cn(
-                            'flex h-7 w-7 shrink-0 items-center justify-center rounded-md',
+                            'flex h-6 w-6 shrink-0 items-center justify-center rounded-sm text-xs',
                             compactToneClass[tone],
                         )}
                         aria-hidden='true'
@@ -107,16 +107,18 @@ function CompactStat({
                         {icon}
                     </span>
                 )}
-                <p className='type-meta truncate text-lucky-text-tertiary'>{label}</p>
+                <p className='type-meta truncate text-lucky-text-tertiary uppercase tracking-wide'>
+                    {label}
+                </p>
             </div>
             <div className='flex items-center gap-2'>
                 {delta !== undefined && (
                     <span
                         className={cn(
-                            'rounded-full px-1.5 py-0.5 text-[10px] font-medium',
+                            'rounded-sm px-2 py-1 text-[11px] font-semibold uppercase tracking-wider',
                             delta >= 0
-                                ? 'bg-lucky-success/10 text-lucky-success'
-                                : 'bg-lucky-error/10 text-lucky-error',
+                                ? 'bg-lucky-success/20 text-lucky-success'
+                                : 'bg-lucky-error/20 text-lucky-error',
                         )}
                     >
                         {delta >= 0 ? '+' : ''}
@@ -139,7 +141,10 @@ function CaseRow({ case: c, index }: { case: ModerationCase; index: number }) {
         <motion.div
             initial={prefersReducedMotion ? false : { opacity: 0, x: -8 }}
             animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.2, delay: prefersReducedMotion ? 0 : index * 0.05 }}
+            transition={{
+                duration: 0.2,
+                delay: prefersReducedMotion ? 0 : index * 0.05,
+            }}
             className='grid grid-cols-[auto_1fr_auto] items-center gap-3 px-4 py-3 transition-colors hover:bg-lucky-bg-tertiary/50'
         >
             <p className='text-xs font-mono text-lucky-text-tertiary'>
@@ -182,16 +187,12 @@ export default function DashboardOverview() {
         selectedGuild?.id,
         { limit: 8 },
     )
-    const { data: recentTracksData, isLoading: tracksLoading } = useRecentTracks(
-        selectedGuild?.id,
-        5,
-    )
+    const { data: recentTracksData, isLoading: tracksLoading } =
+        useRecentTracks(selectedGuild?.id, 5)
     const { data: leaderboardData, isLoading: leaderboardLoading } =
         useLevelLeaderboard(selectedGuild?.id, 5)
-    const { data: starboardData, isLoading: starboardLoading } = useStarboardTop(
-        selectedGuild?.id,
-        3,
-    )
+    const { data: starboardData, isLoading: starboardLoading } =
+        useStarboardTop(selectedGuild?.id, 3)
 
     const recentCases = casesData?.cases ?? []
     const loading = statsLoading || casesLoading
@@ -289,7 +290,10 @@ export default function DashboardOverview() {
                         </div>
                         <div className='surface-panel divide-y divide-lucky-border/40'>
                             {Array.from({ length: 3 }).map((_, i) => (
-                                <div key={i} className='flex items-center justify-between px-4 py-3'>
+                                <div
+                                    key={i}
+                                    className='flex items-center justify-between px-4 py-3'
+                                >
                                     <Skeleton className='h-3 w-24' />
                                     <Skeleton className='h-5 w-12' />
                                 </div>
@@ -298,23 +302,31 @@ export default function DashboardOverview() {
                     </>
                 ) : (
                     <>
-                        <article className='surface-panel flex flex-col justify-between gap-6 p-6'>
+                        <article className='surface-panel flex flex-col justify-between gap-6 p-6 border border-lucky-border'>
                             <div className='flex items-center justify-between gap-3'>
-                                <p className='type-meta text-lucky-text-tertiary'>Total Members</p>
-                                <span className='rounded-lg bg-lucky-brand/15 p-2.5 text-lucky-brand'>
-                                    <Users className='h-4 w-4' aria-hidden='true' />
+                                <p className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
+                                    Total Members
+                                </p>
+                                <span className='flex h-8 w-8 items-center justify-center rounded-md bg-lucky-brand/15 text-lucky-brand'>
+                                    <Users
+                                        className='h-4 w-4'
+                                        aria-hidden='true'
+                                    />
                                 </span>
                             </div>
-                            <p className='font-[var(--font-lucky-display)] text-5xl font-semibold leading-none tracking-tight text-lucky-text-strong'>
-                                {typeof selectedGuild.memberCount === 'number'
-                                    ? selectedGuild.memberCount.toLocaleString()
-                                    : '0'}
-                            </p>
+                            <div>
+                                <p className='font-[var(--font-lucky-display)] text-5xl font-semibold leading-none tracking-tight text-lucky-text-strong'>
+                                    {typeof selectedGuild.memberCount ===
+                                    'number'
+                                        ? selectedGuild.memberCount.toLocaleString()
+                                        : '0'}
+                                </p>
+                            </div>
                             <p className='type-body-sm text-lucky-text-tertiary'>
                                 Active members across {selectedGuild.name}
                             </p>
                         </article>
-                        <div className='surface-panel divide-y divide-lucky-border/40'>
+                        <div className='surface-panel divide-y divide-lucky-border/40 border border-lucky-border'>
                             <CompactStat
                                 label='Active Cases'
                                 value={stats?.activeCases || 0}
@@ -340,14 +352,19 @@ export default function DashboardOverview() {
 
             <div className='grid grid-cols-1 gap-6 lg:grid-cols-3'>
                 <motion.section
-                    className='surface-panel overflow-hidden lg:col-span-2'
-                    initial={prefersReducedMotion ? false : { opacity: 0, y: 12 }}
+                    className='surface-panel overflow-hidden border border-lucky-border lg:col-span-2'
+                    initial={
+                        prefersReducedMotion ? false : { opacity: 0, y: 12 }
+                    }
                     animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.3, delay: prefersReducedMotion ? 0 : 0.2 }}
+                    transition={{
+                        duration: 0.3,
+                        delay: prefersReducedMotion ? 0 : 0.2,
+                    }}
                 >
                     <div className='flex items-center justify-between border-b border-lucky-border px-4 py-3'>
                         <div>
-                            <h2 className='type-title text-lucky-text-primary'>
+                            <h2 className='type-title text-lucky-text-primary uppercase tracking-wide'>
                                 Recent Cases
                             </h2>
                             <p className='type-body-sm text-lucky-text-tertiary'>
@@ -403,9 +420,14 @@ export default function DashboardOverview() {
 
                 <motion.section
                     className='space-y-3'
-                    initial={prefersReducedMotion ? false : { opacity: 0, y: 12 }}
+                    initial={
+                        prefersReducedMotion ? false : { opacity: 0, y: 12 }
+                    }
                     animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.3, delay: prefersReducedMotion ? 0 : 0.3 }}
+                    transition={{
+                        duration: 0.3,
+                        delay: prefersReducedMotion ? 0 : 0.3,
+                    }}
                     aria-labelledby='quick-actions-heading'
                 >
                     <h2
@@ -414,12 +436,12 @@ export default function DashboardOverview() {
                     >
                         Quick Actions
                     </h2>
-                    <nav className='surface-panel divide-y divide-lucky-border/40 overflow-hidden'>
+                    <nav className='surface-panel divide-y divide-lucky-border/40 overflow-hidden border border-lucky-border'>
                         {visibleQuickActions.map((action) => (
                             <Link
                                 key={action.href}
                                 to={action.href}
-                                className='group flex items-center gap-3 px-4 py-2.5 transition-colors hover:bg-lucky-bg-tertiary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lucky-brand/60'
+                                className='group flex items-center gap-3 border-l-2 border-l-transparent px-4 py-2.5 transition-all hover:border-l-lucky-brand hover:bg-lucky-bg-active/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-lucky-brand/60'
                             >
                                 <span
                                     className='flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-lucky-bg-tertiary text-lucky-text-secondary transition-colors group-hover:bg-lucky-brand/15 group-hover:text-lucky-brand'
@@ -436,7 +458,7 @@ export default function DashboardOverview() {
                                     </p>
                                 </div>
                                 <ArrowRight
-                                    className='h-3.5 w-3.5 shrink-0 text-lucky-text-tertiary opacity-0 transition-opacity group-hover:opacity-100'
+                                    className='h-3.5 w-3.5 shrink-0 text-lucky-text-tertiary opacity-0 transition-all group-hover:opacity-100 group-hover:text-lucky-brand group-hover:translate-x-1'
                                     aria-hidden='true'
                                 />
                             </Link>
@@ -447,10 +469,15 @@ export default function DashboardOverview() {
 
             {hasModuleAccess(effectiveAccess, 'music', 'view') && (
                 <motion.section
-                    className='surface-panel overflow-hidden'
-                    initial={prefersReducedMotion ? false : { opacity: 0, y: 12 }}
+                    className='surface-panel overflow-hidden border border-lucky-border'
+                    initial={
+                        prefersReducedMotion ? false : { opacity: 0, y: 12 }
+                    }
                     animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.3, delay: prefersReducedMotion ? 0 : 0.4 }}
+                    transition={{
+                        duration: 0.3,
+                        delay: prefersReducedMotion ? 0 : 0.4,
+                    }}
                 >
                     <div className='flex items-center justify-between border-b border-lucky-border px-4 py-3'>
                         <div>
@@ -538,17 +565,22 @@ export default function DashboardOverview() {
             {hasModuleAccess(effectiveAccess, 'settings', 'view') && (
                 <motion.section
                     className='space-y-4'
-                    initial={prefersReducedMotion ? false : { opacity: 0, y: 12 }}
+                    initial={
+                        prefersReducedMotion ? false : { opacity: 0, y: 12 }
+                    }
                     animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.3, delay: prefersReducedMotion ? 0 : 0.5 }}
+                    transition={{
+                        duration: 0.3,
+                        delay: prefersReducedMotion ? 0 : 0.5,
+                    }}
                 >
                     <h2 className='type-title text-lucky-text-primary'>
                         Community
                     </h2>
                     <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
-                        <div className='surface-panel overflow-hidden'>
+                        <div className='surface-panel overflow-hidden border border-lucky-border'>
                             <div className='border-b border-lucky-border px-4 py-3'>
-                                <h3 className='type-body-sm font-semibold text-lucky-text-primary'>
+                                <h3 className='type-body-sm font-semibold text-lucky-text-primary uppercase tracking-wide'>
                                     Level Leaderboard
                                 </h3>
                                 <p className='type-body-sm text-lucky-text-tertiary'>
@@ -597,7 +629,7 @@ export default function DashboardOverview() {
                                             </p>
                                             <p className='text-xs text-lucky-text-tertiary text-right'>
                                                 {member.xp.toLocaleString()}
-                                                 XP
+                                                XP
                                             </p>
                                         </motion.div>
                                     ))
@@ -612,9 +644,9 @@ export default function DashboardOverview() {
                             </div>
                         </div>
 
-                        <div className='surface-panel overflow-hidden'>
+                        <div className='surface-panel overflow-hidden border border-lucky-border'>
                             <div className='border-b border-lucky-border px-4 py-3'>
-                                <h3 className='type-body-sm font-semibold text-lucky-text-primary'>
+                                <h3 className='type-body-sm font-semibold text-lucky-text-primary uppercase tracking-wide'>
                                     Starboard Highlights
                                 </h3>
                                 <p className='type-body-sm text-lucky-text-tertiary'>
@@ -692,7 +724,10 @@ export default function DashboardOverview() {
                             ([type, value]) => (
                                 <StatTile
                                     key={type}
-                                    label={type.charAt(0).toUpperCase() + type.slice(1)}
+                                    label={
+                                        type.charAt(0).toUpperCase() +
+                                        type.slice(1)
+                                    }
                                     value={value as number}
                                     tone='neutral'
                                 />

From 29a2ada682425b0a8a3bd6574ffe5b32ad924cc1 Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucas.diassantana@gmail.com>
Date: Tue, 23 Jun 2026 11:51:06 -0300
Subject: [PATCH 2/7] style(dashboard): refresh remaining pages within the
 design system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the approved overview treatment site-wide across the 24 dashboard pages:
panel borders for definition, uppercase tracking-wide metadata labels, density
rhythm, hover polish, and rounded-sm uppercase badges — all via existing lucky-*
tokens + shadcn primitives. Visual/className-only; no copy/logic/structure
changes. 854 frontend tests green.
---
 packages/frontend/src/pages/Admin.tsx         |   6 +-
 packages/frontend/src/pages/AdminSupport.tsx  |   6 +-
 packages/frontend/src/pages/AutoMessages.tsx  |  10 +-
 packages/frontend/src/pages/AutoMod.tsx       |  38 +++---
 packages/frontend/src/pages/Config.tsx        |   8 +-
 .../frontend/src/pages/CustomCommands.tsx     |   4 +-
 packages/frontend/src/pages/EmbedBuilder.tsx  | 124 +++++++++++++-----
 .../frontend/src/pages/GuildAutomation.tsx    |  14 +-
 packages/frontend/src/pages/LastFm.tsx        |  12 +-
 packages/frontend/src/pages/Levels.tsx        |  22 ++--
 packages/frontend/src/pages/Lyrics.tsx        |  20 +--
 packages/frontend/src/pages/Moderation.tsx    |  10 +-
 packages/frontend/src/pages/Music.tsx         |   4 +-
 .../frontend/src/pages/PreferredArtists.tsx   |   8 +-
 packages/frontend/src/pages/ReactionRoles.tsx |   2 +-
 packages/frontend/src/pages/Roles.tsx         |   2 +-
 packages/frontend/src/pages/ServerLogs.tsx    |   4 +-
 .../frontend/src/pages/ServerSettings.tsx     |  16 +--
 packages/frontend/src/pages/ServersPage.tsx   |  16 +--
 packages/frontend/src/pages/Spotify.tsx       |  18 +--
 packages/frontend/src/pages/Starboard.tsx     |  37 ++++--
 packages/frontend/src/pages/Support.tsx       |  10 +-
 packages/frontend/src/pages/TrackHistory.tsx  |  20 +--
 .../src/pages/TwitchNotifications.tsx         |  32 ++---
 24 files changed, 264 insertions(+), 179 deletions(-)

diff --git a/packages/frontend/src/pages/Admin.tsx b/packages/frontend/src/pages/Admin.tsx
index 71512c339..344033ca0 100644
--- a/packages/frontend/src/pages/Admin.tsx
+++ b/packages/frontend/src/pages/Admin.tsx
@@ -105,7 +105,7 @@ export default function AdminPage() {
     return (
         <main className='bg-lucky-bg-primary min-h-screen'>
             {/* Header — compact, density-first */}
-            <header className='border-b border-lucky-border-soft bg-lucky-surface-sidebar px-4 md:px-6 py-4'>
+            <header className='border-b border-lucky-border bg-lucky-surface-sidebar px-4 md:px-6 py-4'>
                 <div className='flex items-center justify-between gap-3'>
                     <div className='flex items-center gap-3'>
                         <ShieldCheck
@@ -150,7 +150,7 @@ export default function AdminPage() {
                     <div className='space-y-1'>
                         <h2
                             id='global-toggles-heading'
-                            className='text-base font-semibold text-lucky-text-primary'
+                            className='text-base font-semibold text-lucky-text-primary uppercase tracking-wide'
                             style={{ fontFamily: 'Sora' }}
                         >
                             Global Feature Toggles
@@ -178,7 +178,7 @@ export default function AdminPage() {
                     <div className='space-y-1'>
                         <h2
                             id='bot-guilds-heading'
-                            className='text-base font-semibold text-lucky-text-primary'
+                            className='text-base font-semibold text-lucky-text-primary uppercase tracking-wide'
                             style={{ fontFamily: 'Sora' }}
                         >
                             Server Management
diff --git a/packages/frontend/src/pages/AdminSupport.tsx b/packages/frontend/src/pages/AdminSupport.tsx
index 2e173c0c9..c9b96ee35 100644
--- a/packages/frontend/src/pages/AdminSupport.tsx
+++ b/packages/frontend/src/pages/AdminSupport.tsx
@@ -47,7 +47,7 @@ export default function AdminSupportPage() {
                     <button
                         key={s}
                         onClick={() => setStatus(s)}
-                        className={`px-3 py-1.5 rounded-full type-meta border transition-colors ${
+                        className={`px-3 py-1.5 rounded-sm type-meta uppercase font-semibold border transition-colors ${
                             status === s
                                 ? 'bg-lucky-brand text-lucky-bg-primary border-lucky-brand'
                                 : 'bg-lucky-bg-active text-lucky-text-secondary border-lucky-border hover:text-lucky-text-primary'
@@ -82,7 +82,7 @@ export default function AdminSupportPage() {
                             <li key={r.id}>
                                 <button
                                     onClick={() => setSelectedId(r.id)}
-                                    className={`w-full text-left surface-panel rounded-lg border p-3 transition-colors ${
+                                    className={`w-full text-left surface-panel rounded-lg border p-3 transition-colors hover:bg-lucky-bg-active/25 ${
                                         selectedId === r.id
                                             ? 'border-lucky-brand'
                                             : 'border-lucky-border hover:border-lucky-text-tertiary'
@@ -182,7 +182,7 @@ function StatusBadge({ status }: { status: string }) {
                 : 'bg-lucky-warning/10 text-lucky-warning border-lucky-warning/20'
     return (
         <span
-            className={`inline-block px-2 py-0.5 rounded-full type-meta border ${tone}`}
+            className={`inline-block px-2 py-0.5 rounded-sm type-meta uppercase font-semibold border ${tone}`}
         >
             {t(`support.admin.status.${status}`, { defaultValue: status })}
         </span>
diff --git a/packages/frontend/src/pages/AutoMessages.tsx b/packages/frontend/src/pages/AutoMessages.tsx
index 46b38d145..0eaa010e3 100644
--- a/packages/frontend/src/pages/AutoMessages.tsx
+++ b/packages/frontend/src/pages/AutoMessages.tsx
@@ -352,7 +352,7 @@ export default function AutoMessagesPage() {
                                             : i * 0.03,
                                     }}
                                 >
-                                    <Card className='p-5 hover:border-lucky-border-strong transition-all'>
+                                    <Card className='p-5 border border-lucky-border hover:border-lucky-border-strong transition-all'>
                                         <div className='flex items-start justify-between mb-3'>
                                             <div className='flex items-center gap-2'>
                                                 <div className='p-2 rounded-lg bg-lucky-brand/15'>
@@ -400,7 +400,7 @@ export default function AutoMessagesPage() {
                                         <div className='flex flex-wrap items-center gap-2'>
                                             <Badge
                                                 variant='outline'
-                                                className='type-meta gap-1 normal-case bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary'
+                                                className='type-meta gap-1 uppercase font-semibold bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary rounded-sm'
                                             >
                                                 <Hash
                                                     className='w-3 h-3'
@@ -410,7 +410,7 @@ export default function AutoMessagesPage() {
                                             </Badge>
                                             <Badge
                                                 variant='outline'
-                                                className='type-meta gap-1 normal-case bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary'
+                                                className='type-meta gap-1 uppercase font-semibold bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary rounded-sm'
                                             >
                                                 <Clock
                                                     className='w-3 h-3'
@@ -422,14 +422,14 @@ export default function AutoMessagesPage() {
                                             {msg.isEmbed && (
                                                 <Badge
                                                     variant='outline'
-                                                    className='type-meta normal-case bg-lucky-brand/10 text-lucky-brand border-lucky-brand/20'
+                                                    className='type-meta uppercase font-semibold bg-lucky-brand/10 text-lucky-brand border-lucky-brand/20 rounded-sm'
                                                 >
                                                     Embed
                                                 </Badge>
                                             )}
                                             <Badge
                                                 variant='outline'
-                                                className='type-meta gap-1 normal-case bg-lucky-bg-tertiary border-lucky-border text-lucky-text-tertiary'
+                                                className='type-meta gap-1 uppercase font-semibold bg-lucky-bg-tertiary border-lucky-border text-lucky-text-tertiary rounded-sm'
                                             >
                                                 <Calendar
                                                     className='w-3 h-3'
diff --git a/packages/frontend/src/pages/AutoMod.tsx b/packages/frontend/src/pages/AutoMod.tsx
index 5d602489f..89575e7ea 100644
--- a/packages/frontend/src/pages/AutoMod.tsx
+++ b/packages/frontend/src/pages/AutoMod.tsx
@@ -62,7 +62,7 @@ function FilterRow({
         <div className='border-b border-lucky-border/50 last:border-b-0'>
             <button
                 onClick={() => onToggle(!enabled)}
-                className='w-full flex items-center justify-between px-6 py-3 hover:bg-[rgba(236,72,153,0.02)] transition-colors'
+                className='w-full flex items-center justify-between px-6 py-3 hover:bg-lucky-bg-active/25 transition-colors'
             >
                 <div className='flex items-center gap-3 flex-1 text-left'>
                     <Icon className='w-4 h-4 text-lucky-brand flex-shrink-0' />
@@ -172,7 +172,7 @@ function TagList({
                         <Badge
                             key={item}
                             variant='outline'
-                            className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1'
+                            className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1 rounded-sm uppercase font-semibold'
                         >
                             {item}
                             <button
@@ -230,7 +230,7 @@ function ChannelPicker({
                         <Badge
                             key={id}
                             variant='outline'
-                            className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1'
+                            className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1 rounded-sm uppercase font-semibold'
                         >
                             <Hash className='w-3 h-3' />
                             {getChannelName(id)}
@@ -294,7 +294,7 @@ function RolePicker({
                         <Badge
                             key={id}
                             variant='outline'
-                            className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1'
+                            className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1 rounded-sm uppercase font-semibold'
                         >
                             <Shield className='w-3 h-3' />
                             {getRoleName(id)}
@@ -358,8 +358,10 @@ function normalizeNumber(
     const toValid = (candidate: number): number => {
         if (!Number.isFinite(candidate)) return fallback
         if (options?.integer && !Number.isInteger(candidate)) return fallback
-        if (options?.min !== undefined && candidate < options.min) return fallback
-        if (options?.max !== undefined && candidate > options.max) return fallback
+        if (options?.min !== undefined && candidate < options.min)
+            return fallback
+        if (options?.max !== undefined && candidate > options.max)
+            return fallback
         return candidate
     }
 
@@ -674,7 +676,7 @@ export default function AutoModPage() {
         <div className='space-y-6'>
             <div className='flex items-start justify-between'>
                 <header>
-                    <h1 className='text-2xl font-bold text-white'>
+                    <h1 className='text-2xl font-bold text-white uppercase tracking-wide'>
                         Auto-Moderation
                     </h1>
                     <p className='text-sm text-lucky-text-secondary mt-1'>
@@ -703,10 +705,10 @@ export default function AutoModPage() {
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: 0 }}
                 >
-                    <Card className='p-5 space-y-4'>
+                    <Card className='p-5 space-y-4 border border-lucky-border'>
                         <div className='flex items-center gap-2'>
                             <Sparkles className='w-5 h-5 text-lucky-warning' />
-                            <h2 className='text-base font-semibold text-white'>
+                            <h2 className='text-base font-semibold text-white uppercase tracking-wide'>
                                 Templates
                             </h2>
                         </div>
@@ -724,9 +726,9 @@ export default function AutoModPage() {
                     animate={{ opacity: 1, y: 0 }}
                     transition={{ delay: 0.05 }}
                 >
-                    <Card className='overflow-hidden'>
-                        <div className='px-6 py-4 border-b border-lucky-border/50'>
-                            <h2 className='text-base font-semibold text-white'>
+                    <Card className='overflow-hidden border border-lucky-border'>
+                        <div className='px-6 py-4 border-b border-lucky-border'>
+                            <h2 className='text-base font-semibold text-white uppercase tracking-wide'>
                                 Content Filters
                             </h2>
                         </div>
@@ -748,7 +750,9 @@ export default function AutoModPage() {
                                 <NumberInput
                                     label='Time window (s)'
                                     value={settings.spamTimeWindow}
-                                    onChange={(v) => update('spamTimeWindow', v)}
+                                    onChange={(v) =>
+                                        update('spamTimeWindow', v)
+                                    }
                                     min={1}
                                     max={60}
                                 />
@@ -848,11 +852,11 @@ export default function AutoModPage() {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.1 }}
             >
-                <Card className='overflow-hidden'>
-                    <div className='px-6 py-4 border-b border-lucky-border/50'>
+                <Card className='overflow-hidden border border-lucky-border'>
+                    <div className='px-6 py-4 border-b border-lucky-border'>
                         <div className='flex items-center gap-2 mb-2'>
                             <CheckCircle2 className='w-5 h-5 text-lucky-success' />
-                            <h2 className='text-base font-semibold text-white'>
+                            <h2 className='text-base font-semibold text-white uppercase tracking-wide'>
                                 Exemptions
                             </h2>
                         </div>
@@ -862,7 +866,7 @@ export default function AutoModPage() {
                         </p>
                     </div>
                     <div className='grid grid-cols-1 md:grid-cols-2'>
-                        <div className='p-6 space-y-3 border-r border-lucky-border/50 md:border-r md:border-b-0 border-b md:border-b-0'>
+                        <div className='p-6 space-y-3 border-r border-lucky-border md:border-r md:border-b-0 border-b md:border-b-0'>
                             <Label className='text-xs text-lucky-text-secondary'>
                                 Exempt Channels
                             </Label>
diff --git a/packages/frontend/src/pages/Config.tsx b/packages/frontend/src/pages/Config.tsx
index adfb3fd5e..93084fca3 100644
--- a/packages/frontend/src/pages/Config.tsx
+++ b/packages/frontend/src/pages/Config.tsx
@@ -55,7 +55,7 @@ export default function ConfigPage() {
                 <header className='space-y-4'>
                     <div className='space-y-1'>
                         <h1
-                            className='text-2xl font-semibold text-lucky-text-primary'
+                            className='text-2xl font-semibold text-lucky-text-primary uppercase tracking-wide'
                             style={{ fontFamily: 'Sora' }}
                         >
                             Configuration
@@ -75,10 +75,10 @@ export default function ConfigPage() {
     return (
         <main className='bg-lucky-bg-primary min-h-screen'>
             {/* Header */}
-            <header className='border-b border-lucky-border-soft bg-lucky-surface-sidebar px-4 md:px-6 py-4'>
+            <header className='border-b border-lucky-border bg-lucky-surface-sidebar px-4 md:px-6 py-4'>
                 <div className='space-y-1'>
                     <h1
-                        className='text-xl font-semibold text-lucky-text-primary'
+                        className='text-xl font-semibold text-lucky-text-primary uppercase tracking-wide'
                         style={{ fontFamily: 'Sora' }}
                     >
                         Configuration
@@ -110,7 +110,7 @@ export default function ConfigPage() {
                                     <button
                                         key={module.id}
                                         type='button'
-                                        className='group relative flex items-start gap-4 p-4 rounded-lg border border-lucky-border-soft bg-lucky-surface-panel transition-colors duration-120 hover:border-lucky-border-strong hover:bg-lucky-surface-elevated focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-lucky-brand focus-visible:ring-offset-2 focus-visible:ring-offset-lucky-bg-primary'
+                                        className='group relative flex items-start gap-4 p-4 rounded-lg border border-lucky-border bg-lucky-surface-panel transition-colors duration-120 hover:border-lucky-border-strong hover:bg-lucky-surface-elevated focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-lucky-brand focus-visible:ring-offset-2 focus-visible:ring-offset-lucky-bg-primary'
                                         onClick={() =>
                                             handleModuleClick(module.id)
                                         }
diff --git a/packages/frontend/src/pages/CustomCommands.tsx b/packages/frontend/src/pages/CustomCommands.tsx
index e6ab7128c..2694328aa 100644
--- a/packages/frontend/src/pages/CustomCommands.tsx
+++ b/packages/frontend/src/pages/CustomCommands.tsx
@@ -197,7 +197,7 @@ export default function CustomCommandsPage() {
                                             : cmd.id,
                                     )
                                 }
-                                className='w-full px-4 py-3 flex items-center gap-3 hover:bg-lucky-surface-elevated transition-colors'
+                                className='w-full px-4 py-3 flex items-center gap-3 transition-colors hover:bg-lucky-bg-active/25'
                             >
                                 <div className='p-2 rounded bg-lucky-bg-active shrink-0'>
                                     <Code className='w-4 h-4 text-lucky-text-secondary' />
@@ -209,7 +209,7 @@ export default function CustomCommandsPage() {
                                         </h3>
                                         <Badge
                                             className={cn(
-                                                'text-[10px] uppercase border shrink-0',
+                                                'text-[10px] uppercase border shrink-0 font-semibold',
                                                 CATEGORY_COLORS[cmd.category] ||
                                                     'bg-lucky-bg-active text-lucky-text-secondary border-lucky-border',
                                             )}
diff --git a/packages/frontend/src/pages/EmbedBuilder.tsx b/packages/frontend/src/pages/EmbedBuilder.tsx
index 597180fb9..9548f8e2c 100644
--- a/packages/frontend/src/pages/EmbedBuilder.tsx
+++ b/packages/frontend/src/pages/EmbedBuilder.tsx
@@ -43,7 +43,9 @@ function EmbedPreview({ form }: { form: FormState }) {
         >
             <div className='bg-lucky-bg-tertiary p-4 space-y-2'>
                 {form.title && (
-                    <p className='type-title text-lucky-text-primary'>{form.title}</p>
+                    <p className='type-title text-lucky-text-primary'>
+                        {form.title}
+                    </p>
                 )}
                 {form.description && (
                     <p className='type-body-sm text-lucky-text-secondary whitespace-pre-wrap'>
@@ -55,10 +57,16 @@ function EmbedPreview({ form }: { form: FormState }) {
                         {form.fields.map((field, i) => (
                             <div
                                 key={i}
-                                className={field.inline ? 'col-span-1' : 'col-span-3'}
+                                className={
+                                    field.inline ? 'col-span-1' : 'col-span-3'
+                                }
                             >
-                                <p className='type-body-sm text-lucky-text-primary'>{field.name}</p>
-                                <p className='type-meta text-lucky-text-secondary'>{field.value}</p>
+                                <p className='type-body-sm text-lucky-text-primary'>
+                                    {field.name}
+                                </p>
+                                <p className='type-meta text-lucky-text-secondary'>
+                                    {field.value}
+                                </p>
                             </div>
                         ))}
                     </div>
@@ -69,12 +77,15 @@ function EmbedPreview({ form }: { form: FormState }) {
                         alt='embed'
                         className='rounded mt-2 max-w-full'
                         onError={(e) => {
-                            ;(e.target as HTMLImageElement).style.display = 'none'
+                            ;(e.target as HTMLImageElement).style.display =
+                                'none'
                         }}
                     />
                 )}
                 {form.footer && (
-                    <p className='type-meta text-lucky-text-tertiary mt-2'>{form.footer}</p>
+                    <p className='type-meta text-lucky-text-tertiary mt-2'>
+                        {form.footer}
+                    </p>
                 )}
             </div>
         </div>
@@ -92,11 +103,14 @@ function FieldEditor({
         onChange([...fields, { name: '', value: '', inline: false }])
 
     const updateField = (i: number, patch: Partial<EmbedField>) => {
-        const updated = fields.map((f, idx) => (idx === i ? { ...f, ...patch } : f))
+        const updated = fields.map((f, idx) =>
+            idx === i ? { ...f, ...patch } : f,
+        )
         onChange(updated)
     }
 
-    const removeField = (i: number) => onChange(fields.filter((_, idx) => idx !== i))
+    const removeField = (i: number) =>
+        onChange(fields.filter((_, idx) => idx !== i))
 
     return (
         <div className='space-y-3'>
@@ -114,7 +128,9 @@ function FieldEditor({
                             type='text'
                             placeholder='Field name'
                             value={field.name}
-                            onChange={(e) => updateField(i, { name: e.target.value })}
+                            onChange={(e) =>
+                                updateField(i, { name: e.target.value })
+                            }
                             className='flex-1 bg-lucky-bg-tertiary border-lucky-border'
                         />
                         <button
@@ -128,7 +144,9 @@ function FieldEditor({
                     <textarea
                         placeholder='Field value'
                         value={field.value}
-                        onChange={(e) => updateField(i, { value: e.target.value })}
+                        onChange={(e) =>
+                            updateField(i, { value: e.target.value })
+                        }
                         rows={2}
                         className='w-full bg-lucky-bg-tertiary border border-lucky-border rounded-md px-3 py-2 type-body-sm text-lucky-text-primary resize-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
                     />
@@ -136,7 +154,9 @@ function FieldEditor({
                         <input
                             type='checkbox'
                             checked={field.inline ?? false}
-                            onChange={(e) => updateField(i, { inline: e.target.checked })}
+                            onChange={(e) =>
+                                updateField(i, { inline: e.target.checked })
+                            }
                             className='rounded'
                         />
                         Inline
@@ -176,8 +196,10 @@ function EmbedFormModal({
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState<string | null>(null)
 
-    const set = (key: keyof FormState) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-        setForm((prev) => ({ ...prev, [key]: e.target.value }))
+    const set =
+        (key: keyof FormState) =>
+        (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+            setForm((prev) => ({ ...prev, [key]: e.target.value }))
 
     const handleSave = async () => {
         if (!form.name.trim()) {
@@ -223,7 +245,7 @@ function EmbedFormModal({
 
                         <div className='grid grid-cols-2 gap-4'>
                             <div className='space-y-1.5'>
-                                <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-normal'>
+                                <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                                     Template Name *
                                 </Label>
                                 <Input
@@ -236,7 +258,7 @@ function EmbedFormModal({
                                 />
                             </div>
                             <div className='space-y-1.5'>
-                                <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-normal'>
+                                <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                                     Color
                                 </Label>
                                 <div className='flex gap-2 items-center'>
@@ -285,7 +307,7 @@ function EmbedFormModal({
 
                         <div className='grid grid-cols-2 gap-4'>
                             <div className='space-y-1.5'>
-                                <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-normal'>
+                                <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                                     Thumbnail URL
                                 </Label>
                                 <Input
@@ -297,7 +319,7 @@ function EmbedFormModal({
                                 />
                             </div>
                             <div className='space-y-1.5'>
-                                <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-normal'>
+                                <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                                     Image URL
                                 </Label>
                                 <Input
@@ -325,7 +347,9 @@ function EmbedFormModal({
 
                         <FieldEditor
                             fields={form.fields}
-                            onChange={(fields) => setForm((prev) => ({ ...prev, fields }))}
+                            onChange={(fields) =>
+                                setForm((prev) => ({ ...prev, fields }))
+                            }
                         />
                     </div>
 
@@ -333,7 +357,9 @@ function EmbedFormModal({
                         <p className='type-meta text-lucky-text-tertiary uppercase tracking-wide'>
                             Preview
                         </p>
-                        {form.title || form.description || form.fields.length > 0 ? (
+                        {form.title ||
+                        form.description ||
+                        form.fields.length > 0 ? (
                             <EmbedPreview form={form} />
                         ) : (
                             <p className='type-body-sm text-lucky-text-tertiary'>
@@ -348,7 +374,11 @@ function EmbedFormModal({
                         Cancel
                     </Button>
                     <Button onClick={handleSave} disabled={saving}>
-                        {saving ? 'Saving...' : isEdit ? 'Save Changes' : 'Create Template'}
+                        {saving
+                            ? 'Saving...'
+                            : isEdit
+                              ? 'Save Changes'
+                              : 'Create Template'}
                     </Button>
                 </div>
             </motion.div>
@@ -360,9 +390,9 @@ export default function EmbedBuilder() {
     const { selectedGuild } = useGuildStore()
     const [templates, setTemplates] = useState<EmbedTemplate[]>([])
     const [loading, setLoading] = useState(true)
-    const [modalTemplate, setModalTemplate] = useState<EmbedTemplate | null | undefined>(
-        undefined,
-    )
+    const [modalTemplate, setModalTemplate] = useState<
+        EmbedTemplate | null | undefined
+    >(undefined)
     const [deleteTarget, setDeleteTarget] = useState<string | null>(null)
 
     const fetchTemplates = useCallback(async () => {
@@ -423,7 +453,7 @@ export default function EmbedBuilder() {
 
     return (
         <div className='space-y-6'>
-            <div className='flex items-center justify-between'>
+            <div className='flex items-center justify-between gap-4'>
                 <SectionHeader
                     title='Embed Builder'
                     description='Create and manage reusable Discord embed templates'
@@ -471,7 +501,9 @@ export default function EmbedBuilder() {
                                             <div
                                                 className='h-3 w-3 rounded-full flex-shrink-0'
                                                 style={{
-                                                    backgroundColor: template.color ?? '#5865F2',
+                                                    backgroundColor:
+                                                        template.color ??
+                                                        '#5865F2',
                                                 }}
                                             />
                                             <p className='type-body text-lucky-text-primary truncate'>
@@ -480,14 +512,20 @@ export default function EmbedBuilder() {
                                         </div>
                                         <div className='flex gap-1 flex-shrink-0'>
                                             <button
-                                                onClick={() => setModalTemplate(template)}
+                                                onClick={() =>
+                                                    setModalTemplate(template)
+                                                }
                                                 className='flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-lucky-text-secondary hover:text-lucky-brand hover:bg-lucky-bg-active/50 transition-colors'
                                                 aria-label={`Edit ${template.name}`}
                                             >
                                                 <Pencil className='h-4 w-4' />
                                             </button>
                                             <button
-                                                onClick={() => setDeleteTarget(template.name)}
+                                                onClick={() =>
+                                                    setDeleteTarget(
+                                                        template.name,
+                                                    )
+                                                }
                                                 className='flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-lucky-text-secondary hover:text-red-400 hover:bg-red-500/10 transition-colors'
                                                 aria-label={`Delete ${template.name}`}
                                             >
@@ -508,10 +546,19 @@ export default function EmbedBuilder() {
                                     )}
 
                                     <div className='mt-auto pt-2 flex items-center justify-between type-meta text-lucky-text-tertiary'>
-                                        <span>Used {template.useCount ?? 0}×</span>
+                                        <span>
+                                            Used {template.useCount ?? 0}×
+                                        </span>
                                         {Array.isArray(template.fields) &&
                                             template.fields.length > 0 && (
-                                                <span>{template.fields.length} field{template.fields.length !== 1 ? 's' : ''}</span>
+                                                <span>
+                                                    {template.fields.length}{' '}
+                                                    field
+                                                    {template.fields.length !==
+                                                    1
+                                                        ? 's'
+                                                        : ''}
+                                                </span>
                                             )}
                                     </div>
                                 </Card>
@@ -524,7 +571,9 @@ export default function EmbedBuilder() {
             <AnimatePresence>
                 {isModalOpen && (
                     <EmbedFormModal
-                        template={isNew ? null : (modalTemplate as EmbedTemplate)}
+                        template={
+                            isNew ? null : (modalTemplate as EmbedTemplate)
+                        }
                         onClose={() => setModalTemplate(undefined)}
                         onSave={handleSave}
                     />
@@ -540,10 +589,15 @@ export default function EmbedBuilder() {
                             exit={{ opacity: 0, scale: 0.96 }}
                             className='surface-card rounded-xl p-6 max-w-sm w-full space-y-4'
                         >
-                            <h3 className='type-title text-lucky-text-primary'>Delete Template</h3>
+                            <h3 className='type-title text-lucky-text-primary'>
+                                Delete Template
+                            </h3>
                             <p className='type-body-sm text-lucky-text-secondary'>
-                                Delete <span className='font-mono text-lucky-brand'>"{deleteTarget}"</span>? This
-                                cannot be undone.
+                                Delete{' '}
+                                <span className='font-mono text-lucky-brand'>
+                                    "{deleteTarget}"
+                                </span>
+                                ? This cannot be undone.
                             </p>
                             <div className='flex gap-3 justify-end'>
                                 <Button
@@ -554,7 +608,9 @@ export default function EmbedBuilder() {
                                 </Button>
                                 <Button
                                     variant='destructive'
-                                    onClick={() => void handleDelete(deleteTarget)}
+                                    onClick={() =>
+                                        void handleDelete(deleteTarget)
+                                    }
                                 >
                                     Delete
                                 </Button>
diff --git a/packages/frontend/src/pages/GuildAutomation.tsx b/packages/frontend/src/pages/GuildAutomation.tsx
index 1a36a535e..8b9579cbc 100644
--- a/packages/frontend/src/pages/GuildAutomation.tsx
+++ b/packages/frontend/src/pages/GuildAutomation.tsx
@@ -365,7 +365,7 @@ export default function GuildAutomation() {
             <div className='surface-panel rounded-lg border border-lucky-border p-4 space-y-4'>
                 <div className='flex items-center justify-between'>
                     <div className='flex items-center gap-3'>
-                        <h2 className='text-sm font-semibold text-lucky-text-strong'>
+                        <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                             Automation Status
                         </h2>
                         {loading ? (
@@ -442,7 +442,7 @@ export default function GuildAutomation() {
                 <div className='surface-panel rounded-lg border border-lucky-border p-4 space-y-3'>
                     <div className='flex items-center gap-2'>
                         <GitBranch className='h-4 w-4 text-lucky-brand' />
-                        <h2 className='text-sm font-semibold text-lucky-text-strong'>
+                        <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                             Plan Result
                         </h2>
                     </div>
@@ -454,7 +454,7 @@ export default function GuildAutomation() {
                 <div className='surface-panel rounded-lg border border-lucky-border p-4 space-y-3'>
                     <div className='flex items-center gap-2'>
                         <Zap className='h-4 w-4 text-lucky-accent' />
-                        <h2 className='text-sm font-semibold text-lucky-text-strong'>
+                        <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                             Plan Record
                         </h2>
                     </div>
@@ -472,7 +472,7 @@ export default function GuildAutomation() {
                 >
                     <div className='flex items-center gap-2'>
                         <FileJson className='h-4 w-4 text-lucky-brand' />
-                        <h2 className='text-sm font-semibold text-lucky-text-strong'>
+                        <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                             Manifest
                         </h2>
                         {manifest?.version && (
@@ -541,8 +541,10 @@ export default function GuildAutomation() {
             </div>
 
             {/* Run History */}
-            <div className='space-y-3'>
-                <SectionHeader title='Run History' />
+            <div className='space-y-4'>
+                <h2 className='type-title text-lucky-text-primary'>
+                    Run History
+                </h2>
                 {loading ? (
                     <div className='space-y-2'>
                         {Array.from({ length: 3 }).map((_, i) => (
diff --git a/packages/frontend/src/pages/LastFm.tsx b/packages/frontend/src/pages/LastFm.tsx
index 9ae1ead43..c99c6b0ce 100644
--- a/packages/frontend/src/pages/LastFm.tsx
+++ b/packages/frontend/src/pages/LastFm.tsx
@@ -95,7 +95,7 @@ export default function LastFmPage() {
             )}
 
             {!status?.configured ? (
-                <section className='surface-panel space-y-4 rounded-xl border border-lucky-border/20 p-8'>
+                <section className='surface-panel space-y-4 rounded-lg border border-lucky-border p-6'>
                     <div className='flex items-start gap-4'>
                         <div className='rounded-lg bg-lucky-bg-tertiary p-3'>
                             <Music className='h-6 w-6 text-lucky-text-secondary' />
@@ -120,7 +120,7 @@ export default function LastFmPage() {
                     </div>
                 </section>
             ) : status.linked ? (
-                <section className='surface-panel space-y-6 rounded-xl border border-lucky-border/20 p-8'>
+                <section className='surface-panel space-y-6 rounded-lg border border-lucky-border p-6'>
                     <div className='flex items-start gap-4'>
                         <div className='rounded-full bg-lucky-success/20 p-3'>
                             <Check className='h-6 w-6 text-lucky-success' />
@@ -166,7 +166,7 @@ export default function LastFmPage() {
                     </button>
                 </section>
             ) : (
-                <section className='surface-panel space-y-6 rounded-xl border border-lucky-border/20 p-8'>
+                <section className='surface-panel space-y-6 rounded-lg border border-lucky-border p-6'>
                     <div>
                         <h2 className='type-h2 text-lucky-text-primary'>
                             Connect Your Account
@@ -188,7 +188,7 @@ export default function LastFmPage() {
             )}
 
             <div className='grid gap-4 md:grid-cols-2'>
-                <div className='surface-panel rounded-xl border border-lucky-border/20 p-6'>
+                <div className='surface-panel rounded-lg border border-lucky-border p-6'>
                     <div className='flex items-start gap-3'>
                         <Music className='mt-1 h-5 w-5 text-lucky-accent flex-shrink-0' />
                         <div className='flex-1'>
@@ -203,7 +203,7 @@ export default function LastFmPage() {
                     </div>
                 </div>
 
-                <div className='surface-panel rounded-xl border border-lucky-border/20 p-6'>
+                <div className='surface-panel rounded-lg border border-lucky-border p-6'>
                     <div className='flex items-start gap-3'>
                         <Link2 className='mt-1 h-5 w-5 text-lucky-text-tertiary flex-shrink-0' />
                         <div className='flex-1'>
@@ -219,7 +219,7 @@ export default function LastFmPage() {
                 </div>
             </div>
 
-            <section className='surface-panel space-y-4 rounded-xl border border-lucky-border/20 p-8'>
+            <section className='surface-panel space-y-4 rounded-lg border border-lucky-border p-6'>
                 <h3 className='type-title text-lucky-text-primary'>
                     How it works
                 </h3>
diff --git a/packages/frontend/src/pages/Levels.tsx b/packages/frontend/src/pages/Levels.tsx
index 07ec59819..24da582a5 100644
--- a/packages/frontend/src/pages/Levels.tsx
+++ b/packages/frontend/src/pages/Levels.tsx
@@ -196,11 +196,11 @@ function Levels() {
         <div className='space-y-6'>
             {/* Leaderboard */}
             <section>
-                <h2 className='text-2xl font-bold text-lucky-text-primary mb-4'>
+                <h2 className='type-title text-lucky-text-primary mb-4'>
                     Leaderboard
                 </h2>
                 {leaderboard.length === 0 ? (
-                    <Card className='p-8 text-center'>
+                    <Card className='p-8 text-center border border-lucky-border'>
                         <p className='text-lg font-semibold text-lucky-text-primary mb-2'>
                             No data yet
                         </p>
@@ -210,24 +210,24 @@ function Levels() {
                         </p>
                     </Card>
                 ) : (
-                    <Card className='overflow-hidden'>
+                    <Card className='overflow-hidden border border-lucky-border'>
                         <div className='divide-y divide-lucky-border'>
                             {leaderboard.map((member) => (
                                 <div
                                     key={member.userId}
-                                    className='flex items-center justify-between p-4 hover:bg-lucky-bg-secondary/50 transition-colors'
+                                    className='flex items-center justify-between px-4 py-3 transition-colors hover:bg-lucky-bg-active/25'
                                 >
                                     <div className='flex-1'>
-                                        <p className='font-medium text-lucky-text-primary'>
+                                        <p className='type-body-sm font-medium text-lucky-text-primary'>
                                             {member.displayName ??
                                                 member.userId}
                                         </p>
-                                        <p className='text-sm text-lucky-text-secondary'>
+                                        <p className='type-body-sm text-lucky-text-secondary'>
                                             Level {member.level}
                                         </p>
                                     </div>
                                     <div className='text-right'>
-                                        <p className='font-semibold text-lucky-accent'>
+                                        <p className='type-body-sm font-semibold text-lucky-accent'>
                                             {member.xp.toLocaleString()} XP
                                         </p>
                                     </div>
@@ -240,8 +240,8 @@ function Levels() {
 
             <div className='grid grid-cols-1 lg:grid-cols-2 gap-6'>
                 {/* Config Settings */}
-                <Card className='p-6'>
-                    <h3 className='text-lg font-semibold text-lucky-text-primary mb-4'>
+                <Card className='p-6 border border-lucky-border'>
+                    <h3 className='type-body-sm font-semibold text-lucky-text-primary mb-4 uppercase tracking-wide'>
                         Settings
                     </h3>
                     <div className='space-y-4'>
@@ -317,8 +317,8 @@ function Levels() {
                 </Card>
 
                 {/* Rewards */}
-                <Card className='p-6'>
-                    <h3 className='text-lg font-semibold text-lucky-text-primary mb-4'>
+                <Card className='p-6 border border-lucky-border'>
+                    <h3 className='type-body-sm font-semibold text-lucky-text-primary mb-4 uppercase tracking-wide'>
                         Level Rewards
                     </h3>
 
diff --git a/packages/frontend/src/pages/Lyrics.tsx b/packages/frontend/src/pages/Lyrics.tsx
index 0568d844a..25563d87a 100644
--- a/packages/frontend/src/pages/Lyrics.tsx
+++ b/packages/frontend/src/pages/Lyrics.tsx
@@ -53,17 +53,19 @@ export default function LyricsPage() {
         <div className='space-y-6 px-1 sm:px-0'>
             <header className='flex items-center gap-3'>
                 <MicVocal className='h-6 w-6 text-lucky-red' />
-                <h1 className='type-h2 text-lucky-text-primary'>Lyrics Search</h1>
+                <h1 className='type-h2 text-lucky-text-primary'>
+                    Lyrics Search
+                </h1>
             </header>
 
             <form
                 onSubmit={handleSearch}
-                className='p-4 rounded-lg bg-lucky-bg-tertiary border border-lucky-border space-y-3'
+                className='surface-panel p-4 rounded-lg border border-lucky-border space-y-3'
             >
                 <div className='space-y-1.5'>
                     <label
                         htmlFor='title'
-                        className='text-sm font-medium text-lucky-text-secondary'
+                        className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'
                     >
                         Song Title <span className='text-lucky-red'>*</span>
                     </label>
@@ -81,7 +83,7 @@ export default function LyricsPage() {
                 <div className='space-y-1.5'>
                     <label
                         htmlFor='artist'
-                        className='text-sm font-medium text-lucky-text-secondary'
+                        className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'
                     >
                         Artist (optional)
                     </label>
@@ -136,17 +138,17 @@ export default function LyricsPage() {
 
             {result && !isLoading && (
                 <div className='space-y-4'>
-                    <div className='p-4 rounded-lg bg-lucky-bg-tertiary border border-lucky-border'>
-                        <h2 className='text-lg font-bold text-white'>
+                    <div className='surface-panel p-4 rounded-lg border border-lucky-border'>
+                        <h2 className='type-body-sm font-bold text-lucky-text-primary'>
                             {result.title}
                         </h2>
-                        <p className='text-sm text-lucky-text-secondary'>
+                        <p className='type-body-sm text-lucky-text-secondary'>
                             {result.artist}
                         </p>
                     </div>
 
-                    <div className='p-4 rounded-lg bg-lucky-bg-tertiary border border-lucky-border'>
-                        <pre className='text-sm text-white whitespace-pre-wrap font-mono leading-relaxed'>
+                    <div className='surface-panel p-4 rounded-lg border border-lucky-border'>
+                        <pre className='type-body-sm text-lucky-text-primary whitespace-pre-wrap font-mono leading-relaxed'>
                             {result.lyrics}
                         </pre>
                     </div>
diff --git a/packages/frontend/src/pages/Moderation.tsx b/packages/frontend/src/pages/Moderation.tsx
index 7bc0a98c4..1bbe9bbe9 100644
--- a/packages/frontend/src/pages/Moderation.tsx
+++ b/packages/frontend/src/pages/Moderation.tsx
@@ -447,7 +447,7 @@ export default function ModerationPage() {
             ) : null}
 
             {/* Filters */}
-            <Card className='p-4'>
+            <Card className='p-4 border border-lucky-border'>
                 <div className='flex flex-col sm:flex-row gap-3'>
                     <div className='relative flex-1'>
                         <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-lucky-text-tertiary' />
@@ -490,14 +490,14 @@ export default function ModerationPage() {
             </Card>
 
             {/* Cases Table */}
-            <Card className='overflow-hidden p-0'>
+            <Card className='overflow-hidden p-0 border border-lucky-border'>
                 {/* Header */}
                 <div className='hidden md:grid grid-cols-[40px_1fr_1fr_80px_80px_120px] gap-4 px-6 py-3 border-b border-lucky-border bg-lucky-bg-tertiary/20'>
                     {['#', 'User', 'Moderator', 'Type', 'Status', 'Date'].map(
                         (h) => (
                             <span
                                 key={h}
-                                className='type-meta text-lucky-text-tertiary text-xs'
+                                className='type-meta text-lucky-text-tertiary text-xs uppercase font-semibold tracking-wide'
                             >
                                 {h}
                             </span>
@@ -543,10 +543,10 @@ export default function ModerationPage() {
                                                 ? 0
                                                 : i * 0.02,
                                         }}
-                                        className='grid grid-cols-1 md:grid-cols-[40px_1fr_1fr_80px_80px_120px] gap-2 md:gap-4 px-6 py-3 items-center hover:bg-[rgba(236,72,153,0.04)] transition-colors cursor-pointer'
+                                        className='grid grid-cols-1 md:grid-cols-[40px_1fr_1fr_80px_80px_120px] gap-2 md:gap-4 px-6 py-3 items-center transition-colors hover:bg-lucky-bg-active/25 cursor-pointer'
                                         onClick={() => setSelectedCase(c)}
                                     >
-                                        <span className='type-meta font-mono text-lucky-text-tertiary text-xs'>
+                                        <span className='type-meta font-mono text-lucky-text-tertiary text-xs uppercase font-semibold'>
                                             {c.caseNumber}
                                         </span>
                                         <span className='type-body-sm text-lucky-text-primary truncate'>
diff --git a/packages/frontend/src/pages/Music.tsx b/packages/frontend/src/pages/Music.tsx
index d353a62a9..deff7a841 100644
--- a/packages/frontend/src/pages/Music.tsx
+++ b/packages/frontend/src/pages/Music.tsx
@@ -178,7 +178,7 @@ function NowPlayingHero({
     const progress = duration > 0 ? (position / duration) * 100 : 0
 
     return (
-        <div className='surface-panel rounded-xl overflow-hidden border border-lucky-border'>
+        <div className='surface-panel rounded-xl overflow-hidden border border-lucky-border px-4 sm:px-6'>
             <div className='p-4 sm:p-6'>
                 <div className='grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 items-start'>
                     <div className='sm:col-span-1'>
@@ -197,7 +197,7 @@ function NowPlayingHero({
 
                     <div className='sm:col-span-2 flex flex-col justify-between'>
                         <div>
-                            <p className='type-meta text-lucky-text-tertiary uppercase tracking-wider mb-2'>
+                            <p className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold mb-2'>
                                 Now Playing
                             </p>
                             <h2 className='type-h2 text-lucky-text-primary mb-1 line-clamp-2'>
diff --git a/packages/frontend/src/pages/PreferredArtists.tsx b/packages/frontend/src/pages/PreferredArtists.tsx
index 878f39b35..2615a1f92 100644
--- a/packages/frontend/src/pages/PreferredArtists.tsx
+++ b/packages/frontend/src/pages/PreferredArtists.tsx
@@ -454,7 +454,7 @@ export default function PreferredArtistsPage() {
             />
 
             {/* Tab Buttons */}
-            <div className='surface-panel p-4'>
+            <div className='surface-panel p-4 border border-lucky-border'>
                 <div className='flex gap-2'>
                     {(['discover', 'preferred', 'blocked'] as const).map(
                         (tab) => {
@@ -500,7 +500,7 @@ export default function PreferredArtistsPage() {
             <div className='space-y-4'>
                 {/* Discover Tab */}
                 {currentTab === 'discover' && (
-                    <div className='surface-panel p-4'>
+                    <div className='surface-panel p-4 border border-lucky-border'>
                         <div className='relative'>
                             <Search className='absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-lucky-text-subtle' />
                             <input
@@ -670,7 +670,7 @@ export default function PreferredArtistsPage() {
 
                 {/* Preferred Tab */}
                 {currentTab === 'preferred' && (
-                    <div className='surface-panel p-4'>
+                    <div className='surface-panel p-4 border border-lucky-border'>
                         {preferredArtists.length === 0 ? (
                             <EmptyState
                                 icon={
@@ -718,7 +718,7 @@ export default function PreferredArtistsPage() {
 
                 {/* Blocked Tab */}
                 {currentTab === 'blocked' && (
-                    <div className='surface-panel p-4'>
+                    <div className='surface-panel p-4 border border-lucky-border'>
                         {blockedArtists.length === 0 ? (
                             <EmptyState
                                 icon={
diff --git a/packages/frontend/src/pages/ReactionRoles.tsx b/packages/frontend/src/pages/ReactionRoles.tsx
index 188fd9e6b..5cd922b7a 100644
--- a/packages/frontend/src/pages/ReactionRoles.tsx
+++ b/packages/frontend/src/pages/ReactionRoles.tsx
@@ -138,7 +138,7 @@ function MessageCard({
     }
 
     return (
-        <Card className='space-y-4 p-5'>
+        <Card className='space-y-4 p-5 border border-lucky-border'>
             <div className='flex items-start justify-between gap-3'>
                 <div className='min-w-0 flex-1'>
                     <div className='flex items-center gap-2'>
diff --git a/packages/frontend/src/pages/Roles.tsx b/packages/frontend/src/pages/Roles.tsx
index fbc4dca8c..fdd8e5cc0 100644
--- a/packages/frontend/src/pages/Roles.tsx
+++ b/packages/frontend/src/pages/Roles.tsx
@@ -589,7 +589,7 @@ export default function RolesPage() {
                             animate={{ opacity: 1, y: 0 }}
                             exit={{ opacity: 0, y: -10 }}
                         >
-                            <Card className='p-4 flex items-center justify-between hover:bg-zinc-800/50 transition-colors group'>
+                            <Card className='p-4 flex items-center justify-between border border-lucky-border transition-colors hover:bg-lucky-bg-active/25 group'>
                                 <div className='flex items-center gap-4 flex-1'>
                                     <Checkbox
                                         checked={selectedRoleIds.has(role.id)}
diff --git a/packages/frontend/src/pages/ServerLogs.tsx b/packages/frontend/src/pages/ServerLogs.tsx
index 1d8c89c80..02825e1be 100644
--- a/packages/frontend/src/pages/ServerLogs.tsx
+++ b/packages/frontend/src/pages/ServerLogs.tsx
@@ -260,7 +260,7 @@ export default function ServerLogsPage() {
             </div>
 
             {/* Filters: Linear-density layout */}
-            <Card className='p-4 space-y-3'>
+            <Card className='p-4 space-y-3 border border-lucky-border'>
                 <div className='flex items-center gap-2 text-xs font-semibold text-lucky-text-tertiary uppercase tracking-wider'>
                     <Filter className='w-4 h-4' />
                     Search & Filter
@@ -354,7 +354,7 @@ export default function ServerLogsPage() {
             </div>
 
             {/* Logs List */}
-            <Card className='p-0 overflow-hidden'>
+            <Card className='p-0 overflow-hidden border border-lucky-border'>
                 <div className='divide-y divide-lucky-border/30'>
                     {loading ? (
                         Array.from({ length: 10 }).map((_, i) => (
diff --git a/packages/frontend/src/pages/ServerSettings.tsx b/packages/frontend/src/pages/ServerSettings.tsx
index 89e64046e..c1a168786 100644
--- a/packages/frontend/src/pages/ServerSettings.tsx
+++ b/packages/frontend/src/pages/ServerSettings.tsx
@@ -589,7 +589,7 @@ export default function ServerSettingsPage() {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0 }}
             >
-                <Card className='p-5 space-y-5'>
+                <Card className='p-5 space-y-5 border border-lucky-border'>
                     <div className='flex items-center gap-2'>
                         <Settings className='w-5 h-5 text-lucky-text-secondary' />
                         <h2 className='type-title text-lucky-text-primary'>
@@ -635,7 +635,7 @@ export default function ServerSettingsPage() {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.05 }}
             >
-                <Card className='p-5 space-y-5'>
+                <Card className='p-5 space-y-5 border border-lucky-border'>
                     <div className='flex items-center gap-2'>
                         <Globe className='w-5 h-5 text-lucky-text-secondary' />
                         <h2 className='type-title text-lucky-text-primary'>
@@ -725,14 +725,14 @@ export default function ServerSettingsPage() {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.08 }}
             >
-                <Card className='p-5 space-y-4'>
+                <Card className='p-5 space-y-4 border border-lucky-border'>
                     <div className='flex items-center gap-2'>
                         <Shield className='w-5 h-5 text-lucky-text-secondary' />
                         <div>
                             <h2 className='type-title text-lucky-text-primary'>
                                 Manager Roles
                             </h2>
-                            <p className='type-meta text-lucky-text-tertiary mt-0.5'>
+                            <p className='type-meta text-lucky-text-tertiary mt-0.5 uppercase tracking-wide font-semibold'>
                                 Roles that can manage bot settings via commands
                             </p>
                         </div>
@@ -804,7 +804,7 @@ export default function ServerSettingsPage() {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.1 }}
             >
-                <Card className='p-5'>
+                <Card className='p-5 border border-lucky-border'>
                     <div className='flex items-center justify-between'>
                         <div className='flex items-center gap-3'>
                             <div className='p-2 rounded-lg bg-yellow-500/15'>
@@ -814,7 +814,7 @@ export default function ServerSettingsPage() {
                                 <h3 className='type-body-sm font-semibold text-lucky-text-primary'>
                                     Disable Command Warnings
                                 </h3>
-                                <p className='type-meta text-lucky-text-tertiary mt-0.5'>
+                                <p className='type-meta text-lucky-text-tertiary mt-0.5 uppercase tracking-wide font-semibold'>
                                     Hide permission and cooldown warnings for
                                     users
                                 </p>
@@ -851,7 +851,7 @@ export default function ServerSettingsPage() {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.2 }}
             >
-                <Card className='p-5 space-y-5'>
+                <Card className='p-5 space-y-5 border border-lucky-border'>
                     <div className='flex items-center justify-between gap-4'>
                         <div className='flex items-center gap-3'>
                             <div className='p-2 rounded-lg bg-lucky-brand/10'>
@@ -861,7 +861,7 @@ export default function ServerSettingsPage() {
                                 <h2 className='type-title text-lucky-text-primary'>
                                     Access Control
                                 </h2>
-                                <p className='type-body-sm text-lucky-text-tertiary mt-0.5'>
+                                <p className='type-body-sm text-lucky-text-tertiary mt-0.5 uppercase tracking-wide font-semibold'>
                                     Assign role-based web dashboard permissions
                                 </p>
                             </div>
diff --git a/packages/frontend/src/pages/ServersPage.tsx b/packages/frontend/src/pages/ServersPage.tsx
index 9fa3eee3d..16e8ca23f 100644
--- a/packages/frontend/src/pages/ServersPage.tsx
+++ b/packages/frontend/src/pages/ServersPage.tsx
@@ -43,7 +43,7 @@ export default function ServersPage() {
 
     return (
         <main className='space-y-8'>
-            <div className='surface-panel flex flex-wrap items-center gap-6 p-6'>
+            <div className='surface-panel flex flex-wrap items-center gap-6 p-6 border border-lucky-border'>
                 <Avatar className='h-16 w-16 border border-lucky-border flex-shrink-0'>
                     <AvatarImage
                         src={user?.avatar || undefined}
@@ -55,7 +55,7 @@ export default function ServersPage() {
                 </Avatar>
 
                 <div className='space-y-1'>
-                    <p className='text-xs uppercase tracking-wider text-lucky-text-tertiary'>
+                    <p className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
                         Discord Account
                     </p>
                     <p className='text-lg font-semibold text-lucky-text-primary'>
@@ -67,7 +67,7 @@ export default function ServersPage() {
                 </div>
 
                 <div className='ml-auto text-right flex-shrink-0'>
-                    <p className='text-xs uppercase tracking-wider text-lucky-text-tertiary'>
+                    <p className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
                         Total Servers
                     </p>
                     <p className='text-2xl font-bold text-lucky-brand'>
@@ -80,7 +80,7 @@ export default function ServersPage() {
                 <div className='flex items-baseline justify-between'>
                     <div>
                         <div className='flex items-center gap-2'>
-                            <h2 className='text-xs uppercase tracking-wider text-lucky-text-tertiary'>
+                            <h2 className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
                                 Servers
                             </h2>
                         </div>
@@ -138,7 +138,7 @@ export default function ServersPage() {
 
                 {primaryGuild && (
                     <section className='space-y-3'>
-                        <h2 className='text-xs uppercase tracking-wider text-lucky-text-tertiary'>
+                        <h2 className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
                             Recently Active
                         </h2>
                         <button
@@ -146,7 +146,7 @@ export default function ServersPage() {
                                 navigate(`/guild/${primaryGuild.id}`)
                             }
                             className={cn(
-                                'surface-panel w-full p-6 text-left border-2 transition-all hover:border-lucky-brand/50',
+                                'surface-panel w-full p-6 text-left border-2 transition-all hover:bg-lucky-bg-active/25 hover:border-lucky-brand/50',
                                 primaryGuild.botAdded
                                     ? 'border-lucky-border-strong'
                                     : 'border-lucky-border',
@@ -186,7 +186,7 @@ export default function ServersPage() {
 
                 {secondaryGuilds.length > 0 && (
                     <section className='space-y-3'>
-                        <h2 className='text-xs uppercase tracking-wider text-lucky-text-tertiary'>
+                        <h2 className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
                             All Other Servers
                         </h2>
                         <ServerGrid />
@@ -194,7 +194,7 @@ export default function ServersPage() {
                 )}
 
                 {guilds.length === 0 && (
-                    <div className='surface-panel rounded-lg p-12 text-center'>
+                    <div className='surface-panel rounded-lg p-12 text-center border border-lucky-border'>
                         <div className='w-12 h-12 rounded-full bg-lucky-bg-tertiary mx-auto mb-4 flex items-center justify-center'>
                             <LayoutGrid className='h-6 w-6 text-lucky-text-tertiary' />
                         </div>
diff --git a/packages/frontend/src/pages/Spotify.tsx b/packages/frontend/src/pages/Spotify.tsx
index 860049eb2..8853463e8 100644
--- a/packages/frontend/src/pages/Spotify.tsx
+++ b/packages/frontend/src/pages/Spotify.tsx
@@ -95,7 +95,7 @@ export default function SpotifyPage() {
             )}
 
             {!status?.configured ? (
-                <section className='surface-panel space-y-4 rounded-xl border border-lucky-border/20 p-8'>
+                <section className='surface-panel space-y-4 border border-lucky-border p-8'>
                     <div className='flex items-start gap-4'>
                         <div className='rounded-lg bg-lucky-bg-tertiary p-3'>
                             <Music className='h-6 w-6 text-lucky-text-secondary' />
@@ -120,7 +120,7 @@ export default function SpotifyPage() {
                     </div>
                 </section>
             ) : status.linked ? (
-                <section className='surface-panel space-y-6 rounded-xl border border-lucky-border/20 p-8'>
+                <section className='surface-panel space-y-6 border border-lucky-border p-8'>
                     <div className='flex items-start gap-4'>
                         <div className='rounded-full bg-lucky-success/20 p-3'>
                             <Check className='h-6 w-6 text-lucky-success' />
@@ -142,12 +142,12 @@ export default function SpotifyPage() {
                                 </a>
                             </p>
                         </div>
-                        <div className='rounded-full bg-lucky-success/15 px-3 py-1 text-xs font-600 text-lucky-success'>
+                        <div className='rounded-sm bg-lucky-success/15 px-3 py-1 text-xs font-semibold uppercase text-lucky-success'>
                             Active
                         </div>
                     </div>
 
-                    <p className='type-body-sm text-lucky-text-secondary border-t border-lucky-border/20 pt-4'>
+                    <p className='type-body-sm text-lucky-text-secondary border-t border-lucky-border pt-4'>
                         Lucky can access your library and listening history to
                         provide personalized autoplay recommendations.
                     </p>
@@ -166,7 +166,7 @@ export default function SpotifyPage() {
                     </button>
                 </section>
             ) : (
-                <section className='surface-panel space-y-6 rounded-xl border border-lucky-border/20 p-8'>
+                <section className='surface-panel space-y-6 border border-lucky-border p-8'>
                     <div>
                         <h2 className='type-h2 text-lucky-text-primary'>
                             Connect Your Account
@@ -189,7 +189,7 @@ export default function SpotifyPage() {
             )}
 
             <div className='grid gap-4 md:grid-cols-2'>
-                <div className='surface-panel rounded-xl border border-lucky-border/20 p-6'>
+                <div className='surface-panel border border-lucky-border p-6'>
                     <div className='flex items-start gap-3'>
                         <Music className='mt-1 h-5 w-5 text-lucky-accent flex-shrink-0' />
                         <div className='flex-1'>
@@ -204,7 +204,7 @@ export default function SpotifyPage() {
                     </div>
                 </div>
 
-                <div className='surface-panel rounded-xl border border-lucky-border/20 p-6'>
+                <div className='surface-panel border border-lucky-border p-6'>
                     <div className='flex items-start gap-3'>
                         <Link2 className='mt-1 h-5 w-5 text-lucky-text-tertiary flex-shrink-0' />
                         <div className='flex-1'>
@@ -220,7 +220,7 @@ export default function SpotifyPage() {
                 </div>
             </div>
 
-            <section className='surface-panel space-y-4 rounded-xl border border-lucky-border/20 p-8'>
+            <section className='surface-panel space-y-4 border border-lucky-border p-8'>
                 <h3 className='type-title text-lucky-text-primary'>
                     How it works
                 </h3>
@@ -232,7 +232,7 @@ export default function SpotifyPage() {
                         'Your library stays private and is only used for recommendations',
                     ].map((step, i) => (
                         <li key={i} className='flex items-start gap-3'>
-                            <span className='mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-lucky-accent/20 text-xs font-600 text-lucky-accent flex-shrink-0'>
+                            <span className='mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-sm bg-lucky-accent/20 text-xs font-semibold uppercase text-lucky-accent flex-shrink-0'>
                                 {i + 1}
                             </span>
                             <span className='type-body-sm text-lucky-text-secondary'>
diff --git a/packages/frontend/src/pages/Starboard.tsx b/packages/frontend/src/pages/Starboard.tsx
index a15f2933b..389697f9e 100644
--- a/packages/frontend/src/pages/Starboard.tsx
+++ b/packages/frontend/src/pages/Starboard.tsx
@@ -163,11 +163,11 @@ function Starboard() {
         <div className='space-y-6'>
             {/* Entries */}
             <section>
-                <h2 className='text-2xl font-bold text-lucky-text-primary mb-4'>
+                <h2 className='type-title text-lucky-text-primary uppercase tracking-wide mb-4'>
                     Top Starred Messages
                 </h2>
                 {entries.length === 0 ? (
-                    <Card className='p-8 text-center'>
+                    <Card className='border border-lucky-border p-8 text-center'>
                         <p className='text-lg font-semibold text-lucky-text-primary mb-2'>
                             No starred messages yet
                         </p>
@@ -179,7 +179,10 @@ function Starboard() {
                 ) : (
                     <div className='grid grid-cols-1 gap-3'>
                         {entries.map((entry) => (
-                            <Card key={entry.id} className='p-4'>
+                            <Card
+                                key={entry.id}
+                                className='border border-lucky-border p-4'
+                            >
                                 {entry.content && (
                                     <p className='text-sm text-lucky-text-primary mb-3'>
                                         {entry.content}
@@ -203,18 +206,23 @@ function Starboard() {
 
             {/* Settings */}
             <section>
-                <h2 className='text-2xl font-bold text-lucky-text-primary mb-4'>
+                <h2 className='type-title text-lucky-text-primary uppercase tracking-wide mb-4'>
                     Settings
                 </h2>
-                <Card className='p-6 space-y-4'>
+                <Card className='border border-lucky-border p-6 space-y-4'>
                     {config && (
                         <div className='mb-4'>
-                            <Badge className='bg-green-600'>Active</Badge>
+                            <Badge className='rounded-sm bg-lucky-success text-lucky-text-primary uppercase font-semibold text-xs'>
+                                Active
+                            </Badge>
                         </div>
                     )}
 
                     <div>
-                        <Label htmlFor='channel' className='text-sm'>
+                        <Label
+                            htmlFor='channel'
+                            className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold text-sm'
+                        >
                             Channel ID
                         </Label>
                         <Input
@@ -228,7 +236,10 @@ function Starboard() {
                     </div>
 
                     <div>
-                        <Label htmlFor='emoji' className='text-sm'>
+                        <Label
+                            htmlFor='emoji'
+                            className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold text-sm'
+                        >
                             Emoji
                         </Label>
                         <Input
@@ -242,7 +253,10 @@ function Starboard() {
                     </div>
 
                     <div>
-                        <Label htmlFor='threshold' className='text-sm'>
+                        <Label
+                            htmlFor='threshold'
+                            className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold text-sm'
+                        >
                             Star Threshold
                         </Label>
                         <Input
@@ -263,7 +277,10 @@ function Starboard() {
                     </div>
 
                     <div className='flex items-center justify-between pt-2 border-t border-lucky-border'>
-                        <Label htmlFor='selfStar' className='text-sm'>
+                        <Label
+                            htmlFor='selfStar'
+                            className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold text-sm'
+                        >
                             Allow Self-Star
                         </Label>
                         <Switch
diff --git a/packages/frontend/src/pages/Support.tsx b/packages/frontend/src/pages/Support.tsx
index dc352b30c..5f39bbcb9 100644
--- a/packages/frontend/src/pages/Support.tsx
+++ b/packages/frontend/src/pages/Support.tsx
@@ -131,7 +131,7 @@ export default function SupportPage() {
                 </header>
 
                 {cid && (
-                    <div className='type-body-sm text-lucky-text-secondary bg-lucky-bg-active border border-lucky-border rounded-lg p-3'>
+                    <div className='type-body-sm text-lucky-text-secondary bg-lucky-bg-active border border-lucky-border rounded-sm p-3'>
                         {t('support.referenceId')}:{' '}
                         <code className='text-lucky-text-primary'>{cid}</code>
                     </div>
@@ -141,7 +141,7 @@ export default function SupportPage() {
                     <div className='space-y-1.5'>
                         <label
                             htmlFor='support-context'
-                            className='type-body-sm text-lucky-text-primary'
+                            className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'
                         >
                             {t('support.form.contextLabel')}
                         </label>
@@ -152,14 +152,14 @@ export default function SupportPage() {
                             required
                             rows={6}
                             placeholder={t('support.form.contextPlaceholder')}
-                            className='w-full rounded-lg bg-lucky-bg-active border border-lucky-border text-lucky-text-primary type-body p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lucky-brand'
+                            className='w-full rounded-sm bg-lucky-bg-active border border-lucky-border text-lucky-text-primary type-body p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lucky-brand'
                         />
                     </div>
 
                     <div className='space-y-1.5'>
                         <label
                             htmlFor='support-image'
-                            className='type-body-sm text-lucky-text-primary'
+                            className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'
                         >
                             {t('support.form.imageLabel')}
                         </label>
@@ -182,7 +182,7 @@ export default function SupportPage() {
 
                     {state === 'error' && errorMessage && (
                         <div
-                            className='flex items-center gap-2 type-body-sm text-lucky-error bg-lucky-error/10 border border-lucky-error/20 rounded-lg p-3'
+                            className='flex items-center gap-2 type-body-sm text-lucky-error bg-lucky-error/10 border border-lucky-error/20 rounded-sm p-3'
                             role='alert'
                         >
                             <AlertCircle
diff --git a/packages/frontend/src/pages/TrackHistory.tsx b/packages/frontend/src/pages/TrackHistory.tsx
index 18f8c34ec..b333b98fa 100644
--- a/packages/frontend/src/pages/TrackHistory.tsx
+++ b/packages/frontend/src/pages/TrackHistory.tsx
@@ -128,9 +128,9 @@ export default function TrackHistoryPage() {
 
     return (
         <div className='space-y-6 px-1 sm:px-0'>
-            <header className='flex items-center justify-between'>
+            <header className='flex items-center justify-between gap-4'>
                 <div className='flex items-center gap-3'>
-                    <History className='h-6 w-6 text-lucky-red' />
+                    <History className='h-6 w-6 text-lucky-error' />
                     <h1 className='type-h2 text-lucky-text-primary'>
                         Track History
                     </h1>
@@ -138,7 +138,7 @@ export default function TrackHistoryPage() {
                 {history.length > 0 && (
                     <button
                         onClick={handleClear}
-                        className='flex items-center gap-2 px-3 min-h-[44px] type-body-sm rounded-lg bg-lucky-error/10 text-lucky-error hover:bg-lucky-error/20 transition-colors'
+                        className='flex items-center gap-2 px-3 min-h-[44px] type-body-sm rounded-sm bg-lucky-error/10 text-lucky-error hover:bg-lucky-error/20 transition-colors font-semibold uppercase'
                     >
                         <Trash2 className='w-4 h-4' />
                         Clear
@@ -213,7 +213,7 @@ export default function TrackHistoryPage() {
 
                     <div className='space-y-1'>
                         <div className='flex items-center justify-between px-1 mb-3'>
-                            <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wider'>
+                            <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
                                 Recent Tracks
                             </h2>
                             {total > 0 && (
@@ -237,13 +237,13 @@ export default function TrackHistoryPage() {
                         ) : (
                             <div className='space-y-1'>
                                 <div
-                                    className='surface-panel rounded-lg border border-lucky-border divide-y divide-lucky-border overflow-hidden'
+                                    className='surface-panel border border-lucky-border divide-y divide-lucky-border overflow-hidden'
                                     role='list'
                                 >
                                     {history.map((track, i) => (
                                         <div
                                             key={`${track.trackId}-${i}`}
-                                            className='flex items-center gap-4 px-4 py-3 hover:bg-lucky-bg-active transition-colors'
+                                            className='flex items-center gap-4 px-4 py-3 transition-colors hover:bg-lucky-bg-active/25'
                                             role='listitem'
                                         >
                                             <span className='type-meta text-lucky-text-tertiary w-6 text-center shrink-0'>
@@ -299,7 +299,7 @@ export default function TrackHistoryPage() {
                                     <button
                                         onClick={handleLoadMore}
                                         disabled={isLoadingMore}
-                                        className='w-full mt-4 px-4 py-3 rounded-lg border border-lucky-border text-lucky-text-secondary type-body-sm font-medium hover:text-lucky-text-primary hover:bg-lucky-bg-active transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
+                                        className='w-full mt-4 px-4 py-3 rounded-sm border border-lucky-border text-lucky-text-secondary type-body-sm font-semibold uppercase hover:text-lucky-text-primary hover:bg-lucky-bg-active transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
                                     >
                                         {isLoadingMore
                                             ? 'Loading...'
@@ -324,8 +324,10 @@ function RankingCard({
 }) {
     const max = items[0]?.count ?? 1
     return (
-        <div className='p-4 rounded-lg bg-lucky-bg-tertiary border border-lucky-border'>
-            <h3 className='type-title text-lucky-text-primary mb-3'>{title}</h3>
+        <div className='p-4 rounded-sm bg-lucky-bg-tertiary border border-lucky-border'>
+            <h3 className='type-title text-lucky-text-primary uppercase tracking-wide mb-3 font-semibold'>
+                {title}
+            </h3>
             <div className='space-y-2'>
                 {items.slice(0, 5).map((item, i) => (
                     <div key={item.label} className='flex items-center gap-2'>
diff --git a/packages/frontend/src/pages/TwitchNotifications.tsx b/packages/frontend/src/pages/TwitchNotifications.tsx
index 1315b324a..3a42bb420 100644
--- a/packages/frontend/src/pages/TwitchNotifications.tsx
+++ b/packages/frontend/src/pages/TwitchNotifications.tsx
@@ -228,7 +228,7 @@ export default function TwitchNotificationsPage() {
                     {TWITCH_LOADING_SKELETON_KEYS.map((key) => (
                         <div
                             key={key}
-                            className='h-14 rounded-lg bg-lucky-bg-tertiary animate-pulse'
+                            className='h-14 rounded-sm bg-lucky-bg-tertiary animate-pulse'
                         />
                     ))}
                 </div>
@@ -248,13 +248,13 @@ export default function TwitchNotificationsPage() {
                 {notifications.map((notif) => (
                     <div
                         key={notif.id}
-                        className='flex items-center gap-3 px-4 py-3 rounded-lg bg-lucky-bg-tertiary hover:bg-lucky-bg-active transition-colors group'
+                        className='flex items-center gap-3 px-4 py-3 rounded-sm bg-lucky-bg-tertiary border border-lucky-border transition-colors hover:bg-lucky-bg-active/25 group'
                     >
-                        <div className='w-8 h-8 rounded bg-purple-600/20 flex items-center justify-center shrink-0'>
+                        <div className='w-8 h-8 rounded-sm bg-purple-600/20 flex items-center justify-center shrink-0'>
                             <Tv className='w-4 h-4 text-purple-400' />
                         </div>
                         <div className='flex-1 min-w-0'>
-                            <p className='text-sm font-medium text-white'>
+                            <p className='type-body-sm font-semibold text-lucky-text-primary'>
                                 {notif.twitchLogin}
                             </p>
                             <p className='text-xs text-lucky-text-tertiary flex items-center gap-1'>
@@ -265,7 +265,7 @@ export default function TwitchNotificationsPage() {
                         </div>
                         <button
                             onClick={() => handleRemove(notif.twitchUserId)}
-                            className='lucky-focus-visible p-1.5 rounded-md text-lucky-text-tertiary hover:text-lucky-error hover:bg-lucky-error/10 transition-colors opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 cursor-pointer'
+                            className='lucky-focus-visible p-1.5 rounded-sm text-lucky-text-tertiary hover:text-lucky-error hover:bg-lucky-error/10 transition-colors opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 cursor-pointer'
                             aria-label={`Remove ${notif.twitchLogin}`}
                         >
                             <Trash2 className='w-4 h-4' />
@@ -292,12 +292,14 @@ export default function TwitchNotificationsPage() {
             <div className='space-y-6 px-1 sm:px-0'>
                 <header className='flex items-center gap-3'>
                     <Tv className='h-6 w-6 text-purple-500' />
-                    <h1 className='text-xl font-bold text-white'>
+                    <h1 className='type-title text-lucky-text-primary uppercase tracking-wide'>
                         Twitch Notifications
                     </h1>
                 </header>
-                <div className='p-4 rounded-lg bg-lucky-error/10 border border-lucky-error text-lucky-error'>
-                    <p className='font-semibold mb-1'>Not Configured</p>
+                <div className='p-4 rounded-sm bg-lucky-error/10 border border-lucky-error text-lucky-error'>
+                    <p className='font-semibold uppercase tracking-wide mb-1'>
+                        Not Configured
+                    </p>
                     <p className='text-sm'>
                         Twitch API is not configured on this server. Contact the
                         server administrator to set up Twitch credentials.
@@ -312,7 +314,7 @@ export default function TwitchNotificationsPage() {
             <header className='flex items-center justify-between'>
                 <div className='flex items-center gap-3'>
                     <Tv className='h-6 w-6 text-purple-500' />
-                    <h1 className='text-xl font-bold text-white'>
+                    <h1 className='type-title text-lucky-text-primary uppercase tracking-wide'>
                         Twitch Notifications
                     </h1>
                     <span className='text-sm text-lucky-text-tertiary'>
@@ -322,7 +324,7 @@ export default function TwitchNotificationsPage() {
                 <button
                     onClick={() => setShowAdd(!showAdd)}
                     disabled={!twitchConfigured}
-                    className='flex cursor-pointer items-center gap-2 rounded-lg bg-purple-600/10 px-3 py-1.5 text-sm text-purple-400 transition-colors hover:bg-purple-600/20 disabled:opacity-50 disabled:cursor-not-allowed'
+                    className='flex cursor-pointer items-center gap-2 rounded-sm bg-purple-600/10 px-3 py-1.5 text-sm text-purple-400 font-semibold uppercase transition-colors hover:bg-purple-600/20 disabled:opacity-50 disabled:cursor-not-allowed'
                 >
                     <Plus className='w-4 h-4' />
                     Add
@@ -336,8 +338,8 @@ export default function TwitchNotificationsPage() {
             )}
 
             {showAdd && (
-                <div className='p-4 rounded-lg bg-lucky-bg-tertiary border border-lucky-border space-y-3'>
-                    <h3 className='text-sm font-semibold text-white'>
+                <div className='p-4 rounded-sm bg-lucky-bg-tertiary border border-lucky-border space-y-3'>
+                    <h3 className='type-body-sm font-semibold text-lucky-text-primary uppercase tracking-wide'>
                         Add Twitch Notification
                     </h3>
                     <div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
@@ -351,7 +353,7 @@ export default function TwitchNotificationsPage() {
                             placeholder='Twitch URL or login (e.g. https://twitch.tv/luk)'
                             value={newTwitchInput}
                             onChange={(e) => setNewTwitchInput(e.target.value)}
-                            className='px-3 py-2 text-sm rounded-lg bg-lucky-bg-active border border-lucky-border text-white placeholder:text-lucky-text-tertiary focus:outline-none focus:border-purple-500'
+                            className='px-3 py-2 text-sm rounded-sm bg-lucky-bg-active border border-lucky-border text-white placeholder:text-lucky-text-tertiary focus:outline-none focus:border-purple-500'
                         />
                         <Select
                             value={newChannelId}
@@ -387,13 +389,13 @@ export default function TwitchNotificationsPage() {
                                 !newChannelId ||
                                 channels.length === 0
                             }
-                            className='px-4 py-1.5 text-sm rounded-lg bg-purple-600 text-white hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer'
+                            className='px-4 py-1.5 text-sm font-semibold uppercase rounded-sm bg-purple-600 text-white hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer'
                         >
                             Save
                         </button>
                         <button
                             onClick={() => setShowAdd(false)}
-                            className='px-4 py-1.5 text-sm rounded-lg bg-lucky-bg-active text-lucky-text-secondary hover:text-white transition-colors cursor-pointer'
+                            className='px-4 py-1.5 text-sm font-semibold uppercase rounded-sm bg-lucky-bg-active text-lucky-text-secondary hover:text-white transition-colors cursor-pointer'
                         >
                             Cancel
                         </button>

From 549e98b2656db5caaec259f485218600fc9ed4da Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucas.diassantana@gmail.com>
Date: Tue, 23 Jun 2026 12:43:44 -0300
Subject: [PATCH 3/7] fix(frontend): replace emoji icons with lucide in vote
 badge + config

VoteBadge used emoji as icons in the shell header (shown on every page) and
Config used literal arrow glyphs (a go-affordance + a redundant back arrow).
Swap for lucide (ThumbsUp/Heart, ChevronRight) and drop the redundant arrow;
update the tests that asserted on the emoji/text.
---
 .../src/components/Layout/VoteBadge.test.tsx         | 10 +++-------
 .../frontend/src/components/Layout/VoteBadge.tsx     |  5 +++--
 packages/frontend/src/pages/Config.test.tsx          |  6 ++++--
 packages/frontend/src/pages/Config.tsx               | 12 +++++++++---
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/components/Layout/VoteBadge.test.tsx b/packages/frontend/src/components/Layout/VoteBadge.test.tsx
index 370f30ff0..565d7a73a 100644
--- a/packages/frontend/src/components/Layout/VoteBadge.test.tsx
+++ b/packages/frontend/src/components/Layout/VoteBadge.test.tsx
@@ -45,7 +45,6 @@ describe('VoteBadge', () => {
             'Vote for Lucky on top.gg to unlock perks',
         )
         expect(screen.getByText('Vote')).toBeInTheDocument()
-        expect(screen.getByText('🗳️')).toBeInTheDocument()
     })
 
     test('renders tier badge when user has Lucky Supporter tier', () => {
@@ -65,7 +64,6 @@ describe('VoteBadge', () => {
         const link = screen.getByRole('link')
         expect(link).toBeInTheDocument()
         expect(screen.getByText('Lucky Supporter')).toBeInTheDocument()
-        expect(screen.getByText('💛')).toBeInTheDocument()
         expect(screen.getByText('· 1')).toBeInTheDocument()
     })
 
@@ -180,9 +178,8 @@ describe('VoteBadge', () => {
 
         const link = screen.getByRole('link')
         expect(link).toHaveClass('lucky-focus-visible')
-        // Emoji should have aria-hidden
-        const emoji = screen.getByText('💛')
-        expect(emoji).toHaveAttribute('aria-hidden', 'true')
+        // The leading icon should be decorative (aria-hidden)
+        expect(link.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
     })
 
     test('vote CTA has correct accessibility attributes', () => {
@@ -201,8 +198,7 @@ describe('VoteBadge', () => {
 
         const link = screen.getByRole('link')
         expect(link).toHaveClass('lucky-focus-visible')
-        const emoji = screen.getByText('🗳️')
-        expect(emoji).toHaveAttribute('aria-hidden', 'true')
+        expect(link.querySelector('svg')).toHaveAttribute('aria-hidden', 'true')
     })
 
     test('tier label is truncated with max-width constraint', () => {
diff --git a/packages/frontend/src/components/Layout/VoteBadge.tsx b/packages/frontend/src/components/Layout/VoteBadge.tsx
index 3e629c97f..ec565c2fe 100644
--- a/packages/frontend/src/components/Layout/VoteBadge.tsx
+++ b/packages/frontend/src/components/Layout/VoteBadge.tsx
@@ -1,3 +1,4 @@
+import { Heart, ThumbsUp } from 'lucide-react'
 import { useVoteStatus } from '@/hooks/useVoteStatus'
 
 const TIER_STYLES: Record<string, string> = {
@@ -28,7 +29,7 @@ export function VoteBadge() {
                 className='lucky-focus-visible hidden sm:inline-flex items-center gap-1.5 rounded-md border border-lucky-border bg-lucky-bg-secondary px-2.5 py-1.5 type-body-sm text-lucky-text-secondary hover:border-lucky-border-strong hover:bg-lucky-bg-tertiary hover:text-lucky-text-primary transition-colors'
                 title='Vote for Lucky on top.gg to unlock perks'
             >
-                <span aria-hidden='true'>🗳️</span>
+                <ThumbsUp aria-hidden='true' className='h-3.5 w-3.5' />
                 <span>Vote</span>
             </a>
         )
@@ -45,7 +46,7 @@ export function VoteBadge() {
             className={`lucky-focus-visible hidden sm:inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 type-body-sm transition-colors hover:brightness-110 ${style}`}
             title={`${status.tier.label} — ${status.streak}-vote streak. Click to vote again.`}
         >
-            <span aria-hidden='true'>💛</span>
+            <Heart aria-hidden='true' className='h-3.5 w-3.5 shrink-0' />
             <span className='truncate max-w-[140px]'>{status.tier.label}</span>
             <span className='type-meta opacity-70'>· {status.streak}</span>
         </a>
diff --git a/packages/frontend/src/pages/Config.test.tsx b/packages/frontend/src/pages/Config.test.tsx
index c2cd41e6f..13cd507dc 100644
--- a/packages/frontend/src/pages/Config.test.tsx
+++ b/packages/frontend/src/pages/Config.test.tsx
@@ -70,7 +70,9 @@ describe('ConfigPage', () => {
         const musicCard = screen.getByRole('button', { name: /Music Module/i })
         await user.click(musicCard)
 
-        expect(screen.getByText('← Back')).toBeInTheDocument()
+        expect(
+            screen.getByRole('button', { name: /back/i }),
+        ).toBeInTheDocument()
     })
 
     test('clicking back returns to module selection', async () => {
@@ -87,7 +89,7 @@ describe('ConfigPage', () => {
         const musicCard = screen.getByRole('button', { name: /Music Module/i })
         await user.click(musicCard)
 
-        const backButton = screen.getByText('← Back')
+        const backButton = screen.getByRole('button', { name: /back/i })
         await user.click(backButton)
 
         expect(screen.getByText('Music Module')).toBeInTheDocument()
diff --git a/packages/frontend/src/pages/Config.tsx b/packages/frontend/src/pages/Config.tsx
index 93084fca3..5356c3292 100644
--- a/packages/frontend/src/pages/Config.tsx
+++ b/packages/frontend/src/pages/Config.tsx
@@ -1,6 +1,12 @@
 import { useState, lazy, Suspense } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Music, MessageSquare, Shield, ArrowLeft } from 'lucide-react'
+import {
+    Music,
+    MessageSquare,
+    Shield,
+    ArrowLeft,
+    ChevronRight,
+} from 'lucide-react'
 import Button from '@/components/ui/Button'
 import { usePageMetadata } from '@/hooks/usePageMetadata'
 import { useGuildSelection } from '@/hooks/useGuildSelection'
@@ -155,7 +161,7 @@ export default function ConfigPage() {
                                                     'cubic-bezier(0.2, 0, 0, 1)',
                                             }}
                                         >
-                                            →
+                                            <ChevronRight className='w-4 h-4' />
                                         </div>
                                     </button>
                                 )
@@ -172,7 +178,7 @@ export default function ConfigPage() {
                                 onClick={() => setSelectedModule(null)}
                                 className='gap-2 text-lucky-text-secondary hover:text-lucky-text-primary'
                             >
-                                <ArrowLeft className='w-4 h-4' />← Back
+                                <ArrowLeft className='w-4 h-4' /> Back
                             </Button>
                         </div>
                         <Suspense

From 2fa8d9f633b48b9f21f89267091963e230590f8e Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucas.diassantana@gmail.com>
Date: Tue, 23 Jun 2026 13:02:52 -0300
Subject: [PATCH 4/7] style(dashboard): revert spacing churn, keep borders +
 labels

The site-wide refresh's per-page padding/gap changes (p-8->p-6, added gap-4,
row-padding shuffles on ~6 pages) were inconsistent and not part of the approved
direction. Restore each page's original spacing while keeping the vetted parts:
panel borders, uppercase label hierarchy, badge restyles, lucide icons, hover
polish. Net result = original spacing + visual-definition improvements.
---
 packages/frontend/src/pages/DashboardOverview.tsx | 4 ++--
 packages/frontend/src/pages/EmbedBuilder.tsx      | 2 +-
 packages/frontend/src/pages/GuildAutomation.tsx   | 6 ++----
 packages/frontend/src/pages/LastFm.tsx            | 8 ++++----
 packages/frontend/src/pages/Levels.tsx            | 2 +-
 packages/frontend/src/pages/Music.tsx             | 2 +-
 packages/frontend/src/pages/TrackHistory.tsx      | 2 +-
 7 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/pages/DashboardOverview.tsx b/packages/frontend/src/pages/DashboardOverview.tsx
index 66b8f43f6..a959d26af 100644
--- a/packages/frontend/src/pages/DashboardOverview.tsx
+++ b/packages/frontend/src/pages/DashboardOverview.tsx
@@ -99,7 +99,7 @@ function CompactStat({
                 {icon && (
                     <span
                         className={cn(
-                            'flex h-6 w-6 shrink-0 items-center justify-center rounded-sm text-xs',
+                            'flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-xs',
                             compactToneClass[tone],
                         )}
                         aria-hidden='true'
@@ -115,7 +115,7 @@ function CompactStat({
                 {delta !== undefined && (
                     <span
                         className={cn(
-                            'rounded-sm px-2 py-1 text-[11px] font-semibold uppercase tracking-wider',
+                            'rounded-sm px-1.5 py-0.5 text-[11px] font-semibold uppercase tracking-wider',
                             delta >= 0
                                 ? 'bg-lucky-success/20 text-lucky-success'
                                 : 'bg-lucky-error/20 text-lucky-error',
diff --git a/packages/frontend/src/pages/EmbedBuilder.tsx b/packages/frontend/src/pages/EmbedBuilder.tsx
index 9548f8e2c..d77de8859 100644
--- a/packages/frontend/src/pages/EmbedBuilder.tsx
+++ b/packages/frontend/src/pages/EmbedBuilder.tsx
@@ -453,7 +453,7 @@ export default function EmbedBuilder() {
 
     return (
         <div className='space-y-6'>
-            <div className='flex items-center justify-between gap-4'>
+            <div className='flex items-center justify-between'>
                 <SectionHeader
                     title='Embed Builder'
                     description='Create and manage reusable Discord embed templates'
diff --git a/packages/frontend/src/pages/GuildAutomation.tsx b/packages/frontend/src/pages/GuildAutomation.tsx
index 8b9579cbc..6e4a9421a 100644
--- a/packages/frontend/src/pages/GuildAutomation.tsx
+++ b/packages/frontend/src/pages/GuildAutomation.tsx
@@ -541,10 +541,8 @@ export default function GuildAutomation() {
             </div>
 
             {/* Run History */}
-            <div className='space-y-4'>
-                <h2 className='type-title text-lucky-text-primary'>
-                    Run History
-                </h2>
+            <div className='space-y-3'>
+                <SectionHeader title='Run History' />
                 {loading ? (
                     <div className='space-y-2'>
                         {Array.from({ length: 3 }).map((_, i) => (
diff --git a/packages/frontend/src/pages/LastFm.tsx b/packages/frontend/src/pages/LastFm.tsx
index c99c6b0ce..0cb1cad66 100644
--- a/packages/frontend/src/pages/LastFm.tsx
+++ b/packages/frontend/src/pages/LastFm.tsx
@@ -95,7 +95,7 @@ export default function LastFmPage() {
             )}
 
             {!status?.configured ? (
-                <section className='surface-panel space-y-4 rounded-lg border border-lucky-border p-6'>
+                <section className='surface-panel space-y-4 rounded-lg border border-lucky-border p-8'>
                     <div className='flex items-start gap-4'>
                         <div className='rounded-lg bg-lucky-bg-tertiary p-3'>
                             <Music className='h-6 w-6 text-lucky-text-secondary' />
@@ -120,7 +120,7 @@ export default function LastFmPage() {
                     </div>
                 </section>
             ) : status.linked ? (
-                <section className='surface-panel space-y-6 rounded-lg border border-lucky-border p-6'>
+                <section className='surface-panel space-y-6 rounded-lg border border-lucky-border p-8'>
                     <div className='flex items-start gap-4'>
                         <div className='rounded-full bg-lucky-success/20 p-3'>
                             <Check className='h-6 w-6 text-lucky-success' />
@@ -166,7 +166,7 @@ export default function LastFmPage() {
                     </button>
                 </section>
             ) : (
-                <section className='surface-panel space-y-6 rounded-lg border border-lucky-border p-6'>
+                <section className='surface-panel space-y-6 rounded-lg border border-lucky-border p-8'>
                     <div>
                         <h2 className='type-h2 text-lucky-text-primary'>
                             Connect Your Account
@@ -219,7 +219,7 @@ export default function LastFmPage() {
                 </div>
             </div>
 
-            <section className='surface-panel space-y-4 rounded-lg border border-lucky-border p-6'>
+            <section className='surface-panel space-y-4 rounded-lg border border-lucky-border p-8'>
                 <h3 className='type-title text-lucky-text-primary'>
                     How it works
                 </h3>
diff --git a/packages/frontend/src/pages/Levels.tsx b/packages/frontend/src/pages/Levels.tsx
index 24da582a5..1f5e0332c 100644
--- a/packages/frontend/src/pages/Levels.tsx
+++ b/packages/frontend/src/pages/Levels.tsx
@@ -215,7 +215,7 @@ function Levels() {
                             {leaderboard.map((member) => (
                                 <div
                                     key={member.userId}
-                                    className='flex items-center justify-between px-4 py-3 transition-colors hover:bg-lucky-bg-active/25'
+                                    className='flex items-center justify-between p-4 transition-colors hover:bg-lucky-bg-active/25'
                                 >
                                     <div className='flex-1'>
                                         <p className='type-body-sm font-medium text-lucky-text-primary'>
diff --git a/packages/frontend/src/pages/Music.tsx b/packages/frontend/src/pages/Music.tsx
index deff7a841..f3d86bac4 100644
--- a/packages/frontend/src/pages/Music.tsx
+++ b/packages/frontend/src/pages/Music.tsx
@@ -178,7 +178,7 @@ function NowPlayingHero({
     const progress = duration > 0 ? (position / duration) * 100 : 0
 
     return (
-        <div className='surface-panel rounded-xl overflow-hidden border border-lucky-border px-4 sm:px-6'>
+        <div className='surface-panel rounded-xl overflow-hidden border border-lucky-border'>
             <div className='p-4 sm:p-6'>
                 <div className='grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 items-start'>
                     <div className='sm:col-span-1'>
diff --git a/packages/frontend/src/pages/TrackHistory.tsx b/packages/frontend/src/pages/TrackHistory.tsx
index b333b98fa..5cda6918a 100644
--- a/packages/frontend/src/pages/TrackHistory.tsx
+++ b/packages/frontend/src/pages/TrackHistory.tsx
@@ -128,7 +128,7 @@ export default function TrackHistoryPage() {
 
     return (
         <div className='space-y-6 px-1 sm:px-0'>
-            <header className='flex items-center justify-between gap-4'>
+            <header className='flex items-center justify-between'>
                 <div className='flex items-center gap-3'>
                     <History className='h-6 w-6 text-lucky-error' />
                     <h1 className='type-h2 text-lucky-text-primary'>

From 0660c49341634ffbefeef2f5aad1435f3faddd95 Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucas.diassantana@gmail.com>
Date: Tue, 23 Jun 2026 16:26:30 -0300
Subject: [PATCH 5/7] fix(dashboard): one server switcher, fix avatar + button
 cursor

- Server switcher: remove the two redundant sidebar switchers (the ACTIVE GUILD
  card + the SERVER dropdown) and the sidebar user footer; the navbar now holds
  the single GuildChip switcher with a UserMenu (avatar + logout) to its right.
  Deletes the now-dead GuildSwitcher + ServerSelector components.
- Avatar: ServersPage passed the raw Discord avatar hash; build the CDN URL via
  a shared @/lib/discord helper (reused by the navbar UserMenu).
- Cursor: Tailwind v4 preflight sets button{cursor:default}; restore
  cursor-pointer on enabled buttons via an index.css base layer.
---
 .../src/components/Layout/GuildSwitcher.tsx   | 205 -----------
 .../frontend/src/components/Layout/Layout.tsx |  63 +++-
 .../src/components/Layout/ServerSelector.tsx  |   1 -
 .../src/components/Layout/Sidebar.test.tsx    | 335 +-----------------
 .../src/components/Layout/Sidebar.tsx         | 232 ++----------
 packages/frontend/src/index.css               |   9 +
 packages/frontend/src/lib/discord.ts          |  10 +
 packages/frontend/src/pages/ServersPage.tsx   |   7 +-
 8 files changed, 115 insertions(+), 747 deletions(-)
 delete mode 100644 packages/frontend/src/components/Layout/GuildSwitcher.tsx
 delete mode 100644 packages/frontend/src/components/Layout/ServerSelector.tsx
 create mode 100644 packages/frontend/src/lib/discord.ts

diff --git a/packages/frontend/src/components/Layout/GuildSwitcher.tsx b/packages/frontend/src/components/Layout/GuildSwitcher.tsx
deleted file mode 100644
index ed4a6121c..000000000
--- a/packages/frontend/src/components/Layout/GuildSwitcher.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
-import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
-import { ChevronDown, Check } from 'lucide-react'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { useGuildStore } from '@/stores/guildStore'
-import { api } from '@/services/api'
-import { cn } from '@/lib/utils'
-
-interface GuildSwitcherProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-}
-
-export default function GuildSwitcher({ open, onOpenChange }: GuildSwitcherProps) {
-    const location = useLocation()
-    const prefersReducedMotion = useReducedMotion()
-    const {
-        guilds,
-        selectedGuild,
-        selectGuild,
-        guildLoadError,
-        isLoading,
-        fetchGuilds,
-    } = useGuildStore()
-
-    useEffect(() => {
-        onOpenChange(false)
-    }, [location.pathname, onOpenChange])
-
-    const showReauth =
-        guildLoadError?.kind === 'auth' || guildLoadError?.kind === 'forbidden'
-    const discordAuthUrl = api.auth.getDiscordLoginUrl()
-
-    let errorMessage = guildLoadError?.message ?? ''
-    if (guildLoadError?.kind === 'forbidden') {
-        errorMessage = 'Discord access is missing required scope.'
-    } else if (guildLoadError?.kind === 'network') {
-        errorMessage = 'Network connection failed. Check connectivity and retry.'
-    }
-
-    const hasBotStatus = selectedGuild?.botAdded === false
-    const iconSrc = selectedGuild?.icon
-        ? `https://cdn.discordapp.com/icons/${selectedGuild.id}/${selectedGuild.icon}.png?size=64`
-        : undefined
-
-    return (
-        <div className='relative px-2 py-2.5 border-b border-lucky-border'>
-            <p className='type-meta mb-1.5 px-2 text-lucky-text-subtle'>
-                Server
-            </p>
-            <button
-                type='button'
-                onClick={() => onOpenChange(!open)}
-                aria-expanded={open}
-                aria-haspopup='menu'
-                aria-label={
-                    selectedGuild
-                        ? `Switch server, currently ${selectedGuild.name}`
-                        : 'Select a server'
-                }
-                className='lucky-focus-visible flex w-full items-center gap-2.5 rounded-md border border-lucky-border bg-lucky-bg-tertiary px-2.5 py-2 text-left transition-colors hover:border-lucky-border-strong hover:bg-lucky-bg-active'
-            >
-                {selectedGuild ? (
-                    <>
-                        <Avatar className='h-6 w-6 shrink-0'>
-                            <AvatarImage src={iconSrc} alt={selectedGuild.name} />
-                            <AvatarFallback className='bg-lucky-bg-active text-[10px] font-semibold text-lucky-text-primary'>
-                                {selectedGuild.name.substring(0, 2).toUpperCase()}
-                            </AvatarFallback>
-                        </Avatar>
-                        <span className='type-body-sm flex-1 truncate text-lucky-text-primary'>
-                            {selectedGuild.name}
-                        </span>
-                        {hasBotStatus && (
-                            <span className='rounded border border-lucky-border px-1.5 py-0.5 text-[10px] font-medium text-lucky-text-subtle shrink-0'>
-                                No bot
-                            </span>
-                        )}
-                    </>
-                ) : (
-                    <span className='type-body-sm flex-1 text-lucky-text-tertiary'>
-                        Select a server
-                    </span>
-                )}
-                <ChevronDown
-                    className={cn(
-                        'h-3.5 w-3.5 shrink-0 text-lucky-text-subtle transition-transform duration-150',
-                        open && 'rotate-180',
-                    )}
-                    aria-hidden='true'
-                />
-            </button>
-
-            <AnimatePresence>
-                {open && (
-                    <motion.div
-                        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 }}
-                        animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
-                        exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 }}
-                        transition={{ duration: prefersReducedMotion ? 0 : 0.12 }}
-                        className='absolute left-2 right-2 top-full z-50 mt-1 overflow-hidden rounded-lg border border-lucky-border bg-lucky-bg-secondary shadow-[0_8px_24px_rgb(0_0_0/0.4)]'
-                        role='menu'
-                        aria-label='Server list'
-                    >
-                        {guildLoadError && (
-                            <div className='space-y-2 border-b border-lucky-border px-3 py-3 text-center'>
-                                <p className='type-body-sm font-semibold text-lucky-text-primary'>
-                                    Could not load servers
-                                </p>
-                                <p className='type-body-sm text-lucky-text-tertiary'>
-                                    {errorMessage}
-                                </p>
-                                <div className='mt-3 flex items-center justify-center gap-2'>
-                                    <button
-                                        type='button'
-                                        onClick={() => {
-                                            // fetchGuilds resolves even on failure —
-                                            // it sets guildLoadError, which re-renders
-                                            // this error block with the message.
-                                            void fetchGuilds(true)
-                                        }}
-                                        className='lucky-focus-visible rounded-md border border-lucky-border px-2.5 py-1.5 type-body-sm text-lucky-text-secondary transition-colors hover:border-lucky-border-strong hover:bg-lucky-bg-tertiary'
-                                    >
-                                        Retry
-                                    </button>
-                                    {showReauth && (
-                                        <a
-                                            href={discordAuthUrl}
-                                            className='lucky-focus-visible rounded-md border border-lucky-border px-2.5 py-1.5 type-body-sm text-lucky-text-secondary transition-colors hover:border-lucky-border-strong hover:bg-lucky-bg-tertiary'
-                                        >
-                                            Re-authenticate
-                                        </a>
-                                    )}
-                                </div>
-                            </div>
-                        )}
-                        <ScrollArea className='max-h-56'>
-                            <div>
-                                {guilds.length === 0 ? (
-                                    <div className='space-y-2 px-3 py-4 text-center'>
-                                        {!guildLoadError && (
-                                            <p className='type-body-sm text-lucky-text-tertiary'>
-                                                {isLoading
-                                                    ? 'Loading servers…'
-                                                    : 'No accessible servers found'}
-                                            </p>
-                                        )}
-                                    </div>
-                                ) : (
-                                    guilds.map((guild) => {
-                                        const isSelected = selectedGuild?.id === guild.id
-                                        const guildIconSrc = guild.icon
-                                            ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png?size=64`
-                                            : undefined
-                                        return (
-                                            <button
-                                                key={guild.id}
-                                                type='button'
-                                                role='menuitemradio'
-                                                aria-checked={isSelected}
-                                                onClick={() => {
-                                                    selectGuild(guild)
-                                                    onOpenChange(false)
-                                                }}
-                                                className={cn(
-                                                    'lucky-focus-visible flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-lucky-bg-tertiary',
-                                                    isSelected && 'bg-lucky-bg-active',
-                                                )}
-                                            >
-                                                <Avatar className='h-6 w-6 shrink-0'>
-                                                    <AvatarImage src={guildIconSrc} alt={guild.name} />
-                                                    <AvatarFallback className='bg-lucky-bg-active text-[10px] font-semibold text-lucky-text-primary'>
-                                                        {guild.name.substring(0, 2).toUpperCase()}
-                                                    </AvatarFallback>
-                                                </Avatar>
-                                                <span className='type-body-sm flex-1 truncate text-lucky-text-primary'>
-                                                    {guild.name}
-                                                </span>
-                                                <span className='ml-auto flex items-center gap-2'>
-                                                    {!guild.botAdded && (
-                                                        <span className='rounded border border-lucky-border px-1.5 py-0.5 text-[10px] font-medium text-lucky-text-subtle'>
-                                                            Invite bot
-                                                        </span>
-                                                    )}
-                                                    {isSelected && (
-                                                        <Check
-                                                            className='h-3.5 w-3.5 text-lucky-brand'
-                                                            aria-hidden='true'
-                                                        />
-                                                    )}
-                                                </span>
-                                            </button>
-                                        )
-                                    })
-                                )}
-                            </div>
-                        </ScrollArea>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        </div>
-    )
-}
diff --git a/packages/frontend/src/components/Layout/Layout.tsx b/packages/frontend/src/components/Layout/Layout.tsx
index 785de2a53..5a2abca11 100644
--- a/packages/frontend/src/components/Layout/Layout.tsx
+++ b/packages/frontend/src/components/Layout/Layout.tsx
@@ -4,9 +4,12 @@ import { useTranslation } from 'react-i18next'
 import Sidebar from './Sidebar'
 import VoteBadge from './VoteBadge'
 import { useGuildSelection } from '@/hooks/useGuildSelection'
+import { useAuthStore } from '@/stores/authStore'
+import { useGuildStore } from '@/stores/guildStore'
+import { getUserAvatarUrl } from '@/lib/discord'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import LanguageSwitcher from '@/components/ui/LanguageSwitcher'
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown, LogOut } from 'lucide-react'
 
 interface LayoutProps {
     children: ReactNode
@@ -82,7 +85,9 @@ function GuildChip() {
             type='button'
             onClick={() => navigate('/servers')}
             className='lucky-focus-visible flex items-center gap-2 rounded-md border border-lucky-border bg-lucky-bg-secondary px-3 py-1.5 text-left transition-colors hover:border-lucky-border-strong hover:bg-lucky-bg-tertiary'
-            aria-label={t('common.activeServerAriaLabel', { name: selectedGuild.name })}
+            aria-label={t('common.activeServerAriaLabel', {
+                name: selectedGuild.name,
+            })}
             title={t('sidebar.switchServer')}
         >
             <Avatar className='h-5 w-5 shrink-0'>
@@ -106,6 +111,41 @@ function GuildChip() {
     )
 }
 
+function UserMenu() {
+    const { user, logout } = useAuthStore()
+    const { memberContext } = useGuildStore()
+    const { t } = useTranslation()
+    const profileName =
+        memberContext?.nickname || user?.globalName || user?.username || 'User'
+    const avatarSrc =
+        user?.avatar && user?.id
+            ? getUserAvatarUrl(user.id, user.avatar)
+            : undefined
+
+    return (
+        <div className='flex items-center gap-2 rounded-md border border-lucky-border bg-lucky-bg-secondary px-2 py-1'>
+            <Avatar className='h-6 w-6 shrink-0'>
+                <AvatarImage src={avatarSrc} alt={profileName} />
+                <AvatarFallback className='bg-lucky-bg-active text-[10px] font-semibold text-lucky-text-primary'>
+                    {(user?.username || 'U').substring(0, 2).toUpperCase()}
+                </AvatarFallback>
+            </Avatar>
+            <span className='type-body-sm hidden max-w-[120px] truncate text-lucky-text-primary sm:block'>
+                {profileName}
+            </span>
+            <button
+                type='button'
+                onClick={logout}
+                className='lucky-focus-visible flex min-h-[28px] min-w-[28px] items-center justify-center rounded-md text-lucky-text-subtle transition-colors hover:bg-lucky-error/10 hover:text-lucky-error'
+                aria-label={t('common.logout')}
+                title={t('common.logout')}
+            >
+                <LogOut className='h-3.5 w-3.5' aria-hidden='true' />
+            </button>
+        </div>
+    )
+}
+
 function Layout({ children }: LayoutProps) {
     const location = useLocation()
     const routeCopy = useRouteCopy(location.pathname)
@@ -118,7 +158,11 @@ function Layout({ children }: LayoutProps) {
 
     return (
         <div className='lucky-shell lucky-shell-authenticated flex min-h-screen'>
-            <a className='lucky-skip-link' href='#lucky-main-content' onClick={handleSkipLinkClick}>
+            <a
+                className='lucky-skip-link'
+                href='#lucky-main-content'
+                onClick={handleSkipLinkClick}
+            >
                 Skip to content
             </a>
             <Sidebar />
@@ -137,12 +181,21 @@ function Layout({ children }: LayoutProps) {
                             <VoteBadge />
                             <LanguageSwitcher />
                             <GuildChip />
+                            <UserMenu />
                         </div>
                     </div>
-                    <div className='lucky-header-accent-line' aria-hidden='true' />
+                    <div
+                        className='lucky-header-accent-line'
+                        aria-hidden='true'
+                    />
                 </header>
 
-                <main ref={mainRef} id='lucky-main-content' className='flex-1 min-w-0 overflow-y-auto' tabIndex={-1}>
+                <main
+                    ref={mainRef}
+                    id='lucky-main-content'
+                    className='flex-1 min-w-0 overflow-y-auto'
+                    tabIndex={-1}
+                >
                     <div className='mx-auto w-full max-w-[1400px] px-4 py-6 md:px-6 lg:px-8 lg:py-7'>
                         {children}
                     </div>
diff --git a/packages/frontend/src/components/Layout/ServerSelector.tsx b/packages/frontend/src/components/Layout/ServerSelector.tsx
deleted file mode 100644
index 3494852d2..000000000
--- a/packages/frontend/src/components/Layout/ServerSelector.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './GuildSwitcher'
diff --git a/packages/frontend/src/components/Layout/Sidebar.test.tsx b/packages/frontend/src/components/Layout/Sidebar.test.tsx
index 888749ad8..ebe61c52a 100644
--- a/packages/frontend/src/components/Layout/Sidebar.test.tsx
+++ b/packages/frontend/src/components/Layout/Sidebar.test.tsx
@@ -1,5 +1,5 @@
 import { describe, test, expect, vi, beforeEach } from 'vitest'
-import { render, screen, waitFor, within } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { MemoryRouter } from 'react-router-dom'
 import Sidebar from './Sidebar'
@@ -128,269 +128,6 @@ describe('Sidebar', () => {
         expect(musicLink).toHaveAttribute('aria-current', 'page')
     })
 
-    test('shows server selector dropdown with guilds', async () => {
-        const user = userEvent.setup()
-        renderSidebar()
-
-        expect(screen.getAllByText('Test Server')).toHaveLength(2)
-        expect(screen.getByText('Ready')).toBeInTheDocument()
-        expect(
-            screen.getByText('Guild command center is ready for operations.'),
-        ).toBeInTheDocument()
-
-        const dropdownButton = screen.getByRole('button', {
-            name: 'Switch server',
-        })
-        await user.click(dropdownButton)
-
-        await waitFor(() => {
-            expect(screen.getByText('Another Server')).toBeInTheDocument()
-        })
-    })
-
-    test('selects guild from dropdown', async () => {
-        const user = userEvent.setup()
-        renderSidebar()
-
-        const dropdownButton = screen.getByRole('button', {
-            name: /switch server, currently/i,
-        })
-        await user.click(dropdownButton!)
-
-        await waitFor(() => {
-            expect(screen.getByText('Another Server')).toBeInTheDocument()
-        })
-
-        const anotherServerButton = screen.getByText('Another Server')
-        await user.click(anotherServerButton)
-
-        expect(mockSelectGuild).toHaveBeenCalledWith(mockGuild2)
-    })
-
-    test('shows user profile information', () => {
-        renderSidebar()
-
-        expect(screen.getByText('TestUser')).toBeInTheDocument()
-        expect(screen.getByText('@TestUser')).toBeInTheDocument()
-    })
-
-    test('calls logout when logout button clicked', async () => {
-        const user = userEvent.setup()
-        renderSidebar()
-
-        const logoutButton = screen.getByRole('button', { name: /log out/i })
-        await user.click(logoutButton)
-
-        expect(mockLogout).toHaveBeenCalledTimes(1)
-    })
-
-    test('shows "Select a server" when no guild selected', () => {
-        mockGuildStoreState({
-            guilds: [mockGuild],
-            selectedGuild: null,
-            selectedGuildId: null,
-        })
-
-        renderSidebar()
-
-        expect(screen.getAllByText('Select a server')).toHaveLength(2)
-        expect(screen.getByText('Lucky')).toBeInTheDocument()
-        expect(
-            screen.getByText('Choose a community to unlock guild tools.'),
-        ).toBeInTheDocument()
-    })
-
-    test('shows needs setup status when selected guild is missing the bot', () => {
-        mockGuildStoreState({
-            selectedGuild: {
-                ...mockGuild,
-                botAdded: false,
-            },
-            selectedGuildId: mockGuild.id,
-        })
-
-        renderSidebar()
-
-        expect(screen.getByText('Needs setup')).toBeInTheDocument()
-        expect(
-            screen.getByText('Lucky is not installed in this server yet.'),
-        ).toBeInTheDocument()
-    })
-
-    test('shows authorized guilds even when bot is not added', async () => {
-        const guildWithoutBot: Guild = {
-            ...mockGuild2,
-            botAdded: false,
-        }
-
-        mockGuildStoreState({
-            guilds: [mockGuild, guildWithoutBot],
-            selectedGuild: mockGuild,
-            selectedGuildId: mockGuild.id,
-        })
-
-        const user = userEvent.setup()
-        renderSidebar()
-
-        const dropdownButton = screen.getByRole('button', {
-            name: /switch server, currently/i,
-        })
-        await user.click(dropdownButton!)
-
-        await waitFor(() => {
-            expect(screen.getByText('Another Server')).toBeInTheDocument()
-            expect(screen.getByText('Invite bot')).toBeInTheDocument()
-        })
-    })
-
-    test('shows invite badges when all accessible guilds are missing bot', async () => {
-        const noBotGuilds: Guild[] = [
-            { ...mockGuild, botAdded: false },
-            { ...mockGuild2, botAdded: false },
-        ]
-
-        mockGuildStoreState({
-            guilds: noBotGuilds,
-            selectedGuild: null,
-            selectedGuildId: null,
-        })
-
-        const user = userEvent.setup()
-        renderSidebar()
-
-        await user.click(
-            screen.getByRole('button', { name: /select a server/i }),
-        )
-
-        await waitFor(() => {
-            expect(screen.getByText('Test Server')).toBeInTheDocument()
-            expect(screen.getByText('Another Server')).toBeInTheDocument()
-            expect(screen.getAllByText('Invite bot')).toHaveLength(2)
-        })
-    })
-
-    test('shows no-admin state when user has no guilds', async () => {
-        mockGuildStoreState({
-            guilds: [],
-            selectedGuild: null,
-            selectedGuildId: null,
-            guildLoadError: null,
-        })
-
-        const user = userEvent.setup()
-        renderSidebar()
-
-        await user.click(
-            screen.getByRole('button', { name: /select a server/i }),
-        )
-
-        await waitFor(() => {
-            expect(
-                screen.getByText('No accessible servers found'),
-            ).toBeInTheDocument()
-            expect(
-                screen.queryByText(
-                    'Invite Lucky to one of your servers from the Dashboard.',
-                ),
-            ).not.toBeInTheDocument()
-        })
-    })
-
-    test('shows retry and re-auth CTAs when guild fetch fails from auth state', async () => {
-        const user = userEvent.setup()
-        mockGuildStoreState({
-            guilds: [],
-            selectedGuild: null,
-            selectedGuildId: null,
-            guildLoadError: {
-                kind: 'auth',
-                status: 401,
-                message: 'Session expired',
-            },
-        } as Partial<ReturnType<typeof useGuildStore>>)
-
-        renderSidebar()
-
-        await user.click(
-            screen.getByRole('button', { name: /select a server/i }),
-        )
-
-        await waitFor(() => {
-            expect(
-                screen.getByText('Could not load servers'),
-            ).toBeInTheDocument()
-            expect(
-                screen.getByRole('button', { name: 'Retry' }),
-            ).toBeInTheDocument()
-            expect(
-                screen.getByRole('link', { name: 'Re-authenticate' }),
-            ).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: 'Retry' }))
-        expect(mockFetchGuilds).toHaveBeenCalledTimes(1)
-    })
-
-    test('shows re-auth CTA when guild fetch fails from forbidden state', async () => {
-        const user = userEvent.setup()
-        mockGuildStoreState({
-            guilds: [],
-            selectedGuild: null,
-            selectedGuildId: null,
-            guildLoadError: {
-                kind: 'forbidden',
-                status: 403,
-                message: 'Missing oauth scope',
-            },
-        } as Partial<ReturnType<typeof useGuildStore>>)
-
-        renderSidebar()
-
-        await user.click(
-            screen.getByRole('button', { name: /select a server/i }),
-        )
-
-        await waitFor(() => {
-            expect(
-                screen.getByText('Discord access is missing required scope.'),
-            ).toBeInTheDocument()
-            expect(
-                screen.getByRole('link', { name: 'Re-authenticate' }),
-            ).toBeInTheDocument()
-        })
-    })
-
-    test('shows network guidance without re-auth CTA on network failures', async () => {
-        const user = userEvent.setup()
-        mockGuildStoreState({
-            guilds: [],
-            selectedGuild: null,
-            selectedGuildId: null,
-            guildLoadError: {
-                kind: 'network',
-                status: 0,
-                message: 'Network down',
-            },
-        } as Partial<ReturnType<typeof useGuildStore>>)
-
-        renderSidebar()
-
-        await user.click(
-            screen.getByRole('button', { name: /select a server/i }),
-        )
-
-        await waitFor(() => {
-            expect(
-                screen.getByText(
-                    'Network connection failed. Check connectivity and retry.',
-                ),
-            ).toBeInTheDocument()
-            expect(
-                screen.queryByRole('link', { name: 'Re-authenticate' }),
-            ).not.toBeInTheDocument()
-        })
-    })
-
     test('hides Guild Automation nav item without settings manage access', () => {
         mockGuildStoreState({
             memberContext: {
@@ -440,74 +177,26 @@ describe('Sidebar', () => {
         const user = userEvent.setup()
         renderSidebar()
 
-        expect(
-            screen.getAllByRole('button', { name: /close sidebar/i }),
-        ).toHaveLength(1)
-
         const openButton = screen.getByRole('button', {
             name: /open navigation menu/i,
         })
-        await user.click(openButton)
+        expect(openButton).toBeTruthy()
 
-        await waitFor(() => {
-            expect(
-                screen.getAllByRole('button', { name: /close sidebar/i }),
-            ).toHaveLength(2)
-        })
+        await user.click(openButton)
 
-        const mobileSidebar = document.querySelector(
-            'aside.fixed.inset-y-0.left-0.z-50.w-64.bg-lucky-bg-secondary.lg\\:hidden',
-        )
+        // Check that mobile sidebar appears
+        const mobileSidebar = document.getElementById('mobile-sidebar')
         expect(mobileSidebar).toBeTruthy()
 
-        const mobileCloseButton = within(
-            mobileSidebar as HTMLElement,
-        ).getByRole('button', {
-            name: /close sidebar/i,
-        })
-        await user.click(mobileCloseButton)
+        // Find and click overlay to close
+        const overlay = document.querySelector('div[aria-hidden="true"].fixed')
+        if (overlay) {
+            await user.click(overlay as HTMLElement)
+        }
 
         await waitFor(() => {
-            if (mobileSidebar && document.body.contains(mobileSidebar)) {
-                expect(mobileSidebar).toHaveStyle({
-                    transform: 'translateX(-100%)',
-                })
-                return
-            }
-
-            expect(mobileSidebar).not.toBeInTheDocument()
-        })
-    })
-
-    test('guild icon URL contains icon hash when guild has icon', () => {
-        renderSidebar()
-
-        expect(mockGuild.icon).toBe('icon123')
-        expect(mockGuild.id).toBe('987654321')
-
-        const guildNames = screen.getAllByText('Test Server')
-        expect(guildNames.length).toBeGreaterThan(0)
-    })
-
-    test('shows fallback initials when guild has no icon', () => {
-        mockGuildStoreState({
-            guilds: [mockGuild2],
-            selectedGuild: mockGuild2,
-            selectedGuildId: mockGuild2.id,
-        })
-
-        renderSidebar()
-
-        const fallbackInitials = screen.getAllByText('AN')
-        expect(fallbackInitials.length).toBeGreaterThan(0)
-    })
-
-    test('switch server button exists in guild header', () => {
-        renderSidebar()
-
-        const switchButtons = screen.getAllByRole('button', {
-            name: 'Switch server',
+            const closedSidebar = document.getElementById('mobile-sidebar')
+            expect(closedSidebar).not.toBeInTheDocument()
         })
-        expect(switchButtons.length).toBeGreaterThan(0)
     })
 })
diff --git a/packages/frontend/src/components/Layout/Sidebar.tsx b/packages/frontend/src/components/Layout/Sidebar.tsx
index 36142dd81..c3c4b2901 100644
--- a/packages/frontend/src/components/Layout/Sidebar.tsx
+++ b/packages/frontend/src/components/Layout/Sidebar.tsx
@@ -2,16 +2,13 @@ import { useEffect, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
-import type { TFunction } from 'i18next'
 import {
-    ChevronsUpDown,
     GitBranch,
     Heart,
     History,
     LayoutDashboard,
     Layers,
     Link2,
-    LogOut,
     Menu,
     MessageSquare,
     MicVocal,
@@ -27,23 +24,14 @@ import {
     Trophy,
     Tv,
     Users,
-    X,
     Disc3,
 } from 'lucide-react'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useAuthStore } from '@/stores/authStore'
 import { useGuildStore } from '@/stores/guildStore'
 import { cn } from '@/lib/utils'
 import { hasModuleAccess } from '@/lib/rbac'
-import GuildSwitcher from './GuildSwitcher'
-import type {
-    AccessMode,
-    ModuleKey,
-    Guild,
-    User,
-    GuildMemberContext,
-} from '@/types'
+import type { AccessMode, ModuleKey } from '@/types'
 
 interface NavItem {
     path: string
@@ -59,14 +47,6 @@ interface NavSection {
     items: NavItem[]
 }
 
-function getGuildIconUrl(guildId: string, iconHash: string): string {
-    return `https://cdn.discordapp.com/icons/${guildId}/${iconHash}.png?size=64`
-}
-
-function getUserAvatarUrl(userId: string, avatarHash: string): string {
-    return `https://cdn.discordapp.com/avatars/${userId}/${avatarHash}.png?size=64`
-}
-
 const navSections: NavSection[] = [
     {
         titleKey: 'sidebar.sections.overview',
@@ -221,135 +201,17 @@ const navSections: NavSection[] = [
     },
 ]
 
-interface GuildHeaderProps {
-    selectedGuild: Guild | null
-    onSwitchClick: () => void
-    onMobileClose: () => void
-    showMobileClose: boolean
-}
-
-function getGuildStatus(selectedGuild: Guild | null, t: TFunction) {
-    if (!selectedGuild) {
-        return {
-            label: t('sidebar.status.selectServer'),
-            tone: 'text-lucky-text-subtle bg-lucky-bg-tertiary border-lucky-border',
-            subtitle: t('sidebar.subtitle.selectServer'),
-        }
-    }
-
-    if (selectedGuild.botAdded === false) {
-        return {
-            label: t('sidebar.status.needsSetup'),
-            tone: 'text-amber-200 bg-amber-500/10 border-amber-500/30',
-            subtitle: t('sidebar.subtitle.needsSetup'),
-        }
-    }
-
-    return {
-        label: t('sidebar.status.ready'),
-        tone: 'text-emerald-200 bg-emerald-500/10 border-emerald-500/30',
-        subtitle: t('sidebar.subtitle.ready'),
-    }
-}
-
-function GuildHeader({
-    selectedGuild,
-    onSwitchClick,
-    onMobileClose,
-    showMobileClose,
-}: GuildHeaderProps) {
-    const { t } = useTranslation()
-    const guildIconSrc = selectedGuild?.icon
-        ? getGuildIconUrl(selectedGuild.id, selectedGuild.icon)
-        : undefined
-
-    const guildFallback = selectedGuild?.name
-        ? selectedGuild.name.substring(0, 2).toUpperCase()
-        : 'NS'
-    const status = getGuildStatus(selectedGuild, t)
-
-    return (
-        <div className='border-b border-lucky-border px-4 py-4'>
-            <div className='rounded-xl border border-lucky-border bg-gradient-to-b from-lucky-bg-secondary to-lucky-bg-primary/80 px-3 py-3 shadow-[0_8px_24px_rgb(0_0_0/0.18)]'>
-                <div className='mb-2 flex items-start justify-between gap-3'>
-                    <div className='min-w-0'>
-                        <p className='type-meta text-[10px] font-semibold uppercase tracking-[0.24em] text-lucky-text-subtle'>
-                            {t('sidebar.activeGuild')}
-                        </p>
-                    </div>
-                    {showMobileClose && (
-                        <button
-                            type='button'
-                            className='lucky-focus-visible flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-lucky-text-tertiary transition-colors hover:bg-lucky-bg-tertiary hover:text-lucky-text-primary lg:hidden'
-                            onClick={onMobileClose}
-                            aria-label={t('common.closeSidebar')}
-                        >
-                            <X className='h-4 w-4' />
-                        </button>
-                    )}
-                </div>
-
-                <div className='flex items-center gap-3'>
-                    <Avatar className='h-10 w-10 shrink-0 ring-1 ring-lucky-border/80'>
-                        <AvatarImage
-                            src={guildIconSrc}
-                            alt={selectedGuild?.name || 'No server selected'}
-                        />
-                        <AvatarFallback className='bg-lucky-bg-active text-xs font-semibold text-lucky-text-primary'>
-                            {guildFallback}
-                        </AvatarFallback>
-                    </Avatar>
-                    <div className='min-w-0 flex-1'>
-                        <div className='mb-1 flex min-w-0 items-center gap-2'>
-                            <p className='type-title truncate text-lucky-text-primary'>
-                                {selectedGuild?.name || 'Lucky'}
-                            </p>
-                            <span
-                                className={cn(
-                                    'inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-                                    status.tone,
-                                )}
-                            >
-                                {status.label}
-                            </span>
-                        </div>
-                        <p className='text-[12px] leading-snug text-lucky-text-subtle'>
-                            {status.subtitle}
-                        </p>
-                    </div>
-                </div>
-
-                <div className='mt-3 flex items-center justify-between gap-2 border-t border-lucky-border/80 pt-3'>
-                    <button
-                        type='button'
-                        className='lucky-focus-visible inline-flex min-h-[36px] items-center gap-2 rounded-md border border-lucky-border bg-lucky-bg-tertiary px-3 py-1.5 text-[12px] font-medium text-lucky-text-secondary transition-colors hover:border-lucky-border-strong hover:bg-lucky-bg-active hover:text-lucky-text-primary'
-                        onClick={onSwitchClick}
-                        aria-label={t('sidebar.switchServer')}
-                        title={t('sidebar.switchServer')}
-                    >
-                        <ChevronsUpDown
-                            className='h-3.5 w-3.5'
-                            aria-hidden='true'
-                        />
-                        <span>{t('sidebar.switchServer')}</span>
-                    </button>
-
-                    <p className='text-[11px] text-lucky-text-subtle'>
-                        {t('sidebar.commandCenter')}
-                    </p>
-                </div>
-            </div>
-        </div>
-    )
-}
-
 interface NavSectionsProps {
     isActive: (path: string) => boolean
     canViewModule: (module: ModuleKey, requiredMode?: AccessMode) => boolean
     isDeveloper: boolean
 }
 
-function NavSections({ isActive, canViewModule, isDeveloper }: NavSectionsProps) {
+function NavSections({
+    isActive,
+    canViewModule,
+    isDeveloper,
+}: NavSectionsProps) {
     const { t } = useTranslation()
     return (
         <ScrollArea className='flex-1 py-3'>
@@ -446,8 +308,12 @@ function NavSections({ isActive, canViewModule, isDeveloper }: NavSectionsProps)
                             <li>
                                 <Link
                                     to='/admin'
-                                    data-active={isActive('/admin') ? 'true' : 'false'}
-                                    aria-current={isActive('/admin') ? 'page' : undefined}
+                                    data-active={
+                                        isActive('/admin') ? 'true' : 'false'
+                                    }
+                                    aria-current={
+                                        isActive('/admin') ? 'page' : undefined
+                                    }
                                     className={cn(
                                         'lucky-focus-visible group relative flex min-h-[38px] items-center gap-2.5 rounded-lg border px-2.5 py-2 transition-all duration-120',
                                         isActive('/admin')
@@ -458,7 +324,9 @@ function NavSections({ isActive, canViewModule, isDeveloper }: NavSectionsProps)
                                     <span
                                         className={cn(
                                             'absolute left-0 top-1/2 h-4 w-[3px] -translate-y-1/2 rounded-r transition-all duration-120',
-                                            isActive('/admin') ? 'bg-lucky-brand' : 'bg-transparent',
+                                            isActive('/admin')
+                                                ? 'bg-lucky-brand'
+                                                : 'bg-transparent',
                                         )}
                                         aria-hidden='true'
                                     />
@@ -484,64 +352,15 @@ function NavSections({ isActive, canViewModule, isDeveloper }: NavSectionsProps)
     )
 }
 
-interface UserFooterProps {
-    user: User | null
-    memberContext: GuildMemberContext | null
-    onLogout: () => void
-}
-
-function UserFooter({ user, memberContext, onLogout }: UserFooterProps) {
-    const { t } = useTranslation()
-    const profileName =
-        memberContext?.nickname || user?.globalName || user?.username || 'User'
-    const profileSubtitle = user?.username ? `@${user.username}` : 'Online'
-
-    const userAvatarSrc = user?.avatar
-        ? getUserAvatarUrl(user.id, user.avatar)
-        : undefined
-
-    return (
-        <div className='border-t border-lucky-border px-2 py-2'>
-            <div className='flex items-center gap-2.5 rounded-lg border border-transparent px-2 py-2'>
-                <Avatar className='h-7 w-7 shrink-0'>
-                    <AvatarImage src={userAvatarSrc} alt={profileName} />
-                    <AvatarFallback className='bg-lucky-bg-active text-[11px] font-semibold text-lucky-text-primary'>
-                        {(user?.username || 'U').substring(0, 2).toUpperCase()}
-                    </AvatarFallback>
-                </Avatar>
-                <div className='min-w-0 flex-1'>
-                    <p className='type-body-sm truncate text-lucky-text-primary leading-tight'>
-                        {profileName}
-                    </p>
-                    <p className='text-[11px] truncate text-lucky-text-subtle leading-tight'>
-                        {profileSubtitle}
-                    </p>
-                </div>
-                <button
-                    type='button'
-                    onClick={onLogout}
-                    className='lucky-focus-visible flex min-h-[32px] min-w-[32px] items-center justify-center rounded-md text-lucky-text-subtle transition-colors hover:bg-lucky-error/10 hover:text-lucky-error'
-                    aria-label={t('common.logout')}
-                    title={t('common.logout')}
-                >
-                    <LogOut className='h-3.5 w-3.5' aria-hidden='true' />
-                </button>
-            </div>
-        </div>
-    )
-}
-
 function Sidebar() {
     const location = useLocation()
-    const { user, logout, isDeveloper } = useAuthStore()
+    const { isDeveloper } = useAuthStore()
     const { selectedGuild, memberContext } = useGuildStore()
     const [mobileOpen, setMobileOpen] = useState(false)
-    const [switcherOpen, setSwitcherOpen] = useState(false)
     const prefersReducedMotion = useReducedMotion()
 
     useEffect(() => {
         setMobileOpen(false)
-        setSwitcherOpen(false)
     }, [location.pathname])
 
     const isActive = (path: string) => {
@@ -567,21 +386,10 @@ function Sidebar() {
 
     const sidebarContent = (
         <div className='flex h-full flex-col'>
-            <GuildHeader
-                selectedGuild={selectedGuild}
-                onSwitchClick={() => setSwitcherOpen(true)}
-                onMobileClose={() => setMobileOpen(false)}
-                showMobileClose={true}
-            />
-
-            <GuildSwitcher open={switcherOpen} onOpenChange={setSwitcherOpen} />
-
-            <NavSections isActive={isActive} canViewModule={canViewModule} isDeveloper={isDeveloper} />
-
-            <UserFooter
-                user={user}
-                memberContext={memberContext}
-                onLogout={logout}
+            <NavSections
+                isActive={isActive}
+                canViewModule={canViewModule}
+                isDeveloper={isDeveloper}
             />
         </div>
     )
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index efa30fff6..9c3e1ba9e 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -6,6 +6,15 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Tailwind v4 preflight sets `button { cursor: default }`; restore the click
+   affordance for enabled buttons + role=button elements. */
+@layer base {
+  button:not(:disabled),
+  [role='button']:not([aria-disabled='true']) {
+    cursor: pointer;
+  }
+}
+
 @utility container {
   margin-inline: auto;
   padding-inline: 2rem;
diff --git a/packages/frontend/src/lib/discord.ts b/packages/frontend/src/lib/discord.ts
new file mode 100644
index 000000000..c3fc6a8a0
--- /dev/null
+++ b/packages/frontend/src/lib/discord.ts
@@ -0,0 +1,10 @@
+// Discord CDN URL helpers. The backend returns avatar/icon HASHES, not full
+// URLs — build the CDN URL before passing to an <img>.
+
+export function getUserAvatarUrl(userId: string, avatarHash: string): string {
+    return `https://cdn.discordapp.com/avatars/${userId}/${avatarHash}.png?size=64`
+}
+
+export function getGuildIconUrl(guildId: string, iconHash: string): string {
+    return `https://cdn.discordapp.com/icons/${guildId}/${iconHash}.png?size=64`
+}
diff --git a/packages/frontend/src/pages/ServersPage.tsx b/packages/frontend/src/pages/ServersPage.tsx
index 16e8ca23f..54cdd4fa0 100644
--- a/packages/frontend/src/pages/ServersPage.tsx
+++ b/packages/frontend/src/pages/ServersPage.tsx
@@ -7,6 +7,7 @@ import { useGuildStore } from '@/stores/guildStore'
 import { useAuthStore } from '@/stores/authStore'
 import { usePageMetadata } from '@/hooks/usePageMetadata'
 import { cn } from '@/lib/utils'
+import { getUserAvatarUrl } from '@/lib/discord'
 
 export default function ServersPage() {
     const guilds = useGuildStore((state) => state.guilds)
@@ -46,7 +47,11 @@ export default function ServersPage() {
             <div className='surface-panel flex flex-wrap items-center gap-6 p-6 border border-lucky-border'>
                 <Avatar className='h-16 w-16 border border-lucky-border flex-shrink-0'>
                     <AvatarImage
-                        src={user?.avatar || undefined}
+                        src={
+                            user?.avatar && user?.id
+                                ? getUserAvatarUrl(user.id, user.avatar)
+                                : undefined
+                        }
                         alt={user?.username || 'User avatar'}
                     />
                     <AvatarFallback className='bg-lucky-brand/20 font-semibold text-lucky-brand'>

From 7c376df4337bfa794085d705c57dc32e72e2d643 Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucas.diassantana@gmail.com>
Date: Tue, 23 Jun 2026 17:45:33 -0300
Subject: [PATCH 6/7] feat(i18n): internationalize 23 dashboard pages with
 portuguese

Wrap user-facing strings on dashboard feature pages in t() and add English plus
Brazilian-Portuguese translations so the language switcher translates the
dashboard. EN values are verbatim (no English visual change). Marketing and
legal prose pages deferred as a separate content-translation job.
---
 packages/frontend/src/lib/i18n.ts             |   7 +-
 packages/frontend/src/locales/en.json         | 609 +++++++++++++++++-
 packages/frontend/src/locales/pt-BR.json      | 609 +++++++++++++++++-
 packages/frontend/src/pages/Admin.tsx         |  20 +-
 packages/frontend/src/pages/AutoMessages.tsx  |  35 +-
 packages/frontend/src/pages/AutoMod.tsx       |  18 +-
 packages/frontend/src/pages/Config.tsx        |  19 +-
 .../frontend/src/pages/CustomCommands.tsx     |  22 +-
 packages/frontend/src/pages/Dashboard.tsx     |  14 +-
 .../frontend/src/pages/DashboardOverview.tsx  | 106 +--
 packages/frontend/src/pages/EmbedBuilder.tsx  | 129 ++--
 .../frontend/src/pages/GuildAutomation.tsx    |  48 +-
 packages/frontend/src/pages/LastFm.tsx        |  86 ++-
 packages/frontend/src/pages/Levels.tsx        |  67 +-
 packages/frontend/src/pages/Lyrics.tsx        |  23 +-
 .../frontend/src/pages/Moderation.test.tsx    |  83 ++-
 packages/frontend/src/pages/Moderation.tsx    | 127 ++--
 packages/frontend/src/pages/Music.tsx         |  52 +-
 .../src/pages/PreferredArtists.test.tsx       |  45 ++
 .../frontend/src/pages/PreferredArtists.tsx   |  46 +-
 packages/frontend/src/pages/ReactionRoles.tsx | 106 +--
 .../frontend/src/pages/ServerLogs.test.tsx    |  48 +-
 packages/frontend/src/pages/ServerLogs.tsx    |  55 +-
 .../frontend/src/pages/ServerSettings.tsx     | 168 +++--
 .../frontend/src/pages/ServersPage.test.tsx   |  35 +
 packages/frontend/src/pages/ServersPage.tsx   |  34 +-
 packages/frontend/src/pages/Spotify.tsx       |  83 ++-
 .../frontend/src/pages/Starboard.test.tsx     |  40 ++
 packages/frontend/src/pages/Starboard.tsx     |  39 +-
 packages/frontend/src/pages/TrackHistory.tsx  |  56 +-
 .../src/pages/TwitchNotifications.test.tsx    |  51 +-
 .../src/pages/TwitchNotifications.tsx         |  58 +-
 32 files changed, 2318 insertions(+), 620 deletions(-)

diff --git a/packages/frontend/src/lib/i18n.ts b/packages/frontend/src/lib/i18n.ts
index 76821d719..e97e652d1 100644
--- a/packages/frontend/src/lib/i18n.ts
+++ b/packages/frontend/src/lib/i18n.ts
@@ -11,9 +11,12 @@ void i18n
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
+        // Each top-level group is exposed BOTH under the default `translation`
+        // namespace (pages call t('group.key')) AND as its own namespace (pages
+        // using useTranslation('group') + t('key')). Both conventions are in use.
         resources: {
-            en: { translation: en },
-            'pt-BR': { translation: ptBR },
+            en: { translation: en, ...en },
+            'pt-BR': { translation: ptBR, ...ptBR },
         },
         fallbackLng: 'en',
         supportedLngs: SUPPORTED_LANGUAGES,
diff --git a/packages/frontend/src/locales/en.json b/packages/frontend/src/locales/en.json
index 6f5ed158a..127625a4b 100644
--- a/packages/frontend/src/locales/en.json
+++ b/packages/frontend/src/locales/en.json
@@ -15,7 +15,11 @@
         "accessDenied": "Access denied",
         "accessDeniedDescription": "You do not have permission to view the {{module}} module for this server.",
         "logout": "Log out",
-        "language": "Language"
+        "language": "Language",
+        "name": "Name",
+        "error": "Error",
+        "color": "Color",
+        "selectServerDesc": "Select a server to continue"
     },
     "languages": {
         "en": "English",
@@ -406,5 +410,608 @@
         "selectedCount": "{{count}} roles selected",
         "delete": "Delete",
         "roles": "roles"
+    },
+    "admin": {
+        "adminPanel": "Admin Panel",
+        "signInWithDiscord": "Sign in with Discord to access the admin panel.",
+        "accessDenied": "Access Denied",
+        "accessDeniedDesc": "This page is restricted to bot administrators.",
+        "globalFeatureToggles": "Global Feature Toggles",
+        "manageFeatureFlags": "Manage feature flags across all servers",
+        "serverManagement": "Server Management",
+        "viewAndManageBotActivity": "View and manage bot activity across all servers"
+    },
+    "autoMessages": {
+        "title": "Auto Messages",
+        "subtitle": "Schedule automatic messages for {{name}}",
+        "editAutoMessage": "Edit Auto Message",
+        "newAutoMessage": "New Auto Message",
+        "name": "Name",
+        "namePlaceholder": "e.g. Daily Reminder",
+        "channelId": "Channel ID",
+        "channelIdPlaceholder": "Discord channel ID",
+        "content": "Content",
+        "contentPlaceholder": "Message content...",
+        "intervalSeconds": "Interval (seconds)",
+        "sendAsEmbed": "Send as embed",
+        "cancel": "Cancel",
+        "saving": "Saving…",
+        "save": "Save",
+        "noServerSelected": "No Server Selected",
+        "selectServerToManage": "Select a server to manage auto messages",
+        "noAutoMessagesConfigured": "No auto messages configured",
+        "createScheduledMessages": "Create scheduled messages that are posted automatically to your server",
+        "createAutoMessage": "Create Auto Message",
+        "newMessage": "New Message"
+    },
+    "autoMod": {
+        "title": "Auto-Moderation",
+        "subtitle": "Configure automatic content filters for {{name}}",
+        "saveChanges": "Save Changes",
+        "templates": "Templates",
+        "startFromCurated": "Start from curated defaults for common malicious links and harmful words.",
+        "noTemplatesAvailable": "No templates available right now.",
+        "contentFilters": "Content Filters",
+        "spamDetection": "Spam Detection",
+        "detectAndActOnSpam": "Detect and act on message spam",
+        "maxMessages": "Max messages",
+        "timeWindow": "Time window (s)",
+        "capsLockDetection": "Caps Lock Detection",
+        "detectExcessiveCaps": "Detect excessive use of capital letters",
+        "capsThreshold": "Caps threshold (%)",
+        "linkFiltering": "Link Filtering",
+        "blockOrRestrictLinks": "Block or restrict links in messages",
+        "allowedDomains": "Allowed domains",
+        "domainPlaceholder": "e.g. youtube.com",
+        "inviteLinkFiltering": "Invite Link Filtering",
+        "blockDiscordInvites": "Block Discord invite links",
+        "bannedWords": "Banned Words",
+        "filterMessagesWithWords": "Filter messages containing specific words",
+        "bannedWordsPlaceholder": "Add a word to ban...",
+        "exemptions": "Exemptions",
+        "channelsAndRolesExempt": "Channels and roles exempt from auto-moderation filters",
+        "exemptChannels": "Exempt Channels",
+        "selectChannelPlaceholder": "Select a channel...",
+        "exemptRoles": "Exempt Roles",
+        "selectRolePlaceholder": "Select a role...",
+        "channelsUnavailable": "Channels unavailable, enter IDs manually below",
+        "rolesUnavailable": "Roles unavailable, enter IDs manually below",
+        "noServerSelected": "No Server Selected",
+        "selectServerToConfigure": "Select a server to configure auto-moderation"
+    },
+    "config": {
+        "configuration": "Configuration",
+        "selectServerToConfigure": "Please select a server to configure",
+        "server": "Server:",
+        "availableConfigurationModules": "Available Configuration Modules",
+        "musicModule": "Music Module",
+        "configureMusic": "Configure music playback, queue management, and audio settings",
+        "commands": "Commands",
+        "manageCommandPermissions": "Manage command permissions, aliases, and behavior",
+        "moderation": "Moderation",
+        "setupAutoModeration": "Set up auto-moderation, filters, and moderation actions",
+        "back": "Back"
+    },
+    "customCommands": {
+        "title": "Custom Commands",
+        "subtitle": "Manage and configure commands for {{name}}",
+        "searchCommandsPlaceholder": "Search commands...",
+        "allCommands": "All",
+        "noServerSelected": "No Server Selected",
+        "selectServerToManage": "Select a server to manage commands",
+        "noCommandsFound": "No commands found",
+        "tryAdjustingFilters": "Try adjusting your filters",
+        "commandsWillAppearHere": "Commands will appear here",
+        "description": "Description"
+    },
+    "dashboard": {
+        "noServerSelected": "No Server Selected",
+        "selectServerFromSidebar": "Select a server from the sidebar to manage it",
+        "viewYourServers": "View Your Servers",
+        "pageTitle": "Dashboard"
+    },
+    "dashboardOverview": {
+        "selectAServer": "Select a Server",
+        "chooseServerFromSidebar": "Choose a server from the sidebar to view its dashboard",
+        "dashboardTitle": "Dashboard",
+        "serverAnalytics": "Server analytics",
+        "overviewOf": "Overview of {{name}}",
+        "totalMembers": "Total Members",
+        "activeMembersAcross": "Active members across {{name}}",
+        "activeCases": "Active Cases",
+        "totalCases": "Total Cases",
+        "autoModActions": "Auto-Mod Actions",
+        "recentCases": "Recent Cases",
+        "latestModerationActions": "Latest moderation actions",
+        "viewAll": "View all",
+        "noModerationCases": "No moderation cases yet",
+        "casesCasesWillAppear": "Cases will appear here when moderators take action",
+        "quickActions": "Quick Actions",
+        "moderationCases": "Moderation Cases",
+        "reviewWarningsMutesKicksBans": "Review warnings, mutes, kicks, and bans.",
+        "autoModeration": "Auto-Moderation",
+        "tuneFiltersAntiSpamAutomation": "Tune filters and anti-spam automation.",
+        "serverLogs": "Server Logs",
+        "auditEventsAndModerationActivity": "Audit events and moderation activity.",
+        "customCommands": "Custom Commands",
+        "manageScriptedServerShortcuts": "Manage scripted server shortcuts.",
+        "musicPlayer": "Music Player",
+        "viewQueuePlaybackTrackHistory": "View queue, playback, and track history.",
+        "levelsAndXP": "Levels & XP",
+        "configureXPLevelRewardsLeaderboards": "Configure XP, level rewards, and leaderboards.",
+        "starboard": "Starboard",
+        "manageCommunityHighlights": "Manage community highlights.",
+        "recentMusic": "Recent Music",
+        "latestTracksPlayed": "Latest tracks played",
+        "noTracksPlayedYet": "No tracks played yet",
+        "trackHistoryWillAppearWhenMusicPlayed": "Track history will appear here when music is played",
+        "community": "Community",
+        "levelLeaderboard": "Level Leaderboard",
+        "topMembersByXP": "Top members by XP",
+        "noLeaderboardData": "No leaderboard data",
+        "starboardHighlights": "Starboard Highlights",
+        "topStarredMessages": "Top starred messages",
+        "noStarredMessages": "No starred messages",
+        "casesByType": "Cases by Type"
+    },
+    "embedBuilder": {
+        "pageTitle": "Embed Builder",
+        "pageDescription": "Create and manage reusable Discord embed templates",
+        "newTemplate": "New Template",
+        "fields": "Fields",
+        "addField": "Add Field",
+        "fieldName": "Field name",
+        "fieldValue": "Field value",
+        "inline": "Inline",
+        "removeFieldAriaLabel": "Remove field {{index}}",
+        "editEmbedTemplate": "Edit Embed Template",
+        "newEmbedTemplate": "New Embed Template",
+        "cancel": "Cancel",
+        "saveChanges": "Save Changes",
+        "createTemplate": "Create Template",
+        "templateName": "Template Name *",
+        "templateNamePlaceholder": "e.g. welcome-message",
+        "color": "Color",
+        "title": "Title",
+        "titlePlaceholder": "Embed title",
+        "description": "Description",
+        "descriptionPlaceholder": "Embed description (supports markdown)",
+        "thumbnailUrl": "Thumbnail URL",
+        "imageUrl": "Image URL",
+        "urlPlaceholder": "https://...",
+        "footer": "Footer",
+        "footerPlaceholder": "Footer text",
+        "preview": "Preview",
+        "fillFieldsToSeePreview": "Fill in the fields to see a preview",
+        "saving": "Saving...",
+        "noEmbedTemplates": "No embed templates",
+        "createFirstEmbedTemplate": "Create your first embed template to use in bot commands",
+        "editAriaLabel": "Edit {{name}}",
+        "deleteAriaLabel": "Delete {{name}}",
+        "deleteTemplate": "Delete Template",
+        "deleteTemplateConfirm": "Delete \"{{name}}\"? This cannot be undone.",
+        "delete": "Delete",
+        "used": "Used {{count}}×",
+        "field": "field",
+        "fields_plural": "fields"
+    },
+    "guildAutomation": {
+        "pageTitle": "Guild Automation",
+        "pageDescription": "Manage your guild configuration as code — plan, apply, and track changes.",
+        "noServerSelected": "No server selected",
+        "selectServerToManage": "Select a server to manage Guild Automation.",
+        "loadErrorMessage": "Couldn't load automation status or manifest — the API may be unavailable.",
+        "retry": "Retry",
+        "automationStatus": "Automation Status",
+        "refreshStatusTitle": "Refresh status",
+        "plan": "Plan",
+        "recordPlan": "Record Plan",
+        "reconcile": "Reconcile",
+        "planResult": "Plan Result",
+        "planRecord": "Plan Record",
+        "manifest": "Manifest",
+        "noManifestFound": "No manifest found. Paste or write a manifest below to get started.",
+        "manifestPlaceholder": "{ \"guildId\": \"...\", \"version\": \"1\", \"roles\": {}, \"channels\": {} }",
+        "saveManifest": "Save Manifest",
+        "runHistory": "Run History",
+        "noRunsYet": "No runs yet",
+        "runPlanOrApply": "Run a plan or apply to see results here.",
+        "invalidJsonError": "Invalid JSON — please fix syntax errors before saving."
+    },
+    "lastFm": {
+        "musicIdentityEyebrow": "Music identity",
+        "pageTitle": "Last.fm",
+        "pageDescription": "Scrobble tracks you play to your Last.fm profile",
+        "notConfigured": "Not Configured",
+        "lastFmNotConfigured": "Last.fm integration is not configured. Ask the server owner to set:",
+        "lastFmApiKey": "LASTFM_API_KEY",
+        "lastFmApiSecret": "LASTFM_API_SECRET",
+        "connected": "Connected",
+        "linkedAs": "Linked as",
+        "active": "Active",
+        "connectionDescription": "Tracks you request via the bot will be scrobbled to your Last.fm profile automatically.",
+        "disconnect": "Disconnect",
+        "connectYourAccount": "Connect Your Account",
+        "connectAccountDescription": "Link your Last.fm account so tracks you play through the bot are automatically scrobbled to your profile.",
+        "connectWithLastFm": "Connect with Last.fm",
+        "scrobbleCoverage": "Scrobble coverage",
+        "scrobbleCoverageDescription": "Lucky tracks requested songs and forwards play activity once linked.",
+        "privacyControl": "Privacy control",
+        "privacyControlDescription": "Disconnect anytime without affecting server playback.",
+        "howItWorks": "How it works",
+        "step1": "Connect your Last.fm account above",
+        "step2": "Play music in a voice channel using the bot",
+        "step3": "Tracks are automatically scrobbled to your profile",
+        "step4": "External music bots (Rythm, Groovy, etc.) are also detected",
+        "failedToLoadStatus": "Failed to load Last.fm status",
+        "failedToUnlink": "Failed to unlink account",
+        "disconnectConfirm": "Disconnect your Last.fm account?"
+    },
+    "levels": {
+        "noServerSelected": "No server selected",
+        "selectServerToView": "Select a server to view level settings",
+        "leaderboard": "Leaderboard",
+        "noDataYet": "No data yet",
+        "membersGainXp": "Members gain XP by chatting once the level system is enabled",
+        "level": "Level",
+        "xp": "XP",
+        "settings": "Settings",
+        "enableXp": "Enable XP",
+        "xpPerMessage": "XP Per Message",
+        "cooldown": "Cooldown (ms)",
+        "announceChannel": "Announce Channel",
+        "channelIdOptional": "Channel ID (optional)",
+        "saveSettings": "Save Settings",
+        "saving": "Saving...",
+        "levelRewards": "Level Rewards",
+        "couldNotLoadRoles": "Couldn't load this server's roles — reward role names may show as raw IDs. Refresh to retry.",
+        "noRewardsConfigured": "No rewards configured",
+        "levelLabel": "Level",
+        "roleIdLabel": "Role ID",
+        "addReward": "Add Reward",
+        "adding": "Adding...",
+        "levelSettingsSaved": "Level settings saved",
+        "failedToSaveSettings": "Failed to save settings",
+        "rewardAdded": "Reward added for level {{level}}",
+        "failedToAddReward": "Failed to add reward",
+        "rewardRemoved": "Reward removed",
+        "failedToRemoveReward": "Failed to remove reward",
+        "levelPlaceholder": "e.g. 5",
+        "roleIdPlaceholder": "Role ID",
+        "failedToLoadSettings": "Failed to load level settings"
+    },
+    "lyrics": {
+        "selectServerToSearch": "Select a server to search lyrics",
+        "lyricsSearch": "Lyrics Search",
+        "songTitle": "Song Title",
+        "required": "*",
+        "enterSongTitle": "Enter song title",
+        "artist": "Artist (optional)",
+        "enterArtistName": "Enter artist name",
+        "search": "Search",
+        "searching": "Searching...",
+        "failedToFetchLyrics": "Failed to fetch lyrics. Please try again.",
+        "noLyricsFound": "No lyrics found",
+        "searchForLyrics": "Search for lyrics by entering a song title"
+    },
+    "moderation": {
+        "noServerSelected": "No Server Selected",
+        "selectServerToViewCases": "Select a server to view moderation cases",
+        "moderationCases": "Moderation Cases",
+        "manageWarningsAndBans": "Manage warnings, mutes, kicks, and bans",
+        "totalCases": "Total Cases",
+        "activeCases": "Active Cases",
+        "warnings": "Warnings",
+        "bans": "Bans",
+        "searchByUserModeratorOrReason": "Search by user, moderator, or reason...",
+        "allTypes": "All types",
+        "mutes": "Mutes",
+        "kicks": "Kicks",
+        "unbans": "Unbans",
+        "unmutes": "Unmutes",
+        "tableHeaderCase": "#",
+        "tableHeaderUser": "User",
+        "tableHeaderModerator": "Moderator",
+        "tableHeaderType": "Type",
+        "tableHeaderStatus": "Status",
+        "tableHeaderDate": "Date",
+        "noCasesFound": "No cases found",
+        "tryAdjustingFilters": "Try adjusting your filters",
+        "moderationCasesWillAppearHere": "Moderation cases will appear here",
+        "showingToOf": "Showing {{from}} to {{to}} of {{total}}",
+        "caseDetailTitle": "Case #{{number}}",
+        "caseUser": "User",
+        "caseModerator": "Moderator",
+        "caseAction": "Action",
+        "caseDate": "Date",
+        "caseReason": "Reason",
+        "caseDuration": "Duration",
+        "durationMinutes": "Duration: {{minutes}} minutes",
+        "noReasonProvided": "No reason provided",
+        "active": "Active",
+        "expired": "Expired",
+        "appealed": "Appealed",
+        "deactivateCase": "Deactivate Case",
+        "deactivating": "Deactivating...",
+        "caseDeactivated": "Case deactivated",
+        "failedToDeactivateCase": "Failed to deactivate case",
+        "justNow": "Just now",
+        "minutesAgo": "{{minutes}}m ago",
+        "hoursAgo": "{{hours}}h ago",
+        "daysAgo": "{{days}}d ago"
+    },
+    "music": {
+        "noServerSelected": "No Server Selected",
+        "selectServerToControlMusic": "Select a server to control music playback",
+        "musicPlayer": "Music Player",
+        "connectedToVoiceChannel": "Connected to {{channel}}",
+        "notConnectedToVoiceChannel": "Not connected to a voice channel",
+        "connected": "Live",
+        "reconnecting": "Reconnecting",
+        "connectedToLiveUpdates": "Connected to live updates",
+        "reconnectingToLiveUpdates": "Reconnecting to live updates",
+        "nowPlaying": "Now Playing",
+        "unknown": "Unknown",
+        "nothingPlaying": "Nothing playing",
+        "searchOrImportToGetStarted": "Search or import to get started",
+        "queue": "Queue",
+        "volume": "Volume",
+        "shuffle": "Shuffle",
+        "previousTrack": "Previous track",
+        "play": "Play",
+        "pause": "Pause",
+        "nextTrack": "Next track",
+        "repeatMode": "Repeat: {{mode}}"
+    },
+    "preferredArtists": {
+        "noServerSelected": "No Server Selected",
+        "selectServerToManageArtists": "Select a server to manage preferred artists",
+        "musicPersonalization": "Music personalization",
+        "musicalTaste": "Musical Taste",
+        "chooseArtistsDescription": "Choose artists to guide autoplay recommendations. When multiple people are in voice, Lucky blends everyone's preferences.",
+        "discoverTab": "Discover",
+        "preferredTab": "Preferred",
+        "blockedTab": "Blocked",
+        "searchForArtist": "Search for an artist...",
+        "searching": "Searching...",
+        "failedToSearchArtists": "Failed to search artists",
+        "noArtistsFound": "No artists found for \"{{query}}\"",
+        "noSuggestionsAvailable": "No suggestions available. Try searching for artists above.",
+        "noPreferredArtistsYet": "No preferred artists yet",
+        "addFromDiscover": "Add some from Discover.",
+        "noBlockedArtists": "No blocked artists",
+        "blockArtistsDescription": "Block artists you don't want Lucky to autoplay.",
+        "savePreferences": "Save Preferences ({{count}})",
+        "saving": "Saving...",
+        "prefer": "Prefer",
+        "block": "Block"
+    },
+    "reactionRoles": {
+        "title": "Title",
+        "description": "Description",
+        "export": "Export",
+        "import": "Import",
+        "create": "Create",
+        "noMessagesTitle": "No reaction role messages",
+        "noMessagesDescription": "Create your first reaction role message to let members self-assign roles with buttons.",
+        "noServerSelected": "No server selected",
+        "selectServerDescription": "Select a server from the sidebar to view reaction roles.",
+        "createTitle": "Create Reaction Role Message",
+        "editTitle": "Edit Reaction Role Message",
+        "channel": "Channel",
+        "selectChannelPlaceholder": "Select a channel",
+        "channelCannotChange": "Channel cannot be changed on edit",
+        "titlePlaceholder": "e.g. Pick your roles",
+        "descriptionPlaceholder": "Explain how to use the buttons below…",
+        "imageUrlOptional": "Image URL (optional)",
+        "imageUrlPlaceholder": "https://example.com/image.png",
+        "uploadImageOptional": "Upload Image (optional)",
+        "chooseImage": "Choose Image",
+        "roles": "Roles",
+        "addRole": "Add role",
+        "role": "Role",
+        "selectRolePlaceholder": "Select role",
+        "buttonLabel": "Button label",
+        "buttonLabelPlaceholder": "Label",
+        "emojiOptional": "Emoji (optional)",
+        "style": "Style",
+        "cancel": "Cancel",
+        "submit": "Create",
+        "submitUpdating": "Updating…",
+        "submitCreating": "Creating…",
+        "submitUpdate": "Update",
+        "selectChannelError": "Select a channel",
+        "titleRequiredError": "Title is required",
+        "descriptionRequiredError": "Description is required",
+        "addRoleError": "Add at least one role with a label",
+        "createFailedError": "Failed to create reaction role message",
+        "updateFailedError": "Failed to update reaction role message",
+        "deleteFailedError": "Failed to delete reaction role message.",
+        "loadFailedError": "Failed to load reaction role messages.",
+        "noMappings": "No role mappings found for this message."
+    },
+    "serverLogs": {
+        "title": "Server Logs",
+        "subtitle": "Activity and moderation logs for {{name}}",
+        "export": "Export",
+        "searchAndFilter": "Search & Filter",
+        "searchPlaceholder": "Search logs…",
+        "allLevels": "All levels",
+        "info": "Info",
+        "warnings": "Warnings",
+        "errors": "Errors",
+        "moderation": "Moderation",
+        "autoMod": "Auto-Mod",
+        "system": "System",
+        "noServerSelected": "No Server Selected",
+        "selectServerDescription": "Select a server to view logs",
+        "noLogsFound": "No logs found",
+        "adjustFilters": "Try adjusting your filters",
+        "logsWillAppear": "Logs will appear here as events occur",
+        "exportSuccess": "Logs exported!",
+        "loadError": "Failed to load logs. Please try again.",
+        "userLabel": "User:",
+        "channelLabel": "Channel:"
+    },
+    "serverSettings": {
+        "title": "Server Settings",
+        "description": "General configuration for {{name}}",
+        "eyebrow": "Configuration",
+        "saveChanges": "Save Changes",
+        "saving": "Saving…",
+        "noServerSelected": "No Server Selected",
+        "selectServerDescription": "Select a server to manage settings",
+        "unableToLoadTitle": "Unable to load server settings",
+        "retryButtonLabel": "Retry",
+        "reAuthenticateLink": "Re-authenticate",
+        "sessionExpired": "Session expired. Please sign in again.",
+        "accessDenied": "You no longer have access to this server settings.",
+        "networkError": "Unable to reach API. Check your connection and retry.",
+        "general": "General",
+        "botNickname": "Bot Nickname",
+        "botNicknamePlaceholder": "Lucky",
+        "commandPrefix": "Command Prefix",
+        "commandPrefixPlaceholder": "!",
+        "regionNotifications": "Region & Notifications",
+        "timezone": "Timezone",
+        "updatesChannel": "Updates Channel",
+        "selectChannelPlaceholder": "Select a channel…",
+        "none": "None",
+        "channelIdPlaceholder": "Channel ID for bot updates",
+        "managerRoles": "Manager Roles",
+        "managerRolesDescription": "Roles that can manage bot settings via commands",
+        "addManagerRolePlaceholder": "Add a manager role…",
+        "noManagerRoles": "No manager roles configured.",
+        "disableCommandWarnings": "Disable Command Warnings",
+        "disableWarningsDescription": "Hide permission and cooldown warnings for users",
+        "accessControl": "Access Control",
+        "accessControlDescription": "Assign role-based web dashboard permissions",
+        "addRuleLabel": "Add Rule",
+        "saveAccessControl": "Save Policy",
+        "rbacCannotManage": "Only server owner or users with Administrator/Manage Server permission can manage RBAC policy.",
+        "noRbacRules": "No RBAC rules configured. Add a rule to grant module access.",
+        "noAssignableRoles": "No assignable roles found for this server yet.",
+        "retryRoles": "Retry Roles",
+        "roleSelectPlaceholder": "Role",
+        "moduleSelectPlaceholder": "Module",
+        "modeSelectPlaceholder": "Mode",
+        "modeView": "view",
+        "modeManage": "manage",
+        "removeRuleTitle": "Remove rule",
+        "settingsSaved": "Server settings saved!",
+        "settingsSaveFailed": "Failed to save settings",
+        "accessControlSaved": "Access control policy saved",
+        "accessControlFailed": "Failed to save access control policy",
+        "stillLoadingRoles": "Still loading role options. Try again in a moment.",
+        "roleOptionsNotAvailable": "Role options are not available yet. Retry loading roles.",
+        "unableToLoadMessage": "Failed to load server settings."
+    },
+    "servers": {
+        "discordAccount": "Discord Account",
+        "totalServers": "Total Servers",
+        "serversLabel": "Servers",
+        "yourServers": "Your Servers",
+        "serversWithBot": "{{count}} servers — {{count2}} with Lucky installed",
+        "navServers": "Servers",
+        "navPremium": "Premium",
+        "navSettings": "Settings",
+        "recentlyActive": "Recently Active",
+        "allOtherServers": "All Other Servers",
+        "luckyInstalled": "Lucky installed",
+        "inviteLucky": "Invite Lucky",
+        "noServersTitle": "No servers yet",
+        "noServersDescription": "Join a Discord server and Lucky will appear here."
+    },
+    "spotify": {
+        "eyebrow": "Music personalization",
+        "title": "Spotify",
+        "description": "Connect your Spotify account for personalized autoplay recommendations",
+        "notConfigured": "Not Configured",
+        "notConfiguredDesc": "Spotify integration is not configured. Ask the server owner to set:",
+        "clientIdEnv": "SPOTIFY_CLIENT_ID",
+        "clientSecretEnv": "SPOTIFY_CLIENT_SECRET",
+        "connected": "Connected",
+        "linkedAs": "Linked as",
+        "active": "Active",
+        "accessExplanation": "Lucky can access your library and listening history to provide personalized autoplay recommendations.",
+        "disconnect": "Disconnect",
+        "connectYourAccount": "Connect Your Account",
+        "connectDescription": "Link your Spotify account so Lucky can learn your music preferences and provide personalized autoplay recommendations.",
+        "connectWithSpotify": "Connect with Spotify",
+        "smarterAutoplay": "Smarter autoplay",
+        "smarterAutoplayDesc": "Lucky learns from your library, top tracks, and recent listening.",
+        "privacyControl": "Privacy control",
+        "privacyControlDesc": "Disconnect anytime without affecting server playback.",
+        "howItWorks": "How it works",
+        "step1": "Connect your Spotify account above",
+        "step2": "Lucky accesses your library, top tracks, and recent listening",
+        "step3": "When autoplay is active, Lucky recommends similar tracks based on your preferences",
+        "step4": "Your library stays private and is only used for recommendations",
+        "failedToLoadStatus": "Failed to load Spotify status",
+        "failedToUnlink": "Failed to unlink account",
+        "confirmDisconnect": "Disconnect your Spotify account?"
+    },
+    "starboard": {
+        "noServerSelected": "No server selected",
+        "selectServerToView": "Select a server to view starboard settings",
+        "topStarredMessages": "Top Starred Messages",
+        "noStarredMessages": "No starred messages yet",
+        "noStarredMessagesDesc": "Configure the starboard below and members can start starring messages",
+        "settings": "Settings",
+        "active": "Active",
+        "channelId": "Channel ID",
+        "emoji": "Emoji",
+        "starThreshold": "Star Threshold",
+        "allowSelfStar": "Allow Self-Star",
+        "save": "Save",
+        "saving": "Saving...",
+        "disableStarboard": "Disable Starboard",
+        "starboardSettingsSaved": "Starboard settings saved",
+        "failedToLoadSettings": "Failed to load starboard settings",
+        "failedToSaveSettings": "Failed to save settings",
+        "starboardDisabled": "Starboard disabled",
+        "failedToDeleteConfig": "Failed to delete starboard config"
+    },
+    "trackHistory": {
+        "noServerSelected": "No Server Selected",
+        "selectServerToViewHistory": "Select a server to view track history",
+        "trackHistory": "Track History",
+        "clear": "Clear",
+        "failedToLoadHistory": "Failed to load track history",
+        "tracksPlayed": "Tracks Played",
+        "playTime": "Play Time",
+        "topArtist": "Top Artist",
+        "mostPlayed": "Most Played",
+        "none": "None",
+        "topTracks": "Top Tracks",
+        "topArtists": "Top Artists",
+        "recentTracks": "Recent Tracks",
+        "showing": "Showing {{count}} of {{total}}",
+        "noTracksPlayed": "No tracks played yet",
+        "playMusicToSeeHistory": "Play some music to see your history here",
+        "loadMore": "Load More ({{remaining}} remaining)",
+        "loading": "Loading...",
+        "failedToClearHistory": "Failed to clear history"
+    },
+    "twitch": {
+        "selectServerToManage": "Select a server to manage Twitch notifications",
+        "twitchNotifications": "Twitch Notifications",
+        "notConfigured": "Not Configured",
+        "notConfiguredDesc": "Twitch API is not configured on this server. Contact the server administrator to set up Twitch credentials.",
+        "noNotificationsConfigured": "No Twitch notifications configured",
+        "add": "Add",
+        "addTwitchNotification": "Add Twitch Notification",
+        "twitchUrlOrLogin": "Twitch URL or login",
+        "twitchUrlPlaceholder": "Twitch URL or login (e.g. https://twitch.tv/luk)",
+        "selectDiscordChannel": "Select Discord channel",
+        "save": "Save",
+        "cancel": "Cancel",
+        "invalidTwitchInput": "Enter a valid Twitch URL or login",
+        "alreadyConfigured": "This Twitch channel is already configured",
+        "failedToAddNotification": "Failed to add notification",
+        "failedToRemoveNotification": "Failed to remove notification",
+        "removeAriaLabel": "Remove {{login}}",
+        "failedToLoadNotifications": "Failed to load Twitch notifications",
+        "failedToLoadChannels": "Failed to load Discord channels"
     }
 }
diff --git a/packages/frontend/src/locales/pt-BR.json b/packages/frontend/src/locales/pt-BR.json
index e98762841..45a080588 100644
--- a/packages/frontend/src/locales/pt-BR.json
+++ b/packages/frontend/src/locales/pt-BR.json
@@ -15,7 +15,11 @@
         "accessDenied": "Acesso negado",
         "accessDeniedDescription": "Você não tem permissão para visualizar o módulo {{module}} deste servidor.",
         "logout": "Sair",
-        "language": "Idioma"
+        "language": "Idioma",
+        "name": "Name",
+        "error": "Error",
+        "color": "Color",
+        "selectServerDesc": "Select a server to continue"
     },
     "languages": {
         "en": "English",
@@ -402,5 +406,608 @@
         "selectedCount": "{{count}} funções selecionadas",
         "delete": "Deletar",
         "roles": "funções"
+    },
+    "admin": {
+        "adminPanel": "Painel de Administrador",
+        "signInWithDiscord": "Entre com Discord para acessar o painel de administrador.",
+        "accessDenied": "Acesso Negado",
+        "accessDeniedDesc": "Esta página é restrita aos administradores do bot.",
+        "globalFeatureToggles": "Alternância Global de Recursos",
+        "manageFeatureFlags": "Gerencie sinalizadores de recursos em todos os servidores",
+        "serverManagement": "Gerenciamento de Servidor",
+        "viewAndManageBotActivity": "Visualize e gerencie a atividade do bot em todos os servidores"
+    },
+    "autoMessages": {
+        "title": "Mensagens Automáticas",
+        "subtitle": "Agende mensagens automáticas para {{name}}",
+        "editAutoMessage": "Editar Mensagem Automática",
+        "newAutoMessage": "Nova Mensagem Automática",
+        "name": "Nome",
+        "namePlaceholder": "ex. Lembrete Diário",
+        "channelId": "ID do Canal",
+        "channelIdPlaceholder": "ID do canal do Discord",
+        "content": "Conteúdo",
+        "contentPlaceholder": "Conteúdo da mensagem...",
+        "intervalSeconds": "Intervalo (segundos)",
+        "sendAsEmbed": "Enviar como embed",
+        "cancel": "Cancelar",
+        "saving": "Salvando…",
+        "save": "Salvar",
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerToManage": "Selecione um servidor para gerenciar mensagens automáticas",
+        "noAutoMessagesConfigured": "Nenhuma mensagem automática configurada",
+        "createScheduledMessages": "Crie mensagens agendadas que são postadas automaticamente no seu servidor",
+        "createAutoMessage": "Criar Mensagem Automática",
+        "newMessage": "Nova Mensagem"
+    },
+    "autoMod": {
+        "title": "Auto-moderação",
+        "subtitle": "Configure filtros automáticos de conteúdo para {{name}}",
+        "saveChanges": "Salvar Alterações",
+        "templates": "Modelos",
+        "startFromCurated": "Comece com padrões selecionados para links maliciosos comuns e palavras prejudiciais.",
+        "noTemplatesAvailable": "Nenhum modelo disponível no momento.",
+        "contentFilters": "Filtros de Conteúdo",
+        "spamDetection": "Detecção de Spam",
+        "detectAndActOnSpam": "Detecte e aja sobre spam de mensagens",
+        "maxMessages": "Máximo de mensagens",
+        "timeWindow": "Janela de tempo (s)",
+        "capsLockDetection": "Detecção de Caps Lock",
+        "detectExcessiveCaps": "Detecte o uso excessivo de letras maiúsculas",
+        "capsThreshold": "Limite de caps (%)",
+        "linkFiltering": "Filtragem de Links",
+        "blockOrRestrictLinks": "Bloqueie ou restrinja links em mensagens",
+        "allowedDomains": "Domínios permitidos",
+        "domainPlaceholder": "ex. youtube.com",
+        "inviteLinkFiltering": "Filtragem de Links de Convite",
+        "blockDiscordInvites": "Bloqueie links de convite do Discord",
+        "bannedWords": "Palavras Proibidas",
+        "filterMessagesWithWords": "Filtre mensagens contendo palavras específicas",
+        "bannedWordsPlaceholder": "Adicione uma palavra para banir...",
+        "exemptions": "Isenções",
+        "channelsAndRolesExempt": "Canais e funções isentos de filtros de auto-moderação",
+        "exemptChannels": "Canais Isentos",
+        "selectChannelPlaceholder": "Selecione um canal...",
+        "exemptRoles": "Funções Isentas",
+        "selectRolePlaceholder": "Selecione uma função...",
+        "channelsUnavailable": "Canais indisponíveis, insira IDs manualmente abaixo",
+        "rolesUnavailable": "Funções indisponíveis, insira IDs manualmente abaixo",
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerToConfigure": "Selecione um servidor para configurar a auto-moderação"
+    },
+    "config": {
+        "configuration": "Configuração",
+        "selectServerToConfigure": "Selecione um servidor para configurar",
+        "server": "Servidor:",
+        "availableConfigurationModules": "Módulos de Configuração Disponíveis",
+        "musicModule": "Módulo de Música",
+        "configureMusic": "Configure reprodução de música, gerenciamento de fila e configurações de áudio",
+        "commands": "Comandos",
+        "manageCommandPermissions": "Gerencie permissões de comandos, aliases e comportamento",
+        "moderation": "Moderação",
+        "setupAutoModeration": "Configure auto-moderação, filtros e ações de moderação",
+        "back": "Voltar"
+    },
+    "customCommands": {
+        "title": "Comandos Personalizados",
+        "subtitle": "Gerencie e configure comandos para {{name}}",
+        "searchCommandsPlaceholder": "Procurar comandos...",
+        "allCommands": "Todos",
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerToManage": "Selecione um servidor para gerenciar comandos",
+        "noCommandsFound": "Nenhum comando encontrado",
+        "tryAdjustingFilters": "Tente ajustar seus filtros",
+        "commandsWillAppearHere": "Os comandos aparecerão aqui",
+        "description": "Descrição"
+    },
+    "dashboard": {
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerFromSidebar": "Selecione um servidor na barra lateral para gerenciá-lo",
+        "viewYourServers": "Ver Seus Servidores",
+        "pageTitle": "Painel de Controle"
+    },
+    "dashboardOverview": {
+        "selectAServer": "Selecionar um Servidor",
+        "chooseServerFromSidebar": "Escolha um servidor na barra lateral para ver seu painel",
+        "dashboardTitle": "Painel de Controle",
+        "serverAnalytics": "Análise do servidor",
+        "overviewOf": "Visão geral de {{name}}",
+        "totalMembers": "Total de Membros",
+        "activeMembersAcross": "Membros ativos em {{name}}",
+        "activeCases": "Casos Ativos",
+        "totalCases": "Total de Casos",
+        "autoModActions": "Ações de Auto-Mod",
+        "recentCases": "Casos Recentes",
+        "latestModerationActions": "Últimas ações de moderação",
+        "viewAll": "Ver tudo",
+        "noModerationCases": "Nenhum caso de moderação ainda",
+        "casesCasesWillAppear": "Os casos aparecerão aqui quando os moderadores tomarem ações",
+        "quickActions": "Ações Rápidas",
+        "moderationCases": "Casos de Moderação",
+        "reviewWarningsMutesKicksBans": "Revise avisos, silenciamentos, chutes e banimentos.",
+        "autoModeration": "Auto-Moderação",
+        "tuneFiltersAntiSpamAutomation": "Ajuste filtros e automação anti-spam.",
+        "serverLogs": "Logs do Servidor",
+        "auditEventsAndModerationActivity": "Eventos de auditoria e atividade de moderação.",
+        "customCommands": "Comandos Personalizados",
+        "manageScriptedServerShortcuts": "Gerencie atalhos de servidor programados.",
+        "musicPlayer": "Reprodutor de Música",
+        "viewQueuePlaybackTrackHistory": "Veja fila, reprodução e histórico de faixas.",
+        "levelsAndXP": "Níveis e XP",
+        "configureXPLevelRewardsLeaderboards": "Configure XP, recompensas de nível e placares.",
+        "starboard": "Quadro de Destaques",
+        "manageCommunityHighlights": "Gerencie destaques da comunidade.",
+        "recentMusic": "Música Recente",
+        "latestTracksPlayed": "Últimas faixas tocadas",
+        "noTracksPlayedYet": "Nenhuma faixa tocada ainda",
+        "trackHistoryWillAppearWhenMusicPlayed": "O histórico de faixas aparecerá aqui quando a música for tocada",
+        "community": "Comunidade",
+        "levelLeaderboard": "Placar de Níveis",
+        "topMembersByXP": "Principais membros por XP",
+        "noLeaderboardData": "Sem dados de placar",
+        "starboardHighlights": "Destaques do Quadro",
+        "topStarredMessages": "Principais mensagens destacadas",
+        "noStarredMessages": "Nenhuma mensagem destacada",
+        "casesByType": "Casos por Tipo"
+    },
+    "embedBuilder": {
+        "pageTitle": "Construtor de Embeds",
+        "pageDescription": "Crie e gerencie modelos de embed Discord reutilizáveis",
+        "newTemplate": "Novo Modelo",
+        "fields": "Campos",
+        "addField": "Adicionar Campo",
+        "fieldName": "Nome do campo",
+        "fieldValue": "Valor do campo",
+        "inline": "Em linha",
+        "removeFieldAriaLabel": "Remover campo {{index}}",
+        "editEmbedTemplate": "Editar Modelo de Embed",
+        "newEmbedTemplate": "Novo Modelo de Embed",
+        "cancel": "Cancelar",
+        "saveChanges": "Salvar Alterações",
+        "createTemplate": "Criar Modelo",
+        "templateName": "Nome do Modelo *",
+        "templateNamePlaceholder": "ex: mensagem-boas-vindas",
+        "color": "Cor",
+        "title": "Título",
+        "titlePlaceholder": "Título do embed",
+        "description": "Descrição",
+        "descriptionPlaceholder": "Descrição do embed (suporta markdown)",
+        "thumbnailUrl": "URL da Miniatura",
+        "imageUrl": "URL da Imagem",
+        "urlPlaceholder": "https://...",
+        "footer": "Rodapé",
+        "footerPlaceholder": "Texto do rodapé",
+        "preview": "Prévia",
+        "fillFieldsToSeePreview": "Preencha os campos para ver uma prévia",
+        "saving": "Salvando...",
+        "noEmbedTemplates": "Nenhum modelo de embed",
+        "createFirstEmbedTemplate": "Crie seu primeiro modelo de embed para usar em comandos de bot",
+        "editAriaLabel": "Editar {{name}}",
+        "deleteAriaLabel": "Deletar {{name}}",
+        "deleteTemplate": "Deletar Modelo",
+        "deleteTemplateConfirm": "Deletar \"{{name}}\"? Isto não pode ser desfeito.",
+        "delete": "Deletar",
+        "used": "Usado {{count}}×",
+        "field": "campo",
+        "fields_plural": "campos"
+    },
+    "guildAutomation": {
+        "pageTitle": "Automação de Guild",
+        "pageDescription": "Gerencie sua configuração de guild como código — planeje, aplique e rastreie mudanças.",
+        "noServerSelected": "Nenhum servidor selecionado",
+        "selectServerToManage": "Selecione um servidor para gerenciar Automação de Guild.",
+        "loadErrorMessage": "Não foi possível carregar o status de automação ou manifesto — a API pode estar indisponível.",
+        "retry": "Tentar Novamente",
+        "automationStatus": "Status de Automação",
+        "refreshStatusTitle": "Atualizar status",
+        "plan": "Planejar",
+        "recordPlan": "Registrar Plano",
+        "reconcile": "Reconciliar",
+        "planResult": "Resultado do Plano",
+        "planRecord": "Registro do Plano",
+        "manifest": "Manifesto",
+        "noManifestFound": "Nenhum manifesto encontrado. Cole ou escreva um manifesto abaixo para começar.",
+        "manifestPlaceholder": "{ \"guildId\": \"...\", \"version\": \"1\", \"roles\": {}, \"channels\": {} }",
+        "saveManifest": "Salvar Manifesto",
+        "runHistory": "Histórico de Execuções",
+        "noRunsYet": "Nenhuma execução ainda",
+        "runPlanOrApply": "Execute um plano ou aplique para ver resultados aqui.",
+        "invalidJsonError": "JSON inválido — por favor, corrija erros de sintaxe antes de salvar."
+    },
+    "lastFm": {
+        "musicIdentityEyebrow": "Identidade musical",
+        "pageTitle": "Last.fm",
+        "pageDescription": "Faça scrobble das faixas que você toca em seu perfil Last.fm",
+        "notConfigured": "Não Configurado",
+        "lastFmNotConfigured": "A integração do Last.fm não está configurada. Peça ao proprietário do servidor para definir:",
+        "lastFmApiKey": "LASTFM_API_KEY",
+        "lastFmApiSecret": "LASTFM_API_SECRET",
+        "connected": "Conectado",
+        "linkedAs": "Vinculado como",
+        "active": "Ativo",
+        "connectionDescription": "As faixas que você solicita via bot serão scrobbladas automaticamente para seu perfil Last.fm.",
+        "disconnect": "Desconectar",
+        "connectYourAccount": "Conecte Sua Conta",
+        "connectAccountDescription": "Vincule sua conta Last.fm para que as faixas que você toca através do bot sejam scrobbladas automaticamente para seu perfil.",
+        "connectWithLastFm": "Conectar com Last.fm",
+        "scrobbleCoverage": "Cobertura de scrobble",
+        "scrobbleCoverageDescription": "Lucky rastreia músicas solicitadas e encaminha atividade de reprodução uma vez vinculado.",
+        "privacyControl": "Controle de privacidade",
+        "privacyControlDescription": "Desconecte a qualquer momento sem afetar a reprodução do servidor.",
+        "howItWorks": "Como funciona",
+        "step1": "Conecte sua conta Last.fm acima",
+        "step2": "Toque música em um canal de voz usando o bot",
+        "step3": "As faixas são automaticamente scrobbladas para seu perfil",
+        "step4": "Bots de música externos (Rythm, Groovy, etc.) também são detectados",
+        "failedToLoadStatus": "Falha ao carregar status do Last.fm",
+        "failedToUnlink": "Falha ao desvinacular conta",
+        "disconnectConfirm": "Desconectar sua conta Last.fm?"
+    },
+    "levels": {
+        "noServerSelected": "Nenhum servidor selecionado",
+        "selectServerToView": "Selecione um servidor para visualizar as configurações de nível",
+        "leaderboard": "Placar de Classificação",
+        "noDataYet": "Sem dados ainda",
+        "membersGainXp": "Membros ganham XP conversando quando o sistema de níveis está ativado",
+        "level": "Nível",
+        "xp": "XP",
+        "settings": "Configurações",
+        "enableXp": "Ativar XP",
+        "xpPerMessage": "XP Por Mensagem",
+        "cooldown": "Cooldown (ms)",
+        "announceChannel": "Canal de Anúncio",
+        "channelIdOptional": "ID do Canal (opcional)",
+        "saveSettings": "Salvar Configurações",
+        "saving": "Salvando...",
+        "levelRewards": "Recompensas de Nível",
+        "couldNotLoadRoles": "Não foi possível carregar os cargos deste servidor — nomes de cargos de recompensa podem aparecer como IDs brutos. Atualize para tentar novamente.",
+        "noRewardsConfigured": "Nenhuma recompensa configurada",
+        "levelLabel": "Nível",
+        "roleIdLabel": "ID do Cargo",
+        "addReward": "Adicionar Recompensa",
+        "adding": "Adicionando...",
+        "levelSettingsSaved": "Configurações de nível salvas",
+        "failedToSaveSettings": "Falha ao salvar as configurações",
+        "rewardAdded": "Recompensa adicionada para o nível {{level}}",
+        "failedToAddReward": "Falha ao adicionar recompensa",
+        "rewardRemoved": "Recompensa removida",
+        "failedToRemoveReward": "Falha ao remover recompensa",
+        "levelPlaceholder": "por ex. 5",
+        "roleIdPlaceholder": "ID do Cargo",
+        "failedToLoadSettings": "Falha ao carregar as configurações de nível"
+    },
+    "lyrics": {
+        "selectServerToSearch": "Selecione um servidor para pesquisar letras",
+        "lyricsSearch": "Busca de Letras",
+        "songTitle": "Título da Música",
+        "required": "*",
+        "enterSongTitle": "Digite o título da música",
+        "artist": "Artista (opcional)",
+        "enterArtistName": "Digite o nome do artista",
+        "search": "Buscar",
+        "searching": "Buscando...",
+        "failedToFetchLyrics": "Falha ao buscar letras. Tente novamente.",
+        "noLyricsFound": "Nenhuma letra encontrada",
+        "searchForLyrics": "Pesquise por letras inserindo um título de música"
+    },
+    "moderation": {
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerToViewCases": "Selecione um servidor para visualizar casos de moderação",
+        "moderationCases": "Casos de Moderação",
+        "manageWarningsAndBans": "Gerenciar avisos, mutes, kicks e bans",
+        "totalCases": "Total de Casos",
+        "activeCases": "Casos Ativos",
+        "warnings": "Avisos",
+        "bans": "Bans",
+        "searchByUserModeratorOrReason": "Pesquisar por usuário, moderador ou motivo...",
+        "allTypes": "Todos os tipos",
+        "mutes": "Mutes",
+        "kicks": "Kicks",
+        "unbans": "Desbans",
+        "unmutes": "Desmutes",
+        "tableHeaderCase": "#",
+        "tableHeaderUser": "Usuário",
+        "tableHeaderModerator": "Moderador",
+        "tableHeaderType": "Tipo",
+        "tableHeaderStatus": "Status",
+        "tableHeaderDate": "Data",
+        "noCasesFound": "Nenhum caso encontrado",
+        "tryAdjustingFilters": "Tente ajustar seus filtros",
+        "moderationCasesWillAppearHere": "Os casos de moderação aparecerão aqui",
+        "showingToOf": "Exibindo {{from}} a {{to}} de {{total}}",
+        "caseDetailTitle": "Caso #{{number}}",
+        "caseUser": "Usuário",
+        "caseModerator": "Moderador",
+        "caseAction": "Ação",
+        "caseDate": "Data",
+        "caseReason": "Motivo",
+        "caseDuration": "Duração",
+        "durationMinutes": "Duração: {{minutes}} minutos",
+        "noReasonProvided": "Nenhum motivo fornecido",
+        "active": "Ativo",
+        "expired": "Expirado",
+        "appealed": "Apelado",
+        "deactivateCase": "Desativar Caso",
+        "deactivating": "Desativando...",
+        "caseDeactivated": "Caso desativado",
+        "failedToDeactivateCase": "Falha ao desativar caso",
+        "justNow": "Agora mesmo",
+        "minutesAgo": "há {{minutes}}m",
+        "hoursAgo": "há {{hours}}h",
+        "daysAgo": "há {{days}}d"
+    },
+    "music": {
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerToControlMusic": "Selecione um servidor para controlar a reprodução de música",
+        "musicPlayer": "Reprodutor de Música",
+        "connectedToVoiceChannel": "Conectado a {{channel}}",
+        "notConnectedToVoiceChannel": "Não conectado a um canal de voz",
+        "connected": "Ao Vivo",
+        "reconnecting": "Reconectando",
+        "connectedToLiveUpdates": "Conectado às atualizações ao vivo",
+        "reconnectingToLiveUpdates": "Reconectando às atualizações ao vivo",
+        "nowPlaying": "Tocando Agora",
+        "unknown": "Desconhecido",
+        "nothingPlaying": "Nada tocando",
+        "searchOrImportToGetStarted": "Pesquise ou importe para começar",
+        "queue": "Fila",
+        "volume": "Volume",
+        "shuffle": "Aleatório",
+        "previousTrack": "Faixa anterior",
+        "play": "Reproduzir",
+        "pause": "Pausar",
+        "nextTrack": "Próxima faixa",
+        "repeatMode": "Repetição: {{mode}}"
+    },
+    "preferredArtists": {
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerToManageArtists": "Selecione um servidor para gerenciar artistas preferidos",
+        "musicPersonalization": "Personalização de música",
+        "musicalTaste": "Gosto Musical",
+        "chooseArtistsDescription": "Escolha artistas para guiar as recomendações de autoplay. Quando várias pessoas estão em um canal de voz, Lucky mistura as preferências de todos.",
+        "discoverTab": "Descobrir",
+        "preferredTab": "Preferidos",
+        "blockedTab": "Bloqueados",
+        "searchForArtist": "Pesquise um artista...",
+        "searching": "Pesquisando...",
+        "failedToSearchArtists": "Falha ao pesquisar artistas",
+        "noArtistsFound": "Nenhum artista encontrado para \"{{query}}\"",
+        "noSuggestionsAvailable": "Nenhuma sugestão disponível. Tente pesquisar artistas acima.",
+        "noPreferredArtistsYet": "Ainda nenhum artista preferido",
+        "addFromDiscover": "Adicione alguns da aba Descobrir.",
+        "noBlockedArtists": "Nenhum artista bloqueado",
+        "blockArtistsDescription": "Bloqueie artistas que não deseja que o Lucky reproduza automaticamente.",
+        "savePreferences": "Salvar Preferências ({{count}})",
+        "saving": "Salvando...",
+        "prefer": "Preferir",
+        "block": "Bloquear"
+    },
+    "reactionRoles": {
+        "title": "Título",
+        "description": "Descrição",
+        "export": "Exportar",
+        "import": "Importar",
+        "create": "Criar",
+        "noMessagesTitle": "Nenhuma mensagem de cargo por reação",
+        "noMessagesDescription": "Crie sua primeira mensagem de cargo por reação para deixar os membros auto-atribuírem cargos com botões.",
+        "noServerSelected": "Nenhum servidor selecionado",
+        "selectServerDescription": "Selecione um servidor na barra lateral para visualizar cargos por reação.",
+        "createTitle": "Criar Mensagem de Cargo por Reação",
+        "editTitle": "Editar Mensagem de Cargo por Reação",
+        "channel": "Canal",
+        "selectChannelPlaceholder": "Selecione um canal",
+        "channelCannotChange": "O canal não pode ser alterado na edição",
+        "titlePlaceholder": "ex. Escolha seus cargos",
+        "descriptionPlaceholder": "Explique como usar os botões abaixo…",
+        "imageUrlOptional": "URL da imagem (opcional)",
+        "imageUrlPlaceholder": "https://exemplo.com/imagem.png",
+        "uploadImageOptional": "Enviar imagem (opcional)",
+        "chooseImage": "Escolher imagem",
+        "roles": "Cargos",
+        "addRole": "Adicionar cargo",
+        "role": "Cargo",
+        "selectRolePlaceholder": "Selecione um cargo",
+        "buttonLabel": "Rótulo do botão",
+        "buttonLabelPlaceholder": "Rótulo",
+        "emojiOptional": "Emoji (opcional)",
+        "style": "Estilo",
+        "cancel": "Cancelar",
+        "submit": "Criar",
+        "submitUpdating": "Atualizando…",
+        "submitCreating": "Criando…",
+        "submitUpdate": "Atualizar",
+        "selectChannelError": "Selecione um canal",
+        "titleRequiredError": "O título é obrigatório",
+        "descriptionRequiredError": "A descrição é obrigatória",
+        "addRoleError": "Adicione pelo menos um cargo com um rótulo",
+        "createFailedError": "Falha ao criar mensagem de cargo por reação",
+        "updateFailedError": "Falha ao atualizar mensagem de cargo por reação",
+        "deleteFailedError": "Falha ao excluir mensagem de cargo por reação.",
+        "loadFailedError": "Falha ao carregamentar mensagens de cargo por reação.",
+        "noMappings": "Nenhum mapeamento de cargo encontrado para esta mensagem."
+    },
+    "serverLogs": {
+        "title": "Logs do Servidor",
+        "subtitle": "Logs de atividade e moderação para {{name}}",
+        "export": "Exportar",
+        "searchAndFilter": "Pesquisar e Filtrar",
+        "searchPlaceholder": "Pesquisar logs…",
+        "allLevels": "Todos os níveis",
+        "info": "Informação",
+        "warnings": "Avisos",
+        "errors": "Erros",
+        "moderation": "Moderação",
+        "autoMod": "Auto-moderação",
+        "system": "Sistema",
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerDescription": "Selecione um servidor para visualizar logs",
+        "noLogsFound": "Nenhum log encontrado",
+        "adjustFilters": "Tente ajustar seus filtros",
+        "logsWillAppear": "Os logs aparecerão aqui conforme os eventos ocorrem",
+        "exportSuccess": "Logs exportados!",
+        "loadError": "Falha ao carregar logs. Por favor, tente novamente.",
+        "userLabel": "Usuário:",
+        "channelLabel": "Canal:"
+    },
+    "serverSettings": {
+        "title": "Configurações do Servidor",
+        "description": "Configuração geral para {{name}}",
+        "eyebrow": "Configuração",
+        "saveChanges": "Salvar Alterações",
+        "saving": "Salvando…",
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerDescription": "Selecione um servidor para gerenciar configurações",
+        "unableToLoadTitle": "Não foi possível carregar as configurações do servidor",
+        "retryButtonLabel": "Tentar novamente",
+        "reAuthenticateLink": "Re-autenticar",
+        "sessionExpired": "Sessão expirada. Por favor, faça login novamente.",
+        "accessDenied": "Você não tem mais acesso às configurações deste servidor.",
+        "networkError": "Não foi possível alcançar a API. Verifique sua conexão e tente novamente.",
+        "general": "Geral",
+        "botNickname": "Apelido do Bot",
+        "botNicknamePlaceholder": "Lucky",
+        "commandPrefix": "Prefixo de Comando",
+        "commandPrefixPlaceholder": "!",
+        "regionNotifications": "Região e Notificações",
+        "timezone": "Fuso Horário",
+        "updatesChannel": "Canal de Atualizações",
+        "selectChannelPlaceholder": "Selecione um canal…",
+        "none": "Nenhum",
+        "channelIdPlaceholder": "ID do canal para atualizações do bot",
+        "managerRoles": "Cargos de Gerente",
+        "managerRolesDescription": "Cargos que podem gerenciar configurações do bot via comandos",
+        "addManagerRolePlaceholder": "Adicionar um cargo de gerente…",
+        "noManagerRoles": "Nenhum cargo de gerente configurado.",
+        "disableCommandWarnings": "Desabilitar Avisos de Comando",
+        "disableWarningsDescription": "Ocultar avisos de permissão e cooldown para usuários",
+        "accessControl": "Controle de Acesso",
+        "accessControlDescription": "Atribuir permissões de painel web baseadas em função",
+        "addRuleLabel": "Adicionar Regra",
+        "saveAccessControl": "Salvar Política",
+        "rbacCannotManage": "Apenas o proprietário do servidor ou usuários com permissão de Administrador/Gerenciar Servidor podem gerenciar a política RBAC.",
+        "noRbacRules": "Nenhuma regra RBAC configurada. Adicione uma regra para conceder acesso a módulos.",
+        "noAssignableRoles": "Nenhum cargo atribuível encontrado para este servidor ainda.",
+        "retryRoles": "Tentar Cargos Novamente",
+        "roleSelectPlaceholder": "Cargo",
+        "moduleSelectPlaceholder": "Módulo",
+        "modeSelectPlaceholder": "Modo",
+        "modeView": "visualizar",
+        "modeManage": "gerenciar",
+        "removeRuleTitle": "Remover regra",
+        "settingsSaved": "Configurações do servidor salvas!",
+        "settingsSaveFailed": "Falha ao salvar configurações",
+        "accessControlSaved": "Política de controle de acesso salva",
+        "accessControlFailed": "Falha ao salvar política de controle de acesso",
+        "stillLoadingRoles": "Ainda carregando opções de cargo. Tente novamente em alguns momentos.",
+        "roleOptionsNotAvailable": "As opções de cargo ainda não estão disponíveis. Tente carregar os cargos novamente.",
+        "unableToLoadMessage": "Falha ao carregar as configurações do servidor."
+    },
+    "servers": {
+        "discordAccount": "Conta Discord",
+        "totalServers": "Total de Servidores",
+        "serversLabel": "Servidores",
+        "yourServers": "Seus Servidores",
+        "serversWithBot": "{{count}} servidores — {{count2}} com Lucky instalado",
+        "navServers": "Servidores",
+        "navPremium": "Premium",
+        "navSettings": "Configurações",
+        "recentlyActive": "Ativo Recentemente",
+        "allOtherServers": "Todos os Outros Servidores",
+        "luckyInstalled": "Lucky instalado",
+        "inviteLucky": "Convidar Lucky",
+        "noServersTitle": "Nenhum servidor ainda",
+        "noServersDescription": "Junte-se a um servidor Discord e Lucky aparecerá aqui."
+    },
+    "spotify": {
+        "eyebrow": "Personalização de música",
+        "title": "Spotify",
+        "description": "Conecte sua conta Spotify para recomendações de reprodução automática personalizadas",
+        "notConfigured": "Não Configurado",
+        "notConfiguredDesc": "Integração do Spotify não está configurada. Peça ao proprietário do servidor para definir:",
+        "clientIdEnv": "SPOTIFY_CLIENT_ID",
+        "clientSecretEnv": "SPOTIFY_CLIENT_SECRET",
+        "connected": "Conectado",
+        "linkedAs": "Conectado como",
+        "active": "Ativo",
+        "accessExplanation": "Lucky pode acessar sua biblioteca e histórico de reprodução para fornecer recomendações de reprodução automática personalizadas.",
+        "disconnect": "Desconectar",
+        "connectYourAccount": "Conecte Sua Conta",
+        "connectDescription": "Conecte sua conta Spotify para que Lucky aprenda suas preferências musicais e forneça recomendações de reprodução automática personalizadas.",
+        "connectWithSpotify": "Conectar com Spotify",
+        "smarterAutoplay": "Reprodução automática mais inteligente",
+        "smarterAutoplayDesc": "Lucky aprende com sua biblioteca, faixas principais e histórico de reprodução recente.",
+        "privacyControl": "Controle de privacidade",
+        "privacyControlDesc": "Desconecte a qualquer momento sem afetar a reprodução do servidor.",
+        "howItWorks": "Como funciona",
+        "step1": "Conecte sua conta Spotify acima",
+        "step2": "Lucky acessa sua biblioteca, faixas principais e histórico de reprodução recente",
+        "step3": "Quando a reprodução automática está ativa, Lucky recomenda faixas similares baseado em suas preferências",
+        "step4": "Sua biblioteca permanece privada e é usada apenas para recomendações",
+        "failedToLoadStatus": "Falha ao carregar status do Spotify",
+        "failedToUnlink": "Falha ao desconectar conta",
+        "confirmDisconnect": "Desconectar sua conta Spotify?"
+    },
+    "starboard": {
+        "noServerSelected": "Nenhum servidor selecionado",
+        "selectServerToView": "Selecione um servidor para visualizar configurações do quadro de honra",
+        "topStarredMessages": "Mensagens com Mais Estrelas",
+        "noStarredMessages": "Nenhuma mensagem com estrela ainda",
+        "noStarredMessagesDesc": "Configure o quadro de honra abaixo e os membros poderão começar a marcar mensagens com estrela",
+        "settings": "Configurações",
+        "active": "Ativo",
+        "channelId": "ID do Canal",
+        "emoji": "Emoji",
+        "starThreshold": "Limite de Estrelas",
+        "allowSelfStar": "Permitir Auto-Estrela",
+        "save": "Salvar",
+        "saving": "Salvando...",
+        "disableStarboard": "Desativar Quadro de Honra",
+        "starboardSettingsSaved": "Configurações do quadro de honra salvas",
+        "failedToLoadSettings": "Falha ao carregar configurações do quadro de honra",
+        "failedToSaveSettings": "Falha ao salvar configurações",
+        "starboardDisabled": "Quadro de honra desativado",
+        "failedToDeleteConfig": "Falha ao deletar configuração do quadro de honra"
+    },
+    "trackHistory": {
+        "noServerSelected": "Nenhum Servidor Selecionado",
+        "selectServerToViewHistory": "Selecione um servidor para visualizar o histórico de faixas",
+        "trackHistory": "Histórico de Faixas",
+        "clear": "Limpar",
+        "failedToLoadHistory": "Falha ao carregar histórico de faixas",
+        "tracksPlayed": "Faixas Reproduzidas",
+        "playTime": "Tempo de Reprodução",
+        "topArtist": "Artista Principal",
+        "mostPlayed": "Mais Reproduzido",
+        "none": "Nenhum",
+        "topTracks": "Faixas Principais",
+        "topArtists": "Artistas Principais",
+        "recentTracks": "Faixas Recentes",
+        "showing": "Mostrando {{count}} de {{total}}",
+        "noTracksPlayed": "Nenhuma faixa reproduzida ainda",
+        "playMusicToSeeHistory": "Toque alguma música para ver seu histórico aqui",
+        "loadMore": "Carregar Mais ({{remaining}} restantes)",
+        "loading": "Carregando...",
+        "failedToClearHistory": "Falha ao limpar histórico"
+    },
+    "twitch": {
+        "selectServerToManage": "Selecione um servidor para gerenciar notificações do Twitch",
+        "twitchNotifications": "Notificações do Twitch",
+        "notConfigured": "Não Configurado",
+        "notConfiguredDesc": "A API do Twitch não está configurada neste servidor. Entre em contato com o administrador do servidor para configurar as credenciais do Twitch.",
+        "noNotificationsConfigured": "Nenhuma notificação do Twitch configurada",
+        "add": "Adicionar",
+        "addTwitchNotification": "Adicionar Notificação do Twitch",
+        "twitchUrlOrLogin": "URL ou login do Twitch",
+        "twitchUrlPlaceholder": "URL ou login do Twitch (por exemplo, https://twitch.tv/luk)",
+        "selectDiscordChannel": "Selecionar canal do Discord",
+        "save": "Salvar",
+        "cancel": "Cancelar",
+        "invalidTwitchInput": "Digite uma URL ou login válido do Twitch",
+        "alreadyConfigured": "Este canal do Twitch já está configurado",
+        "failedToAddNotification": "Falha ao adicionar notificação",
+        "failedToRemoveNotification": "Falha ao remover notificação",
+        "removeAriaLabel": "Remover {{login}}",
+        "failedToLoadNotifications": "Falha ao carregar as notificações da Twitch",
+        "failedToLoadChannels": "Falha ao carregar os canais do Discord"
     }
 }
diff --git a/packages/frontend/src/pages/Admin.tsx b/packages/frontend/src/pages/Admin.tsx
index 344033ca0..d9c2f798a 100644
--- a/packages/frontend/src/pages/Admin.tsx
+++ b/packages/frontend/src/pages/Admin.tsx
@@ -7,8 +7,10 @@ import FeatureErrorBanner from '@/components/Features/FeatureErrorBanner'
 import { useAuthStore } from '@/stores/authStore'
 import { useFeatures } from '@/hooks/useFeatures'
 import { usePageMetadata } from '@/hooks/usePageMetadata'
+import { useTranslation } from 'react-i18next'
 
 export default function AdminPage() {
+    const { t } = useTranslation()
     const isDeveloper = useAuthStore((state) => state.isDeveloper)
     const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
     const login = useAuthStore((state) => state.login)
@@ -41,13 +43,13 @@ export default function AdminPage() {
                             className='text-xl font-semibold text-lucky-text-primary'
                             style={{ fontFamily: 'Sora' }}
                         >
-                            Admin Panel
+                            {t('admin.adminPanel')}
                         </h1>
                         <p
                             className='text-sm text-lucky-text-secondary'
                             style={{ fontFamily: 'Manrope' }}
                         >
-                            Sign in with Discord to access the admin panel.
+                            {t('admin.signInWithDiscord')}
                         </p>
                     </div>
                 </div>
@@ -73,13 +75,13 @@ export default function AdminPage() {
                             className='text-xl font-semibold text-lucky-text-primary'
                             style={{ fontFamily: 'Sora' }}
                         >
-                            Access Denied
+                            {t('admin.accessDenied')}
                         </h1>
                         <p
                             className='text-sm text-lucky-text-secondary'
                             style={{ fontFamily: 'Manrope' }}
                         >
-                            This page is restricted to bot administrators.
+                            {t('admin.accessDeniedDesc')}
                         </p>
                     </div>
                 </div>
@@ -116,7 +118,7 @@ export default function AdminPage() {
                             className='text-lg font-semibold text-lucky-text-primary'
                             style={{ fontFamily: 'Sora' }}
                         >
-                            Admin Panel
+                            {t('admin.adminPanel')}
                         </h1>
                     </div>
                     {loadError && (
@@ -153,13 +155,13 @@ export default function AdminPage() {
                             className='text-base font-semibold text-lucky-text-primary uppercase tracking-wide'
                             style={{ fontFamily: 'Sora' }}
                         >
-                            Global Feature Toggles
+                            {t('admin.globalFeatureToggles')}
                         </h2>
                         <p
                             className='text-xs text-lucky-text-tertiary'
                             style={{ fontFamily: 'Manrope' }}
                         >
-                            Manage feature flags across all servers
+                            {t('admin.manageFeatureFlags')}
                         </p>
                     </div>
                     <GlobalTogglesSection
@@ -181,13 +183,13 @@ export default function AdminPage() {
                             className='text-base font-semibold text-lucky-text-primary uppercase tracking-wide'
                             style={{ fontFamily: 'Sora' }}
                         >
-                            Server Management
+                            {t('admin.serverManagement')}
                         </h2>
                         <p
                             className='text-xs text-lucky-text-tertiary'
                             style={{ fontFamily: 'Manrope' }}
                         >
-                            View and manage bot activity across all servers
+                            {t('admin.viewAndManageBotActivity')}
                         </p>
                     </div>
                     <BotGuildsSection />
diff --git a/packages/frontend/src/pages/AutoMessages.tsx b/packages/frontend/src/pages/AutoMessages.tsx
index 0eaa010e3..994f5012e 100644
--- a/packages/frontend/src/pages/AutoMessages.tsx
+++ b/packages/frontend/src/pages/AutoMessages.tsx
@@ -30,6 +30,7 @@ import type {
     CreateAutoMessageInput,
     UpdateAutoMessageInput,
 } from '@/services/autoMessagesApi'
+import { useTranslation } from 'react-i18next'
 
 function formatInterval(seconds: number): string {
     if (seconds < 60) return `${seconds}s`
@@ -63,6 +64,7 @@ function MessageFormDialog({
     onSave,
     onClose,
 }: MessageFormProps) {
+    const { t } = useTranslation()
     const [name, setName] = useState(initial?.name ?? '')
     const [channel, setChannel] = useState(initial?.channel ?? '')
     const [content, setContent] = useState(initial?.content ?? '')
@@ -110,12 +112,12 @@ function MessageFormDialog({
                             htmlFor='am-name'
                             className='type-meta text-lucky-text-secondary'
                         >
-                            Name
+                            {t('autoMessages.name')}
                         </Label>
                         <Input
                             id='am-name'
                             className='bg-lucky-bg-tertiary border-lucky-border text-white placeholder:text-lucky-text-tertiary'
-                            placeholder='e.g. Daily Reminder'
+                            placeholder={t('autoMessages.namePlaceholder')}
                             value={name}
                             onChange={(e) => setName(e.target.value)}
                             required
@@ -126,12 +128,12 @@ function MessageFormDialog({
                             htmlFor='am-channel'
                             className='type-meta text-lucky-text-secondary'
                         >
-                            Channel ID
+                            {t('autoMessages.channelId')}
                         </Label>
                         <Input
                             id='am-channel'
                             className='bg-lucky-bg-tertiary border-lucky-border text-white placeholder:text-lucky-text-tertiary'
-                            placeholder='Discord channel ID'
+                            placeholder={t('autoMessages.channelIdPlaceholder')}
                             value={channel}
                             onChange={(e) => setChannel(e.target.value)}
                             required
@@ -142,12 +144,12 @@ function MessageFormDialog({
                             htmlFor='am-content'
                             className='type-meta text-lucky-text-secondary'
                         >
-                            Content
+                            {t('autoMessages.content')}
                         </Label>
                         <textarea
                             id='am-content'
                             className='w-full rounded-lg border border-lucky-border bg-lucky-bg-tertiary px-3 py-2 type-body-sm text-white placeholder:text-lucky-text-tertiary focus:outline-none focus:border-lucky-brand resize-none'
-                            placeholder='Message content...'
+                            placeholder={t('autoMessages.contentPlaceholder')}
                             rows={3}
                             value={content}
                             onChange={(e) => setContent(e.target.value)}
@@ -159,7 +161,7 @@ function MessageFormDialog({
                             htmlFor='am-interval'
                             className='type-meta text-lucky-text-secondary'
                         >
-                            Interval (seconds)
+                            {t('autoMessages.intervalSeconds')}
                         </Label>
                         <Input
                             id='am-interval'
@@ -183,7 +185,7 @@ function MessageFormDialog({
                             htmlFor='am-embed'
                             className='type-body-sm text-lucky-text-secondary cursor-pointer'
                         >
-                            Send as embed
+                            {t('autoMessages.sendAsEmbed')}
                         </Label>
                     </div>
                     <div className='flex justify-end gap-2 pt-2 border-t border-lucky-border'>
@@ -193,14 +195,16 @@ function MessageFormDialog({
                             onClick={onClose}
                             disabled={saving}
                         >
-                            Cancel
+                            {t('autoMessages.cancel')}
                         </Button>
                         <Button
                             variant='primary'
                             type='submit'
                             disabled={saving}
                         >
-                            {saving ? 'Saving…' : 'Save'}
+                            {saving
+                                ? t('autoMessages.saving')
+                                : t('autoMessages.save')}
                         </Button>
                     </div>
                 </form>
@@ -210,6 +214,7 @@ function MessageFormDialog({
 }
 
 export default function AutoMessagesPage() {
+    const { t } = useTranslation()
     const prefersReducedMotion = useReducedMotion()
     const { selectedGuild } = useGuildStore()
     const [messages, setMessages] = useState<AutoMessage[]>([])
@@ -276,10 +281,10 @@ export default function AutoMessagesPage() {
             <div className='flex flex-col items-center justify-center h-[60vh] text-center'>
                 <MessageSquare className='w-16 h-16 text-lucky-text-tertiary mb-4' />
                 <h2 className='type-h2 text-lucky-text-primary mb-2'>
-                    No Server Selected
+                    {t('autoMessages.noServerSelected')}
                 </h2>
                 <p className='type-body text-lucky-text-secondary'>
-                    Select a server to manage auto messages
+                    {t('autoMessages.selectServerToManage')}
                 </p>
             </div>
         )
@@ -297,10 +302,12 @@ export default function AutoMessagesPage() {
                 <div className='flex items-start justify-between'>
                     <header>
                         <h1 className='type-h1 text-lucky-text-primary'>
-                            Auto Messages
+                            {t('autoMessages.title')}
                         </h1>
                         <p className='type-body text-lucky-text-secondary mt-1'>
-                            Schedule automatic messages for {selectedGuild.name}
+                            {t('autoMessages.subtitle', {
+                                name: selectedGuild.name,
+                            })}
                         </p>
                     </header>
                     <Button
diff --git a/packages/frontend/src/pages/AutoMod.tsx b/packages/frontend/src/pages/AutoMod.tsx
index 89575e7ea..af4fcfab8 100644
--- a/packages/frontend/src/pages/AutoMod.tsx
+++ b/packages/frontend/src/pages/AutoMod.tsx
@@ -40,6 +40,7 @@ import type {
     GuildChannelOption,
     GuildRoleOption,
 } from '@/types'
+import { useTranslation } from 'react-i18next'
 
 interface FilterRowProps {
     title: string
@@ -200,6 +201,7 @@ function ChannelPicker({
     onAdd: (id: string) => void
     onRemove: (id: string) => void
 }) {
+    const { t } = useTranslation()
     const available = channels.filter((c) => !selectedIds.includes(c.id))
 
     const getChannelName = (id: string) =>
@@ -210,7 +212,9 @@ function ChannelPicker({
             {available.length > 0 && (
                 <Select onValueChange={onAdd}>
                     <SelectTrigger className='h-9 bg-lucky-bg-tertiary border-lucky-border text-white text-sm'>
-                        <SelectValue placeholder='Select a channel...' />
+                        <SelectValue
+                            placeholder={t('autoMod.selectChannelPlaceholder')}
+                        />
                     </SelectTrigger>
                     <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
                         {available.map((channel) => (
@@ -264,6 +268,7 @@ function RolePicker({
     onAdd: (id: string) => void
     onRemove: (id: string) => void
 }) {
+    const { t } = useTranslation()
     const available = roles.filter((r) => !selectedIds.includes(r.id))
 
     const getRoleName = (id: string) =>
@@ -274,7 +279,9 @@ function RolePicker({
             {available.length > 0 && (
                 <Select onValueChange={onAdd}>
                     <SelectTrigger className='h-9 bg-lucky-bg-tertiary border-lucky-border text-white text-sm'>
-                        <SelectValue placeholder='Select a role...' />
+                        <SelectValue
+                            placeholder={t('autoMod.selectRolePlaceholder')}
+                        />
                     </SelectTrigger>
                     <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
                         {available.map((role) => (
@@ -460,6 +467,7 @@ function normalizeAutoModSettings(
 }
 
 export default function AutoModPage() {
+    const { t } = useTranslation()
     const { selectedGuild } = useGuildStore()
     const [settings, setSettings] = useState<AutoModSettings>(DEFAULT_SETTINGS)
     const [templates, setTemplates] = useState<AutoModTemplate[]>([])
@@ -800,7 +808,7 @@ export default function AutoModPage() {
                                             ),
                                         )
                                     }
-                                    placeholder='e.g. youtube.com'
+                                    placeholder={t('autoMod.domainPlaceholder')}
                                 />
                             </div>
                         </FilterRow>
@@ -838,7 +846,9 @@ export default function AutoModPage() {
                                             ),
                                         )
                                     }
-                                    placeholder='Add a word to ban...'
+                                    placeholder={t(
+                                        'autoMod.bannedWordsPlaceholder',
+                                    )}
                                 />
                             </div>
                         </FilterRow>
diff --git a/packages/frontend/src/pages/Config.tsx b/packages/frontend/src/pages/Config.tsx
index 5356c3292..69d03cf47 100644
--- a/packages/frontend/src/pages/Config.tsx
+++ b/packages/frontend/src/pages/Config.tsx
@@ -11,11 +11,13 @@ import Button from '@/components/ui/Button'
 import { usePageMetadata } from '@/hooks/usePageMetadata'
 import { useGuildSelection } from '@/hooks/useGuildSelection'
 import LoadingSpinner from '@/components/ui/LoadingSpinner'
+import { useTranslation } from 'react-i18next'
 
 const MusicConfig = lazy(() => import('@/components/Config/MusicConfig'))
 const CommandsConfig = lazy(() => import('@/components/Config/CommandsConfig'))
 
 export default function ConfigPage() {
+    const { t } = useTranslation()
     usePageMetadata({
         title: 'Configuration - Lucky',
         description: 'Configure modules and commands for your Discord servers',
@@ -27,20 +29,20 @@ export default function ConfigPage() {
     const modules = [
         {
             id: 'music',
-            name: 'Music Module',
+            name: t('config.musicModule'),
             description:
                 'Configure music playback, queue management, and audio settings',
             icon: Music,
         },
         {
             id: 'commands',
-            name: 'Commands',
-            description: 'Manage command permissions, aliases, and behavior',
+            name: t('config.commands'),
+            description: t('config.manageCommandPermissions'),
             icon: MessageSquare,
         },
         {
             id: 'moderation',
-            name: 'Moderation',
+            name: t('config.moderation'),
             description:
                 'Set up auto-moderation, filters, and moderation actions',
             icon: Shield,
@@ -64,13 +66,13 @@ export default function ConfigPage() {
                             className='text-2xl font-semibold text-lucky-text-primary uppercase tracking-wide'
                             style={{ fontFamily: 'Sora' }}
                         >
-                            Configuration
+                            {t('config.configuration')}
                         </h1>
                         <p
                             className='text-sm text-lucky-text-secondary'
                             style={{ fontFamily: 'Manrope' }}
                         >
-                            Please select a server to configure
+                            {t('config.selectServerToConfigure')}
                         </p>
                     </div>
                 </header>
@@ -107,7 +109,7 @@ export default function ConfigPage() {
                     /* Module selection grid — Polaris resource-list density */
                     <section aria-labelledby='modules-heading'>
                         <h2 id='modules-heading' className='sr-only'>
-                            Available Configuration Modules
+                            {t('config.availableConfigurationModules')}
                         </h2>
                         <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
                             {modules.map((module) => {
@@ -178,7 +180,8 @@ export default function ConfigPage() {
                                 onClick={() => setSelectedModule(null)}
                                 className='gap-2 text-lucky-text-secondary hover:text-lucky-text-primary'
                             >
-                                <ArrowLeft className='w-4 h-4' /> Back
+                                <ArrowLeft className='w-4 h-4' />{' '}
+                                {t('config.back')}
                             </Button>
                         </div>
                         <Suspense
diff --git a/packages/frontend/src/pages/CustomCommands.tsx b/packages/frontend/src/pages/CustomCommands.tsx
index 2694328aa..8507daf46 100644
--- a/packages/frontend/src/pages/CustomCommands.tsx
+++ b/packages/frontend/src/pages/CustomCommands.tsx
@@ -9,6 +9,7 @@ import { api } from '@/services/api'
 import { useGuildStore } from '@/stores/guildStore'
 import { cn } from '@/lib/utils'
 import type { Command } from '@/types'
+import { useTranslation } from 'react-i18next'
 
 const CATEGORY_COLORS: Record<string, string> = {
     Manager: 'bg-red-500/10 text-red-400 border-red-500/20',
@@ -24,6 +25,7 @@ const CATEGORY_COLORS: Record<string, string> = {
 }
 
 export default function CustomCommandsPage() {
+    const { t } = useTranslation()
     const { selectedGuild } = useGuildStore()
     const [commands, setCommands] = useState<Command[]>([])
     const [loading, setLoading] = useState(true)
@@ -80,10 +82,10 @@ export default function CustomCommandsPage() {
             <div className='flex flex-col items-center justify-center h-[60vh] text-center'>
                 <Code className='w-16 h-16 text-lucky-text-tertiary mb-4' />
                 <h2 className='type-h2 text-lucky-text-primary mb-2'>
-                    No Server Selected
+                    {t('customCommands.noServerSelected')}
                 </h2>
                 <p className='text-lucky-text-secondary text-sm'>
-                    Select a server to manage commands
+                    {t('customCommands.selectServerToManage')}
                 </p>
             </div>
         )
@@ -94,10 +96,10 @@ export default function CustomCommandsPage() {
             {/* Header */}
             <header>
                 <h1 className='type-h1 text-lucky-text-primary'>
-                    Custom Commands
+                    {t('customCommands.title')}
                 </h1>
                 <p className='text-sm text-lucky-text-secondary mt-1'>
-                    Manage and configure commands for {selectedGuild.name}
+                    {t('customCommands.subtitle', { name: selectedGuild.name })}
                 </p>
             </header>
 
@@ -106,7 +108,9 @@ export default function CustomCommandsPage() {
                 <div className='relative'>
                     <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-lucky-text-tertiary' />
                     <Input
-                        placeholder='Search commands...'
+                        placeholder={t(
+                            'customCommands.searchCommandsPlaceholder',
+                        )}
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
                         className='pl-9 bg-lucky-bg-tertiary border-lucky-border text-lucky-text-primary placeholder:text-lucky-text-tertiary'
@@ -243,7 +247,7 @@ export default function CustomCommandsPage() {
                                 <div className='border-t border-lucky-border px-4 py-3 bg-lucky-bg-tertiary/30 text-xs text-lucky-text-secondary space-y-2'>
                                     <div>
                                         <p className='font-medium text-lucky-text-primary mb-1'>
-                                            Description
+                                            {t('customCommands.description')}
                                         </p>
                                         <p>{cmd.description}</p>
                                     </div>
@@ -255,12 +259,12 @@ export default function CustomCommandsPage() {
                     <div className='surface-panel rounded-lg p-12 border border-lucky-border text-center'>
                         <Code className='w-12 h-12 text-lucky-text-tertiary mx-auto mb-3' />
                         <p className='text-sm text-lucky-text-secondary mb-1'>
-                            No commands found
+                            {t('customCommands.noCommandsFound')}
                         </p>
                         <p className='text-xs text-lucky-text-tertiary'>
                             {searchQuery || selectedCategory
-                                ? 'Try adjusting your filters'
-                                : 'Commands will appear here'}
+                                ? t('customCommands.tryAdjustingFilters')
+                                : t('customCommands.commandsWillAppearHere')}
                         </p>
                     </div>
                 )}
diff --git a/packages/frontend/src/pages/Dashboard.tsx b/packages/frontend/src/pages/Dashboard.tsx
index f7ba10e76..4cb350278 100644
--- a/packages/frontend/src/pages/Dashboard.tsx
+++ b/packages/frontend/src/pages/Dashboard.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { FolderKanban } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import Button from '@/components/ui/Button'
 import ServerGrid from '@/components/Dashboard/ServerGrid'
 import { useGuildSelection } from '@/hooks/useGuildSelection'
@@ -7,6 +8,7 @@ import { usePageMetadata } from '@/hooks/usePageMetadata'
 
 export default function DashboardPage() {
     const navigate = useNavigate()
+    const { t } = useTranslation()
     const { selectedGuild } = useGuildSelection()
     usePageMetadata({
         title: 'Dashboard - Lucky',
@@ -23,15 +25,13 @@ export default function DashboardPage() {
                     />
                 </div>
                 <h2 className='type-h2 text-lucky-text-primary mb-2'>
-                    No Server Selected
+                    {t('dashboard.noServerSelected')}
                 </h2>
                 <p className='type-body text-lucky-text-secondary mb-4'>
-                    Select a server from the sidebar to manage it
+                    {t('dashboard.selectServerFromSidebar')}
                 </p>
-                <Button
-                    onClick={() => navigate('/servers')}
-                >
-                    View Your Servers
+                <Button onClick={() => navigate('/servers')}>
+                    {t('dashboard.viewYourServers')}
                 </Button>
             </main>
         )
@@ -41,7 +41,7 @@ export default function DashboardPage() {
         <main className='space-y-6'>
             <header>
                 <h1 className='type-h1 text-lucky-text-primary mb-4'>
-                    Dashboard
+                    {t('dashboard.pageTitle')}
                 </h1>
             </header>
             <section aria-labelledby='server-grid-heading'>
diff --git a/packages/frontend/src/pages/DashboardOverview.tsx b/packages/frontend/src/pages/DashboardOverview.tsx
index a959d26af..1f424f27f 100644
--- a/packages/frontend/src/pages/DashboardOverview.tsx
+++ b/packages/frontend/src/pages/DashboardOverview.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react'
 import { motion, useReducedMotion } from 'framer-motion'
+import { useTranslation } from 'react-i18next'
 import {
     Activity,
     AlertTriangle,
@@ -178,6 +179,7 @@ function CaseRow({ case: c, index }: { case: ModerationCase; index: number }) {
 }
 
 export default function DashboardOverview() {
+    const { t } = useTranslation()
     const prefersReducedMotion = useReducedMotion()
     const { selectedGuild, memberContext } = useGuildStore()
     const { data: stats, isLoading: statsLoading } = useModerationStats(
@@ -206,50 +208,54 @@ export default function DashboardOverview() {
         module: ModuleKey
     }> = [
         {
-            title: 'Moderation Cases',
-            description: 'Review warnings, mutes, kicks, and bans.',
+            title: t('dashboardOverview.moderationCases'),
+            description: t('dashboardOverview.reviewWarningsMutesKicksBans'),
             icon: <Shield className='h-4 w-4' />,
             href: '/moderation',
             module: 'moderation',
         },
         {
-            title: 'Auto-Moderation',
-            description: 'Tune filters and anti-spam automation.',
+            title: t('dashboardOverview.autoModeration'),
+            description: t('dashboardOverview.tuneFiltersAntiSpamAutomation'),
             icon: <ShieldAlert className='h-4 w-4' />,
             href: '/automod',
             module: 'moderation',
         },
         {
-            title: 'Server Logs',
-            description: 'Audit events and moderation activity.',
+            title: t('dashboardOverview.serverLogs'),
+            description: t(
+                'dashboardOverview.auditEventsAndModerationActivity',
+            ),
             icon: <ScrollText className='h-4 w-4' />,
             href: '/logs',
             module: 'moderation',
         },
         {
-            title: 'Custom Commands',
-            description: 'Manage scripted server shortcuts.',
+            title: t('dashboardOverview.customCommands'),
+            description: t('dashboardOverview.manageScriptedServerShortcuts'),
             icon: <MessageSquare className='h-4 w-4' />,
             href: '/commands',
             module: 'automation',
         },
         {
-            title: 'Music Player',
-            description: 'View queue, playback, and track history.',
+            title: t('dashboardOverview.musicPlayer'),
+            description: t('dashboardOverview.viewQueuePlaybackTrackHistory'),
             icon: <Music className='h-4 w-4' />,
             href: '/music',
             module: 'music',
         },
         {
-            title: 'Levels & XP',
-            description: 'Configure XP, level rewards, and leaderboards.',
+            title: t('dashboardOverview.levelsAndXP'),
+            description: t(
+                'dashboardOverview.configureXPLevelRewardsLeaderboards',
+            ),
             icon: <TrendingUp className='h-4 w-4' />,
             href: '/levels',
             module: 'settings',
         },
         {
-            title: 'Starboard',
-            description: 'Manage community highlights.',
+            title: t('dashboardOverview.starboard'),
+            description: t('dashboardOverview.manageCommunityHighlights'),
             icon: <Star className='h-4 w-4' />,
             href: '/starboard',
             module: 'settings',
@@ -266,8 +272,8 @@ export default function DashboardOverview() {
         return (
             <EmptyState
                 icon={<Activity className='h-10 w-10' />}
-                title='Select a Server'
-                description='Choose a server from the sidebar to view its dashboard'
+                title={t('dashboardOverview.selectAServer')}
+                description={t('dashboardOverview.chooseServerFromSidebar')}
             />
         )
     }
@@ -275,9 +281,11 @@ export default function DashboardOverview() {
     return (
         <div className='space-y-6'>
             <SectionHeader
-                title='Dashboard'
-                description={`Overview of ${selectedGuild.name}`}
-                eyebrow='Server analytics'
+                title={t('dashboardOverview.dashboardTitle')}
+                description={t('dashboardOverview.overviewOf', {
+                    name: selectedGuild.name,
+                })}
+                eyebrow={t('dashboardOverview.serverAnalytics')}
             />
 
             <div className='grid grid-cols-1 gap-4 lg:grid-cols-[2fr_1fr]'>
@@ -305,7 +313,7 @@ export default function DashboardOverview() {
                         <article className='surface-panel flex flex-col justify-between gap-6 p-6 border border-lucky-border'>
                             <div className='flex items-center justify-between gap-3'>
                                 <p className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                                    Total Members
+                                    {t('dashboardOverview.totalMembers')}
                                 </p>
                                 <span className='flex h-8 w-8 items-center justify-center rounded-md bg-lucky-brand/15 text-lucky-brand'>
                                     <Users
@@ -323,24 +331,26 @@ export default function DashboardOverview() {
                                 </p>
                             </div>
                             <p className='type-body-sm text-lucky-text-tertiary'>
-                                Active members across {selectedGuild.name}
+                                {t('dashboardOverview.activeMembersAcross', {
+                                    name: selectedGuild.name,
+                                })}
                             </p>
                         </article>
                         <div className='surface-panel divide-y divide-lucky-border/40 border border-lucky-border'>
                             <CompactStat
-                                label='Active Cases'
+                                label={t('dashboardOverview.activeCases')}
                                 value={stats?.activeCases || 0}
                                 icon={<Shield className='h-3.5 w-3.5' />}
                                 tone='accent'
                             />
                             <CompactStat
-                                label='Total Cases'
+                                label={t('dashboardOverview.totalCases')}
                                 value={stats?.totalCases || 0}
                                 icon={<MessageSquare className='h-3.5 w-3.5' />}
                                 tone='neutral'
                             />
                             <CompactStat
-                                label='Auto-Mod Actions'
+                                label={t('dashboardOverview.autoModActions')}
                                 value={stats?.casesByType?.warn || 0}
                                 icon={<ShieldAlert className='h-3.5 w-3.5' />}
                                 tone='warning'
@@ -365,17 +375,17 @@ export default function DashboardOverview() {
                     <div className='flex items-center justify-between border-b border-lucky-border px-4 py-3'>
                         <div>
                             <h2 className='type-title text-lucky-text-primary uppercase tracking-wide'>
-                                Recent Cases
+                                {t('dashboardOverview.recentCases')}
                             </h2>
                             <p className='type-body-sm text-lucky-text-tertiary'>
-                                Latest moderation actions
+                                {t('dashboardOverview.latestModerationActions')}
                             </p>
                         </div>
                         <Link
                             to='/moderation'
                             className='type-body-sm inline-flex items-center gap-1 text-lucky-brand transition-colors hover:text-lucky-brand-strong'
                         >
-                            View all
+                            {t('dashboardOverview.viewAll')}
                             <ArrowRight className='h-3.5 w-3.5' />
                         </Link>
                     </div>
@@ -407,11 +417,12 @@ export default function DashboardOverview() {
                             <div className='px-4 py-10 text-center'>
                                 <Shield className='mx-auto mb-3 h-10 w-10 text-lucky-text-tertiary' />
                                 <p className='type-body text-lucky-text-secondary'>
-                                    No moderation cases yet
+                                    {t('dashboardOverview.noModerationCases')}
                                 </p>
                                 <p className='type-body-sm text-lucky-text-tertiary'>
-                                    Cases will appear here when moderators take
-                                    action
+                                    {t(
+                                        'dashboardOverview.casesCasesWillAppear',
+                                    )}
                                 </p>
                             </div>
                         )}
@@ -434,7 +445,7 @@ export default function DashboardOverview() {
                         id='quick-actions-heading'
                         className='type-title text-lucky-text-primary'
                     >
-                        Quick Actions
+                        {t('dashboardOverview.quickActions')}
                     </h2>
                     <nav className='surface-panel divide-y divide-lucky-border/40 overflow-hidden border border-lucky-border'>
                         {visibleQuickActions.map((action) => (
@@ -482,17 +493,17 @@ export default function DashboardOverview() {
                     <div className='flex items-center justify-between border-b border-lucky-border px-4 py-3'>
                         <div>
                             <h2 className='type-title text-lucky-text-primary'>
-                                Recent Music
+                                {t('dashboardOverview.recentMusic')}
                             </h2>
                             <p className='type-body-sm text-lucky-text-tertiary'>
-                                Latest tracks played
+                                {t('dashboardOverview.latestTracksPlayed')}
                             </p>
                         </div>
                         <Link
                             to='/music/history'
                             className='type-body-sm inline-flex items-center gap-1 text-lucky-brand transition-colors hover:text-lucky-brand-strong'
                         >
-                            View all
+                            {t('dashboardOverview.viewAll')}
                             <ArrowRight className='h-3.5 w-3.5' />
                         </Link>
                     </div>
@@ -550,11 +561,12 @@ export default function DashboardOverview() {
                             <div className='px-4 py-10 text-center'>
                                 <Music className='mx-auto mb-3 h-10 w-10 text-lucky-text-tertiary' />
                                 <p className='type-body text-lucky-text-secondary'>
-                                    No tracks played yet
+                                    {t('dashboardOverview.noTracksPlayedYet')}
                                 </p>
                                 <p className='type-body-sm text-lucky-text-tertiary'>
-                                    Track history will appear here when music is
-                                    played
+                                    {t(
+                                        'dashboardOverview.trackHistoryWillAppearWhenMusicPlayed',
+                                    )}
                                 </p>
                             </div>
                         )}
@@ -575,16 +587,16 @@ export default function DashboardOverview() {
                     }}
                 >
                     <h2 className='type-title text-lucky-text-primary'>
-                        Community
+                        {t('dashboardOverview.community')}
                     </h2>
                     <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
                         <div className='surface-panel overflow-hidden border border-lucky-border'>
                             <div className='border-b border-lucky-border px-4 py-3'>
                                 <h3 className='type-body-sm font-semibold text-lucky-text-primary uppercase tracking-wide'>
-                                    Level Leaderboard
+                                    {t('dashboardOverview.levelLeaderboard')}
                                 </h3>
                                 <p className='type-body-sm text-lucky-text-tertiary'>
-                                    Top members by XP
+                                    {t('dashboardOverview.topMembersByXP')}
                                 </p>
                             </div>
 
@@ -637,7 +649,9 @@ export default function DashboardOverview() {
                                     <div className='px-4 py-8 text-center'>
                                         <TrendingUp className='mx-auto mb-2 h-8 w-8 text-lucky-text-tertiary' />
                                         <p className='type-body-sm text-lucky-text-secondary'>
-                                            No leaderboard data
+                                            {t(
+                                                'dashboardOverview.noLeaderboardData',
+                                            )}
                                         </p>
                                     </div>
                                 )}
@@ -647,10 +661,10 @@ export default function DashboardOverview() {
                         <div className='surface-panel overflow-hidden border border-lucky-border'>
                             <div className='border-b border-lucky-border px-4 py-3'>
                                 <h3 className='type-body-sm font-semibold text-lucky-text-primary uppercase tracking-wide'>
-                                    Starboard Highlights
+                                    {t('dashboardOverview.starboardHighlights')}
                                 </h3>
                                 <p className='type-body-sm text-lucky-text-tertiary'>
-                                    Top starred messages
+                                    {t('dashboardOverview.topStarredMessages')}
                                 </p>
                             </div>
 
@@ -704,7 +718,9 @@ export default function DashboardOverview() {
                                     <div className='px-4 py-8 text-center'>
                                         <Star className='mx-auto mb-2 h-8 w-8 text-lucky-text-tertiary' />
                                         <p className='type-body-sm text-lucky-text-secondary'>
-                                            No starred messages
+                                            {t(
+                                                'dashboardOverview.noStarredMessages',
+                                            )}
                                         </p>
                                     </div>
                                 )}
@@ -717,7 +733,7 @@ export default function DashboardOverview() {
             {Object.keys(stats?.casesByType ?? {}).length > 0 && (
                 <section className='space-y-4'>
                     <h2 className='type-title text-lucky-text-primary'>
-                        Cases by Type
+                        {t('dashboardOverview.casesByType')}
                     </h2>
                     <div className='grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6'>
                         {Object.entries(stats?.casesByType ?? {}).map(
diff --git a/packages/frontend/src/pages/EmbedBuilder.tsx b/packages/frontend/src/pages/EmbedBuilder.tsx
index d77de8859..ebe2a023d 100644
--- a/packages/frontend/src/pages/EmbedBuilder.tsx
+++ b/packages/frontend/src/pages/EmbedBuilder.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Layers, Pencil, Plus, Trash2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import Button from '@/components/ui/Button'
 import Card from '@/components/ui/Card'
 import EmptyState from '@/components/ui/EmptyState'
@@ -99,6 +100,7 @@ function FieldEditor({
     fields: EmbedField[]
     onChange: (fields: EmbedField[]) => void
 }) {
+    const { t } = useTranslation()
     const addField = () =>
         onChange([...fields, { name: '', value: '', inline: false }])
 
@@ -115,10 +117,12 @@ function FieldEditor({
     return (
         <div className='space-y-3'>
             <div className='flex items-center justify-between'>
-                <p className='type-body-sm text-lucky-text-secondary'>Fields</p>
+                <p className='type-body-sm text-lucky-text-secondary'>
+                    {t('embedBuilder.fields')}
+                </p>
                 <Button variant='secondary' size='sm' onClick={addField}>
                     <Plus className='h-3 w-3 mr-1' />
-                    Add Field
+                    {t('embedBuilder.addField')}
                 </Button>
             </div>
             {fields.map((field, i) => (
@@ -126,7 +130,7 @@ function FieldEditor({
                     <div className='flex gap-2'>
                         <Input
                             type='text'
-                            placeholder='Field name'
+                            placeholder={t('embedBuilder.fieldName')}
                             value={field.name}
                             onChange={(e) =>
                                 updateField(i, { name: e.target.value })
@@ -136,13 +140,15 @@ function FieldEditor({
                         <button
                             onClick={() => removeField(i)}
                             className='min-h-[44px] min-w-[44px] flex items-center justify-center text-lucky-text-secondary hover:text-red-400 rounded transition-colors'
-                            aria-label={`Remove field ${i + 1}`}
+                            aria-label={t('embedBuilder.removeFieldAriaLabel', {
+                                index: i + 1,
+                            })}
                         >
                             <Trash2 className='h-4 w-4' />
                         </button>
                     </div>
                     <textarea
-                        placeholder='Field value'
+                        placeholder={t('embedBuilder.fieldValue')}
                         value={field.value}
                         onChange={(e) =>
                             updateField(i, { value: e.target.value })
@@ -159,7 +165,7 @@ function FieldEditor({
                             }
                             className='rounded'
                         />
-                        Inline
+                        {t('embedBuilder.inline')}
                     </Label>
                 </div>
             ))}
@@ -176,6 +182,7 @@ function EmbedFormModal({
     onClose: () => void
     onSave: (form: FormState) => Promise<void>
 }) {
+    const { t } = useTranslation()
     const isEdit = template !== null
     const [form, setForm] = useState<FormState>(() => {
         if (!template) return DEFAULT_FORM
@@ -228,10 +235,12 @@ function EmbedFormModal({
             >
                 <div className='flex items-center justify-between p-5 border-b border-lucky-border'>
                     <h2 className='type-title text-lucky-text-primary'>
-                        {isEdit ? 'Edit Embed Template' : 'New Embed Template'}
+                        {isEdit
+                            ? t('embedBuilder.editEmbedTemplate')
+                            : t('embedBuilder.newEmbedTemplate')}
                     </h2>
                     <Button variant='secondary' size='sm' onClick={onClose}>
-                        Cancel
+                        {t('embedBuilder.cancel')}
                     </Button>
                 </div>
 
@@ -246,20 +255,22 @@ function EmbedFormModal({
                         <div className='grid grid-cols-2 gap-4'>
                             <div className='space-y-1.5'>
                                 <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                                    Template Name *
+                                    {t('embedBuilder.templateName')}
                                 </Label>
                                 <Input
                                     type='text'
                                     value={form.name}
                                     onChange={set('name')}
                                     disabled={isEdit}
-                                    placeholder='e.g. welcome-message'
+                                    placeholder={t(
+                                        'embedBuilder.templateNamePlaceholder',
+                                    )}
                                     className='bg-lucky-bg-tertiary border-lucky-border'
                                 />
                             </div>
                             <div className='space-y-1.5'>
                                 <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                                    Color
+                                    {t('embedBuilder.color')}
                                 </Label>
                                 <div className='flex gap-2 items-center'>
                                     <input
@@ -272,7 +283,9 @@ function EmbedFormModal({
                                         type='text'
                                         value={form.color}
                                         onChange={set('color')}
-                                        placeholder='#5865F2'
+                                        placeholder={t(
+                                            'embedBuilder.urlPlaceholder',
+                                        )}
                                         className='flex-1 bg-lucky-bg-tertiary border-lucky-border font-mono'
                                     />
                                 </div>
@@ -281,25 +294,27 @@ function EmbedFormModal({
 
                         <div className='space-y-1.5'>
                             <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-normal'>
-                                Title
+                                {t('embedBuilder.title')}
                             </Label>
                             <Input
                                 type='text'
                                 value={form.title}
                                 onChange={set('title')}
-                                placeholder='Embed title'
+                                placeholder={t('embedBuilder.titlePlaceholder')}
                                 className='bg-lucky-bg-tertiary border-lucky-border'
                             />
                         </div>
 
                         <div className='space-y-1.5'>
                             <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-normal'>
-                                Description
+                                {t('embedBuilder.description')}
                             </Label>
                             <textarea
                                 value={form.description}
                                 onChange={set('description')}
-                                placeholder='Embed description (supports markdown)'
+                                placeholder={t(
+                                    'embedBuilder.descriptionPlaceholder',
+                                )}
                                 rows={4}
                                 className='w-full bg-lucky-bg-tertiary border border-lucky-border rounded-md px-3 py-2 type-body-sm text-lucky-text-primary resize-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
                             />
@@ -308,25 +323,29 @@ function EmbedFormModal({
                         <div className='grid grid-cols-2 gap-4'>
                             <div className='space-y-1.5'>
                                 <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                                    Thumbnail URL
+                                    {t('embedBuilder.thumbnailUrl')}
                                 </Label>
                                 <Input
                                     type='url'
                                     value={form.thumbnail}
                                     onChange={set('thumbnail')}
-                                    placeholder='https://...'
+                                    placeholder={t(
+                                        'embedBuilder.urlPlaceholder',
+                                    )}
                                     className='bg-lucky-bg-tertiary border-lucky-border'
                                 />
                             </div>
                             <div className='space-y-1.5'>
                                 <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                                    Image URL
+                                    {t('embedBuilder.imageUrl')}
                                 </Label>
                                 <Input
                                     type='url'
                                     value={form.image}
                                     onChange={set('image')}
-                                    placeholder='https://...'
+                                    placeholder={t(
+                                        'embedBuilder.urlPlaceholder',
+                                    )}
                                     className='bg-lucky-bg-tertiary border-lucky-border'
                                 />
                             </div>
@@ -334,13 +353,15 @@ function EmbedFormModal({
 
                         <div className='space-y-1.5'>
                             <Label className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-normal'>
-                                Footer
+                                {t('embedBuilder.footer')}
                             </Label>
                             <Input
                                 type='text'
                                 value={form.footer}
                                 onChange={set('footer')}
-                                placeholder='Footer text'
+                                placeholder={t(
+                                    'embedBuilder.footerPlaceholder',
+                                )}
                                 className='bg-lucky-bg-tertiary border-lucky-border'
                             />
                         </div>
@@ -355,7 +376,7 @@ function EmbedFormModal({
 
                     <div className='w-80 border-l border-lucky-border p-5 space-y-3 overflow-y-auto bg-lucky-bg-primary/30'>
                         <p className='type-meta text-lucky-text-tertiary uppercase tracking-wide'>
-                            Preview
+                            {t('embedBuilder.preview')}
                         </p>
                         {form.title ||
                         form.description ||
@@ -363,7 +384,7 @@ function EmbedFormModal({
                             <EmbedPreview form={form} />
                         ) : (
                             <p className='type-body-sm text-lucky-text-tertiary'>
-                                Fill in the fields to see a preview
+                                {t('embedBuilder.fillFieldsToSeePreview')}
                             </p>
                         )}
                     </div>
@@ -371,14 +392,14 @@ function EmbedFormModal({
 
                 <div className='flex justify-end gap-3 p-5 border-t border-lucky-border'>
                     <Button variant='secondary' onClick={onClose}>
-                        Cancel
+                        {t('embedBuilder.cancel')}
                     </Button>
                     <Button onClick={handleSave} disabled={saving}>
                         {saving
-                            ? 'Saving...'
+                            ? t('embedBuilder.saving')
                             : isEdit
-                              ? 'Save Changes'
-                              : 'Create Template'}
+                              ? t('embedBuilder.saveChanges')
+                              : t('embedBuilder.createTemplate')}
                     </Button>
                 </div>
             </motion.div>
@@ -387,6 +408,7 @@ function EmbedFormModal({
 }
 
 export default function EmbedBuilder() {
+    const { t } = useTranslation()
     const { selectedGuild } = useGuildStore()
     const [templates, setTemplates] = useState<EmbedTemplate[]>([])
     const [loading, setLoading] = useState(true)
@@ -455,12 +477,12 @@ export default function EmbedBuilder() {
         <div className='space-y-6'>
             <div className='flex items-center justify-between'>
                 <SectionHeader
-                    title='Embed Builder'
-                    description='Create and manage reusable Discord embed templates'
+                    title={t('embedBuilder.pageTitle')}
+                    description={t('embedBuilder.pageDescription')}
                 />
                 <Button onClick={() => setModalTemplate(null)}>
                     <Plus className='h-4 w-4 mr-2' />
-                    New Template
+                    {t('embedBuilder.newTemplate')}
                 </Button>
             </div>
 
@@ -473,12 +495,12 @@ export default function EmbedBuilder() {
             ) : templates.length === 0 ? (
                 <EmptyState
                     icon={<Layers className='h-10 w-10' />}
-                    title='No embed templates'
-                    description='Create your first embed template to use in bot commands'
+                    title={t('embedBuilder.noEmbedTemplates')}
+                    description={t('embedBuilder.createFirstEmbedTemplate')}
                     action={
                         <Button onClick={() => setModalTemplate(null)}>
                             <Plus className='h-4 w-4 mr-2' />
-                            Create Template
+                            {t('embedBuilder.createTemplate')}
                         </Button>
                     }
                 />
@@ -516,7 +538,10 @@ export default function EmbedBuilder() {
                                                     setModalTemplate(template)
                                                 }
                                                 className='flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-lucky-text-secondary hover:text-lucky-brand hover:bg-lucky-bg-active/50 transition-colors'
-                                                aria-label={`Edit ${template.name}`}
+                                                aria-label={t(
+                                                    'embedBuilder.editAriaLabel',
+                                                    { name: template.name },
+                                                )}
                                             >
                                                 <Pencil className='h-4 w-4' />
                                             </button>
@@ -527,7 +552,10 @@ export default function EmbedBuilder() {
                                                     )
                                                 }
                                                 className='flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-lucky-text-secondary hover:text-red-400 hover:bg-red-500/10 transition-colors'
-                                                aria-label={`Delete ${template.name}`}
+                                                aria-label={t(
+                                                    'embedBuilder.deleteAriaLabel',
+                                                    { name: template.name },
+                                                )}
                                             >
                                                 <Trash2 className='h-4 w-4' />
                                             </button>
@@ -547,17 +575,20 @@ export default function EmbedBuilder() {
 
                                     <div className='mt-auto pt-2 flex items-center justify-between type-meta text-lucky-text-tertiary'>
                                         <span>
-                                            Used {template.useCount ?? 0}×
+                                            {t('embedBuilder.used', {
+                                                count: template.useCount ?? 0,
+                                            })}
                                         </span>
                                         {Array.isArray(template.fields) &&
                                             template.fields.length > 0 && (
                                                 <span>
                                                     {template.fields.length}{' '}
-                                                    field
-                                                    {template.fields.length !==
-                                                    1
-                                                        ? 's'
-                                                        : ''}
+                                                    {t(
+                                                        template.fields
+                                                            .length === 1
+                                                            ? 'embedBuilder.field'
+                                                            : 'embedBuilder.fields_plural',
+                                                    )}
                                                 </span>
                                             )}
                                     </div>
@@ -590,21 +621,19 @@ export default function EmbedBuilder() {
                             className='surface-card rounded-xl p-6 max-w-sm w-full space-y-4'
                         >
                             <h3 className='type-title text-lucky-text-primary'>
-                                Delete Template
+                                {t('embedBuilder.deleteTemplate')}
                             </h3>
                             <p className='type-body-sm text-lucky-text-secondary'>
-                                Delete{' '}
-                                <span className='font-mono text-lucky-brand'>
-                                    "{deleteTarget}"
-                                </span>
-                                ? This cannot be undone.
+                                {t('embedBuilder.deleteTemplateConfirm', {
+                                    name: deleteTarget,
+                                })}
                             </p>
                             <div className='flex gap-3 justify-end'>
                                 <Button
                                     variant='secondary'
                                     onClick={() => setDeleteTarget(null)}
                                 >
-                                    Cancel
+                                    {t('embedBuilder.cancel')}
                                 </Button>
                                 <Button
                                     variant='destructive'
@@ -612,7 +641,7 @@ export default function EmbedBuilder() {
                                         void handleDelete(deleteTarget)
                                     }
                                 >
-                                    Delete
+                                    {t('embedBuilder.delete')}
                                 </Button>
                             </div>
                         </motion.div>
diff --git a/packages/frontend/src/pages/GuildAutomation.tsx b/packages/frontend/src/pages/GuildAutomation.tsx
index 6e4a9421a..cc8388d03 100644
--- a/packages/frontend/src/pages/GuildAutomation.tsx
+++ b/packages/frontend/src/pages/GuildAutomation.tsx
@@ -13,6 +13,7 @@ import {
     Loader2,
     Zap,
 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { useGuildStore } from '@/stores/guildStore'
 import { api } from '@/services/api'
 import Button from '@/components/ui/Button'
@@ -200,6 +201,7 @@ function ApplyResultView({ result }: { result: ApplyResult }) {
 }
 
 export default function GuildAutomation() {
+    const { t } = useTranslation('guildAutomation')
     const { selectedGuild } = useGuildStore()
     const [status, setStatus] = useState<string | null>(null)
     const [runs, setRuns] = useState<AutomationRun[]>([])
@@ -257,9 +259,7 @@ export default function GuildAutomation() {
         try {
             parsed = JSON.parse(manifestJson) as GuildAutomationManifest
         } catch {
-            setManifestError(
-                'Invalid JSON — please fix syntax errors before saving.',
-            )
+            setManifestError(t('invalidJsonError'))
             return
         }
         setActionLoading('save')
@@ -332,8 +332,8 @@ export default function GuildAutomation() {
         return (
             <EmptyState
                 icon={<GitBranch className='h-10 w-10' />}
-                title='No server selected'
-                description='Select a server to manage Guild Automation.'
+                title={t('noServerSelected')}
+                description={t('selectServerToManage')}
             />
         )
     }
@@ -341,22 +341,21 @@ export default function GuildAutomation() {
     return (
         <div className='space-y-6 p-6'>
             <SectionHeader
-                title='Guild Automation'
-                description='Manage your guild configuration as code — plan, apply, and track changes.'
+                title={t('pageTitle')}
+                description={t('pageDescription')}
             />
 
             {loadError && !loading && (
                 <div className='surface-panel rounded-lg border border-lucky-error/40 p-4 flex items-center justify-between gap-4'>
                     <p className='text-sm text-lucky-error'>
-                        Couldn&apos;t load automation status or manifest — the
-                        API may be unavailable.
+                        {t('loadErrorMessage')}
                     </p>
                     <Button
                         variant='secondary'
                         onClick={() => void fetchData()}
                         disabled={loading}
                     >
-                        Retry
+                        {t('retry')}
                     </Button>
                 </div>
             )}
@@ -366,7 +365,7 @@ export default function GuildAutomation() {
                 <div className='flex items-center justify-between'>
                     <div className='flex items-center gap-3'>
                         <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                            Automation Status
+                            {t('automationStatus')}
                         </h2>
                         {loading ? (
                             <Skeleton className='h-5 w-20 rounded' />
@@ -386,7 +385,7 @@ export default function GuildAutomation() {
                         onClick={() => void fetchData()}
                         disabled={loading}
                         className='text-lucky-text-muted hover:text-lucky-text-body disabled:opacity-40 transition-colors'
-                        title='Refresh status'
+                        title={t('refreshStatusTitle')}
                     >
                         <RefreshCw
                             className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`}
@@ -406,7 +405,7 @@ export default function GuildAutomation() {
                         ) : (
                             <GitBranch className='h-3 w-3' />
                         )}
-                        Plan
+                        {t('plan')}
                     </Button>
                     <Button
                         variant='primary'
@@ -419,7 +418,7 @@ export default function GuildAutomation() {
                         ) : (
                             <Play className='h-3 w-3' />
                         )}
-                        Record Plan
+                        {t('recordPlan')}
                     </Button>
                     <Button
                         variant='secondary'
@@ -432,7 +431,7 @@ export default function GuildAutomation() {
                         ) : (
                             <RefreshCw className='h-3 w-3' />
                         )}
-                        Reconcile
+                        {t('reconcile')}
                     </Button>
                 </div>
             </div>
@@ -443,7 +442,7 @@ export default function GuildAutomation() {
                     <div className='flex items-center gap-2'>
                         <GitBranch className='h-4 w-4 text-lucky-brand' />
                         <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                            Plan Result
+                            {t('planResult')}
                         </h2>
                     </div>
                     <div className='border-t border-lucky-border' />
@@ -455,7 +454,7 @@ export default function GuildAutomation() {
                     <div className='flex items-center gap-2'>
                         <Zap className='h-4 w-4 text-lucky-accent' />
                         <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                            Plan Record
+                            {t('planRecord')}
                         </h2>
                     </div>
                     <div className='border-t border-lucky-border' />
@@ -473,7 +472,7 @@ export default function GuildAutomation() {
                     <div className='flex items-center gap-2'>
                         <FileJson className='h-4 w-4 text-lucky-brand' />
                         <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                            Manifest
+                            {t('manifest')}
                         </h2>
                         {manifest?.version && (
                             <Badge className='text-xs border bg-lucky-bg-active/60 text-lucky-text-muted border-lucky-border'>
@@ -498,8 +497,7 @@ export default function GuildAutomation() {
                                     {!manifest && (
                                         <p className='text-sm text-lucky-text-muted flex items-center gap-2'>
                                             <AlertTriangle className='h-4 w-4 text-yellow-400' />
-                                            No manifest found. Paste or write a
-                                            manifest below to get started.
+                                            {t('noManifestFound')}
                                         </p>
                                     )}
                                     <textarea
@@ -510,7 +508,7 @@ export default function GuildAutomation() {
                                         rows={16}
                                         spellCheck={false}
                                         className='w-full rounded-lg bg-lucky-bg-primary/80 border border-lucky-border text-lucky-text-body font-mono text-xs p-3 resize-y focus:outline-none focus:border-lucky-brand transition-colors'
-                                        placeholder='{ "guildId": "...", "version": "1", "roles": {}, "channels": {} }'
+                                        placeholder={t('manifestPlaceholder')}
                                     />
                                     {manifestError && (
                                         <p className='text-xs text-red-400 flex items-center gap-1'>
@@ -530,7 +528,7 @@ export default function GuildAutomation() {
                                             {actionLoading === 'save' ? (
                                                 <Loader2 className='h-3 w-3 animate-spin' />
                                             ) : null}
-                                            Save Manifest
+                                            {t('saveManifest')}
                                         </Button>
                                     </div>
                                 </>
@@ -542,7 +540,7 @@ export default function GuildAutomation() {
 
             {/* Run History */}
             <div className='space-y-3'>
-                <SectionHeader title='Run History' />
+                <SectionHeader title={t('runHistory')} />
                 {loading ? (
                     <div className='space-y-2'>
                         {Array.from({ length: 3 }).map((_, i) => (
@@ -555,8 +553,8 @@ export default function GuildAutomation() {
                 ) : runs.length === 0 ? (
                     <EmptyState
                         icon={<Clock className='h-8 w-8' />}
-                        title='No runs yet'
-                        description='Run a plan or apply to see results here.'
+                        title={t('noRunsYet')}
+                        description={t('runPlanOrApply')}
                     />
                 ) : (
                     <div className='space-y-2'>
diff --git a/packages/frontend/src/pages/LastFm.tsx b/packages/frontend/src/pages/LastFm.tsx
index 0cb1cad66..52cf576ae 100644
--- a/packages/frontend/src/pages/LastFm.tsx
+++ b/packages/frontend/src/pages/LastFm.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Check, ExternalLink, Link2, Loader2, Music, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { api } from '@/services/api'
 import SectionHeader from '@/components/ui/SectionHeader'
 
@@ -10,6 +11,7 @@ interface LastFmStatus {
 }
 
 export default function LastFmPage() {
+    const { t } = useTranslation('lastFm')
     const [status, setStatus] = useState<LastFmStatus | null>(null)
     const [isLoading, setIsLoading] = useState(true)
     const [error, setError] = useState<string | null>(null)
@@ -23,7 +25,7 @@ export default function LastFmPage() {
             const response = await api.lastfm.status()
             setStatus(response.data)
         } catch {
-            setError('Failed to load Last.fm status')
+            setError(t('failedToLoadStatus'))
         } finally {
             setIsLoading(false)
         }
@@ -38,7 +40,7 @@ export default function LastFmPage() {
     }
 
     const handleUnlink = async () => {
-        if (!confirm('Disconnect your Last.fm account?')) return
+        if (!confirm(t('disconnectConfirm'))) return
 
         setIsUnlinking(true)
 
@@ -50,7 +52,7 @@ export default function LastFmPage() {
                     : previous,
             )
         } catch {
-            setError('Failed to unlink account')
+            setError(t('failedToUnlink'))
         } finally {
             setIsUnlinking(false)
         }
@@ -60,9 +62,9 @@ export default function LastFmPage() {
         return (
             <div className='space-y-6'>
                 <SectionHeader
-                    eyebrow='Music identity'
-                    title='Last.fm'
-                    description='Scrobble tracks you play to your Last.fm profile'
+                    eyebrow={t('musicIdentityEyebrow')}
+                    title={t('pageTitle')}
+                    description={t('pageDescription')}
                     actions={<Music className='h-5 w-5 text-lucky-accent' />}
                 />
                 <div className='surface-panel space-y-4 p-8'>
@@ -77,9 +79,9 @@ export default function LastFmPage() {
     return (
         <div className='space-y-6'>
             <SectionHeader
-                eyebrow='Music identity'
-                title='Last.fm'
-                description='Scrobble tracks you play to your Last.fm profile'
+                eyebrow={t('musicIdentityEyebrow')}
+                title={t('pageTitle')}
+                description={t('pageDescription')}
                 actions={<Music className='h-5 w-5 text-lucky-accent' />}
             />
 
@@ -102,18 +104,17 @@ export default function LastFmPage() {
                         </div>
                         <div className='flex-1'>
                             <h2 className='type-h2 text-lucky-text-primary'>
-                                Not Configured
+                                {t('notConfigured')}
                             </h2>
                             <p className='type-body-sm text-lucky-text-secondary mt-2'>
-                                Last.fm integration is not configured. Ask the
-                                server owner to set:
+                                {t('lastFmNotConfigured')}
                             </p>
                             <div className='mt-3 space-y-2 text-xs'>
                                 <code className='block rounded bg-lucky-bg-active px-2 py-1 text-lucky-text-body font-600'>
-                                    LASTFM_API_KEY
+                                    {t('lastFmApiKey')}
                                 </code>
                                 <code className='block rounded bg-lucky-bg-active px-2 py-1 text-lucky-text-body font-600'>
-                                    LASTFM_API_SECRET
+                                    {t('lastFmApiSecret')}
                                 </code>
                             </div>
                         </div>
@@ -127,10 +128,10 @@ export default function LastFmPage() {
                         </div>
                         <div className='flex-1'>
                             <h2 className='type-h2 text-lucky-text-primary'>
-                                Connected
+                                {t('connected')}
                             </h2>
                             <p className='type-body-sm text-lucky-text-secondary mt-1'>
-                                Linked as{' '}
+                                {t('linkedAs')}{' '}
                                 <a
                                     href={`https://www.last.fm/user/${status.username}`}
                                     target='_blank'
@@ -143,13 +144,12 @@ export default function LastFmPage() {
                             </p>
                         </div>
                         <div className='rounded-full bg-lucky-success/15 px-3 py-1 text-xs font-600 text-lucky-success'>
-                            Active
+                            {t('active')}
                         </div>
                     </div>
 
                     <p className='type-body-sm text-lucky-text-secondary border-t border-lucky-border/20 pt-4'>
-                        Tracks you request via the bot will be scrobbled to your
-                        Last.fm profile automatically.
+                        {t('connectionDescription')}
                     </p>
 
                     <button
@@ -162,18 +162,17 @@ export default function LastFmPage() {
                         ) : (
                             <X className='h-4 w-4' />
                         )}
-                        Disconnect
+                        {t('disconnect')}
                     </button>
                 </section>
             ) : (
                 <section className='surface-panel space-y-6 rounded-lg border border-lucky-border p-8'>
                     <div>
                         <h2 className='type-h2 text-lucky-text-primary'>
-                            Connect Your Account
+                            {t('connectYourAccount')}
                         </h2>
                         <p className='type-body-sm text-lucky-text-secondary mt-2'>
-                            Link your Last.fm account so tracks you play through
-                            the bot are automatically scrobbled to your profile.
+                            {t('connectAccountDescription')}
                         </p>
                     </div>
 
@@ -182,7 +181,7 @@ export default function LastFmPage() {
                         className='inline-flex items-center gap-2 rounded-lg bg-lucky-accent px-6 py-3 type-body-sm font-600 text-white transition-all hover:bg-lucky-accent-soft active:scale-95 lucky-focus-visible'
                     >
                         <Link2 className='h-4 w-4' />
-                        Connect with Last.fm
+                        {t('connectWithLastFm')}
                     </button>
                 </section>
             )}
@@ -193,11 +192,10 @@ export default function LastFmPage() {
                         <Music className='mt-1 h-5 w-5 text-lucky-accent flex-shrink-0' />
                         <div className='flex-1'>
                             <h3 className='type-title text-lucky-text-primary'>
-                                Scrobble coverage
+                                {t('scrobbleCoverage')}
                             </h3>
                             <p className='type-body-sm text-lucky-text-secondary mt-2'>
-                                Lucky tracks requested songs and forwards play
-                                activity once linked.
+                                {t('scrobbleCoverageDescription')}
                             </p>
                         </div>
                     </div>
@@ -208,11 +206,10 @@ export default function LastFmPage() {
                         <Link2 className='mt-1 h-5 w-5 text-lucky-text-tertiary flex-shrink-0' />
                         <div className='flex-1'>
                             <h3 className='type-title text-lucky-text-primary'>
-                                Privacy control
+                                {t('privacyControl')}
                             </h3>
                             <p className='type-body-sm text-lucky-text-secondary mt-2'>
-                                Disconnect anytime without affecting server
-                                playback.
+                                {t('privacyControlDescription')}
                             </p>
                         </div>
                     </div>
@@ -221,24 +218,21 @@ export default function LastFmPage() {
 
             <section className='surface-panel space-y-4 rounded-lg border border-lucky-border p-8'>
                 <h3 className='type-title text-lucky-text-primary'>
-                    How it works
+                    {t('howItWorks')}
                 </h3>
                 <ol className='space-y-3 text-sm'>
-                    {[
-                        'Connect your Last.fm account above',
-                        'Play music in a voice channel using the bot',
-                        'Tracks are automatically scrobbled to your profile',
-                        'External music bots (Rythm, Groovy, etc.) are also detected',
-                    ].map((step, i) => (
-                        <li key={i} className='flex items-start gap-3'>
-                            <span className='mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-lucky-accent/20 text-xs font-600 text-lucky-accent flex-shrink-0'>
-                                {i + 1}
-                            </span>
-                            <span className='type-body-sm text-lucky-text-secondary'>
-                                {step}
-                            </span>
-                        </li>
-                    ))}
+                    {[t('step1'), t('step2'), t('step3'), t('step4')].map(
+                        (step, i) => (
+                            <li key={i} className='flex items-start gap-3'>
+                                <span className='mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-lucky-accent/20 text-xs font-600 text-lucky-accent flex-shrink-0'>
+                                    {i + 1}
+                                </span>
+                                <span className='type-body-sm text-lucky-text-secondary'>
+                                    {step}
+                                </span>
+                            </li>
+                        ),
+                    )}
                 </ol>
             </section>
         </div>
diff --git a/packages/frontend/src/pages/Levels.tsx b/packages/frontend/src/pages/Levels.tsx
index 1f5e0332c..14d1b0189 100644
--- a/packages/frontend/src/pages/Levels.tsx
+++ b/packages/frontend/src/pages/Levels.tsx
@@ -1,5 +1,6 @@
 import { reportError } from '@/lib/sentry'
 import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import Card from '@/components/ui/Card'
 import Button from '@/components/ui/Button'
 import { Input } from '@/components/ui/input'
@@ -15,6 +16,7 @@ import type { MemberXP, LevelReward } from '@/services/levelsApi'
 import type { GuildRoleOption } from '@/types'
 
 function Levels() {
+    const { t } = useTranslation()
     const { selectedGuild } = useGuildStore()
     const [loading, setLoading] = useState(true)
     const [leaderboard, setLeaderboard] = useState<MemberXP[]>([])
@@ -83,7 +85,7 @@ function Levels() {
                         component: 'Levels',
                         action: 'loadData',
                     })
-                    toast.error('Failed to load level settings')
+                    toast.error(t('levels.failedToLoadSettings'))
                 }
             } finally {
                 if (mounted) setLoading(false)
@@ -107,7 +109,7 @@ function Levels() {
                 xpCooldownMs,
                 announceChannel: announceChannel || null,
             })
-            toast.success('Level settings saved')
+            toast.success(t('levels.levelSettingsSaved'))
         } catch (error) {
             reportError('Failed to save level settings:', error, {
                 component: 'Levels',
@@ -134,13 +136,13 @@ function Levels() {
             setRewards([...rewards, reward])
             setNewLevel('')
             setNewRoleId('')
-            toast.success(`Reward added for level ${levelNum}`)
+            toast.success(t('levels.rewardAdded', { level: levelNum }))
         } catch (error) {
             reportError('Failed to add level reward:', error, {
                 component: 'Levels',
                 action: 'addReward',
             })
-            toast.error('Failed to add reward')
+            toast.error(t('levels.failedToAddReward'))
         } finally {
             setAdding(false)
         }
@@ -152,13 +154,13 @@ function Levels() {
         try {
             await api.levels.removeReward(selectedGuild.id, level)
             setRewards(rewards.filter((r) => r.level !== level))
-            toast.success('Reward removed')
+            toast.success(t('levels.rewardRemoved'))
         } catch (error) {
             reportError('Failed to remove level reward:', error, {
                 component: 'Levels',
                 action: 'removeReward',
             })
-            toast.error('Failed to remove reward')
+            toast.error(t('levels.failedToRemoveReward'))
         }
     }
 
@@ -167,10 +169,10 @@ function Levels() {
             <div className='flex flex-col items-center justify-center py-12'>
                 <div className='text-center'>
                     <p className='text-lg font-semibold text-lucky-text-primary mb-2'>
-                        No server selected
+                        {t('levels.noServerSelected')}
                     </p>
                     <p className='text-sm text-lucky-text-secondary'>
-                        Select a server to view level settings
+                        {t('levels.selectServerToView')}
                     </p>
                 </div>
             </div>
@@ -197,16 +199,15 @@ function Levels() {
             {/* Leaderboard */}
             <section>
                 <h2 className='type-title text-lucky-text-primary mb-4'>
-                    Leaderboard
+                    {t('levels.leaderboard')}
                 </h2>
                 {leaderboard.length === 0 ? (
                     <Card className='p-8 text-center border border-lucky-border'>
                         <p className='text-lg font-semibold text-lucky-text-primary mb-2'>
-                            No data yet
+                            {t('levels.noDataYet')}
                         </p>
                         <p className='text-sm text-lucky-text-secondary'>
-                            Members gain XP by chatting once the level system is
-                            enabled
+                            {t('levels.membersGainXp')}
                         </p>
                     </Card>
                 ) : (
@@ -223,12 +224,13 @@ function Levels() {
                                                 member.userId}
                                         </p>
                                         <p className='type-body-sm text-lucky-text-secondary'>
-                                            Level {member.level}
+                                            {t('levels.level')} {member.level}
                                         </p>
                                     </div>
                                     <div className='text-right'>
                                         <p className='type-body-sm font-semibold text-lucky-accent'>
-                                            {member.xp.toLocaleString()} XP
+                                            {member.xp.toLocaleString()}{' '}
+                                            {t('levels.xp')}
                                         </p>
                                     </div>
                                 </div>
@@ -242,13 +244,13 @@ function Levels() {
                 {/* Config Settings */}
                 <Card className='p-6 border border-lucky-border'>
                     <h3 className='type-body-sm font-semibold text-lucky-text-primary mb-4 uppercase tracking-wide'>
-                        Settings
+                        {t('levels.settings')}
                     </h3>
                     <div className='space-y-4'>
                         <div className='flex items-center justify-between'>
-                            <Label>Enable XP</Label>
+                            <Label>{t('levels.enableXp')}</Label>
                             <Switch
-                                aria-label='Enable XP'
+                                aria-label={t('levels.enableXp')}
                                 checked={enabled}
                                 onCheckedChange={setEnabled}
                             />
@@ -256,7 +258,7 @@ function Levels() {
 
                         <div>
                             <Label htmlFor='xpPerMsg' className='text-sm'>
-                                XP Per Message
+                                {t('levels.xpPerMessage')}
                             </Label>
                             <Input
                                 id='xpPerMsg'
@@ -275,7 +277,7 @@ function Levels() {
 
                         <div>
                             <Label htmlFor='cooldown' className='text-sm'>
-                                Cooldown (ms)
+                                {t('levels.cooldown')}
                             </Label>
                             <Input
                                 id='cooldown'
@@ -292,7 +294,7 @@ function Levels() {
 
                         <div>
                             <Label htmlFor='channel' className='text-sm'>
-                                Announce Channel
+                                {t('levels.announceChannel')}
                             </Label>
                             <Input
                                 id='channel'
@@ -301,7 +303,7 @@ function Levels() {
                                 onChange={(e) =>
                                     setAnnounceChannel(e.target.value)
                                 }
-                                placeholder='Channel ID (optional)'
+                                placeholder={t('levels.channelIdOptional')}
                                 className='mt-1.5'
                             />
                         </div>
@@ -311,7 +313,9 @@ function Levels() {
                             disabled={saving}
                             className='w-full'
                         >
-                            {saving ? 'Saving...' : 'Save Settings'}
+                            {saving
+                                ? t('levels.saving')
+                                : t('levels.saveSettings')}
                         </Button>
                     </div>
                 </Card>
@@ -319,20 +323,19 @@ function Levels() {
                 {/* Rewards */}
                 <Card className='p-6 border border-lucky-border'>
                     <h3 className='type-body-sm font-semibold text-lucky-text-primary mb-4 uppercase tracking-wide'>
-                        Level Rewards
+                        {t('levels.levelRewards')}
                     </h3>
 
                     {rolesError && (
                         <p className='text-sm text-lucky-error mb-4'>
-                            Couldn&apos;t load this server&apos;s roles — reward
-                            role names may show as raw IDs. Refresh to retry.
+                            {t('levels.couldNotLoadRoles')}
                         </p>
                     )}
 
                     <div className='space-y-3 mb-4'>
                         {rewards.length === 0 ? (
                             <p className='text-sm text-lucky-text-secondary'>
-                                No rewards configured
+                                {t('levels.noRewardsConfigured')}
                             </p>
                         ) : (
                             rewards.map((reward) => (
@@ -364,12 +367,12 @@ function Levels() {
                     <div className='space-y-3 pt-4 border-t border-lucky-border'>
                         <div>
                             <Label htmlFor='newLevel' className='text-sm'>
-                                Level
+                                {t('levels.levelLabel')}
                             </Label>
                             <Input
                                 id='newLevel'
                                 type='number'
-                                placeholder='e.g. 5'
+                                placeholder={t('levels.levelPlaceholder')}
                                 value={newLevel}
                                 onChange={(e) => setNewLevel(e.target.value)}
                                 className='mt-1.5'
@@ -378,12 +381,12 @@ function Levels() {
 
                         <div>
                             <Label htmlFor='newRole' className='text-sm'>
-                                Role ID
+                                {t('levels.roleIdLabel')}
                             </Label>
                             <Input
                                 id='newRole'
                                 type='text'
-                                placeholder='Role ID'
+                                placeholder={t('levels.roleIdPlaceholder')}
                                 value={newRoleId}
                                 onChange={(e) => setNewRoleId(e.target.value)}
                                 className='mt-1.5'
@@ -395,7 +398,9 @@ function Levels() {
                             disabled={adding || !newLevel || !newRoleId}
                             className='w-full'
                         >
-                            {adding ? 'Adding...' : 'Add Reward'}
+                            {adding
+                                ? t('levels.adding')
+                                : t('levels.addReward')}
                         </Button>
                     </div>
                 </Card>
diff --git a/packages/frontend/src/pages/Lyrics.tsx b/packages/frontend/src/pages/Lyrics.tsx
index 25563d87a..1375244a4 100644
--- a/packages/frontend/src/pages/Lyrics.tsx
+++ b/packages/frontend/src/pages/Lyrics.tsx
@@ -1,5 +1,6 @@
 import { useState, FormEvent } from 'react'
 import { MicVocal, Search } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { useGuildSelection } from '@/hooks/useGuildSelection'
 import { api } from '@/services/api'
 
@@ -10,6 +11,7 @@ interface LyricsResult {
 }
 
 export default function LyricsPage() {
+    const { t } = useTranslation('lyrics')
     const { selectedGuild } = useGuildSelection()
     const [title, setTitle] = useState('')
     const [artist, setArtist] = useState('')
@@ -34,7 +36,7 @@ export default function LyricsPage() {
             )
             setResult(response.data)
         } catch {
-            setError('Failed to fetch lyrics. Please try again.')
+            setError(t('failedToFetchLyrics'))
         } finally {
             setIsLoading(false)
         }
@@ -44,7 +46,7 @@ export default function LyricsPage() {
         return (
             <div className='flex flex-col items-center justify-center h-64 text-lucky-text-secondary'>
                 <MicVocal className='h-12 w-12 mb-4 opacity-50' />
-                <p className='text-lg'>Select a server to search lyrics</p>
+                <p className='text-lg'>{t('selectServerToSearch')}</p>
             </div>
         )
     }
@@ -54,7 +56,7 @@ export default function LyricsPage() {
             <header className='flex items-center gap-3'>
                 <MicVocal className='h-6 w-6 text-lucky-red' />
                 <h1 className='type-h2 text-lucky-text-primary'>
-                    Lyrics Search
+                    {t('lyricsSearch')}
                 </h1>
             </header>
 
@@ -67,14 +69,15 @@ export default function LyricsPage() {
                         htmlFor='title'
                         className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'
                     >
-                        Song Title <span className='text-lucky-red'>*</span>
+                        {t('songTitle')}{' '}
+                        <span className='text-lucky-red'>{t('required')}</span>
                     </label>
                     <input
                         id='title'
                         type='text'
                         value={title}
                         onChange={(e) => setTitle(e.target.value)}
-                        placeholder='Enter song title'
+                        placeholder={t('enterSongTitle')}
                         className='w-full px-3 py-2 rounded-lg bg-lucky-bg-active border border-lucky-border text-white placeholder:text-lucky-text-tertiary focus:outline-none focus:ring-2 focus:ring-lucky-red/50 transition-all'
                         required
                     />
@@ -85,14 +88,14 @@ export default function LyricsPage() {
                         htmlFor='artist'
                         className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'
                     >
-                        Artist (optional)
+                        {t('artist')}
                     </label>
                     <input
                         id='artist'
                         type='text'
                         value={artist}
                         onChange={(e) => setArtist(e.target.value)}
-                        placeholder='Enter artist name'
+                        placeholder={t('enterArtistName')}
                         className='w-full px-3 py-2 rounded-lg bg-lucky-bg-active border border-lucky-border text-white placeholder:text-lucky-text-tertiary focus:outline-none focus:ring-2 focus:ring-lucky-red/50 transition-all'
                     />
                 </div>
@@ -103,7 +106,7 @@ export default function LyricsPage() {
                     className='w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-lucky-red hover:bg-lucky-red/90 disabled:bg-lucky-red/50 disabled:cursor-not-allowed text-white font-medium transition-colors'
                 >
                     <Search className='w-4 h-4' />
-                    {isLoading ? 'Searching...' : 'Search'}
+                    {isLoading ? t('searching') : t('search')}
                 </button>
             </form>
 
@@ -126,13 +129,13 @@ export default function LyricsPage() {
 
             {!isLoading && !result && !error && hasSearched && (
                 <div className='text-center py-12 text-lucky-text-tertiary'>
-                    No lyrics found
+                    {t('noLyricsFound')}
                 </div>
             )}
 
             {!isLoading && !result && !error && !hasSearched && (
                 <div className='text-center py-12 text-lucky-text-tertiary'>
-                    Search for lyrics by entering a song title
+                    {t('searchForLyrics')}
                 </div>
             )}
 
diff --git a/packages/frontend/src/pages/Moderation.test.tsx b/packages/frontend/src/pages/Moderation.test.tsx
index 9715e1b8f..2a5540212 100644
--- a/packages/frontend/src/pages/Moderation.test.tsx
+++ b/packages/frontend/src/pages/Moderation.test.tsx
@@ -2,6 +2,8 @@ import { describe, test, expect, vi, beforeEach } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { MemoryRouter } from 'react-router-dom'
+import { I18nextProvider } from 'react-i18next'
+import i18n from 'i18next'
 import ModerationPage from './Moderation'
 import { api } from '@/services/api'
 import { useGuildStore } from '@/stores/guildStore'
@@ -9,6 +11,67 @@ import { useGuildStore } from '@/stores/guildStore'
 vi.mock('@/services/api')
 vi.mock('@/stores/guildStore')
 
+// Initialize i18n for testing
+i18n.init({
+    lng: 'en',
+    fallbackLng: 'en',
+    ns: ['moderation'],
+    defaultNS: 'moderation',
+    interpolation: {
+        escapeValue: false,
+    },
+    resources: {
+        en: {
+            moderation: {
+                noServerSelected: 'No Server Selected',
+                selectServerToViewCases:
+                    'Select a server to view moderation cases',
+                moderationCases: 'Moderation Cases',
+                manageWarningsAndBans:
+                    'Manage warnings, mutes, kicks, and bans',
+                totalCases: 'Total Cases',
+                activeCases: 'Active Cases',
+                warnings: 'Warnings',
+                bans: 'Bans',
+                searchByUserModeratorOrReason:
+                    'Search by user, moderator, or reason...',
+                allTypes: 'All types',
+                mutes: 'Mutes',
+                kicks: 'Kicks',
+                unbans: 'Unbans',
+                unmutes: 'Unmutes',
+                tableHeaderCase: '#',
+                tableHeaderUser: 'User',
+                tableHeaderModerator: 'Moderator',
+                tableHeaderType: 'Type',
+                tableHeaderStatus: 'Status',
+                tableHeaderDate: 'Date',
+                noCasesFound: 'No cases found',
+                tryAdjustingFilters: 'Try adjusting your filters',
+                moderationCasesWillAppearHere:
+                    'Moderation cases will appear here',
+                showingToOf: 'Showing {{from}} to {{to}} of {{total}}',
+                caseDetailTitle: 'Case #{{number}}',
+                caseUser: 'User',
+                caseModerator: 'Moderator',
+                caseAction: 'Action',
+                caseDate: 'Date',
+                caseReason: 'Reason',
+                caseDuration: 'Duration',
+                durationMinutes: 'Duration: {{minutes}} minutes',
+                noReasonProvided: 'No reason provided',
+                active: 'Active',
+                expired: 'Expired',
+                appealed: 'Appealed',
+                deactivateCase: 'Deactivate Case',
+                deactivating: 'Deactivating...',
+                caseDeactivated: 'Case deactivated',
+                failedToDeactivateCase: 'Failed to deactivate case',
+            },
+        },
+    },
+})
+
 const mockGuild = { id: '123', name: 'Test Server', botAdded: true }
 
 const mockCases = [
@@ -72,19 +135,25 @@ function mockGuildStore(guild: typeof mockGuild | null) {
 
 function renderPage() {
     return render(
-        <MemoryRouter>
-            <ModerationPage />
-        </MemoryRouter>,
+        <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+                <ModerationPage />
+            </MemoryRouter>
+        </I18nextProvider>,
     )
 }
 
 describe('ModerationPage', () => {
     beforeEach(() => {
         vi.clearAllMocks()
-        Object.defineProperty(globalThis.HTMLElement.prototype, 'scrollIntoView', {
-            configurable: true,
-            value: vi.fn(),
-        })
+        Object.defineProperty(
+            globalThis.HTMLElement.prototype,
+            'scrollIntoView',
+            {
+                configurable: true,
+                value: vi.fn(),
+            },
+        )
     })
 
     test('shows no server selected message when no guild selected', () => {
diff --git a/packages/frontend/src/pages/Moderation.tsx b/packages/frontend/src/pages/Moderation.tsx
index 1bbe9bbe9..bb11b6955 100644
--- a/packages/frontend/src/pages/Moderation.tsx
+++ b/packages/frontend/src/pages/Moderation.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
+import { useTranslation } from 'react-i18next'
 import {
     Shield,
     Search,
@@ -122,6 +123,7 @@ function CaseDetailPanel({
     onDeactivate: (caseId: string) => Promise<void>
     deactivating: boolean
 }) {
+    const { t } = useTranslation('moderation')
     if (!caseData) return null
     const style = ACTION_STYLES[caseData.type] || ACTION_STYLES.warn
     const ActionIcon = ACTION_ICONS[caseData.type] || Shield
@@ -170,7 +172,7 @@ function CaseDetailPanel({
                         <div className='flex-1 overflow-y-auto p-6 space-y-4'>
                             <div className='space-y-1'>
                                 <p className='type-meta text-lucky-text-tertiary'>
-                                    User
+                                    {t('caseUser')}
                                 </p>
                                 <p className='type-body text-lucky-text-primary'>
                                     {caseData.userName || caseData.userId}
@@ -179,7 +181,7 @@ function CaseDetailPanel({
 
                             <div className='space-y-1'>
                                 <p className='type-meta text-lucky-text-tertiary'>
-                                    Moderator
+                                    {t('caseModerator')}
                                 </p>
                                 <p className='type-body text-lucky-text-primary'>
                                     {caseData.moderatorName ||
@@ -189,7 +191,7 @@ function CaseDetailPanel({
 
                             <div className='space-y-1'>
                                 <p className='type-meta text-lucky-text-tertiary'>
-                                    Action
+                                    {t('caseAction')}
                                 </p>
                                 <Badge
                                     variant='outline'
@@ -206,7 +208,7 @@ function CaseDetailPanel({
 
                             <div className='space-y-1'>
                                 <p className='type-meta text-lucky-text-tertiary'>
-                                    Date
+                                    {t('caseDate')}
                                 </p>
                                 <p className='type-body-sm text-lucky-text-secondary'>
                                     {formatDate(caseData.createdAt)}
@@ -215,22 +217,24 @@ function CaseDetailPanel({
 
                             <div className='space-y-1 pt-2'>
                                 <p className='type-meta text-lucky-text-tertiary mb-2'>
-                                    Reason
+                                    {t('caseReason')}
                                 </p>
                                 <p className='type-body-sm text-lucky-text-secondary bg-lucky-bg-tertiary border border-lucky-border rounded-lg p-3'>
-                                    {caseData.reason || 'No reason provided'}
+                                    {caseData.reason || t('noReasonProvided')}
                                 </p>
                             </div>
 
                             {caseData.duration && (
                                 <div className='space-y-1'>
                                     <p className='type-meta text-lucky-text-tertiary'>
-                                        Duration
+                                        {t('caseDuration')}
                                     </p>
                                     <p className='type-body-sm text-lucky-text-secondary'>
-                                        Duration:{' '}
-                                        {Math.floor(caseData.duration / 60)}{' '}
-                                        minutes
+                                        {t('durationMinutes', {
+                                            minutes: Math.floor(
+                                                caseData.duration / 60,
+                                            ),
+                                        })}
                                     </p>
                                 </div>
                             )}
@@ -252,11 +256,13 @@ function CaseDetailPanel({
                                                 : 'bg-lucky-text-disabled',
                                         )}
                                     />
-                                    {caseData.active ? 'Active' : 'Expired'}
+                                    {caseData.active
+                                        ? t('active')
+                                        : t('expired')}
                                 </div>
                                 {caseData.appealed && (
                                     <div className='flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full bg-yellow-500/10 text-yellow-400 border border-yellow-500/20'>
-                                        Appealed
+                                        {t('appealed')}
                                     </div>
                                 )}
                             </div>
@@ -271,8 +277,8 @@ function CaseDetailPanel({
                                     className='w-full'
                                 >
                                     {deactivating
-                                        ? 'Deactivating...'
-                                        : 'Deactivate Case'}
+                                        ? t('deactivating')
+                                        : t('deactivateCase')}
                                 </Button>
                             </div>
                         )}
@@ -287,6 +293,7 @@ function CaseDetailPanel({
 const CaseDetailModal = CaseDetailPanel
 
 export default function ModerationPage() {
+    const { t } = useTranslation('moderation')
     const prefersReducedMotion = useReducedMotion()
     const { selectedGuild } = useGuildStore()
     const [cases, setCases] = useState<ModerationCase[]>([])
@@ -355,13 +362,13 @@ export default function ModerationPage() {
             setDeactivatingCaseId(caseId)
             try {
                 await api.moderation.deactivateCase(selectedGuild.id, caseId)
-                toast.success('Case deactivated')
+                toast.success(t('caseDeactivated'))
                 await Promise.all([fetchCases(), fetchStats()])
                 setSelectedCase((prev) =>
                     prev ? { ...prev, active: false } : prev,
                 )
             } catch {
-                toast.error('Failed to deactivate case')
+                toast.error(t('failedToDeactivateCase'))
             } finally {
                 setDeactivatingCaseId(null)
             }
@@ -388,10 +395,10 @@ export default function ModerationPage() {
             <div className='flex flex-col items-center justify-center h-[60vh] text-center'>
                 <Shield className='w-16 h-16 text-lucky-text-tertiary mb-4' />
                 <h2 className='type-h2 text-lucky-text-primary mb-2'>
-                    No Server Selected
+                    {t('noServerSelected')}
                 </h2>
                 <p className='type-body text-lucky-text-secondary'>
-                    Select a server to view moderation cases
+                    {t('selectServerToViewCases')}
                 </p>
             </div>
         )
@@ -401,10 +408,10 @@ export default function ModerationPage() {
         <div className='space-y-6'>
             <header>
                 <h1 className='type-h1 text-lucky-text-primary'>
-                    Moderation Cases
+                    {t('moderationCases')}
                 </h1>
                 <p className='type-body text-lucky-text-secondary mt-1'>
-                    Manage warnings, mutes, kicks, and bans
+                    {t('manageWarningsAndBans')}
                 </p>
             </header>
 
@@ -420,25 +427,25 @@ export default function ModerationPage() {
             ) : stats ? (
                 <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3'>
                     <StatTile
-                        label='Total Cases'
+                        label={t('totalCases')}
                         value={stats.totalCases}
                         icon={<BarChart3 className='w-4 h-4' />}
                         tone='brand'
                     />
                     <StatTile
-                        label='Active Cases'
+                        label={t('activeCases')}
                         value={stats.activeCases}
                         icon={<Shield className='w-4 h-4' />}
                         tone='success'
                     />
                     <StatTile
-                        label='Warnings'
+                        label={t('warnings')}
                         value={stats.casesByType.warn ?? 0}
                         icon={<AlertTriangle className='w-4 h-4' />}
                         tone='warning'
                     />
                     <StatTile
-                        label='Bans'
+                        label={t('bans')}
                         value={stats.casesByType.ban ?? 0}
                         icon={<Ban className='w-4 h-4' />}
                         tone='accent'
@@ -452,7 +459,7 @@ export default function ModerationPage() {
                     <div className='relative flex-1'>
                         <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-lucky-text-tertiary' />
                         <Input
-                            placeholder='Search by user, moderator, or reason...'
+                            placeholder={t('searchByUserModeratorOrReason')}
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
                             className='pl-9 bg-lucky-bg-tertiary border-lucky-border text-white placeholder:text-lucky-text-tertiary'
@@ -473,16 +480,28 @@ export default function ModerationPage() {
                             onValueChange={setTypeFilter}
                         >
                             <SelectTrigger className='w-[140px] bg-lucky-bg-tertiary border-lucky-border text-white'>
-                                <SelectValue placeholder='All types' />
+                                <SelectValue placeholder={t('allTypes')} />
                             </SelectTrigger>
                             <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
-                                <SelectItem value='all'>All types</SelectItem>
-                                <SelectItem value='warn'>Warnings</SelectItem>
-                                <SelectItem value='mute'>Mutes</SelectItem>
-                                <SelectItem value='kick'>Kicks</SelectItem>
-                                <SelectItem value='ban'>Bans</SelectItem>
-                                <SelectItem value='unban'>Unbans</SelectItem>
-                                <SelectItem value='unmute'>Unmutes</SelectItem>
+                                <SelectItem value='all'>
+                                    {t('allTypes')}
+                                </SelectItem>
+                                <SelectItem value='warn'>
+                                    {t('warnings')}
+                                </SelectItem>
+                                <SelectItem value='mute'>
+                                    {t('mutes')}
+                                </SelectItem>
+                                <SelectItem value='kick'>
+                                    {t('kicks')}
+                                </SelectItem>
+                                <SelectItem value='ban'>{t('bans')}</SelectItem>
+                                <SelectItem value='unban'>
+                                    {t('unbans')}
+                                </SelectItem>
+                                <SelectItem value='unmute'>
+                                    {t('unmutes')}
+                                </SelectItem>
                             </SelectContent>
                         </Select>
                     </div>
@@ -493,16 +512,21 @@ export default function ModerationPage() {
             <Card className='overflow-hidden p-0 border border-lucky-border'>
                 {/* Header */}
                 <div className='hidden md:grid grid-cols-[40px_1fr_1fr_80px_80px_120px] gap-4 px-6 py-3 border-b border-lucky-border bg-lucky-bg-tertiary/20'>
-                    {['#', 'User', 'Moderator', 'Type', 'Status', 'Date'].map(
-                        (h) => (
-                            <span
-                                key={h}
-                                className='type-meta text-lucky-text-tertiary text-xs uppercase font-semibold tracking-wide'
-                            >
-                                {h}
-                            </span>
-                        ),
-                    )}
+                    {[
+                        t('tableHeaderCase'),
+                        t('tableHeaderUser'),
+                        t('tableHeaderModerator'),
+                        t('tableHeaderType'),
+                        t('tableHeaderStatus'),
+                        t('tableHeaderDate'),
+                    ].map((h) => (
+                        <span
+                            key={h}
+                            className='type-meta text-lucky-text-tertiary text-xs uppercase font-semibold tracking-wide'
+                        >
+                            {h}
+                        </span>
+                    ))}
                 </div>
 
                 {/* Rows */}
@@ -585,8 +609,8 @@ export default function ModerationPage() {
                                             />
                                             <span className='text-xs'>
                                                 {c.active
-                                                    ? 'Active'
-                                                    : 'Expired'}
+                                                    ? t('active')
+                                                    : t('expired')}
                                             </span>
                                         </div>
                                         <span className='type-body-sm text-lucky-text-tertiary text-xs'>
@@ -604,11 +628,11 @@ export default function ModerationPage() {
                                     aria-hidden='true'
                                 />
                             }
-                            title='No cases found'
+                            title={t('noCasesFound')}
                             description={
                                 searchQuery || typeFilter !== 'all'
-                                    ? 'Try adjusting your filters'
-                                    : 'Moderation cases will appear here'
+                                    ? t('tryAdjustingFilters')
+                                    : t('moderationCasesWillAppearHere')
                             }
                             className='rounded-none border-0 min-h-[240px]'
                         />
@@ -619,8 +643,11 @@ export default function ModerationPage() {
                 {total > limit && (
                     <div className='flex items-center justify-between px-5 py-3 border-t border-lucky-border'>
                         <span className='type-body-sm text-lucky-text-tertiary'>
-                            Showing {(page - 1) * limit + 1} to
-                            {Math.min(page * limit, total)} of {total}
+                            {t('showingToOf', {
+                                from: (page - 1) * limit + 1,
+                                to: Math.min(page * limit, total),
+                                total: total,
+                            })}
                         </span>
                         <div className='flex items-center gap-1'>
                             <Button
diff --git a/packages/frontend/src/pages/Music.tsx b/packages/frontend/src/pages/Music.tsx
index f3d86bac4..952796e13 100644
--- a/packages/frontend/src/pages/Music.tsx
+++ b/packages/frontend/src/pages/Music.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
     Music2,
     Wifi,
@@ -22,6 +23,7 @@ import EmptyState from '@/components/ui/EmptyState'
 import type { QueueState } from '@/types'
 
 export default function MusicPage() {
+    const { t } = useTranslation()
     const { selectedGuild } = useGuildSelection()
     const guildId = selectedGuild?.id
     const player = useMusicPlayer(guildId)
@@ -58,8 +60,8 @@ export default function MusicPage() {
         return (
             <EmptyState
                 icon={<Music2 className='h-10 w-10' aria-hidden='true' />}
-                title='No Server Selected'
-                description='Select a server to control music playback'
+                title={t('music.noServerSelected')}
+                description={t('music.selectServerToControlMusic')}
             />
         )
     }
@@ -74,12 +76,14 @@ export default function MusicPage() {
                     />
                     <div className='min-w-0'>
                         <h1 className='type-h1 text-lucky-text-primary truncate'>
-                            Music Player
+                            {t('music.musicPlayer')}
                         </h1>
                         <p className='type-body-sm text-lucky-text-secondary truncate'>
                             {player.state.voiceChannelName
-                                ? `Connected to ${player.state.voiceChannelName}`
-                                : 'Not connected to a voice channel'}
+                                ? t('music.connectedToVoiceChannel', {
+                                      channel: player.state.voiceChannelName,
+                                  })
+                                : t('music.notConnectedToVoiceChannel')}
                         </p>
                     </div>
                 </div>
@@ -113,7 +117,7 @@ export default function MusicPage() {
 
             <div>
                 <h2 className='type-title text-lucky-text-primary mb-3 px-1'>
-                    Queue
+                    {t('music.queue')}
                 </h2>
                 <QueueList
                     tracks={player.state.tracks}
@@ -152,6 +156,7 @@ function NowPlayingHero({
     onRepeatCycle: () => void
     onVolumeChange: (v: number) => void
 }) {
+    const { t } = useTranslation()
     const currentTrack = state.tracks[0]
 
     if (!currentTrack) {
@@ -163,10 +168,10 @@ function NowPlayingHero({
                         aria-hidden='true'
                     />
                     <p className='type-body text-lucky-text-secondary'>
-                        Nothing playing
+                        {t('music.nothingPlaying')}
                     </p>
                     <p className='type-body-sm text-lucky-text-tertiary mt-1'>
-                        Search or import to get started
+                        {t('music.searchOrImportToGetStarted')}
                     </p>
                 </div>
             </div>
@@ -198,13 +203,13 @@ function NowPlayingHero({
                     <div className='sm:col-span-2 flex flex-col justify-between'>
                         <div>
                             <p className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold mb-2'>
-                                Now Playing
+                                {t('music.nowPlaying')}
                             </p>
                             <h2 className='type-h2 text-lucky-text-primary mb-1 line-clamp-2'>
-                                {currentTrack.title || 'Unknown'}
+                                {currentTrack.title || t('music.unknown')}
                             </h2>
                             <p className='type-body text-lucky-text-secondary mb-4'>
-                                {currentTrack.author || 'Unknown'}
+                                {currentTrack.author || t('music.unknown')}
                             </p>
                         </div>
 
@@ -240,7 +245,7 @@ function NowPlayingHero({
                                 onVolumeChange(parseInt(e.target.value, 10))
                             }
                             className='flex-1 h-1 bg-lucky-bg-active rounded-full appearance-none cursor-pointer'
-                            aria-label='Volume'
+                            aria-label={t('music.volume')}
                         />
                     </div>
 
@@ -249,17 +254,21 @@ function NowPlayingHero({
                             icon={<Shuffle className='h-4 w-4' />}
                             onClick={onShuffle}
                             active={state.shuffled}
-                            aria-label='Shuffle'
+                            aria-label={t('music.shuffle')}
                         />
                         <ControlButton
                             icon={<SkipBack className='h-5 w-5' />}
                             onClick={onPrevious}
-                            aria-label='Previous track'
+                            aria-label={t('music.previousTrack')}
                         />
                         <button
                             onClick={onPlayPause}
                             className='h-12 w-12 rounded-full bg-lucky-brand text-lucky-bg-primary flex items-center justify-center hover:bg-lucky-brand-strong transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lucky-brand focus-visible:ring-offset-2 focus-visible:ring-offset-lucky-surface-panel'
-                            aria-label={state.isPlaying ? 'Pause' : 'Play'}
+                            aria-label={
+                                state.isPlaying
+                                    ? t('music.pause')
+                                    : t('music.play')
+                            }
                         >
                             {state.isPlaying ? (
                                 <Pause className='h-5 w-5' />
@@ -270,13 +279,15 @@ function NowPlayingHero({
                         <ControlButton
                             icon={<SkipForward className='h-5 w-5' />}
                             onClick={onSkip}
-                            aria-label='Next track'
+                            aria-label={t('music.nextTrack')}
                         />
                         <ControlButton
                             icon={getRepeatIcon(state.repeatMode)}
                             onClick={onRepeatCycle}
                             active={state.repeatMode !== 'off'}
-                            aria-label={`Repeat: ${state.repeatMode}`}
+                            aria-label={t('music.repeatMode', {
+                                mode: state.repeatMode,
+                            })}
                         />
                     </div>
                 </div>
@@ -330,6 +341,7 @@ function formatSeconds(seconds: number): string {
 }
 
 function ConnectionBadge({ connected }: { connected: boolean }) {
+    const { t } = useTranslation()
     return (
         <div
             className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full type-meta shrink-0 border transition-colors ${
@@ -340,8 +352,8 @@ function ConnectionBadge({ connected }: { connected: boolean }) {
             role='status'
             aria-label={
                 connected
-                    ? 'Connected to live updates'
-                    : 'Reconnecting to live updates'
+                    ? t('music.connectedToLiveUpdates')
+                    : t('music.reconnectingToLiveUpdates')
             }
         >
             {connected ? (
@@ -350,7 +362,7 @@ function ConnectionBadge({ connected }: { connected: boolean }) {
                 <WifiOff className='h-3 w-3' aria-hidden='true' />
             )}
             <span className='hidden sm:inline'>
-                {connected ? 'Live' : 'Reconnecting'}
+                {connected ? t('music.connected') : t('music.reconnecting')}
             </span>
         </div>
     )
diff --git a/packages/frontend/src/pages/PreferredArtists.test.tsx b/packages/frontend/src/pages/PreferredArtists.test.tsx
index bdd0d6601..e98b6f37e 100644
--- a/packages/frontend/src/pages/PreferredArtists.test.tsx
+++ b/packages/frontend/src/pages/PreferredArtists.test.tsx
@@ -78,6 +78,51 @@ vi.mock('@/components/ui/EmptyState', () => ({
     ),
 }))
 
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key: string, options?: Record<string, any>) => {
+            // Map keys to English values for testing
+            const translations: Record<string, string> = {
+                noServerSelected: 'No Server Selected',
+                selectServerToManageArtists:
+                    'Select a server to manage preferred artists',
+                musicPersonalization: 'Music personalization',
+                musicalTaste: 'Musical Taste',
+                chooseArtistsDescription:
+                    "Choose artists to guide autoplay recommendations. When multiple people are in voice, Lucky blends everyone's preferences.",
+                discoverTab: 'Discover',
+                preferredTab: 'Preferred',
+                blockedTab: 'Blocked',
+                searchForArtist: 'Search for an artist...',
+                searching: 'Searching...',
+                failedToSearchArtists: 'Failed to search artists',
+                noArtistsFound: 'No artists found',
+                noSuggestionsAvailable:
+                    'No suggestions available. Try searching for artists above.',
+                noPreferredArtistsYet: 'No preferred artists yet',
+                addFromDiscover: 'Add some from Discover.',
+                noBlockedArtists: 'No blocked artists',
+                blockArtistsDescription:
+                    "Block artists you don't want Lucky to autoplay.",
+                savePreferences: 'Save Preferences',
+                saving: 'Saving...',
+            }
+
+            // Handle interpolation
+            if (options) {
+                if (key === 'noArtistsFound' && options.query) {
+                    return `No artists found for "${options.query}"`
+                }
+                if (key === 'savePreferences' && options.count !== undefined) {
+                    return `Save Preferences (${options.count})`
+                }
+            }
+
+            return translations[key] || key
+        },
+    }),
+}))
+
 const mockGuild = { id: 'guild-1', name: 'Test Server' }
 
 const mockArtist = {
diff --git a/packages/frontend/src/pages/PreferredArtists.tsx b/packages/frontend/src/pages/PreferredArtists.tsx
index 2615a1f92..560c7aa41 100644
--- a/packages/frontend/src/pages/PreferredArtists.tsx
+++ b/packages/frontend/src/pages/PreferredArtists.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { Heart, Loader2, Music2, Search, X, Check } from 'lucide-react'
 import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
 import { useGuildSelection } from '@/hooks/useGuildSelection'
@@ -169,6 +170,7 @@ function ArtistTile({
 }
 
 export default function PreferredArtistsPage() {
+    const { t } = useTranslation('preferredArtists')
     const { selectedGuild } = useGuildSelection()
     const guildId = selectedGuild?.id
     const prefersReducedMotion = useReducedMotion()
@@ -438,8 +440,8 @@ export default function PreferredArtistsPage() {
         return (
             <EmptyState
                 icon={<Music2 className='h-10 w-10' aria-hidden='true' />}
-                title='No Server Selected'
-                description='Select a server to manage preferred artists'
+                title={t('noServerSelected')}
+                description={t('selectServerToManageArtists')}
             />
         )
     }
@@ -447,9 +449,9 @@ export default function PreferredArtistsPage() {
     return (
         <div className='space-y-6'>
             <SectionHeader
-                eyebrow='Music personalization'
-                title='Musical Taste'
-                description="Choose artists to guide autoplay recommendations. When multiple people are in voice, Lucky blends everyone's preferences."
+                eyebrow={t('musicPersonalization')}
+                title={t('musicalTaste')}
+                description={t('chooseArtistsDescription')}
                 actions={<Heart className='h-5 w-5 text-lucky-accent' />}
             />
 
@@ -476,9 +478,10 @@ export default function PreferredArtistsPage() {
                                     )}
                                 >
                                     <span className='capitalize'>
-                                        {tab === 'discover' && 'Discover'}
-                                        {tab === 'preferred' && 'Preferred'}
-                                        {tab === 'blocked' && 'Blocked'}
+                                        {tab === 'discover' && t('discoverTab')}
+                                        {tab === 'preferred' &&
+                                            t('preferredTab')}
+                                        {tab === 'blocked' && t('blockedTab')}
                                     </span>
                                     <span
                                         className={cn(
@@ -507,7 +510,7 @@ export default function PreferredArtistsPage() {
                                 type='text'
                                 value={query}
                                 onChange={(e) => setQuery(e.target.value)}
-                                placeholder='Search for an artist...'
+                                placeholder={t('searchForArtist')}
                                 className='lucky-focus-visible w-full rounded-lg border border-lucky-border bg-lucky-bg-tertiary py-2.5 pl-9 pr-10 type-body-sm text-lucky-text-primary placeholder:text-lucky-text-subtle focus:border-lucky-brand focus:bg-lucky-bg-primary'
                             />
                             {query && (
@@ -524,12 +527,15 @@ export default function PreferredArtistsPage() {
                         {searching && (
                             <div className='flex items-center justify-center py-6'>
                                 <Loader2 className='h-5 w-5 animate-spin text-lucky-text-tertiary' />
+                                <span className='text-lucky-text-tertiary text-sm'>
+                                    {t('searching')}
+                                </span>
                             </div>
                         )}
 
                         {searchError && (
                             <p className='mt-3 type-body-sm text-lucky-error'>
-                                {searchError}
+                                {t('failedToSearchArtists')}
                             </p>
                         )}
 
@@ -538,13 +544,16 @@ export default function PreferredArtistsPage() {
                             searchResults.length === 0 &&
                             !searchError && (
                                 <p className='mt-3 type-body-sm text-lucky-text-tertiary'>
-                                    No artists found for "{query}"
+                                    {t('noArtistsFound', { query })}
                                 </p>
                             )}
 
                         {!searching && !query.trim() && suggestionsLoading && (
                             <div className='flex items-center justify-center py-6'>
                                 <Loader2 className='h-5 w-5 animate-spin text-lucky-text-tertiary' />
+                                <span className='text-lucky-text-tertiary text-sm'>
+                                    {t('searching')}
+                                </span>
                             </div>
                         )}
 
@@ -660,8 +669,7 @@ export default function PreferredArtistsPage() {
                             !suggestionsError && (
                                 <div className='py-6 text-center'>
                                     <p className='type-body-sm text-lucky-text-tertiary'>
-                                        No suggestions available. Try searching
-                                        for artists above.
+                                        {t('noSuggestionsAvailable')}
                                     </p>
                                 </div>
                             )}
@@ -679,8 +687,8 @@ export default function PreferredArtistsPage() {
                                         aria-hidden='true'
                                     />
                                 }
-                                title='No preferred artists yet'
-                                description='Add some from Discover.'
+                                title={t('noPreferredArtistsYet')}
+                                description={t('addFromDiscover')}
                             />
                         ) : (
                             <div className='grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5'>
@@ -727,8 +735,8 @@ export default function PreferredArtistsPage() {
                                         aria-hidden='true'
                                     />
                                 }
-                                title='No blocked artists'
-                                description="Block artists you don't want Lucky to autoplay."
+                                title={t('noBlockedArtists')}
+                                description={t('blockArtistsDescription')}
                             />
                         ) : (
                             <div className='grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5'>
@@ -779,10 +787,10 @@ export default function PreferredArtistsPage() {
                         {isSaving ? (
                             <div className='flex items-center justify-center gap-2'>
                                 <Loader2 className='h-4 w-4 animate-spin' />
-                                Saving...
+                                {t('saving')}
                             </div>
                         ) : (
-                            `Save Preferences (${unsavedChanges.size})`
+                            t('savePreferences', { count: unsavedChanges.size })
                         )}
                     </button>
                 )}
diff --git a/packages/frontend/src/pages/ReactionRoles.tsx b/packages/frontend/src/pages/ReactionRoles.tsx
index 5cd922b7a..896a5e1c7 100644
--- a/packages/frontend/src/pages/ReactionRoles.tsx
+++ b/packages/frontend/src/pages/ReactionRoles.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
     Users,
@@ -120,6 +121,7 @@ function MessageCard({
     onDelete: (messageId: string) => Promise<void>
     onEdit: (message: ReactionRoleMessage) => void
 }) {
+    const { t } = useTranslation()
     const [deleting, setDeleting] = useState(false)
     const date = new Date(message.createdAt)
     const dateStr = date.toLocaleDateString(undefined, {
@@ -199,7 +201,7 @@ function MessageCard({
                 </div>
             ) : (
                 <p className='type-body-sm text-lucky-text-tertiary'>
-                    No role mappings found for this message.
+                    {t('reactionRoles.noMappings')}
                 </p>
             )}
         </Card>
@@ -250,6 +252,7 @@ function MessageForm({
     onClose,
     onSuccess,
 }: MessageFormProps) {
+    const { t } = useTranslation()
     const [channels, setChannels] = useState<GuildChannelOption[]>([])
     const [roles, setRoles] = useState<GuildRoleOption[]>([])
     const [loadingOptions, setLoadingOptions] = useState(false)
@@ -400,20 +403,20 @@ function MessageForm({
     async function handleSubmit() {
         setError(null)
         if (!channelId) {
-            setError('Select a channel')
+            setError(t('reactionRoles.selectChannelError'))
             return
         }
         if (!title.trim()) {
-            setError('Title is required')
+            setError(t('reactionRoles.titleRequiredError'))
             return
         }
         if (!description.trim()) {
-            setError('Description is required')
+            setError(t('reactionRoles.descriptionRequiredError'))
             return
         }
         const validEntries = entries.filter((e) => e.roleId && e.label.trim())
         if (validEntries.length === 0) {
-            setError('Add at least one role with a label')
+            setError(t('reactionRoles.addRoleError'))
             return
         }
 
@@ -465,8 +468,8 @@ function MessageForm({
         } catch (err) {
             const msg =
                 mode === 'create'
-                    ? 'Failed to create reaction role message'
-                    : 'Failed to update reaction role message'
+                    ? t('reactionRoles.createFailedError')
+                    : t('reactionRoles.updateFailedError')
             setError(msg)
         } finally {
             setSubmitting(false)
@@ -479,8 +482,8 @@ function MessageForm({
                 <DialogHeader>
                     <DialogTitle>
                         {mode === 'create'
-                            ? 'Create Reaction Role Message'
-                            : 'Edit Reaction Role Message'}
+                            ? t('reactionRoles.createTitle')
+                            : t('reactionRoles.editTitle')}
                     </DialogTitle>
                 </DialogHeader>
 
@@ -492,14 +495,18 @@ function MessageForm({
                     )}
 
                     <div className='space-y-1.5'>
-                        <Label>Channel</Label>
+                        <Label>{t('reactionRoles.channel')}</Label>
                         <Select
                             value={channelId}
                             onValueChange={setChannelId}
                             disabled={loadingOptions || mode === 'edit'}
                         >
                             <SelectTrigger>
-                                <SelectValue placeholder='Select a channel' />
+                                <SelectValue
+                                    placeholder={t(
+                                        'reactionRoles.selectChannelPlaceholder',
+                                    )}
+                                />
                             </SelectTrigger>
                             <SelectContent>
                                 {channels.map((ch) => (
@@ -511,29 +518,31 @@ function MessageForm({
                         </Select>
                         {mode === 'edit' && (
                             <p className='type-body-sm text-lucky-text-tertiary'>
-                                Channel cannot be changed on edit
+                                {t('reactionRoles.channelCannotChange')}
                             </p>
                         )}
                     </div>
 
                     <div className='space-y-1.5'>
-                        <Label>Title</Label>
+                        <Label>{t('reactionRoles.title')}</Label>
                         <Input
                             value={title}
                             onChange={(e) => setTitle(e.target.value)}
-                            placeholder='e.g. Pick your roles'
+                            placeholder={t('reactionRoles.titlePlaceholder')}
                             maxLength={256}
                         />
                     </div>
 
                     <div className='space-y-1.5'>
-                        <Label>Description</Label>
+                        <Label>{t('reactionRoles.description')}</Label>
                         <FormattingToolbar textareaRef={descriptionRef} />
                         <AutoGrowTextarea
                             ref={descriptionRef}
                             value={description}
                             onChange={(e) => setDescription(e.target.value)}
-                            placeholder='Explain how to use the buttons below…'
+                            placeholder={t(
+                                'reactionRoles.descriptionPlaceholder',
+                            )}
                             maxLength={4096}
                             minRows={3}
                             maxRows={12}
@@ -541,11 +550,11 @@ function MessageForm({
                     </div>
 
                     <div className='space-y-1.5'>
-                        <Label>Image URL (optional)</Label>
+                        <Label>{t('reactionRoles.imageUrlOptional')}</Label>
                         <Input
                             value={imageFile ? '' : imageUrl}
                             onChange={(e) => setImageUrl(e.target.value)}
-                            placeholder='https://example.com/image.png'
+                            placeholder={t('reactionRoles.imageUrlPlaceholder')}
                             maxLength={2048}
                             disabled={!!imageFile}
                         />
@@ -573,7 +582,7 @@ function MessageForm({
                     </div>
 
                     <div className='space-y-1.5'>
-                        <Label>Upload Image (optional)</Label>
+                        <Label>{t('reactionRoles.uploadImageOptional')}</Label>
                         <div className='flex items-center gap-2'>
                             <Button
                                 variant='secondary'
@@ -583,7 +592,7 @@ function MessageForm({
                                 className='relative'
                             >
                                 <Upload className='h-4 w-4' />
-                                Choose Image
+                                {t('reactionRoles.chooseImage')}
                                 <input
                                     ref={fileInputRef}
                                     type='file'
@@ -622,7 +631,9 @@ function MessageForm({
 
                     <div className='sticky top-0 z-10 space-y-2 border-t border-lucky-border bg-lucky-bg-secondary pt-3'>
                         <div className='flex items-center justify-between'>
-                            <Label>Roles ({entries.length}/25)</Label>
+                            <Label>
+                                {t('reactionRoles.roles')} ({entries.length}/25)
+                            </Label>
                             <Button
                                 variant='secondary'
                                 size='sm'
@@ -630,7 +641,7 @@ function MessageForm({
                                 disabled={entries.length >= 25}
                             >
                                 <Plus className='h-3.5 w-3.5' />
-                                Add role
+                                {t('reactionRoles.addRole')}
                             </Button>
                         </div>
 
@@ -658,7 +669,7 @@ function MessageForm({
                                     <div className='grid grid-cols-2 gap-2'>
                                         <div className='space-y-1'>
                                             <Label className='text-xs'>
-                                                Role
+                                                {t('reactionRoles.role')}
                                             </Label>
                                             <Select
                                                 value={entry.roleId}
@@ -668,7 +679,11 @@ function MessageForm({
                                                 disabled={loadingOptions}
                                             >
                                                 <SelectTrigger className='h-8 text-xs'>
-                                                    <SelectValue placeholder='Select role' />
+                                                    <SelectValue
+                                                        placeholder={t(
+                                                            'reactionRoles.selectRolePlaceholder',
+                                                        )}
+                                                    />
                                                 </SelectTrigger>
                                                 <SelectContent>
                                                     {roles.map((r) => (
@@ -684,7 +699,7 @@ function MessageForm({
                                         </div>
                                         <div className='space-y-1'>
                                             <Label className='text-xs'>
-                                                Button label
+                                                {t('reactionRoles.buttonLabel')}
                                             </Label>
                                             <Input
                                                 className='h-8 text-xs'
@@ -696,13 +711,17 @@ function MessageForm({
                                                         e.target.value,
                                                     )
                                                 }
-                                                placeholder='Label'
+                                                placeholder={t(
+                                                    'reactionRoles.buttonLabelPlaceholder',
+                                                )}
                                                 maxLength={80}
                                             />
                                         </div>
                                         <div className='space-y-1'>
                                             <Label className='text-xs'>
-                                                Emoji (optional)
+                                                {t(
+                                                    'reactionRoles.emojiOptional',
+                                                )}
                                             </Label>
                                             <EmojiPicker
                                                 value={entry.emoji}
@@ -718,7 +737,7 @@ function MessageForm({
                                         </div>
                                         <div className='space-y-1'>
                                             <Label className='text-xs'>
-                                                Style
+                                                {t('reactionRoles.style')}
                                             </Label>
                                             <Select
                                                 value={entry.style ?? 'Primary'}
@@ -754,7 +773,7 @@ function MessageForm({
                         onClick={handleClose}
                         disabled={submitting}
                     >
-                        Cancel
+                        {t('reactionRoles.cancel')}
                     </Button>
                     <Button
                         onClick={() => void handleSubmit()}
@@ -762,11 +781,11 @@ function MessageForm({
                     >
                         {submitting
                             ? mode === 'create'
-                                ? 'Creating…'
-                                : 'Updating…'
+                                ? t('reactionRoles.submitCreating')
+                                : t('reactionRoles.submitUpdating')
                             : mode === 'create'
-                              ? 'Create'
-                              : 'Update'}
+                              ? t('reactionRoles.submit')
+                              : t('reactionRoles.submitUpdate')}
                     </Button>
                 </DialogFooter>
             </DialogContent>
@@ -775,6 +794,7 @@ function MessageForm({
 }
 
 export default function ReactionRoles() {
+    const { t } = useTranslation()
     const { selectedGuild } = useGuildStore()
     const [messages, setMessages] = useState<ReactionRoleMessage[]>([])
     const [loading, setLoading] = useState(true)
@@ -795,11 +815,11 @@ export default function ReactionRoles() {
             const data = await api.reactionRoles.list(selectedGuild!.id)
             setMessages(data)
         } catch {
-            setError('Failed to load reaction role messages.')
+            setError(t('reactionRoles.loadFailedError'))
         } finally {
             setLoading(false)
         }
-    }, [selectedGuild])
+    }, [selectedGuild, t])
 
     useEffect(() => {
         void fetchMessages()
@@ -812,7 +832,7 @@ export default function ReactionRoles() {
             await api.reactionRoles.delete(selectedGuild!.id, messageId)
             setMessages((prev) => prev.filter((m) => m.messageId !== messageId))
         } catch {
-            setDeleteError('Failed to delete reaction role message.')
+            setDeleteError(t('reactionRoles.deleteFailedError'))
         }
     }
 
@@ -860,8 +880,8 @@ export default function ReactionRoles() {
         return (
             <EmptyState
                 icon={<Users className='h-10 w-10' />}
-                title='No server selected'
-                description='Select a server from the sidebar to view reaction roles.'
+                title={t('reactionRoles.noServerSelected')}
+                description={t('reactionRoles.selectServerDescription')}
             />
         )
     }
@@ -879,18 +899,18 @@ export default function ReactionRoles() {
                             variant='secondary'
                         >
                             <Download className='h-4 w-4' />
-                            Export
+                            {t('reactionRoles.export')}
                         </Button>
                         <Button
                             onClick={() => setImportDialogOpen(true)}
                             variant='secondary'
                         >
                             <Upload className='h-4 w-4' />
-                            Import
+                            {t('reactionRoles.import')}
                         </Button>
                         <Button onClick={handleCreateClick}>
                             <Plus className='h-4 w-4' />
-                            Create
+                            {t('reactionRoles.create')}
                         </Button>
                     </div>
                 }
@@ -923,8 +943,8 @@ export default function ReactionRoles() {
             ) : messages.length === 0 ? (
                 <EmptyState
                     icon={<Sparkles className='h-10 w-10' />}
-                    title='No reaction role messages'
-                    description='Create your first reaction role message to let members self-assign roles with buttons.'
+                    title={t('reactionRoles.noMessagesTitle')}
+                    description={t('reactionRoles.noMessagesDescription')}
                 />
             ) : (
                 <AnimatePresence mode='popLayout'>
diff --git a/packages/frontend/src/pages/ServerLogs.test.tsx b/packages/frontend/src/pages/ServerLogs.test.tsx
index 6ec136308..05b15907c 100644
--- a/packages/frontend/src/pages/ServerLogs.test.tsx
+++ b/packages/frontend/src/pages/ServerLogs.test.tsx
@@ -9,6 +9,46 @@ import { useGuildStore } from '@/stores/guildStore'
 vi.mock('@/services/api')
 vi.mock('@/stores/guildStore')
 vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
+vi.mock('react-i18next', () => ({
+    useTranslation: (_namespace?: string) => {
+        const keyMap: { [key: string]: string } = {
+            title: 'Server Logs',
+            subtitle: 'Activity and moderation logs for {{name}}',
+            export: 'Export',
+            searchAndFilter: 'Search & Filter',
+            searchPlaceholder: 'Search logs…',
+            allLevels: 'All levels',
+            info: 'Info',
+            warnings: 'Warnings',
+            errors: 'Errors',
+            moderation: 'Moderation',
+            autoMod: 'Auto-Mod',
+            system: 'System',
+            noServerSelected: 'No Server Selected',
+            selectServerDescription: 'Select a server to view logs',
+            noLogsFound: 'No logs found',
+            adjustFilters: 'Try adjusting your filters',
+            logsWillAppear: 'Logs will appear here as events occur',
+            exportSuccess: 'Logs exported!',
+            loadError: 'Failed to load logs. Please try again.',
+            userLabel: 'User:',
+            channelLabel: 'Channel:',
+        }
+
+        return {
+            t: (key: string, options?: { [key: string]: any }) => {
+                let result = keyMap[key] || key
+
+                // Handle interpolation for {{name}}
+                if (options && options.name) {
+                    result = result.replace('{{name}}', options.name)
+                }
+
+                return result
+            },
+        }
+    },
+}))
 
 const mockGuild = { id: '123', name: 'Test Guild' }
 
@@ -184,9 +224,7 @@ describe('ServerLogsPage', () => {
             () => new Promise(() => {}),
         )
         renderPage()
-        expect(
-            screen.getByPlaceholderText('Search logs...'),
-        ).toBeInTheDocument()
+        expect(screen.getByPlaceholderText('Search logs…')).toBeInTheDocument()
     })
 
     test('renders level summary chips', async () => {
@@ -219,7 +257,7 @@ describe('ServerLogsPage', () => {
             ).toBeInTheDocument(),
         )
 
-        const searchInput = screen.getByPlaceholderText('Search logs...')
+        const searchInput = screen.getByPlaceholderText('Search logs…')
         await user.type(searchInput, 'hello')
 
         expect(searchInput).toHaveValue('hello')
@@ -239,7 +277,7 @@ describe('ServerLogsPage', () => {
             ).toBeInTheDocument(),
         )
 
-        const searchInput = screen.getByPlaceholderText('Search logs...')
+        const searchInput = screen.getByPlaceholderText('Search logs…')
         await user.type(searchInput, 'test')
         expect(searchInput).toHaveValue('test')
 
diff --git a/packages/frontend/src/pages/ServerLogs.tsx b/packages/frontend/src/pages/ServerLogs.tsx
index 02825e1be..4d3acaf11 100644
--- a/packages/frontend/src/pages/ServerLogs.tsx
+++ b/packages/frontend/src/pages/ServerLogs.tsx
@@ -1,6 +1,7 @@
 import { reportError } from '@/lib/sentry'
 import { useState, useEffect, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
+import { useTranslation } from 'react-i18next'
 import {
     ScrollText,
     Search,
@@ -79,6 +80,7 @@ function formatTimestamp(dateStr: string): string {
 }
 
 function LogEntry({ log, index }: { log: ServerLog; index: number }) {
+    const { t } = useTranslation('serverLogs')
     const config = LEVEL_CONFIG[log.level] || LEVEL_CONFIG.info
     const Icon = config.icon
 
@@ -123,7 +125,7 @@ function LogEntry({ log, index }: { log: ServerLog; index: number }) {
                         {log.userName && (
                             <span>
                                 <span className='text-lucky-text-tertiary'>
-                                    User:
+                                    {t('userLabel')}
                                 </span>{' '}
                                 <span className='text-lucky-text-secondary font-medium'>
                                     {log.userName}
@@ -133,7 +135,7 @@ function LogEntry({ log, index }: { log: ServerLog; index: number }) {
                         {log.channelName && (
                             <span>
                                 <span className='text-lucky-text-tertiary'>
-                                    Channel:
+                                    {t('channelLabel')}
                                 </span>{' '}
                                 <span className='text-lucky-text-secondary font-medium'>
                                     #{log.channelName}
@@ -152,6 +154,7 @@ function LogEntry({ log, index }: { log: ServerLog; index: number }) {
 }
 
 export default function ServerLogsPage() {
+    const { t } = useTranslation('serverLogs')
     const { selectedGuild } = useGuildStore()
     const [logs, setLogs] = useState<ServerLog[]>([])
     const [total, setTotal] = useState(0)
@@ -191,7 +194,7 @@ export default function ServerLogsPage() {
                 component: 'ServerLogs',
                 action: 'loadLogs',
             })
-            toast.error('Failed to load logs. Please try again.')
+            toast.error(t('loadError'))
             setLogs([])
             setTotal(0)
         } finally {
@@ -219,7 +222,7 @@ export default function ServerLogsPage() {
         a.download = `${selectedGuild.name}-logs.json`
         a.click()
         window.URL.revokeObjectURL(url)
-        toast.success('Logs exported!')
+        toast.success(t('exportSuccess'))
     }
 
     if (!selectedGuild) {
@@ -227,10 +230,10 @@ export default function ServerLogsPage() {
             <div className='flex flex-col items-center justify-center h-[60vh] text-center'>
                 <ScrollText className='w-16 h-16 text-lucky-text-tertiary mb-4' />
                 <h2 className='type-h2 text-lucky-text-primary mb-2'>
-                    No Server Selected
+                    {t('noServerSelected')}
                 </h2>
                 <p className='text-lucky-text-secondary text-sm'>
-                    Select a server to view logs
+                    {t('selectServerDescription')}
                 </p>
             </div>
         )
@@ -241,10 +244,10 @@ export default function ServerLogsPage() {
             <div className='flex items-start justify-between flex-wrap gap-3'>
                 <header>
                     <h1 className='type-h1 text-lucky-text-primary'>
-                        Server Logs
+                        {t('title')}
                     </h1>
                     <p className='text-sm text-lucky-text-secondary mt-1'>
-                        Activity and moderation logs for {selectedGuild.name}
+                        {t('subtitle', { name: selectedGuild.name })}
                     </p>
                 </header>
                 <div className='flex items-center gap-2'>
@@ -254,7 +257,7 @@ export default function ServerLogsPage() {
                         onClick={handleExport}
                         className='gap-1.5 border border-lucky-border text-lucky-text-secondary hover:text-white'
                     >
-                        <Download className='w-3.5 h-3.5' /> Export
+                        <Download className='w-3.5 h-3.5' /> {t('export')}
                     </Button>
                 </div>
             </div>
@@ -263,13 +266,13 @@ export default function ServerLogsPage() {
             <Card className='p-4 space-y-3 border border-lucky-border'>
                 <div className='flex items-center gap-2 text-xs font-semibold text-lucky-text-tertiary uppercase tracking-wider'>
                     <Filter className='w-4 h-4' />
-                    Search & Filter
+                    {t('searchAndFilter')}
                 </div>
                 <div className='flex flex-col sm:flex-row gap-3'>
                     <div className='relative flex-1'>
                         <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-lucky-text-tertiary' />
                         <Input
-                            placeholder='Search logs...'
+                            placeholder={t('searchPlaceholder')}
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
                             className='pl-9 bg-lucky-bg-tertiary border-lucky-border text-lucky-text-primary placeholder:text-lucky-text-tertiary'
@@ -285,18 +288,26 @@ export default function ServerLogsPage() {
                     </div>
                     <Select value={levelFilter} onValueChange={setLevelFilter}>
                         <SelectTrigger className='sm:w-[140px] bg-lucky-bg-tertiary border-lucky-border text-lucky-text-primary'>
-                            <SelectValue placeholder='All levels' />
+                            <SelectValue placeholder={t('allLevels')} />
                         </SelectTrigger>
                         <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
-                            <SelectItem value='all'>All levels</SelectItem>
-                            <SelectItem value='info'>Info</SelectItem>
-                            <SelectItem value='warn'>Warnings</SelectItem>
-                            <SelectItem value='error'>Errors</SelectItem>
+                            <SelectItem value='all'>
+                                {t('allLevels')}
+                            </SelectItem>
+                            <SelectItem value='info'>{t('info')}</SelectItem>
+                            <SelectItem value='warn'>
+                                {t('warnings')}
+                            </SelectItem>
+                            <SelectItem value='error'>{t('errors')}</SelectItem>
                             <SelectItem value='moderation'>
-                                Moderation
+                                {t('moderation')}
+                            </SelectItem>
+                            <SelectItem value='automod'>
+                                {t('autoMod')}
+                            </SelectItem>
+                            <SelectItem value='system'>
+                                {t('system')}
                             </SelectItem>
-                            <SelectItem value='automod'>Auto-Mod</SelectItem>
-                            <SelectItem value='system'>System</SelectItem>
                         </SelectContent>
                     </Select>
                 </div>
@@ -380,12 +391,12 @@ export default function ServerLogsPage() {
                         <div className='py-16 text-center'>
                             <ScrollText className='w-12 h-12 text-lucky-text-tertiary mx-auto mb-3' />
                             <p className='text-sm text-lucky-text-secondary'>
-                                No logs found
+                                {t('noLogsFound')}
                             </p>
                             <p className='text-xs text-lucky-text-tertiary mt-1'>
                                 {searchQuery || levelFilter !== 'all'
-                                    ? 'Try adjusting your filters'
-                                    : 'Logs will appear here as events occur'}
+                                    ? t('adjustFilters')
+                                    : t('logsWillAppear')}
                             </p>
                         </div>
                     )}
diff --git a/packages/frontend/src/pages/ServerSettings.tsx b/packages/frontend/src/pages/ServerSettings.tsx
index c1a168786..55f7ce900 100644
--- a/packages/frontend/src/pages/ServerSettings.tsx
+++ b/packages/frontend/src/pages/ServerSettings.tsx
@@ -6,6 +6,7 @@ import {
     useRef,
     type ReactElement,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import { motion } from 'framer-motion'
 import {
     Settings,
@@ -81,33 +82,35 @@ const DEFAULT_SETTINGS: ServerSettings = {
     disableWarnings: false,
 }
 
-function classifySettingsLoadError(error: unknown): SettingsLoadError {
+function classifySettingsLoadError(
+    error: unknown,
+    t: (key: string) => string,
+): SettingsLoadError {
     if (error instanceof ApiError) {
         if (error.status === 401) {
             return {
                 kind: 'auth',
-                message: 'Session expired. Please sign in again.',
+                message: t('serverSettings.sessionExpired'),
             }
         }
 
         if (error.status === 403) {
             return {
                 kind: 'forbidden',
-                message: 'You no longer have access to this server settings.',
+                message: t('serverSettings.accessDenied'),
             }
         }
 
         if (error.status === 0) {
             return {
                 kind: 'network',
-                message:
-                    'Unable to reach API. Check your connection and retry.',
+                message: t('serverSettings.networkError'),
             }
         }
 
         return {
             kind: 'upstream',
-            message: error.message || 'Failed to load server settings.',
+            message: error.message || t('serverSettings.unableToLoadMessage'),
         }
     }
 
@@ -117,11 +120,12 @@ function classifySettingsLoadError(error: unknown): SettingsLoadError {
 
     return {
         kind: 'upstream',
-        message: 'Failed to load server settings.',
+        message: t('serverSettings.unableToLoadMessage'),
     }
 }
 
 export default function ServerSettingsPage() {
+    const { t } = useTranslation()
     const { selectedGuild, memberContext } = useGuildStore()
     const [settings, setSettings] = useState<ServerSettings>(DEFAULT_SETTINGS)
     const [loading, setLoading] = useState(true)
@@ -158,9 +162,7 @@ export default function ServerSettingsPage() {
             setRbacRoles(res.data.roles)
             setRbacGrants(res.data.grants)
             if (res.data.roles.length === 0) {
-                setRbacRolesError(
-                    'No assignable roles found for this server yet.',
-                )
+                setRbacRolesError(t('serverSettings.noAssignableRoles'))
             }
         } catch (error) {
             reportError('Failed to load server roles:', error, {
@@ -204,7 +206,7 @@ export default function ServerSettingsPage() {
                 return
             }
             setSettings(DEFAULT_SETTINGS)
-            setSettingsLoadError(classifySettingsLoadError(error))
+            setSettingsLoadError(classifySettingsLoadError(error, t))
         } finally {
             if (!isStaleRequest()) {
                 setLoading(false)
@@ -270,9 +272,9 @@ export default function ServerSettingsPage() {
         setSaving(true)
         try {
             await api.guilds.updateSettings(selectedGuild.id, settings)
-            toast.success('Server settings saved!')
+            toast.success(t('serverSettings.settingsSaved'))
         } catch {
-            toast.error('Failed to save settings')
+            toast.error(t('serverSettings.settingsSaveFailed'))
         } finally {
             setSaving(false)
         }
@@ -280,14 +282,13 @@ export default function ServerSettingsPage() {
 
     const addRbacGrant = () => {
         if (rbacLoading) {
-            toast.error('Still loading role options. Try again in a moment.')
+            toast.error(t('serverSettings.stillLoadingRoles'))
             return
         }
 
         if (rbacRoles.length === 0) {
             toast.error(
-                rbacRolesError ??
-                    'Role options are not available yet. Retry loading roles.',
+                rbacRolesError ?? t('serverSettings.roleOptionsNotAvailable'),
             )
             return
         }
@@ -333,9 +334,9 @@ export default function ServerSettingsPage() {
                 rbacGrants,
             )
             setRbacGrants(response.data.grants)
-            toast.success('Access control policy saved')
+            toast.success(t('serverSettings.accessControlSaved'))
         } catch {
-            toast.error('Failed to save access control policy')
+            toast.error(t('serverSettings.accessControlFailed'))
         } finally {
             setRbacSaving(false)
         }
@@ -346,10 +347,10 @@ export default function ServerSettingsPage() {
             <div className='flex flex-col items-center justify-center h-[60vh] text-center'>
                 <Settings className='w-16 h-16 text-lucky-text-tertiary mb-4' />
                 <h2 className='type-h2 text-lucky-text-primary mb-2'>
-                    No Server Selected
+                    {t('serverSettings.noServerSelected')}
                 </h2>
                 <p className='type-body text-lucky-text-secondary'>
-                    Select a server to manage settings
+                    {t('serverSettings.selectServerDescription')}
                 </p>
             </div>
         )
@@ -378,17 +379,19 @@ export default function ServerSettingsPage() {
             <div className='space-y-6'>
                 <header>
                     <h1 className='type-h1 text-lucky-text-primary'>
-                        Server Settings
+                        {t('serverSettings.title')}
                     </h1>
                     <p className='type-body text-lucky-text-secondary mt-1'>
-                        General configuration for {selectedGuild.name}
+                        {t('serverSettings.description', {
+                            name: selectedGuild.name,
+                        })}
                     </p>
                 </header>
                 <Card className='p-5 space-y-4'>
                     <div className='flex items-center gap-2 text-lucky-yellow'>
                         <AlertTriangle className='w-5 h-5' />
                         <h2 className='type-title text-lucky-text-primary'>
-                            Unable to load server settings
+                            {t('serverSettings.unableToLoadTitle')}
                         </h2>
                     </div>
                     <p className='type-body text-lucky-text-secondary'>
@@ -404,7 +407,7 @@ export default function ServerSettingsPage() {
                                 void loadSettings(selectedGuild.id)
                             }}
                         >
-                            Retry
+                            {t('serverSettings.retryButtonLabel')}
                         </Button>
                         {(settingsLoadError.kind === 'auth' ||
                             settingsLoadError.kind === 'forbidden') && (
@@ -412,7 +415,7 @@ export default function ServerSettingsPage() {
                                 href={api.auth.getDiscordLoginUrl()}
                                 className='type-body-sm text-lucky-text-secondary hover:text-lucky-text-primary'
                             >
-                                Re-authenticate
+                                {t('serverSettings.reAuthenticateLink')}
                             </a>
                         )}
                     </div>
@@ -426,8 +429,7 @@ export default function ServerSettingsPage() {
         rbacContent = (
             <div className='rounded-xl border border-lucky-border bg-lucky-bg-tertiary/50 p-4'>
                 <p className='type-body text-lucky-text-secondary'>
-                    Only server owner or users with Administrator/Manage Server
-                    permission can manage RBAC policy.
+                    {t('serverSettings.rbacCannotManage')}
                 </p>
             </div>
         )
@@ -459,7 +461,7 @@ export default function ServerSettingsPage() {
                                     }}
                                 >
                                     <RotateCcw className='w-4 h-4' />
-                                    Retry Roles
+                                    {t('serverSettings.retryRoles')}
                                 </Button>
                             )}
                         </div>
@@ -467,8 +469,7 @@ export default function ServerSettingsPage() {
                 )}
                 {rbacGrants.length === 0 ? (
                     <p className='type-body-sm text-lucky-text-tertiary'>
-                        No RBAC rules configured. Add a rule to grant module
-                        access.
+                        {t('serverSettings.noRbacRules')}
                     </p>
                 ) : (
                     rbacGrants.map((grant, index) => (
@@ -485,7 +486,11 @@ export default function ServerSettingsPage() {
                                 }
                             >
                                 <SelectTrigger className='bg-lucky-bg-tertiary border-lucky-border/60 text-lucky-text-primary text-sm'>
-                                    <SelectValue placeholder='Role' />
+                                    <SelectValue
+                                        placeholder={t(
+                                            'serverSettings.roleSelectPlaceholder',
+                                        )}
+                                    />
                                 </SelectTrigger>
                                 <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
                                     {rbacRoles.map((role) => (
@@ -508,7 +513,11 @@ export default function ServerSettingsPage() {
                                 }
                             >
                                 <SelectTrigger className='bg-lucky-bg-tertiary border-lucky-border/60 text-lucky-text-primary text-sm'>
-                                    <SelectValue placeholder='Module' />
+                                    <SelectValue
+                                        placeholder={t(
+                                            'serverSettings.moduleSelectPlaceholder',
+                                        )}
+                                    />
                                 </SelectTrigger>
                                 <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
                                     {RBAC_MODULES.map((module) => (
@@ -528,12 +537,18 @@ export default function ServerSettingsPage() {
                                 }
                             >
                                 <SelectTrigger className='bg-lucky-bg-tertiary border-lucky-border/60 text-lucky-text-primary text-sm'>
-                                    <SelectValue placeholder='Mode' />
+                                    <SelectValue
+                                        placeholder={t(
+                                            'serverSettings.modeSelectPlaceholder',
+                                        )}
+                                    />
                                 </SelectTrigger>
                                 <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
-                                    <SelectItem value='view'>view</SelectItem>
+                                    <SelectItem value='view'>
+                                        {t('serverSettings.modeView')}
+                                    </SelectItem>
                                     <SelectItem value='manage'>
-                                        manage
+                                        {t('serverSettings.modeManage')}
                                     </SelectItem>
                                 </SelectContent>
                             </Select>
@@ -544,7 +559,7 @@ export default function ServerSettingsPage() {
                                 size='sm'
                                 className='text-lucky-text-tertiary hover:text-lucky-error hover:bg-lucky-error/10 transition-colors'
                                 onClick={() => removeRbacGrant(index)}
-                                title='Remove rule'
+                                title={t('serverSettings.removeRuleTitle')}
                             >
                                 <Trash2 className='w-4 h-4' />
                             </Button>
@@ -564,9 +579,11 @@ export default function ServerSettingsPage() {
     return (
         <div className='space-y-6 lg:pb-0 pb-24'>
             <SectionHeader
-                eyebrow='Configuration'
-                title='Server Settings'
-                description={`General configuration for ${selectedGuild.name}`}
+                eyebrow={t('serverSettings.eyebrow')}
+                title={t('serverSettings.title')}
+                description={t('serverSettings.description', {
+                    name: selectedGuild.name,
+                })}
                 actions={
                     <Button
                         onClick={handleSave}
@@ -578,7 +595,7 @@ export default function ServerSettingsPage() {
                         ) : (
                             <Save className='w-4 h-4' />
                         )}
-                        Save Changes
+                        {t('serverSettings.saveChanges')}
                     </Button>
                 }
             />
@@ -593,34 +610,40 @@ export default function ServerSettingsPage() {
                     <div className='flex items-center gap-2'>
                         <Settings className='w-5 h-5 text-lucky-text-secondary' />
                         <h2 className='type-title text-lucky-text-primary'>
-                            General
+                            {t('serverSettings.general')}
                         </h2>
                     </div>
 
                     <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
                         <div className='space-y-2'>
                             <Label className='type-meta text-lucky-text-secondary flex items-center gap-1.5'>
-                                <UserCog className='w-3 h-3' /> Bot Nickname
+                                <UserCog className='w-3 h-3' />{' '}
+                                {t('serverSettings.botNickname')}
                             </Label>
                             <Input
                                 value={settings.nickname}
                                 onChange={(e) =>
                                     update('nickname', e.target.value)
                                 }
-                                placeholder='Lucky'
+                                placeholder={t(
+                                    'serverSettings.botNicknamePlaceholder',
+                                )}
                                 className='bg-lucky-bg-tertiary border-lucky-border text-white'
                             />
                         </div>
                         <div className='space-y-2'>
                             <Label className='type-meta text-lucky-text-secondary flex items-center gap-1.5'>
-                                <Hash className='w-3 h-3' /> Command Prefix
+                                <Hash className='w-3 h-3' />{' '}
+                                {t('serverSettings.commandPrefix')}
                             </Label>
                             <Input
                                 value={settings.commandPrefix}
                                 onChange={(e) =>
                                     update('commandPrefix', e.target.value)
                                 }
-                                placeholder='!'
+                                placeholder={t(
+                                    'serverSettings.commandPrefixPlaceholder',
+                                )}
                                 maxLength={3}
                                 className='bg-lucky-bg-tertiary border-lucky-border text-white w-24'
                             />
@@ -639,14 +662,15 @@ export default function ServerSettingsPage() {
                     <div className='flex items-center gap-2'>
                         <Globe className='w-5 h-5 text-lucky-text-secondary' />
                         <h2 className='type-title text-lucky-text-primary'>
-                            Region & Notifications
+                            {t('serverSettings.regionNotifications')}
                         </h2>
                     </div>
 
                     <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
                         <div className='space-y-2'>
                             <Label className='type-meta text-lucky-text-secondary flex items-center gap-1.5'>
-                                <Clock className='w-3 h-3' /> Timezone
+                                <Clock className='w-3 h-3' />{' '}
+                                {t('serverSettings.timezone')}
                             </Label>
                             <Select
                                 value={settings.timezone}
@@ -668,7 +692,8 @@ export default function ServerSettingsPage() {
                         </div>
                         <div className='space-y-2'>
                             <Label className='type-meta text-lucky-text-secondary flex items-center gap-1.5'>
-                                <Bell className='w-3 h-3' /> Updates Channel
+                                <Bell className='w-3 h-3' />{' '}
+                                {t('serverSettings.updatesChannel')}
                             </Label>
                             {channels.length > 0 ? (
                                 <Select
@@ -683,12 +708,16 @@ export default function ServerSettingsPage() {
                                     }
                                 >
                                     <SelectTrigger className='bg-lucky-bg-tertiary border-lucky-border text-white'>
-                                        <SelectValue placeholder='Select a channel...' />
+                                        <SelectValue
+                                            placeholder={t(
+                                                'serverSettings.selectChannelPlaceholder',
+                                            )}
+                                        />
                                     </SelectTrigger>
                                     <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
                                         <SelectItem value='__none__'>
                                             <span className='text-lucky-text-tertiary'>
-                                                None
+                                                {t('serverSettings.none')}
                                             </span>
                                         </SelectItem>
                                         {channels.map((ch) => (
@@ -710,7 +739,9 @@ export default function ServerSettingsPage() {
                                     onChange={(e) =>
                                         update('updatesChannel', e.target.value)
                                     }
-                                    placeholder='Channel ID for bot updates'
+                                    placeholder={t(
+                                        'serverSettings.channelIdPlaceholder',
+                                    )}
                                     className='bg-lucky-bg-tertiary border-lucky-border text-white'
                                 />
                             )}
@@ -730,10 +761,10 @@ export default function ServerSettingsPage() {
                         <Shield className='w-5 h-5 text-lucky-text-secondary' />
                         <div>
                             <h2 className='type-title text-lucky-text-primary'>
-                                Manager Roles
+                                {t('serverSettings.managerRoles')}
                             </h2>
                             <p className='type-meta text-lucky-text-tertiary mt-0.5 uppercase tracking-wide font-semibold'>
-                                Roles that can manage bot settings via commands
+                                {t('serverSettings.managerRolesDescription')}
                             </p>
                         </div>
                     </div>
@@ -748,7 +779,11 @@ export default function ServerSettingsPage() {
                                 }}
                             >
                                 <SelectTrigger className='bg-lucky-bg-tertiary border-lucky-border text-white h-9 text-sm'>
-                                    <SelectValue placeholder='Add a manager role...' />
+                                    <SelectValue
+                                        placeholder={t(
+                                            'serverSettings.addManagerRolePlaceholder',
+                                        )}
+                                    />
                                 </SelectTrigger>
                                 <SelectContent className='bg-lucky-bg-secondary border-lucky-border'>
                                     {availableManagerRoles.map((role) => (
@@ -792,7 +827,7 @@ export default function ServerSettingsPage() {
                         </div>
                     ) : (
                         <p className='type-body-sm text-lucky-text-tertiary'>
-                            No manager roles configured.
+                            {t('serverSettings.noManagerRoles')}
                         </p>
                     )}
                 </Card>
@@ -812,11 +847,12 @@ export default function ServerSettingsPage() {
                             </div>
                             <div>
                                 <h3 className='type-body-sm font-semibold text-lucky-text-primary'>
-                                    Disable Command Warnings
+                                    {t('serverSettings.disableCommandWarnings')}
                                 </h3>
                                 <p className='type-meta text-lucky-text-tertiary mt-0.5 uppercase tracking-wide font-semibold'>
-                                    Hide permission and cooldown warnings for
-                                    users
+                                    {t(
+                                        'serverSettings.disableWarningsDescription',
+                                    )}
                                 </p>
                             </div>
                         </div>
@@ -842,7 +878,7 @@ export default function ServerSettingsPage() {
                     ) : (
                         <Save className='w-4 h-4' />
                     )}
-                    Save Changes
+                    {t('serverSettings.saveChanges')}
                 </Button>
             </div>
 
@@ -859,10 +895,12 @@ export default function ServerSettingsPage() {
                             </div>
                             <div>
                                 <h2 className='type-title text-lucky-text-primary'>
-                                    Access Control
+                                    {t('serverSettings.accessControl')}
                                 </h2>
                                 <p className='type-body-sm text-lucky-text-tertiary mt-0.5 uppercase tracking-wide font-semibold'>
-                                    Assign role-based web dashboard permissions
+                                    {t(
+                                        'serverSettings.accessControlDescription',
+                                    )}
                                 </p>
                             </div>
                         </div>
@@ -877,12 +915,14 @@ export default function ServerSettingsPage() {
                                     title={
                                         !rbacLoading && rbacRoles.length === 0
                                             ? (rbacRolesError ??
-                                              'No assignable roles available right now.')
+                                              t(
+                                                  'serverSettings.noAssignableRoles',
+                                              ))
                                             : undefined
                                     }
                                 >
                                     <Plus className='w-4 h-4' />
-                                    Add Rule
+                                    {t('serverSettings.addRuleLabel')}
                                 </Button>
                                 <Button
                                     type='button'
@@ -895,7 +935,7 @@ export default function ServerSettingsPage() {
                                     ) : (
                                         <Save className='w-4 h-4' />
                                     )}
-                                    Save Policy
+                                    {t('serverSettings.saveAccessControl')}
                                 </Button>
                             </div>
                         )}
diff --git a/packages/frontend/src/pages/ServersPage.test.tsx b/packages/frontend/src/pages/ServersPage.test.tsx
index ee1aee0d6..98ea95f1d 100644
--- a/packages/frontend/src/pages/ServersPage.test.tsx
+++ b/packages/frontend/src/pages/ServersPage.test.tsx
@@ -12,6 +12,41 @@ vi.mock('@/components/Dashboard/ServerGrid', () => ({
     default: () => <div data-testid='server-grid'>ServerGrid</div>,
 }))
 
+// Translation key to English value mapping
+const translations: Record<string, string> = {
+    discordAccount: 'Discord Account',
+    totalServers: 'Total Servers',
+    serversLabel: 'Servers',
+    yourServers: 'Your Servers',
+    serversWithBot: '{{count}} servers — {{count2}} with Lucky installed',
+    navServers: 'Servers',
+    navPremium: 'Premium',
+    navSettings: 'Settings',
+    recentlyActive: 'Recently Active',
+    allOtherServers: 'All Other Servers',
+    luckyInstalled: 'Lucky installed',
+    inviteLucky: 'Invite Lucky',
+    noServersTitle: 'No servers yet',
+    noServersDescription: 'Join a Discord server and Lucky will appear here.',
+}
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key: string, options?: Record<string, any>) => {
+            if (options) {
+                // Handle interpolation like {{count}} and {{count2}}
+                let result = translations[key] || key
+                Object.entries(options).forEach(([k, v]) => {
+                    result = result.replace(`{{${k}}}`, String(v))
+                })
+                return result
+            }
+            return translations[key] || key
+        },
+        i18n: { language: 'en' },
+    }),
+}))
+
 const mockUser = { username: 'TestUser', avatar: null }
 const mockGuilds = [
     { id: '1', name: 'Server 1' },
diff --git a/packages/frontend/src/pages/ServersPage.tsx b/packages/frontend/src/pages/ServersPage.tsx
index 54cdd4fa0..894b2d65d 100644
--- a/packages/frontend/src/pages/ServersPage.tsx
+++ b/packages/frontend/src/pages/ServersPage.tsx
@@ -1,5 +1,6 @@
 import { Crown, LayoutGrid, Settings, ExternalLink } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import Skeleton from '@/components/ui/Skeleton'
 import ServerGrid from '@/components/Dashboard/ServerGrid'
@@ -10,6 +11,7 @@ import { cn } from '@/lib/utils'
 import { getUserAvatarUrl } from '@/lib/discord'
 
 export default function ServersPage() {
+    const { t } = useTranslation('servers')
     const guilds = useGuildStore((state) => state.guilds)
     const isLoading = useGuildStore((state) => state.isLoading)
     const user = useAuthStore((state) => state.user)
@@ -61,7 +63,7 @@ export default function ServersPage() {
 
                 <div className='space-y-1'>
                     <p className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
-                        Discord Account
+                        {t('discordAccount')}
                     </p>
                     <p className='text-lg font-semibold text-lucky-text-primary'>
                         {user?.username}
@@ -73,7 +75,7 @@ export default function ServersPage() {
 
                 <div className='ml-auto text-right flex-shrink-0'>
                     <p className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
-                        Total Servers
+                        {t('totalServers')}
                     </p>
                     <p className='text-2xl font-bold text-lucky-brand'>
                         {guilds.length}
@@ -86,37 +88,39 @@ export default function ServersPage() {
                     <div>
                         <div className='flex items-center gap-2'>
                             <h2 className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
-                                Servers
+                                {t('serversLabel')}
                             </h2>
                         </div>
                         <h1
                             className='text-3xl font-bold text-lucky-text-primary mt-2'
                             style={{ fontFamily: 'var(--font-lucky-display)' }}
                         >
-                            Your Servers
+                            {t('yourServers')}
                         </h1>
                         <p className='text-sm text-lucky-text-tertiary mt-2'>
-                            {guilds.length} servers — {withBotCount} with Lucky
-                            installed
+                            {t('serversWithBot', {
+                                count: guilds.length,
+                                count2: withBotCount,
+                            })}
                         </p>
                     </div>
                     <nav className='flex gap-2'>
                         {(
                             [
                                 {
-                                    label: 'Servers',
+                                    label: t('navServers'),
                                     icon: LayoutGrid,
                                     active: true,
                                     onClick: undefined,
                                 },
                                 {
-                                    label: 'Premium',
+                                    label: t('navPremium'),
                                     icon: Crown,
                                     active: false,
                                     onClick: () => navigate('/features'),
                                 },
                                 {
-                                    label: 'Settings',
+                                    label: t('navSettings'),
                                     icon: Settings,
                                     active: false,
                                     onClick: () => navigate('/settings'),
@@ -144,7 +148,7 @@ export default function ServersPage() {
                 {primaryGuild && (
                     <section className='space-y-3'>
                         <h2 className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
-                            Recently Active
+                            {t('recentlyActive')}
                         </h2>
                         <button
                             onClick={() =>
@@ -175,11 +179,11 @@ export default function ServersPage() {
                                     </h3>
                                     {primaryGuild.botAdded ? (
                                         <p className='text-xs text-lucky-success mt-1 inline-block'>
-                                            Lucky installed
+                                            {t('luckyInstalled')}
                                         </p>
                                     ) : (
                                         <p className='text-xs text-lucky-text-tertiary mt-1'>
-                                            Invite Lucky
+                                            {t('inviteLucky')}
                                         </p>
                                     )}
                                 </div>
@@ -192,7 +196,7 @@ export default function ServersPage() {
                 {secondaryGuilds.length > 0 && (
                     <section className='space-y-3'>
                         <h2 className='text-xs uppercase tracking-wider font-semibold text-lucky-text-tertiary'>
-                            All Other Servers
+                            {t('allOtherServers')}
                         </h2>
                         <ServerGrid />
                     </section>
@@ -204,10 +208,10 @@ export default function ServersPage() {
                             <LayoutGrid className='h-6 w-6 text-lucky-text-tertiary' />
                         </div>
                         <p className='text-lucky-text-primary font-medium mb-2'>
-                            No servers yet
+                            {t('noServersTitle')}
                         </p>
                         <p className='text-sm text-lucky-text-secondary'>
-                            Join a Discord server and Lucky will appear here.
+                            {t('noServersDescription')}
                         </p>
                     </div>
                 )}
diff --git a/packages/frontend/src/pages/Spotify.tsx b/packages/frontend/src/pages/Spotify.tsx
index 8853463e8..67020b750 100644
--- a/packages/frontend/src/pages/Spotify.tsx
+++ b/packages/frontend/src/pages/Spotify.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Check, ExternalLink, Link2, Loader2, Music, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { api } from '@/services/api'
 import SectionHeader from '@/components/ui/SectionHeader'
 
@@ -10,6 +11,7 @@ interface SpotifyStatus {
 }
 
 export default function SpotifyPage() {
+    const { t } = useTranslation('spotify')
     const [status, setStatus] = useState<SpotifyStatus | null>(null)
     const [isLoading, setIsLoading] = useState(true)
     const [error, setError] = useState<string | null>(null)
@@ -23,7 +25,7 @@ export default function SpotifyPage() {
             const response = await api.spotify.status()
             setStatus(response.data)
         } catch {
-            setError('Failed to load Spotify status')
+            setError(t('failedToLoadStatus'))
         } finally {
             setIsLoading(false)
         }
@@ -38,7 +40,7 @@ export default function SpotifyPage() {
     }
 
     const handleUnlink = async () => {
-        if (!confirm('Disconnect your Spotify account?')) return
+        if (!confirm(t('confirmDisconnect'))) return
 
         setIsUnlinking(true)
 
@@ -50,7 +52,7 @@ export default function SpotifyPage() {
                     : previous,
             )
         } catch {
-            setError('Failed to unlink account')
+            setError(t('failedToUnlink'))
         } finally {
             setIsUnlinking(false)
         }
@@ -60,9 +62,9 @@ export default function SpotifyPage() {
         return (
             <div className='space-y-6'>
                 <SectionHeader
-                    eyebrow='Music personalization'
-                    title='Spotify'
-                    description='Connect your Spotify account for personalized autoplay recommendations'
+                    eyebrow={t('eyebrow')}
+                    title={t('title')}
+                    description={t('description')}
                     actions={<Music className='h-5 w-5 text-lucky-accent' />}
                 />
                 <div className='surface-panel space-y-4 p-8'>
@@ -77,9 +79,9 @@ export default function SpotifyPage() {
     return (
         <div className='space-y-6'>
             <SectionHeader
-                eyebrow='Music personalization'
-                title='Spotify'
-                description='Connect your Spotify account for personalized autoplay recommendations'
+                eyebrow={t('eyebrow')}
+                title={t('title')}
+                description={t('description')}
                 actions={<Music className='h-5 w-5 text-lucky-accent' />}
             />
 
@@ -102,11 +104,10 @@ export default function SpotifyPage() {
                         </div>
                         <div className='flex-1'>
                             <h2 className='type-h2 text-lucky-text-primary'>
-                                Not Configured
+                                {t('notConfigured')}
                             </h2>
                             <p className='type-body-sm text-lucky-text-secondary mt-2'>
-                                Spotify integration is not configured. Ask the
-                                server owner to set:
+                                {t('notConfiguredDesc')}
                             </p>
                             <div className='mt-3 space-y-2 text-xs'>
                                 <code className='block rounded bg-lucky-bg-active px-2 py-1 text-lucky-text-body font-600'>
@@ -127,10 +128,10 @@ export default function SpotifyPage() {
                         </div>
                         <div className='flex-1'>
                             <h2 className='type-h2 text-lucky-text-primary'>
-                                Connected
+                                {t('connected')}
                             </h2>
                             <p className='type-body-sm text-lucky-text-secondary mt-1'>
-                                Linked as{' '}
+                                {t('linkedAs')}{' '}
                                 <a
                                     href={`https://open.spotify.com/user/${status.username}`}
                                     target='_blank'
@@ -143,13 +144,12 @@ export default function SpotifyPage() {
                             </p>
                         </div>
                         <div className='rounded-sm bg-lucky-success/15 px-3 py-1 text-xs font-semibold uppercase text-lucky-success'>
-                            Active
+                            {t('active')}
                         </div>
                     </div>
 
                     <p className='type-body-sm text-lucky-text-secondary border-t border-lucky-border pt-4'>
-                        Lucky can access your library and listening history to
-                        provide personalized autoplay recommendations.
+                        {t('accessExplanation')}
                     </p>
 
                     <button
@@ -162,19 +162,17 @@ export default function SpotifyPage() {
                         ) : (
                             <X className='h-4 w-4' />
                         )}
-                        Disconnect
+                        {t('disconnect')}
                     </button>
                 </section>
             ) : (
                 <section className='surface-panel space-y-6 border border-lucky-border p-8'>
                     <div>
                         <h2 className='type-h2 text-lucky-text-primary'>
-                            Connect Your Account
+                            {t('connectYourAccount')}
                         </h2>
                         <p className='type-body-sm text-lucky-text-secondary mt-2'>
-                            Link your Spotify account so Lucky can learn your
-                            music preferences and provide personalized autoplay
-                            recommendations.
+                            {t('connectDescription')}
                         </p>
                     </div>
 
@@ -183,7 +181,7 @@ export default function SpotifyPage() {
                         className='inline-flex items-center gap-2 rounded-lg bg-lucky-accent px-6 py-3 type-body-sm font-600 text-white transition-all hover:bg-lucky-accent-soft active:scale-95 lucky-focus-visible'
                     >
                         <Link2 className='h-4 w-4' />
-                        Connect with Spotify
+                        {t('connectWithSpotify')}
                     </button>
                 </section>
             )}
@@ -194,11 +192,10 @@ export default function SpotifyPage() {
                         <Music className='mt-1 h-5 w-5 text-lucky-accent flex-shrink-0' />
                         <div className='flex-1'>
                             <h3 className='type-title text-lucky-text-primary'>
-                                Smarter autoplay
+                                {t('smarterAutoplay')}
                             </h3>
                             <p className='type-body-sm text-lucky-text-secondary mt-2'>
-                                Lucky learns from your library, top tracks, and
-                                recent listening.
+                                {t('smarterAutoplayDesc')}
                             </p>
                         </div>
                     </div>
@@ -209,11 +206,10 @@ export default function SpotifyPage() {
                         <Link2 className='mt-1 h-5 w-5 text-lucky-text-tertiary flex-shrink-0' />
                         <div className='flex-1'>
                             <h3 className='type-title text-lucky-text-primary'>
-                                Privacy control
+                                {t('privacyControl')}
                             </h3>
                             <p className='type-body-sm text-lucky-text-secondary mt-2'>
-                                Disconnect anytime without affecting server
-                                playback.
+                                {t('privacyControlDesc')}
                             </p>
                         </div>
                     </div>
@@ -222,24 +218,21 @@ export default function SpotifyPage() {
 
             <section className='surface-panel space-y-4 border border-lucky-border p-8'>
                 <h3 className='type-title text-lucky-text-primary'>
-                    How it works
+                    {t('howItWorks')}
                 </h3>
                 <ol className='space-y-3 text-sm'>
-                    {[
-                        'Connect your Spotify account above',
-                        'Lucky accesses your library, top tracks, and recent listening',
-                        'When autoplay is active, Lucky recommends similar tracks based on your preferences',
-                        'Your library stays private and is only used for recommendations',
-                    ].map((step, i) => (
-                        <li key={i} className='flex items-start gap-3'>
-                            <span className='mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-sm bg-lucky-accent/20 text-xs font-semibold uppercase text-lucky-accent flex-shrink-0'>
-                                {i + 1}
-                            </span>
-                            <span className='type-body-sm text-lucky-text-secondary'>
-                                {step}
-                            </span>
-                        </li>
-                    ))}
+                    {[t('step1'), t('step2'), t('step3'), t('step4')].map(
+                        (step, i) => (
+                            <li key={i} className='flex items-start gap-3'>
+                                <span className='mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-sm bg-lucky-accent/20 text-xs font-semibold uppercase text-lucky-accent flex-shrink-0'>
+                                    {i + 1}
+                                </span>
+                                <span className='type-body-sm text-lucky-text-secondary'>
+                                    {step}
+                                </span>
+                            </li>
+                        ),
+                    )}
                 </ol>
             </section>
         </div>
diff --git a/packages/frontend/src/pages/Starboard.test.tsx b/packages/frontend/src/pages/Starboard.test.tsx
index 6739c12ee..8ede29fbe 100644
--- a/packages/frontend/src/pages/Starboard.test.tsx
+++ b/packages/frontend/src/pages/Starboard.test.tsx
@@ -15,6 +15,46 @@ vi.mock('sonner', () => ({
     },
 }))
 
+// Translation key to English value mapping for starboard namespace
+const translations: Record<string, string> = {
+    noServerSelected: 'No server selected',
+    selectServerToView: 'Select a server to view starboard settings',
+    topStarredMessages: 'Top Starred Messages',
+    noStarredMessages: 'No starred messages yet',
+    noStarredMessagesDesc:
+        'Configure the starboard below and members can start starring messages',
+    settings: 'Settings',
+    active: 'Active',
+    channelId: 'Channel ID',
+    emoji: 'Emoji',
+    starThreshold: 'Star Threshold',
+    allowSelfStar: 'Allow Self-Star',
+    save: 'Save',
+    saving: 'Saving...',
+    disableStarboard: 'Disable Starboard',
+    starboardSettingsSaved: 'Starboard settings saved',
+    failedToLoadSettings: 'Failed to load starboard settings',
+    failedToSaveSettings: 'Failed to save settings',
+    starboardDisabled: 'Starboard disabled',
+    failedToDeleteConfig: 'Failed to delete starboard config',
+}
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key: string, options?: Record<string, any>) => {
+            if (options) {
+                let result = translations[key] || key
+                Object.entries(options).forEach(([k, v]) => {
+                    result = result.replace(`{{${k}}}`, String(v))
+                })
+                return result
+            }
+            return translations[key] || key
+        },
+        i18n: { language: 'en' },
+    }),
+}))
+
 const mockGuild = {
     id: '123456',
     name: 'Test Guild',
diff --git a/packages/frontend/src/pages/Starboard.tsx b/packages/frontend/src/pages/Starboard.tsx
index 389697f9e..fa9be5445 100644
--- a/packages/frontend/src/pages/Starboard.tsx
+++ b/packages/frontend/src/pages/Starboard.tsx
@@ -1,5 +1,6 @@
 import { reportError } from '@/lib/sentry'
 import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import Card from '@/components/ui/Card'
 import Button from '@/components/ui/Button'
 import { Badge } from '@/components/ui/badge'
@@ -14,6 +15,7 @@ import { useGuildStore } from '@/stores/guildStore'
 import type { StarboardConfig, StarboardEntry } from '@/services/starboardApi'
 
 function Starboard() {
+    const { t } = useTranslation('starboard')
     const { selectedGuild } = useGuildStore()
     const [loading, setLoading] = useState(true)
     const [entries, setEntries] = useState<StarboardEntry[]>([])
@@ -64,7 +66,7 @@ function Starboard() {
                         component: 'Starboard',
                         action: 'loadData',
                     })
-                    toast.error('Failed to load starboard settings')
+                    toast.error(t('failedToLoadSettings'))
                 }
             } finally {
                 if (mounted) setLoading(false)
@@ -90,13 +92,13 @@ function Starboard() {
                 threshold: threshold || 3,
                 selfStar,
             })
-            toast.success('Starboard settings saved')
+            toast.success(t('starboardSettingsSaved'))
         } catch (error) {
             reportError('Failed to save starboard settings:', error, {
                 component: 'Starboard',
                 action: 'saveSettings',
             })
-            toast.error('Failed to save settings')
+            toast.error(t('failedToSaveSettings'))
         } finally {
             setSaving(false)
         }
@@ -113,13 +115,13 @@ function Starboard() {
             setEmoji('⭐')
             setThreshold(3)
             setSelfStar(false)
-            toast.success('Starboard disabled')
+            toast.success(t('starboardDisabled'))
         } catch (error) {
             reportError('Failed to disable starboard:', error, {
                 component: 'Starboard',
                 action: 'disable',
             })
-            toast.error('Failed to delete starboard config')
+            toast.error(t('failedToDeleteConfig'))
         } finally {
             setSaving(false)
         }
@@ -130,10 +132,10 @@ function Starboard() {
             <div className='flex flex-col items-center justify-center py-12'>
                 <div className='text-center'>
                     <p className='text-lg font-semibold text-lucky-text-primary mb-2'>
-                        No server selected
+                        {t('noServerSelected')}
                     </p>
                     <p className='text-sm text-lucky-text-secondary'>
-                        Select a server to view starboard settings
+                        {t('selectServerToView')}
                     </p>
                 </div>
             </div>
@@ -164,16 +166,15 @@ function Starboard() {
             {/* Entries */}
             <section>
                 <h2 className='type-title text-lucky-text-primary uppercase tracking-wide mb-4'>
-                    Top Starred Messages
+                    {t('topStarredMessages')}
                 </h2>
                 {entries.length === 0 ? (
                     <Card className='border border-lucky-border p-8 text-center'>
                         <p className='text-lg font-semibold text-lucky-text-primary mb-2'>
-                            No starred messages yet
+                            {t('noStarredMessages')}
                         </p>
                         <p className='text-sm text-lucky-text-secondary'>
-                            Configure the starboard below and members can start
-                            starring messages
+                            {t('noStarredMessagesDesc')}
                         </p>
                     </Card>
                 ) : (
@@ -207,13 +208,13 @@ function Starboard() {
             {/* Settings */}
             <section>
                 <h2 className='type-title text-lucky-text-primary uppercase tracking-wide mb-4'>
-                    Settings
+                    {t('settings')}
                 </h2>
                 <Card className='border border-lucky-border p-6 space-y-4'>
                     {config && (
                         <div className='mb-4'>
                             <Badge className='rounded-sm bg-lucky-success text-lucky-text-primary uppercase font-semibold text-xs'>
-                                Active
+                                {t('active')}
                             </Badge>
                         </div>
                     )}
@@ -223,7 +224,7 @@ function Starboard() {
                             htmlFor='channel'
                             className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold text-sm'
                         >
-                            Channel ID
+                            {t('channelId')}
                         </Label>
                         <Input
                             id='channel'
@@ -240,7 +241,7 @@ function Starboard() {
                             htmlFor='emoji'
                             className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold text-sm'
                         >
-                            Emoji
+                            {t('emoji')}
                         </Label>
                         <Input
                             id='emoji'
@@ -257,7 +258,7 @@ function Starboard() {
                             htmlFor='threshold'
                             className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold text-sm'
                         >
-                            Star Threshold
+                            {t('starThreshold')}
                         </Label>
                         <Input
                             id='threshold'
@@ -281,7 +282,7 @@ function Starboard() {
                             htmlFor='selfStar'
                             className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold text-sm'
                         >
-                            Allow Self-Star
+                            {t('allowSelfStar')}
                         </Label>
                         <Switch
                             id='selfStar'
@@ -297,7 +298,7 @@ function Starboard() {
                             disabled={saving}
                             className='flex-1'
                         >
-                            {saving ? 'Saving...' : 'Save'}
+                            {saving ? t('saving') : t('save')}
                         </Button>
                         {config && (
                             <Button
@@ -305,7 +306,7 @@ function Starboard() {
                                 disabled={saving}
                                 variant='secondary'
                             >
-                                Disable Starboard
+                                {t('disableStarboard')}
                             </Button>
                         )}
                     </div>
diff --git a/packages/frontend/src/pages/TrackHistory.tsx b/packages/frontend/src/pages/TrackHistory.tsx
index 5cda6918a..5d7635cc7 100644
--- a/packages/frontend/src/pages/TrackHistory.tsx
+++ b/packages/frontend/src/pages/TrackHistory.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { History, BarChart3, Music2, User, Trash2, Clock } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { useGuildSelection } from '@/hooks/useGuildSelection'
 import { api } from '@/services/api'
 import StatTile from '@/components/ui/StatTile'
@@ -43,6 +44,7 @@ function formatTimeAgo(timestamp: number): string {
 const PAGE_SIZE = 50
 
 export default function TrackHistoryPage() {
+    const { t } = useTranslation()
     const { selectedGuild } = useGuildSelection()
     const guildId = selectedGuild?.id
     const [history, setHistory] = useState<TrackEntry[]>([])
@@ -80,7 +82,7 @@ export default function TrackHistoryPage() {
                 }
                 setTotal(histRes.data.total)
             } catch {
-                setError('Failed to load track history')
+                setError(t('trackHistory.failedToLoadHistory'))
             } finally {
                 setIsLoading(false)
                 setIsLoadingMore(false)
@@ -108,7 +110,7 @@ export default function TrackHistoryPage() {
             setTotal(0)
             setPage(1)
         } catch {
-            setError('Failed to clear history')
+            setError(t('trackHistory.failedToClearHistory'))
         }
     }
 
@@ -120,8 +122,8 @@ export default function TrackHistoryPage() {
         return (
             <EmptyState
                 icon={<History className='h-10 w-10' aria-hidden='true' />}
-                title='No Server Selected'
-                description='Select a server to view track history'
+                title={t('trackHistory.noServerSelected')}
+                description={t('trackHistory.selectServerToViewHistory')}
             />
         )
     }
@@ -132,7 +134,7 @@ export default function TrackHistoryPage() {
                 <div className='flex items-center gap-3'>
                     <History className='h-6 w-6 text-lucky-error' />
                     <h1 className='type-h2 text-lucky-text-primary'>
-                        Track History
+                        {t('trackHistory.trackHistory')}
                     </h1>
                 </div>
                 {history.length > 0 && (
@@ -141,7 +143,7 @@ export default function TrackHistoryPage() {
                         className='flex items-center gap-2 px-3 min-h-[44px] type-body-sm rounded-sm bg-lucky-error/10 text-lucky-error hover:bg-lucky-error/20 transition-colors font-semibold uppercase'
                     >
                         <Trash2 className='w-4 h-4' />
-                        Clear
+                        {t('trackHistory.clear')}
                     </button>
                 )}
             </header>
@@ -167,26 +169,32 @@ export default function TrackHistoryPage() {
                         <div className='grid grid-cols-2 sm:grid-cols-4 gap-3'>
                             <StatTile
                                 icon={<Music2 className='w-4 h-4' />}
-                                label='Tracks Played'
+                                label={t('trackHistory.tracksPlayed')}
                                 value={stats.totalTracks}
                                 tone='brand'
                             />
                             <StatTile
                                 icon={<Clock className='w-4 h-4' />}
-                                label='Play Time'
+                                label={t('trackHistory.playTime')}
                                 value={formatPlayTime(stats.totalPlayTime)}
                                 tone='neutral'
                             />
                             <StatTile
                                 icon={<User className='w-4 h-4' />}
-                                label='Top Artist'
-                                value={stats.topArtists[0]?.artist ?? 'None'}
+                                label={t('trackHistory.topArtist')}
+                                value={
+                                    stats.topArtists[0]?.artist ??
+                                    t('trackHistory.none')
+                                }
                                 tone='accent'
                             />
                             <StatTile
                                 icon={<BarChart3 className='w-4 h-4' />}
-                                label='Most Played'
-                                value={stats.topTracks[0]?.title ?? 'None'}
+                                label={t('trackHistory.mostPlayed')}
+                                value={
+                                    stats.topTracks[0]?.title ??
+                                    t('trackHistory.none')
+                                }
                                 tone='warning'
                             />
                         </div>
@@ -195,14 +203,14 @@ export default function TrackHistoryPage() {
                     {stats && stats.topTracks.length > 0 && (
                         <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
                             <RankingCard
-                                title='Top Tracks'
+                                title={t('trackHistory.topTracks')}
                                 items={stats.topTracks.map((t) => ({
                                     label: t.title,
                                     count: t.plays,
                                 }))}
                             />
                             <RankingCard
-                                title='Top Artists'
+                                title={t('trackHistory.topArtists')}
                                 items={stats.topArtists.map((a) => ({
                                     label: a.artist,
                                     count: a.plays,
@@ -214,11 +222,14 @@ export default function TrackHistoryPage() {
                     <div className='space-y-1'>
                         <div className='flex items-center justify-between px-1 mb-3'>
                             <h2 className='type-meta text-lucky-text-tertiary uppercase tracking-wide font-semibold'>
-                                Recent Tracks
+                                {t('trackHistory.recentTracks')}
                             </h2>
                             {total > 0 && (
                                 <span className='type-body-sm text-lucky-text-tertiary'>
-                                    Showing {history.length} of {total}
+                                    {t('trackHistory.showing', {
+                                        count: history.length,
+                                        total: total,
+                                    })}
                                 </span>
                             )}
                         </div>
@@ -230,8 +241,10 @@ export default function TrackHistoryPage() {
                                         aria-hidden='true'
                                     />
                                 }
-                                title='No tracks played yet'
-                                description='Play some music to see your history here'
+                                title={t('trackHistory.noTracksPlayed')}
+                                description={t(
+                                    'trackHistory.playMusicToSeeHistory',
+                                )}
                                 className='min-h-[180px]'
                             />
                         ) : (
@@ -302,8 +315,11 @@ export default function TrackHistoryPage() {
                                         className='w-full mt-4 px-4 py-3 rounded-sm border border-lucky-border text-lucky-text-secondary type-body-sm font-semibold uppercase hover:text-lucky-text-primary hover:bg-lucky-bg-active transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
                                     >
                                         {isLoadingMore
-                                            ? 'Loading...'
-                                            : `Load More (${total - history.length} remaining)`}
+                                            ? t('trackHistory.loading')
+                                            : t('trackHistory.loadMore', {
+                                                  remaining:
+                                                      total - history.length,
+                                              })}
                                     </button>
                                 )}
                             </div>
diff --git a/packages/frontend/src/pages/TwitchNotifications.test.tsx b/packages/frontend/src/pages/TwitchNotifications.test.tsx
index 1adae0821..6bd7f0f78 100644
--- a/packages/frontend/src/pages/TwitchNotifications.test.tsx
+++ b/packages/frontend/src/pages/TwitchNotifications.test.tsx
@@ -2,9 +2,51 @@ import { describe, test, expect, vi, beforeEach } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { MemoryRouter } from 'react-router-dom'
+import { I18nextProvider } from 'react-i18next'
+import i18next from 'i18next'
 import TwitchNotificationsPage from './TwitchNotifications'
 import { api } from '@/services/api'
 import { ApiError } from '@/services/ApiError'
+import * as en from '@/locales/en.json'
+import * as ptBR from '@/locales/pt-BR.json'
+
+// Create a test i18n instance
+const testI18n = i18next.createInstance()
+testI18n.init({
+    lng: 'en',
+    fallbackLng: 'en',
+    ns: ['translation', 'twitch'],
+    defaultNS: 'translation',
+    resources: {
+        en: {
+            translation: en,
+            twitch: (en as any).twitch,
+        },
+        'pt-BR': {
+            translation: ptBR,
+            twitch: (ptBR as any).twitch,
+        },
+    },
+    interpolation: { escapeValue: false },
+    returnNull: false,
+})
+
+vi.mock('react-i18next', async () => {
+    const actual = await vi.importActual('react-i18next')
+    return {
+        ...actual,
+        useTranslation: (ns?: string) => {
+            const namespace = ns || 'translation'
+            return {
+                t: (key: string, options?: any) => {
+                    const fullKey = namespace ? `${namespace}:${key}` : key
+                    return testI18n.t(fullKey, options)
+                },
+                i18n: testI18n,
+            }
+        },
+    }
+})
 
 vi.mock('@/services/api')
 vi.mock('@/hooks/useGuildSelection')
@@ -61,9 +103,11 @@ function mockGuildSelection(guild: typeof mockGuild | null) {
 
 function renderPage() {
     return render(
-        <MemoryRouter>
-            <TwitchNotificationsPage />
-        </MemoryRouter>,
+        <I18nextProvider i18n={testI18n}>
+            <MemoryRouter>
+                <TwitchNotificationsPage />
+            </MemoryRouter>
+        </I18nextProvider>,
     )
 }
 
@@ -86,6 +130,7 @@ async function fillNotificationForm(
 describe('TwitchNotificationsPage', () => {
     beforeEach(() => {
         vi.clearAllMocks()
+        void testI18n.changeLanguage('en')
         Object.defineProperty(
             globalThis.HTMLElement.prototype,
             'scrollIntoView',
diff --git a/packages/frontend/src/pages/TwitchNotifications.tsx b/packages/frontend/src/pages/TwitchNotifications.tsx
index 3a42bb420..6b777d572 100644
--- a/packages/frontend/src/pages/TwitchNotifications.tsx
+++ b/packages/frontend/src/pages/TwitchNotifications.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { Tv, Plus, Trash2, Hash } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { useGuildSelection } from '@/hooks/useGuildSelection'
 import { api } from '@/services/api'
 import { ApiError } from '@/services/ApiError'
@@ -31,6 +32,7 @@ function getErrorMessage(error: unknown, fallback: string): string {
 }
 
 export default function TwitchNotificationsPage() {
+    const { t } = useTranslation('twitch')
     const { selectedGuild } = useGuildSelection()
     const guildId = selectedGuild?.id
     const [notifications, setNotifications] = useState<TwitchNotification[]>([])
@@ -90,7 +92,10 @@ export default function TwitchNotificationsPage() {
             ) {
                 return
             }
-            setError('Failed to load Twitch notifications')
+            setError(
+                t('failedToLoadNotifications') ||
+                    'Failed to load Twitch notifications',
+            )
         } finally {
             if (
                 requestId === notificationsRequestIdRef.current &&
@@ -122,7 +127,9 @@ export default function TwitchNotificationsPage() {
                 return
             }
             setChannels([])
-            setChannelsError('Failed to load Discord channels')
+            setChannelsError(
+                t('failedToLoadChannels') || 'Failed to load Discord channels',
+            )
         }
     }, [])
 
@@ -178,7 +185,7 @@ export default function TwitchNotificationsPage() {
         const requestGuildId = guildId
         const login = parseTwitchLogin(newTwitchInput)
         if (!login) {
-            setError('Enter a valid Twitch URL or login')
+            setError(t('invalidTwitchInput'))
             return
         }
 
@@ -189,7 +196,7 @@ export default function TwitchNotificationsPage() {
                     (item) => item.twitchUserId === lookup.data.id,
                 )
             ) {
-                setError('This Twitch channel is already configured')
+                setError(t('alreadyConfigured'))
                 return
             }
 
@@ -205,7 +212,7 @@ export default function TwitchNotificationsPage() {
                 await loadNotifications(requestGuildId)
             }
         } catch (error) {
-            setError(getErrorMessage(error, 'Failed to add notification'))
+            setError(getErrorMessage(error, t('failedToAddNotification')))
         }
     }
 
@@ -217,7 +224,7 @@ export default function TwitchNotificationsPage() {
                 prev.filter((n) => n.twitchUserId !== twitchUserId),
             )
         } catch (error) {
-            setError(getErrorMessage(error, 'Failed to remove notification'))
+            setError(getErrorMessage(error, t('failedToRemoveNotification')))
         }
     }
 
@@ -238,7 +245,7 @@ export default function TwitchNotificationsPage() {
         if (notifications.length === 0) {
             return (
                 <div className='text-center py-12 text-lucky-text-tertiary'>
-                    No Twitch notifications configured
+                    {t('noNotificationsConfigured')}
                 </div>
             )
         }
@@ -266,7 +273,9 @@ export default function TwitchNotificationsPage() {
                         <button
                             onClick={() => handleRemove(notif.twitchUserId)}
                             className='lucky-focus-visible p-1.5 rounded-sm text-lucky-text-tertiary hover:text-lucky-error hover:bg-lucky-error/10 transition-colors opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 cursor-pointer'
-                            aria-label={`Remove ${notif.twitchLogin}`}
+                            aria-label={t('removeAriaLabel', {
+                                login: notif.twitchLogin,
+                            })}
                         >
                             <Trash2 className='w-4 h-4' />
                         </button>
@@ -280,9 +289,7 @@ export default function TwitchNotificationsPage() {
         return (
             <div className='flex flex-col items-center justify-center h-64 text-lucky-text-secondary'>
                 <Tv className='h-12 w-12 mb-4 opacity-50' />
-                <p className='text-lg'>
-                    Select a server to manage Twitch notifications
-                </p>
+                <p className='text-lg'>{t('selectServerToManage')}</p>
             </div>
         )
     }
@@ -293,17 +300,14 @@ export default function TwitchNotificationsPage() {
                 <header className='flex items-center gap-3'>
                     <Tv className='h-6 w-6 text-purple-500' />
                     <h1 className='type-title text-lucky-text-primary uppercase tracking-wide'>
-                        Twitch Notifications
+                        {t('twitchNotifications')}
                     </h1>
                 </header>
                 <div className='p-4 rounded-sm bg-lucky-error/10 border border-lucky-error text-lucky-error'>
                     <p className='font-semibold uppercase tracking-wide mb-1'>
-                        Not Configured
-                    </p>
-                    <p className='text-sm'>
-                        Twitch API is not configured on this server. Contact the
-                        server administrator to set up Twitch credentials.
+                        {t('notConfigured')}
                     </p>
+                    <p className='text-sm'>{t('notConfiguredDesc')}</p>
                 </div>
             </div>
         )
@@ -315,7 +319,7 @@ export default function TwitchNotificationsPage() {
                 <div className='flex items-center gap-3'>
                     <Tv className='h-6 w-6 text-purple-500' />
                     <h1 className='type-title text-lucky-text-primary uppercase tracking-wide'>
-                        Twitch Notifications
+                        {t('twitchNotifications')}
                     </h1>
                     <span className='text-sm text-lucky-text-tertiary'>
                         ({notifications.length})
@@ -327,7 +331,7 @@ export default function TwitchNotificationsPage() {
                     className='flex cursor-pointer items-center gap-2 rounded-sm bg-purple-600/10 px-3 py-1.5 text-sm text-purple-400 font-semibold uppercase transition-colors hover:bg-purple-600/20 disabled:opacity-50 disabled:cursor-not-allowed'
                 >
                     <Plus className='w-4 h-4' />
-                    Add
+                    {t('add')}
                 </button>
             </header>
 
@@ -340,17 +344,17 @@ export default function TwitchNotificationsPage() {
             {showAdd && (
                 <div className='p-4 rounded-sm bg-lucky-bg-tertiary border border-lucky-border space-y-3'>
                     <h3 className='type-body-sm font-semibold text-lucky-text-primary uppercase tracking-wide'>
-                        Add Twitch Notification
+                        {t('addTwitchNotification')}
                     </h3>
                     <div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
                         <label htmlFor='twitch-login-input' className='sr-only'>
-                            Twitch URL or login
+                            {t('twitchUrlOrLogin')}
                         </label>
                         <input
                             id='twitch-login-input'
                             type='text'
-                            aria-label='Twitch URL or login'
-                            placeholder='Twitch URL or login (e.g. https://twitch.tv/luk)'
+                            aria-label={t('twitchUrlOrLogin')}
+                            placeholder={t('twitchUrlPlaceholder')}
                             value={newTwitchInput}
                             onChange={(e) => setNewTwitchInput(e.target.value)}
                             className='px-3 py-2 text-sm rounded-sm bg-lucky-bg-active border border-lucky-border text-white placeholder:text-lucky-text-tertiary focus:outline-none focus:border-purple-500'
@@ -362,7 +366,9 @@ export default function TwitchNotificationsPage() {
                             }
                         >
                             <SelectTrigger className='bg-lucky-bg-active border-lucky-border text-white'>
-                                <SelectValue placeholder='Select Discord channel' />
+                                <SelectValue
+                                    placeholder={t('selectDiscordChannel')}
+                                />
                             </SelectTrigger>
                             <SelectContent className='bg-lucky-bg-secondary border-lucky-border text-white'>
                                 {channels.map((channel) => (
@@ -391,13 +397,13 @@ export default function TwitchNotificationsPage() {
                             }
                             className='px-4 py-1.5 text-sm font-semibold uppercase rounded-sm bg-purple-600 text-white hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer'
                         >
-                            Save
+                            {t('save')}
                         </button>
                         <button
                             onClick={() => setShowAdd(false)}
                             className='px-4 py-1.5 text-sm font-semibold uppercase rounded-sm bg-lucky-bg-active text-lucky-text-secondary hover:text-white transition-colors cursor-pointer'
                         >
-                            Cancel
+                            {t('cancel')}
                         </button>
                     </div>
                 </div>

From 2cefbf09643cc59954850919d6e82e2d65a6d93b Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucas.diassantana@gmail.com>
Date: Tue, 23 Jun 2026 17:53:51 -0300
Subject: [PATCH 7/7] fix(config): mark decorative chevron/arrow icons
 aria-hidden
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Address CodeRabbit a11y note — the ChevronRight/ArrowLeft icons next to text
labels are decorative; hide them from screen readers.
---
 packages/frontend/src/pages/Config.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/Config.tsx b/packages/frontend/src/pages/Config.tsx
index 69d03cf47..894c835e1 100644
--- a/packages/frontend/src/pages/Config.tsx
+++ b/packages/frontend/src/pages/Config.tsx
@@ -163,7 +163,10 @@ export default function ConfigPage() {
                                                     'cubic-bezier(0.2, 0, 0, 1)',
                                             }}
                                         >
-                                            <ChevronRight className='w-4 h-4' />
+                                            <ChevronRight
+                                                className='w-4 h-4'
+                                                aria-hidden='true'
+                                            />
                                         </div>
                                     </button>
                                 )
@@ -180,7 +183,10 @@ export default function ConfigPage() {
                                 onClick={() => setSelectedModule(null)}
                                 className='gap-2 text-lucky-text-secondary hover:text-lucky-text-primary'
                             >
-                                <ArrowLeft className='w-4 h-4' />{' '}
+                                <ArrowLeft
+                                    className='w-4 h-4'
+                                    aria-hidden='true'
+                                />{' '}
                                 {t('config.back')}
                             </Button>
                         </div>