diff --git a/src/components/sections/ExperienceComponent.astro b/src/components/sections/ExperienceComponent.astro
index 9eb795d..0f76169 100644
--- a/src/components/sections/ExperienceComponent.astro
+++ b/src/components/sections/ExperienceComponent.astro
@@ -30,6 +30,10 @@ import Line from "../elements/NetworkLine.astro";
 							<li>C#</li>
 							<li>Vue.JS</li>
 						</ul>
+						<ul class="list-inside list-disc">
+							<li>MongoDB</li>
+							<li>PostgreSQL</li>
+						</ul>
 					</div>
 				</div>
 			</Card>
@@ -38,7 +42,7 @@ import Line from "../elements/NetworkLine.astro";
 				<div class="card-content px-4 py-4 md:px-8 md:py-8">
 					<div class="mb-3 flex w-full flex-col justify-start gap-1">
 						<h2 class="text-xl font-bold">
-							Lead Frontend Web Developer
+							Lead Full Stack Developer
 						</h2>
 						<h3 class="font-bold">@ JW BizTech</h3>
 						<h3>Dec 2024 - Present</h3>
diff --git a/src/components/sections/MoreSkills.astro b/src/components/sections/MoreSkills.astro
new file mode 100644
index 0000000..cc38bb8
--- /dev/null
+++ b/src/components/sections/MoreSkills.astro
@@ -0,0 +1,123 @@
+---
+import Card from "../elements/Card.astro";
+import Line from "../elements/NetworkLine.astro";
+---
+
+<div id="Experience" class="h-fit">
+	<div class="flex flex-col items-center">
+		<div class="w-[90%] md:w-[600px]">
+			<Line height="50px" />
+			<div class="mx-auto w-[90%] md:w-[600px]">
+				<Card primaryColor="#9D76C1">
+					<div class="card-content">
+						<div class="justify-left flex w-full flex-col">
+							<h2 class="text-2xl font-bold">Content Creation</h2>
+						</div>
+						<hr class="w-full" />
+						<p class="text-left">
+							Since I was little, I loved watching YouTube videos
+							and the idea of bringing joy and laughter to a wider
+							audience. Thus, I began my journey in content
+							creation through YouTube videos and Twitch
+							streaming. I typically do coworking & study streams
+							to keep myself accountable and encourage
+							productivity amongst viewers. I also do software and
+							game development streams where I showcase my
+							workflow.
+						</p>
+						<div
+							class="flex w-full flex-row flex-wrap justify-start"
+						>
+							<div
+								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
+							>
+								OBS
+							</div>
+							<div
+								class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
+							>
+								DaVinci Resolve
+							</div>
+							<div
+								class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
+							>
+								Twitch
+							</div>
+							<div
+								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
+							>
+								YouTube
+							</div>
+						</div>
+					</div>
+				</Card>
+			</div>
+			<Line height="50px" />
+			<div class="mx-auto w-[90%] md:w-[600px]">
+				<Card primaryColor="#9D76C1">
+					<div class="card-content">
+						<div class="justify-left flex w-full flex-col">
+							<h2 class="text-2xl font-bold">
+								Mobile Development
+							</h2>
+						</div>
+						<hr class="w-full" />
+						<p class="text-left">
+							In my Mobile App Development unit in University, I
+							am tasked to develop Android apps using Android
+							Studio. The final app project I had developed was a
+							LLM-powered quiz app with features such as choosing
+							your own topics, viewing your question attempt
+							history afterwards, and upgrading your tier with
+							Google Pay.
+						</p>
+						<p class="text-left">
+							The marking tutor was impressed with my work, and
+							offered me to join a research lab because I had good
+							potential.
+						</p>
+						<div
+							class="flex w-full flex-row flex-wrap justify-start"
+						>
+							<div
+								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#106539] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#106539] hover:text-white md:bg-gray-500"
+							>
+								Android
+							</div>
+							<div
+								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
+							>
+								Java
+							</div>
+							<div
+								class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
+							>
+								Kotlin
+							</div>
+						</div>
+					</div>
+				</Card>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		background-image: radial-gradient(
+			rgba(255, 255, 255, 0.1) 1px,
+			transparent 1px
+		);
+		background-position: 50% 50%;
+		background-size: 1.1rem 1.1rem;
+		padding-top: 2rem;
+		padding-left: 2rem;
+		padding-right: 2rem;
+		padding-bottom: 0.5rem;
+		border-radius: 1.25rem;
+		overflow: hidden;
+	}
+</style>
diff --git a/src/components/sections/SkillsComponent.astro b/src/components/sections/SkillsComponent.astro
index 1f5a251..884254e 100644
--- a/src/components/sections/SkillsComponent.astro
+++ b/src/components/sections/SkillsComponent.astro
@@ -4,225 +4,230 @@ import Line from "../elements/NetworkLine.astro";
 ---
 
 <div class="h-fit w-full pt-20">
