diff --git a/app/layout.tsx b/app/layout.tsx
index 5d653b6..7adae2a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,4 @@
-import type { Metadata } from "next";
-import { Aleo as FontSans } from "next/font/google";
+import { DM_Sans as FontSans } from "next/font/google";
 import { cn } from "@/lib/utils";
 
 // Styles
@@ -11,11 +10,6 @@ const fontSans = FontSans({
   variable: "--font-sans",
 });
 
-export const metadata: Metadata = {
-  title: "moonlitspace | Home",
-  description: "<description>",
-};
-
 export default function RootLayout({
   children,
 }: Readonly<{
diff --git a/app/page.tsx b/app/page.tsx
index 0dc458b..c7e707c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,10 @@
 import MoonlitGraceArt from "@/components/MoonlitGraceArt";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home. | moonlitspace",
+  description: "a graceful space",
+};
 
 export default function Home() {
   return <div className="w-full grid place-items-center">
diff --git a/app/thoughts/page.tsx b/app/thoughts/page.tsx
new file mode 100644
index 0000000..cc5dff3
--- /dev/null
+++ b/app/thoughts/page.tsx
@@ -0,0 +1,48 @@
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Metadata } from "next"
+import Link from "next/link"
+
+const MOCK_DATA = [
+  {
+    id: 1,
+    created_at: '12 oct 2024',
+    title: 'Create and animate beautiful patterns',
+    tag: 'Design',
+    slug: 'create-and-animate-beautiful-patterns',
+  },
+  {
+    id: 2,
+    created_at: '24 oct 2024',
+    title: 'Magic git commands',
+    tag: 'Git',
+    slug: 'magic-git-commands',
+  },
+]
+
+export const metadata: Metadata = {
+  title: 'Thoughts. | moonlitspace',
+  description: 'my graceful thoughts',
+}
+
+export default function Thoughts() {
+  return (
+    <main className="w-full flex flex-col gap-10 mt-10">
+      <h2 className="text-3xl font-bold">Thoughts.</h2>
+      <div className="flex flex-col gap-5">
+        {MOCK_DATA.map((item) => (
+          <div key={item.id} className="flex flex-col">
+            <span className="text-xs uppercase font-bold text-muted-foreground">{item.created_at}</span>
+            <div className="flex items-center gap-2">
+              <Link href={`/thoughts/${item.slug}`} className="text-lg relative before:bg-transparent before:absolute before:bottom-1 before:w-full before:h-0.5 before:duration-200 hover:before:bottom-0 hover:before:bg-primary">
+                {item.title}
+              </Link>
+              <Separator className="flex-1" />
+              <Badge>{item.tag}</Badge>
+            </div>
+          </div>
+        ))}
+      </div>
+    </main>
+  )
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 6c9bf8a..4f0bbc4 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -12,7 +12,6 @@ import {
 } from "@/components/ui/tooltip"
 import { Button } from "@/components/ui/button";
 import React from "react";
-import { IconProps } from "@/interfaces/icon";
 import PencilIcon from "@/components/icons/pencil";
 import PhotoIcon from "@/components/icons/photo";
 import GithubIcon from "@/components/icons/github";
@@ -23,22 +22,7 @@ import LightIcon from "@/components/icons/light";
 const Navbar = () => {
   const pathname = usePathname();
 
-  const MAPPING: {
-    links: {
-      [key: string]: {
-        href: string;
-        icon: ({ variant, ...props }: IconProps) => React.JSX.Element;
-        label: string;
-      }
-    },
-    socials: {
-      [key: string]: {
-        link: string;
-        icon: ({ variant, ...props }: IconProps) => React.JSX.Element;
-        label: string;
-      }
-    }
-  } = {
+  const MAPPING = {
     links: {
       home: {
         href: '/',
@@ -46,9 +30,9 @@ const Navbar = () => {
         label: "Home"
       },
       writings: {
-        href: '/writings',
+        href: '/thoughts',
         icon: PencilIcon,
-        label: 'Writings'
+        label: 'Thoughts'
       },
       photos: {
         href: '/photos',
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..f000e3e
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }