diff --git a/src/assets/images/header.png b/src/assets/images/header.png
new file mode 100644
index 00000000..94ec4dda
Binary files /dev/null and b/src/assets/images/header.png differ
diff --git a/src/globals.css b/src/globals.css
index 5f220c94..27ec0579 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -11,6 +11,6 @@ body {
 *:hover { cursor: default !important; }
 /* end lynith's native experience */
 
-h1 { @apply text-2xl font-bold; }
+h1 { @apply text-2xl font-semibold; }
 h2 { @apply text-xxl font-semibold; }
 h3 { @apply text-xl font-medium; }
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index a84825e8..30d933ea 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -8,7 +8,7 @@ function App(props: ParentProps) {
         <main class='flex flex-col bg-primary min-h-screen text-white'>
             <WindowFrame />
             <Navbar />
-            <div class='flex flex-col flex-1 *:flex-1 overflow-x-hidden'>
+            <div class='flex flex-col flex-1 *:flex-1 overflow-x-hidden px-8'>
                 { /* eslint-disable-next-line @typescript-eslint/no-use-before-define */ }
                 <AnimatedRoutes>
                     {props.children}
diff --git a/src/ui/components/base/Button.module.scss b/src/ui/components/base/Button.module.scss
index 0a830f1c..3985e6e5 100644
--- a/src/ui/components/base/Button.module.scss
+++ b/src/ui/components/base/Button.module.scss
@@ -1,6 +1,5 @@
 .button {
-    cursor: default !important;
-    @apply py-2 px-4 rounded-lg;
+    @apply py-1.5 px-4 rounded-lg flex flex-row justify-center items-center gap-x-2.5;
 
     &__primary {
         @apply text-onbrand hover:text-onbrand-hover active:text-onbrand-pressed disabled:text-onbrand-disabled;
@@ -15,4 +14,8 @@
     &__danger {
         @apply bg-danger hover:bg-danger-hover active:bg-danger-pressed disabled:bg-danger-disabled;
     }
+}
+
+.icon > * {
+    @apply w-4;
 }
\ No newline at end of file
diff --git a/src/ui/components/base/Button.tsx b/src/ui/components/base/Button.tsx
index 9337dced..92b39203 100644
--- a/src/ui/components/base/Button.tsx
+++ b/src/ui/components/base/Button.tsx
@@ -1,16 +1,23 @@
-import { JSX, ParentProps, mergeProps } from 'solid-js';
+import {
+    JSX, ParentProps, mergeProps, splitProps,
+} from 'solid-js';
 import styles from './Button.module.scss';
 
 type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & ParentProps & {
+    iconLeft?: JSX.Element,
+    iconRight?: JSX.Element,
     styleType?: 'primary' | 'secondary' | 'danger',
 };
 
 function Button(props: ButtonProps) {
-    const merged = mergeProps({ styleType: 'primary' }, props);
+    const [buttonProps, rest] = splitProps(props, ['iconLeft', 'iconRight', 'styleType', 'class']);
+    const merged = mergeProps({ styleType: 'primary' }, buttonProps);
 
     return (
-        <button class={`${styles.button} ${styles[`button__${merged.styleType}`]}`} {...props}>
+        <button class={`${styles.button} ${styles[`button__${merged.styleType}`]} ${buttonProps.class}`} {...rest}>
+            {merged.iconLeft && <span class={styles.icon}>{merged.iconLeft}</span>}
             {props.children}
+            {merged.iconRight && <span class={styles.icon}>{merged.iconRight}</span>}
         </button>
     );
 }
diff --git a/src/ui/components/base/Tag.module.scss b/src/ui/components/base/Tag.module.scss
new file mode 100644
index 00000000..9b1a2665
--- /dev/null
+++ b/src/ui/components/base/Tag.module.scss
@@ -0,0 +1,8 @@
+.tag {
+    @apply flex flex-row justify-center items-center gap-x-2;
+    @apply bg-component-bg/60 border border-gray-.5 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
+}
+
+.icon > * {
+    @apply w-4;
+}
\ No newline at end of file
diff --git a/src/ui/components/base/Tag.tsx b/src/ui/components/base/Tag.tsx
new file mode 100644
index 00000000..e765144d
--- /dev/null
+++ b/src/ui/components/base/Tag.tsx
@@ -0,0 +1,19 @@
+import { JSX, ParentProps } from 'solid-js';
+import styles from './Tag.module.scss';
+
+type TagProps = ParentProps & {
+    iconLeft?: JSX.Element,
+    iconRight?: JSX.Element,
+};
+
+function Tag(props: TagProps) {
+    return (
+        <span class={styles.tag}>
+            {props.iconLeft && <span class={styles.icon}>{props.iconLeft}</span>}
+            {props.children && props.children}
+            {props.iconRight && <span class={styles.icon}>{props.iconRight}</span>}
+        </span>
+    );
+}
+
+export default Tag;
diff --git a/src/ui/pages/Home.tsx b/src/ui/pages/Home.tsx
index d08484cd..8116d431 100644
--- a/src/ui/pages/Home.tsx
+++ b/src/ui/pages/Home.tsx
@@ -1,8 +1,49 @@
+import { CheckIcon, DotsVerticalIcon, PlayIcon } from '@untitled-theme/icons-solid';
+import image from '../../assets/images/header.png';
+import Button from '../components/base/Button';
+import Tag from '../components/base/Tag';
+
+function OneConfigLogo() {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g id="Group 3544">
+                <g id="Group 3545">
+                    <path id="Secondary" d="M15.635 6.4514C15.6593 6.49541 15.6848 6.54148 15.7046 6.58943C16.1185 7.45825 16.1017 8.7122 15.6275 9.56181L13.9018 12.5487C13.3915 11.7689 12.6768 11.0998 11.8176 10.5943C11.8392 10.5607 11.8585 10.5269 11.8753 10.4933C13.3988 7.41013 11.8176 3.33781 8.0003 3.39798C4.11578 3.333 2.58014 7.47994 4.17113 10.604C3.31664 11.1094 2.6067 11.7761 2.09878 12.5535C2.08691 12.5283 1.91791 12.2378 1.68616 11.8394C1.12277 10.8708 0.18813 9.26419 0.235961 9.27782C-0.0841643 8.50283 -0.0793459 7.4438 0.255235 6.67845C0.27533 6.62445 0.300245 6.57238 0.326452 6.52232C0.341024 6.49435 0.356067 6.46697 0.370757 6.44017L2.83046 2.1753C2.8341 2.17043 2.83716 2.1649 2.84021 2.15944C2.84327 2.15409 2.84621 2.1488 2.84973 2.14404C3.35754 1.29925 4.5586 0.613281 5.53813 0.613281H10.4576C11.5744 0.613281 12.607 1.21017 13.163 2.1753C13.1686 2.18241 14.024 3.66317 14.7254 4.87721C15.2115 5.7186 15.6235 6.43183 15.6275 6.43777L15.635 6.4514Z" fill="#DFEAFF" fill-opacity="0.5"/>
+                    <g id="Primary">
+                        <path d="M5.73802 12.1854C7.03039 12.9171 8.98957 12.9147 10.2532 12.1806C11.3314 12.7149 12.1161 13.6247 12.3591 14.6933C11.8272 15.0856 11.1725 15.3527 10.5804 15.3816C10.542 15.3865 10.4987 15.3865 10.4601 15.3865C10.4265 15.3856 9.7571 15.386 8.9193 15.3865H8.87546C7.43983 15.3874 5.53976 15.3886 5.47807 15.3841C4.87154 15.3696 4.1904 15.1 3.64404 14.6933C3.88237 13.6271 4.66459 12.7197 5.73802 12.1854Z" fill="#DFEAFF" fill-opacity="0.5"/>
+                        <path d="M10.4314 8.0023C10.5156 11.3598 5.48535 11.3574 5.56961 8.0023C5.5239 4.62553 10.4747 4.62553 10.4314 8.0023Z" fill="#DFEAFF" fill-opacity="0.5"/>
+                    </g>
+                </g>
+            </g>
+        </svg>
+
+    );
+}
+
 function HomePage() {
     return (
         <div>
-            <h1>Home</h1>
-            <p>Welcome to the home page</p>
+            <div class='relative w-full h-52'>
+                <img src={image} class='absolute rounded-xl w-full h-52 object-cover' />
+                <div class='relative z-10 h-full px-8 py-6 text-fg-primary flex flex-col justify-between items-start'>
+                    <div class='flex flex-col gap-y-2'>
+                        <h1>Building worlds</h1>
+                        <p>A description would go here if I was smart</p>
+                    </div>
+                    <div class='flex w-full flex-row justify-between items-end'>
+                        <div class='flex flex-row items-center gap-x-4'>
+                            <Button iconLeft={<PlayIcon />} class='font-medium'>Launch 1.19.2</Button>
+                            <button class='p-1.5 hover:bg-gray-.10 rounded-md'>
+                                <DotsVerticalIcon />
+                            </button>
+                        </div>
+                        <div class='flex flex-row gap-x-2'>
+                            <Tag iconLeft={<OneConfigLogo />} />
+                            <Tag iconLeft={<CheckIcon />}>Verified</Tag>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 148ece1f..de4aac9a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,8 @@ export default {
 
         fontSize: {
             // Based off 16px
-            sm: '0.688rem',
+            xs: '0.688rem',
+            sm: '0.75rem',
             md: '0.875rem',
             lg: '1rem',
             xl: '1.25rem',
@@ -78,6 +79,10 @@ export default {
                 15: '60px',
             },
 
+            strokeWidth: {
+                3: 3,
+            },
+
             animation: {
                 'fade-in': 'fadeIn 150ms easeOutExpo forwards',
                 'fade-out': 'fadeOut 150ms easeOutExpo forwards',