diff --git a/.idea/prettier.xml b/.idea/prettier.xml
new file mode 100644
index 0000000..7fed8e9
--- /dev/null
+++ b/.idea/prettier.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="MANUAL" />
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index b69e099..b5c61c9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.cover {
-  background-image: url("../public/assets/placeholder.webp");
-}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index c83f4ba..94f7456 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,30 +2,46 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-      <div className="flex flex-col bg-white">
-        <div className="ml-20 py-10">
-          <p>SUYONO</p>
-        </div>
-        <div className="bg-gray-100">
-          <div className="flex flex-row ml-20">
-            <div>one</div>
-            <div>two</div>
-          </div>
-        </div>
-        <div className="bg-cover bg-center h-screen flex flex-col-reverse cover">
-          <div className="bg-neutral-100 bg-opacity-40 flex flex-col py-10">
-            <p className="text-white text-center">SUYONO</p>
-            <p className="text-white text-center">A Tech Archive</p>
-          </div>
-        </div>
-        <div className="flex flex-row justify-center">
-          <div className="border">
-              <Image src="/assets/pthumb.webp" alt="post thumbnail" width={454} height={341} />
-            <div className="flex flex-col">
-
-            </div>
-          </div>
+    <div className="flex flex-col bg-white">
+      <div className="ml-20 py-8">
+        <p className="font-sans text-2xl font-extralight">SUYONO</p>
+      </div>
+      <div className="bg-gray-100">
+        <div className="flex flex-row ml-20">
+          <a href="#" className="m-2 font-extralight text-sm">
+            Home
+          </a>
+          <a href="#" className="m-2 font-extralight text-sm">
+            About
+          </a>
+          <a href="#" className="m-2 font-extralight text-sm">
+            Blog
+          </a>
         </div>
       </div>
-  )
+      <div className="bg-cover bg-center flex flex-col-reverse bg-blog-cover">
+        <div className="bg-neutral-100 bg-opacity-30 flex flex-col py-10">
+          <p className="text-white text-center text-7xl font-extralight font-sans mb-6">
+            SUYONO
+          </p>
+          <p className="text-white text-center font-sans font-extralight text-xl mb-10">
+            A Tech Archive
+          </p>
+        </div>
+        <div className="h-64"></div> {/* spacer */}
+        <div className="h-64"></div> {/* spacer */}
+      </div>
+      <div className="flex flex-row justify-center">
+        <div className="border">
+          <Image
+            src="/assets/pthumb.webp"
+            alt="post thumbnail"
+            width={454}
+            height={341}
+          />
+          <div className="flex flex-col"></div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/package.json b/package.json
index 462bb3d..c542eda 100644
--- a/package.json
+++ b/package.json
@@ -21,5 +21,8 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
+  },
+  "devDependencies": {
+    "prettier": "3.0.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1670611..79c5644 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -42,6 +42,11 @@ dependencies:
     specifier: 5.2.2
     version: 5.2.2
 
+devDependencies:
+  prettier:
+    specifier: 3.0.3
+    version: 3.0.3
+
 packages:
 
   /@aashutoshrathi/word-wrap@1.2.6:
@@ -2060,6 +2065,12 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: false
 
+  /prettier@3.0.3:
+    resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c7ead80..30c1ded 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,7 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'blog-cover': "url('/assets/placeholder.webp')"
       },
     },
   },