diff --git a/src/components/sections/SkillsComponent.astro b/src/components/sections/SkillsComponent.astro
index a7f31c6..0007d79 100644
--- a/src/components/sections/SkillsComponent.astro
+++ b/src/components/sections/SkillsComponent.astro
@@ -10,15 +10,15 @@ import Line from "../elements/NetworkLine.astro";
             <Card primaryColor="#19a7ce">
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full">
-                        <h2 class="font-bold text-2xl">Web Development</h2>
+                        <h2 class="font-bold text-2xl">Frontend Development</h2>
                     </div>
                     <hr class="w-full" />
                     <p class="text-left lg:text-justify">
                         I started my web development journey by building
                         websites and widgets using vanilla HTML, CSS, Javascript
                         and Express. As I learnt more about the fundamentals of
-                        web development, I delved into frameworks such as
-                        Svelte, React and Astro.
+                        web development, I delved into frontend frameworks such
+                        as Svelte, React and Astro.
                     </p>
                     <div class="w-full flex flex-row flex-wrap justify-start">
                         <div
@@ -54,39 +54,7 @@ import Line from "../elements/NetworkLine.astro";
                             TypeScript
                         </div>
                         <div
-                            class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-                        >
-                            PHP
-                        </div>
-                        <div
-                            class="w-fit text-white bg-gray-500 hover:bg-[#00ADD8] hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-                        >
-                            Go
-                        </div>
-                        <div
-                            class="w-fit text-white bg-gray-500 hover:bg-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-                        >
-                            Rust
-                        </div>
-                        <div
-                            class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black
-                                rounded-full px-3 py-1 mr-1 my-1
-                                cursor-default
-                                transition-colors duration-300"
-                        >
-                            Express
-                        </div>
-                        <div
-                            class="w-fit text-white bg-gray-500 hover:bg-orange-500
+                            class="w-fit text-white bg-gray-500 hover:bg-[#FF3E00]
                                 rounded-full px-3 py-1 mr-1 my-1
                                 cursor-default
                                 transition-colors duration-300"
@@ -134,7 +102,7 @@ import Line from "../elements/NetworkLine.astro";
                             TailwindCSS
                         </div>
                         <div
-                            class="w-fit text-white bg-gray-500 hover:bg-[#8500C7]
+                            class="w-fit text-white bg-gray-500 hover:bg-[#646CFF]
                                 rounded-full px-3 py-1 mr-1 my-1
                                 cursor-default
                                 transition-colors duration-300"
@@ -145,6 +113,137 @@ import Line from "../elements/NetworkLine.astro";
                 </div>
             </Card>
             <Line height="50px" />
+            <Card primaryColor="#474F7A">
+                <div class="card-content">
+                    <div class="flex flex-col justify-left w-full">
+                        <h2 class="font-bold text-2xl">Backend Development</h2>
+                    </div>
+                    <hr class="w-full" />
+                    <p class="text-left lg:text-justify">
+                        In the beginning, I used my Python skills to entertain
+                        and to automate the boring stuff, such as using Selenium
+                        for automation + web scraping, play chess by automating
+                        mouse controls and build Discord bots. Now, I am
+                        experienced with backend web development, managing
+                        databases and building performant applications.
+                    </p>
+                    <div class="w-full flex flex-row flex-wrap justify-start">
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#3776AB]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Python
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Javascript
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            TypeScript
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            PHP
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#00ADD8]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Go
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Rust
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#4479A1]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            MySQL
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Express
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#339933]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Node.js
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#FBEFDF] hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Bun
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#FF3E00]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Sveltekit
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Next.js
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#21759B]
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            WordPress
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-[#24C8D8] hover:text-black
+                                rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
+                                transition-colors duration-300"
+                        >
+                            Tauri
+                        </div>
+                    </div>
+                </div>
+            </Card>
+            <Line height="50px" />
             <Card primaryColor="#a1eebd">
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full">
@@ -162,7 +261,7 @@ import Line from "../elements/NetworkLine.astro";
                     </p>
                     <div class="w-full flex flex-row flex-wrap justify-start">
                         <div
-                            class="w-fit text-white bg-gray-500 hover:text-white hover:bg-blue-700
+                            class="w-fit text-white bg-gray-500 hover:bg-[#3776AB]
                                 rounded-full px-3 py-1 mr-1 my-1
                                 cursor-default
                                 transition-colors duration-300"
@@ -194,7 +293,7 @@ import Line from "../elements/NetworkLine.astro";
                             SAS
                         </div>
                         <div
-                            class="w-fit text-white bg-gray-500 hover:bg-orange-700
+                            class="w-fit text-white bg-gray-500 hover:bg-[#4479A1]
                                 rounded-full px-3 py-1 mr-1 my-1
                                 cursor-default
                                 transition-colors duration-300"