diff --git a/src/client/components/SettingsPage.tsx b/src/client/components/SettingsPage.tsx
index 2c2f325..05ec4ac 100644
--- a/src/client/components/SettingsPage.tsx
+++ b/src/client/components/SettingsPage.tsx
@@ -46,13 +46,13 @@ export function SettingsPage({ render }: { render: () => void }) {
 
   return (
     <Main>
-      <MainHeader>
+      <MainHeader centered>
         <MainTitle>Settings</MainTitle>
         <HeaderActions>
           <Button onClick={goBack}>Back</Button>
         </HeaderActions>
       </MainHeader>
-      <MainContent>
+      <MainContent centered>
         <Section>
           <SectionTitle>Install CLI</SectionTitle>
           <DashboardInstallCmd>
diff --git a/src/client/styles/layout.ts b/src/client/styles/layout.ts
index 4148285..d87581c 100644
--- a/src/client/styles/layout.ts
+++ b/src/client/styles/layout.ts
@@ -148,6 +148,13 @@ export const MainHeader = define('MainHeader', {
   justifyContent: 'space-between',
   padding: '0 24px',
   borderBottom: `1px solid ${theme('colors-border')}`,
+  variants: {
+    centered: {
+      maxWidth: 560,
+      margin: '0 auto',
+      width: '100%',
+    },
+  },
 })
 
 export const MainTitle = define('MainTitle', {
@@ -196,6 +203,13 @@ export const MainContent = define('MainContent', {
   flexDirection: 'column',
   padding: '10px 24px',
   overflow: 'hidden',
+  variants: {
+    centered: {
+      maxWidth: 560,
+      margin: '0 auto',
+      width: '100%',
+    },
+  },
 })
 
 export const DashboardContainer = define('DashboardContainer', {