diff --git a/src/components/Sideprojects/GithubIcon.astro b/src/components/Sideprojects/GithubIcon.astro
new file mode 100644
index 0000000..e18b31c
--- /dev/null
+++ b/src/components/Sideprojects/GithubIcon.astro
@@ -0,0 +1,16 @@
+---
+const {color = "white"} = Astro.props;
+---
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    class="inline-block"
+    fill={color}
+    viewBox="0 0 256 256"
+    style="--darkreader-inline-fill: #0f0e0c;"
+    data-darkreader-inline-fill=""
+    ><path
+        d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z"
+    ></path></svg
+>
\ No newline at end of file
diff --git a/src/components/Sideprojects/GlobeIcon.astro b/src/components/Sideprojects/GlobeIcon.astro
new file mode 100644
index 0000000..656fec4
--- /dev/null
+++ b/src/components/Sideprojects/GlobeIcon.astro
@@ -0,0 +1,16 @@
+---
+const {color = "white"} = Astro.props;
+---
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    class="inline-block"
+    fill={color}
+    viewBox="0 0 256 256"
+    style="--darkreader-inline-fill: #0f0e0c;"
+    data-darkreader-inline-fill=""
+    ><path
+        d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"
+    ></path></svg
+>
diff --git a/src/components/ToolIcon.astro b/src/components/ToolIcon.astro
index 3db1ae5..0b31c85 100644
--- a/src/components/ToolIcon.astro
+++ b/src/components/ToolIcon.astro
@@ -16,7 +16,7 @@ if (size === "big") {
 >
     <img
         class={`"inline-block mx-auto ${tailwindSize} px-1 my-1"`}
-        src={`/img/${isRoot? "" : "tools" }/${icon}.svg`}
+        src={`/img/${isRoot? "logos" : "tools" }/${icon}.svg`}
         alt={`${name} logo`}
         title={`${name} logo`}
     />
diff --git a/src/pages/side-projects.astro b/src/layouts/SideProject.astro
similarity index 82%
rename from src/pages/side-projects.astro
rename to src/layouts/SideProject.astro
index daa7d82..c9b9605 100644
--- a/src/pages/side-projects.astro
+++ b/src/layouts/SideProject.astro
@@ -1,3 +1,8 @@
+---
+import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
+import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
+---
+
 <!doctype html>
 <html lang="en">
     <head>
@@ -60,13 +65,11 @@
                     </a>
                 </nav>
             </div>
-            <!-- For some god forsaken reason this grid-cols doesnt
-             work?? Hello?? Tailwind??? -->
             <div class="grid grid-cols-[30rem_auto] gap-2">
-                <div class="fler items-center">
+                <div class="flex items-center">
                     <div class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow">
                         <h1 class="font-display font-semibold text-xl text-center">
-                            Nombre del proyecto :D
+                            Typed Hyperscript Processor (webpage)
                         </h1>
 
                         <p class="pt-8">
@@ -75,8 +78,10 @@
                         </p>
 
                         <div class="pt-8">
-                            <a href="" class="underline">Git repo link</a>
+                            <GithubIcon color="var(--c-on-bg)" />
+                            <a href="" class="underline">Source code</a>
                             <br>
+                            <GlobeIcon color="var(--c-on-bg)" />
                             <a href="" class="underline">https://webpage.araozu.dev/</a>
                         </div>
 
@@ -87,9 +92,14 @@
                 </div>
 
                 <div class="w-full h-screen flex items-center justify-center p-16">
-                    <img src="/img/projects/thp/01.png" alt="Project image">
+                    <img
+                        class="inline-block shadow-sm dark:shadow-black rounded"
+                        src="/img/projects/thp/01.png"
+                        alt="Project image"
+                    />
                 </div>
             </div>
         </div>
     </body>
 </html>
+
diff --git a/src/pages/side-projects/index.astro b/src/pages/side-projects/index.astro
new file mode 100644
index 0000000..32e7285
--- /dev/null
+++ b/src/pages/side-projects/index.astro
@@ -0,0 +1,109 @@
+---
+import GithubIcon from "../../components/Sideprojects/GithubIcon.astro";
+import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="generator" content={Astro.generator} />
+        <link rel="stylesheet" href="/global.css" />
+        <link rel="stylesheet" href="/blog.css" />
+        <title>Side projects - Fernando Araoz</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            rel="stylesheet"
+            type="text/css"
+            href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
+        />
+        <script src="//unpkg.com/alpinejs" is:inline defer></script>
+
+        <style>
+            html {
+                font-size: 18px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="grid grid-cols-[4rem_auto]">
+            <div class="h-screen">
+                <nav
+                    class="fixed top-0 left-0 bg-black text-white rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] px-8 py-2"
+                    style="transform-origin: 0% 0%;"
+                >
+                    <a
+                        class="font-semibold inline-block text-2xl hover:underline"
+                        href="/"
+                    >
+                        Fernando Araoz
+                    </a>
+                    <a
+                        class="ml-6 inline-block underline"
+                        href="/side-projects"
+                    >
+                        Side projects
+                    </a>
+                    <a
+                        class="ml-6 inline-block hover:underline"
+                        href="/blog/en"
+                    >
+                        Eng Blog
+                    </a>
+                    <a
+                        class="ml-6 inline-block hover:underline"
+                        href="/blog/es"
+                    >
+                        Es Blog
+                    </a>
+                </nav>
+            </div>
+            <div class="grid grid-cols-[30rem_auto] gap-2">
+                <div class="flex items-center">
+                    <div class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow">
+                        <h1 class="font-display font-semibold text-xl text-center">
+                            Typed Hyperscript Processor (webpage)
+                        </h1>
+
+                        <p class="pt-8 text-sm">
+                            This is a static webpage that contains documentation
+                            for my other project, the THP compiler.
+                            <br>
+                            <br>
+                            It is written with Astro and Markdown, highlights
+                            the syntax in the code snippets using said compiler,
+                            and has some interactive code snippets.
+                        </p>
+
+                        <div class="pt-8">
+                            <GithubIcon color="var(--c-on-bg)" />
+                            <a href="https://git.araozu.dev/fernando/araozu.dev" class="underline">Source code</a>
+                            <br>
+                            <GlobeIcon color="var(--c-on-bg)" />
+                            <a href="https://thp.araozu.dev/" target="_blank" class="underline">https://thp.araozu.dev/</a>
+                        </div>
+
+                        <div class="pt-8">
+                            logos
+                        </div>
+                    </div>
+                </div>
+
+                <div class="w-full h-screen flex items-center justify-center p-16">
+                    <img
+                        class="inline-block shadow-sm dark:shadow-black rounded"
+                        src="/img/projects/thp/01.png"
+                        alt="Project image"
+                    />
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
