diff --git a/package-lock.json b/package-lock.json
index e548439..18f1116 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@atproto/api": "^0.16.9",
         "@tailwindcss/postcss": "^4.1.13",
+        "clsx": "^2.1.1",
         "dayjs": "^1.11.18",
         "exifreader": "^4.32.0",
         "jimp": "^1.6.0",
@@ -3596,6 +3597,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
diff --git a/package.json b/package.json
index 30ee24e..b5563bd 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@atproto/api": "^0.16.9",
     "@tailwindcss/postcss": "^4.1.13",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.18",
     "exifreader": "^4.32.0",
     "jimp": "^1.6.0",
diff --git a/src/app/drafts/page.tsx b/src/app/drafts/page.tsx
index dcc1fe6..844887e 100644
--- a/src/app/drafts/page.tsx
+++ b/src/app/drafts/page.tsx
@@ -4,16 +4,17 @@ import { Callout } from '@/components/ui/callout'
 import { LinkButton } from '@/components/ui/forms'
 import DraftsProvider from '@/providers/DraftsProvider'
 import { Plus } from 'lucide-react'
+import TwoColumn from '@/components/ui/TwoColumn'
 
 export default async function Drafts() {
   return (
     <DraftsProvider>
-      <div className="flex flex-col-reverse md:flex-row justify-center gap-4">
-        <main className="*:w-full md:w-1/2">
+      <TwoColumn reverseStack>
+        <TwoColumn.Main>
           <DraftListFilters />
           <DraftPostList />
-        </main>
-        <aside className="*:w-full md:w-1/2">
+        </TwoColumn.Main>
+        <TwoColumn.Side>
           <h1 className="text-2xl font-bold mb-4">Draft List</h1>
           <div className="mt-2">
             <LinkButton
@@ -43,8 +44,8 @@ export default async function Drafts() {
               </p>
             </Callout>
           </div>
-        </aside>
-      </div>
+        </TwoColumn.Side>
+      </TwoColumn>
     </DraftsProvider>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bc97707..516ad2b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,17 +5,18 @@ import BskyBackupProvider from '@/providers/BskyBackupProvider'
 import DraftProvider from '@/providers/DraftsProvider'
 import Link from '@/components/ui/link'
 import { Callout } from '@/components/ui/callout'
+import TwoColumn from '@/components/ui/TwoColumn'
 
 export default async function Home() {
   return (
     <DraftProvider>
       <BskyBackupProvider>
-        <div className="flex flex-col-reverse md:flex-row justify-center gap-4">
-          <main className="w-full md:w-1/2">
+        <TwoColumn reverseStack stackPoint="md">
+          <TwoColumn.Main>
             <BackupToolBar />
             <BackupPostList />
-          </main>
-          <aside className="w-full md:w-1/2">
+          </TwoColumn.Main>
+          <TwoColumn.Side>
             <h1 className="text-2xl font-bold mb-4">Backup</h1>
             <p className="mb-4">
               This tool helps you back up your posts from Bluesky to your local
@@ -36,8 +37,8 @@ export default async function Home() {
               </p>
             </Callout>
             <Stats />
-          </aside>
-        </div>
+          </TwoColumn.Side>
+        </TwoColumn>
       </BskyBackupProvider>
     </DraftProvider>
   )
diff --git a/src/app/schedules/page.tsx b/src/app/schedules/page.tsx
index 3aecb92..7b0b84d 100644
--- a/src/app/schedules/page.tsx
+++ b/src/app/schedules/page.tsx
@@ -16,6 +16,10 @@ export default function SchedulesPage() {
   const [isEditing, setIsEditing] = useState(false)
   const [editForm, setEditForm] = useState<Partial<Schedule>>({})
 
+  const handleCancel = () => {
+    setIsEditing(false)
+  }
+
   const handleEdit = (schedule: Schedule) => {
     setSelectedSchedule(schedule)
     setEditForm(schedule)
@@ -42,9 +46,9 @@ export default function SchedulesPage() {
     <AppDataProvider>
       <DraftProvider>
         <ScheduleProvider>
-          <div className="max-w-7xl mx-auto">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-              {/* Schedule List */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow max-w-xl mx-auto">
+            {/* Schedule List */}
+            {!selectedSchedule && !isEditing && (
               <ErrorBoundary>
                 <ScheduleList
                   onEdit={handleEdit}
@@ -54,49 +58,31 @@ export default function SchedulesPage() {
                   setSelectedSchedule={setSelectedSchedule}
                 />
               </ErrorBoundary>
+            )}
+
+            {selectedSchedule && !isEditing && (
+              <ErrorBoundary>
+                <ScheduleDetails
+                  schedule={selectedSchedule!}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
+                  onBack={() => setSelectedSchedule(null)}
+                />
+              </ErrorBoundary>
+            )}
 
-              {/* Edit Panel */}
-              <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
-                <div className="p-6 border-b border-gray-200 dark:border-gray-700">
-                  <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-                    {isEditing
-                      ? selectedSchedule
-                        ? 'Edit Schedule'
-                        : 'Create Schedule'
-                      : 'Schedule Details'}
-                  </h2>
-                </div>
-                <div className="p-6">
-                  {selectedSchedule || isEditing ? (
-                    <div className="space-y-4">
-                      {isEditing ? (
-                        <ErrorBoundary>
-                          <ScheduleEditForm
-                            schedule={selectedSchedule}
-                            editForm={editForm}
-                            setEditForm={setEditForm}
-                            onSave={handleSave}
-                            setIsEditing={setIsEditing}
-                          />
-                        </ErrorBoundary>
-                      ) : (
-                        <ErrorBoundary>
-                          <ScheduleDetails
-                            schedule={selectedSchedule!}
-                            onEdit={handleEdit}
-                            onDelete={handleDelete}
-                          />
-                        </ErrorBoundary>
-                      )}
-                    </div>
-                  ) : (
-                    <p className="text-gray-500">
-                      Select a schedule to view details
-                    </p>
-                  )}
-                </div>
-              </div>
-            </div>
+            {/* Edit Panel */}
+            {isEditing && (
+              <ErrorBoundary>
+                <ScheduleEditForm
+                  schedule={selectedSchedule}
+                  editForm={editForm}
+                  setEditForm={setEditForm}
+                  onSave={handleSave}
+                  onCancel={handleCancel}
+                />
+              </ErrorBoundary>
+            )}
           </div>
         </ScheduleProvider>
       </DraftProvider>
diff --git a/src/app/settings/components/SettingsForm.tsx b/src/app/settings/components/SettingsForm.tsx
index 0061a73..51d0965 100644
--- a/src/app/settings/components/SettingsForm.tsx
+++ b/src/app/settings/components/SettingsForm.tsx
@@ -49,7 +49,7 @@ export default function SettingsForm() {
       onSubmit={handleSubmit}
       className="space-y-6 bg-color-gray-200 dark:bg-gray-900 p-6 rounded-lg"
     >
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <SettingsField
           label="Bluesky Display Name"
           name="bskyDisplayName"
diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx
index 627b0b7..f046082 100644
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@@ -1,29 +1,60 @@
-import { HEADER_NAV_ITEMS } from "@/config/frontend";
-import Link from "next/link";
+'use client'
+import { HEADER_NAV_ITEMS } from '@/config/frontend'
+import Link from 'next/link'
+import { Menu } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from './ui/forms'
+import { clsx } from 'clsx'
 
-const HeaderNav = () => (
-  <div className="flex justify-between border-b border-gray-200 dark:border-gray-700">
-    <nav>
-      <ul className="flex gap-4 list-none m-0 p-0 block">
-        {HEADER_NAV_ITEMS.map((item) => (
-          <li key={item.href} className="inline-block p-4">
-            <Link
-              href={item.href}
-              className="p-4 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-            >
-              {item.label}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
-    <div className="flex items-center px-4 border-l border-gray-200 dark:border-gray-700 dark:bg-blue-950 bg-blue-200 dark:text-white text-blue-950">
-      <span className="text-sm font-bold mr-8">
-        Local backup, drafts &amp; scheduling for Bluesky.
-      </span>
-      <h1 className="text-2xl font-bold">BskyBackup</h1>
+const styles = {
+  navBar:
+    'relative flex flex-row items-stretch justify-between border-b border-gray-200 dark:border-gray-700',
+  logoContainer:
+    'flex items-center p-4 border-l border-gray-200 bg-blue-200 text-blue-950 dark:border-gray-700 dark:bg-blue-950 dark:text-white',
+  logoText: 'text-2xl font-bold',
+  navMenu:
+    'absolute top-full right-0 lg:relative lg:top-auto lg:right-auto lg:block',
+  navList:
+    'list-none h-full border-gray-200 border-1 flex flex-col px-10 py-5 bg-[var(--background)] dark:border-gray-800 lg:border-0 lg:items-center lg:flex-row lg:gap-4 lg:m-0 lg:p-0',
+  navItem: 'p-4 lg:inline-block',
+  navLink:
+    'p-4 rounded text-gray-700 hover:text-blue-600 active:text-blue-900 active:bg-blue-500 transition-colors dark:text-gray-200 dark:hover:text-blue-400 dark:active:text-blue-200',
+  hamburgerButton: 'flex items-center px-4 lg:hidden',
+}
+
+const HeaderNav = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  return (
+    <div className={styles.navBar}>
+      <div className={styles.logoContainer}>
+        <div className={styles.logoText}>BskyBackup</div>
+      </div>
+
+      {/* Nav: hidden on lg and below unless menu is open */}
+      <nav className={clsx([isMenuOpen ? 'block' : 'hidden', styles.navMenu])}>
+        <ul className={styles.navList}>
+          {HEADER_NAV_ITEMS.map((item) => (
+            <li key={item.href} className={styles.navItem}>
+              <Link href={item.href} className={styles.navLink}>
+                {item.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      {/* Hamburger button for mobile */}
+      <Button
+        className={styles.hamburgerButton}
+        aria-label="Toggle navigation menu"
+        color="primary"
+        variant="icon"
+        onClick={() => setIsMenuOpen((open) => !open)}
+      >
+        <Menu className="w-6 h-6" />
+      </Button>
     </div>
-  </div>
-);
+  )
+}
 
-export default HeaderNav;
+export default HeaderNav
diff --git a/src/components/schedules/FrequencyInput.tsx b/src/components/schedules/FrequencyInput.tsx
index 11054d3..628490a 100644
--- a/src/components/schedules/FrequencyInput.tsx
+++ b/src/components/schedules/FrequencyInput.tsx
@@ -214,11 +214,11 @@ export default function FrequencyInput({
         {interval.unit === 'weeks' && (
           <div>
             <Label>Days of the Week</Label>
-            <div className="flex flex-wrap gap-2 mt-2">
+            <div className="grid grid-cols-4 gap-2 mt-2 w-full">
               {WEEKDAYS.map((day) => (
                 <label
                   key={day}
-                  className="flex items-center space-x-1 text-sm"
+                  className="flex items-center space-x-1 text-md"
                 >
                   <input
                     type="checkbox"
diff --git a/src/components/schedules/ScheduleDetails.tsx b/src/components/schedules/ScheduleDetails.tsx
index fc97a28..1c7cfb2 100644
--- a/src/components/schedules/ScheduleDetails.tsx
+++ b/src/components/schedules/ScheduleDetails.tsx
@@ -4,15 +4,18 @@ import { Button, Label, LinkButton } from '../ui/forms'
 import { displayTime, formatFullDateTime } from '@/helpers/utils'
 import { useEffect, useState } from 'react'
 import Post from '../Post'
+import { ArrowLeftIcon, PencilIcon, TrashIcon, ShareIcon } from 'lucide-react'
 
 export default function ScheduleDetails({
   schedule,
   onEdit,
   onDelete,
+  onBack,
 }: {
   schedule: Schedule
   onEdit: (schedule: Schedule) => void
   onDelete: (id: string) => void
+  onBack: () => void
 }) {
   const { deleteSchedule, triggerSchedule, getScheduleLookups } =
     useScheduleContext()
@@ -44,7 +47,7 @@ export default function ScheduleDetails({
   }, [schedule.id, getScheduleLookups])
 
   return (
-    <>
+    <div className="p-6">
       <div className="flex flex-row justify-between gap-4">
         <div>
           <div className="flex flex-col gap-4">
@@ -131,19 +134,26 @@ export default function ScheduleDetails({
           </div>
         </div>
         <div className="flex flex-col gap-2">
+          <Button
+            onClick={() => onBack()}
+            color="secondary"
+            variant="secondary"
+          >
+            <ArrowLeftIcon className="w-4 h-4 mr-1" /> Back
+          </Button>
           <Button
             onClick={() => onEdit(schedule)}
             color="primary"
             variant="primary"
           >
-            Edit Schedule
+            <PencilIcon className="w-4 h-4 mr-1" /> Edit Schedule
           </Button>
           <Button
             onClick={() => schedule.id && handleDelete(schedule.id)}
             color="danger"
             variant="primary"
           >
-            Delete Schedule
+            <TrashIcon className="w-4 h-4 mr-1" /> Delete Schedule
           </Button>
           {lookups?.nextPost && (
             <Button
@@ -151,7 +161,7 @@ export default function ScheduleDetails({
               variant="primary"
               color="tertiary"
             >
-              Post Now
+              <ShareIcon className="w-4 h-4 mr-1" /> Post Now
             </Button>
           )}
           {schedule.group && (
@@ -166,21 +176,21 @@ export default function ScheduleDetails({
         </div>
       </div>
       {lookups && lookups.nextPostDates.length > 0 ? (
-        <div>
+        <div className="mt-4">
           <Label>Next Post Date</Label>
           <div>{formatFullDateTime(lookups.nextPostDates[0])}</div>
         </div>
       ) : (
-        <div>No next post date available.</div>
+        <div className="mt-4 font-bold">No next post date available.</div>
       )}
       {lookups?.nextPost ? (
-        <div>
+        <div className="mt-4">
           <Label>Next Post</Label>
           <Post draftPost={lookups.nextPost} variant="compact" />
         </div>
       ) : (
-        <div>No upcoming posts.</div>
+        <div className="mt-4 font-bold">No upcoming posts.</div>
       )}
-    </>
+    </div>
   )
 }
diff --git a/src/components/schedules/ScheduleEditForm.tsx b/src/components/schedules/ScheduleEditForm.tsx
index 38b98b1..2e6cb2f 100644
--- a/src/components/schedules/ScheduleEditForm.tsx
+++ b/src/components/schedules/ScheduleEditForm.tsx
@@ -1,30 +1,29 @@
-import React from "react";
-import { Schedule, CreateScheduleRequest } from "@/types/scheduler";
-import { useScheduleContext } from "@/providers/ScheduleProvider";
-import FrequencyInput from "./FrequencyInput";
-import { Input, Label, Checkbox, Button } from "../ui/forms";
-import TimezoneSelect from "./TimezoneSelect";
-import { GroupSelect } from "../GroupSelect";
+import React from 'react'
+import { Schedule, CreateScheduleRequest } from '@/types/scheduler'
+import { useScheduleContext } from '@/providers/ScheduleProvider'
+import FrequencyInput from './FrequencyInput'
+import { Input, Label, Checkbox, Button } from '../ui/forms'
+import { GroupSelect } from '../GroupSelect'
 
 export default function ScheduleEditForm({
   schedule,
   editForm,
   setEditForm,
   onSave,
-  setIsEditing,
+  onCancel,
 }: {
-  schedule: Schedule | null;
-  editForm: Partial<Schedule>;
-  setEditForm: React.Dispatch<React.SetStateAction<Partial<Schedule>>>;
-  onSave: () => void;
-  setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
+  schedule: Schedule | null
+  editForm: Partial<Schedule>
+  setEditForm: React.Dispatch<React.SetStateAction<Partial<Schedule>>>
+  onSave: () => void
+  onCancel: React.Dispatch<React.SetStateAction<boolean>>
 }) {
-  const { createSchedule, updateSchedule } = useScheduleContext();
+  const { createSchedule, updateSchedule } = useScheduleContext()
 
   const handleSave = async () => {
     if (!editForm.name || !editForm.frequency) {
-      alert("Name and Frequency are required");
-      return;
+      alert('Name and Frequency are required')
+      return
     }
 
     if (schedule && editForm.id) {
@@ -35,31 +34,31 @@ export default function ScheduleEditForm({
         isActive: editForm.isActive || false,
         frequency: editForm.frequency,
         platforms: editForm.platforms || [],
-        group: editForm.group || "default",
-      };
-      await updateSchedule(updatedSchedule);
+        group: editForm.group || 'default',
+      }
+      await updateSchedule(updatedSchedule)
     } else {
       // Create new schedule
       const newSchedule: CreateScheduleRequest = {
-        name: editForm.name || "",
+        name: editForm.name || '',
         isActive: editForm.isActive || false,
         frequency: editForm.frequency,
         platforms: editForm.platforms || [],
-        group: editForm.group || "default",
-      };
-      await createSchedule(newSchedule);
+        group: editForm.group || 'default',
+      }
+      await createSchedule(newSchedule)
     }
-    await onSave();
-  };
+    await onSave()
+  }
   return (
-    <>
+    <div className="p-6">
       <div className="flex flex-col md:flex-row gap-4">
         <div className="flex-1">
           <Label htmlFor="name">Name</Label>
           <Input
             type="text"
             id="name"
-            value={editForm.name || ""}
+            value={editForm.name || ''}
             onChange={(e) =>
               setEditForm((prev) => ({
                 ...prev,
@@ -78,19 +77,19 @@ export default function ScheduleEditForm({
               setEditForm((prev) => ({
                 ...prev,
                 group,
-              }));
+              }))
             }}
           />
         </div>
       </div>
-      <div>
+      <div className="my-4">
         <FrequencyInput
           value={editForm.frequency}
           onChange={(frequency) => {
             setEditForm((prev) => ({
               ...prev,
               frequency,
-            }));
+            }))
           }}
         />
       </div>
@@ -116,8 +115,8 @@ export default function ScheduleEditForm({
         </Button>
         <Button
           onClick={() => {
-            setIsEditing(false);
-            setEditForm({});
+            onCancel(false)
+            setEditForm({})
           }}
           color="secondary"
           variant="primary"
@@ -125,6 +124,6 @@ export default function ScheduleEditForm({
           Cancel
         </Button>
       </div>
-    </>
-  );
+    </div>
+  )
 }
diff --git a/src/components/schedules/ScheduleList.tsx b/src/components/schedules/ScheduleList.tsx
index 51ee85f..28f13d8 100644
--- a/src/components/schedules/ScheduleList.tsx
+++ b/src/components/schedules/ScheduleList.tsx
@@ -20,7 +20,7 @@ export default function ScheduleList({
 }) {
   const { schedules } = useScheduleContext()
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
+    <>
       <div className="p-6 border-b border-gray-200 dark:border-gray-700">
         <div className="flex justify-between items-center">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
@@ -36,6 +36,11 @@ export default function ScheduleList({
         </div>
       </div>
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        {schedules.length === 0 && (
+          <div className="p-4 text-gray-500 dark:text-gray-400">
+            No schedules found.
+          </div>
+        )}
         {schedules
           .sort((a, b) => a.name.localeCompare(b.name))
           .map((schedule) => (
@@ -65,6 +70,6 @@ export default function ScheduleList({
             </button>
           ))}
       </div>
-    </div>
+    </>
   )
 }
diff --git a/src/components/ui/TwoColumn.tsx b/src/components/ui/TwoColumn.tsx
new file mode 100644
index 0000000..1a7154c
--- /dev/null
+++ b/src/components/ui/TwoColumn.tsx
@@ -0,0 +1,184 @@
+/** biome-ignore-all lint/suspicious/noArrayIndexKey: Need it for columns */
+import clsx from 'clsx'
+import { cloneElement } from 'react'
+
+interface TwoColumnProps {
+  reverseStack?: boolean
+  stackPoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  children?: React.ReactNode
+}
+
+interface ColumnProps {
+  children?: React.ReactNode
+  stackPoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  className?: string
+}
+
+export default function TwoColumn({
+  reverseStack = false,
+  stackPoint = 'md',
+  children,
+}: TwoColumnProps) {
+  const setChildProps = (children: React.ReactNode) => {
+    if (!children) return
+    if (!Array.isArray(children)) return children
+
+    return children.map((child, index) => {
+      if (
+        child &&
+        typeof child === 'object' &&
+        'type' in child &&
+        ((child as any).type === Main ||
+          (child as any).type === Side ||
+          (child as any).type === Column)
+      ) {
+        const clone = cloneElement(child, {
+          stackPoint,
+          key: `two-column-child-${index}`,
+        })
+        return clone
+      }
+      return child
+    })
+  }
+
+  let stackClasses = null
+  switch (stackPoint) {
+    case 'xs':
+      stackClasses = 'w-full'
+      break
+    case 'sm':
+      stackClasses = 'sm:flex-row'
+      break
+    case 'md':
+      stackClasses = 'md:flex-row'
+      break
+    case 'lg':
+      stackClasses = 'lg:flex-row'
+      break
+    case 'xl':
+      stackClasses = 'xl:flex-row'
+      break
+    case '2xl':
+      stackClasses = '2xl:flex-row'
+      break
+    default:
+      stackClasses = 'md:flex-row'
+      break
+  }
+
+  return (
+    <div
+      className={clsx(
+        'w-full flex justify-center gap-4 items-baseline',
+        stackClasses,
+        reverseStack ? 'flex-col-reverse' : 'flex-col'
+      )}
+    >
+      {setChildProps(children)}
+    </div>
+  )
+}
+
+function Column({ children, stackPoint = 'md', className }: ColumnProps) {
+  let stackClasses = null
+  switch (stackPoint) {
+    case 'xs':
+      stackClasses = 'w-full'
+      break
+    case 'sm':
+      stackClasses = 'sm:w-1/2'
+      break
+    case 'md':
+      stackClasses = 'md:w-1/2'
+      break
+    case 'lg':
+      stackClasses = 'lg:w-1/2'
+      break
+    case 'xl':
+      stackClasses = 'xl:w-1/2'
+      break
+    case '2xl':
+      stackClasses = '2xl:w-1/2'
+      break
+    default:
+      stackClasses = 'md:w-1/2'
+      break
+  }
+
+  return (
+    <div className={clsx('w-full px-4 py-6', stackClasses, className)}>
+      {children}
+    </div>
+  )
+}
+
+function Main({ children, stackPoint = 'md', className }: ColumnProps) {
+  let stackClasses = null
+  switch (stackPoint) {
+    case 'xs':
+      stackClasses = 'w-full'
+      break
+    case 'sm':
+      stackClasses = 'sm:w-2/3 xl:w-1/2'
+      break
+    case 'md':
+      stackClasses = 'md:w-2/3 xl:w-1/2'
+      break
+    case 'lg':
+      stackClasses = 'lg:w-2/3 xl:w-1/2'
+      break
+    case 'xl':
+      stackClasses = 'xl:w-2/3 2xl:w-1/2'
+      break
+    case '2xl':
+      stackClasses = '2xl:w-2/3'
+      break
+    default:
+      stackClasses = 'md:w-2/3'
+      break
+  }
+
+  return (
+    <main className={clsx('w-full px-4 py-6', stackClasses, className)}>
+      {children}
+    </main>
+  )
+}
+
+function Side({ children, stackPoint = 'md', className }: ColumnProps) {
+  let stackClasses = null
+  switch (stackPoint) {
+    case 'xs':
+      stackClasses = 'w-full'
+      break
+    case 'sm':
+      stackClasses = 'sm:w-1/3 xl:w-1/2'
+      break
+    case 'md':
+      stackClasses = 'md:w-1/3 xl:w-1/2'
+      break
+    case 'lg':
+      stackClasses = 'lg:w-1/3 xl:w-1/2'
+      break
+    case 'xl':
+      stackClasses = 'xl:w-1/3 2xl:w-1/2'
+      break
+    case '2xl':
+      stackClasses = '2xl:w-1/3'
+      break
+    default:
+      stackClasses = 'md:w-1/3'
+      break
+  }
+
+  return (
+    <aside className={clsx('w-full px-4 py-6', stackClasses, className)}>
+      {children}
+    </aside>
+  )
+}
+
+TwoColumn.Main = Main
+TwoColumn.Side = Side
+TwoColumn.Column = Column