diff --git a/src/app/_components/chosen-technologies/ChosenTechnologies.tsx b/src/app/_components/chosen-technologies/ChosenTechnologies.tsx
new file mode 100644
index 0000000..8121931
--- /dev/null
+++ b/src/app/_components/chosen-technologies/ChosenTechnologies.tsx
@@ -0,0 +1,27 @@
+import { Heading } from '@/components/heading/Heading';
+import { Content } from '@/components/surface/content/Content';
+
+import { techs } from './data/techs';
+import { TechCard } from './tech-card/TechCard';
+
+export const ChosenTechnologies = () => {
+  return (
+    <section className="bg-white text-black">
+      <Content className="py-10">
+        <Heading variant={'subtitle'} className={'text-black'}>
+          🔨 Tecnologias
+        </Heading>
+
+        <Heading variant="body" className="mt-3">
+          Segue abaixo as tecnologias que escolhi para desenvolver o meu site 🙃
+        </Heading>
+
+        <div className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
+          {techs.map((techData) => (
+            <TechCard key={techData.techName} techData={techData} />
+          ))}
+        </div>
+      </Content>
+    </section>
+  );
+};
diff --git a/src/app/_components/chosen-technologies/data/techs.ts b/src/app/_components/chosen-technologies/data/techs.ts
new file mode 100644
index 0000000..800832f
--- /dev/null
+++ b/src/app/_components/chosen-technologies/data/techs.ts
@@ -0,0 +1,44 @@
+import { GithubBlackIcon } from '@/components/icons/github-black/GithubBlack';
+import { NextJsIcon } from '@/components/icons/next-js/NextJs';
+import { ReactIcon } from '@/components/icons/react/React';
+import { TailwindIcon } from '@/components/icons/tailwind/Tailwind';
+import { TypescriptIcon } from '@/components/icons/typescript/Typescript';
+
+export type Tech = {
+  icon: () => React.JSX.Element;
+  techName: string;
+  description: string;
+};
+
+export const techs: Tech[] = [
+  {
+    icon: TypescriptIcon,
+    techName: 'TypeScript',
+    description:
+      'O TypeScript adiciona tipagem estática ao JavaScript. Escolhi TypeScript para melhorar a robustez e a manutenibilidade do código, proporcionando maior segurança contra erros e melhorando a produtividade com autocompletar e verificação de tipos.',
+  },
+  {
+    icon: ReactIcon,
+    techName: 'React.js',
+    description:
+      'É uma biblioteca JavaScript para construção de interfaces de usuário. Utilizei React.js para criar componentes reutilizáveis e proporcionar uma experiência de usuário dinâmica e eficiente.',
+  },
+  {
+    icon: NextJsIcon,
+    techName: 'Next.js',
+    description:
+      'É um framework React para aplicações web estáticas e renderização do lado do servidor. Escolhi Next.js para melhorar o desempenho do site, facilitando a geração de páginas estáticas e a otimização de SEO.',
+  },
+  {
+    icon: TailwindIcon,
+    techName: 'Tailwind CSS',
+    description:
+      'É um framework CSS utilitário que permite a construção rápida e eficiente de designs personalizados. Optei por Tailwind CSS para ter um controle preciso sobre o estilo dos componentes e acelerar o desenvolvimento com suas classes utilitárias prontas para uso.',
+  },
+  {
+    icon: GithubBlackIcon,
+    techName: 'Github & Github Pages',
+    description:
+      'Uma plataforma de hospedagem de código-fonte e controle de versão, enquanto o Github Pages oferece hospedagem gratuita para sites estáticos. Utilizei Github para versionamento do código e colaboração, e Github Pages para hospedar o site de forma gratuita e confiável.',
+  },
+];
diff --git a/src/app/_components/chosen-technologies/tech-card/TechCard.tsx b/src/app/_components/chosen-technologies/tech-card/TechCard.tsx
new file mode 100644
index 0000000..f708b44
--- /dev/null
+++ b/src/app/_components/chosen-technologies/tech-card/TechCard.tsx
@@ -0,0 +1,13 @@
+import { Heading } from '@/components/heading/Heading';
+
+import { Tech } from '../data/techs';
+
+export const TechCard = ({ techData }: { techData: Tech }) => (
+  <section className="flex flex-col items-center justify-center gap-3 rounded-3xl border-2 border-dashed border-gray-500 p-4 transition-transform hover:scale-105">
+    <div className="h-[50px] w-[50px]">{<techData.icon />}</div>
+    <Heading variant="body" className="font-extrabold">
+      {techData.techName}
+    </Heading>
+    <Heading variant="body">{techData.description}</Heading>
+  </section>
+);
diff --git a/src/app/_components/chosenTechnologies/ChosenTechnologies.tsx b/src/app/_components/chosenTechnologies/ChosenTechnologies.tsx
deleted file mode 100644
index d6b5cdf..0000000
--- a/src/app/_components/chosenTechnologies/ChosenTechnologies.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Heading } from '@/components/heading/Heading';
-import { GithubBlackIcon } from '@/components/icons/github-black/GithubBlack';
-import { NextJsIcon } from '@/components/icons/next-js/NextJs';
-import { ReactIcon } from '@/components/icons/react/React';
-import { TailwindIcon } from '@/components/icons/tailwind/Tailwind';
-import { TypescriptIcon } from '@/components/icons/typescript/Typescript';
-import { Content } from '@/components/surface/content/Content';
-
-export const ChosenTechnologies = () => {
-  const techs = [
-    {
-      icon: <TypescriptIcon />,
-      techName: 'TypeScript',
-      description:
-        'O TypeScript adiciona tipagem estática ao JavaScript. Escolhi TypeScript para melhorar a robustez e a manutenibilidade do código, proporcionando maior segurança contra erros e melhorando a produtividade com autocompletar e verificação de tipos.',
-    },
-    {
-      icon: <ReactIcon />,
-      techName: 'React.js',
-      description:
-        'É uma biblioteca JavaScript para construção de interfaces de usuário. Utilizei React.js para criar componentes reutilizáveis e proporcionar uma experiência de usuário dinâmica e eficiente.',
-    },
-    {
-      icon: <NextJsIcon />,
-      techName: 'Next.js',
-      description:
-        'É um framework React para aplicações web estáticas e renderização do lado do servidor. Escolhi Next.js para melhorar o desempenho do site, facilitando a geração de páginas estáticas e a otimização de SEO.',
-    },
-    {
-      icon: <TailwindIcon />,
-      techName: 'Tailwind CSS',
-      description:
-        'É um framework CSS utilitário que permite a construção rápida e eficiente de designs personalizados. Optei por Tailwind CSS para ter um controle preciso sobre o estilo dos componentes e acelerar o desenvolvimento com suas classes utilitárias prontas para uso.',
-    },
-    {
-      icon: <GithubBlackIcon />,
-      techName: 'Github & Github Pages',
-      description:
-        'Uma plataforma de hospedagem de código-fonte e controle de versão, enquanto o Github Pages oferece hospedagem gratuita para sites estáticos. Utilizei Github para versionamento do código e colaboração, e Github Pages para hospedar o site de forma gratuita e confiável.',
-    },
-  ];
-
-  return (
-    <section className="bg-white text-black">
-      <Content className="py-10">
-        <Heading variant={'subtitle'} className={'text-black'}>
-          🔨 Tecnologias
-        </Heading>
-
-        <Heading variant="body" className="mt-3">
-          Segue abaixo as tecnologias que escolhi para desenvolver o meu site 🙃
-        </Heading>
-
-        <div className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
-          {techs.map((techObj) => (
-            <section
-              key={techObj.techName}
-              className="flex flex-col items-center justify-center gap-3 rounded-3xl border-2 border-dashed border-gray-500 p-4 transition-transform hover:scale-105"
-            >
-              <div className="h-[50px] w-[50px]">{techObj.icon}</div>
-              <Heading variant="body" className="font-extrabold">
-                {techObj.techName}
-              </Heading>
-              <Heading variant="body">{techObj.description}</Heading>
-            </section>
-          ))}
-        </div>
-      </Content>
-    </section>
-  );
-};
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a188324..00fc414 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChosenTechnologies } from '@/app/_components/chosenTechnologies/ChosenTechnologies';
+import { ChosenTechnologies } from '@/app/_components/chosen-technologies/ChosenTechnologies';
 import { Experience } from '@/app/_components/experience/Experience';
 import { Footer } from '@/app/_components/footer/Footer';
 import { Header } from '@/app/_components/header/Header';