diff --git a/package-lock.json b/package-lock.json
index 98e6b86..0724374 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@tailwindcss/forms": "^0.4.0",
         "@tailwindcss/line-clamp": "^0.3.1",
         "@tailwindcss/typography": "^0.5.1",
+        "daisyui": "^4.4.13",
         "tailwind": "^4.0.0",
         "tailwindcss": "^3.0.19"
       }
@@ -780,6 +781,16 @@
         "util.promisify": "1.0.0"
       }
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -792,6 +803,34 @@
         "node": ">=4"
       }
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/daisyui": {
+      "version": "4.4.13",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.4.13.tgz",
+      "integrity": "sha512-hk2xykBSTpCdSFx2LbF4WJb9cePE86+dF2q5abhsEVYOIAWRJRPglczZ5gskFmCvYlBFmZ02io7uxBovnUAG/w==",
+      "dev": true,
+      "dependencies": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/datasette": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/datasette/-/datasette-1.0.1.tgz",
@@ -1101,6 +1140,12 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
     "node_modules/fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -2259,8 +2304,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -3681,12 +3725,40 @@
         "util.promisify": "1.0.0"
       }
     },
+    "css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true
+    },
+    "daisyui": {
+      "version": "4.4.13",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.4.13.tgz",
+      "integrity": "sha512-hk2xykBSTpCdSFx2LbF4WJb9cePE86+dF2q5abhsEVYOIAWRJRPglczZ5gskFmCvYlBFmZ02io7uxBovnUAG/w==",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      }
+    },
     "datasette": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/datasette/-/datasette-1.0.1.tgz",
@@ -3955,6 +4027,12 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
+    "fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
     "fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -4845,8 +4923,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "picomatch": {
       "version": "2.3.1",
diff --git a/package.json b/package.json
index bea0ff8..e15a8ff 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@tailwindcss/typography": "^0.5.1",
+    "daisyui": "^4.4.13",
     "tailwind": "^4.0.0",
     "tailwindcss": "^3.0.19"
   },
diff --git a/pyproject.toml b/pyproject.toml
index d6308bb..35ff879 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,10 +1,10 @@
 [build-system]
-requires = ["poetry>=0.12"]
-build-backend = "poetry.masonry.api"
+requires = ["poetry-core>=1.0.0"]
+build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "wagtail-code-blog"
-version = "0.4.3"
+version = "0.5.0"
 license = "MIT"
 description = "A wagtail code blog"
 authors = ["Dani Hodovic <dani.hodovic@gmail.com>"]
diff --git a/tailwind.config.js b/tailwind.config.js
index e5e4e86..6b027df 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,20 +1,22 @@
 module.exports = {
-  content: [
-    './wagtail_code_blog/templates/**/*.html',
-  ],
+  content: ["./wagtail_code_blog/templates/**/*.html"],
   safelist: [],
   theme: {
     extend: {},
   },
   plugins: [
-      /**
-       * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
-       * for forms. If you don't like it or have own styling for forms,
-       * comment the line below to disable '@tailwindcss/forms'.
-       */
-      require('@tailwindcss/forms'),
-      require('@tailwindcss/typography'),
-      require('@tailwindcss/line-clamp'),
-      require('@tailwindcss/aspect-ratio'),
+    /**
+     * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
+     * for forms. If you don't like it or have own styling for forms,
+     * comment the line below to disable '@tailwindcss/forms'.
+     */
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/line-clamp"),
+    require("@tailwindcss/aspect-ratio"),
+    require("daisyui"),
   ],
-}
+  daisyui: {
+    darkTheme: false,
+  },
+};
diff --git a/wagtail_code_blog/static/wagtail_code_blog/css/blog_index_page.css b/wagtail_code_blog/static/wagtail_code_blog/css/blog_index_page.css
index 272c3f7..f91c65c 100644
--- a/wagtail_code_blog/static/wagtail_code_blog/css/blog_index_page.css
+++ b/wagtail_code_blog/static/wagtail_code_blog/css/blog_index_page.css
@@ -1,26 +1,9 @@
-h1 {
-  color: #F7F7F7;
-  font-weight: 800;
-  font-size: 2.9rem;
-}
-
-h3 {
-  font-size: 1.7em;
-  font-weight: 500;
-}
-
 .intro small {
-  color: #A0A4A8;
+  color: #a0a4a8;
   font-size: 14px;
   line-height: 22px;
 }
 
