diff --git a/src/components/BlogSideBar.astro b/src/components/BlogSideBar.astro
index ccc7a5b..b0932f4 100644
--- a/src/components/BlogSideBar.astro
+++ b/src/components/BlogSideBar.astro
@@ -1,46 +1,40 @@
 ---
 import { getTags } from "../helpers/getTags";
 import TagItem from "./TagItem.astro";
-const tags = await getTags()
+const tags = await getTags();
 
-const tagsElement = tags.map((tag) => ({label: tag, url: `/tags/${tag}`}))
+const tagsElement = tags.map((tag) => ({ label: tag, url: `/tags/${tag}` }));
 ---
+
 <div class="side-bar">
   <section>
     <p>tags 🏷️</p>
     <ul class="tags">
-      {
-        tagsElement.map((tag)=> 
-        <TagItem tag={tag}/>)
-      }
+      {tagsElement.map((tag) => <TagItem tag={tag} />)}
     </ul>
   </section>
   <section>
     <p>Weekly Reading 📰</p>
-    <ul>
-      <li>
-        <a data-external="external" href="https://www.google.com">
-          How read a nice stuff
-        </a>
-      </li>
+    <ul class="readings">
       <li>
-        <a data-external="external" href="https://www.google.com">
-          How read a nice stuff
-        </a>
-      </li>
-      <li>
-        <a data-external="external" href="https://www.google.com">
-          How read a nice stuff
+        <a
+          data-external="external"
+          href="https://www.joshwcomeau.com/react/use-deferred-value/"
+        >
+          Snappy UI Optimization with useDeferredValue
         </a>
       </li>
     </ul>
   </section>
   <section>
     <p>Bedside table 📖</p>
-    <ul>
+    <ul class="readings">
       <li>
-        <span >
-          <a data-external="external" href="https://search.worldcat.org/title/1020032679">
+        <span>
+          <a
+            data-external="external"
+            href="https://search.worldcat.org/title/1020032679"
+          >
             Crime and Punishment
           </a>
         </span>
@@ -53,7 +47,7 @@ const tagsElement = tags.map((tag) => ({label: tag, url: `/tags/${tag}`}))
     display: none;
   }
 
-  @media (min-width: 1200px){
+  @media (min-width: 1200px) {
     .side-bar {
       display: flex;
       flex-direction: column;
@@ -61,9 +55,18 @@ const tagsElement = tags.map((tag) => ({label: tag, url: `/tags/${tag}`}))
     }
   }
 
-  .tags{
+  .tags {
     display: flex;
     column-gap: var(--space-small);
     flex-wrap: wrap;
   }
-</style>
\ No newline at end of file
+
+  .readings {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-small);
+  }
+  .readings a {
+    font-size: var(--font-size-4);
+  }
+</style>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 71c2729..b9849fa 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -4,8 +4,8 @@ import "../styles/reset.css";
 import "../styles/typography.css";
 import "../styles/global.css";
 import Header from "../components/Header.astro";
-import '@fontsource-variable/montserrat';
-import '@fontsource/ibm-plex-mono'
+import "@fontsource-variable/montserrat";
+import "@fontsource/ibm-plex-mono";
 import PageFooter from "../components/PageFooter.astro";
 import Stripes from "../components/Stripes.astro";
 
@@ -27,10 +27,7 @@ const { title } = Astro.props;
       name="description"
       content="Web developer. This is my personal blog, here will learn about me, my work and my projects."
     />
-    <meta
-      name="keywords"
-      content="personal, web development, work"
-    />
+    <meta name="keywords" content="personal, web development, work" />
   </head>
   <body>
     <div class="layout">
@@ -47,14 +44,14 @@ const { title } = Astro.props;
 </html>
 
 <style is:global>
-.layout {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.main {
-  flex-grow: 1;
-  margin-bottom: var(--space-xxl);
-}
-
+  .layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .main {
+    flex-grow: 1;
+    padding-top: var(--space-xxl);
+    margin-bottom: var(--space-xxl);
+  }
 </style>
