diff --git a/app/categories/[categorySlug]/page.tsx b/app/categories/[categorySlug]/page.tsx
new file mode 100644
index 0000000..58e8eec
--- /dev/null
+++ b/app/categories/[categorySlug]/page.tsx
@@ -0,0 +1,48 @@
+import { metadata } from '@/app/metadata'
+import { getCategoryBySlug, getPostsByCategory } from '@/lib/categories'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+type CategoryPageProps = {
+  params: Promise<{
+    categorySlug: string
+  }>
+}
+
+export async function generateMetadata({ params }: CategoryPageProps): Promise<Metadata> {
+  const { categorySlug } = await params
+  const category = getCategoryBySlug(categorySlug)
+
+  return {
+    title: `${category} | ${metadata.title!.toString()}`,
+    description: 'List of posts in this category',
+  }
+}
+
+export default async function CategoryPage({ params }: CategoryPageProps) {
+  const { categorySlug } = await params
+  const posts = getPostsByCategory(categorySlug)
+  const category = getCategoryBySlug(categorySlug)
+
+  if (!category) {
+    return (
+      <main>
+        <h1>Category not found</h1>
+        <Link href="/categories">Back to categories</Link>
+      </main>
+    )
+  }
+
+  return (
+    <main>
+      <h1>Category: {category}</h1>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.slug}>
+            <Link href={`/posts/${post.slug}`}>{post.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  )
+}
diff --git a/app/categories/[category]/page.tsx b/app/categories/[category]/page.tsx
deleted file mode 100644
index 7189e98..0000000
--- a/app/categories/[category]/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { getAllPostsMeta } from "@/lib/posts"
-import type { Metadata } from "next"
-import Link from "next/link"
-
-type CategoryPageProps = {
-  params: Promise<{
-    category: string
-  }>
-}
-
-export async function generateMetadata({
-  params,
-}: CategoryPageProps): Promise<Metadata> {
-  const { category } = await params
-  return { title: `Category: ${category}`, description: "List of posts in this category" }
-}
-
-export default async function CategoryPage({
-  params,
-}: CategoryPageProps) {
-  const { category } = await params
-  const posts = getAllPostsMeta()
-  return (
-    <main>
-      <h1>Category: {category}</h1>
-      <ul>
-        {posts
-          .filter((post) => post.categories.includes(category))
-          .map((post) => (
-            <li key={post.slug}>
-              <Link href={`/${post.slug}`}>{post.title}</Link>
-            </li>
-          ))}
-      </ul>
-    </main>
-  )
-}
diff --git a/app/categories/page.tsx b/app/categories/page.tsx
index 24a42d5..73ddf6f 100644
--- a/app/categories/page.tsx
+++ b/app/categories/page.tsx
@@ -1,34 +1,43 @@
-import { getAllPostsMeta } from "@/lib/posts"
-import type { Metadata } from "next"
-import Link from "next/link"
+import { getAllCategories } from '@/lib/categories'
+import { getAllPostsMeta } from '@/lib/posts'
+import { slugify } from '@/utils/slug'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { metadata } from '@/app/metadata'
 
 export async function generateMetadata(): Promise<Metadata> {
-  return { title: "Categories", description: "List of categories" }
+  return { title: `Categories | ${metadata.title!.toString()}`, description: 'List of categories' }
 }
 
 export default function CategoriesPage() {
+  const categories = getAllCategories()
   const posts = getAllPostsMeta()
+
   return (
-    <main>
-      <h1>Categories</h1>
-      <ul>
-        {Array.from(new Set(posts.flatMap((post) => post.categories))).map(
-          (category) => (
+    <div className="flex w-full">
+      <main className="max-w-3xl mx-auto px-4 py-8 lg:py-16 w-full">
+        <h1 className="text-3xl font-bold">Categories</h1>
+        <ul>
+          {Object.keys(categories).map((category) => (
             <li key={category}>
-              <h2>{category}</h2>
+              <Link href={`/categories/${slugify(category)}`}>
+                {category} ({categories[category]})
+              </Link>
+
               <ul>
                 {posts
-                  .filter((post) => post.categories.includes(category))
+                  .filter((post) => post.category === category)
                   .map((post) => (
                     <li key={post.slug}>
-                      <Link href={`/${post.slug}`}>{post.title}</Link>
+                      <Link href={`/posts/${post.slug}`}>{post.title}</Link>
                     </li>
                   ))}
               </ul>
             </li>
-          ),
-        )}
-      </ul>
-    </main>
+          ))}
+        </ul>
+      </main>
+      <div className="w-80" />
+    </div>
   )
 }
diff --git a/app/feed.xml/route.ts b/app/feed.xml/route.ts
index 1cf9099..52dab6f 100644
--- a/app/feed.xml/route.ts
+++ b/app/feed.xml/route.ts
@@ -1,4 +1,4 @@
-import meta from "@/const/meta"
+import { metadata } from "@/app/metadata"
 import { getAllPostsMeta } from "@/lib/posts"
 
 const SITE_URL = process.env.SITE_URL || "http://localhost:3000"
