diff --git a/src/main.css b/src/main.css
index e0826c7a..805ab1d0 100644
--- a/src/main.css
+++ b/src/main.css
@@ -56,150 +56,14 @@
     margin: 0 6px;
 }
 
-/** Tapered Rule */
-.obsidian-statblock-plugin .tapered-rule {
-    width: auto;
-    margin: 0.5em 0;
-    height: 5px;
-    background: -webkit-linear-gradient(
-        0deg,
-        var(--statblock-rule-color) 0%,
-        var(--statblock-rule-color) 50%,
-        var(--statblock-background-color) 95%,
-        var(--statblock-background-color) 100%
-    );
-    clip-path: polygon(0 0, 0 100%, 95% 50%);
-    -webkit-clip-path: polygon(0 0, 0 100%, 95% 50%);
-}
-
-/** Top and Bottom Bars */
-.obsidian-statblock-plugin > .bar {
-    height: 5px;
-    background: var(--statblock-bar-color);
-    border: 1px solid #000;
-    /* position: absolute; */
-    z-index: 1;
-    width: auto;
-}
-.obsidian-statblock-plugin > .bar.top {
-    top: 0;
-}
-.obsidian-statblock-plugin > .bar.bottom {
-    bottom: 0;
-}
-.obsidian-statblock-plugin {
-    margin: 0 auto;
-    position: relative;
-}
-/** Wrapper Element */
-.obsidian-statblock-plugin > .content-wrap {
-    font-family: "Noto Sans", "Myriad Pro", Calibri, Helvetica, Arial,
-        sans-serif;
-    font-size: 14px;
-    color: var(--statblock-primary-color);
-    background-color: var(--statblock-background-color);
-    padding: 0.5em;
-    border: 1px #ddd solid;
-    box-shadow: 0 0 1.5em #ddd;
-    margin-left: 2px;
-    margin-right: 2px;
-
-    column-width: 400px;
-    column-gap: 1em;
-    column-fill: auto;
-}
-
-.obsidian-statblock-plugin > .content-wrap > * {
-    max-width: 400px;
-}
-
-/** Creature Name and Type */
-.obsidian-statblock-plugin .creature-heading > .name {
-    font-family: "Libre Baskerville", "Lora", "Calisto MT", "Bookman Old Style",
-        Bookman, "Goudy Old Style", Garamond, "Hoefler Text",
-        "Bitstream Charter", Georgia, serif;
-    color: var(--statblock-primary-color);
-    font-weight: 700;
-    margin: 0px;
-    font-size: 23px;
-    letter-spacing: 1px;
-    font-variant: small-caps;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.obsidian-statblock-plugin .creature-heading .statblock-icons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-}
-
-.obsidian-statblock-plugin .creature-heading > .subheading {
-    font-weight: normal;
-    font-style: italic;
-    font-size: 12px;
-    margin: 0;
-}
-
-.obsidian-statblock-plugin .property-line {
-    line-height: 1.4;
-    display: block;
-    color: var(--statblock-primary-color);
-}
-.obsidian-statblock-plugin .property-line > .property-name {
-    margin: 0;
-    margin-right: 0.25em;
-    display: inline;
-    font-weight: bold;
-}
-.obsidian-statblock-plugin .property-line > .property-text {
-    display: inline;
-    margin: 0;
-}
-
-/** Ability Scores */
-.obsidian-statblock-plugin .abilities {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-
-    color: var(--statblock-primary-color);
-}
-.obsidian-statblock-plugin .abilities.fage {
-    grid-template-columns: 1fr;
-    gap: 0.5rem;
-}
-.obsidian-statblock-plugin .abilities.fage .top {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 0.5rem;
-}
-.obsidian-statblock-plugin .abilities.fage .bottom {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-}
-
-.obsidian-statblock-plugin .abilities .ability-score {
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    justify-content: center;
-}
-
-.obsidian-statblock-plugin .section-header {
-    border-bottom: 1px solid var(--statblock-primary-color);
-    color: var(--statblock-primary-color);
-    font-size: 21px;
-    font-variant: small-caps;
-    font-weight: normal;
-    letter-spacing: 1px;
-    margin: 0;
-    margin-bottom: 0.3em;
-    break-inside: avoid-column;
-    break-after: avoid-column;
+.statblock-settings .coffee {
+    width: 60%;
+    color: var(--text-faint);
+    margin: 1rem auto;
+    text-align: center;
 }
-
-.obsidian-statblock-plugin .property:not(:last-child) {
-    margin-bottom: 0.25em;
+.statblock-settings .coffee img {
+    height: 30px;
 }
 
 .obsidian-statblock-plugin .property > .property-name {
@@ -218,13 +82,3 @@
 .obsidian-statblock-plugin .spell-line .spells {
     font-style: italic;
 }
-
-.statblock-settings .coffee {
-    width: 60%;
-    color: var(--text-faint);
-    margin: 1rem auto;
-    text-align: center;
-}
-.statblock-settings .coffee img {
-    height: 30px;
-}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 3cfe6e11..625a92f1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,7 +9,7 @@ import domtoimage from "dom-to-image";
 
 import type DiceRollerPlugin from "../../obsidian-dice-roller/src/main";
 
-import { BESTIARY_BY_NAME } from "./data/srd-bestiary";
+import { BESTIARY, BESTIARY_BY_NAME } from "./data/srd-bestiary";
 import StatBlockRenderer from "./view/statblock";
 import { getColumns, getParamsFromSource, renderError } from "./util/util";
 import {
diff --git a/src/settings/ui/StatblockCreator.svelte b/src/settings/ui/StatblockCreator.svelte
new file mode 100644
index 00000000..aa932f6d
--- /dev/null
+++ b/src/settings/ui/StatblockCreator.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+</script>
+
+<div class="creator-container">
+    <div class="creator" />
+</div>
+
+<style>
+    .creator {
+        max-width: 50vw;
+        max-height: 50vh;
+    }
+</style>
diff --git a/src/svelte/EditMonster.svelte b/src/svelte/EditMonster.svelte
index 7780e912..7241b95e 100644
--- a/src/svelte/EditMonster.svelte
+++ b/src/svelte/EditMonster.svelte
@@ -173,17 +173,17 @@
         height: 500px;
         max-height: 50vh;
     }
-    .json {
+    /* .json {
         margin-bottom: 1rem;
         display: flex;
         justify-content: flex-start;
         align-items: center;
-    }
+    } */
 
-    .attributes {
+    /* .attributes {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
-    }
+    } */
 
     .buttons {
         margin-top: 1rem;
diff --git a/src/util/suggester.ts b/src/util/suggester.ts
index 9bdd8bdb..e4f753b2 100644
--- a/src/util/suggester.ts
+++ b/src/util/suggester.ts
@@ -9,7 +9,7 @@ import {
     SuggestModal,
     TextComponent
 } from "obsidian";
-import StatBlockRenderer from "src/renderer/statblock";
+import StatBlockRenderer from "src/view/statblock";
 
 import EditMonsterApp from "../svelte/EditMonster.svelte";
 
diff --git a/src/view/Statblock.svelte b/src/view/Statblock.svelte
new file mode 100644
index 00000000..385c4a6f
--- /dev/null
+++ b/src/view/Statblock.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+    import type StatBlockPlugin from "src/main";
+    import { setContext } from "svelte";
+
+    import Bar from "./ui/Bar.svelte";
+    import Content from "./ui/Content.svelte";
+
+    export let monster: Monster;
+    export let plugin: StatBlockPlugin;
+
+    setContext<StatBlockPlugin>("plugin", plugin);
+</script>
+
+<div class="obsidian-statblock-plugin statblock">
+    {#if monster}
+        <Bar />
+        <Content {monster} />
+        <Bar />
+    {:else}
+        <span>Invalid monster.</span>
+    {/if}
+</div>
+
+<style>
+    .statblock {
+        max-width: 404px;
+    }
+</style>
diff --git a/src/renderer/statblock.ts b/src/view/statblock.ts
similarity index 97%
rename from src/renderer/statblock.ts
rename to src/view/statblock.ts
index 7f9d22a3..40f1baca 100644
--- a/src/renderer/statblock.ts
+++ b/src/view/statblock.ts
@@ -7,24 +7,36 @@ import {
     SAVE_SYMBOL
 } from "../data/constants";
 import { catchError, catchErrorAsync, getMod, toTitleCase } from "../util/util";
-import type { Spell, Monster, StatblockMonsterPlugin } from "@types";
+import type { Spell, Monster } from "@types";
+
+import Statblock from "./Statblock.svelte";
+import type StatBlockPlugin from "src/main";
 
 export default class StatBlockRenderer extends MarkdownRenderChild {
     topBar: HTMLDivElement;
     bottomBar: HTMLDivElement;
-    monster: Monster;
     loaded: boolean = false;
     statblockEl: HTMLDivElement;
     contentEl: HTMLDivElement;
     constructor(
         container: HTMLElement,
-        monster: Monster,
-        private plugin: StatblockMonsterPlugin,
+        public monster: Monster,
+        private plugin: StatBlockPlugin,
         private canSave: boolean,
         private canExport: boolean = true
     ) {
         super(container);
-        this.monster = monster;
+
+        new Statblock({
+            target: this.containerEl,
+            props: {
+                monster: this.monster,
+                plugin: this.plugin
+            }
+        });
+    }
+
+    old() {
         this.statblockEl = this.containerEl.createDiv({
             cls: "obsidian-statblock-plugin",
             attr: { style: "visibility: hidden;" }
diff --git a/src/view/ui/Bar.svelte b/src/view/ui/Bar.svelte
new file mode 100644
index 00000000..ecfcb9e6
--- /dev/null
+++ b/src/view/ui/Bar.svelte
@@ -0,0 +1,11 @@
+<div class="bar" />
+
+<style>
+    .bar {
+        height: 5px;
+        background: var(--statblock-bar-color);
+        border: 1px solid #000;
+        z-index: 1;
+        width: auto;
+    }
+</style>
diff --git a/src/view/ui/BottomStats.svelte b/src/view/ui/BottomStats.svelte
new file mode 100644
index 00000000..1a80969c
--- /dev/null
+++ b/src/view/ui/BottomStats.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+    import { AbilityAliases } from "src/data/constants";
+    import { toTitleCase } from "src/util/util";
+    import PropertyLine from "./PropertyLine.svelte";
+
+    export let monster: Monster;
+
+    function getMod(value: number) {
+        return `${value > 0 ? "+" : ""}${value}`;
+    }
+
+    const saves = monster.saves
+        .map((ability) => {
+            if (typeof ability != "object" || ability == null) return null;
+            let key = Object.keys(ability)[0];
+            if (!key) return null;
+            if (!AbilityAliases[key.toLowerCase()]) return null;
+            const value = Object.values(ability)[0];
+            return `${AbilityAliases[key.toLowerCase()]} ${getMod(value)}`;
+        })
+        .filter((m) => m);
+    const skillsaves = monster.skillsaves
+        .map((ability) => {
+            if (typeof ability != "object" || ability == null) return null;
+            let key = Object.keys(ability)[0];
+            if (!key) return null;
+            const value = Object.values(ability)[0];
+            return `${toTitleCase(key)} ${getMod(value)}`;
+        })
+        .filter((m) => m);
+</script>
+
+<div class="info">
+    {#if saves && saves.length}
+        <PropertyLine property={"Saving Throws"} text={saves.join(", ")} />
+    {/if}
+    {#if skillsaves && skillsaves.length}
+        <PropertyLine property={"Skills"} text={skillsaves.join(", ")} />
+    {/if}
+    {#if monster.damage_immunities && monster.damage_immunities.length}
+        <PropertyLine
+            property={"Damage Immunities"}
+            text={monster.damage_immunities}
+        />
+    {/if}
+    {#if monster.condition_immunities && monster.condition_immunities.length}
+        <PropertyLine
+            property={"Condition Immunities"}
+            text={monster.condition_immunities}
+        />
+    {/if}
+    {#if monster.damage_resistances && monster.damage_resistances.length}
+        <PropertyLine
+            property={"Resistances"}
+            text={monster.damage_resistances}
+        />
+    {/if}
+    {#if monster.damage_vulnerabilities && monster.damage_vulnerabilities.length}
+        <PropertyLine
+            property={"Damage Vulnerabilities"}
+            text={monster.damage_vulnerabilities}
+        />
+    {/if}
+    {#if monster.senses && monster.senses.length}
+        <PropertyLine property={"Senses"} text={monster.senses} />
+    {/if}
+    <PropertyLine property={"Languages"} text={monster.languages ?? "-"} />
+</div>
diff --git a/src/view/ui/Content.svelte b/src/view/ui/Content.svelte
new file mode 100644
index 00000000..ed515678
--- /dev/null
+++ b/src/view/ui/Content.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+    import BottomStats from "./BottomStats.svelte";
+    import Rule from "./Rule.svelte";
+    import Stats from "./Stats.svelte";
+    import TopHeading from "./TopHeading.svelte";
+    import TopStats from "./TopStats.svelte";
+    import Traits from "./Traits.svelte";
+    import Section from "./Section.svelte";
+
+    export let monster: Monster;
+
+    function inMonster<T extends keyof Monster>(...keys: T[]) {
+        return keys.some((s) => {
+            if (!(s in monster)) return false;
+            if (monster[s] == undefined) return false;
+            if (typeof monster[s] !== "number") {
+                return (monster[s] as any).length;
+            }
+            return true;
+        });
+    }
+</script>
+
+<div class="statblock-content">
+    {#if inMonster("name", "type", "alignment")}
+        <TopHeading {monster} />
+        <Rule />
+    {/if}
+    {#if inMonster("ac", "hp", "speed")}
+        <TopStats {monster} />
+        <Rule />
+    {/if}
+    {#if inMonster("fage_stats", "stats")}
+        <Stats {monster} />
+        <Rule />
+    {/if}
+    {#if inMonster("saves", "skillsaves", "damage_immunities", "condition_immunities", "damage_vulnerabilities", "senses", "languages", "cr")}
+        <BottomStats {monster} />
+        <Rule />
+    {/if}
+    {#if inMonster("spells", "traits")}
+        <Traits {monster} />
+    {/if}
+    {#if inMonster("actions")}
+        <Section blocks={monster.actions} header={"Actions"} />
+    {/if}
+    {#if inMonster("legendary_actions")}
+        <Section
+            blocks={monster.legendary_actions}
+            header={"Legendary Actions"}
+        />
+    {/if}
+    {#if inMonster("reactions")}
+        <Section blocks={monster.reactions} header={"Reactions"} />
+    {/if}
+</div>
+
+<style>
+    .statblock-content {
+        font-family: "Noto Sans", "Myriad Pro", Calibri, Helvetica, Arial,
+            sans-serif;
+        font-size: 14px;
+        color: var(--statblock-primary-color);
+        background-color: var(--statblock-background-color);
+        padding: 0.5em;
+        border: 1px #ddd solid;
+        box-shadow: 0 0 1.5em #ddd;
+        margin-left: 2px;
+        margin-right: 2px;
+        max-width: 400px;
+    }
+</style>
diff --git a/src/view/ui/DiceRoll.svelte b/src/view/ui/DiceRoll.svelte
new file mode 100644
index 00000000..8e272884
--- /dev/null
+++ b/src/view/ui/DiceRoll.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type StatBlockPlugin from "src/main";
+
+    import { getContext, onMount } from "svelte";
+    import type { BasicRoller } from "../../../../obsidian-dice-roller/src/roller/roller";
+
+    export let defaultValue: number;
+    export let text: string | number;
+
+    const plugin = getContext<StatBlockPlugin>("plugin");
+
+    let roller: BasicRoller;
+    if (plugin.canUseDiceRoller) {
+        roller = plugin.getRoller(`${text}`);
+    }
+
+    onMount(async () => {
+        await roller.roll();
+        await roller.applyResult({
+            type: "dice",
+            result: defaultValue,
+            tooltip: "Average"
+        });
+    });
+
+    const rollerEl = (node: HTMLElement) => {
+        node.appendChild(roller.containerEl);
+    };
+</script>
+
+<span class="roller-result" use:rollerEl />
+<span class="dice-original">({text})</span>
+
+<style>
+</style>
diff --git a/src/view/ui/PropertyLine.svelte b/src/view/ui/PropertyLine.svelte
new file mode 100644
index 00000000..b3992189
--- /dev/null
+++ b/src/view/ui/PropertyLine.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    export let property: string;
+    export let text: string | number;
+</script>
+
+<div class="line">
+    <span class="property-name">{property}</span>
+    <span class="property-text">
+        <slot>
+            {text}
+        </slot>
+    </span>
+</div>
+
+<style>
+    .line {
+        line-height: 1.4;
+        display: block;
+        color: var(--statblock-primary-color);
+    }
+    .property-name {
+        margin: 0;
+        margin-right: 0.25em;
+        display: inline;
+        font-weight: bold;
+    }
+    .property-text {
+        display: inline;
+        margin: 0;
+    }
+</style>
diff --git a/src/view/ui/Rule.svelte b/src/view/ui/Rule.svelte
new file mode 100644
index 00000000..ab15bb39
--- /dev/null
+++ b/src/view/ui/Rule.svelte
@@ -0,0 +1,18 @@
+<div class="tapered-rule" />
+
+<style>
+    .tapered-rule {
+        width: auto;
+        margin: 0.5em 0;
+        height: 5px;
+        background: -webkit-linear-gradient(
+            0deg,
+            var(--statblock-rule-color) 0%,
+            var(--statblock-rule-color) 50%,
+            var(--statblock-background-color) 95%,
+            var(--statblock-background-color) 100%
+        );
+        clip-path: polygon(0 0, 0 100%, 95% 50%);
+        -webkit-clip-path: polygon(0 0, 0 100%, 95% 50%);
+    }
+</style>
diff --git a/src/view/ui/Section.svelte b/src/view/ui/Section.svelte
new file mode 100644
index 00000000..4bd3d3b0
--- /dev/null
+++ b/src/view/ui/Section.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { Trait } from "@types";
+    import type StatBlockPlugin from "src/main";
+    import { getContext } from "svelte";
+
+    export let header: string = null;
+    export let blocks: Trait[];
+
+    const plugin = getContext<StatBlockPlugin>("plugin");
+
+    const traitBuilder = (node: HTMLElement, desc: string) => {
+        const holder = createDiv();
+        holder.setText(desc);
+
+        //regex \s(?=(?=[\+\-]\d+ to hit)|(?=\d+\s\(\d+d\d+(?:\s*[+\-]\s*\d+\))))
+
+        console.log(
+            desc.split(
+                /\s(?=(?=[\+\-]\d+ to hit)|(?=\d+\s\(\d+d\d+(?:\s*[+\-]\s*\d+\))))/
+            )
+        );
+        node.appendChild(holder);
+    };
+</script>
+
+<div class="section">
+    {#if header}
+        <h3 class="section-header">
+            {header}
+        </h3>
+    {/if}
+    {#each blocks as block}
+        <div class="property">
+            <div class="property-name">{block.name}</div>
+            <div class="property-text" use:traitBuilder={block.desc} />
+        </div>
+    {/each}
+</div>
+
+<style>
+    .section-header {
+        border-bottom: 1px solid var(--statblock-primary-color);
+        color: var(--statblock-primary-color);
+        font-size: 21px;
+        font-variant: small-caps;
+        font-weight: normal;
+        letter-spacing: 1px;
+        margin: 0;
+        margin-bottom: 0.3em;
+        break-inside: avoid-column;
+        break-after: avoid-column;
+    }
+</style>
diff --git a/src/view/ui/Stats.svelte b/src/view/ui/Stats.svelte
new file mode 100644
index 00000000..576280fb
--- /dev/null
+++ b/src/view/ui/Stats.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+
+    export let monster: Monster;
+
+    function getMod(stat: number) {
+        let mod = Math.floor(((stat ?? 10) - 10) / 2);
+        return `${mod >= 0 ? "+" : "-"}${Math.abs(mod)}`;
+    }
+</script>
+
+<div class="abilities" class:fage={"fage_stats" in monster}>
+    {#if "fage_stats" in monster}
+        <div class="top">
+            {#each ["Accuracy", "Communication", "Constitution", "Dexterity", "Fighting"] as stat, index}
+                <div class="ability-score">
+                    <strong>{stat}</strong>
+                    <span>{monster.fage_stats[index]}</span>
+                </div>
+            {/each}
+        </div>
+        <div class="bottom">
+            {#each ["Intelligence", "Perception", "Strength", "Willpower"] as stat, index}
+                <div class="ability-score">
+                    <strong>{stat}</strong>
+                    <span>{monster.fage_stats[index]}</span>
+                </div>
+            {/each}
+        </div>
+    {:else}
+        {#each ["STR", "DEX", "CON", "INT", "WIS", "CHA"] as stat, index}
+            <div class="ability-score">
+                <strong>{stat}</strong>
+                <span>
+                    {monster.stats[index]} ({getMod(monster.stats[index])})
+                </span>
+            </div>
+        {/each}
+    {/if}
+</div>
+
+<style>
+    .abilities {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+
+        color: var(--statblock-primary-color);
+    }
+    .fage .top {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 0.5rem;
+    }
+    .fage .bottom {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .ability-score {
+        display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    }
+</style>
diff --git a/src/view/ui/TopHeading.svelte b/src/view/ui/TopHeading.svelte
new file mode 100644
index 00000000..eda5a268
--- /dev/null
+++ b/src/view/ui/TopHeading.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+    import { ExtraButtonComponent } from "obsidian";
+    import { EXPORT_SYMBOL, SAVE_SYMBOL } from "src/data/constants";
+    import { createEventDispatcher } from "svelte";
+    import Rule from "./Rule.svelte";
+    const dispatch = createEventDispatcher();
+    export let monster: Monster;
+
+    const save = (node: HTMLElement) => {
+        new ExtraButtonComponent(node)
+            .setIcon(SAVE_SYMBOL)
+            .setTooltip("Save as Homebrew")
+            .onClick(() => {
+                dispatch("save", { ...monster, source: "Homebrew" });
+            });
+    };
+    const png = (node: HTMLElement) => {
+        new ExtraButtonComponent(node)
+            .setIcon(EXPORT_SYMBOL)
+            .setTooltip("Export as PNG")
+            .onClick(() => {
+                dispatch("export");
+            });
+    };
+
+    const subheading: string[] = [];
+    const size = monster.size;
+    const type = monster.type;
+    const subtype = monster.subtype;
+    const alignment = monster.alignment;
+    if (size)
+        subheading.push(
+            `${size[0].toUpperCase() + size.slice(1).toLowerCase()}`
+        );
+    if (type) {
+        subheading.push(type);
+        if (subtype) subheading.push(`(${subtype})`);
+    }
+    if (alignment) subheading.push(alignment);
+</script>
+
+<div class="heading">
+    {#if monster.name}
+        <div class="flex-container">
+            <div class="name">{monster.name}</div>
+            <div class="icons">
+                <div class="save" use:save />
+                <div class="png" use:png />
+            </div>
+        </div>
+    {/if}
+    {#if subheading.length}
+        <div class="subheading">
+            {subheading.join(" ")}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .flex-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .name {
+        font-family: "Libre Baskerville", "Lora", "Calisto MT",
+            "Bookman Old Style", Bookman, "Goudy Old Style", Garamond,
+            "Hoefler Text", "Bitstream Charter", Georgia, serif;
+        color: var(--statblock-primary-color);
+        font-weight: 700;
+        margin: 0px;
+        font-size: 23px;
+        letter-spacing: 1px;
+        font-variant: small-caps;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .icons {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+    .subheading {
+        font-weight: normal;
+        font-style: italic;
+        font-size: 12px;
+        margin: 0;
+    }
+</style>
diff --git a/src/view/ui/TopStats.svelte b/src/view/ui/TopStats.svelte
new file mode 100644
index 00000000..b18fe972
--- /dev/null
+++ b/src/view/ui/TopStats.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+    import DiceRoll from "./DiceRoll.svelte";
+    import Property from "./PropertyLine.svelte";
+
+    export let monster: Monster;
+</script>
+
+<div class="top-stats">
+    {#if monster.ac}
+        <Property property={"Armor Class"} text={monster.ac} />
+    {/if}
+    {#if monster.hp}
+        <Property property={"Hit Points"} text={monster.hp}>
+            {#if monster.hit_dice}
+                <DiceRoll text={monster.hit_dice} defaultValue={monster.hp} />
+            {/if}
+        </Property>
+    {/if}
+    {#if monster.speed}
+        <Property property={"Speed"} text={monster.speed} />
+    {/if}
+</div>
+
+<style>
+</style>
diff --git a/src/view/ui/Traits.svelte b/src/view/ui/Traits.svelte
new file mode 100644
index 00000000..82a1a487
--- /dev/null
+++ b/src/view/ui/Traits.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import type { Monster } from "@types";
+
+    export let monster: Monster;
+</script>