diff --git a/package-lock.json b/package-lock.json
index 5c97a75..04bdffe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "svelte-app",
       "version": "1.0.0",
       "dependencies": {
-        "sirv-cli": "^2.0.0"
+        "sirv-cli": "^2.0.0",
+        "svelte-icons": "^2.1.0"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^17.0.0",
@@ -1205,6 +1206,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-icons": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/svelte-icons/-/svelte-icons-2.1.0.tgz",
+      "integrity": "sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg=="
+    },
     "node_modules/svelte-preprocess": {
       "version": "4.10.4",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
@@ -2245,6 +2251,11 @@
       "integrity": "sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==",
       "dev": true
     },
+    "svelte-icons": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/svelte-icons/-/svelte-icons-2.1.0.tgz",
+      "integrity": "sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg=="
+    },
     "svelte-preprocess": {
       "version": "4.10.4",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.4.tgz",
diff --git a/package.json b/package.json
index 53d98e2..c99c51e 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "svelte-preprocess": "^4.10.4"
   },
   "dependencies": {
-    "sirv-cli": "^2.0.0"
+    "sirv-cli": "^2.0.0",
+    "svelte-icons": "^2.1.0"
   }
 }
diff --git a/public/global.css b/public/global.css
index 81b6cf2..d4447af 100644
--- a/public/global.css
+++ b/public/global.css
@@ -18,7 +18,7 @@ body {
 }
 
 a {
-	color: rgb(0,100,200);
+	color: #d23e6e;
 	text-decoration: none;
 }
 
