diff --git a/www/dynamic_web_app/router.php b/www/dynamic_web_app/router.php
index 357fb7d..8c0c9e7 100644
--- a/www/dynamic_web_app/router.php
+++ b/www/dynamic_web_app/router.php
@@ -4,6 +4,9 @@ $uri = parse_url($_SERVER['REQUEST_URI']);
 
 $routes = [
     '/dynamic_web_app/' => 'controllers/index.php',
+    '/dynamic_web_app/index.php' => 'controllers/index.php',
+    '/dynamic_web_app/index.html' => 'controllers/index.php',
+    '/dynamic_web_app/index' => 'controllers/index.php',
     '/dynamic_web_app/about' => 'controllers/about.php',
     '/dynamic_web_app/contact' => 'controllers/contact.php'
 ];
diff --git a/www/fundamentals/index.php b/www/fundamentals/index.php
index c332905..fa6ec70 100644
--- a/www/fundamentals/index.php
+++ b/www/fundamentals/index.php
@@ -3,14 +3,23 @@ $books = [
     "1984",
     "Brave New World",
     "Fahrenheit 451",
-    "The Great Gatsby"
-
+    "The Great Gatsby",
+    "To Kill a Mockingbird",
+    "Moby Dick",
+    "The Catcher in the Rye",
+    "Pride and Prejudice",
+    "The Lord of the Rings",
+    "The Hobbit",
+    "War and Peace",
+    "The Odyssey",
+    "Crime and Punishment",
+    "The Brothers Karamazov"
 ];
 
 $assosiative = [
-    "name" => "Bookname",
-    "author" => "Me",
-    "date" => "today"
+    "name" => "Brave New World",
+    "author" => "Aldous Huxley",
+    "date" => "1932"
 ];
 
 function filter(array $items): array
@@ -23,7 +32,7 @@ function filter(array $items): array
         }
     }
     return $filtered;
-    
+
 }
 
 function filterGeneric(array $items, callable $filter): array
diff --git a/www/fundamentals/index.view.php b/www/fundamentals/index.view.php
index 2495009..15979a9 100644
--- a/www/fundamentals/index.view.php
+++ b/www/fundamentals/index.view.php
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Demo</title>
+    <title>Recommended Books</title>
     <style>
         body {
             display: grid;
diff --git a/www/index.html b/www/index.html
index 173a522..6308a80 100644
--- a/www/index.html
+++ b/www/index.html
@@ -14,16 +14,61 @@
             font-family: sans-serif;
         }
     </style>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
 
 <body>
-    <div>
-        <h1>List of all sub sites:</h1>
-        <div>
-            <h2><a href="fundamentals/index.php">Fundementals</a>: Demo site with recommended books</h2>
-            <h2><a href="dynamic_web_app/index.php">Dynamic Web App</a>: Demo site with recommended books</h2>
+    <div class="bg-white ">
+        <div class="relative isolate px-6 pt-14 lg:px-8">
+            <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
+                <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
+            </div>
+            <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+                <div class="text-center">
+                    <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Check out these Websites</h1>
+                    <p class="mt-6 text-lg leading-8 text-gray-600">
+                        As part of my journey following the <a href="https://laracasts.com/series" class="underline text-indigo-600">Laracasts PHP Path</a>, I've created several projects that demonstrate my growing expertise in PHP, Webdesign, and database management. Below, you'll find links to these projects, showcasing how I've applied key concepts to develop test applications.
+                    </p>
+                    <div class="flex min-w-full items-center justify-center flex-nowrap">
+                        <div class="mt-10 flex items-stretch content-center gap-y-6 flex-col flex-nowrap">
+                            <div class="border flex-nowrap flex flex-col rounded-md gap-3 p-2 bg-gray-100">
+                                <p class="mt-1 text-3xl font-bold leading-8 text-gray-800">Recommended Books</p>
+
+                                <p class="text-lg leading-8 text-gray-600">A simple demo site that displays a list of recommended books, focusing on PHP fundamentals like templating.</p>
+                                <div class="flex flex-nowrap items-center justify-center gap-6">
+                                    <a href="fundamentals/index.php" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Website</a>
+                                    <a href="fundamentals/index.php" class="rounded-md bg-gray-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Code</a>
+                                </div>
+                            </div>
+                            <div class="border flex-nowrap flex flex-col rounded-md gap-3 p-2 bg-gray-100">
+                                <p class="mt-1 text-3xl font-bold leading-8 text-gray-800">Dynamic Web App</p>
+
+                                <p class="text-lg leading-8 text-gray-600">A more advanced project featuring dynamic routing and interaction with databases. This app demonstrates how to manage data flows and how to handle requests.</p>
+                                <div class="flex flex-nowrap items-center justify-center gap-6">
+                                    <a href="dynamic_web_app/index.php" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Website</a>
+                                    <a href="fundamentals/index.php" class="rounded-md bg-gray-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Code</a>
+                                </div>
+                            </div>
+                            <div class="border flex-nowrap flex flex-col rounded-md gap-3 p-2 bg-gray-100">
+                                <p class="mt-1 text-3xl font-bold leading-8 text-gray-800">Fundementals</p>
+
+                                <p class="text-lg leading-8 text-gray-600">A simple demo site that displays a list of recommended books, focusing on PHP fundamentals like routing, templating, and basic database queries.</p>
+                                <div class="flex flex-nowrap items-center justify-center gap-6">
+                                    <a href="fundamentals/index.php" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Website</a>
+                                    <a href="fundamentals/index.php" class="rounded-md bg-gray-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Code</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
+            <div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
         </div>
     </div>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
