diff --git a/src/components/pages/Front.page.jsx b/src/components/pages/Front.page.jsx
index b5b0eb9..67fce02 100644
--- a/src/components/pages/Front.page.jsx
+++ b/src/components/pages/Front.page.jsx
@@ -12,6 +12,7 @@ import AppearText from '../text/AppearText';
 import Cdiv from '../core/Cdiv';
 import FadeComponent from '../core/FadeComponent';
 import Introduction from '../sections/Introduction';
+import Skills from '../sections/Skills';
 
 //============================================================
 // Component
@@ -66,12 +67,12 @@ const FrontPage = () => {
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
             <path
               className="fill-frost-200"
-              fill-opacity="1"
-              d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,101.3C1120,107,1280,85,1360,74.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
+              d="M0,192L120,202.7C240,213,480,235,720,240C960,245,1200,235,1320,229.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
           </svg>
         </FadeComponent>
         <FadeComponent delay={DELAY * 2.5}>
           <Introduction />
+          <Skills />
         </FadeComponent>
       </div>
     </>
diff --git a/src/components/sections/Introduction.jsx b/src/components/sections/Introduction.jsx
index 38c5175..603ab7d 100644
--- a/src/components/sections/Introduction.jsx
+++ b/src/components/sections/Introduction.jsx
@@ -1,16 +1,8 @@
-//============================================================
-// Essential Imports
-//============================================================
-
 import React from 'react';
 
-//============================================================
-// Component
-//============================================================
-
 const Introduction = () => {
   return (
-    <div className="w-full flex justify-center bg-frost-200">
+    <div className="w-full flex h-[40vh] justify-center items-center bg-frost-200">
       <div className="w-full flex md:flex-row flex-col p-4 max-w-5xl gap-4">
         <div className="w-full">
           <h1 className="text-7xl font-display font-bold text-polar-night-400">Hi, I'm John</h1>
@@ -22,12 +14,6 @@ const Introduction = () => {
             a Linux Enthusiat and I run Garuda Linux as my main OS on all my machines.
           </p>
         </div>
-        <div className="md:w-1/2 w-full flex justify-center">
-          <img
-            src="https://i.imgur.com/dlD9BZc.jpeg"
-            className="rounded-full object-contain max-h-[50vh]"
-          />
-        </div>
       </div>
     </div>
   );
diff --git a/src/components/sections/Skills.jsx b/src/components/sections/Skills.jsx
new file mode 100644
index 0000000..4d2c89b
--- /dev/null
+++ b/src/components/sections/Skills.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Skills = () => {
+  return (
+    <div className="w-full flex h-[40vh] justify-center  items-center bg-frost-200">
+      <div className="w-full fle md:flex-row flex-col p-4 max-w-5xl gap-4">
+        <div className="w-full flex flex-col gap-4">
+          <h1 className="text-7xl text-center font-display font-bold text-polar-night-400">
+            Skills
+          </h1>
+          <div className="w-full flex flex-col list-disc"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Skills;