diff --git a/templates/base.html b/templates/base.html
index 73660f2..651a808 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,11 +6,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{.Title}}</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@2.31.0/dist/full.css" rel="stylesheet" type="text/css">
   <script src="https://unpkg.com/htmx.org@1.9.9"
     integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX"
     crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
   <style>
     body {
       display: flex;
@@ -51,12 +50,16 @@
 </head>
 
 <body>
+  <div class="container is-widescreen">
+    {{ template "header" . }}
+  </div>
+  <div class="container is-widescreen">
+    {{ template "main" . }}
+  </div>
 
-  {{ template "header" . }}
-
-  {{ template "main" . }}
-
-  {{ template "footer" . }}
+  <div class="container is-widescreen">
+    {{ template "footer" . }}
+  </div>
 
 </body>
 
diff --git a/templates/footer.html b/templates/footer.html
index ad776a9..cf8d261 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,7 +1,9 @@
 {{ define "footer" }}
-<footer class="footer footer-center p-4 bg-base-300 text-base-content">
-  <aside>
-    <p class="text-gray-600">&copy; {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten.</p>
-  </aside>
+<footer class="footer">
+  <div class="content has-text-centered is-widescreen">
+    <p>
+      &copy; {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten.
+    </p>
+  </div>
 </footer>
 {{ end }}
diff --git a/templates/header.html b/templates/header.html
index a2c91b3..16e4243 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,14 +1,54 @@
 {{ define "header" }}
 <header>
-  <nav class="navbar bg-base-100">
-    <a href="/" class="btn btn-ghost text-xl">Dungeons & Dragons</a>
-    <a href="/about" class="btn btn-ghost text-xl">About</a>
-    <a href="/contact" class="btn btn-ghost text-xl">Contact</a>
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="navbarBasicExample" class="navbar-menu">
+      <div class="navbar-start">
+        <a href="/" class="navbar-item">
+          Dungeons & Dragons
+        </a>
+
+        <a href="/about" class="navbar-item">
+          About
+        </a>
+
+        <a href="/contact" class="navbar-item">
+          Contact
+        </a>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-primary">
+              <strong>Sign up</strong>
+            </a>
+            <a class="button is-light">
+              Log in
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
   </nav>
-  <div id="banner" class="banner bg-gray-800 p-8 text-white">
-    <img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
-    <a href="https://dnd.wizards.com/resources/press-assets">image credits</a>
-    <h1 class="centered text-4xl font-bold">Dungeons and Dragons Monster Generator</h1>
-  </div>
+  <section class="hero box">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <div class="hero-background">
+          <img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
+        </div>
+        <p class="title">
+          Dungeons and Dragons Monster Generator
+        </p>
+      </div>
+    </div>
+  </section>
 </header>
 {{ end }}
diff --git a/templates/main.html b/templates/main.html
index f1cfccf..7c1c8ec 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,67 +1,79 @@
 {{ define "main" }}
-<div class="card-body form-box w-full h-full">
-  <h2 class="card-title">Monster Form</h2>
-  <form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
-    <table>
-      <tr>
-        <td><label for="filename">Filename:</label></td>
-        <td><input type="text" name="filename" required placeholder="Dateiname"
-            class="input input-bordered w-full max-w-xs"><br></td>
-      </tr>
-    </table>
-    <div class="grid grid-cols-1">
-      <button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table" hx-swap="outerHTML"
-        class="btn">Add
-        Monster</button>
+<div class="card">
+  <div class="card-content">
+    <div class="media-content">
+      <p class="title is-4">Monster Form</p>
     </div>
-    {{ template "monsterform" . }}
-    <input type="hidden" name="filename" value="{{.Filename}}">
-    <div class="card-actions justify-end">
-      <input type="submit" value="Submit" class="btn">
+    <div class="content">
+      <form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
+        <table>
+          <tr>
+            <td><label for="filename">Filename:</label></td>
+            <td><input type="text" name="filename" required placeholder="Dateiname"
+                class="input input-bordered w-full max-w-xs"><br></td>
+          </tr>
+        </table>
+        <div class="grid grid-cols-1">
+          <button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table" hx-swap="outerHTML"
+            class="button">Add
+            Monster</button>
+        </div>
+        {{ template "monsterform" . }}
+        <input type="hidden" name="filename" value="{{.Filename}}">
+        <div class="card-actions justify-end">
+          <input type="submit" value="Submit" class="button is-primary">
+        </div>
+      </form>
     </div>
-  </form>
+  </div>
 </div>
-<div class="card-body form-box w-full h-full">
-  <h2 class="card-title">Existing Monsters</h2>
-  <table class="table">
-    <colgroup>
-      <col style="width: 100px;">
-      <col style="width: 100px;">
-    </colgroup>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Source</th>
-        <th>Size</th>
-        <th>Type</th>
-        <th>Alignment</th>
-        <th>AC</th>
-        <th>AC Form</th>
-        <th>HP Average</th>
-        <th>HP Formula</th>
-        <th>Speed</th>
-        <th>Str</th>
-        <th>Dex</th>
-        <th>Con</th>
-        <th>Int</th>
-        <th>Wis</th>
-        <th>Cha</th>
-        <th>Save Dex</th>
-        <th>Save Con</th>
-        <th>Savve Wis</th>
-        <th>Perception</th>
-        <th>Stealth</th>
-        <th>Damage Resistance</th>
-        <th>Senses</th>
-        <th>Languages</th>
-        <th>CR</th>
-        <th>Trait Name</th>
-        <th>Trait Entry</th>
-        <th>Action Name</th>
-        <th>Action Entry</th>
-      </tr>
-    </thead>
-    {{ template "monsterTable" }}
-  </table>
+<div class="card">
+  <div class="card-content">
+    <div class="media-content">
+      <p class="title is-4 is-centered">Existing Monsters</p>
+    </div>
+    <div class="table-container">
+      <table class="table">
+        <colgroup>
+          <col style="width: 100px;">
+          <col style="width: 100px;">
+        </colgroup>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Source</th>
+            <th>Size</th>
+            <th>Type</th>
+            <th>Alignment</th>
+            <th>AC</th>
+            <th>AC Form</th>
+            <th>HP Average</th>
+            <th>HP Formula</th>
+            <th>Speed</th>
+            <th>Str</th>
+            <th>Dex</th>
+            <th>Con</th>
+            <th>Int</th>
+            <th>Wis</th>
+            <th>Cha</th>
+            <th>Save Dex</th>
+            <th>Save Con</th>
+            <th>Savve Wis</th>
+            <th>Perception</th>
+            <th>Stealth</th>
+            <th>Damage Resistance</th>
+            <th>Senses</th>
+            <th>Languages</th>
+            <th>CR</th>
+            <th>Trait Name</th>
+            <th>Trait Entry</th>
+            <th>Action Name</th>
+            <th>Action Entry</th>
+          </tr>
+        </thead>
+        {{ template "monsterTable" }}
+      </table>
+    </div>
+  </div>
 </div>
 {{ end }}
