diff --git a/public/img/go-logo.png b/public/img/go-logo.png
deleted file mode 100644
index bb00c07..0000000
Binary files a/public/img/go-logo.png and /dev/null differ
diff --git a/public/img/go-logo.svg b/public/img/go-logo.svg
new file mode 100644
index 0000000..15403d7
--- /dev/null
+++ b/public/img/go-logo.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 205.4 76.7" style="enable-background:new 0 0 205.4 76.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#00ACD7;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M15.5,23.2c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5h35.7c0.4,0,0.5,0.3,0.3,0.6l-1.7,2.6      c-0.2,0.3-0.7,0.6-1,0.6L15.5,23.2z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M0.4,32.4c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5h45.6c0.4,0,0.6,0.3,0.5,0.6l-0.8,2.4      c-0.1,0.4-0.5,0.6-0.9,0.6L0.4,32.4z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M24.6,41.6c-0.4,0-0.5-0.3-0.3-0.6l1.4-2.5c0.2-0.3,0.6-0.6,1-0.6h20c0.4,0,0.6,0.3,0.6,0.7L47.1,41      c0,0.4-0.4,0.7-0.7,0.7L24.6,41.6z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g id="CXHf1q_3_">
+			<g>
+				<g>
+					<path class="st0" d="M128.4,21.4c-6.3,1.6-10.6,2.8-16.8,4.4c-1.5,0.4-1.6,0.5-2.9-1c-1.5-1.7-2.6-2.8-4.7-3.8       c-6.3-3.1-12.4-2.2-18.1,1.5c-6.8,4.4-10.3,10.9-10.2,19c0.1,8,5.6,14.6,13.5,15.7c6.8,0.9,12.5-1.5,17-6.6       c0.9-1.1,1.7-2.3,2.7-3.7c-3.6,0-8.1,0-19.3,0c-2.1,0-2.6-1.3-1.9-3c1.3-3.1,3.7-8.3,5.1-10.9c0.3-0.6,1-1.6,2.5-1.6       c5.1,0,23.9,0,36.4,0c-0.2,2.7-0.2,5.4-0.6,8.1c-1.1,7.2-3.8,13.8-8.2,19.6c-7.2,9.5-16.6,15.4-28.5,17       c-9.8,1.3-18.9-0.6-26.9-6.6c-7.4-5.6-11.6-13-12.7-22.2c-1.3-10.9,1.9-20.7,8.5-29.3c7.1-9.3,16.5-15.2,28-17.3       c9.4-1.7,18.4-0.6,26.5,4.9c5.3,3.5,9.1,8.3,11.6,14.1C130,20.6,129.6,21.1,128.4,21.4z"/>
+				</g>
+				<g>
+					<path class="st0" d="M161.5,76.7c-9.1-0.2-17.4-2.8-24.4-8.8c-5.9-5.1-9.6-11.6-10.8-19.3c-1.8-11.3,1.3-21.3,8.1-30.2       c7.3-9.6,16.1-14.6,28-16.7c10.2-1.8,19.8-0.8,28.5,5.1c7.9,5.4,12.8,12.7,14.1,22.3c1.7,13.5-2.2,24.5-11.5,33.9       c-6.6,6.7-14.7,10.9-24,12.8C166.8,76.3,164.1,76.4,161.5,76.7z M185.3,36.3c-0.1-1.3-0.1-2.3-0.3-3.3       c-1.8-9.9-10.9-15.5-20.4-13.3c-9.3,2.1-15.3,8-17.5,17.4c-1.8,7.8,2,15.7,9.2,18.9c5.5,2.4,11,2.1,16.3-0.6       C180.5,51.3,184.8,44.9,185.3,36.3z"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/public/img/rust-logo.png b/public/img/rust-logo.png
deleted file mode 100644
index 598f212..0000000
Binary files a/public/img/rust-logo.png and /dev/null differ
diff --git a/public/img/rust-logo.svg b/public/img/rust-logo.svg
new file mode 100644
index 0000000..62424d8
--- /dev/null
+++ b/public/img/rust-logo.svg
@@ -0,0 +1,61 @@
+<svg version="1.1" height="106" width="106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="logo" transform="translate(53, 53)">
+  <path id="r" transform="translate(0.5, 0.5)" stroke="black" stroke-width="1" stroke-linejoin="round" d="
+    M -9,-15 H 4 C 12,-15 12,-7 4,-7 H -9 Z
+    M -40,22 H 0 V 11 H -9 V 3 H 1 C 12,3 6,22 15,22 H 40
+    V 3 H 34 V 5 C 34,13 25,12 24,7 C 23,2 19,-2 18,-2 C 33,-10 24,-26 12,-26 H -35
+    V -15 H -25 V 11 H -40 Z" />
+  <g id="gear" mask="url(#holes)">
+    <circle r="43" fill="none" stroke="black" stroke-width="9" />
+    <g id="cogs">
+      <polygon id="cog" stroke="black" stroke-width="3" stroke-linejoin="round" points="46,3 51,0 46,-3" />
+      <use xlink:href="#cog" transform="rotate(11.25)" />
+      <use xlink:href="#cog" transform="rotate(22.50)" />
+      <use xlink:href="#cog" transform="rotate(33.75)" />
+      <use xlink:href="#cog" transform="rotate(45.00)" />
+      <use xlink:href="#cog" transform="rotate(56.25)" />
+      <use xlink:href="#cog" transform="rotate(67.50)" />
+      <use xlink:href="#cog" transform="rotate(78.75)" />
+      <use xlink:href="#cog" transform="rotate(90.00)" />
+      <use xlink:href="#cog" transform="rotate(101.25)" />
+      <use xlink:href="#cog" transform="rotate(112.50)" />
+      <use xlink:href="#cog" transform="rotate(123.75)" />
+      <use xlink:href="#cog" transform="rotate(135.00)" />
+      <use xlink:href="#cog" transform="rotate(146.25)" />
+      <use xlink:href="#cog" transform="rotate(157.50)" />
+      <use xlink:href="#cog" transform="rotate(168.75)" />
+      <use xlink:href="#cog" transform="rotate(180.00)" />
+      <use xlink:href="#cog" transform="rotate(191.25)" />
+      <use xlink:href="#cog" transform="rotate(202.50)" />
+      <use xlink:href="#cog" transform="rotate(213.75)" />
+      <use xlink:href="#cog" transform="rotate(225.00)" />
+      <use xlink:href="#cog" transform="rotate(236.25)" />
+      <use xlink:href="#cog" transform="rotate(247.50)" />
+      <use xlink:href="#cog" transform="rotate(258.75)" />
+      <use xlink:href="#cog" transform="rotate(270.00)" />
+      <use xlink:href="#cog" transform="rotate(281.25)" />
+      <use xlink:href="#cog" transform="rotate(292.50)" />
+      <use xlink:href="#cog" transform="rotate(303.75)" />
+      <use xlink:href="#cog" transform="rotate(315.00)" />
+      <use xlink:href="#cog" transform="rotate(326.25)" />
+      <use xlink:href="#cog" transform="rotate(337.50)" />
+      <use xlink:href="#cog" transform="rotate(348.75)" />
+    </g>
+    <g id="mounts">
+      <polygon id="mount" stroke="black" stroke-width="6" stroke-linejoin="round" points="-7,-42 0,-35 7,-42" />
+      <use xlink:href="#mount" transform="rotate(72)" />
+      <use xlink:href="#mount" transform="rotate(144)" />
+      <use xlink:href="#mount" transform="rotate(216)" />
+      <use xlink:href="#mount" transform="rotate(288)" />
+    </g>
+  </g>
+  <mask id="holes">
+    <rect x="-60" y="-60" width="120" height="120" fill="white"/>
+    <circle id="hole" cy="-40" r="3" />
+    <use xlink:href="#hole" transform="rotate(72)" />
+    <use xlink:href="#hole" transform="rotate(144)" />
+    <use xlink:href="#hole" transform="rotate(216)" />
+    <use xlink:href="#hole" transform="rotate(288)" />
+  </mask>
+</g>
+</svg>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
new file mode 100644
index 0000000..9269c6f
--- /dev/null
+++ b/src/components/Sidebar.astro
@@ -0,0 +1,14 @@
+<div class="lg:px-1">
+    <h1 class="text-xl font-light py-4">
+        Hi 👋! I'm
+        <br />
+        <span class="font-black text-3xl">Fernando Araoz</span>
+    </h1>
+    <div class="text-center">
+        <div class="inline-block w-28 h-28 lg:w-40 lg:h-40 rounded-full bg-slate-500"></div>
+    </div>
+    <p class="text-center">
+        I'm a (human) software engineer passionate about web technologies. I
+        love building things and learning new stuff.
+    </p>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a147091..53df2dd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import LangLogo from "../components/LangLogo.astro";
+import Sidebar from "../components/Sidebar.astro";
 ---
 
 <html lang="en">
