diff --git a/package.json b/package.json
index 5faed221f..53a2e39af 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,11 @@
     "puppeteer-core": "9.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-feather": "^2.0.9",
     "styled-components": "^5.3.0",
-    "twemoji": "13.0.2"
+    "twemoji": "13.0.2",
+    "use-local-storage-state": "^9.0.2",
+    "zustand": "^3.5.1"
   },
   "devDependencies": {
     "@types/marked": "2.0.2",
diff --git a/src/components/Field.tsx b/src/components/Field.tsx
new file mode 100644
index 000000000..16cea0c3f
--- /dev/null
+++ b/src/components/Field.tsx
@@ -0,0 +1,9 @@
+import tw from "twin.macro";
+
+export const Field = tw.div`
+  flex items-center space-x-4
+`;
+
+export const Label = tw.label`
+  w-24
+`;
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 000000000..2781ee7a0
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import tw from "twin.macro";
+
+export const Input = tw.input`
+  appearance-none w-full border rounded
+  px-3 py-1 h-9
+  focus:outline-none focus:ring-2 focus:ring-accent
+`;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 000000000..b9fac4a1b
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { ILayout } from "../types";
+import { Field, Label } from "./Field";
+import { Input } from "./Input";
+import { Select } from "./Select";
+import "twin.macro";
+
+export interface Props {
+  layout: ILayout;
+}
+
+export const Layout: React.FC<Props> = ({ layout, ...props }) => {
+  return (
+    <div className={`layout-${layout.name}`} tw="space-y-4">
+      {layout.properties.map(p => (
+        <Field key={p.name}>
+          <Label>{p.name} </Label>
+
+          {p.type === "text" ? (
+            <Input placeholder={`Value for ${p.name}`} />
+          ) : p.type === "select" ? (
+            <Select options={p.options.map(value => ({ value }))} />
+          ) : null}
+        </Field>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 000000000..2903e754a
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,74 @@
+import classnames from "classnames";
+import React from "react";
+import tw from "twin.macro";
+import { ChevronDown } from "react-feather";
+
+export interface Option {
+  value: string;
+  text?: string;
+  disabled?: boolean;
+}
+
+export interface Props {
+  options: Option[];
+  value?: string;
+  width?: string;
+  name?: string;
+  error?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, Props>(
+  (
+    { value, options, name, error, disabled, autoFocus, onChange, ...rest },
+    forwardedRef,
+  ) => {
+    return (
+      <div
+        css={[
+          tw`relative flex items-center w-full`,
+          disabled && tw`opacity-60`,
+        ]}
+      >
+        <select
+          ref={forwardedRef}
+          value={value}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          name={name}
+          className={classnames("select", { [`select-${name}`]: name != null })}
+          css={[
+            tw`bg-transparent w-full h-9 appearance-none border rounded`,
+            tw`py-1 pl-3 pr-8`,
+            !disabled && tw`cursor-pointer hover:border-gray-400`,
+            error
+              ? tw`border-red-500 hover:border-red-500`
+              : tw`border-gray-200`,
+            tw`focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
+          ]}
+          {...rest}
+          onChange={e => {
+            if (onChange != null) {
+              onChange(e.target.value);
+            }
+          }}
+        >
+          {options.map(opt => (
+            <option
+              key={opt.value}
+              value={opt.value}
+              disabled={opt.disabled}
+              tw="text-fg"
+            >
+              {opt.text ?? opt.value}
+            </option>
+          ))}
+        </select>
+
+        <ChevronDown tw="h-full absolute top-0 right-2 pointer-events-none" />
+      </div>
+    );
+  },
+);
diff --git a/src/hooks/useIsMounted.ts b/src/hooks/useIsMounted.ts
new file mode 100644
index 000000000..3ee7ad163
--- /dev/null
+++ b/src/hooks/useIsMounted.ts
@@ -0,0 +1,7 @@
+import { useEffect, useState } from "react";
+
+export const useIsMounted = (): boolean => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => setIsMounted(true), []);
+  return isMounted;
+};
diff --git a/src/layouts.ts b/src/layouts.ts
new file mode 100644
index 000000000..79eaf7373
--- /dev/null
+++ b/src/layouts.ts
@@ -0,0 +1,25 @@
+import { ILayout } from "./types";
+
+export const simpleLayout: ILayout = {
+  name: "Simple",
+  properties: [
+    { name: "Test", type: "text" },
+    {
+      name: "Boop",
+      description: "This is a test",
+      type: "select",
+      options: ["one", "two", "three"],
+    },
+  ],
+};
+
+export const starterLayout: ILayout = {
+  name: "Starter",
+  properties: [
+    { name: "Name", type: "text" },
+    { name: "Icon", type: "text" },
+    { name: "URL", type: "text" },
+  ],
+};
+
+export const layouts: ILayout[] = [simpleLayout, starterLayout];
diff --git a/src/pages/api/_lib/template.ts b/src/pages/api/_lib/template.ts
index edf004126..bf7e4a180 100644
--- a/src/pages/api/_lib/template.ts
+++ b/src/pages/api/_lib/template.ts
@@ -1,4 +1,3 @@
-import { readFileSync } from "fs";
 import marked from "marked";
 import { sanitizeHtml } from "./sanitizer";
 import { ParsedRequest } from "./types";
@@ -7,19 +6,6 @@ const twOptions = { folder: "svg", ext: ".svg" };
 const emojify = (text: string) => twemoji.parse(text, twOptions);
 
 function getCss(theme: string, fontSize: string) {
-  console.log("DIRNAME", __dirname);
-
-  // const rglr = readFileSync(`../_fonts/Inter-Regular.woff2`).toString("base64");
-
-  // console.log("REGULAR", rglr);
-
-  // const bold = readFileSync(`${__dirname}/../_fonts/Inter-Bold.woff2`).toString(
-  //   "base64",
-  // );
-  // const mono = readFileSync(`${__dirname}/../_fonts/Vera-Mono.woff2`).toString(
-  //   "base64",
-  // );
-
   let background = "white";
   let foreground = "black";
   let radial = "lightgray";
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4182daad9..8e67ce316 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,18 +1,31 @@
 import { NextPage } from "next";
-import React from "react";
+import React, { useMemo, useState } from "react";
 import "twin.macro";
+import { Field, Label } from "../components/Field";
+import { Input } from "../components/Input";
+import { Layout } from "../components/Layout";
+import { Select } from "../components/Select";
+import { useIsMounted } from "../hooks/useIsMounted";
+import { layouts } from "../layouts";
+import { useStore } from "../store";
+import { FileType, Theme } from "../types";
 
 const Home: NextPage = () => {
+  const isMounted = useIsMounted();
+
   return (
     <main tw="px-6 max-w-6xl w-full mx-auto">
       <header tw="text-center mt-20 mb-12 space-y-4">
         <h1 tw="text-4xl font-bold">Railway OG Image Generator</h1>
       </header>
 
-      <section tw="grid gap-4 grid-cols-1 md:grid-cols-3">
-        <Config />
-        <OGImage />
-      </section>
+      {/* We pull the state from local storage so need the app to be loaded in the browser */}
+      {isMounted && (
+        <section tw="grid gap-8 grid-cols-1 md:grid-cols-3">
+          <Config />
+          <OGImage />
+        </section>
+      )}
     </main>
   );
 };
@@ -20,17 +33,59 @@ const Home: NextPage = () => {
 export default Home;
 
 export const Config: React.FC = () => {
-  return <div tw="bg-pink-100">CONFIG</div>;
+  const [{ theme, fileType, layout: layoutName }, setStore] = useStore();
+
+  const layout = useMemo(
+    () => layouts.find(l => l.name === layoutName),
+    [layoutName],
+  );
+
+  return (
+    <div tw="space-y-4">
+      <Field>
+        <Label>Theme</Label>
+        <Select
+          value={theme}
+          options={[{ value: "light" }, { value: "dark" }]}
+          onChange={theme => setStore(s => ({ ...s, theme: theme as Theme }))}
+        />
+      </Field>
+
+      <Field>
+        <Label>File type</Label>
+        <Select
+          value={fileType}
+          options={[{ value: "png" }, { value: "jpeg" }]}
+          onChange={fileType =>
+            setStore(s => ({ ...s, fileType: fileType as FileType }))
+          }
+        />
+      </Field>
+
+      <Field>
+        <Label>Layout</Label>
+        <Select
+          value={layoutName}
+          options={layouts.map(l => ({ value: l.name }))}
+          onChange={layout => setStore(s => ({ ...s, layout }))}
+        />
+      </Field>
+
+      <hr />
+
+      {layout == null ? (
+        <p>Layout {layoutName} does not exist</p>
+      ) : (
+        <Layout layout={layout} key={layout.name} />
+      )}
+    </div>
+  );
 };
 
 export const OGImage: React.FC = () => {
   return (
     <div className="image-wrapper" tw="col-span-2">
-      <img
-        tw="shadow-lg w-full"
-        src="https://og-image.vercel.app/**Hello**%20World.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg"
-        alt=""
-      />
+      <img tw="shadow-lg w-full" src="/api/boooop" alt="" />
     </div>
   );
 };
diff --git a/src/store.ts b/src/store.ts
new file mode 100644
index 000000000..6d5abe7da
--- /dev/null
+++ b/src/store.ts
@@ -0,0 +1,20 @@
+import { createLocalStorageStateHook } from "use-local-storage-state";
+import { simpleLayout } from "./layouts";
+import { FileType, Theme } from "./types";
+
+export interface StoreState {
+  theme: Theme;
+  fileType: FileType;
+  layout: string;
+}
+
+const defaultStoreState: StoreState = {
+  theme: "light",
+  fileType: "png",
+  layout: simpleLayout.name,
+};
+
+export const useStore = createLocalStorageStateHook<StoreState>(
+  "state",
+  defaultStoreState,
+);
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 000000000..1d0bd5db8
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,32 @@
+export type Theme = "light" | "dark";
+export type FileType = "png" | "jpeg";
+
+export interface IConfig {
+  theme: Theme;
+  fileType: FileType;
+}
+
+export interface ILayout {
+  name: string;
+  properties: LayoutProperty[];
+}
+
+export type LayoutProperty = BaseLayoutProperty &
+  (
+    | {
+        type: "text";
+      }
+    | {
+        type: "array";
+        subProperty: LayoutProperty;
+      }
+    | {
+        type: "select";
+        options: string[];
+      }
+  );
+
+export interface BaseLayoutProperty {
+  name: string;
+  description?: string;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 468601622..078ebab62 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,10 @@
 const colors = require("tailwindcss/colors");
 
 const customColors = {
+  transparent: "transparent",
   bg: "#f8f9fa",
   fg: "#212529",
+  accent: "#C049FF",
 };
 
 module.exports = {
diff --git a/yarn.lock b/yarn.lock
index c68e926af..42b63df89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2278,7 +2278,7 @@ progress@^2.0.1:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@15.7.2:
+prop-types@15.7.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -2414,6 +2414,13 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-feather@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.9.tgz#6e42072130d2fa9a09d4476b0e61b0ed17814480"
+  integrity sha512-yMfCGRkZdXwIs23Zw/zIWCJO3m3tlaUvtHiXlW+3FH7cIT6fiK1iJ7RJWugXq7Fso8ZaQyUm92/GOOHXvkiVUw==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2964,6 +2971,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-local-storage-state@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/use-local-storage-state/-/use-local-storage-state-9.0.2.tgz#77ace2fd72c8d17d3da5be74cf6aa3e25b6e321c"
+  integrity sha512-loNVFqrzfsNoNVtM/3RJbjKVhSgTX15vPC5Tcuk7oflF0nonldRivMGAgFU3toi9v6hfTT/x8M+o6ifDN2n0OQ==
+
 use-subscription@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
@@ -3085,3 +3097,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.5.1.tgz#28970280e830924b185ce064061231957398c1d0"
+  integrity sha512-7J56Ve814z4zap71iaKFD+t65LFI//jEq/Vf55BTSVqJZCm+w9rov8OMBg+YSwIPQk54bfoIWHTrOWuAbpEDMw==