diff --git a/app/page.tsx b/app/page.tsx
index 1aa6733..64863ec 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
-import { About } from './components/about';
-import { Person } from './components/person';
-import { Work } from './components/work';
+import { About } from '@/components/about';
+import { Person } from '@/components/person';
+import { Work } from '@/components/work';
 
 export default function HomePage() {
   return (
diff --git a/app/components/about.tsx b/components/about.tsx
similarity index 100%
rename from app/components/about.tsx
rename to components/about.tsx
diff --git a/app/components/person.tsx b/components/person.tsx
similarity index 100%
rename from app/components/person.tsx
rename to components/person.tsx
diff --git a/components/skills.tsx b/components/skills.tsx
new file mode 100644
index 0000000..dfbeae7
--- /dev/null
+++ b/components/skills.tsx
@@ -0,0 +1,17 @@
+import { useTranslations } from 'next-intl';
+
+export function About() {
+  const t = useTranslations('Skills');
+  return (
+    <section id="skills">
+      <div className="flex min-h-0 flex-col gap-y-3">
+        <h2 className="text-xl font-bold">Skills</h2>
+        <div className="flex flex-wrap gap-1">
+          {DATA.skills.map((skill, id) => (
+            <Badge key={skill}>{skill}</Badge>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/work.tsx b/components/work.tsx
similarity index 100%
rename from app/components/work.tsx
rename to components/work.tsx