diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..edbd296
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,34 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+		node: true
+	},
+	parser: "@typescript-eslint/parser",
+	parserOptions: {
+		ecmaVersion: 13,
+		ecmaFeatures: {
+			jsx: true
+		},
+		sourceType: "module"
+	},
+	settings: {
+		"import/resolver": {
+			typescript: {}
+		},
+		react: {
+			version: "detect"
+		}
+	},
+	extends: [
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react/recommended",
+		"plugin:react-hooks/recommended",
+		"plugin:prettier/recommended"
+	],
+	plugins: ["prettier"],
+	rules: {
+		"prettier/prettier": "warn",
+		"react/react-in-jsx-scope": "off"
+	}
+}
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..682cef2
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,20 @@
+{
+  "bracketSpacing": false,
+  "printWidth": 80,
+  "proseWrap": "never",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "useTabs": true,
+  "overrides": [
+    {
+      "files": [".prettierrc", "*.json"],
+      "options": {
+        "printWidth": 200,
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    }
+  ]
+}
diff --git a/src/App.tsx b/src/App.tsx
index 7f2fe61..7cc91f1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,45 +1,55 @@
-import Counter from './counter'
-import TempConvertor from './temp-convertor'
-import Timer from './timer'
-import FlightBooker from './flight-booker'
-import CRUD from './CRUD'
-import CircleDrawer from './circle-drawer'
+import Counter from "./counter"
+import TempConvertor from "./temp-convertor"
+import Timer from "./timer"
+import FlightBooker from "./flight-booker"
+import CRUD from "./CRUD"
+import CircleDrawer from "./circle-drawer"
+import Cells from "./cells"
+import {GuiSection} from "./GuiSection"
 
 function App() {
-  return (
-    <main>
-      <h1>7GUIs with Valtio</h1>
-      <a href="https://eugenkiss.github.io/7guis/">7 GUIs a Programming Benchmark</a>
-      {' | '}
-      <a href="https://valtio.pmnd.rs/">Valtio</a>
-      <section>
-        <h2>1. Counter</h2>
-        <Counter />
-      </section>
-      <hr />
-      <section>
-        <h2>2. Temperature Converter</h2>
-        <TempConvertor />
-      </section>
-      <hr />
-      <section>
-        <h2>3. Flight Booker</h2>
-        <FlightBooker />
-      </section>
-      <section>
-        <h2>4. Timer</h2>
-        <Timer />
-      </section>
-      <section>
-        <h2>5. CRUD</h2>
-        <CRUD />
-      </section>
-      <section>
-        <h2>6. Circle Drawer</h2>
-        <CircleDrawer />
-      </section>
-    </main>
-  )
+	return (
+		<main>
+			<h1>7GUIs with Valtio</h1>
+			<a href="https://eugenkiss.github.io/7guis/">
+				7 GUIs a Programming Benchmark
+			</a>
+			{" | "}
+			<a href="https://valtio.pmnd.rs/">Valtio</a>
+			{" | "}
+			<a href="https://blog.axlight.com/posts/learning-react-state-manager-jotai-with-7guis-tasks/">
+				Jotai 7GUIs
+			</a>
+			<hr />
+			<GuiSection title="1. Counter" dir="counter">
+				<Counter />
+			</GuiSection>
+			<hr />
+			<GuiSection title="2. Temperature Converter" dir="temp-convertor">
+				<TempConvertor />
+			</GuiSection>
+			<hr />
+			<GuiSection title="3. Flight Booker" dir="flight-booker">
+				<FlightBooker />
+			</GuiSection>
+			<hr />
+			<GuiSection title="4. Timer" dir="timer">
+				<Timer />
+			</GuiSection>
+			<hr />
+			<GuiSection title="5. CRUD" dir="CRUD">
+				<CRUD />
+			</GuiSection>
+			<hr />
+			<GuiSection title="6. Circle Drawer" dir="circle-drawer">
+				<CircleDrawer />
+			</GuiSection>
+			<hr />
+			<GuiSection title="7. Cells" dir="cells">
+				<Cells />
+			</GuiSection>
+		</main>
+	)
 }
 
 export default App
diff --git a/src/CRUD/index.css b/src/CRUD/index.css
index 83f321c..3d68bfd 100644
--- a/src/CRUD/index.css
+++ b/src/CRUD/index.css
@@ -1,20 +1,20 @@
 select {
-  width: 416px;
+	width: 416px;
 }
 
 .buttons {
-  display: flex;
-  width: 416px;
+	display: flex;
+	width: 416px;
 }
 
 .buttons > button {
-  width: calc(416px / 3);
+	width: calc(416px / 3);
 }
 
 .buttons > button + button {
-  margin-left: 4px;
+	margin-left: 4px;
 }
 
-input[name='filter'] {
-  width: 396px;
+input[name="filter"] {
+	width: 396px;
 }
diff --git a/src/CRUD/index.tsx b/src/CRUD/index.tsx
index ce4f915..1b5cded 100644
--- a/src/CRUD/index.tsx
+++ b/src/CRUD/index.tsx
@@ -1,129 +1,151 @@
-import * as React from 'react'
-import { proxy, useSnapshot } from 'valtio'
-import './index.css'
+import * as React from "react"
+import {proxy, useSnapshot} from "valtio"
+import "./index.css"
 
 type Person = {
-  first: string
-  last: string
-  id: number
+	first: string
+	last: string
+	id: number
 }
 
 type State = {
-  people: Array<Person>
-  query: string
-  first: string
-  last: string
-  selected: number | undefined
+	people: Array<Person>
+	query: string
+	first: string
+	last: string
+	selected: number | undefined
 }
 
 const state = proxy<State>({
-  people: [],
-  query: '',
-  first: '',
-  last: '',
-  selected: undefined,
+	people: [],
+	query: "",
+	first: "",
+	last: "",
+	selected: undefined
 })
 
 const setQuery = (e: React.ChangeEvent<HTMLInputElement>) => {
-  state.query = e.target.value
+	state.query = e.target.value
 }
 const reset = () => {
-  state.first = ''
-  state.last = ''
-  state.selected = undefined
+	state.first = ""
+	state.last = ""
+	state.selected = undefined
 }
 const create = () => {
-  state.people.push({ first: state.first, last: state.last, id: performance.now() })
-  reset()
+	state.people.push({
+		first: state.first,
+		last: state.last,
+		id: performance.now()
+	})
+	reset()
 }
 const remove = () => {
-  if (state.selected === undefined) return
-  const index = state.people.findIndex((p) => p.id === state.selected)
-  if (index === -1) return
-  state.people.splice(index, 1)
+	if (state.selected === undefined) return
+	const index = state.people.findIndex((p) => p.id === state.selected)
+	if (index === -1) return
+	state.people.splice(index, 1)
 }
 const update = () => {
-  if (state.selected === undefined) return
-  const person = state.people.find((p) => p.id === state.selected)
-  if (!person) return
-  if (state.first.length) person.first = state.first
-  if (state.last.length) person.last = state.last
-  reset()
+	if (state.selected === undefined) return
+	const person = state.people.find((p) => p.id === state.selected)
+	if (!person) return
+	if (state.first.length) person.first = state.first
+	if (state.last.length) person.last = state.last
+	reset()
 }
 const setSelected = (e: React.ChangeEvent<HTMLSelectElement>) => {
-  e.preventDefault()
-  state.selected = Number(e.target.value)
+	e.preventDefault()
+	state.selected = Number(e.target.value)
 }
-type NameKey = keyof Pick<State, 'first' | 'last'>
+type NameKey = keyof Pick<State, "first" | "last">
 const setName = (e: React.ChangeEvent<HTMLInputElement>) => {
-  const { name, value } = e.target
-  state[name as NameKey] = value
+	const {name, value} = e.target
+	state[name as NameKey] = value
 }
 
 function usePeople() {
-  const snap = useSnapshot(state)
-  const people = snap.people
-  const query = snap.query
-  return {
-    people: people.filter(
-      (person) => !query || person.first.startsWith(query) || person.last.startsWith(query)
-    ),
-    selected: snap.selected,
-  }
+	const snap = useSnapshot(state)
+	const people = snap.people
+	const query = snap.query
+	return {
+		people: people.filter(
+			(person) =>
+				!query ||
+				person.first.startsWith(query) ||
+				person.last.startsWith(query)
+		),
+		selected: snap.selected
+	}
 }
 
 const Select = () => {
-  const selectRef = React.useRef<HTMLSelectElement | null>(null)
-  const { people, selected } = usePeople()
-  return (
-    <select
-      ref={selectRef}
-      value={selected?.toString()}
-      onChange={setSelected}
-      size={5}
-      onFocus={() => {
-        if (selectRef.current) selectRef.current.selectedIndex = -1
-      }}
-    >
-      {people.map((person) => (
-        <option key={person.first} value={person.id}>
-          {person.last}, {person.first}
-        </option>
-      ))}
-    </select>
-  )
+	const selectRef = React.useRef<HTMLSelectElement | null>(null)
+	const {people, selected} = usePeople()
+	return (
+		<select
+			ref={selectRef}
+			value={selected?.toString()}
+			onChange={setSelected}
+			size={5}
+			onFocus={() => {
+				if (selectRef.current) selectRef.current.selectedIndex = -1
+			}}
+		>
+			{people.map((person) => (
+				<option key={person.first} value={person.id}>
+					{person.last}, {person.first}
+				</option>
+			))}
+		</select>
+	)
 }
 
 const CRUD = () => {
-  const snap = useSnapshot(state)
+	const snap = useSnapshot(state)
 
-  const hasName = snap.first.length > 0 && snap.last.length > 0
-  const hasPartOfName = snap.first.length + snap.last.length > 0
-  const hasSelected = snap.selected !== undefined
+	const hasName = snap.first.length > 0 && snap.last.length > 0
+	const hasPartOfName = snap.first.length + snap.last.length > 0
+	const hasSelected = snap.selected !== undefined
 
-  return (
-    <div>
-      <input name="filter" placeholder="filter..." value={snap.query} onChange={setQuery} />
-      <Select />
-      <label>
-        <input name="last" value={snap.last} placeholder="last" onChange={setName} />
-      </label>
-      <label>
-        <input name="first" value={snap.first} placeholder="first" onChange={setName} />
-      </label>
-      <div className="buttons">
-        <button onClick={create} disabled={!hasName && hasSelected}>
-          create
-        </button>
-        <button onClick={update} disabled={!hasPartOfName || !hasSelected}>
-          update
-        </button>
-        <button onClick={remove} disabled={!hasSelected}>
-          delete
-        </button>
-      </div>
-    </div>
-  )
+	return (
+		<div>
+			<input
+				name="filter"
+				placeholder="filter..."
+				value={snap.query}
+				onChange={setQuery}
+			/>
+			<Select />
+			<label>
+				<input
+					name="last"
+					value={snap.last}
+					placeholder="last"
+					onChange={setName}
+				/>
+			</label>
+			<label>
+				<input
+					name="first"
+					value={snap.first}
+					placeholder="first"
+					onChange={setName}
+				/>
+			</label>
+			<div className="buttons">
+				<button onClick={create} disabled={!hasName && hasSelected}>
+					create
+				</button>
+				<button onClick={update} disabled={!hasPartOfName || !hasSelected}>
+					update
+				</button>
+				<button onClick={remove} disabled={!hasSelected}>
+					delete
+				</button>
+			</div>
+		</div>
+	)
 }
 
 export default CRUD
diff --git a/src/GuiSection.tsx b/src/GuiSection.tsx
new file mode 100644
index 0000000..fb66ba8
--- /dev/null
+++ b/src/GuiSection.tsx
@@ -0,0 +1,22 @@
+import code from "./code.svg"
+
+type Props = {
+	children: React.ReactNode
+	title: string
+	dir: string
+}
+export const GuiSection = ({children, title, dir}: Props) => {
+	return (
+		<section>
+			<div className="section-title">
+				<h2>{title}</h2>
+				<a
+					href={`https://github.com/RikuVan/Valtio-7GUIs/blob/main/src/${dir}/index.tsx`}
+				>
+					<img src={code} className="code" style={{marginBottom: "-5px"}} />
+				</a>
+			</div>
+			{children}
+		</section>
+	)
+}
diff --git a/src/cells/index.css b/src/cells/index.css
new file mode 100644
index 0000000..dbbbdf0
--- /dev/null
+++ b/src/cells/index.css
@@ -0,0 +1,53 @@
+.grid {
+	display: grid;
+	overflow: scroll;
+	width: 100%;
+	height: 800px;
+	border: 1px solid var(--border);
+	grid-template-rows: repeat(27, 50px);
+	grid-gap: 0;
+}
+
+.row {
+	line-height: 1;
+}
+
+.cell {
+	border: 1px solid var(--border);
+	width: 100px;
+}
+
+.cell.active {
+	border: 1px solid var(--focus);
+}
+
+.cell-input {
+	width: 96px;
+	height: 45px;
+	margin: 0;
+	padding: 0;
+	border-radius: 0;
+	padding-left: 5px;
+	box-shadow: none;
+}
+
+.init-col {
+	width: 50px;
+}
+
+.init-row,
+.init-col {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+}
+
+.read-only {
+	display: flex;
+	height: 50px;
+	width: 100%;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 5px;
+}
diff --git a/src/cells/index.tsx b/src/cells/index.tsx
new file mode 100644
index 0000000..c1b5cf6
--- /dev/null
+++ b/src/cells/index.tsx
@@ -0,0 +1,119 @@
+import * as React from "react"
+import {proxy, useSnapshot} from "valtio"
+import {proxyMap} from "valtio/utils"
+import "./index.css"
+
+type CellValue = {exp?: string}
+type Cells = Record<string, CellValue>
+
+const getColId = (col: number) => String.fromCharCode("A".charCodeAt(0) + col)
+
+const COLUMNS = Array.from(Array(26).keys())
+const ROWS = Array.from(Array(100).keys())
+
+const cellState = proxyMap<string, string>()
+const uiState = proxy<{active: string | undefined}>({active: undefined})
+const setEditing = (id: string | undefined) => {
+	uiState.active = id
+}
+
+const evalCell = (exp: string) => {
+	if (!exp.startsWith("=")) {
+		return exp
+	}
+	try {
+		const fn = Function(
+			"get",
+			`
+      'use strict'; return ${exp
+				.slice(1)
+				.replace(/\b([A-Z]\d{1,2})\b/g, (m) => `get('${m}')`)};
+      `
+		)
+		return fn((cellId: string) => {
+			const val = evalCell(cellState.get(cellId) || ("" as string))
+			const num = Number(val)
+			return Number.isFinite(num) ? num : val
+		})
+	} catch (e) {
+		return `#ERROR ${e}`
+	}
+}
+
+const Cell = React.memo(({id, exp}: {id: string; exp: string}) => {
+	const uiSnap = useSnapshot(uiState)
+	const active = uiSnap.active === id
+	const value = evalCell(exp)
+	return (
+		<div
+			className={uiSnap.active ? "cell active" : "cell"}
+			data-id={id}
+			onClick={() => {
+				setEditing(id)
+			}}
+		>
+			{active ? (
+				<input
+					className="cell-input"
+					defaultValue={exp}
+					autoFocus
+					onKeyDown={(e: any) => {
+						if (e.key === "Enter") {
+							cellState.set(id, e.target.value)
+						}
+					}}
+					onBlur={(e) => {
+						cellState.set(id, e.target.value)
+						setEditing(undefined)
+					}}
+				/>
+			) : (
+				<div className="read-only">{value}</div>
+			)}
+		</div>
+	)
+})
+
+const Cells = () => {
+	const cellSnap = useSnapshot(cellState)
+	return (
+		<div className="grid">
+			{[-1, ...ROWS].map((row) => {
+				return (
+					<div key={String(row)} className="row">
+						{[-1, ...COLUMNS].map((column) => {
+							const key = `${column}${row}`
+							const colId = getColId(column)
+							if (row === -1 && column === -1) {
+								return <div key={key} className="cell init-col" />
+							}
+							if (column === -1 && row > -1) {
+								return (
+									<div key={key} className="cell init-col">
+										{row}
+									</div>
+								)
+							}
+							if (row === -1 && column > -1) {
+								return (
+									<div key={key} className="cell init-row">
+										{colId}
+									</div>
+								)
+							}
+							return (
+								<Cell
+									key={key}
+									id={`${colId}${row}`}
+									exp={cellSnap.get(`${colId}${row}`) ?? ""}
+								/>
+							)
+						})}
+					</div>
+				)
+			})}
+		</div>
+	)
+}
+
+export default Cells
diff --git a/src/circle-drawer/index.css b/src/circle-drawer/index.css
index bf53748..18981bd 100644
--- a/src/circle-drawer/index.css
+++ b/src/circle-drawer/index.css
@@ -1,45 +1,45 @@
 .adjuster {
-  position: relative;
-  text-align: center;
-  border: var(--border);
-  width: 300px;
-  border: var(--border);
-  margin-top: -30px;
+	position: relative;
+	text-align: center;
+	border: var(--border);
+	width: 300px;
+	border: var(--border);
+	margin-top: -30px;
 }
 
 .adjuster > input {
-  width: 100%;
+	width: 100%;
 }
 
 svg {
-  background-color: var(--background);
-  width: 100%;
-  height: 500px;
-  cursor: pointer;
+	background-color: var(--background);
+	width: 100%;
+	height: 500px;
+	cursor: pointer;
 }
 
 circle {
-  stroke: var(--border);
+	stroke: var(--border);
 }
 
 .controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .closer {
-  position: absolute;
-  top: -5px;
-  right: 0;
-  padding: 0.3em;
-  cursor: pointer;
-  color: var(--highlight);
-  background: var(--background-alt);
-  border-radius: 3px;
+	position: absolute;
+	top: -5px;
+	right: 0;
+	padding: 0.3em;
+	cursor: pointer;
+	color: var(--highlight);
+	background: var(--background-alt);
+	border-radius: 3px;
 }
 
 .closer:hover {
-  background: var(--button-hover);
-  border: 1px solid var(--border);
+	background: var(--button-hover);
+	border: 1px solid var(--border);
 }
diff --git a/src/circle-drawer/index.tsx b/src/circle-drawer/index.tsx
index 1d89f40..9f9f046 100644
--- a/src/circle-drawer/index.tsx
+++ b/src/circle-drawer/index.tsx
@@ -1,111 +1,118 @@
-import * as React from 'react'
-import { proxy, useSnapshot } from 'valtio'
-import { proxyWithHistory } from 'valtio/utils'
-import './index.css'
+import * as React from "react"
+import {proxy, useSnapshot} from "valtio"
+import {proxyWithHistory} from "valtio/utils"
+import "./index.css"
 
 type Circle = {
-  cx: number
-  cy: number
-  r: number
-  id: number
+	cx: number
+	cy: number
+	r: number
+	id: number
 }
 
 const historyState = proxyWithHistory<Array<Circle>>([])
 
 const state = proxy<{
-  selected: number | undefined
-  circleHistory: typeof historyState
+	selected: number | undefined
+	circleHistory: typeof historyState
 }>({
-  circleHistory: historyState,
-  selected: undefined,
+	circleHistory: historyState,
+	selected: undefined
 })
 
 const selectCircle = (e: React.MouseEvent<HTMLOrSVGElement>, index: number) => {
-  e.preventDefault()
-  e.stopPropagation()
-  if (state.selected === index) {
-    state.selected = undefined
-  } else {
-    state.selected = index
-  }
+	e.preventDefault()
+	e.stopPropagation()
+	if (state.selected === index) {
+		state.selected = undefined
+	} else {
+		state.selected = index
+	}
 }
 
 const unselectCircle = () => {
-  state.selected = undefined
+	state.selected = undefined
 }
 
 const addCircle = (e: React.MouseEvent<HTMLOrSVGElement>) => {
-  e.preventDefault()
-  if (state.selected !== undefined) return
-  const { x, y } = (e.currentTarget as any).getBoundingClientRect()
-  historyState.value.push({
-    r: 20,
-    cx: e.clientX - x,
-    cy: e.clientY - y,
-    id: performance.now(),
-  })
+	e.preventDefault()
+	if (state.selected !== undefined) return
+	const {x, y} = (e.currentTarget as any).getBoundingClientRect()
+	historyState.value.push({
+		r: 20,
+		cx: e.clientX - x,
+		cy: e.clientY - y,
+		id: performance.now()
+	})
 }
 
 const adjustRadius = (e: React.ChangeEvent<HTMLInputElement>) => {
-  if (state.selected === undefined) return
-  historyState.value[state.selected].r = Number(e.target.value)
+	if (state.selected === undefined) return
+	historyState.value[state.selected].r = Number(e.target.value)
 }
 
 const CircleDrawer = () => {
-  const snap = useSnapshot(state)
+	const snap = useSnapshot(state)
 
-  return (
-    <div>
-      <div className="controls">
-        <div>
-          <button
-            onClick={() => {
-              unselectCircle()
-              snap.circleHistory.undo()
-            }}
-          >
-            Undo
-          </button>
-          <button
-            onClick={() => {
-              unselectCircle()
-              snap.circleHistory.redo()
-            }}
-          >
-            Redo
-          </button>
-        </div>
-        {snap.selected !== undefined && snap.circleHistory.value[snap.selected] && (
-          <div className="adjuster">
-            Adjust circle at ({snap.circleHistory.value[snap.selected].cx.toFixed(1)},
-            {snap.circleHistory.value[snap.selected].cy.toFixed(1)})
-            <span className="closer" onClick={unselectCircle}>
-              X
-            </span>
-            <input
-              type="range"
-              min={5}
-              max={100}
-              value={snap.circleHistory.value[snap.selected].r}
-              onChange={adjustRadius}
-            />
-          </div>
-        )}
-      </div>
-      <svg onClick={addCircle} key={JSON.stringify(snap.circleHistory.value)}>
-        {state.circleHistory.value.map((circle, index) => (
-          <circle
-            key={circle.id.toString()}
-            cx={circle.cx}
-            cy={circle.cy}
-            r={circle.r}
-            onClick={(e) => selectCircle(e, index)}
-            fill={index === snap.selected ? 'var(--highlight)' : 'var(--background-alt)'}
-          />
-        ))}
-      </svg>
-    </div>
-  )
+	return (
+		<div>
+			<div className="controls">
+				<div>
+					<button
+						onClick={() => {
+							unselectCircle()
+							snap.circleHistory.undo()
+						}}
+					>
+						Undo
+					</button>
+					<button
+						onClick={() => {
+							unselectCircle()
+							snap.circleHistory.redo()
+						}}
+					>
+						Redo
+					</button>
+				</div>
+				{snap.selected !== undefined &&
+					snap.circleHistory.value[snap.selected] && (
+						<div className="adjuster">
+							Adjust circle at (
+							{snap.circleHistory.value[snap.selected].cx.toFixed(1)},
+							{snap.circleHistory.value[snap.selected].cy.toFixed(1)})
+							<span className="closer" onClick={unselectCircle}>
+								X
+							</span>
+							<input
+								type="range"
+								min={5}
+								max={100}
+								value={snap.circleHistory.value[snap.selected].r}
+								onChange={adjustRadius}
+							/>
+						</div>
+					)}
+			</div>
+			<svg onClick={addCircle} key={JSON.stringify(snap.circleHistory.value)}>
+				{state.circleHistory.value.map((circle, index) => (
+					<circle
+						key={circle.id.toString()}
+						cx={circle.cx}
+						cy={circle.cy}
+						r={circle.r}
+						onClick={(e) => selectCircle(e, index)}
+						fill={
+							index === snap.selected
+								? "var(--highlight)"
+								: "var(--background-alt)"
+						}
+					/>
+				))}
+			</svg>
+			<small>Click circle to resize</small>
+		</div>
+	)
 }
 
 export default CircleDrawer
diff --git a/src/code.svg b/src/code.svg
new file mode 100644
index 0000000..380f2d7
--- /dev/null
+++ b/src/code.svg
@@ -0,0 +1,32 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="feather feather-code"
+>
+	<polyline points="16 18 22 12 16 6"></polyline>
+	<polyline points="8 6 2 12 8 18"></polyline>
+	<defs>
+    <style>
+			:root {
+				 --links: #0076d1;
+			}
+			@media (prefers-color-scheme: dark) {
+				:root {
+					--links: #41adff;
+				}
+			}
+
+			.feather-code {
+				stroke: var(--links);
+			}
+      
+    </style>
+  </defs>
+</svg>
diff --git a/src/counter/index.tsx b/src/counter/index.tsx
index ff6c24a..9e3c009 100644
--- a/src/counter/index.tsx
+++ b/src/counter/index.tsx
@@ -1,14 +1,15 @@
-import { proxy, useSnapshot } from 'valtio'
-const state = proxy({ count: 0, inc: () => ++state.count })
+import {proxy, useSnapshot} from "valtio"
+const state = proxy({count: 0, inc: () => ++state.count})
 
 const Counter = () => {
-  const snap = useSnapshot(state)
+	const snap = useSnapshot(state)
 
-  return (
-    <div className="row">
-      <input readOnly value={snap.count} /> <button onClick={snap.inc}>+</button>
-    </div>
-  )
+	return (
+		<div className="row">
+			<input readOnly value={snap.count} />{" "}
+			<button onClick={snap.inc}>+</button>
+		</div>
+	)
 }
 
 export default Counter
diff --git a/src/flight-booker/index.css b/src/flight-booker/index.css
index 53d4236..72fa0b8 100644
--- a/src/flight-booker/index.css
+++ b/src/flight-booker/index.css
@@ -1,3 +1,3 @@
 .invalid {
-  border: 1px solid var(--highlight);
+	border: 1px solid var(--highlight);
 }
diff --git a/src/flight-booker/index.tsx b/src/flight-booker/index.tsx
index 5d0f2ba..e1cb1f1 100644
--- a/src/flight-booker/index.tsx
+++ b/src/flight-booker/index.tsx
@@ -1,115 +1,121 @@
-import { proxy, useSnapshot } from 'valtio'
-import './index.css'
+import {proxy, useSnapshot} from "valtio"
+import "./index.css"
 
 const validDate = (dateString: string) => {
-  const date = new Date(dateString)
-  if (isNaN(+date)) {
-    return false
-  }
-  return true
+	const date = new Date(dateString)
+	if (isNaN(+date)) {
+		return false
+	}
+	return true
 }
 
 const beforeReturn = (departureStr: string, returnStr: string) =>
-  new Date(departureStr).getTime() >= new Date(returnStr).getTime()
+	new Date(departureStr).getTime() >= new Date(returnStr).getTime()
 
 // each date has validation but it is really not possible to create an invalid date with the date input
 const departureState = proxy({
-  value: new Date().toISOString().slice(0, 10),
-  invalid: false,
-  set(e: React.ChangeEvent<HTMLInputElement>) {
-    e.preventDefault()
-    const str = e.target.value
-    departureState.value = str
-    if (validDate(str)) {
-      departureState.invalid = false
-    } else {
-      departureState.invalid = true
-    }
-  },
+	value: new Date().toISOString().slice(0, 10),
+	invalid: false,
+	set(e: React.ChangeEvent<HTMLInputElement>) {
+		e.preventDefault()
+		const str = e.target.value
+		departureState.value = str
+		if (validDate(str)) {
+			departureState.invalid = false
+		} else {
+			departureState.invalid = true
+		}
+	}
 })
 
 const returnState = proxy({
-  value: new Date(Date.now() + 86400000).toISOString().slice(0, 10),
-  invalid: false,
-  set(e: React.ChangeEvent<HTMLInputElement>) {
-    e.preventDefault()
-    const str = e.target.value
-    returnState.value = str
-    if (validDate(str)) {
-      returnState.invalid = false
-    } else {
-      returnState.invalid = true
-    }
-  },
+	value: new Date(Date.now() + 86400000).toISOString().slice(0, 10),
+	invalid: false,
+	set(e: React.ChangeEvent<HTMLInputElement>) {
+		e.preventDefault()
+		const str = e.target.value
+		returnState.value = str
+		if (validDate(str)) {
+			returnState.invalid = false
+		} else {
+			returnState.invalid = true
+		}
+	}
 })
 
 const state = proxy({
-  departure: departureState,
-  return: returnState,
-  isReturn: false,
-  setIsReturn(e: React.ChangeEvent<HTMLSelectElement>) {
-    e.preventDefault()
-    state.isReturn = e.target.value === 'true'
-  },
+	departure: departureState,
+	return: returnState,
+	isReturn: false,
+	setIsReturn(e: React.ChangeEvent<HTMLSelectElement>) {
+		e.preventDefault()
+		state.isReturn = e.target.value === "true"
+	}
 })
 
-type DateKeys = keyof Pick<typeof state, 'departure' | 'return'>
+type DateKeys = keyof Pick<typeof state, "departure" | "return">
 
 function useDurationValidation() {
-  const snap = useSnapshot(state)
-  return !snap.isReturn || !beforeReturn(snap.departure.value, snap.return.value)
+	const snap = useSnapshot(state)
+	return (
+		!snap.isReturn || !beforeReturn(snap.departure.value, snap.return.value)
+	)
 }
 
 const DateInput = ({
-  name,
-  disabled,
-  invalid,
+	name,
+	disabled,
+	invalid
 }: {
-  name: DateKeys
-  disabled?: boolean
-  invalid?: boolean
+	name: DateKeys
+	disabled?: boolean
+	invalid?: boolean
 }) => {
-  const snap = useSnapshot(state[name])
-  return (
-    <input
-      name={name}
-      type="date"
-      value={snap.value}
-      onChange={snap.set}
-      disabled={disabled}
-      className={!disabled && (invalid || snap.invalid) ? 'invalid' : ''}
-    />
-  )
+	const snap = useSnapshot(state[name])
+	return (
+		<input
+			name={name}
+			type="date"
+			value={snap.value}
+			onChange={snap.set}
+			disabled={disabled}
+			className={!disabled && (invalid || snap.invalid) ? "invalid" : ""}
+		/>
+	)
 }
 
 const handleBooking = () => {
-  let msg = `Flight booked form ${state.departure.value}`
-  if (state.isReturn) {
-    msg += ` to ${state.return.value}`
-  }
-  alert(msg)
+	let msg = `Flight booked form ${state.departure.value}`
+	if (state.isReturn) {
+		msg += ` to ${state.return.value}`
+	}
+	alert(msg)
 }
 
 const FlightBooker = () => {
-  const snap = useSnapshot(state)
-  const isValidDuration = useDurationValidation()
-  return (
-    <div>
-      <select name="is-return" onChange={snap.setIsReturn} value={snap.isReturn.toString()}>
-        <option value="false">one-way flight</option>
-        <option value="true">return flight</option>
-      </select>
-      <DateInput name="departure" invalid={!isValidDuration} />
-      <DateInput name="return" disabled={!snap.isReturn} />
-      <button
-        onClick={() => {
-          isValidDuration && handleBooking()
-        }}
-      >
-        book
-      </button>
-    </div>
-  )
+	const snap = useSnapshot(state)
+	const isValidDuration = useDurationValidation()
+	return (
+		<div>
+			<select
+				name="is-return"
+				onChange={snap.setIsReturn}
+				value={snap.isReturn.toString()}
+			>
+				<option value="false">one-way flight</option>
+				<option value="true">return flight</option>
+			</select>
+			<DateInput name="departure" invalid={!isValidDuration} />
+			<DateInput name="return" disabled={!snap.isReturn} />
+			<button
+				onClick={() => {
+					isValidDuration && handleBooking()
+				}}
+			>
+				book
+			</button>
+		</div>
+	)
 }
 
 export default FlightBooker
diff --git a/src/index.css b/src/index.css
index db3e60c..9dc81c1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,19 @@
 .row {
-  display: flex;
+	display: flex;
 }
 .row > button {
-  margin-left: 12px;
+	margin-left: 12px;
 }
 section {
-  padding-bottom: 18px;
+	padding-bottom: 18px;
+}
+
+.section-title {
+	display: flex;
+	align-items: baseline;
+}
+
+.section-title > a {
+	margin-left: 12px;
+	line-height: 0;
 }
diff --git a/src/main.tsx b/src/main.tsx
index 4a1b150..32f558d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App"
+import "./index.css"
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
 )
diff --git a/src/temp-convertor/index.tsx b/src/temp-convertor/index.tsx
index 0589155..80aaf06 100644
--- a/src/temp-convertor/index.tsx
+++ b/src/temp-convertor/index.tsx
@@ -1,36 +1,40 @@
-import { proxy, useSnapshot } from 'valtio'
+import {proxy, useSnapshot} from "valtio"
 
 const c2f = (x: number) => x * (9 / 5) + 32
 const f2c = (x: number) => (x - 32) * (5 / 9)
 
 const state = proxy({
-  celsius: Number(5).toFixed(1),
-  fahrenheit: c2f(5).toFixed(1),
-  convert: (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target
-    const n = Number(value)
-    if (!isFinite(n)) return
-    if (name === 'celsius') {
-      state.celsius = value
-      state.fahrenheit = c2f(n).toFixed(1)
-    } else {
-      state.fahrenheit = value
-      state.celsius = f2c(n).toFixed(1)
-    }
-  },
+	celsius: Number(5).toFixed(1),
+	fahrenheit: c2f(5).toFixed(1),
+	convert: (e: React.ChangeEvent<HTMLInputElement>) => {
+		const {name, value} = e.target
+		const n = Number(value)
+		if (!isFinite(n)) return
+		if (name === "celsius") {
+			state.celsius = value
+			state.fahrenheit = c2f(n).toFixed(1)
+		} else {
+			state.fahrenheit = value
+			state.celsius = f2c(n).toFixed(1)
+		}
+	}
 })
 
 const TempConvertor = () => {
-  const snap = useSnapshot(state)
+	const snap = useSnapshot(state)
 
-  return (
-    <div>
-      <label>Celsius</label>
-      <input name="celsius" value={snap.celsius} onChange={snap.convert} />
-      <label>Fahrenheit</label>
-      <input name="fahrenheit" value={snap.fahrenheit} onChange={snap.convert} />
-    </div>
-  )
+	return (
+		<div>
+			<label>Celsius</label>
+			<input name="celsius" value={snap.celsius} onChange={snap.convert} />
+			<label>Fahrenheit</label>
+			<input
+				name="fahrenheit"
+				value={snap.fahrenheit}
+				onChange={snap.convert}
+			/>
+		</div>
+	)
 }
 
 export default TempConvertor
diff --git a/src/timer/index.css b/src/timer/index.css
index e50c035..546a136 100644
--- a/src/timer/index.css
+++ b/src/timer/index.css
@@ -1,20 +1,20 @@
 .timer {
-  width: 100%;
+	width: 100%;
 }
 .progress-container {
-  display: flex;
-  align-items: center;
-  width: 100%;
+	display: flex;
+	align-items: center;
+	width: 100%;
 }
 .progress-container > progress {
-  width: 100%;
-  margin-right: 12px;
+	width: 100%;
+	margin-right: 12px;
 }
 
 .progress-container > label {
-  width: 50px;
+	width: 50px;
 }
 
 .timer > input {
-  width: 50%;
+	width: 50%;
 }
diff --git a/src/timer/index.tsx b/src/timer/index.tsx
index 8f44591..c5491d3 100644
--- a/src/timer/index.tsx
+++ b/src/timer/index.tsx
@@ -1,67 +1,74 @@
-import { proxy, useSnapshot } from 'valtio'
-import { subscribeKey } from 'valtio/utils'
-import './index.css'
+import {proxy, useSnapshot} from "valtio"
+import {subscribeKey} from "valtio/utils"
+import "./index.css"
 
 const tick = () => {
-  state.elapsed = window.performance.now() - state.start
+	state.elapsed = window.performance.now() - state.start
 }
 
 const state = proxy({
-  start: window.performance.now(),
-  duration: 10000,
-  elapsed: 0,
-  setDuration(e: React.ChangeEvent<HTMLInputElement>) {
-    state.duration = Number(e.target.value)
-    setTimeout(() => state.reset())
-  },
-  reset() {
-    state.elapsed = 0
-    state.start = window.performance.now()
-    tick()
-  },
+	start: window.performance.now(),
+	duration: 10000,
+	elapsed: 0,
+	setDuration(e: React.ChangeEvent<HTMLInputElement>) {
+		state.duration = Number(e.target.value)
+		setTimeout(() => state.reset())
+	},
+	reset() {
+		state.elapsed = 0
+		state.start = window.performance.now()
+		tick()
+	}
 })
 
 let raf: number
 
-subscribeKey(state, 'elapsed', () => {
-  if (state.elapsed < state.duration) {
-    raf = requestAnimationFrame(tick)
-  }
-  return () => {
-    cancelAnimationFrame(raf)
-  }
+subscribeKey(state, "elapsed", () => {
+	if (state.elapsed < state.duration) {
+		raf = requestAnimationFrame(tick)
+	}
+	return () => {
+		cancelAnimationFrame(raf)
+	}
 })
 
 raf = requestAnimationFrame(tick)
 
 const Progress = () => {
-  const snap = useSnapshot(state)
-  const progress = snap.elapsed / snap.duration
-  return (
-    <div className="progress-container">
-      <progress value={progress} /> <label>{((progress * snap.duration) / 1000).toFixed(1)}s</label>
-    </div>
-  )
+	const snap = useSnapshot(state)
+	const progress = snap.elapsed / snap.duration
+	return (
+		<div className="progress-container">
+			<progress value={progress} />{" "}
+			<label>{((progress * snap.duration) / 1000).toFixed(1)}s</label>
+		</div>
+	)
 }
 
 const Duration = () => {
-  const snap = useSnapshot(state)
+	const snap = useSnapshot(state)
 
-  return (
-    <input type="range" min="1" max="10000" value={snap.duration} onChange={snap.setDuration} />
-  )
+	return (
+		<input
+			type="range"
+			min="1"
+			max="10000"
+			value={snap.duration}
+			onChange={snap.setDuration}
+		/>
+	)
 }
 
 const Timer = () => {
-  const snap = useSnapshot(state)
+	const snap = useSnapshot(state)
 
-  return (
-    <div className="timer">
-      <Progress />
-      <Duration />
-      <button onClick={snap.reset}>Reset</button>
-    </div>
-  )
+	return (
+		<div className="timer">
+			<Progress />
+			<Duration />
+			<button onClick={snap.reset}>Reset</button>
+		</div>
+	)
 }
 
 export default Timer