diff --git a/src/pages/subpages/competences.liquid b/src/pages/subpages/competences.liquid
index aeb4c35..eebbc20 100644
--- a/src/pages/subpages/competences.liquid
+++ b/src/pages/subpages/competences.liquid
@@ -2,11 +2,11 @@
 title: Compétences
 order: 1
 showTitle: false
-classes: 'competences-section experiences-section'
+classes: 'competences-section langues-section'
 ---
 
-<div style="display: flex;flex-direction: row;gap:20rem;">
-  <div>
+<div>
+  <div class="col">
     <h2>{{title}}</h2>
     <ul style="list-style-type: initial">
       <li>HTML</li>
@@ -18,7 +18,7 @@ classes: 'competences-section experiences-section'
     </ul>
   </div>
 
-  <div>
+  <div class="col">
     <h2>Langues</h2>
     <ul style="list-style-type: initial">
       <li>HTML</li>
diff --git a/src/scss/critical.scss b/src/scss/critical.scss
index 2b826ed..5e696d1 100644
--- a/src/scss/critical.scss
+++ b/src/scss/critical.scss
@@ -201,6 +201,7 @@ i {
 }
 
 .about-section, 
+.competences-section, 
 .projects-section,
 .experiences-section,
 .download-section {
@@ -323,4 +324,30 @@ i {
   p {
       font-size: 1.4rem;
   }
+}
+
+.competences-section {
+  margin-left: 4vw;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .col {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
+  
+  @media screen and (min-width: 991px) {
+    > div {
+      flex-direction: row;
+    }
+
+    .col {
+      width: 40%;
+    }
+    
+  }
 }
\ No newline at end of file