diff --git a/assets/css/app.css b/assets/css/app.css
index 5dccbd4..e499401 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,4 +2,30 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import './satoshi';
+
 /* This file is for your main application CSS */
+[x-cloak] {
+  display: none !important;
+}
+
+@layer base {
+  body {
+    @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
+  }
+}
+
+@layer components {
+}
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
diff --git a/assets/css/satoshi.css b/assets/css/satoshi.css
new file mode 100644
index 0000000..da755ca
--- /dev/null
+++ b/assets/css/satoshi.css
@@ -0,0 +1,120 @@
+/**
+ * @license
+ *
+ * Font Family: Satoshi
+ * Designed by: Deni Anggara
+ * URL: https://www.fontshare.com/fonts/satoshi
+ * © 2023 Indian Type Foundry
+ *
+ * Font Styles:
+ * Satoshi Light
+ * Satoshi Light Italic
+ * Satoshi Regular
+ * Satoshi Italic
+ * Satoshi Medium
+ * Satoshi Medium Italic
+ * Satoshi Bold
+ * Satoshi Bold Italic
+ * Satoshi Black
+ * Satoshi Black Italic
+ *
+*/
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Light.woff2'),
+    url('/fonts/satoshi/Satoshi-Light.woff'),
+    url('/fonts/satoshi/Satoshi-Light.ttf');
+  font-weight: 300;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-LightItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-LightItalic.woff'),
+    url('/fonts/satoshi/Satoshi-LightItalic.ttf');
+  font-weight: 300;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Regular.woff2'),
+    url('/fonts/satoshi/Satoshi-Regular.woff'),
+    url('/fonts/satoshi/Satoshi-Regular.ttf');
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Italic.woff2'),
+    url('/fonts/satoshi/Satoshi-Italic.woff'),
+    url('/fonts/satoshi/Satoshi-Italic.ttf');
+  font-weight: 400;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Medium.woff2'),
+    url('/fonts/satoshi/Satoshi-Medium.woff'),
+    url('/fonts/satoshi/Satoshi-Medium.ttf');
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-MediumItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-MediumItalic.woff'),
+    url('/fonts/satoshi/Satoshi-MediumItalic.ttf');
+  font-weight: 500;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-Bold.woff2'),
+    url('/fonts/satoshi/Satoshi-Bold.woff'),
+    url('/fonts/satoshi/Satoshi-Bold.ttf');
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-BoldItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-BoldItalic.woff'),
+    url('/fonts/satoshi/Satoshi-BoldItalic.ttf');
+  font-weight: 700;
+  font-display: swap;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src:
+    url('/fonts/satoshi/Satoshi-BlackItalic.woff2'),
+    url('/fonts/satoshi/Satoshi-BlackItalic.woff'),
+    url('/fonts/satoshi/Satoshi-BlackItalic.ttf');
+  font-weight: 900;
+  font-display: swap;
+  font-style: italic;
+}
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index a360ecc..08f407f 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -2,15 +2,288 @@
 // https://tailwindcss.com/docs/configuration
 
 const plugin = require('tailwindcss/plugin')
