diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index de55408..8429b1a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -148,6 +148,18 @@
 			/>
 			Align
 		</label>
+		<label>
+			<input
+				type="checkbox"
+				checked={$chart.logScale}
+				on:input={(e) => {
+					if (chart) {
+						chart.setLogScale(e.currentTarget.checked)
+					}
+				}}
+			/>
+			Logarithmic
+		</label>
 	{/if}
 </div>
 
@@ -184,8 +196,11 @@
 	.bottom-bar
 		padding-top: 10px
 		padding-bottom: 50px
+		display: flex
+		gap: 12px
+		margin-left: -6px
 	label
-		padding: 0.5rem 0.375rem
+		padding: 0.5rem
 		font-size: 0.9375rem
 		color: #FFFFFF
 		display: inline-flex
@@ -201,6 +216,7 @@
 		background-color: hsl(224, 9%, 20%)
 		border-radius: 4px
 		border: 1px solid hsl(228, 3%, 50%)
+		transition: 120ms ease-out border-color
 		&:checked
 			background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
 		&:focus-visible
diff --git a/src/routes/chart.ts b/src/routes/chart.ts
index aa1e1a8..497c96d 100644
--- a/src/routes/chart.ts
+++ b/src/routes/chart.ts
@@ -1,5 +1,6 @@
 import {
 	createChart as createChartInstance,
+	PriceScaleMode,
 	TickMarkType,
 	type BusinessDay,
 	type ChartOptions,
@@ -40,6 +41,7 @@ const jsonTypeVersion = 3
 type Json = {
 	lines: LineJson[]
 	align: boolean
+	logScale: boolean
 	v: number
 	expiry: number
 }
@@ -72,6 +74,7 @@ function loadJson() {
 			return {
 				lines: lineBases,
 				align: json.align,
+				logScale: json.logScale,
 			}
 		} else {
 			localStorage.removeItem('starchart-series')
@@ -82,6 +85,7 @@ function loadJson() {
 	return {
 		lines: [],
 		align: false,
+		logScale: false,
 	}
 }
 
@@ -89,6 +93,7 @@ type ChartData = {
 	instance: IChartApi
 	lines: Line[]
 	align: boolean
+	logScale: boolean
 	container: HTMLElement
 }
 export type Chart = ReturnType<typeof newChart>
@@ -100,6 +105,7 @@ export function newChart(container: HTMLElement, options: DeepPartial<ChartOptio
 		instance: createChartInstance(container, options),
 		container,
 		align: false,
+		logScale: false,
 		lines: [],
 	}
 	const { subscribe, set } = writable(chart)
@@ -244,6 +250,17 @@ export function newChart(container: HTMLElement, options: DeepPartial<ChartOptio
 			set(chart)
 		},
 
+		setLogScale(logScale: boolean) {
+			chart.instance.applyOptions({
+				rightPriceScale: {
+					mode: logScale ? PriceScaleMode.Logarithmic : PriceScaleMode.Normal,
+				},
+			})
+			chart.logScale = logScale
+			store.save()
+			set(chart)
+		},
+
 		deleteLine(line: Line) {
 			chart.instance.removeSeries(line.instance)
 			line.deleted = true
@@ -296,6 +313,8 @@ export function newChart(container: HTMLElement, options: DeepPartial<ChartOptio
 		},
 	}
 
+	store.setLogScale(json.logScale)
+
 	for (const jsonLine of json.lines) {
 		store.addLine(jsonLine)
 	}
@@ -360,6 +379,7 @@ function save(chart: ChartData) {
 		lines: jsonLines,
 		v: jsonTypeVersion,
 		align: chart.align,
+		logScale: chart.logScale,
 		expiry: Date.now() + day * 1,
 	}
 	localStorage.setItem('starchart-series', JSON.stringify(json))