-    <h1 class="text-center text-5xl">Skills</h1>
-    <div class="flex flex-col items-center">
-        <div class="w-[90%] pt-10 md:w-[600px]">
-            <Card primaryColor="#19a7ce">
-                <div class="card-content">
-                    <div class="justify-left flex w-full flex-col">
-                        <h2 class="text-2xl font-bold">Frontend Development</h2>
-                    </div>
-                    <hr class="w-full" />
-                    <p class="text-left">
-                        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 frontend frameworks such
-                        as Svelte, React and Astro.
-                    </p>
-                    <div class="flex w-full flex-row flex-wrap justify-start">
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
-                        >
-                            HTML
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-700 md:bg-gray-500"
-                        >
-                            CSS
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300 hover:bg-yellow-400 md:bg-gray-500 md:text-white md:hover:text-black"
-                        >
-                            Javascript
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3178C6] md:bg-gray-500 md:text-white md:hover:text-white"
-                        >
-                            TypeScript
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
-                        >
-                            Svelte
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#00D8FF] md:bg-gray-500 md:text-white md:hover:text-black"
-                        >
-                            React
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-green-500 md:bg-gray-500 md:text-white md:hover:text-black"
-                        >
-                            Vue
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#21759B] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#21759B] md:bg-gray-500"
-                        >
-                            WordPress
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-white px-3 py-1 text-black transition-colors duration-300 hover:bg-white md:bg-gray-500 md:text-white md:hover:text-black"
-                        >
-                            Astro
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3366CC] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3366CC] hover:text-white md:bg-gray-500"
-                        >
-                            HTMX
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#07B6D4] md:bg-gray-500 md:text-white md:hover:text-black"
-                        >
-                            TailwindCSS
-                        </div>
-                    </div>
-                </div>
-            </Card>
-            <Line height="50px" />
-            <Card primaryColor="#474F7A">
-                <div class="card-content">
-                    <div class="justify-left flex w-full flex-col">
-                        <h2 class="text-2xl font-bold">Backend Development</h2>
-                    </div>
-                    <hr class="w-full" />
-                    <p class="text-left">
-                        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="flex w-full flex-row flex-wrap justify-start">
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
-                        >
-                            Python
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#672079] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#672079] md:bg-gray-500"
-                        >
-                            C#
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
-                        >
-                            Java
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
-                        >
-                            Kotlin
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3D5694] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3D5694] md:bg-gray-500"
-                        >
-                            PHP
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#006080] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#006080] md:bg-gray-500"
-                        >
-                            Go
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
-                        >
-                            Rust
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#316192] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
-                        >
-                            PostgreSQL
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
-                        >
-                            MySQL
-                        </div>
-                    </div>
-                </div>
-            </Card>
-            <Line height="50px" />
-            <Card primaryColor="#a1eebd">
-                <div class="card-content">
-                    <div class="justify-left flex w-full flex-col">
-                        <h2 class="text-2xl font-bold">Data Science</h2>
-                    </div>
-                    <hr class="w-full" />
-                    <p class="text-left">
-                        My first exposure to data science was through learning
-                        Computer Vision. I learn how to use OpenCV in Python to
-                        open a webcam and detect faces. Later on, I took a
-                        Diploma course that is focused in data science, where I
-                        learnt how to do the fundamentals of data science such
-                        as extracting, transforming and loading data, as well as
-                        data visualisation.
-                    </p>
-                    <div class="flex w-full flex-row flex-wrap justify-start">
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
-                        >
-                            Python
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-cyan-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-cyan-500 md:bg-gray-500"
-                        >
-                            R
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#10652F] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#10652F] md:bg-gray-500"
-                        >
-                            OpenCV
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-blue-500 md:bg-gray-500 md:text-white md:hover:text-black"
-                        >
-                            SAS
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
-                        >
-                            MySQL
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-800 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-800 md:bg-gray-500"
-                        >
-                            Pandas
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-green-700 md:bg-gray-500"
-                        >
-                            Selenium
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-200 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-200 md:bg-gray-500 md:text-white md:hover:text-black"
-                        >
-                            BeautifulSoup4
-                        </div>
-                    </div>
-                </div>
-            </Card>
-        </div>
-    </div>
+	<h1 class="text-center text-5xl">Skills</h1>
+	<div class="flex flex-col items-center">
+		<div class="w-[90%] pt-10 md:w-[600px]">
+			<Card primaryColor="#19a7ce">
+				<div class="card-content">
+					<div class="justify-left flex w-full flex-col">
+						<h2 class="text-2xl font-bold">Frontend Development</h2>
+					</div>
+					<hr class="w-full" />
+					<p class="text-left">
+						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 frontend frameworks such
+						as Svelte, React and Astro.
+					</p>
+					<div class="flex w-full flex-row flex-wrap justify-start">
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
+						>
+							HTML
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-700 md:bg-gray-500"
+						>
+							CSS
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300 hover:bg-yellow-400 md:bg-gray-500 md:text-white md:hover:text-black"
+						>
+							Javascript
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3178C6] md:bg-gray-500 md:text-white md:hover:text-white"
+						>
+							TypeScript
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
+						>
+							Svelte
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#00D8FF] md:bg-gray-500 md:text-white md:hover:text-black"
+						>
+							React
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-green-500 md:bg-gray-500 md:text-white md:hover:text-black"
+						>
+							Vue
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#21759B] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#21759B] md:bg-gray-500"
+						>
+							WordPress
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-white px-3 py-1 text-black transition-colors duration-300 hover:bg-white md:bg-gray-500 md:text-white md:hover:text-black"
+						>
+							Astro
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3366CC] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3366CC] hover:text-white md:bg-gray-500"
+						>
+							HTMX
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#07B6D4] md:bg-gray-500 md:text-white md:hover:text-black"
+						>
+							TailwindCSS
+						</div>
+					</div>
+				</div>
+			</Card>
+			<Line height="50px" />
+			<Card primaryColor="#474F7A">
+				<div class="card-content">
+					<div class="justify-left flex w-full flex-col">
+						<h2 class="text-2xl font-bold">Backend Development</h2>
+					</div>
+					<hr class="w-full" />
+					<p class="text-left">
+						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="flex w-full flex-row flex-wrap justify-start">
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
+						>
+							Python
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#672079] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#672079] md:bg-gray-500"
+						>
+							C#
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500"
+						>
+							Java
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500"
+						>
+							Kotlin
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3D5694] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3D5694] md:bg-gray-500"
+						>
+							PHP
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#006080] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#006080] md:bg-gray-500"
+						>
+							Go
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500"
+						>
+							Rust
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#316192] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
+						>
+							PostgreSQL
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
+						>
+							MySQL
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#09934E] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#09934E] md:bg-gray-500"
+						>
+							MongoDB
+						</div>
+					</div>
+				</div>
+			</Card>
+			<Line height="50px" />
+			<Card primaryColor="#a1eebd">
+				<div class="card-content">
+					<div class="justify-left flex w-full flex-col">
+						<h2 class="text-2xl font-bold">Data Science</h2>
+					</div>
+					<hr class="w-full" />
+					<p class="text-left">
+						My first exposure to data science was through learning
+						Computer Vision. I learn how to use OpenCV in Python to
+						open a webcam and detect faces. Later on, I took a
+						Diploma course that is focused in data science, where I
+						learnt how to do the fundamentals of data science such
+						as extracting, transforming and loading data, as well as
+						data visualisation.
+					</p>
+					<div class="flex w-full flex-row flex-wrap justify-start">
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500"
+						>
+							Python
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-cyan-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-cyan-500 md:bg-gray-500"
+						>
+							R
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#10652F] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#10652F] md:bg-gray-500"
+						>
+							OpenCV
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-500 px-3 py-1 text-black transition-colors duration-300 hover:bg-blue-500 md:bg-gray-500 md:text-white md:hover:text-black"
+						>
+							SAS
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500"
+						>
+							MySQL
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-blue-800 px-3 py-1 text-white transition-colors duration-300 hover:bg-blue-800 md:bg-gray-500"
+						>
+							Pandas
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-green-700 px-3 py-1 text-white transition-colors duration-300 hover:bg-green-700 md:bg-gray-500"
+						>
+							Selenium
+						</div>
+						<div
+							class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-200 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-200 md:bg-gray-500 md:text-white md:hover:text-black"
+						>
+							BeautifulSoup4
+						</div>
+					</div>
+				</div>
+			</Card>
+		</div>
+	</div>
 </div>
 
 <style>
