diff --git a/client/src/pages/DashboardPage.tsx b/client/src/pages/DashboardPage.tsx
index 62f95353..584a9e5d 100644
--- a/client/src/pages/DashboardPage.tsx
+++ b/client/src/pages/DashboardPage.tsx
@@ -21,6 +21,7 @@ import {
 import { formatTime, splitReservationDateTime } from '../utils/formatters'
 import { convertDistance, getDistanceUnitLabel } from '../utils/units'
 import { useSettingsStore } from '../store/settingsStore'
+import { normalizeAppearance } from '@trek/shared'
 import '../styles/dashboard.css'
 
 const GRADIENTS = [
@@ -92,6 +93,17 @@ export default function DashboardPage(): React.ReactElement {
     handleCreate, handleUpdate, confirmDelete, handleArchive, handleUnarchive, confirmCopy,
   } = useDashboard()
 
+  // Per-device dashboard widget visibility (from the appearance config).
+  const isMobile = useIsMobile()
+  const appearanceCfg = useSettingsStore(s => s.settings.appearance)
+  const dashCfg = normalizeAppearance(appearanceCfg).dashboard
+  const sideWidgets = isMobile ? dashCfg.mobile : dashCfg.desktop
+  const showCurrency = sideWidgets.currency
+  const showTimezones = sideWidgets.timezones
+  const showUpcoming = sideWidgets.upcomingReservations
+  // Desktop has a master toggle for the whole right column; off → centered layout.
+  const sidebarVisible = (isMobile || dashCfg.desktop.sidebar) && (showCurrency || showTimezones || showUpcoming)
+
   return (
     <>
       {/* Navbar lives outside .trek-dash so it keeps the app-wide font + button
@@ -102,7 +114,7 @@ export default function DashboardPage(): React.ReactElement {
       {demoMode && <DemoBanner />}
       <div className="trek-dash-scroll">
         <MobileTopBar />
-        <main className="page">
+        <main className="page" data-no-sidebar={sidebarVisible ? undefined : 'true'}>
           <div className="page-main">
             {loadError && (
               <div className="dash-error" role="alert">
@@ -176,11 +188,13 @@ export default function DashboardPage(): React.ReactElement {
             </section>
           </div>
 
-          <aside className="page-sidebar">
-            <CurrencyTool />
-            <TimezoneTool locale={locale} />
-            <UpcomingTool items={upcoming} locale={locale} onOpen={(tripId) => navigate(`/trips/${tripId}`)} />
-          </aside>
+          {sidebarVisible && (
+            <aside className="page-sidebar">
+              {showCurrency && <CurrencyTool />}
+              {showTimezones && <TimezoneTool locale={locale} />}
+              {showUpcoming && <UpcomingTool items={upcoming} locale={locale} onOpen={(tripId) => navigate(`/trips/${tripId}`)} />}
+            </aside>
+          )}
         </main>
       </div>
 
@@ -370,9 +384,28 @@ function formatCompactDistance(value: number): string {
   return String(rounded)
 }
 
-function AtlasStats({ stats }: { stats: TravelStats | null }): React.ReactElement {
+function AtlasStats({ stats }: { stats: TravelStats | null }): React.ReactElement | null {
   const { t } = useTranslation()
   const distanceUnit = useSettingsStore(s => s.settings.distance_unit) || 'metric'
+  const appearance = useSettingsStore(s => s.settings.appearance)
+  const isMobile = useIsMobile()
+  const dash = normalizeAppearance(appearance).dashboard
+
+  // Per-device widget visibility. Atlas + distance are desktop-only tiles.
+  const showAtlas = !isMobile && dash.desktop.atlas
+  const showTrips = isMobile ? dash.mobile.tripsTotal : dash.desktop.tripsTotal
+  const showDays = isMobile ? dash.mobile.daysTraveled : dash.desktop.daysTraveled
+  const showDistance = !isMobile && dash.desktop.distanceFlown
+  if (!showAtlas && !showTrips && !showDays && !showDistance) return null
+
+  // Reflow: the grid spreads the visible tiles to full width (the passport stays
+  // proportionally wider). Set as CSS vars so the responsive media queries still win.
+  const atlasTemplate =
+    [dash.desktop.atlas && '1.5fr', dash.desktop.tripsTotal && '1fr', dash.desktop.daysTraveled && '1fr', dash.desktop.distanceFlown && '1fr']
+      .filter(Boolean).join(' ') || '1fr'
+  const atlasTemplateM =
+    [dash.mobile.tripsTotal && '1fr', dash.mobile.daysTraveled && '1fr'].filter(Boolean).join(' ') || '1fr'
+
   const countries = stats?.countries || []
   const distanceKm = stats?.totalDistanceKm || 0
   const distance = convertDistance(distanceKm, distanceUnit)
@@ -382,48 +415,56 @@ function AtlasStats({ stats }: { stats: TravelStats | null }): React.ReactElemen
   const distanceLabel = getDistanceUnitLabel(distanceUnit)
 
   return (
-    <section className="atlas">
-      <div className="atlas-card passport">
-        <div className="label">{t('dashboard.atlas.countriesVisited')}</div>
-        <div className="value mono">{countries.length} <span className="unit text-[oklch(1_0_0_/_.55)]">{t('dashboard.atlas.ofTotal', { total: 195 })}</span></div>
-        <div className="passport-flags">
-          {countries.slice(0, 5).map((c, i) => (
-            <span key={i} className="flag" title={c}>
-              <img src={`https://flagcdn.com/w40/${c.toLowerCase()}.png`} alt={c} loading="lazy" />
-            </span>
-          ))}
-          {countries.length > 5 && <span className="flag more">+{countries.length - 5}</span>}
+    <section className="atlas" style={{ '--atlas-template': atlasTemplate, '--atlas-template-m': atlasTemplateM } as React.CSSProperties}>
+      {showAtlas && (
+        <div className="atlas-card passport">
+          <div className="label">{t('dashboard.atlas.countriesVisited')}</div>
+          <div className="value mono">{countries.length} <span className="unit text-[oklch(1_0_0_/_.55)]">{t('dashboard.atlas.ofTotal', { total: 195 })}</span></div>
+          <div className="passport-flags">
+            {countries.slice(0, 5).map((c, i) => (
+              <span key={i} className="flag" title={c}>
+                <img src={`https://flagcdn.com/w40/${c.toLowerCase()}.png`} alt={c} loading="lazy" />
+              </span>
+            ))}
+            {countries.length > 5 && <span className="flag more">+{countries.length - 5}</span>}
+          </div>
+          <div className="delta" />
         </div>
-        <div className="delta" />
-      </div>
+      )}
 
-      <div className="atlas-card">
-        <div className="label">{t('dashboard.atlas.tripsTotal')}</div>
-        <div className="value mono">{stats?.totalTrips ?? 0}</div>
-        <div className="delta">{t('dashboard.atlas.placesMapped', { count: stats?.totalPlaces ?? 0 })}</div>
-        <svg className="spark" width="80" height="36" viewBox="0 0 80 36">
-          <polyline points="0,30 12,26 22,28 32,18 44,22 56,10 68,14 80,4" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      </div>
+      {showTrips && (
+        <div className="atlas-card">
+          <div className="label">{t('dashboard.atlas.tripsTotal')}</div>
+          <div className="value mono">{stats?.totalTrips ?? 0}</div>
+          <div className="delta">{t('dashboard.atlas.placesMapped', { count: stats?.totalPlaces ?? 0 })}</div>
+          <svg className="spark" width="80" height="36" viewBox="0 0 80 36">
+            <polyline points="0,30 12,26 22,28 32,18 44,22 56,10 68,14 80,4" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </div>
+      )}
 
-      <div className="atlas-card">
-        <div className="label">{t('dashboard.atlas.daysTraveled')}</div>
-        <div className="value mono">{stats?.totalDays ?? 0} <span className="unit">{t('dashboard.atlas.daysUnit')}</span></div>
-        <div className="delta">{t('dashboard.atlas.acrossAllTrips')}</div>
-        <svg className="spark" width="80" height="36" viewBox="0 0 80 36">
-          <path d="M0 30 Q10 24 20 26 T40 20 T60 14 T80 10" fill="none" strokeWidth="2" strokeLinecap="round" />
-        </svg>
-      </div>
+      {showDays && (
+        <div className="atlas-card">
+          <div className="label">{t('dashboard.atlas.daysTraveled')}</div>
+          <div className="value mono">{stats?.totalDays ?? 0} <span className="unit">{t('dashboard.atlas.daysUnit')}</span></div>
+          <div className="delta">{t('dashboard.atlas.acrossAllTrips')}</div>
+          <svg className="spark" width="80" height="36" viewBox="0 0 80 36">
+            <path d="M0 30 Q10 24 20 26 T40 20 T60 14 T80 10" fill="none" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+        </div>
+      )}
 
-      <div className="atlas-card">
-        <div className="label">{t('dashboard.atlas.distanceFlown')}</div>
-        <div className="value mono">{distanceText} <span className="unit">{distanceLabel}</span></div>
-        <div className="delta">{t('dashboard.atlas.aroundEquator', { count: equatorTimes })}</div>
-        <svg className="spark" width="80" height="36" viewBox="0 0 80 36">
-          <circle cx="40" cy="18" r="14" fill="none" stroke="oklch(0.88 0.01 70)" strokeWidth="2" />
-          <circle cx="40" cy="18" r="14" fill="none" strokeWidth="2" strokeDasharray="58 88" strokeLinecap="round" transform="rotate(-90 40 18)" />
-        </svg>
-      </div>
+      {showDistance && (
+        <div className="atlas-card">
+          <div className="label">{t('dashboard.atlas.distanceFlown')}</div>
+          <div className="value mono">{distanceText} <span className="unit">{distanceLabel}</span></div>
+          <div className="delta">{t('dashboard.atlas.aroundEquator', { count: equatorTimes })}</div>
+          <svg className="spark" width="80" height="36" viewBox="0 0 80 36">
+            <circle cx="40" cy="18" r="14" fill="none" stroke="oklch(0.88 0.01 70)" strokeWidth="2" />
+            <circle cx="40" cy="18" r="14" fill="none" strokeWidth="2" strokeDasharray="58 88" strokeLinecap="round" transform="rotate(-90 40 18)" />
+          </svg>
+        </div>
+      )}
     </section>
   )
 }
diff --git a/client/src/styles/dashboard.css b/client/src/styles/dashboard.css
index aaa45fb8..0337767a 100644
--- a/client/src/styles/dashboard.css
+++ b/client/src/styles/dashboard.css
@@ -103,6 +103,9 @@
   align-items: start;
 }
 .trek-dash .page-main { min-width: 0; }
+/* Right sidebar disabled → single centered column. */
+.trek-dash .page[data-no-sidebar="true"] { grid-template-columns: 1fr; }
+.trek-dash .page[data-no-sidebar="true"] .page-main { max-width: 1080px; margin-inline: auto; width: 100%; }
 .trek-dash .page-sidebar {
   position: sticky;
   top: 24px;
@@ -318,7 +321,7 @@
 .trek-dash .pass-cell.countdown { gap: 6px; }
 
 /* ----------------- atlas / stats ----------------- */
-.trek-dash .atlas { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 56px; }
+.trek-dash .atlas { display: grid; grid-template-columns: var(--atlas-template, 1.5fr 1fr 1fr 1fr); gap: 16px; margin-bottom: 56px; }
 .trek-dash .atlas-card {
   background: var(--glass-bg); border-radius: var(--r-lg); padding: 24px 26px;
   border: 1px solid var(--glass-border);
@@ -599,7 +602,7 @@
 
   /* Atlas → single row of stat cards. Passport (countries) and distance are
      hidden on mobile; only Trips total + Days traveled remain. */
-  .trek-dash .atlas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 26px; }
+  .trek-dash .atlas { display: grid; grid-template-columns: var(--atlas-template-m, 1fr 1fr); gap: 10px; margin: 0 0 26px; }
   .trek-dash .atlas-card.passport,
   .trek-dash .atlas-card:last-child { display: none; }
   .trek-dash .atlas .spark { display: none; }