diff --git a/README.md b/README.md
index 559c21e..c1ea50f 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+# Intro
+### Some things to do before the good things can happen
+
 Install Diesel and Watchexec:
 ```
 sudo pacman -S diesel-cli watchexec
@@ -5,6 +8,11 @@ sudo pacman -S diesel-cli watchexec
 
 Absolutely use pnpm as packet manager for this project.
 
+First initialize the Database:
+```
+diesel setup
+```
+
 To run the Tailwind Compiler in watch:
 ```
 pnpm dlx @tailwindcss/cli -i styles/tailwind.css -o assets/generated/main.css --watch
@@ -14,5 +22,6 @@ or (with or without `--watch`)
 pnpm compile
 ```
 
+### How to Dev like a pro
 My suggestion is to open one terminal and run `pnpm devrun` to continously rebuild
 the Tailwind css and restart/rebuild the Rust server if a template file change.
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index f98ea9b..79179c9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,80 +3,66 @@
 {% block title %}Hello!{% endblock %}
 
 {% block head %}
-<style>
-    .overlay {
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-        background: #161b22;
-        opacity: 0.75;
-    }
-
-    th {
-        white-space: nowrap;
-    }
-
-    td {
-        white-space: nowrap;
-    }
-</style>
 {% endblock %}
 
 {% block content %}
-<div x-data="{'isModalOpen': false}">
-<nav class="navbar bg-base-100 shadow-sm overflow-hidden fixed top-0 left-0 z-20 flex justify-between">
-  <a class="btn btn-ghost text-xl flex" href="/">
-    <img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/>
-    <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
-  </a>
-  <button class="btn btn-primary" @click="isModalOpen = true">Create</button>
-</nav>
-<div class="pt-20">
-  <!-- TODO: Switch overlay and dialog to DaisyUI -->
-  <div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
-  <dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
-    <header>
-      <h2>Create new RSS Feed subscription</h2>
-    </header>
-    <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend"
-          hx-indicator="#indicator"
-          @htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
-      <label>
-        Name
-        <input type="text" name="name">
-      </label>
-      <label>
-        Feed URL
-        <input type="url" name="feed_url">
-      </label>
-    </form>
-    <footer>
-      <button class="btn" form="create_form" type="reset" @click="isModalOpen = false">Close</button>
-      <button class="btn" form="create_form" type="submit">
-        Submit
-        <img id="indicator" class="htmx-indicator" src="/assets/oval.svg"
-             style="height: 1rem; margin-left: 2px"
-             alt="...">
-      </button>
-    </footer>
-  </dialog>
-  <div class="overflow-x-auto mx-4 rounded-box border border-base-content/5 bg-base-100">
-    <table class="table table-zebra">
-      <thead>
-      <tr>
-        <th>Feed Name</th>
-        <th>Feed URL</th>
-        <th>Last Mail Sent</th>
-        <th>Actions</th>
-      </tr>
-      </thead>
-      <tbody id="feed_tbody">
-      {{ feeds|safe }}
-      </tbody>
-    </table>
+<div x-data>
+  <nav class="navbar bg-base-100 shadow-sm overflow-hidden fixed top-0 left-0 z-20 flex justify-between">
+    <a class="btn btn-ghost text-xl flex" href="/">
+      <img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/>
+      <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
+    </a>
+    <button class="btn btn-primary" @click="document.getElementById('create_modal').showModal()">Create</button>
+  </nav>
+  <div class="pt-20">
+    <dialog id="create_modal" class="modal" x-cloak x-transition @close="document.getElementById('create_form').reset()">
+      <div class="modal-box">
+        <h3 class="text-lg font-bold pb-2">Create new RSS Feed subscription</h3>
+        <form method="dialog">
+          <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+        </form>
+        <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend"
+              hx-indicator="#indicator"
+              @htmx:after-on-load="document.getElementById('create_modal').close()">
+          <fieldset class="fieldset gap-2">
+            <label class="floating-label">
+              <span>Name</span>
+              <input type="text" class="input input-md w-full" placeholder="Name" name="name">
+            </label>
+            <label class="floating-label">
+              <span>Feed URL</span>
+              <input type="url" class="input input-md w-full" placeholder="Feed URL" name="feed_url">
+            </label>
+          </fieldset>
+          <div class="modal-action">
+            <button class="btn btn-primary" form="create_form" type="submit">
+              Submit
+              <img id="indicator" class="htmx-inline htmx-indicator" src="/assets/oval.svg"
+                   style="height: 1rem; margin-left: 2px"
+                   alt="...">
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+    <div class="overflow-x-auto mx-4 rounded-box border border-base-content/5 bg-base-100">
+      <table class="table table-zebra">
+        <thead>
+        <tr>
+          <th>Feed Name</th>
+          <th>Feed URL</th>
+          <th>Last Mail Sent</th>
+          <th>Actions</th>
+        </tr>
+        </thead>
+        <tbody id="feed_tbody">
+        {{ feeds|safe }}
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
-</div>
 {% endblock %}