diff --git a/src/lib/Box.svelte b/src/lib/Box.svelte
index b78cd83..85c10fc 100644
--- a/src/lib/Box.svelte
+++ b/src/lib/Box.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Action } from 'svelte/action';
 
-	interface Props {
+	type Props = {
 		flex: number;
 		showA: boolean;
 		a: {
@@ -15,7 +15,7 @@
 			bg: string;
 		};
 		showProbs: boolean;
-	}
+	};
 
 	let { flex, showA, a, b, showProbs }: Props = $props();
 
diff --git a/src/lib/HorizontalBar.svelte b/src/lib/HorizontalBar.svelte
index d17fae7..a1a0413 100644
--- a/src/lib/HorizontalBar.svelte
+++ b/src/lib/HorizontalBar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Action } from 'svelte/action';
 
-	interface Props {
+	type Props = {
 		grabbingOther: boolean;
 		grabbing: boolean;
 		topFlex: number;
@@ -10,7 +10,7 @@
 		showPanel: boolean;
 		showProbs: boolean;
 		bg: string;
-	}
+	};
 
 	let {
 		grabbingOther,
diff --git a/src/lib/Panel.svelte b/src/lib/Panel.svelte
index 72a573a..49e3f28 100644
--- a/src/lib/Panel.svelte
+++ b/src/lib/Panel.svelte
@@ -3,7 +3,7 @@
 	import { fly } from 'svelte/transition';
 	import { linear } from 'svelte/easing';
 
-	interface Props {
+	type Props = {
 		flex: number;
 		prob: number;
 		statement: string;
diff --git a/src/lib/VerticalBar.svelte b/src/lib/VerticalBar.svelte
index 730ae8d..f32b704 100644
--- a/src/lib/VerticalBar.svelte
+++ b/src/lib/VerticalBar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Action } from 'svelte/action';
 
-	interface Props {
+	type Props = {
 		grabbingOther: boolean;
 		grabbing: boolean;
 		leftFlex: number;
@@ -10,7 +10,7 @@
 		showLeftPanel: boolean;
 		showRightPanel: boolean;
 		bg: string;
-	}
+	};
 
 	let {
 		grabbingOther,
diff --git a/src/lib/Viz.svelte b/src/lib/Viz.svelte
deleted file mode 100644
index eb848f8..0000000
--- a/src/lib/Viz.svelte
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts">
-	import { Panel, VerticalBar, HorizontalBar, Box } from '$lib';
-
-	let grabbingLeft = $state(false);
-	let grabbingMiddle = $state(false);
-	let grabbingRight = $state(false);
-
-	let showLeftPanel = $state(false);
-	let showRightPanel = $state(false);
-
-	let showA = $state(true);
-
-	let showLeftProbs = $state(false);
-	let showPanelProbs = $state(false);
-	let showRightProbs = $state(false);
-
-	type Props = {
-		left?: number;
-		right?: number;
-		topLeft?: number;
-		bottomLeft?: number;
-		topRight?: number;
-		bottomRight?: number;
-	};
-
-	let {
-		left = 0.6,
-		right = 0.4,
-		topLeft = 0.7,
-		bottomLeft = 0.3,
-		topRight = 0.2,
-		bottomRight = 0.8
-	}: Props = $props();
-
-	let A = $derived(left / (left + right));
-	let notA = $derived(right / (left + right));
-	let A_B = $derived((topLeft * left) / (topLeft * left + topRight * right));
-	let B_A = $derived(topLeft / (topLeft + bottomLeft));
-	let notB_A = $derived(bottomLeft / (topLeft + bottomLeft));
-	let A_notB = $derived((bottomLeft * left) / (bottomLeft * left + bottomRight * right));
-	let notA_B = $derived((topRight * right) / (topLeft * left + topRight * right));
-	let notA_notB = $derived((bottomRight * right) / (bottomLeft * left + bottomRight * right));
-	let B_notA = $derived(topRight / (topRight + bottomRight));
-	let notB_notA = $derived(bottomRight / (topRight + bottomRight));
-</script>
-
-<div>
-	<Panel
-		bg="#F2B8C5"
-		prob={A}
-		statement="P(A)"
-		flex={left}
-		showPanel={showLeftPanel}
-		{showPanelProbs}
-	>
-		<Box
-			a={{ prob: A_B, statement: 'P(A|B)', bg: '#8FC0A9' }}
-			b={{ prob: B_A, statement: 'P(B|A)', bg: 'rgb(160,160,160)' }}
-			{showA}
-			flex={topLeft}
-			showProbs={showLeftProbs}
-		></Box>
-
-		<HorizontalBar
-			grabbingOther={grabbingMiddle || grabbingRight}
-			bind:grabbing={grabbingLeft}
-			bind:topFlex={topLeft}
-			bind:bottomFlex={bottomLeft}
-			bind:showA
-			bind:showPanel={showRightPanel}
-			bind:showProbs={showLeftProbs}
-			bg="rgb(180,180,180)"
-		/>
-
-		<Box
-			a={{ prob: A_notB, statement: 'P(A|!B)', bg: '#EDB090' }}
-			b={{ prob: notB_A, statement: 'P(!B|A)', bg: 'rgb(90,90,90)' }}
-			flex={bottomLeft}
-			{showA}
-			showProbs={showLeftProbs}
-		></Box>
-	</Panel>
-
-	<VerticalBar
-		grabbingOther={grabbingLeft || grabbingRight}
-		bind:grabbing={grabbingMiddle}
-		bind:leftFlex={left}
-		bind:rightFlex={right}
-		bind:showPanelProbs
-		bind:showLeftPanel
-		bind:showRightPanel
-		bg="#faf3dd"
-	/>
-
-	<Panel
-		bg="#8da8c8"
-		prob={notA}
-		statement="P(!A)"
-		flex={right}
-		showPanel={showRightPanel}
-		{showPanelProbs}
-	>
-		<Box
-			a={{ prob: notA_B, statement: 'P(!A|B)', bg: '#7dbac0' }}
-			b={{ prob: B_notA, statement: 'P(B|!A)', bg: 'rgb(180, 180, 180)' }}
-			{showA}
-			flex={topRight}
-			showProbs={showRightProbs}
-		></Box>
-
-		<HorizontalBar
-			grabbingOther={grabbingLeft || grabbingMiddle}
-			bind:grabbing={grabbingRight}
-			bind:topFlex={topRight}
-			bind:bottomFlex={bottomRight}
-			bind:showA
-			bind:showPanel={showLeftPanel}
-			bind:showProbs={showRightProbs}
-			bg="rgb(160, 160, 160)"
-		/>
-
-		<Box
-			a={{ prob: notA_notB, statement: 'P(!A|!B)', bg: '#e49d9f' }}
-			b={{ prob: notB_notA, statement: 'P(!B|!A)', bg: 'rgb(130, 130, 130)' }}
-			flex={bottomRight}
-			{showA}
-			showProbs={showRightProbs}
-		></Box>
-	</Panel>
-</div>
-
-<style>
-	div {
-		display: flex;
-		width: 100%;
-		min-height: 100vh;
-	}
-</style>
diff --git a/src/lib/index.ts b/src/lib/index.js
similarity index 82%
rename from src/lib/index.ts
rename to src/lib/index.js
index 79938ba..735252c 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.js
@@ -2,4 +2,3 @@ export { default as Box } from './Box.svelte';
 export { default as Panel } from './Panel.svelte';
 export { default as HorizontalBar } from './HorizontalBar.svelte';
 export { default as VerticalBar } from './VerticalBar.svelte';
-export { default as Viz } from './Viz.svelte';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4ed081b..2995c25 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,23 +1,144 @@
 <script lang="ts">
 	import './style.css';
 
-	import { Viz } from '$lib';
-	// import { createVisualization } from '$lib/builder';
-
-	// const visualization = createVisualization({
-	// 	default: {
-	// 		left: 0.6,
-	// 		right: 0.4,
-	// 		topLeft: 0.7,
-	// 		bottomLeft: 0.3,
-	// 		topRight: 0.2,
-	// 		bottomRight: 0.8
-	// 	}
-	// });
+	import { Panel, Box, HorizontalBar, VerticalBar } from '$lib';
+
+	let grabbingLeft = $state(false);
+	let grabbingMiddle = $state(false);
+	let grabbingRight = $state(false);
+
+	let showLeftPanel = $state(false);
+	let showRightPanel = $state(false);
+
+	let showA = $state(true);
+
+	let showLeftProbs = $state(false);
+	let showPanelProbs = $state(false);
+	let showRightProbs = $state(false);
+
+	type Props = {
+		left?: number;
+		right?: number;
+		topLeft?: number;
+		bottomLeft?: number;
+		topRight?: number;
+		bottomRight?: number;
+	};
+
+	let {
+		left = 0.6,
+		right = 0.4,
+		topLeft = 0.7,
+		bottomLeft = 0.3,
+		topRight = 0.2,
+		bottomRight = 0.8
+	}: Props = $props();
+
+	let A = $derived(left / (left + right));
+	let notA = $derived(right / (left + right));
+	let A_B = $derived((topLeft * left) / (topLeft * left + topRight * right));
+	let B_A = $derived(topLeft / (topLeft + bottomLeft));
+	let notB_A = $derived(bottomLeft / (topLeft + bottomLeft));
+	let A_notB = $derived((bottomLeft * left) / (bottomLeft * left + bottomRight * right));
+	let notA_B = $derived((topRight * right) / (topLeft * left + topRight * right));
+	let notA_notB = $derived((bottomRight * right) / (bottomLeft * left + bottomRight * right));
+	let B_notA = $derived(topRight / (topRight + bottomRight));
+	let notB_notA = $derived(bottomRight / (topRight + bottomRight));
 </script>
 
 <svelte:head>
 	<title>bayes</title>
 </svelte:head>
 
-<Viz></Viz>
+<div>
+	<Panel
+		bg="#F2B8C5"
+		prob={A}
+		statement="P(A)"
+		flex={left}
+		showPanel={showLeftPanel}
+		{showPanelProbs}
+	>
+		<Box
+			a={{ prob: A_B, statement: 'P(A|B)', bg: '#8FC0A9' }}
+			b={{ prob: B_A, statement: 'P(B|A)', bg: 'rgb(160,160,160)' }}
+			{showA}
+			flex={topLeft}
+			showProbs={showLeftProbs}
+		></Box>
+
+		<HorizontalBar
+			grabbingOther={grabbingMiddle || grabbingRight}
+			bind:grabbing={grabbingLeft}
+			bind:topFlex={topLeft}
+			bind:bottomFlex={bottomLeft}
+			bind:showA
+			bind:showPanel={showRightPanel}
+			bind:showProbs={showLeftProbs}
+			bg="rgb(180,180,180)"
+		/>
+
+		<Box
+			a={{ prob: A_notB, statement: 'P(A|!B)', bg: '#EDB090' }}
+			b={{ prob: notB_A, statement: 'P(!B|A)', bg: 'rgb(90,90,90)' }}
+			flex={bottomLeft}
+			{showA}
+			showProbs={showLeftProbs}
+		></Box>
+	</Panel>
+
+	<VerticalBar
+		grabbingOther={grabbingLeft || grabbingRight}
+		bind:grabbing={grabbingMiddle}
+		bind:leftFlex={left}
+		bind:rightFlex={right}
+		bind:showPanelProbs
+		bind:showLeftPanel
+		bind:showRightPanel
+		bg="#faf3dd"
+	/>
+
+	<Panel
+		bg="#8da8c8"
+		prob={notA}
+		statement="P(!A)"
+		flex={right}
+		showPanel={showRightPanel}
+		{showPanelProbs}
+	>
+		<Box
+			a={{ prob: notA_B, statement: 'P(!A|B)', bg: '#7dbac0' }}
+			b={{ prob: B_notA, statement: 'P(B|!A)', bg: 'rgb(180, 180, 180)' }}
+			{showA}
+			flex={topRight}
+			showProbs={showRightProbs}
+		></Box>
+
+		<HorizontalBar
+			grabbingOther={grabbingLeft || grabbingMiddle}
+			bind:grabbing={grabbingRight}
+			bind:topFlex={topRight}
+			bind:bottomFlex={bottomRight}
+			bind:showA
+			bind:showPanel={showLeftPanel}
+			bind:showProbs={showRightProbs}
+			bg="rgb(160, 160, 160)"
+		/>
+
+		<Box
+			a={{ prob: notA_notB, statement: 'P(!A|!B)', bg: '#e49d9f' }}
+			b={{ prob: notB_notA, statement: 'P(!B|!A)', bg: 'rgb(130, 130, 130)' }}
+			flex={bottomRight}
+			{showA}
+			showProbs={showRightProbs}
+		></Box>
+	</Panel>
+</div>
+
+<style>
+	div {
+		display: flex;
+		width: 100%;
+		min-height: 100vh;
+	}
+</style>