-    .card-content {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        background-image: radial-gradient(
-            rgba(255, 255, 255, 0.1) 1px,
-            transparent 1px
-        );
-        background-position: 50% 50%;
-        background-size: 1.1rem 1.1rem;
-        padding-top: 2rem;
-        padding-left: 2rem;
-        padding-right: 2rem;
-        padding-bottom: 0.5rem;
-        border-radius: 1.25rem;
-        overflow: hidden;
-    }
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		background-image: radial-gradient(
+			rgba(255, 255, 255, 0.1) 1px,
+			transparent 1px
+		);
+		background-position: 50% 50%;
+		background-size: 1.1rem 1.1rem;
+		padding-top: 2rem;
+		padding-left: 2rem;
+		padding-right: 2rem;
+		padding-bottom: 0.5rem;
+		border-radius: 1.25rem;
+		overflow: hidden;
+	}
 </style>
diff --git a/src/pages/skills.astro b/src/pages/skills.astro
index 28ad411..4996854 100644
--- a/src/pages/skills.astro
+++ b/src/pages/skills.astro
@@ -2,81 +2,38 @@
 import NavBar from "../components/sections/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import SkillsComponent from "../components/sections/SkillsComponent.astro";
-import Line from "../components/elements/NetworkLine.astro";
-import Card from "../components/elements/Card.astro";
+import MoreSkills from "../components/sections/MoreSkills.astro";
 import Footer from "../components/sections/FooterComponent.astro";
 ---
 
 <Layout