@@ -28,129 +29,209 @@ import LangLogo from "../components/LangLogo.astro";
         <script src="//unpkg.com/alpinejs" defer></script>
     </head>
     <body>
-        <div class="p-2">
-            <h1 class="text-xl font-light py-4">
-                Hi 👋! I'm
-                <br />
-                <span class="font-black text-3xl">Fernando Araoz</span>
-            </h1>
-            <div class="text-center">
-                <div class="inline-block w-28 h-28 rounded-full bg-slate-500">
-                </div>
-            </div>
-            <p class="text-center">
-                I'm a (human) software engineer passionate about web
-                technologies. I love building things and learning new stuff.
-            </p>
-            <div x-data="{open: true}">
-                <h2
-                    class="text-2xl font-bold mt-6 py-2 pl-2 cursor-pointer hover:underline sticky top-0 bg-c-bg border-b border-b-slate-600"
-                    @click="open = !open"
+        <div class="p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4">
+            <Sidebar />
+            <div class="2xl:grid 2xl:grid-cols-2 2xl:gap-2">
+                <div
+                    x-data="{open: true}"
+                    class="shadow-lg p-2 bg-white rounded-md max-w-[50rem] border border-slate-600"
                 >
-                    Languages
-                    <i
-                        x-bind:class="open? 'ph ph-caret-down': 'ph ph-caret-right'"
-                    ></i>
-                </h2>
-                <div class="border-l border-b rounded-bl-lg border-slate-600 pt-4 pl-1 pb-2" x-show="open">
-                    <div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
-                        <img
-                            class="inline-block p-2"
-                            src="/img/ts-logo.png"
-                            alt="TS logo"
-                        />
-                        <p>
-                            <span
-                                class="text-yellow-600 dark:text-yellow-400 font-medium text-lg"
-                            >
-                                JS/TS
-                            </span>
-                            : Being the lingua franca of the web, I've used a lot
-                            of JS/TS, vanilla and with frameworks.
+                    <h2
+                        class="text-2xl font-bold py-2 pl-2 cursor-pointer hover:underline sticky top-0 border-b border-b-slate-600"
+                        @click="open = !open"
+                    >
+                        Languages
+                        <i
+                            x-bind:class="open? 'ph ph-caret-down': 'ph ph-caret-right'"
+                        ></i>
+                    </h2>
+                    <div
+                        class="rounded-bl-lg border-slate-600 pt-4 pl-1 pb-2"
+                        x-show="open"
+                    >
+                        <div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
+                            <img
+                                class="inline-block p-2"
+                                src="/img/ts-logo.png"
+                                alt="TS logo"
+                            />
+                            <p>
+                                <span
+                                    class="text-yellow-600 dark:text-yellow-400 font-medium text-lg"
+                                >
+                                    JS/TS
+                                </span>
+                                : Being the lingua franca of the web, I've used a
+                                lot of JS/TS, vanilla and with frameworks.
+                            </p>
+                            <img
+                                class="inline-block p-2"
+                                src="/img/java-logo.png"
+                                alt="Java logo"
+                            />
+                            <p>
+                                <span
+                                    class="text-purple-700 dark:text-purple-500 font-medium text-lg"
+                                >
+                                    Java/Kotlin
+                                </span>
+                                : The language I learned in university, along with
+                                JS/TS is the language I've used the most. I've mostly
+                                written DSAs and backends with it (JSP/Spring).
+                            </p>
+                            <img
+                                class="inline-block p-2"
+                                src="/img/rust-logo.svg"
+                                alt="Rust logo"
+                            />
+                            <p>
+                                <span
+                                    class="text-amber-800 dark:text-amber-600 font-medium text-lg"
+                                >
+                                    Rust
+                                </span>
+                                : Currently my favorite language, I began learning
+                                it in late 2022. I've written a backend and I'm currently
+                                writing a programming language.
+                            </p>
+                            <img
+                                class="inline-block p-2"
+                                src="/img/go-logo.svg"
+                                alt="Go logo"
+                            />
+                            <p>
+                                <span
+                                    class="text-sky-600 dark:text-sky-400 font-medium text-lg"
+                                >
+                                    Go
+                                </span>
+                                : I'm currently learning Go through advent of code,
+                                and I hope to use it for some projects in the future.
+                            </p>
+                        </div>
+
+                        <p class="my-4">
+                            <span class="font-medium text-lg">Others</span>:
+                            Other languages I've used (mostly at uni):
+                            <br />
+                            <div class="text-center">
+                                <LangLogo
+                                    href="https://www.iso.org/standard/74528.html"
+                                    lang="C"
+                                    icon="c"
+                                />
+                                <LangLogo
+                                    href="https://isocpp.org/std/the-standard"
+                                    lang="C++"
+                                    icon="cpp"
+                                />
+                                <LangLogo
+                                    href="https://learn.microsoft.com/en-us/dotnet/csharp/"
+                                    lang="Microsoft Java"
+                                    icon="c-sharp"
+                                />
+                                <LangLogo
+                                    href="https://www.php.net/"
+                                    lang="PHP"
+                                    icon="php"
+                                />
+                                <LangLogo
+                                    href="https://www.python.org/"
+                                    lang="Python"
+                                    icon="python"
+                                />
+                                <LangLogo
+                                    href="https://dart.dev/"
+                                    lang="Dart"
+                                    icon="dart"
+                                />
+                            </div>
+                            <br />
+                            Other languages I've tried for fun:
+                            <br />
+                            <div class="text-center">
+                                <LangLogo
+                                    href="https://elixir-lang.org/"
+                                    lang="Elixir"
+                                    icon="elixir"
+                                />
+                                <LangLogo
+                                    href="https://www.erlang.org/"
+                                    lang="Erlang"
+                                    icon="erlang"
+                                />
+                                <LangLogo
+                                    href="https://gleam.run/"
+                                    lang="Gleam"
+                                    icon="gleam"
+                                />
+                                <LangLogo
+                                    href="https://coffeescript.org/"
+                                    lang="CoffeeScript"
+                                    icon="coffeescript"
+                                />
+                                <LangLogo
+                                    href="https://racket-lang.org/"
+                                    lang="Racket"
+                                    icon="racket"
+                                />
+                                <LangLogo
+                                    href="https://ziglang.org/"
+                                    lang="Zig"
+                                    icon="zig"
+                                />
+                                <LangLogo
+                                    href="https://learn.microsoft.com/en-us/dotnet/fsharp/what-is-fsharp"
+                                    lang="F#"
+                                    icon="f-sharp"
+                                />
+                                <LangLogo
+                                    href="https://www.haskell.org/"
+                                    lang="Haskell"
+                                    icon="haskell"
+                                />
+                                <LangLogo
+                                    href="https://ocaml.org/"
+                                    lang="OCaml"
+                                    icon="ocaml"
+                                />
+                                <LangLogo
+                                    href="https://rescript-lang.org/"
+                                    lang="Rescript"
+                                    icon="rescript"
+                                />
+                                <LangLogo
+                                    href="https://www.swift.org/"
+                                    lang="Swift"
+                                    icon="swift"
+                                />
+                                <LangLogo
+                                    href="https://www.scala-lang.org/"
+                                    lang="Scala"
+                                    icon="scala"
+                                />
+                                <LangLogo
+                                    href="https://clojure.org/"
+                                    lang="Clojure"
+                                    icon="clojure"
+                                />
+                                <LangLogo
+                                    href="https://www.gnu.org/software/bash/"
+                                    lang="Bash"
+                                    icon="bash"
+                                />
+                                <LangLogo
+                                    href="https://www.lua.org/"
+                                    lang="Lua"
+                                    icon="lua"
+                                />
+                            </div>
                         </p>