+const defaultTheme = require('tailwindcss/defaultTheme')
 const fs = require('fs')
 const path = require('path')
 
 module.exports = {
   content: ['./js/**/*.js', '../lib/pinchflat_web.ex', '../lib/pinchflat_web/**/*.*ex'],
+  darkMode: 'class',
   theme: {
+    fontFamily: {
+      satoshi: ['Satoshi', 'sans-serif']
+    },
+    screens: {
+      '2xsm': '375px',
+      xsm: '425px',
+      '3xl': '2000px',
+      ...defaultTheme.screens
+    },
     extend: {
       colors: {
-        brand: '#FD4F00'
+        current: 'currentColor',
+        transparent: 'transparent',
+        white: '#FFFFFF',
+        black: '#1C2434',
+        'black-2': '#010101',
+        body: '#64748B',
+        bodydark: '#AEB7C0',
+        bodydark1: '#DEE4EE',
+        bodydark2: '#8A99AF',
+        primary: '#3C50E0',
+        secondary: '#80CAEE',
+        stroke: '#E2E8F0',
+        gray: '#EFF4FB',
+        graydark: '#333A48',
+        'gray-2': '#F7F9FC',
+        'gray-3': '#FAFAFA',
+        whiten: '#F1F5F9',
+        whiter: '#F5F7FD',
+        boxdark: '#24303F',
+        'boxdark-2': '#1A222C',
+        strokedark: '#2E3A47',
+        'form-strokedark': '#3d4d60',
+        'form-input': '#1d2a39',
+        'meta-1': '#DC3545',
+        'meta-2': '#EFF2F7',
+        'meta-3': '#10B981',
+        'meta-4': '#313D4A',
+        'meta-5': '#259AE6',
+        'meta-6': '#FFBA00',
+        'meta-7': '#FF6766',
+        'meta-8': '#F0950C',
+        'meta-9': '#E5E7EB',
+        success: '#219653',
+        danger: '#D34053',
+        warning: '#FFA70B'
+      },
+      fontSize: {
+        'title-xxl': ['44px', '55px'],
+        'title-xl': ['36px', '45px'],
+        'title-xl2': ['33px', '45px'],
+        'title-lg': ['28px', '35px'],
+        'title-md': ['24px', '30px'],
+        'title-md2': ['26px', '30px'],
+        'title-sm': ['20px', '26px'],
+        'title-xsm': ['18px', '24px']
+      },
+      spacing: {
+        4.5: '1.125rem',
+        5.5: '1.375rem',
+        6.5: '1.625rem',
+        7.5: '1.875rem',
+        8.5: '2.125rem',
+        9.5: '2.375rem',
+        10.5: '2.625rem',
+        11: '2.75rem',
+        11.5: '2.875rem',
+        12.5: '3.125rem',
+        13: '3.25rem',
+        13.5: '3.375rem',
+        14: '3.5rem',
+        14.5: '3.625rem',
+        15: '3.75rem',
+        15.5: '3.875rem',
+        16: '4rem',
+        16.5: '4.125rem',
+        17: '4.25rem',
+        17.5: '4.375rem',
+        18: '4.5rem',
+        18.5: '4.625rem',
+        19: '4.75rem',
+        19.5: '4.875rem',
+        21: '5.25rem',
+        21.5: '5.375rem',
+        22: '5.5rem',
+        22.5: '5.625rem',
+        24.5: '6.125rem',
+        25: '6.25rem',
+        25.5: '6.375rem',
+        26: '6.5rem',
+        27: '6.75rem',
+        27.5: '6.875rem',
+        29: '7.25rem',
+        29.5: '7.375rem',
+        30: '7.5rem',
+        31: '7.75rem',
+        32.5: '8.125rem',
+        34: '8.5rem',
+        34.5: '8.625rem',
+        35: '8.75rem',
+        36.5: '9.125rem',
+        37.5: '9.375rem',
+        39: '9.75rem',
+        39.5: '9.875rem',
+        40: '10rem',
+        42.5: '10.625rem',
+        44: '11rem',
+        45: '11.25rem',
+        46: '11.5rem',
+        47.5: '11.875rem',
+        49: '12.25rem',
+        50: '12.5rem',
+        52: '13rem',
+        52.5: '13.125rem',
+        54: '13.5rem',
+        54.5: '13.625rem',
+        55: '13.75rem',
+        55.5: '13.875rem',
+        59: '14.75rem',
+        60: '15rem',
+        62.5: '15.625rem',
+        65: '16.25rem',
+        67: '16.75rem',
+        67.5: '16.875rem',
+        70: '17.5rem',
+        72.5: '18.125rem',
+        73: '18.25rem',
+        75: '18.75rem',
+        90: '22.5rem',
+        94: '23.5rem',
+        95: '23.75rem',
+        100: '25rem',
+        115: '28.75rem',
+        125: '31.25rem',
+        132.5: '33.125rem',
+        150: '37.5rem',
+        171.5: '42.875rem',
+        180: '45rem',
+        187.5: '46.875rem',
+        203: '50.75rem',
+        230: '57.5rem',
+        242.5: '60.625rem'
+      },
+      maxWidth: {
+        2.5: '0.625rem',
+        3: '0.75rem',
+        4: '1rem',
+        11: '2.75rem',
+        13: '3.25rem',
+        14: '3.5rem',
+        15: '3.75rem',
+        22.5: '5.625rem',
+        25: '6.25rem',
+        30: '7.5rem',
+        34: '8.5rem',
+        35: '8.75rem',
+        40: '10rem',
+        42.5: '10.625rem',
+        44: '11rem',
+        45: '11.25rem',
+        60: '15rem',
+        70: '17.5rem',
+        90: '22.5rem',
+        94: '23.5rem',
+        125: '31.25rem',
+        132.5: '33.125rem',
+        142.5: '35.625rem',
+        150: '37.5rem',
+        180: '45rem',
+        203: '50.75rem',
+        230: '57.5rem',
+        242.5: '60.625rem',
+        270: '67.5rem',
+        280: '70rem',
+        292.5: '73.125rem'
+      },
+      maxHeight: {
+        35: '8.75rem',
+        70: '17.5rem',
+        90: '22.5rem',
+        550: '34.375rem',
+        300: '18.75rem'
+      },
+      minWidth: {
+        22.5: '5.625rem',
+        42.5: '10.625rem',
+        47.5: '11.875rem',
+        75: '18.75rem'
+      },
+      zIndex: {
+        999999: '999999',
+        99999: '99999',
+        9999: '9999',
+        999: '999',
+        99: '99',
+        9: '9',
+        1: '1'
+      },
+      opacity: {
+        65: '.65'
+      },
+      transitionProperty: { width: 'width', stroke: 'stroke' },
+      borderWidth: {
+        6: '6px'
+      },
+      boxShadow: {
+        default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',
+        card: '0px 1px 3px rgba(0, 0, 0, 0.12)',
+        'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)',
+        switcher:
+          '0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)',
+        'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)',
+        1: '0px 1px 3px rgba(0, 0, 0, 0.08)',
+        2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
+        3: '0px 1px 5px rgba(0, 0, 0, 0.14)',
+        4: '0px 4px 10px rgba(0, 0, 0, 0.12)',
+        5: '0px 1px 1px rgba(0, 0, 0, 0.15)',
+        6: '0px 3px 15px rgba(0, 0, 0, 0.1)',
+        7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A',
+        8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)'
+      },
+      dropShadow: {
+        1: '0px 1px 0px #E2E8F0',
+        2: '0px 1px 4px rgba(0, 0, 0, 0.12)'
+      },
+      keyframes: {
+        linspin: {
+          '100%': { transform: 'rotate(360deg)' }
+        },
+        easespin: {
+          '12.5%': { transform: 'rotate(135deg)' },
+          '25%': { transform: 'rotate(270deg)' },
+          '37.5%': { transform: 'rotate(405deg)' },
+          '50%': { transform: 'rotate(540deg)' },
+          '62.5%': { transform: 'rotate(675deg)' },
+          '75%': { transform: 'rotate(810deg)' },
+          '87.5%': { transform: 'rotate(945deg)' },
+          '100%': { transform: 'rotate(1080deg)' }
+        },
+        'left-spin': {
+          '0%': { transform: 'rotate(130deg)' },
+          '50%': { transform: 'rotate(-5deg)' },
+          '100%': { transform: 'rotate(130deg)' }
+        },
+        'right-spin': {
+          '0%': { transform: 'rotate(-130deg)' },
+          '50%': { transform: 'rotate(5deg)' },
+          '100%': { transform: 'rotate(-130deg)' }
+        },
+        rotating: {
+          '0%, 100%': { transform: 'rotate(360deg)' },
+          '50%': { transform: 'rotate(0deg)' }
+        },
+        topbottom: {
+          '0%, 100%': { transform: 'translate3d(0, -100%, 0)' },
+          '50%': { transform: 'translate3d(0, 0, 0)' }
+        },
+        bottomtop: {
+          '0%, 100%': { transform: 'translate3d(0, 0, 0)' },
+          '50%': { transform: 'translate3d(0, -100%, 0)' }
+        }
+      },
+      animation: {
+        linspin: 'linspin 1568.2353ms linear infinite',
+        easespin: 'easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
+        'left-spin': 'left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
+        'right-spin': 'right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both',
+        'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)',
+        rotating: 'rotating 30s linear infinite',
+        topbottom: 'topbottom 60s infinite alternate linear',
+        bottomtop: 'bottomtop 60s infinite alternate linear',
+        'spin-1.5': 'spin 1.5s linear infinite',
+        'spin-2': 'spin 2s linear infinite',
+        'spin-3': 'spin 3s linear infinite'
       }
     }
   },
