diff --git a/assets/styles/pricing.scss b/assets/styles/pricing.scss
index 063c0ce47..f9c860d49 100644
--- a/assets/styles/pricing.scss
+++ b/assets/styles/pricing.scss
@@ -1,65 +1,142 @@
+$base-color: rgb(20, 20, 20);
+$base-color-light: rgb(104, 104, 104);
+$primary-color: rgb(40, 75, 98);
+$secondary-color: rgb(73, 144, 191);
+
 * {
-    box-sizing: border-box;
-  }
-  
-  /* Create three columns of equal width */
-  .pricing-columns {
-    float: left;
-    width: 50%;
-    padding: 8px;
-  }
-  
-  /* Style the list */
-  .price {
-    list-style-type: none;
-    border: 1px solid #eee;
-    margin: 0;
-    padding: 0;
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-  }
-  
-  /* Add shadows on hover */
-  .price:hover {
-    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
-  }
-  
-  /* Pricing header */
-  .price .header {
-    background-color: #111;
-    color: white;
-    font-size: 25px;
-  }
-  
-  /* List items */
-  .price li {
-    border-bottom: 1px solid #eee;
-    padding: 20px;
+  box-sizing: border-box;
+}
+
+.plan-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  &-text {
     text-align: center;
+    margin: 4px 0;
   }