-                        <img
-                            class="inline-block p-2"
-                            src="/img/java-logo.png"
-                            alt="Java logo"
-                        />
                         <p>
-                            <span
-                                class="text-purple-700 dark:text-purple-500 font-medium text-lg"
-                            >
-                                Java/Kotlin
-                            </span>
-                            : The language I learned in university, along with JS/TS
-                            is the language I've used the most. I've mostly written
-                            DSAs and backends with it (JSP/Spring).
-                        </p>
-                        <img
-                            class="inline-block p-2"
-                            src="/img/rust-logo.png"
-                            alt="Rust logo"
-                        />
-                        <p>
-                            <span
-                                class="text-amber-800 dark:text-amber-600 font-medium text-lg"
-                            >
-                                Rust
-                            </span>
-                            : Currently my favorite language, I began learning it
-                            in late 2022. I've written a backend and I'm currently
-                            writing a programming language.
-                        </p>
-                        <img
-                            class="inline-block p-2"
-                            src="/img/go-logo.png"
-                            alt="Go logo"
-                        />
-                        <p>
-                            <span
-                                class="text-sky-600 dark:text-sky-400 font-medium text-lg"
-                            >
-                                Go
-                            </span>
-                            : I'm currently learning Go through advent of code, and
-                            I hope to use it for some projects in the future.
+                            In general I like to try new languages, explore new
+                            concepts and see new ways to solve problems.
                         </p>
                     </div>
