diff --git a/src/assets/images/React.png b/src/assets/images/React.png
new file mode 100644
index 0000000..e48882f
Binary files /dev/null and b/src/assets/images/React.png differ
diff --git a/src/pages/skillInformationStep/SkillInformationStep.tsx b/src/pages/skillInformationStep/SkillInformationStep.tsx
index 708cb5f..1c85343 100644
--- a/src/pages/skillInformationStep/SkillInformationStep.tsx
+++ b/src/pages/skillInformationStep/SkillInformationStep.tsx
@@ -1,7 +1,8 @@
import styles from './SlillInformation.module.scss';
-
import { IonContent, IonPage } from "@ionic/react";
import StepsHeader from "../../components/stepsHeader/StepsHeader";
+import Skills from './Skills';
+import reactIcon from '../../assets/images/React.png';
const SkillInformationStep: React.FC = () => {
return (
@@ -9,6 +10,9 @@ const SkillInformationStep: React.FC = () => {
+
+
+
)
}
diff --git a/src/pages/skillInformationStep/Skills.module.scss b/src/pages/skillInformationStep/Skills.module.scss
new file mode 100644
index 0000000..abb89f7
--- /dev/null
+++ b/src/pages/skillInformationStep/Skills.module.scss
@@ -0,0 +1,16 @@
+.skill {
+ display: flex;
+ align-items: center;
+ box-shadow: 0px 0px 5px #00000012;
+ width: 16rem;
+ height: 7rem;
+ border-radius: 2rem;
+ justify-content: space-evenly;
+ margin: 5rem;
+
+ .name {
+ color: #868686;
+ font-size: 1.4rem;
+ font-weight: 500;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/skillInformationStep/Skills.tsx b/src/pages/skillInformationStep/Skills.tsx
new file mode 100644
index 0000000..6b99453
--- /dev/null
+++ b/src/pages/skillInformationStep/Skills.tsx
@@ -0,0 +1,18 @@
+import { IonIcon } from '@ionic/react';
+import styles from './Skills.module.scss';
+
+interface Props {
+ icon: string;
+ name: string;
+}
+
+const Skills: React.FC = (props) => {
+ return (
+
+

+
{props.name}
+
+ )
+}
+
+export default Skills;
\ No newline at end of file