-p {
- color: #52575C;
- font-size: 1.1em;
- font-weight: 600;
-}
-
 .intro-container {
   margin-bottom: 4rem;
   display: flex;
@@ -38,115 +21,17 @@ p {
   max-width: 400px;
 }
 
-.post {
-  padding: 1rem;
-}
-
-.post a {
-  color: black;
-}
-
-.img-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1.5rem;
-}
-
-.intro img {
-  height: auto;
-  max-width: 100%;
-}
-
-.post img {
-  border-radius: 6px;
-  width: 100%;
-}
-
-.post-content img {
-  border-radius: 30px;
-}
-
-
-.post-detail-text {
-  color: #25282B;
-}
-
-.post-detail-text, .post-date {
-  font-size: 0.95rem;
-  margin-bottom: 0;
-  margin-top:0;
-}
-
-.post-date {
-  color: #A0A4A8;
-}
-
 .post * {
   font-family: "Nunito Sans", serif;
 }
 
-.post-info {
-  width: 100%;
-}
-
-.post-intro-text {
-  margin-top: 0.5rem;
-}
-
-.post-content {
-  display: flex;
-  align-items: center;
-  margin-top: 1.5rem;
-}
-
-.post-detail {
-  width: 100%;
-}
-
-.post-content img {
-  margin-right: 1.5rem;
-}
-
 .post-readtime {
   float: right;
-  color: #52575C
-}
-
-a {
-  color: black;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #484848;
-}
-
-hr {
-  border: 1px solid #E8E8E8;
-  max-width: 1000px;
-}
-
-.post-info img {
-  max-width: 45px;
+  color: #52575c;
 }
 
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 700px) {
-
-  .post-info{
-    margin-left: 1rem;
-  }
-
-  .post {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: center;
-    max-width: 1000px;
-    margin: auto;
-  }
-
   .img-link {
     margin-bottom: 0rem;
     margin-right: 1.5rem;
@@ -167,9 +52,4 @@ hr {
     margin-top: 0;
     margin-left: 4rem;
   }
-
-  .post img {
-    height: auto;
-    width: 250px;
-  }
 }
diff --git a/wagtail_code_blog/static/wagtail_code_blog/css/pygments.css b/wagtail_code_blog/static/wagtail_code_blog/css/pygments.css
deleted file mode 100644
index 14d5741..0000000
--- a/wagtail_code_blog/static/wagtail_code_blog/css/pygments.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/* stylelint-disable */
-.codehilite .hll { background-color: #49483e }
-
-.codehilite { background: #272822; color: #f8f8f2 }
-
-.codehilite .c { color: #75715e } /* Comment */
-.codehilite .err { color: #960050; background-color: #1e0010 } /* Error */
-.codehilite .k { color: #66d9ef } /* Keyword */
-.codehilite .l { color: #ae81ff } /* Literal */
-.codehilite .n { color: #f8f8f2 } /* Name */
-.codehilite .o { color: #f92672 } /* Operator */
-.codehilite .p { color: #f8f8f2 } /* Punctuation */
-.codehilite .ch { color: #75715e } /* Comment.Hashbang */
-.codehilite .cm { color: #75715e } /* Comment.Multiline */
-.codehilite .cp { color: #75715e } /* Comment.Preproc */
-.codehilite .cpf { color: #75715e } /* Comment.PreprocFile */
-.codehilite .c1 { color: #75715e } /* Comment.Single */
-.codehilite .cs { color: #75715e } /* Comment.Special */
-.codehilite .gd { color: #f92672 } /* Generic.Deleted */
-.codehilite .ge { font-style: italic } /* Generic.Emph */
-.codehilite .gi { color: #a6e22e } /* Generic.Inserted */
-.codehilite .gs { font-weight: bold } /* Generic.Strong */
-.codehilite .gu { color: #75715e } /* Generic.Subheading */
-.codehilite .kc { color: #66d9ef } /* Keyword.Constant */
-.codehilite .kd { color: #66d9ef } /* Keyword.Declaration */
-.codehilite .kn { color: #f92672 } /* Keyword.Namespace */
-.codehilite .kp { color: #66d9ef } /* Keyword.Pseudo */
-.codehilite .kr { color: #66d9ef } /* Keyword.Reserved */
-.codehilite .kt { color: #66d9ef } /* Keyword.Type */
-.codehilite .ld { color: #e6db74 } /* Literal.Date */
-.codehilite .m { color: #ae81ff } /* Literal.Number */
-.codehilite .s { color: #e6db74 } /* Literal.String */
-.codehilite .na { color: #a6e22e } /* Name.Attribute */
-.codehilite .nb { color: #f8f8f2 } /* Name.Builtin */
-.codehilite .nc { color: #a6e22e } /* Name.Class */
-.codehilite .no { color: #66d9ef } /* Name.Constant */
-.codehilite .nd { color: #a6e22e } /* Name.Decorator */
-.codehilite .ni { color: #f8f8f2 } /* Name.Entity */
-.codehilite .ne { color: #a6e22e } /* Name.Exception */
-.codehilite .nf { color: #a6e22e } /* Name.Function */
-.codehilite .nl { color: #f8f8f2 } /* Name.Label */
-.codehilite .nn { color: #f8f8f2 } /* Name.Namespace */
-.codehilite .nx { color: #a6e22e } /* Name.Other */
-.codehilite .py { color: #f8f8f2 } /* Name.Property */
-.codehilite .nt { color: #f92672 } /* Name.Tag */
-.codehilite .nv { color: #f8f8f2 } /* Name.Variable */
-.codehilite .ow { color: #f92672 } /* Operator.Word */
-.codehilite .w { color: #f8f8f2 } /* Text.Whitespace */
-.codehilite .mb { color: #ae81ff } /* Literal.Number.Bin */
-.codehilite .mf { color: #ae81ff } /* Literal.Number.Float */
-.codehilite .mh { color: #ae81ff } /* Literal.Number.Hex */
-.codehilite .mi { color: #ae81ff } /* Literal.Number.Integer */
-.codehilite .mo { color: #ae81ff } /* Literal.Number.Oct */
-.codehilite .sa { color: #e6db74 } /* Literal.String.Affix */
-.codehilite .sb { color: #e6db74 } /* Literal.String.Backtick */
-.codehilite .sc { color: #e6db74 } /* Literal.String.Char */
-.codehilite .dl { color: #e6db74 } /* Literal.String.Delimiter */
-.codehilite .sd { color: #e6db74 } /* Literal.String.Doc */
-.codehilite .s2 { color: #e6db74 } /* Literal.String.Double */
-.codehilite .se { color: #ae81ff } /* Literal.String.Escape */
-.codehilite .sh { color: #e6db74 } /* Literal.String.Heredoc */
-.codehilite .si { color: #e6db74 } /* Literal.String.Interpol */
-.codehilite .sx { color: #e6db74 } /* Literal.String.Other */
-.codehilite .sr { color: #e6db74 } /* Literal.String.Regex */
-.codehilite .s1 { color: #e6db74 } /* Literal.String.Single */
-.codehilite .ss { color: #e6db74 } /* Literal.String.Symbol */
-.codehilite .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-.codehilite .fm { color: #a6e22e } /* Name.Function.Magic */
-.codehilite .vc { color: #f8f8f2 } /* Name.Variable.Class */
-.codehilite .vg { color: #f8f8f2 } /* Name.Variable.Global */
-.codehilite .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-.codehilite .vm { color: #f8f8f2 } /* Name.Variable.Magic */
-.codehilite .il { color: #ae81ff } /* Literal.Number.Integer.Long */
diff --git a/wagtail_code_blog/static/wagtail_code_blog/input.css b/wagtail_code_blog/static/wagtail_code_blog/input.css
index a079d28..b5c61c9 100644
--- a/wagtail_code_blog/static/wagtail_code_blog/input.css
+++ b/wagtail_code_blog/static/wagtail_code_blog/input.css
@@ -1,88 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer components {
-  .blog-text h2, h3, h4, h5 {
-    @apply mt-4 mb-1;
-  }
-  .blog-text h2 {
-    @apply text-xl md:text-3xl;
-  }
-  .blog-text h3 {
-    @apply text-lg md:text-2xl;
-  }
-  .blog-text h4 {
-    @apply font-semibold md:font-normal md:text-xl;
-  }
-  .blog-text h5 {
-    @apply text-lg font-medium md:font-normal;
-  }
-  .blog-text ol, ul, p {
-    @apply p-0 mb-4 tracking-tight leading-7;
-  }
-
-  .blog-text > ol, ul {
-    @apply ml-4;
-  }
-
-  .blog-text li {
-    @apply mx-0 my-1 list-disc;
-  }
-
-  .blog-text a {
-    @apply font-semibold border-b border-blue-900 border-dotted text-sky-600 hover:border-b-2 transition-all;
-  }
-
-  .blog-text > *:not(code) {
-    @apply px-4;
-  }
-
-  .blog-text .codehilite {
-    @apply my-5 md:rounded-lg;
-  }
-
-  .blog-text .codehilite pre {
-    @apply overflow-auto;
-  }
-
-  .blog-text strong {
-    @apply font-semibold tracking-tighter leading-6 text-stone-800;
-  }
-
-  blockquote {
-    border-left: 3px solid #322B3E;
-    color: #1a1a1a;
-    font-size: 1.1em;
-    font-style: italic;
-    line-height: 1.4em;
-    margin: 1.1em 1em;
-    padding: 1em 2em;
-    position: relative;
-    z-index: 0;
-  }
-
-  @media (min-width: 992px) {
-    /* Fancy block quotes don't work on mobile */
-    blockquote {
-      border-left: 0;
-      color: none;
-    }
-
-    blockquote:after {
-      content: "\f10d";
-      font-family: "Font Awesome 5 Free";
-      font-weight: 900;
-      font-style: normal;
-      position: absolute;
-      top: 50%;
-      left: -0.5em;
-      color: #322B3E;
-      line-height: 1em;
-      text-align: center;
-      text-indent: -2px;
-      width: 1em;
-      margin-top: -0.5em;
-    }
-  }
-}
diff --git a/wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_body.html b/wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_body.html
index fb8899c..30af8a3 100644
--- a/wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_body.html
+++ b/wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_body.html
@@ -1,42 +1,43 @@
 {% load wagtailcore_tags wagtailimages_tags %}
-
 {% if page.heading and page.image %}
-<div class="intro-container" style="background: {{ page.background_color }}">
-  <div class="intro">
-    {% image page.image original %}
-    <div class="intro-info">
-      <h1>{{ page.heading }}</h1>
-      <small>{{ page.description }}</small>
+    <div class="intro-container"
+         style="background: {{ page.background_color }}">
+        <div class="intro">
+            {% image page.image original %}
+            <div class="intro-info">
+                <h1>{{ page.heading }}</h1>
+                <small>{{ page.description }}</small>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
 {% endif %}
 {% for post in posts %}
-<div class="post">
-  {% if post.image_url %}
-  <a class="img-link" href="{% pageurl post %}">
-    <img src="{{ post.image_url }}" alt="{{ post.title }}">
-  </a>
-  {% endif %}
-  <a class="post-info" href="{% pageurl post %}">
-    <h3 class="post-title">{{ post.title }}</h3>
-    {% if post.intro %}
-    <p class="post-intro-text">{{ post.intro|truncatewords:30 }}</p>
-    {% endif %}
-    <div class="post-content">
-      {% if post.owner.wagtail_userprofile.avatar.url %}
-      <img src="{{ post.owner.wagtail_userprofile.avatar.url }}" alt="Avatar">
-      {% endif %}
-      <div class="post-detail">
-        <p class="post-detail-text"><b>{{ post.author_name }}</b></p>
-        <p class="post-date">{{ post.date }}
-          <span class="post-readtime">{{ post.readtime }}</span>
-        </p>
-      </div>
+    <div class="post flex flex-col lg:flex-row max-w-5xl items-center justify-center mx-auto p-8">
+        {% if post.image_url %}
+            <a class="img-link" href="{% pageurl post %}">
+                <img src="{{ post.image_url }}" alt="{{ post.title }}">
+            </a>
+        {% endif %}
+        <a class="post-info w-full" href="{% pageurl post %}">
+            <p class="text-2xl font-medium">{{ post.title }}</p>
+            {% if post.intro %}<p class="prose mt-2">{{ post.intro|truncatewords:30 }}</p>{% endif %}
+            <div class="flex items-center gap-4 mt-8">
+                {% if post.owner.wagtail_userprofile.avatar.url %}
+                    <img class="avatar w-10 rounded-xl h-auto"
+                         src="{{ post.owner.wagtail_userprofile.avatar.url }}"
+                         alt="Avatar">
+                {% endif %}
+                <div class="w-full">
+                    <p class="text-sm">
+                        <b>{{ post.author_name }}</b>
+                    </p>
+                    <p class="text-sm text-gray-600">
+                        {{ post.date }}
+                        <span class="post-readtime">{{ post.readtime }}</span>
+                    </p>
+                </div>
+            </div>
+        </a>
     </div>
-  </a>
-</div>
-{% if not forloop.last %}
-<hr />
-{% endif %}
+    {% if not forloop.last %}<div class="divider"></div>{% endif %}
 {% endfor %}
diff --git a/wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_head.html b/wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_head.html
index e7ef30d..50bbbf7 100644
--- a/wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_head.html
+++ b/wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_head.html
@@ -1,3 +1,6 @@
 {% load static %}
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap">
-<link rel="stylesheet" href="{% static 'wagtail_code_blog/css/blog_index_page.css' %}" />
+<link rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap">
+<link rel="stylesheet"
+      href="{% static 'wagtail_code_blog/css/blog_index_page.css' %}" />
+<link rel="stylesheet" href="{% static 'wagtail_code_blog/output.css' %}" />
diff --git a/wagtail_code_blog/templates/wagtail_code_blog/blog_page.html b/wagtail_code_blog/templates/wagtail_code_blog/blog_page.html
index cf42c64..31d0c4c 100644
--- a/wagtail_code_blog/templates/wagtail_code_blog/blog_page.html
+++ b/wagtail_code_blog/templates/wagtail_code_blog/blog_page.html
@@ -1,16 +1,12 @@
 {% load static %}
 <html>
-
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  {% include "wagtail_code_blog/static_dependencies.html" %}
-  {% include "wagtail_code_blog/blog_page_head.html" %}
-</head>
-
-<body>
-  <div class="flex justify-center">
-  {% include "wagtail_code_blog/blog_page_body.html" %}
-  </div>
-</body>
-
+    <head>
+        <meta name="viewport"
+              content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        {% include "wagtail_code_blog/static_dependencies.html" %}
+        {% include "wagtail_code_blog/blog_page_head.html" %}
+    </head>
+    <body>
+        <div class="flex justify-center">{% include "wagtail_code_blog/blog_page_body.html" %}</div>
+    </body>
 </html>
diff --git a/wagtail_code_blog/templates/wagtail_code_blog/blog_page_body.html b/wagtail_code_blog/templates/wagtail_code_blog/blog_page_body.html
index 1e0fbe4..608d532 100644
--- a/wagtail_code_blog/templates/wagtail_code_blog/blog_page_body.html
+++ b/wagtail_code_blog/templates/wagtail_code_blog/blog_page_body.html
@@ -1,27 +1,27 @@
 {% load wagtailmarkdown %}
-
-<div class="flex flex-col items-center w-full sm:text-sm md:text-base md:w-10/12 xl:w-9/12 text-stone-800">
-  {% if page.image_url %}
-  <img src="{{ page.image_url }}" alt="Image">
-  {% endif %}
-  <h1 class="mt-4 text-xl font-semibold tracking-tighter text-center md:text-5xl">{{ page.title }}</h1>
-  <div class="flex justify-end mt-4 mb-4 md:w-10/12 xl:w-8/12">
-    <div class="flex items-center mr-3 md:mr-20">
-      <div class="flex flex-col items-center justify-center my-6 ">
-        <span class="text-xs font-semibold md:text-base">{{ page.author_name }}</span>
-        <span class="text-xs md:text-sm text-stone-500">{{ page.date }}</span>
-        <span class="text-xs md:text-sm text-stone-500">{{ page.readtime }}</span>
-      </div>
-      {% if author_image %}
-      <div class="ml-3">
-        <img src="{{ author_image }}" class="object-scale-down w-8 rounded-2xl md:w-16 xl:w-20" alt="Responsive image">
-      </div>
-      {% endif %}
+<div class="flex flex-row justify-center text-stone-800 mt-20">
+    <div class="flex flex-col justify-center items-center basis-10/12 lg:!basis-8/12">
+        {% if page.image_url %}<img src="{{ page.image_url }}" alt="Image">{% endif %}
+        <p class="text-xl lg:!text-4xl font-semibold mt-10">{{ page.title }}</p>
+        <div class="flex justify-end mt-5 mb-5">
+            <div class="flex items-center">
+                <div class="flex flex-col items-center justify-center my-6">
+                    <span class="text-xs font-semibold md:text-base">{{ page.author_name }}</span>
+                    <span class="text-xs md:text-sm text-stone-500">{{ page.date }}</span>
+                    <span class="text-xs md:text-sm text-stone-500">{{ page.readtime }}</span>
+                </div>
+                {% if author_image %}
+                    <div class="ml-3">
+                        <img src="{{ author_image }}"
+                             class="object-scale-down w-8 rounded-2xl md:w-16 xl:w-20"
+                             alt="Responsive image">
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+        <div class="divider"></div>
+        <div class="grid grid-cols-1">
+            <article class="prose mt-5">{{ page.body|markdown }}</article>
+        </div>
     </div>
-  </div>
-  <hr class="w-10/12 mb-4 border-b-2 md:w-8/12">
-
-  <div class="flex flex-col justify-center w-full font-sans blog-text md:w-10/12 xl:w-8/12">
-    {{ page.body|markdown }}
-  </div>
 </div>
diff --git a/wagtail_code_blog/templates/wagtail_code_blog/blog_page_head.html b/wagtail_code_blog/templates/wagtail_code_blog/blog_page_head.html
index bcd6c83..35c36c2 100644
--- a/wagtail_code_blog/templates/wagtail_code_blog/blog_page_head.html
+++ b/wagtail_code_blog/templates/wagtail_code_blog/blog_page_head.html
@@ -1,17 +1,11 @@
 {% load static %}
 {% load wagtailmetadata_tags %}
 {% load render_json_ld from json_ld %}
-
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=B612+Mono&display=swap">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap">
-
-<link rel="stylesheet" href="{% static 'wagtail_code_blog/css/pygments.css' %}" />
-<link rel="stylesheet" href="{% static 'wagtail_code_blog/css/markdown_code_blocks.css' %}" />
+<link rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=B612+Mono&display=swap">
+<link rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap">
 <link rel="stylesheet" href="{% static 'wagtail_code_blog/output.css' %}" />
-
-{% if page.canonical_url %}
-<link rel="canonical" href="{{ page.canonical_url }}">
-{% endif %}
-
+{% if page.canonical_url %}<link rel="canonical" href="{{ page.canonical_url }}">{% endif %}
 {% render_json_ld page_sd %}
 {% meta_tags %}