-    title="Skills"
-    description="Learn what skills RythonDev has honed in the past few years"
+	title="Skills"
+	description="Learn what skills RythonDev has honed in the past few years"
 >
-    <NavBar />
-    <div id="skills" class="mt-10 pb-20">
-        <SkillsComponent />
-        <Line height="50px" />
-        <div class="mx-auto w-[90%] md:w-[600px]">
-            <Card primaryColor="#9D76C1">
-                <div class="card-content">
-                    <div class="justify-left flex w-full flex-col">
-                        <h2 class="text-2xl font-bold">Content Creation</h2>
-                    </div>
-                    <hr class="w-full" />
-                    <p class="text-left">
-                        Since I was little, I loved watching YouTube videos and
-                        the idea of bringing joy and laughter to a wider
-                        audience. Thus, I began my journey in content creation
-                        through YouTube videos and Twitch streaming. I typically
-                        do coworking & study streams to keep myself accountable
-                        and encourage productivity amongst viewers. I also do
-                        software and game development streams where I showcase
-                        my workflow.
-                    </p>
-                    <div class="flex w-full flex-row flex-wrap justify-start">
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#141414] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#141414] hover:text-white md:bg-gray-500"
-                        >
-                            OBS
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-gray-50 px-3 py-1 text-black transition-colors duration-300 hover:bg-gray-50 hover:text-black md:bg-gray-500 md:text-white"
-                        >
-                            DaVinci Resolve
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-purple-500 px-3 py-1 text-white transition-colors duration-300 hover:bg-purple-500 md:bg-gray-500"
-                        >
-                            Twitch
-                        </div>
-                        <div
-                            class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ff0000] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ff0000] hover:text-white md:bg-gray-500"
-                        >
-                            YouTube
-                        </div>
-                    </div>
-                </div>
-            </Card>
-        </div>
-    </div>
-    <Footer />
+	<NavBar />
+	<div id="skills" class="mt-10 pb-20">
+		<SkillsComponent />
+		<MoreSkills />
+	</div>
+	<Footer />
 </Layout>
 
 <style>
-    .card-content {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        background-image: radial-gradient(
-            rgba(255, 255, 255, 0.1) 1px,
-            transparent 1px
-        );
-        background-position: 50% 50%;
-        background-size: 1.1rem 1.1rem;
-        padding-top: 2rem;
-        padding-left: 2rem;
-        padding-right: 2rem;
-        padding-bottom: 0.5rem;
-        border-radius: 1.25rem;
-        overflow: hidden;
-    }
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		background-image: radial-gradient(
+			rgba(255, 255, 255, 0.1) 1px,
+			transparent 1px
+		);
+		background-position: 50% 50%;
+		background-size: 1.1rem 1.1rem;
+		padding-top: 2rem;
+		padding-left: 2rem;
+		padding-right: 2rem;
+		padding-bottom: 0.5rem;
+		border-radius: 1.25rem;
+		overflow: hidden;
+	}
 </style>