diff --git a/lib/pinchflat_web/components/core_components.ex b/lib/pinchflat_web/components/core_components.ex
index c20f3ca..6f80c9f 100644
--- a/lib/pinchflat_web/components/core_components.ex
+++ b/lib/pinchflat_web/components/core_components.ex
@@ -425,7 +425,7 @@ defmodule PinchflatWeb.CoreComponents do
   slot :subtitle
   slot :actions
 
-  def header(assigns) do
+  def old_header(assigns) do
     ~H"""
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
diff --git a/lib/pinchflat_web/components/layouts.ex b/lib/pinchflat_web/components/layouts.ex
index f954088..c2aeff1 100644
--- a/lib/pinchflat_web/components/layouts.ex
+++ b/lib/pinchflat_web/components/layouts.ex
@@ -2,4 +2,28 @@ defmodule PinchflatWeb.Layouts do
   use PinchflatWeb, :html
 
   embed_templates "layouts/*"
+  embed_templates "layouts/partials/*"
+
+  attr :icon, :string, required: true
+  attr :text, :string, required: true
+  attr :navigate, :any, required: true
+
+  def sidebar_item(assigns) do
+    # I'm testing out grouping classes here. Tentative order: font, layout, animation, state-modifiers
+    ~H"""
+    <li>
+      <.link
+        navigate={@navigate}
+        class={[
+          "font-medium text-bodydark1",
+          "group relative flex items-center gap-2.5 rounded-sm px-4 py-2 duration-300 ease-in-out",
+          "duration-300 ease-in-out",
+          "hover:bg-graydark dark:hover:bg-meta-4"
+        ]}
+      >
+        <.icon name={@icon} /> <%= @text %>
+      </.link>
+    </li>
+    """
+  end
 end
diff --git a/lib/pinchflat_web/components/layouts/_app.html.heex b/lib/pinchflat_web/components/layouts/_app.html.heex
new file mode 100644
index 0000000..e23bfc8
--- /dev/null
+++ b/lib/pinchflat_web/components/layouts/_app.html.heex
@@ -0,0 +1,32 @@
+<header class="px-4 sm:px-6 lg:px-8">
+  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
+    <div class="flex items-center gap-4">
+      <a href="/">
+        <img src={~p"/images/logo.svg"} width="36" />
+      </a>
+      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
+        v<%= Application.spec(:phoenix, :vsn) %>
+      </p>
+    </div>
+    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
+      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
+        @elixirphoenix
+      </a>
+      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
+        GitHub
+      </a>
+      <a
+        href="https://hexdocs.pm/phoenix/overview.html"
+        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
+      >
+        Get Started <span aria-hidden="true">&rarr;</span>
+      </a>
+    </div>
+  </div>
+</header>
+<main class="px-4 py-20 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-2xl">
+    <.flash_group flash={@flash} />
+    <%= @inner_content %>
+  </div>
+</main>
diff --git a/lib/pinchflat_web/components/layouts/app.html.heex b/lib/pinchflat_web/components/layouts/app.html.heex
index e23bfc8..e6bbc13 100644
--- a/lib/pinchflat_web/components/layouts/app.html.heex
+++ b/lib/pinchflat_web/components/layouts/app.html.heex
@@ -1,32 +1,13 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
-    <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
+<div class="flex h-screen overflow-hidden">
+  <.sidebar />
+
+  <div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
+    <.header />
+    <main>
+      <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5">
+        </div>
+      </div>
+    </main>
   </div>
-</header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
-    <.flash_group flash={@flash} />
-    <%= @inner_content %>
-  </div>
-</main>
+</div>
diff --git a/lib/pinchflat_web/components/layouts/partials/header.html.heex b/lib/pinchflat_web/components/layouts/partials/header.html.heex
new file mode 100644
index 0000000..8d70867
--- /dev/null
+++ b/lib/pinchflat_web/components/layouts/partials/header.html.heex
@@ -0,0 +1,42 @@
+<header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
+  <div class="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+    <div class="flex items-center gap-2 sm:gap-4 lg:hidden">
+      <button
+        class="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+        @click.stop="sidebarToggle = !sidebarToggle"
+      >
+        <.icon name="hero-bars-3" />
+      </button>
+      <a class="block flex-shrink-0 lg:hidden" href="#">
+        <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+      </a>
+    </div>
+    <div class="hidden sm:block">
+      <%!-- Aspirational (for now) --%>
+      <div class="relative">
+        <span class="absolute left-0 top-1/2 -translate-y-1/2">
+          <.icon name="hero-magnifying-glass" />
+        </span>
+
+        <input
+          type="text"
+          placeholder="Type to search..."
+          class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none xl:w-125"
+        />
+      </div>
+    </div>
+    <div class="flex items-center gap-3 2xsm:gap-7">
+      <ul class="flex items-center gap-2 2xsm:gap-4">
+        <li class="relative">
+          <%!-- Aspirational (for now) --%>
+          <a
+            class="relative flex h-8.5 w-8.5 items-center justify-center rounded-full border-[0.5px] border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 dark:text-white"
+            href="#"
+          >
+            <.icon name="hero-cog-8-tooth" />
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</header>
diff --git a/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
new file mode 100644
index 0000000..db2cd6c
--- /dev/null
+++ b/lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
@@ -0,0 +1,29 @@
+<aside
+  x-bind:class="sidebarToggle ? 'translate-x-0' : '-translate-x-full'"
+  class="absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0"
+  @click.outside="sidebarToggle = false"
+>
+  <div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
+    <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+
+    <button class="block lg:hidden" @click.stop="sidebarToggle = !sidebarToggle">
+      <.icon name="hero-arrow-left" class="fill-current" />
+    </button>
+  </div>
+  <div class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
+    <nav class="mt-5 px-4 py-4 lg:mt-9 lg:px-6">
+      <div>
+        <h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
+        <ul class="mb-6 flex flex-col gap-1.5">
+          <.sidebar_item icon="hero-tv" text="Sources" navigate={~p"/media_sources/sources"} />
+
+          <.sidebar_item
+            icon="hero-adjustments-vertical"
+            text="Media Profiles"
+            navigate={~p"/media_profiles"}
+          />
+        </ul>
+      </div>
+    </nav>
+  </div>
+</aside>
diff --git a/lib/pinchflat_web/components/layouts/root.html.heex b/lib/pinchflat_web/components/layouts/root.html.heex
index c33013a..680f70d 100644
--- a/lib/pinchflat_web/components/layouts/root.html.heex
+++ b/lib/pinchflat_web/components/layouts/root.html.heex
@@ -11,7 +11,11 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white antialiased">
+  <body
+    x-data="{ 'darkMode': true, 'sidebarToggle': false }"
+    x-init="darkMode = true;"
+    x-bind:class="{'dark text-bodydark bg-boxdark-2': darkMode === true}"
+  >
     <%= @inner_content %>
   </body>
 </html>
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex
index ca35b19..38a1e43 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex
@@ -1,7 +1,7 @@
-<.header>
+<.old_header>
   Edit Media profile <%= @media_profile.id %>
   <:subtitle>Use this form to manage media_profile records in your database.</:subtitle>
-</.header>
+</.old_header>
 
 <.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} />
 
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
index eec319c..03aecb3 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
@@ -1,11 +1,11 @@
-<.header>
+<.old_header>
   Listing Media profiles
   <:actions>
     <.link href={~p"/media_profiles/new"}>
       <.button>New Media profile</.button>
     </.link>
   </:actions>
-</.header>
+</.old_header>
 
 <.table
   id="media_profiles"
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex
index 0887e17..5d1e8bf 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex
@@ -1,7 +1,7 @@
-<.header>
+<.old_header>
   New Media profile
   <:subtitle>Use this form to manage media_profile records in your database.</:subtitle>
-</.header>
+</.old_header>
 
 <.media_profile_form changeset={@changeset} action={~p"/media_profiles"} />
 
diff --git a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
index 965f7e8..f8dc25d 100644
--- a/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
@@ -1,4 +1,4 @@
-<.header>
+<.old_header>
   Media profile <%= @media_profile.id %>
   <:subtitle>This is a media_profile record from your database.</:subtitle>
   <:actions>
@@ -6,7 +6,7 @@
       <.button>Edit media_profile</.button>
     </.link>
   </:actions>
-</.header>
+</.old_header>
 
 <.list_items_from_map map={Map.from_struct(@media_profile)} />
 
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex
index d1afc04..e435f65 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/edit.html.heex
@@ -1,7 +1,7 @@
-<.header>
+<.old_header>
   Edit Source <%= @source.id %>
   <:subtitle>Use this form to manage source records in your database.</:subtitle>
-</.header>
+</.old_header>
 
 <.source_form
   changeset={@changeset}
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex
index e5cede9..1116f09 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/index.html.heex
@@ -1,11 +1,11 @@
-<.header>
+<.old_header>
   Listing Sources
   <:actions>
     <.link href={~p"/media_sources/sources/new"}>
       <.button>New Source</.button>
     </.link>
   </:actions>
-</.header>
+</.old_header>
 
 <.table id="sources" rows={@sources} row_click={&JS.navigate(~p"/media_sources/sources/#{&1}")}>
   <:col :let={source} label="Collection Name"><%= source.collection_name %></:col>
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex
index 4ef5741..f2d092c 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/new.html.heex
@@ -1,7 +1,7 @@
-<.header>
+<.old_header>
   New Source
   <:subtitle>Use this form to manage source records in your database.</:subtitle>
-</.header>
+</.old_header>
 
 <.source_form
   changeset={@changeset}
diff --git a/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex b/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
index 898dddd..ae6db73 100644
--- a/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
+++ b/lib/pinchflat_web/controllers/media_sources/source_html/show.html.heex
@@ -1,4 +1,4 @@
-<.header>
+<.old_header>
   Source <%= @source.id %>
   <:subtitle>This is a source record from your database.</:subtitle>
   <:actions>
@@ -6,7 +6,7 @@
       <.button>Edit source</.button>
     </.link>
   </:actions>
-</.header>
+</.old_header>
 
 <h3 class="mt-14">Relationships</h3>
 <.list>
diff --git a/lib/pinchflat_web/controllers/page_controller.ex b/lib/pinchflat_web/controllers/page_controller.ex
index f15227a..816b6cf 100644
--- a/lib/pinchflat_web/controllers/page_controller.ex
+++ b/lib/pinchflat_web/controllers/page_controller.ex
@@ -4,6 +4,6 @@ defmodule PinchflatWeb.PageController do
   def home(conn, _params) do
     # The home page is often custom made,
     # so skip the default app layout.
-    render(conn, :home, layout: false)
+    render(conn, :home)
   end
 end
diff --git a/priv/static/fonts/satoshi/Satoshi-BlackItalic.eot b/priv/static/fonts/satoshi/Satoshi-BlackItalic.eot
new file mode 100644
index 0000000..de2edbb
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-BlackItalic.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-BlackItalic.ttf b/priv/static/fonts/satoshi/Satoshi-BlackItalic.ttf
new file mode 100644
index 0000000..74410b9
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-BlackItalic.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-BlackItalic.woff b/priv/static/fonts/satoshi/Satoshi-BlackItalic.woff
new file mode 100644
index 0000000..0e07e1c
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-BlackItalic.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-BlackItalic.woff2 b/priv/static/fonts/satoshi/Satoshi-BlackItalic.woff2
new file mode 100644
index 0000000..9d5c911
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-BlackItalic.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Bold.eot b/priv/static/fonts/satoshi/Satoshi-Bold.eot
new file mode 100644
index 0000000..390ae25
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Bold.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Bold.ttf b/priv/static/fonts/satoshi/Satoshi-Bold.ttf
new file mode 100644
index 0000000..00bc985
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Bold.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Bold.woff b/priv/static/fonts/satoshi/Satoshi-Bold.woff
new file mode 100644
index 0000000..bba8257
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Bold.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Bold.woff2 b/priv/static/fonts/satoshi/Satoshi-Bold.woff2
new file mode 100644
index 0000000..0a8db7a
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Bold.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-BoldItalic.eot b/priv/static/fonts/satoshi/Satoshi-BoldItalic.eot
new file mode 100644
index 0000000..426be2a
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-BoldItalic.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-BoldItalic.ttf b/priv/static/fonts/satoshi/Satoshi-BoldItalic.ttf
new file mode 100644
index 0000000..24f012c
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-BoldItalic.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-BoldItalic.woff b/priv/static/fonts/satoshi/Satoshi-BoldItalic.woff
new file mode 100644
index 0000000..8bcb7a6
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-BoldItalic.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-BoldItalic.woff2 b/priv/static/fonts/satoshi/Satoshi-BoldItalic.woff2
new file mode 100644
index 0000000..225527f
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-BoldItalic.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Italic.eot b/priv/static/fonts/satoshi/Satoshi-Italic.eot
new file mode 100644
index 0000000..64039a8
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Italic.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Italic.ttf b/priv/static/fonts/satoshi/Satoshi-Italic.ttf
new file mode 100644
index 0000000..c214f4f
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Italic.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Italic.woff b/priv/static/fonts/satoshi/Satoshi-Italic.woff
new file mode 100644
index 0000000..edd4d93
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Italic.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Italic.woff2 b/priv/static/fonts/satoshi/Satoshi-Italic.woff2
new file mode 100644
index 0000000..8b98599
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Italic.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Light.eot b/priv/static/fonts/satoshi/Satoshi-Light.eot
new file mode 100644
index 0000000..d8fcacc
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Light.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Light.ttf b/priv/static/fonts/satoshi/Satoshi-Light.ttf
new file mode 100644
index 0000000..b41a2d4
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Light.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Light.woff b/priv/static/fonts/satoshi/Satoshi-Light.woff
new file mode 100644
index 0000000..8f05e4e
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Light.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Light.woff2 b/priv/static/fonts/satoshi/Satoshi-Light.woff2
new file mode 100644
index 0000000..cf18cd4
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Light.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-LightItalic.eot b/priv/static/fonts/satoshi/Satoshi-LightItalic.eot
new file mode 100644
index 0000000..e34a0df
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-LightItalic.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-LightItalic.ttf b/priv/static/fonts/satoshi/Satoshi-LightItalic.ttf
new file mode 100644
index 0000000..08f5db5
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-LightItalic.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-LightItalic.woff b/priv/static/fonts/satoshi/Satoshi-LightItalic.woff
new file mode 100644
index 0000000..a03a50d
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-LightItalic.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-LightItalic.woff2 b/priv/static/fonts/satoshi/Satoshi-LightItalic.woff2
new file mode 100644
index 0000000..6bd15ad
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-LightItalic.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Medium.eot b/priv/static/fonts/satoshi/Satoshi-Medium.eot
new file mode 100644
index 0000000..83cacec
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Medium.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Medium.ttf b/priv/static/fonts/satoshi/Satoshi-Medium.ttf
new file mode 100644
index 0000000..ab149b7
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Medium.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Medium.woff b/priv/static/fonts/satoshi/Satoshi-Medium.woff
new file mode 100644
index 0000000..cef3226
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Medium.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Medium.woff2 b/priv/static/fonts/satoshi/Satoshi-Medium.woff2
new file mode 100644
index 0000000..ffd0ac9
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Medium.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-MediumItalic.eot b/priv/static/fonts/satoshi/Satoshi-MediumItalic.eot
new file mode 100644
index 0000000..25d229a
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-MediumItalic.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-MediumItalic.ttf b/priv/static/fonts/satoshi/Satoshi-MediumItalic.ttf
new file mode 100644
index 0000000..387f278
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-MediumItalic.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-MediumItalic.woff b/priv/static/fonts/satoshi/Satoshi-MediumItalic.woff
new file mode 100644
index 0000000..46d8995
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-MediumItalic.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-MediumItalic.woff2 b/priv/static/fonts/satoshi/Satoshi-MediumItalic.woff2
new file mode 100644
index 0000000..212adc9
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-MediumItalic.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Regular.eot b/priv/static/fonts/satoshi/Satoshi-Regular.eot
new file mode 100644
index 0000000..452666f
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Regular.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Regular.ttf b/priv/static/fonts/satoshi/Satoshi-Regular.ttf
new file mode 100644
index 0000000..fe85cd6
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Regular.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Regular.woff b/priv/static/fonts/satoshi/Satoshi-Regular.woff
new file mode 100644
index 0000000..03ac195
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Regular.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Regular.woff2 b/priv/static/fonts/satoshi/Satoshi-Regular.woff2
new file mode 100644
index 0000000..81c40ab
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Regular.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Variable.eot b/priv/static/fonts/satoshi/Satoshi-Variable.eot
new file mode 100644
index 0000000..f42624e
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Variable.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Variable.ttf b/priv/static/fonts/satoshi/Satoshi-Variable.ttf
new file mode 100644
index 0000000..976e85c
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Variable.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Variable.woff b/priv/static/fonts/satoshi/Satoshi-Variable.woff
new file mode 100644
index 0000000..f8dcd1d
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Variable.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-Variable.woff2 b/priv/static/fonts/satoshi/Satoshi-Variable.woff2
new file mode 100644
index 0000000..b00e833
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-Variable.woff2 differ
diff --git a/priv/static/fonts/satoshi/Satoshi-VariableItalic.eot b/priv/static/fonts/satoshi/Satoshi-VariableItalic.eot
new file mode 100644
index 0000000..5f4554a
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-VariableItalic.eot differ
diff --git a/priv/static/fonts/satoshi/Satoshi-VariableItalic.ttf b/priv/static/fonts/satoshi/Satoshi-VariableItalic.ttf
new file mode 100644
index 0000000..4c2677c
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-VariableItalic.ttf differ
diff --git a/priv/static/fonts/satoshi/Satoshi-VariableItalic.woff b/priv/static/fonts/satoshi/Satoshi-VariableItalic.woff
new file mode 100644
index 0000000..3fe029e
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-VariableItalic.woff differ
diff --git a/priv/static/fonts/satoshi/Satoshi-VariableItalic.woff2 b/priv/static/fonts/satoshi/Satoshi-VariableItalic.woff2
new file mode 100644
index 0000000..e7ab3a0
Binary files /dev/null and b/priv/static/fonts/satoshi/Satoshi-VariableItalic.woff2 differ