diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..64b02a3
Binary files /dev/null and b/.DS_Store differ
diff --git a/.vscode/snipsnap.code-snippets b/.vscode/snipsnap.code-snippets
new file mode 100644
index 0000000..53ada59
--- /dev/null
+++ b/.vscode/snipsnap.code-snippets
@@ -0,0 +1,7 @@
+<html>
+<head><title>404 Not Found</title></head>
+<body>
+<center><h1>404 Not Found</h1></center>
+<hr><center>nginx</center>
+</body>
+</html>
diff --git a/exercise/01-routing/app/routes/index.tsx b/exercise/01-routing/app/routes/index.tsx
index 2d456ea..e60d648 100644
--- a/exercise/01-routing/app/routes/index.tsx
+++ b/exercise/01-routing/app/routes/index.tsx
@@ -11,30 +11,30 @@ export default function Index() {
           <div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
             <div className="absolute inset-0">
               <img
-                className="h-full w-full object-cover"
+                className="object-cover w-full h-full"
                 src="https://user-images.githubusercontent.com/1500684/157774694-99820c51-8165-4908-a031-34fc371ac0d6.jpg"
                 alt="Sonic Youth On Stage"
               />
               <div className="absolute inset-0 bg-[color:rgba(254,204,27,0.5)] mix-blend-multiply" />
             </div>
-            <div className="lg:pb-18 relative px-4 pt-16 pb-8 sm:px-6 sm:pt-24 sm:pb-14 lg:px-8 lg:pt-32">
-              <h1 className="text-center text-6xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
-                <span className="block uppercase text-yellow-500 drop-shadow-md">
+            <div className="relative px-4 pt-16 pb-8 lg:pb-18 sm:px-6 sm:pt-24 sm:pb-14 lg:px-8 lg:pt-32">
+              <h1 className="text-6xl font-extrabold tracking-tight text-center sm:text-8xl lg:text-9xl">
+                <span className="block text-yellow-500 uppercase drop-shadow-md">
                   Indie Stack
                 </span>
               </h1>
-              <p className="mx-auto mt-6 max-w-lg text-center text-xl text-white sm:max-w-3xl">
+              <p className="max-w-lg mx-auto mt-6 text-xl text-center text-white sm:max-w-3xl">
                 Check the README.md file for instructions on how to get this
                 project deployed.
               </p>
-              <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
+              <div className="max-w-sm mx-auto mt-10 sm:flex sm:max-w-none sm:justify-center">
                 {user ? (
                   <div>
-                    <p className="mx-auto mt-6 max-w-lg text-center text-xl text-white sm:max-w-3xl">
+                    <p className="max-w-lg mx-auto mt-6 text-xl text-center text-white sm:max-w-3xl">
                       Hello {user.email} 👋
                     </p>
                     <Form action="/logout" method="post">
-                      <button className="w-full rounded bg-yellow-500  py-2 px-4 text-white hover:bg-yellow-600 focus:bg-yellow-400">
+                      <button className="w-full px-4 py-2 text-white bg-yellow-500 rounded hover:bg-yellow-600 focus:bg-yellow-400">
                         Logout
                       </button>
                     </Form>
@@ -42,7 +42,7 @@ export default function Index() {
                 ) : (
                   <Link
                     to="/login"
-                    className="flex items-center justify-center rounded-md bg-yellow-500 px-4 py-3 font-medium text-white hover:bg-yellow-600  "
+                    className="flex items-center justify-center px-4 py-3 font-medium text-white bg-yellow-500 rounded-md hover:bg-yellow-600 "
                   >
                     Log In
                   </Link>
@@ -60,9 +60,13 @@ export default function Index() {
         </div>
 
         {/* 💿 Add a link to /posts here */}
-
-        <div className="mx-auto max-w-7xl py-2 px-4 sm:px-6 lg:px-8">
-          <div className="mt-6 flex flex-wrap justify-center gap-8">
+        <div className="mx-auto mt-16 text-center max-w-7xl">
+          <Link to="/posts" className="text-xl text-blue-600 underline">
+            Blog Posts
+          </Link>
+        </div>
+        <div className="px-4 py-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
+          <div className="flex flex-wrap justify-center gap-8 mt-6">
             {[
               {
                 src: "https://user-images.githubusercontent.com/1500684/157764397-ccd8ea10-b8aa-4772-a99b-35de937319e1.svg",
@@ -123,7 +127,7 @@ export default function Index() {
               <a
                 key={img.href}
                 href={img.href}
-                className="flex h-16 w-32 justify-center p-1 grayscale transition hover:grayscale-0 focus:grayscale-0"
+                className="flex justify-center w-32 h-16 p-1 transition grayscale hover:grayscale-0 focus:grayscale-0"
               >
                 <img alt={img.alt} src={img.src} />
               </a>
diff --git a/exercise/01-routing/app/routes/posts/index.tsx b/exercise/01-routing/app/routes/posts/index.tsx
new file mode 100644
index 0000000..2f624a7
--- /dev/null
+++ b/exercise/01-routing/app/routes/posts/index.tsx
@@ -0,0 +1,9 @@
+export default function PostsRoute() {
+    return (
+        <main>
+            <h1 className="text-6xl font-black">
+                post
+            </h1>
+        </main>
+    );
+}
\ No newline at end of file