@@ -12,7 +12,7 @@ function escapeXml(str: string) {
     .replace(/'/g, "&apos;")
 }
 
-export async function GET() {
+export async function GET(req: Request) {
   const posts = getAllPostsMeta()
 
   const updated =
@@ -39,18 +39,24 @@ export async function GET() {
 
   const feed = `<?xml version="1.0" encoding="UTF-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom">
-  <title>${escapeXml(meta.title)}</title>
   <id>${SITE_URL}/</id>
+  <title>${escapeXml(metadata.title!.toString())}</title>
   <updated>${updated}</updated>
   <author>
-    <name>${escapeXml("d")}</name>
+    <name>${escapeXml(metadata.creator!.toString())}</name>
   </author>
   <link href="${SITE_URL}/feed" rel="self" type="application/atom+xml" />
   <link href="${SITE_URL}" rel="alternate" type="text/html" />
+  <rights> © ${new Date().getFullYear()} Frank Borisjuk </rights>
   ${entries}
 </feed>`
 
+  const accept = req.headers.get("accept") || ""
+  const contentType = accept.includes("application/atom+xml")
+    ? "application/atom+xml; charset=utf-8"
+    : "application/xml; charset=utf-8"
+
   return new Response(feed, {
-    headers: { "Content-Type": "application/atom+xml; charset=utf-8" },
+    headers: { "Content-Type": contentType },
   })
 }
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 2025da7..fd6949c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,14 +4,16 @@
 @theme {
   --color-bg: #040404;
   --color-fg: #e0e0e0;
-  --color-fg-dim: #909090;
+  --color-fg-dim: #b0b0b0;
   --color-accent: #ef1f1f;
   --color-border: #374151;
 
   --color-warning: #facc15;
   --color-tip: #22c55e;
   --color-info: #3b82f6;
-  --color-note: #8b5cf6;
+  --color-quote: #f97316;
+
+  --font-sans: 'Space Grotesk', sans-serif;
 }
 
 .hljs {
@@ -22,19 +24,27 @@ pre code.hljs {
   @apply p-0;
 }
 
+* {
+  @apply scroll-smooth;
+}
+
 body {
   @apply bg-bg text-fg;
 }
 
 .prose {
-  @apply space-y-4;
+  @apply space-y-4 text-fg-dim;
 
   ul {
-    @apply list-disc list-inside;
+    @apply list-disc;
   }
 
   ol {
-    @apply list-decimal list-inside;
+    @apply list-decimal;
+  }
+
+  ul, ol {
+    @apply list-outside;
   }
 
   li {
@@ -75,6 +85,10 @@ tbody tr:nth-child(even) {
   @apply bg-fg/5;
 }
 
+tbody tr:hover {
+  @apply bg-fg/10;
+}
+
 /* ── Definition lists ─────────────────────────────── */
 
 dl {
@@ -125,7 +139,7 @@ dd {
 .prose h4,
 .prose h5,
 .prose h6 {
-  @apply font-bold mb-2;
+  @apply font-bold mb-2 text-fg;
 
   &::before {
     @apply content-['#'] text-accent mr-1;
@@ -183,7 +197,7 @@ hr {
 }
 
 .note {
-  @apply border-l-4 pl-4 py-1 text-fg-dim bg-accent/20;
+  @apply border-l-4 pl-4 py-2 text-fg-dim bg-border/20;
 
   &.warning {
     @apply border-warning bg-warning/20 text-warning;
@@ -196,6 +210,10 @@ hr {
   &.info {
     @apply border-info bg-info/20 text-info;
   }
+
+  &.quote {
+    @apply border-quote bg-quote/20 text-quote;
+  }
 }
 
 .no-js .js-only {
diff --git a/app/layout.tsx b/app/layout.tsx
index 009bad6..6c4d75b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,36 +1,22 @@
-import { Geist, Geist_Mono } from 'next/font/google'
-import './globals.css'
-import { Metadata } from 'next'
-import meta from '@/const/meta'
+import { Space_Grotesk } from 'next/font/google'
 import Script from 'next/script'
 import { Sidebar } from '@/components/layout/Sidebar'
+import { metadata } from './metadata'
+import './globals.css'
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
+const spaceGrotesk = Space_Grotesk({
   subsets: ['latin'],
+  variable: '--font-sans',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
 })
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-})
-
-export const metadata: Metadata = {
-  title: meta.title,
-  description: meta.description,
-  creator: meta.creator,
-}
-
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased no-js`}
-    >
+    <html lang="en" className={`${spaceGrotesk.variable} h-full antialiased no-js`}>
       <Script
         dangerouslySetInnerHTML={{
           __html: `document.documentElement.classList.replace('no-js','js')`,
@@ -43,3 +29,5 @@ export default function RootLayout({
     </html>
   )
 }
+
+export { metadata }
diff --git a/app/metadata.tsx b/app/metadata.tsx
new file mode 100644
index 0000000..cbb1393
--- /dev/null
+++ b/app/metadata.tsx
@@ -0,0 +1,7 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Ephemeris",
+  description: "A blog about me and my interests",
+  creator: "hangerthem",
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 24e9158..a70dec9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,19 +1,63 @@
-import Link from 'next/link';
-import { getAllPostsMeta } from '@/lib/posts';
+import { getAllPostsMeta } from '@/lib/posts'
+import { Post } from '@/components/common/Post'
+import Link from 'next/link'
 
 export default function BlogIndex() {
-  const posts = getAllPostsMeta();
+  const posts = getAllPostsMeta()
+
+  const rest = posts.slice(1)
+  const rows = []
+  for (let i = 0; i < rest.length; i += 2) {
+    rows.push(rest.slice(i, i + 2))
+  }
+
   return (
-    <main>
-      <h1>Blog</h1>
-      <ul>
-        {posts.map((post) => (
-          <li key={post.slug}>
-            <Link href={`/posts/${post.slug}`}>{post.title}</Link>
-            <p>{post.description}</p>
-          </li>
-        ))}
-      </ul>
-    </main>
-  );
-}
\ No newline at end of file
+    <>
+      <main className="max-w-3xl mx-auto px-4 py-8 lg:py-16">
+        <section>
+          {posts.length === 0 ? (
+            <div className="rounded-xl border border-border p-6 text-fg-dim">
+              No published posts yet.
+            </div>
+          ) : (
+            <>
+              <Post post={posts[0]} isLatest />
+              <div className="border-t border-border my-6" aria-hidden="true"></div>
+              <div className="flex flex-col gap-8 mt-4">
+                {rows.map((row) => {
+                  const rowHasImage = row.some((p) => p.coverImage)
+                  return (
+                    <div key={row[0].slug} className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                      {row.map((post) => (
+                        <Post post={post} key={post.slug} showImageSlot={rowHasImage} />
+                      ))}
+                    </div>
+                  )
+                })}
+              </div>
+            </>
+          )}
+        </section>
+      </main>
+      <aside className="w-80 hidden lg:block px-4 py-8 lg:py-16">
+        <div className="sticky top-8">
+          <h2 className="text-xl font-bold mb-4">Recently updated</h2>
+          <ul className="flex flex-col gap-2 ml-2">
+            {posts
+              .toSorted(
+                (a, b) =>
+                  new Date(b.updated ?? b.date).getTime() - new Date(a.updated ?? a.date).getTime(),
+              )
+              .map((post) => (
+                <li key={post.slug} className="text-sm text-fg-dim">
+                  <Link href={`/posts/${post.slug}`} className="hover:underline">
+                    {post.title}
+                  </Link>
+                </li>
+              ))}
+          </ul>
+        </div>
+      </aside>
+    </>
+  )
+}
diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 90f7453..b9870fe 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -1,7 +1,10 @@
+import { metadata } from '@/app/metadata'
 import { ImageWrapper } from '@/components/common/ImageWrapper'
+import { ShareLinks } from '@/components/common/ShareLinks'
 import { TableOfContents } from '@/components/common/TableOfContents'
 import { getAllPostSlugs, getPostBySlug } from '@/lib/posts'
 import type { Metadata } from 'next'
+import Link from 'next/link'
 
 export async function generateStaticParams() {
   return getAllPostSlugs().map((slug) => ({ slug }))
@@ -16,7 +19,7 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { slug } = await params
   const { meta } = await getPostBySlug(slug)
-  return { title: meta.title, description: meta.description }
+  return { title: `${meta.title}  | ${metadata.title!.toString()}`, description: meta.description }
 }
 
 export default async function Post({ params }: { params: Promise<{ slug: string }> }) {
@@ -24,31 +27,83 @@ export default async function Post({ params }: { params: Promise<{ slug: string
   const { meta, content, tableOfContents } = await getPostBySlug(slug)
 
   return (
-    <article className="flex w-full">
-      <main className="max-w-3xl mx-auto px-4 py-8 lg:py-16">
-        {meta.categories.length > 0 && (
-          <div className="flex flex-wrap gap-2 mb-2">
-            {meta.categories.map((category) => (
-              <span
-                key={category}
-                className="bg-accent/20 text-accent px-2 py-1 rounded-full text-sm"
-              >
-                {category}
-              </span>
-            ))}
-          </div>
+    <main className="flex w-full">
+      <article className="max-w-3xl mx-auto px-4 py-8 lg:py-16">
+        {meta.category && (
+          <Link
+            href={`/categories/${meta.category.toLowerCase()}`}
+            className="text-accent hover:underline font-sm mb-2 block"
+          >
+            {meta.category}
+          </Link>
         )}
-        <h1 className="text-5xl font-bold mb-4">{meta.title}</h1>
-        <span>{meta.readingTimeText}</span>
-        <time>{new Date(meta.date).toLocaleDateString()}</time>
-        <p>{meta.description}</p>
+        <h1 className="text-4xl font-bold mb-4">{meta.title}</h1>
+        <div className="flex items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-4 text-sm">
+          <div className="flex items-center gap-2">
+            <span>Posted</span>
+            <time
+              dateTime={meta.date}
+              title={new Date(meta.date).toLocaleString()}
+              className="font-semibold"
+            >
+              {new Date(meta.date).toLocaleDateString(undefined, {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </time>
+          </div>
+          <span>&middot;</span>
+          {meta.updated && (
+            <>
+              <div className="flex items-center gap-2">
+                <span>Updated</span>
+                <time
+                  dateTime={meta.updated}
+                  title={new Date(meta.updated).toLocaleString()}
+                  className="font-semibold"
+                >
+                  {new Date(meta.updated).toLocaleDateString(undefined, {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                  })}
+                </time>
+              </div>
+              <span>&middot;</span>
+            </>
+          )}
+          <span>{meta.readingTimeText}</span>
+        </div>
+        <p className="text-fg text-lg mb-4">{meta.description}</p>
         {meta.coverImage && <ImageWrapper src={meta.coverImage} alt={meta.coverImageAlt} />}
         <div className="prose">{content}</div>
-      </main>
+
+        {meta.tags && (
+          <div className="mt-6 border-t border-border pt-4 flex gap-2 items-center flex-wrap">
+            <h2 className="text-lg font-bold">Tags</h2>
+            <div className="flex flex-wrap gap-1">
+              {meta.tags.map((tag) => (
+                <span key={tag} className="bg-accent/20 text-accent px-3 py-1 rounded-full text-xs">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="mt-8 mx-auto flex">
+          <ShareLinks
+            url={process.env.SITE_URL + `/posts/${slug}`}
+            title={meta.title}
+            description={meta.description}
+          />
+        </div>
+      </article>
 
       <aside className="hidden lg:block w-80">
         <TableOfContents items={tableOfContents} />
       </aside>
-    </article>
+    </main>
   )
 }
diff --git a/bun.lock b/bun.lock
index 47b30eb..a81fa6c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -27,6 +27,7 @@
         "remark-math": "^6.0.0",
         "remark-parse": "^11.0.0",
         "remark-rehype": "^11.1.2",
+        "simple-icons": "^16.28.0",
         "tailwind-merge": "^3.6.0",
         "unified": "^11.0.5",
         "unist-util-visit": "^5.0.0",
@@ -1120,6 +1121,8 @@
 
     "side-channel-weakmap": ["side-channel-weakmap@1.0.2", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "get-intrinsic": "^1.2.5", "object-inspect": "^1.13.3", "side-channel-map": "^1.0.1" } }, "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A=="],
 
+    "simple-icons": ["simple-icons@16.28.0", "", {}, "sha512-sQPR5AtK/ijRjou7zw7mlLp08oB6FH7i0lOy5XJ2zp9mJs/yejgiOn7KvQoe2q4YJIx6VmgUSW5AOefebPt5kg=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
diff --git a/components/common/BlockquoteWrapper.tsx b/components/common/BlockquoteWrapper.tsx
index ed55fd8..e655dea 100644
--- a/components/common/BlockquoteWrapper.tsx
+++ b/components/common/BlockquoteWrapper.tsx
@@ -1,5 +1,5 @@
 import type { NoteType } from '@/types/Note.type'
-import { Lightbulb, FileWarning, TriangleAlert } from 'lucide-react'
+import { Lightbulb, FileWarning, TriangleAlert, Quote } from 'lucide-react'
 
 type BlockquoteWrapperProps = {
   type?: NoteType
@@ -10,6 +10,7 @@ const noteTypeIcons: Record<NoteType, React.ReactNode> = {
   warning: <TriangleAlert className="w-4 h-4" />,
   tip: <Lightbulb className="w-4 h-4" />,
   info: <FileWarning className="w-4 h-4" />,
+  quote: <Quote className="w-4 h-4" />
 }
 
 export function BlockquoteWrapper({ type, children }: BlockquoteWrapperProps) {
diff --git a/components/common/CodeWrapper.tsx b/components/common/CodeWrapper.tsx
index e70a944..f5c7d85 100644
--- a/components/common/CodeWrapper.tsx
+++ b/components/common/CodeWrapper.tsx
@@ -41,7 +41,7 @@ export function CodeWrapper({ language, children }: CodeWrapperProps) {
       <div className="flex">
         <div className="select-none text-right py-2 px-3 border-r border-border text-white font-mono text-sm leading-6 min-w-6">
           {Array.from({ length: lineCount }, (_, i) => (
-            <span className="block" key={i}>
+            <span className="block text-fg-dim" key={i}>
               {i + 1}
             </span>
           ))}
diff --git a/components/common/CopyButton.tsx b/components/common/CopyButton.tsx
index 2c2823c..2071c99 100644
--- a/components/common/CopyButton.tsx
+++ b/components/common/CopyButton.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { ButtonHTMLAttributes } from 'react'
+import { ButtonHTMLAttributes, useRef } from 'react'
 import { Copy } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -9,14 +9,27 @@ type CopyButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 }
 
 export function CopyButton({ textToCopy, className, ...props }: CopyButtonProps) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+
   const handleCopy = () => {
     navigator.clipboard.writeText(textToCopy)
+    const button = buttonRef.current
+    if (button) {
+      const original = button.innerHTML
+      button.innerHTML = 'Copied!'
+      button.disabled = true
+      setTimeout(() => {
+        button.innerHTML = original
+        button.disabled = false
+      }, 2000)
+    }
   }
 
   return (
     <button
-      className={cn('text-fg-dim hover:text-fg transition-colors js-only', className)}
+      className={cn('text-fg-dim hover:text-fg transition-colors js-only text-xs cursor-pointer disabled:cursor-default disabled:hover:text-fg-dim', className)}
       onClick={handleCopy}
+      ref={buttonRef}
       {...props}
     >
       <Copy className="w-4 h-4" />
diff --git a/components/common/ImageWrapper.tsx b/components/common/ImageWrapper.tsx
index 713eaf7..9ff02ae 100644
--- a/components/common/ImageWrapper.tsx
+++ b/components/common/ImageWrapper.tsx
@@ -9,8 +9,8 @@ type ImageWrapperProps = {
 
 export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
   return (
-    <figure className="flex flex-col items-center gap-1 w-full">
-      <div className="border border-border rounded-xl w-full overflow-hidden">
+    <figure className={cn('flex flex-col items-center gap-1 mb-4', isListing ? 'h-60' : 'w-full')}>
+      <div className="border border-border rounded-xl w-full overflow-hidden flex-1">
         <div
           className="flex items-center gap-2 px-2 h-6 border-b border-border w-full bg-fg/10"
           aria-hidden="true"
@@ -29,7 +29,7 @@ export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
           height={isListing ? 240 : 400}
           quality={100}
           priority={true}
-          className={cn('w-auto mx-auto object-cover', isListing ? 'h-60' : '')}
+          className="w-auto mx-auto object-cover h-full"
         />
       </div>
       {!isListing && alt && (
diff --git a/components/common/Post.tsx b/components/common/Post.tsx
new file mode 100644
index 0000000..50dc928
--- /dev/null
+++ b/components/common/Post.tsx
@@ -0,0 +1,60 @@
+import { ImageWrapper } from '@/components/common/ImageWrapper'
+import { cn } from '@/utils/cn'
+import { PostMeta } from '@/types/Post.type'
+import Link from 'next/link'
+import { dateFormatter } from '@/utils/time'
+
+type PostProps = {
+  post: PostMeta
+  isLatest?: boolean
+  showImageSlot?: boolean
+}
+
+export function Post({ post, isLatest, showImageSlot }: PostProps) {
+  const {
+    title,
+    description,
+    author,
+    category,
+    date,
+    coverImage,
+    coverImageAlt,
+    readingTimeText,
+    slug,
+  } = post
+
+  if (!title || !description || !author || !date) {
+    return null
+  }
+
+  const publishedAt = new Date(date)
+
+  return (
+    <article className={cn('flex flex-col gap-4', isLatest && 'items-center md:flex-row')}>
+      {(isLatest || showImageSlot) && (
+        <div className={isLatest && coverImage ? 'flex-1' : 'h-60'}>
+          {coverImage && <ImageWrapper src={coverImage} alt={coverImageAlt ?? title} isListing />}
+        </div>
+      )}
+      <div className={cn('flex flex-col gap-1', isLatest && 'flex-1')}>
+        {isLatest && <span className="text-xs font-mono text-accent">Latest post</span>}
+        {category && (
+          <div className="font-mono text-xs flex gap-1 flex-wrap text-fg-dim mt-1 categories">
+            <span>{category}</span>
+          </div>
+        )}
+        <h2 className="text-2xl font-bold">
+          <Link href={`/posts/${slug}`} className="hover:underline">
+            {title}
+          </Link>
+        </h2>
+        <p className="text-fg-dim font-mono text-sm">{description}</p>
+        <div className="flex gap-2 items-center text-fg-dim text-xs font-mono mt-1">
+          <time dateTime={publishedAt.toISOString()}>{dateFormatter.format(publishedAt)}</time>
+          <span>&middot;</span>
+          <span>{readingTimeText}</span>
+        </div>
+      </div>
+    </article>
+  )
+}
diff --git a/components/common/ShareLinks.tsx b/components/common/ShareLinks.tsx
new file mode 100644
index 0000000..f06df46
--- /dev/null
+++ b/components/common/ShareLinks.tsx
@@ -0,0 +1,50 @@
+import { siBluesky, siX, siFacebook, siReddit } from 'simple-icons';
+import { ExternalLink } from '@/components/common/ExternalLink';
+
+type ShareLinksProps = {
+  url: string;
+  title: string;
+  description?: string;
+};
+
+export function ShareLinks({ url, title, description }: ShareLinksProps) {
+  const shareText = `Check out this post: ${title} - ${description}\n\n${url}`;
+
+  const networks = [
+    {
+      name: 'Bluesky',
+      icon: siBluesky,
+      href: `https://bsky.app/intent/compose?text=${encodeURIComponent(shareText)}`,
+    },
+    {
+      name: 'X',
+      icon: siX,
+      href: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`,
+    },
+    {
+      name: 'Facebook',
+      icon: siFacebook,
+      href: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
+    },
+    {
+      name: 'Reddit',
+      icon: siReddit,
+      href: `https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(
+        title,
+      )}&text=${encodeURIComponent(description ?? '')}`,
+    },
+  ];
+
+  return (
+    <div className="flex gap-4 mx-auto">
+      {networks.map(({ name, icon, href }) => (
+        <ExternalLink key={name} href={href}>
+          <svg
+            dangerouslySetInnerHTML={{ __html: icon.svg }}
+            className="inline-block w-6 h-6 mr-1 fill-current hover:text-accent transition-colors"
+          />
+        </ExternalLink>
+      ))}
+    </div>
+  );
+}
diff --git a/components/layout/NavLinks.tsx b/components/layout/NavLinks.tsx
new file mode 100644
index 0000000..b1332b9
--- /dev/null
+++ b/components/layout/NavLinks.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import { cn } from '@/utils/cn'
+import { Folder, Home, Info, Rss, Tags } from 'lucide-react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+type NavItem = {
+  href: string
+  label: string
+  icon: React.ReactNode
+  target?: string
+  rel?: string
+}
+
+const navItems: NavItem[] = [
+  { href: '/', label: 'Home', icon: <Home className="w-4 h-4" /> },
+  { href: '/categories', label: 'Categories', icon: <Folder className="w-4 h-4" /> },
+  { href: '/about', label: 'About', icon: <Info className="w-4 h-4" /> },
+  { href: '/tags', label: 'Tags', icon: <Tags className="w-4 h-4" /> },
+  {
+    href: '/feed.xml',
+    label: 'RSS Feed',
+    icon: <Rss className="w-4 h-4" />,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  },
+]
+
+export function NavLinks() {
+  const pathname = usePathname()
+
+  const isActive = (href: string) => {
+    if (href === '/') {
+      return pathname === href
+    }
+    return pathname?.startsWith(href)
+  }
+
+  return navItems.map((item) => (
+    <li
+      key={item.href}
+      className={cn(
+        'transition-colors rounded-md',
+        isActive(item.href) ? 'text-fg bg-fg/25' : 'text-fg-dim hover:text-fg hover:bg-fg/10',
+      )}
+    >
+      <Link
+        href={item.href}
+        className="flex items-center gap-2 px-2 py-1"
+        target={item.target}
+        rel={item.rel}
+      >
+        {item.icon}
+        {item.label}
+      </Link>
+    </li>
+  ))
+}
diff --git a/components/layout/Sidebar.tsx b/components/layout/Sidebar.tsx
index ed464f5..da0d57e 100644
--- a/components/layout/Sidebar.tsx
+++ b/components/layout/Sidebar.tsx
@@ -1,24 +1,17 @@
+import { metadata } from '@/app/metadata'
+import { NotepadText } from 'lucide-react'
+import { NavLinks } from '@/components/layout/NavLinks'
+
 export function Sidebar() {
   return (
-    <aside className="hidden lg:block w-64 shrink-0">
+    <aside className="hidden lg:block w-64 shrink-0 px-4 bg-fg/5">
       <div className="sticky top-6">
-        <h2 className="text-lg font-bold mb-4">Navigation</h2>
+        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+          <NotepadText className="w-6 h-6" />
+          <span>{metadata.title!.toString()}</span>
+        </h2>
         <ul className="space-y-2">
-          <li>
-            <a href="/" className="text-blue-500 hover:underline">
-              Home
-            </a>
-          </li>
-          <li>
-            <a href="/about" className="text-blue-500 hover:underline">
-              About
-            </a>
-          </li>
-          <li>
-            <a href="/contact" className="text-blue-500 hover:underline">
-              Contact
-            </a>
-          </li>
+          <NavLinks />
         </ul>
       </div>
     </aside>
diff --git a/const/meta.ts b/const/meta.ts
deleted file mode 100644
index 4a51887..0000000
--- a/const/meta.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-const meta = {
-  title: "Ephemeris",
-  description: "A blog about me and my interests",
-  creator: "Frank Borisjuk",
-}
-
-export default meta
diff --git a/content/posts/2024-08-04-first-post..md b/content/posts/first-post.md
similarity index 98%
rename from content/posts/2024-08-04-first-post..md
rename to content/posts/first-post.md
index 66d9d27..7c0e34c 100644
--- a/content/posts/2024-08-04-first-post..md
+++ b/content/posts/first-post.md
@@ -3,7 +3,7 @@ title: First Post
 description: Welcome to my blog! I'm Frank Borisjuk, a software developer with a passion for technology, reading, and gaming. Join me on this journey as I share my thoughts, projects, and passions with you.
 author: hangerthem
 date: 2024-08-04 15:00:00 +0200
-categories: [Introduction]
+category: Introduction
 tags: [introduction, about, tech, books, games]
 math: true
 mermaid: true
diff --git a/content/posts/2024-08-05-self-development.md b/content/posts/self-development.md
similarity index 98%
rename from content/posts/2024-08-05-self-development.md
rename to content/posts/self-development.md
index 6d2834b..08d2bf0 100644
--- a/content/posts/2024-08-05-self-development.md
+++ b/content/posts/self-development.md
@@ -3,13 +3,14 @@ title: Self-Development and Gamification of Life
 description: In this post, I explore the concept of self-development and how gamification can be used to enhance productivity and personal growth. Learn how to turn your life into a game and level up your skills!
 author: hangerthem
 date: 2024-08-05 22:00:00 +0200
-categories: [Personal Development]
+category: "Personal Development"
 tags: [self-development, gamification, productivity, growth]
 math: true
 mermaid: true
 ---
 
-> "The only person you are destined to become is the person you decide to be." - Ralph Waldo Emerson
+> [!QUOTE] "The only person you are destined to become is the person you decide to be."
+> - Ralph Waldo Emerson
 
 Right at the beginning of this post, I want to make it clear that I am not a self-help guru or a life coach. I am just a regular person who is passionate about personal development and enjoys exploring ways to improve myself. In this post, I want to share some thoughts on self-development and how gamification can be used to enhance productivity and personal growth.
 
diff --git a/content/posts/2024-08-20-standard-model.md b/content/posts/standard-model.md
similarity index 99%
rename from content/posts/2024-08-20-standard-model.md
rename to content/posts/standard-model.md
index 2c1b730..b2da1d0 100644
--- a/content/posts/2024-08-20-standard-model.md
+++ b/content/posts/standard-model.md
@@ -2,8 +2,9 @@
 title: Standard Model of Particle Physics
 description: This post provides an overview of the Standard Model of particle physics, including its basic components and interactions. It covers fundamental particles, forces, and the Higgs mechanism, highlighting key concepts and limitations of the model.
 author: hangerthem
-date: 2024-08-20 21:15:00 +0200
-categories: [Physics]
+date: 2023-08-20 21:15:00 +0200
+updated: 2026-08-05 22:00:00 +0200
+category: Physics
 tags:
   [
 		Standard Model,
diff --git a/content/posts/test-post.md b/content/posts/test-post.md
index f097083..c52b90a 100644
--- a/content/posts/test-post.md
+++ b/content/posts/test-post.md
@@ -1,9 +1,9 @@
 ---
 title: Hello, world
 description: This is the first post on the gly.cz blog.
-date: 2026-07-23
+date: 2026-07-23 15:00:00 +0200
 author: hangerthem
-categories: ["blog", "hello world"]
+category: Blog
 coverImage: image.png
 coverImageAlt: A picture of the hello world text in green on a black background.
 math: true
diff --git a/lib/categories.ts b/lib/categories.ts
new file mode 100644
index 0000000..d2ee800
--- /dev/null
+++ b/lib/categories.ts
@@ -0,0 +1,43 @@
+import { findSlugInArray } from "@/utils/slug"
+import { getAllPostsMeta } from "@/lib/posts"
+
+/**
+ * Retrieves all unique categories from the posts and counts the number of posts in each category.
+ * @returns An object where keys are category names and values are the count of posts in that category.
+ */
+export function getAllCategories(): Record<string, number> {
+	const posts = getAllPostsMeta()
+	const categories = {} as Record<string, number>
+
+	posts.forEach((post) => {
+		const category = post.category
+		categories[category] = (categories[category] || 0) + 1
+	})
+
+	return categories
+}
+
+/** * Finds a category by its slug.
+ * @param categorySlug - The slug of the category to find.
+ * @returns The original category name if found, otherwise null.
+ */
+export function getCategoryBySlug(categorySlug: string): string | null {
+	const categories = getAllCategories()
+	return findSlugInArray(categorySlug, Object.keys(categories))
+}
+
+/**
+ * Retrieves all posts that belong to a specific category.
+ * @param categorySlug - The slug of the category to filter posts by.
+ * @returns An array of posts that belong to the specified category.
+ */
+export function getPostsByCategory(categorySlug: string) {
+	const categories = getAllCategories()
+	const category = findSlugInArray(categorySlug, Object.keys(categories))
+
+	if (!category) {
+		return []
+	}
+
+	return getAllPostsMeta().filter((post) => post.category === category)
+}
\ No newline at end of file
diff --git a/lib/posts.tsx b/lib/posts.tsx
index 3a4612f..d1f9898 100644
--- a/lib/posts.tsx
+++ b/lib/posts.tsx
@@ -24,6 +24,7 @@ import type { NoteType } from '@/types/Note.type'
 import { rehypeMark } from './rehype-mark'
 import { rehypeDefinition } from './rehype-definition'
 import { slugify } from '@/utils/slug'
+import { PostMeta } from '@/types/Post.type'
 
 const postsDirectory = path.join(process.cwd(), 'content/posts')
 
@@ -38,21 +39,6 @@ function getTextContent(node: ReactNode): string {
   return ''
 }
 
-export interface PostMeta {
-  slug: string
-  title: string
-  description: string
-  author: string
-  date: string
-  categories: string[]
-  tags: string[]
-  math: boolean
-  mermaid: boolean
-  readingTimeText: string
-  coverImage?: string
-  coverImageAlt?: string
-}
-
 export function getAllPostSlugs(): string[] {
   return fs
     .readdirSync(postsDirectory)
@@ -64,8 +50,12 @@ export function getAllPostsMeta(): PostMeta[] {
   return getAllPostSlugs()
     .map((slug) => {
       const fullPath = path.join(postsDirectory, `${slug}.md`)
-      const { data } = matter(fs.readFileSync(fullPath, 'utf8'))
-      return Object.assign({ slug }, data as Omit<PostMeta, 'slug'>)
+      const { data, content } = matter(fs.readFileSync(fullPath, 'utf8'))
+      const readingTimeText = readingTime(content).text
+      return Object.assign({ slug }, {
+        ...data,
+        readingTimeText,
+      } as Omit<PostMeta, 'slug'>)
     })
     .toSorted((a, b) => (a.date < b.date ? 1 : -1))
 }
@@ -170,11 +160,3 @@ export async function getPostBySlug(slug: string) {
     tableOfContents,
   }
 }
-
-export function getPostsByCategory(category: string): PostMeta[] {
-  return getAllPostsMeta().filter((post) => post.categories.includes(category))
-}
-
-export function getPostsByTag(tag: string): PostMeta[] {
-  return getAllPostsMeta().filter((post) => post.tags.includes(tag))
-}
diff --git a/lib/rehype-definition.tsx b/lib/rehype-definition.tsx
index 302b0fd..791c757 100644
--- a/lib/rehype-definition.tsx
+++ b/lib/rehype-definition.tsx
@@ -2,6 +2,56 @@ import type { Root, Element, ElementContent, Text } from 'hast'
 import type { Plugin } from 'unified'
 import { visit } from 'unist-util-visit'
 
+/**
+ * Strips a leading match from the first text node in the given children array.
+ * @param children The children array to process.
+ * @param regex The regex pattern to match and strip from the first text node.
+ * @returns The modified children array with the leading match stripped.
+ */
+const stripLeadingColon = (
+  line: ElementContent[],
+): { isNewDefinition: boolean; content: ElementContent[] } => {
+  const [first, ...rest] = line
+  if (first?.type === 'text') {
+    const match = first.value.match(/^[ \t]*:[ \t]*/)
+    if (match) {
+      const remainder = first.value.slice(match[0].length)
+      return {
+        isNewDefinition: true,
+        content: remainder ? [{ type: 'text', value: remainder } as Text, ...rest] : rest,
+      }
+    }
+  }
+  return { isNewDefinition: false, content: line }
+}
+
+/**
+ * Splits an array of ElementContent nodes into lines based on text nodes containing newlines and <br> elements.
+ * @param nodes The array of ElementContent nodes to split into lines.
+ * @returns An array of lines, where each line is an array of ElementContent nodes.
+ */
+const splitIntoLines = (nodes: ElementContent[]): ElementContent[][] => {
+  const lines: ElementContent[][] = [[]]
+
+  for (const child of nodes) {
+    if (child.type === 'text') {
+      const segments = child.value.split('\n')
+      segments.forEach((segment, i) => {
+        if (i > 0) lines.push([])
+        if (segment.length > 0) {
+          lines[lines.length - 1].push({ type: 'text', value: segment } as Text)
+        }
+      })
+    } else if (child.type === 'element' && child.tagName === 'br') {
+      lines.push([])
+    } else {
+      lines[lines.length - 1].push(child)
+    }
+  }
+
+  return lines
+}
+
 /**
  * A rehype plugin that transforms paragraphs containing a leading "Term:" into
  * definition lists. For example, a paragraph like "Term: Definition" will be
@@ -33,7 +83,7 @@ export const rehypeDefinition: Plugin<[], Root> = () => (tree: Root) => {
 
     const splitText = children[splitIndex] as Text
     const beforeColon = splitText.value.slice(0, colonIndex)
-    const afterColon = splitText.value.slice(colonIndex + 1).replace(/^\s+/, '')
+    const afterColon = splitText.value.slice(colonIndex + 1).replace(/^[ \t]+/, '')
 
     const termChildren: ElementContent[] = [
       ...children.slice(0, splitIndex),
@@ -47,6 +97,26 @@ export const rehypeDefinition: Plugin<[], Root> = () => (tree: Root) => {
 
     if (termChildren.length === 0 || definitionChildren.length === 0) return
 
+    const lines = splitIntoLines(definitionChildren)
+    const definitions: ElementContent[][] = []
+
+    for (const line of lines) {
+      const { isNewDefinition, content } = stripLeadingColon(line)
+
+      if (isNewDefinition || definitions.length === 0) {
+        definitions.push(content)
+      } else {
+        const current = definitions[definitions.length - 1]
+        if (current.length > 0 && content.length > 0) {
+          current.push({ type: 'text', value: ' ' } as Text)
+        }
+        current.push(...content)
+      }
+    }
+
+    const nonEmptyDefinitions = definitions.filter((def) => def.length > 0)
+    if (nonEmptyDefinitions.length === 0) return
+
     const dlNode: Element = {
       type: 'element',
       tagName: 'dl',
@@ -58,12 +128,14 @@ export const rehypeDefinition: Plugin<[], Root> = () => (tree: Root) => {
           properties: {},
           children: termChildren,
         },
-        {
-          type: 'element',
-          tagName: 'dd',
-          properties: {},
-          children: definitionChildren,
-        },
+        ...nonEmptyDefinitions.map(
+          (defChildren): Element => ({
+            type: 'element',
+            tagName: 'dd',
+            properties: {},
+            children: defChildren,
+          }),
+        ),
       ],
     }
 
diff --git a/package.json b/package.json
index 6961add..67a5ee4 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
+    "simple-icons": "^16.28.0",
     "tailwind-merge": "^3.6.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
diff --git a/types/Note.type.ts b/types/Note.type.ts
index ea4afcf..e6a122d 100644
--- a/types/Note.type.ts
+++ b/types/Note.type.ts
@@ -1 +1 @@
-export type NoteType = 'warning' | 'tip' | 'info'
\ No newline at end of file
+export type NoteType = 'warning' | 'tip' | 'info' | 'quote'
\ No newline at end of file
diff --git a/types/Post.type.ts b/types/Post.type.ts
new file mode 100644
index 0000000..eb1b279
--- /dev/null
+++ b/types/Post.type.ts
@@ -0,0 +1,15 @@
+export interface PostMeta {
+	slug: string
+	title: string
+	description: string
+	author: string
+	date: string
+	updated?: string
+	category: string
+	tags: string[]
+	math: boolean
+	mermaid: boolean
+	readingTimeText: string
+	coverImage?: string
+	coverImageAlt?: string
+}
\ No newline at end of file
diff --git a/utils/slug.ts b/utils/slug.ts
index 1a8831f..3c26241 100644
--- a/utils/slug.ts
+++ b/utils/slug.ts
@@ -9,4 +9,19 @@ export function slugify(text: string): string {
 		.trim()
 		.replace(/\s+/g, '-')
 		.replace(/[^\w-]/g, '')
+}
+
+/**
+ * Finds a slug in an array of strings, ignoring case.
+ * @param slug - The slug to search for.
+ * @param array - The array of strings to search within.
+ * @returns The matching string from the array if found, otherwise null.
+ */
+export function findSlugInArray(slug: string, array: string[]): string | null {
+	for (const item of array) {
+		if (slug === slugify(item)) {
+			return item
+		}
+	}
+	return null
 }
\ No newline at end of file
diff --git a/utils/time.ts b/utils/time.ts
new file mode 100644
index 0000000..1a5510b
--- /dev/null
+++ b/utils/time.ts
@@ -0,0 +1,8 @@
+/**
+ * Utility function to format a date into a human-readable string.
+ */
+export const dateFormatter = new Intl.DateTimeFormat('en', {
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric',
+});