@@ -27,7 +27,7 @@ a:hover {
 }
 
 a:visited {
-	color: rgb(0,80,160);
+	color: #d23e6e;
 }
 
 label {
diff --git a/src/App.svelte b/src/App.svelte
index 31b637a..507ee7c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,15 +2,51 @@
 	import { currentChartID } from './stores';
 	import ChartEdit from './ChartEdit.svelte';
 	import ChartCreation from './ChartCreation.svelte';
+	import IoMdHeart from 'svelte-icons/io/IoMdHeart.svelte';
+	import { H1 } from 'attractions';
 </script>
 
+<style>
+	.icon {
+		width: 0.8em;
+		height: 0.8em;
+		display: inline-block;
+	}
+	footer {
+		width: 100%;
+		font-size: 1em;
+		text-align: center;
+		color: #888;
+		position: absolute;
+		bottom: -1.2em;
+		left: 0;
+	}
+
+	header {
+		margin-top: 0.5em;
+		margin-bottom: 0;
+		text-align: center;
+	}
+
+	main {
+		position: relative;
+		min-height: 100%;
+		margin-bottom: 1.2em;
+	}
+</style>
+
 <main>
+	<header>
+		<H1>chartmaker</H1>
+	</header>
+
 	{#if $currentChartID}
 		<ChartEdit/>
 	{:else}
 		<ChartCreation/>
 	{/if}
-</main>
 
-<style>
-</style>
\ No newline at end of file
+	<footer>
+		made with <div class="icon"><IoMdHeart/></div> by oatmealine. <a target="_blank" href="https://git.oat.zone/oat/project-databased-fe">source</a>
+	</footer>
+</main>
\ No newline at end of file
diff --git a/src/Chart.svelte b/src/Chart.svelte
new file mode 100644
index 0000000..ce1ad99
--- /dev/null
+++ b/src/Chart.svelte
@@ -0,0 +1,55 @@
+<script>
+  export let topText;
+  export let leftText;
+  export let rightText;
+  export let bottomText;
+  export let fontSize;
+
+  import { onMount } from "svelte";
+  let canvas;
+
+  let sw = 512;
+  let sh = 512;
+  const pad = 32;
+
+  function render(ctx) {
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    ctx.fillStyle = '#999';
+    ctx.strokeStyle = '#999';
+
+    ctx.beginPath();
+    ctx.moveTo(pad, sh/2);
+    ctx.lineTo(sw - pad, sh/2);
+    ctx.moveTo(sw/2, pad);
+    ctx.lineTo(sw/2, sh - pad);
+    ctx.stroke();
+
+    ctx.font = fontSize + 'px Inter';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(topText, sw/2, pad/2);
+    ctx.fillText(bottomText, sw/2, sh - pad/2);
+
+    ctx.textBaseline = 'bottom';
+    ctx.textAlign = 'left';
+    ctx.fillText(leftText, pad/2, sh/2 - pad/4);
+    ctx.textAlign = 'right';
+    ctx.fillText(rightText, sw - pad/2, sh/2 - pad/4);
+  }
+
+  onMount(() => {
+    const ctx = canvas.getContext('2d');
+
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetWidth;
+    sw = canvas.width;
+    sh = canvas.height;
+
+    render(ctx);
+  });
+</script>
+
+<canvas bind:this={canvas} id="canvas" width="512" height="512"></canvas>
\ No newline at end of file
diff --git a/src/ChartCreation.svelte b/src/ChartCreation.svelte
index c640933..5994ad5 100644
--- a/src/ChartCreation.svelte
+++ b/src/ChartCreation.svelte
@@ -1,9 +1,103 @@
 <script>
-  import { Button } from 'attractions';
+  import { FormField, TextField, Button, Slider } from 'attractions';
+  import { onMount } from 'svelte';
+  import IoMdCheckmark from 'svelte-icons/io/IoMdCheckmark.svelte'
+  import Chart from './Chart.svelte';
+
+  const examples = [
+    ['wouldn\'t make a pipebomb', 'would make a pipebomb',
+     'would eat a pipebomb', 'wouldn\'t eat a pipebomb'],
+    ['knows what sex is', 'doesn\'t know what sex is',
+     'has sex', 'doesn\'t have sex'],
+    ['doesn\'t want to cause chaos', 'wants to cause chaos',
+     'causes chaos', 'doesn\'t cause chaos'],
+    ['lawful', 'chaotic',
+     'good', 'evil'],
+    ['women want me', 'women don\'t want me',
+     'fish want me', 'fish don\'t want me'],
+  ];
+
+  let example = [];
+
+  onMount(() => {
+    example = examples[Math.floor(Math.random() * examples.length)];
+  });
+
+  let top = '';
+  let left = '';
+  let right = '';
+  let bot = '';
+  let fontSize = 12;
 </script>
 
-<Button>click me</Button>
-
 <style>
+  #form {
+    text-align: center;
+		max-width: 680px;
+		margin: 0 auto;
+  }
 
-</style>
\ No newline at end of file
+  #preview {
+    text-align: center;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    max-height: 512px;
+  }
+  #previewcontainer {
+    width: 512px;
+    height: auto;
+  }
+</style>
+
+<div id="form">
+  let's make a chart!
+
+  <br><br>
+
+  <FormField
+    name="X Axis"
+    help="Left to right"
+  >
+    <TextField bind:value={left} placeholder={example[0] || ''} />
+    <TextField bind:value={right} placeholder={example[1] || ''} />
+  </FormField>
+
+  <FormField
+    name="Y Axis"
+    help="Top to bottom"
+  >
+    <TextField bind:value={top} placeholder={example[2] || ''} />
+    <TextField bind:value={bot} placeholder={example[3] || ''} />
+  </FormField>
+
+  <FormField
+    name="Font Size"
+    help="Adjust if necessary"
+  >
+    <Slider
+      bind:value={fontSize}
+      min={8}
+      max={20}
+      step={1}
+      tooltips="active"
+      ticks={{mode: 'step', step: 1, subDensity: 100/(20-8)}}
+    >
+      <span slot="tooltip-content" let:value>{value}px</span>
+    </Slider>
+  </FormField>
+
+  <div style="width: 100%; display: flex; justify-content: center">
+    <Button filled>
+      <div style="width: 16px; height: 16px; display: block-inline; padding-right: 6px;"><IoMdCheckmark/></div> create!
+    </Button>
+  </div>
+</div>
+
+<div id="preview">
+  <div id="previewcontainer">
+    {#key top + left + right + bot + fontSize} <!-- awful hack -->
+      <Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize={fontSize}/>
+    {/key}
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/css/theme.scss b/src/css/theme.scss
new file mode 100644
index 0000000..196ca04
--- /dev/null
+++ b/src/css/theme.scss
@@ -0,0 +1,4 @@
+@forward '~attractions/_variables' with (
+  $main: #d23e6e,
+  $font: inherit,
+);
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index c540bd4..dd0c8f9 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,16 @@
 const sveltePreprocess = require('svelte-preprocess');
+const makeAttractionsImporter = require('attractions/importer.js');
+const path = require('path');
 
 module.exports = {
-  preprocess: [sveltePreprocess()],
+  preprocess: [
+    sveltePreprocess({
+      scss: {
+        importer: makeAttractionsImporter({
+          themeFile: path.join(__dirname, 'src/css/theme.scss')
+        }),
+        includePaths: [path.join(__dirname, './src/css')],
+      }
+    })
+  ],
 };
\ No newline at end of file