diff --git a/src/content/post/2024-01-16-example-article-1.mdx b/src/content/post/2024-01-16-example-article-1.mdx
index 9e873b0..f6f3289 100644
--- a/src/content/post/2024-01-16-example-article-1.mdx
+++ b/src/content/post/2024-01-16-example-article-1.mdx
@@ -1,7 +1,7 @@
 ---
 title: Example article 1
 description: |
-  Dolor velit excepteur cupidatat aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip. Et dolor tempor velit veniam incididunt irure. Aute ad tempor incididunt labore dolore incididunt in quis officia quis est. Ullamco aute et ex velit proident non.
+  Et dolor tempor velit: Aute ad tempor incididunt labore dolore incididunt in quis officia quis est. Ullamco aute et ex velit proident non.
 publishDate: 2024-01-16
 updatedDate: 2024-03-16
 slug: example-article-1
diff --git a/src/content/post/2024-01-17-example-article-2.mdx b/src/content/post/2024-01-17-example-article-2.mdx
index 7e66c67..7eed854 100644
--- a/src/content/post/2024-01-17-example-article-2.mdx
+++ b/src/content/post/2024-01-17-example-article-2.mdx
@@ -1,7 +1,7 @@
 ---
 title: Example article 2
 description: |
-  Dolor velit excepteur cupidatat aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip. Et dolor tempor velit veniam incididunt irure. Aute ad tempor incididunt labore dolore incididunt in quis officia quis est. Ullamco aute et ex velit proident non.
+  Dolor velit excepteur cupidatat: Aute in fugiat id reprehenderit ipsum qui tempor fugiat. Excepteur tempor culpa velit duis quis enim aliquip.
 publishDate: 2024-01-17
 slug: example-article-2
 heroImage: '../../content/post/_images/2024-01-17-example-article-2/riverside1.jpg'
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
index d57db7b..bbf4763 100644
--- a/src/layouts/Post.astro
+++ b/src/layouts/Post.astro
@@ -14,12 +14,10 @@ const props = Astro.props;
     <figure class="w-full max-w-5xl md:mx-auto">
       <slot name="hero-image" />
     </figure>
-    <Prose>
-      <section class="w-full max-w-4xl md:mx-auto px-4 lg:px-0 py-4 lg:py-8">
-        <slot name="hero-text" />
-        <slot name="content" />
-      </section>
-    </Prose>
+    <section class="my-prose w-full max-w-4xl md:mx-auto px-4 lg:px-0 py-4 lg:py-8">
+      <slot name="hero-text" />
+      <slot name="content" />
+    </section>
     <section class="w-full max-w-5xl px-4 lg:px-0 md:mx-auto">
       <slot name="more-posts" />
     </section>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index e4b5f9d..e6d5451 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -88,11 +88,11 @@ const postMetaProps = {
       {draft && <sup class="text-red-400">(draft)</sup>}
     </h1>
 
+    {/* description */}
+    {description && <h2 class="mt-0 mb-3 font-normal text-xl lg:text-2xl">{description}</h2>}
+
     {/* meta */}
     <PostMeta {...postMetaProps} />
-
-    {/* description */}
-    {description && <p class=" text-lg lg:text-2xl">{description}</p>}
   </Fragment>
 
   {/* section content */}
diff --git a/src/styles/main.css b/src/styles/main.css
index 725eed1..c0a1a03 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -6,6 +6,7 @@
 @import './themes.css';
 
 @import './tw-base.css';
+@import './my-prose.css';
 @import './code-block.css';
 /* @import './tw-components.css'; */
 @import './tw-utilities.css';
diff --git a/src/styles/my-prose.css b/src/styles/my-prose.css
new file mode 100644
index 0000000..be9c58d
--- /dev/null
+++ b/src/styles/my-prose.css
@@ -0,0 +1,15 @@
+/* prose override */
+@layer base {
+  .my-prose {
+    @apply prose prose-slate max-w-none dark:prose-invert;
+
+    /* responsive styling */
+    /* base */
+    @apply lg:prose-lg xl:prose-xl;
+    /* h1 */
+    @apply prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl;
+
+    /* h1 */
+    @apply prose-h1:mb-4;
+  }
+}
diff --git a/src/styles/tw-base.css b/src/styles/tw-base.css
index c79f67c..0524c16 100644
--- a/src/styles/tw-base.css
+++ b/src/styles/tw-base.css
@@ -1,34 +1,23 @@
-/* add typography styles for my components here, same as prose-slate, h1, h2, body... */
+/*------------------------------------------------------------------------
+ * add typography styles for my components here, same as prose-slate, h1, h2, body...
+ * set only: fontSize,  marginTop,  marginBottom,  lineHeight so prose can override them
+ * 
+ * most content and text is in .mdx pages and collections with prose, p, h1, h2, a...
+ *------------------------------------------------------------------------*/
 
 @layer base {
-  /* html {
-    @apply text-sm sm:text-base;
-  } */
-
-  /* most content and text is in .mdx pages and collections with prose, p, h1, h2, a... */
-
   body {
+    /* style base font in body, not in html so rem is unaffected */
     color: var(--content);
-    /* @apply text-sm sm:text-base lg:text-lg xl:text-xl 2xl:text-2xl; */
-    @apply text-sm sm:text-base;
+    @apply text-base sm:text-lg lg:text-xl;
   }
 
-  /* fontSize,  marginTop,  marginBottom,  lineHeight - needs to be set  */
-
   h1 {
     color: var(--headings);
     @apply text-3xl sm:text-4xl md:text-5xl lg:text-[3.5rem] xl:text-[4rem];
     @apply font-extrabold;
   }
 
-  /* @apply mb-8; */
-
-  /* all h2 that dont have .prose parent */
-  /* h2:not(:is(.prose *) h2) {
-    color: var(--headings);
-    @apply text-2xl font-bold mb-4;
-  } */
-
   .prose {
     /* @apply outline outline-blue-500; */
   }
@@ -37,14 +26,15 @@
   h2 {
     @apply bg-green-200;
   }
+  */
 
+  /* all h2 that dont have .prose parent */
+  /*
   h2:not(:is(.prose *) h2) {
     @apply outline outline-red-500;
   }
   */
 
-  /* h2:not(:is(.prose *) > h2 */
-
   /* 
   *:hover {
     @apply outline outline-red-500;