diff --git a/public/styles/posts.css b/public/styles/posts.css
index d3c16ef..67f35ae 100644
--- a/public/styles/posts.css
+++ b/public/styles/posts.css
@@ -9,7 +9,7 @@ li {
 
 .toc-column {
   position: absolute;
-  left: 2rem;
+  left: calc((100vw - min(65vw, 800px)) / 4 - 100px);
   top: 0;
   width: 200px;
   padding-top: 190px;
@@ -78,6 +78,9 @@ article h3,
 .post-article h3 {
   font-weight: normal;
   position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 article h1,
@@ -124,6 +127,10 @@ article h3::before,
   margin-right: 0.5em;
 }
 
+.date {
+  font-size: 0.67em;
+}
+
 article img {
   display: block;
   margin: 2rem auto;
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index b2e97ee..b567f49 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -22,7 +22,7 @@ const tocHeadings = headings.filter((h) => h.depth <= 2);
         {tocHeadings.map((heading) => (
           <a
             href={`#${heading.slug}`}
-            class={heading.depth === 2 ? "sub" : "main"}
+            class={heading.depth === 1 ? "h1-link" : "h2-link"}
           >
             {heading.text}
           </a>
@@ -49,6 +49,8 @@ const tocHeadings = headings.filter((h) => h.depth <= 2);
     flex-direction: column;
     gap: 0.3rem;
     align-items: flex-start;
+    margin: 0;
+    padding: 0;
   }
 
   .toc-nav a {
@@ -62,11 +64,11 @@ const tocHeadings = headings.filter((h) => h.depth <= 2);
     text-decoration: underline;
   }
 
-  .toc-nav a.main {
+  .toc-nav a.h1-link {
     padding-left: 0;
   }
 
-  .toc-nav a.sub {
+  .toc-nav a.h2-link {
     padding-left: 1.5rem;
   }