diff --git a/frontend/src/components/PageTitle.astro b/frontend/src/components/PageTitle.astro
index 58bb332..265f6fc 100644
--- a/frontend/src/components/PageTitle.astro
+++ b/frontend/src/components/PageTitle.astro
@@ -5,7 +5,7 @@ export type Props = HTMLAttributes<'h1'>;
 ---
 
 <h1
-  class:list={['text-primary-800 font-bold text-4xl', Astro.props.class]}
+  class:list={['text-primary-800 font-bold text-2xl sm:text-4xl', Astro.props.class]}
   {...Astro.props}
 >
   <slot />
diff --git a/frontend/src/components/portableText/BlogPostSubtitle.astro b/frontend/src/components/portableText/BlogPostSubtitle.astro
index 8e5736e..a7d0a6d 100644
--- a/frontend/src/components/portableText/BlogPostSubtitle.astro
+++ b/frontend/src/components/portableText/BlogPostSubtitle.astro
@@ -17,6 +17,6 @@ const components = {
 const { content } = Astro.props;
 ---
 
-<h2 class="mb-2 text-green-800 text-justify text-lg">
+<h2 class="mb-2 text-green-800 text-justify sm:text-lg">
   <PortableText components={components} value={content} />
 </h2>
diff --git a/frontend/src/lib/cms/queries/blogPosts.ts b/frontend/src/lib/cms/queries/blogPosts.ts
index 3d96465..bdd5ef2 100644
--- a/frontend/src/lib/cms/queries/blogPosts.ts
+++ b/frontend/src/lib/cms/queries/blogPosts.ts
@@ -17,6 +17,7 @@ export const forBlogPostPage = groq`
             _type != 'image' => @
         },
         headerImage,
+        readTime,
         publishDate,
         linkPreviewImage,
         linkPreviewDescription,
diff --git a/frontend/src/pages/biblioteca/index.astro b/frontend/src/pages/biblioteca/index.astro
index 54f4c57..fa91722 100644
--- a/frontend/src/pages/biblioteca/index.astro
+++ b/frontend/src/pages/biblioteca/index.astro
@@ -36,7 +36,7 @@ const libraryItems: {
     {
       libraryItems.map(({ title, description, link, checkedOut }) => (
         <CardLink link={link}>
-          <span class="text-lg md:text-xl font-medium break-words text-primary-700 block mb-3">
+          <span class="text-lg sm:text-xl font-medium break-words text-primary-700 block mb-3">
             {title}
           </span>
           <p class="mb-5">{description}</p>
@@ -49,13 +49,13 @@ const libraryItems: {
     <nav class="flex gap-4">
       <ButtonLink
         href="/blogue"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Blog
       </ButtonLink>
       <ButtonLink
         href="/"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Início
       </ButtonLink>
diff --git a/frontend/src/pages/blog/[slug]/index.astro b/frontend/src/pages/blog/[slug]/index.astro
index d5bbe6d..a582b3c 100644
--- a/frontend/src/pages/blog/[slug]/index.astro
+++ b/frontend/src/pages/blog/[slug]/index.astro
@@ -18,6 +18,7 @@ export interface Props {
   publishDate: string;
   headerImage: ImageObject;
   summary: string;
+  readTime: string;
   twitterCardType: 'summary' | 'summary_large_image' | 'player' | 'app';
   linkPreviewDescription: string;
   linkPreviewImage: ImageObject;
@@ -46,6 +47,7 @@ const {
   publishDate,
   headerImage,
   summary,
+  readTime,
   twitterCardType,
   linkPreviewDescription,
   linkPreviewImage,
@@ -67,11 +69,15 @@ const { slug } = Astro.params;
     image={linkPreviewImage ?? headerImage}
     twitterCardType={twitterCardType}
   />
-  <article class="max-w-prose m-auto">
+  <article class="max-w-prose m-auto pt-8">
     <header class="mb-5">
       <PageTitle class="mb-2 break-words">{title}</PageTitle>
       <BlogPostSubtitle content={subtitle} />
-      <time datetime={publishDate} class="text-xl">{publishDate}</time>
+      <span class="text-lg sm:text-xl">
+        <time datetime={publishDate}>{publishDate}</time>
+        &bull;
+        {readTime}
+      </span>
     </header>
     <BlogPostContent content={content} />
     <hr class="my-5 border-t border-primary-700" />
@@ -81,13 +87,13 @@ const { slug } = Astro.params;
     <nav class="flex gap-4">
       <ButtonLink
         href="/blog"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Blog
       </ButtonLink>
       <ButtonLink
         href="/library"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Library
       </ButtonLink>
diff --git a/frontend/src/pages/blog/index.astro b/frontend/src/pages/blog/index.astro
index 8140a5d..d720178 100644
--- a/frontend/src/pages/blog/index.astro
+++ b/frontend/src/pages/blog/index.astro
@@ -28,7 +28,7 @@ const posts: {
       posts.map(({ title, slug, publishDate, summary }) => (
         <CardLink link={`/blog/${slug}`}>
           <article class="flex flex-col">
-            <span class="text-lg md:text-xl font-medium break-words text-primary-700">
+            <span class="text-lg sm:text-xl font-medium break-words text-primary-700">
               {title}
             </span>
             <time datetime={publishDate} class="text-sm text-primary-800">
@@ -44,13 +44,13 @@ const posts: {
     <nav class="flex gap-4">
       <ButtonLink
         href="/home"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Home
       </ButtonLink>
       <ButtonLink
         href="/library"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Library
       </ButtonLink>
diff --git a/frontend/src/pages/blogue/[slug]/index.astro b/frontend/src/pages/blogue/[slug]/index.astro
index 3d40cfd..f4192a9 100644
--- a/frontend/src/pages/blogue/[slug]/index.astro
+++ b/frontend/src/pages/blogue/[slug]/index.astro
@@ -18,6 +18,7 @@ export interface Props {
   publishDate: string;
   headerImage: ImageObject;
   summary: string;
+  readTime: string;
   twitterCardType: 'summary' | 'summary_large_image' | 'player' | 'app';
   linkPreviewDescription: string;
   linkPreviewImage: ImageObject;
@@ -46,6 +47,7 @@ const {
   publishDate,
   headerImage,
   summary,
+  readTime,
   twitterCardType,
   linkPreviewDescription,
   linkPreviewImage,
@@ -67,11 +69,15 @@ const { slug } = Astro.params;
     image={linkPreviewImage ?? headerImage}
     twitterCardType={twitterCardType}
   />
-  <article class="max-w-prose m-auto">
+  <article class="max-w-prose m-auto pt-8">
     <header class="mb-5">
       <PageTitle class="mb-2 break-words">{title}</PageTitle>
       <BlogPostSubtitle content={subtitle} />
-      <time datetime={publishDate} class="text-xl">{publishDate}</time>
+      <span class="text-lg sm:text-xl">
+        <time datetime={publishDate}>{publishDate}</time>
+        &bull;
+        {readTime}
+      </span>
     </header>
     <BlogPostContent content={content} />
     <hr class="my-5 border-t border-primary-700" />
@@ -81,13 +87,13 @@ const { slug } = Astro.params;
     <nav class="flex gap-4">
       <ButtonLink
         href="/blogue"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Blog
       </ButtonLink>
       <ButtonLink
         href="/biblioteca"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Biblioteca
       </ButtonLink>
diff --git a/frontend/src/pages/blogue/index.astro b/frontend/src/pages/blogue/index.astro
index b51219e..8a91edd 100644
--- a/frontend/src/pages/blogue/index.astro
+++ b/frontend/src/pages/blogue/index.astro
@@ -27,7 +27,7 @@ const posts: {
       posts.map(({ title, slug, publishDate, summary }) => (
         <CardLink link={`/blogue/${slug}`}>
           <article class="flex flex-col">
-            <span class="text-lg md:text-xl font-medium break-words text-primary-700">
+            <span class="text-lg sm:text-xl font-medium break-words text-primary-700">
               {title}
             </span>
             <time datetime={publishDate} class="text-sm text-primary-800">
@@ -43,13 +43,13 @@ const posts: {
     <nav class="flex gap-4">
       <ButtonLink
         href="/"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Início
       </ButtonLink>
       <ButtonLink
         href="/biblioteca"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Biblioteca
       </ButtonLink>
diff --git a/frontend/src/pages/home.astro b/frontend/src/pages/home.astro
index 3b7addf..13869ec 100644
--- a/frontend/src/pages/home.astro
+++ b/frontend/src/pages/home.astro
@@ -73,13 +73,13 @@ import Layout from '../layouts/Layout.astro';
     <nav class="flex gap-4">
       <ButtonLink
         href="/blog"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Blog
       </ButtonLink>
       <ButtonLink
         href="/library"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Library
       </ButtonLink>
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 8ba59d3..528ac37 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -79,13 +79,13 @@ import Layout from '../layouts/Layout.astro';
     <nav class="flex gap-4">
       <ButtonLink
         href="/blogue"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Blogue
       </ButtonLink>
       <ButtonLink
         href="/biblioteca"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Biblioteca
       </ButtonLink>
diff --git a/frontend/src/pages/library/index.astro b/frontend/src/pages/library/index.astro
index 9c5ef37..3e37c15 100644
--- a/frontend/src/pages/library/index.astro
+++ b/frontend/src/pages/library/index.astro
@@ -37,7 +37,7 @@ const libraryItems: {
     {
       libraryItems.map(({ title, description, link, checkedOut }) => (
         <CardLink link={link}>
-          <span class="text-lg md:text-xl font-medium break-words text-primary-700 block mb-3">
+          <span class="text-lg sm:text-xl font-medium break-words text-primary-700 block mb-3">
             {title}
           </span>
           <p class="mb-5">{description}</p>
@@ -50,13 +50,13 @@ const libraryItems: {
     <nav class="flex gap-4">
       <ButtonLink
         href="/blog"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Blog
       </ButtonLink>
       <ButtonLink
         href="/home"
-        class="text-3xl flex-1 py-2 flex justify-center px-2"
+        class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
       >
         Home
       </ButtonLink>