-  
-  /* Grey list item */
-  .price .grey {
-    background-color: #eee;
+}
+
+.plan-title {
+  font-size: 48px;
+  font-weight: 600;
+  margin: 4px 4px;
+}
+
+/* Style the list */
+.plan-list {
+  margin: 0;
+  padding: 0;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.plan-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 40px;
+  //flex-direction colunn for mobile
+  @media (max-width: 600px) {
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+
+/* Pricing header */
+.plan {
+  height: 560px;
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 24px;
+  padding: 0 0 40px 0;
+  gap: 32px;
+  margin-top: 32px;
+  background-color: $base-color;
+
+  &-header {
+    width: 100%;
+    border-radius: 24px 24px 0px 0px;
+    background-color: $primary-color;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // border-bottom: solid white;
+    // border-width: 4px;
+  }
+  &-label {
+    margin-bottom: 0px;
+    color: white;
+    font-size: 28px;
+  }
+  &-price {
     font-size: 20px;
-    color: black;
   }
-  
-  /* The "Sign Up" button */
-  .button {
-    background-color: #284b63;
-    border: none;
-    color: white;
-    padding: 10px 25px;
-    text-align: center;
-    text-decoration: none;
-    font-size: 18px;
+
+  &-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    width: 100%;
+    padding: 0 24px;
   }
-  
-  /* Change the width of the three columns to 100%
-  (to stack horizontally on small screens) */
-  @media only screen and (max-width: 600px) {
-    .pricing-columns {
-      width: 100%;
+
+  &-list {
+    width: 100%;
+    background-color: $base-color;
+    display: flex;
+    list-style-type: none;
+    flex-direction: column;
+    gap: 12px;
+    font-size: 1em;
+    li {
+      margin: 0px 24px;
     }
-  }
\ No newline at end of file
+    li:before {
+      background-color: #111;
+      content: '\2713';
+      display: inline-block;
+      color: green;
+      padding: 0 6px 0 0;
+    }
+  }
+  :hover {
+    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
+  }
+}
+
+/* Grey list item */
+.price .grey {
+  font-size: 20px;
+}
+
+
+/* The "Sign Up" button */
+.button {
+  background-color: #284b63;
+  border-radius: 8px;
+  color: white;
+  padding: 10px 25px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+/* Change the width of the three columns to 100%
+  (to stack horizontally on small screens) */
+@media only screen and (max-width: 600px) {
+  .pricing-columns {
+    width: 100%;
+  }
+}
+
+.premium {
+  background-color: $secondary-color;
+}
\ No newline at end of file
diff --git a/content/pricing.md b/content/pricing.md
index 35a274276..0c3c24bee 100644
--- a/content/pricing.md
+++ b/content/pricing.md
@@ -1,6 +1,3 @@
 ---
-title: Pricing
 ---
-Fleeting Notes will always be **100% free offline**. If you're interested in accessing insider builds, [donating](https://ko-fi.com/fleetingnotes) will give you access to those.
-
 {{< pricing-tables >}}
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3268c8d80..85923d165 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -9,9 +9,9 @@
     {{partial "header.html" .}}
   <article>
       {{if .Title}}<h1>{{ .Title }}</h1>{{end}}
-      <p class="meta">
+      <!-- <p class="meta">
           Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
-      </p>
+      </p> -->
       <ul class="tags">
           {{ range (.GetTerms "tags") }}
           <li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li>
diff --git a/layouts/shortcodes/pricing-tables.html b/layouts/shortcodes/pricing-tables.html
index 6fa48a2e5..a4307b582 100644
--- a/layouts/shortcodes/pricing-tables.html
+++ b/layouts/shortcodes/pricing-tables.html
@@ -1,25 +1,74 @@
-<div class="row">
-    <div class="col-6">
-        <ul class="price">
-            <li class="header">Free</li>
-            <li class="grey">$ 0 / month<br><br><a href="https://my.fleetingnotes.app/" class="button">Get started</a></li>
-            <li>Unlimited Notes</li>
-            <li>Only 1 device logged in at a time</li>
-            <li><a class="internal-link" href="/posts/end-to-end-encryption-in-fleeting-notes/">End-to-end encryption</a></li>
-            <li>10 GB attachment upload limit</li>
-            <li>Blazing fast full-text search</li>
-            <li>Access to Chrome / Firefox Extension, iOS, Android & Web App</li>
-            <li>Access to <a href="https://github.com/fleetingnotes/fleeting-notes-obsidian">plugin</a> for Obsidian MD sync</li>
+<div class="plan-page">
+  <h1 class="plan-title">Pricing</h1>
+  <div>
+    <p class="plan-page-text">
+      Fleeting Notes will always be <b>100% free offline.</b>
+    </p>
+    <p class="plan-page-text">
+      If you're interested in accessing insider builds,
+      <a href="https://ko-fi.com/fleetingnotes">donating</a> will give you
+      access to those.
+    </p>
+  </div>
+
+  <div class="plan-container">
+    <div class="plan">
+      <div class="plan-header">
+        <h1 class="plan-label">Free</h1>
+        <p class="plan-price">$0/month</p>
+      </div>
+      <div class="plan-body">
+        <ul class="plan-list">
+          <li>Unlimited Notes</li>
+          <li>Only 1 device logged in at a time</li>
+          <li>
+            <a
+              class="internal-link"
+              href="/posts/end-to-end-encryption-in-fleeting-notes/"
+              >End-to-end encryption</a
+            >
+          </li>
+          <li>10 GB attachment upload limit</li>
+          <li>Blazing fast full-text search</li>
+          <li>Browser Extension (Chrome, Firefox)</li>
+          <li>Android & iOS App</li>
+          <li>
+            Access to
+            <a href="https://github.com/fleetingnotes/fleeting-notes-obsidian"
+              >plugin</a
+            >
+            for Obsidian MD sync
+          </li>
         </ul>
+        <a href="https://my.fleetingnotes.app/" class="button button-cta"
+          >Get started</a
+        >
+      </div>
     </div>
-    <div class="col-6">
-        <ul class="price">
-            <li class="header">Premium</li>
-            <li class="grey">$6 / month<br><br><a href="https://payments.fleetingnotes.app" class="button">Try it free</a></li>
-            <li><b>Everything on the Free plan, plus</b></li>
-            <li>Unlimited logged in devices</li>
-            <li>25 GB attachment upload limit</li>
-            <li><a class="internal-link" href="/posts/how-ai-powered-links-supercharge-notetaking/">AI powered link suggestions</a></li>
+    <div class="plan">
+      <div class="plan-header premium">
+        <h1 class="plan-label">Premium</h1>
+        <p class="plan-price">$6/month</p>
+      </div>
+      <div class="plan-body">
+        <ul class="plan-list">
+          <li><b>Everything on the Free plan</b></li>
+          <li>Unlimited logged in devices</li>
+          <li>25 GB attachment upload limit</li>
+          <li>
+            <a
+              class="internal-link"
+              href="/posts/how-ai-powered-links-supercharge-notetaking/"
+              >AI powered link suggestions</a
+            >
+          </li>
         </ul>
+        <a
+          href="https://payments.fleetingnotes.app"
+          class="button button-cta premium"
+          >Try it for free</a
+        >
+      </div>
     </div>
-</div>
\ No newline at end of file
+  </div>
+</div>