diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro
new file mode 100644
index 0000000..718bfa3
--- /dev/null
+++ b/src/components/ThemeProvider.astro
@@ -0,0 +1,26 @@
+---
+---
+
+<script is:inline>
+	const getThemePreference = () => {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+			return localStorage.getItem('theme');
+		}
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	};
+
+	const isDark = getThemePreference() === 'dark';
+
+	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+
+	if (typeof localStorage !== 'undefined') {
+		const observer = new MutationObserver(() => {
+			const isDark = document.documentElement.classList.contains('dark');
+			localStorage.setItem('theme', isDark ? 'dark' : 'light');
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['class'],
+		});
+	}
+</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 775aba3..8982ad6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import '../styles/global.css';
 import { Sprite } from 'astro-icon';
 
+import ThemeProvider from '../components/ThemeProvider.astro';
 export interface Props {
 	title: string;
 }
@@ -10,10 +11,7 @@ const { title, frontmatter } = Astro.props;
 ---
 
 <!DOCTYPE html>
-<html
-	lang="en"
-	class="no-js box-border scroll-smooth bg-shibui-100 text-[125%] text-shibui-950 dark:bg-shibui-900 dark:text-shibui-200/[0.87]"
->
+<html lang="en" class="no-js box-border scroll-smooth">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -33,21 +31,24 @@ const { title, frontmatter } = Astro.props;
 		<!-- <link rel="manifest" href="/manifest.webmanifest" /> -->
 
 		<link
-			rel="preload"
-			href="/assets/fonts/secuela-regular-vf.woff2"
 			as="font"
-			type="font/woff2"
 			crossorigin
+			href="/assets/fonts/secuela-regular-vf.woff2"
+			rel="preload"
+			type="font/woff2"
 		/>
 		<link
-			rel="preload"
-			href="/assets/fonts/secuela-italic-vf.woff2"
 			as="font"
-			type="font/woff2"
 			crossorigin
+			href="/assets/fonts/secuela-italic-vf.woff2"
+			rel="preload"
+			type="font/woff2"
 		/>
+		<ThemeProvider />
 	</head>
-	<body class="flex h-screen flex-col font-sans font-normal leading-relaxed">
+	<body
+		class="flex h-screen flex-col bg-shibui-100 font-sans text-[125%] font-normal leading-relaxed text-shibui-950 dark:bg-shibui-900 dark:text-shibui-200/[0.87]"
+	>
 		<Sprite.Provider>
 			<header
 				class="page-header grid grid-cols-18 grid-rows-layout mbe-layout print:hidden"
@@ -80,12 +81,11 @@ const { title, frontmatter } = Astro.props;
 				Footer
 			</footer>
 		</Sprite.Provider>
+		<style>
+			:global([astro-icon]) {
+				width: 24px;
+				height: 24px;
+			}
+		</style>
 	</body>
 </html>
-
-<style>
-	[astro-icon] {
-		width: 24px;
-		height: 24px;
-	}
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c966d60..e80f993 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,4 +2,6 @@
 import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Homepage">Homepage</Layout>
+<Layout title="Homepage">
+	<h1>Homepage</h1>
+</Layout>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f2809d0..810a0b0 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	darkMode: 'class',
 	theme: {
 		extend: {
 			screens: {
@@ -10,6 +11,7 @@ module.exports = {
 				'3xl': '1800px', // --wide
 			},
 			colors: {
+				accent: '#e60510',
 				shibui: {
 					50: '#f3f3f1',
 					100: '#e6e6e3', // bg (light), fg (dark, 0.87 alpha)
@@ -40,6 +42,36 @@ module.exports = {
 			gridTemplateRows: ({ theme }) => ({
 				layout: `clamp(3rem, ${theme('spacing.55')}, 9rem)`,
 			}),
+			columns: {
+				13: '13',
+				14: '14',
+				15: '15',
+				16: '16',
+				17: '17',
+				18: '18',
+			},
+			gridColumn: {
+				'span-13': 'span 13 / span 13',
+				'span-14': 'span 14 / span 14',
+				'span-15': 'span 15 / span 15',
+				'span-16': 'span 16 / span 16',
+				'span-17': 'span 17 / span 17',
+				'span-18': 'span 18 / span 18',
+			},
+			gridColumnStart: {
+				14: '14',
+				15: '15',
+				16: '16',
+				17: '17',
+				18: '18',
+			},
+			gridColumnEnd: {
+				14: '14',
+				15: '15',
+				16: '16',
+				17: '17',
+				18: '18',
+			},
 			borderRadius: {
 				1: '2px', // --radius-1
 				2: '5px', // --radius-2