-
-                    <p class="my-4">
-                        <span class="font-medium text-lg">Others</span>: Other
-                        languages I've used (mostly at uni):
-                        <br />
-                        <div class="text-center">
-                            <LangLogo href="https://www.iso.org/standard/74528.html" lang="C" icon="c" />
-                            <LangLogo href="https://isocpp.org/std/the-standard" lang="C++" icon="cpp" />
-                            <LangLogo href="https://learn.microsoft.com/en-us/dotnet/csharp/" lang="Microsoft Java" icon="c-sharp" />
-                            <LangLogo href="https://www.php.net/" lang="PHP" icon="php" />
-                            <LangLogo href="https://www.python.org/" lang="Python" icon="python" />
-                            <LangLogo href="https://dart.dev/" lang="Dart" icon="dart" />
-                        </div>
-                        <br />
-                        Other languages I've tried for fun:
-                        <br />
-                        <div class="text-center">
-                            <LangLogo href="https://elixir-lang.org/" lang="Elixir" icon="elixir" />
-                            <LangLogo href="https://www.erlang.org/" lang="Erlang" icon="erlang" />
-                            <LangLogo href="https://gleam.run/" lang="Gleam" icon="gleam" />
-                            <LangLogo href="https://coffeescript.org/" lang="CoffeeScript" icon="coffeescript" />
-                            <LangLogo href="https://racket-lang.org/" lang="Racket" icon="racket" />
-                            <LangLogo href="https://ziglang.org/" lang="Zig" icon="zig" />
-                            <LangLogo href="https://learn.microsoft.com/en-us/dotnet/fsharp/what-is-fsharp" lang="F#" icon="f-sharp" />
-                            <LangLogo href="https://www.haskell.org/" lang="Haskell" icon="haskell" />
-                            <LangLogo href="https://ocaml.org/" lang="OCaml" icon="ocaml" />
-                            <LangLogo href="https://rescript-lang.org/" lang="Rescript" icon="rescript" />
-                            <LangLogo href="https://www.swift.org/" lang="Swift" icon="swift" />
-                            <LangLogo href="https://www.scala-lang.org/" lang="Scala" icon="scala" />
-                            <LangLogo href="https://clojure.org/" lang="Clojure" icon="clojure" />
-                            <LangLogo href="https://www.gnu.org/software/bash/" lang="Bash" icon="bash" />
-                            <LangLogo href="https://www.lua.org/" lang="Lua" icon="lua" />
-                        </div>
-                    </p>
-                    <p>
-                        In general I like to try new languages, explore new
-                        concepts and see new ways to solve problems.
-                    </p>
                 </div>
             </div>
         </div>