diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
index 17c1998..c7bdeeb 100644
--- a/src/app/about/about.component.html
+++ b/src/app/about/about.component.html
@@ -1,11 +1,13 @@
 <div class="contents">
   <p>Ingrediënten voor 10 jaar ervaring</p>
-  <p>Indesign<span>10 kg</span></p>
-  <p>> educatief zetwerk<span>10kg</span></p>
-  <p>> catalogi<span>1 cup</span></p>
-  <p>> magazines<span>27 tbsp</span></p>
-  <p>Illustrator<span>500ml</span></p>
-  <p>> verpakkingen<span>14 oz</span></p>
-  <p>een scheut UX en UI<span>1/2 cup</span></p>
-  <p>een mespuntje video<span>2 inch</span></p>
+  <ul>
+    <li>Indesign<span>10 kg</span></li>
+    <li class="indent">educatief zetwerk<span>85dl</span></li>
+    <li class="indent">catalogi<span>1 cup</span></li>
+    <li class="indent">magazines<span>27 tbsp</span></li>
+    <li>Illustrator<span>500ml</span></li>
+    <li class="indent">verpakkingen<span>14 oz</span></li>
+    <li>een scheut UX en UI<span>1/2 cup</span></li>
+    <li>een mespuntje video<span>2 inch</span></li>
+  </ul>
 </div>
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
index aeba1f5..227dce8 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/about/about.component.scss
@@ -4,28 +4,69 @@
   justify-content: space-between;
 }
 
+// .contents {
+//   display: grid;
+//   grid-template-columns: repeat(2, 1fr);
+//   grid-template-rows: repeat(5, 3rem);
+//   grid-column-gap: 4rem;
+//   grid-row-gap: 0;
+//   width: calc(100% - 2rem);
+//   align-items: center;
+//   grid-auto-flow: column;
+
+//   p {
+//     margin: 0;
+//     width: 100%;
+//     display: flex;
+//     justify-content: space-between;
+//     padding: 1rem;
+//     border-bottom: 0.1rem solid var(--text-color);
+//   }
+
+//   p:first-child {
+//     grid-column: 1 / 3;
+//     background-color: var(--text-color);
+//     color: var(--background-color);
+//     font-weight: 500;
+//   }
+// }
+
+
 .contents {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(5, 3rem);
-  grid-column-gap: 4rem;
-  grid-row-gap: 0;
   width: calc(100% - 2rem);
-  align-items: center;
 
   p {
-    margin: 0;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding: 1rem;
-    border-bottom: 0.1rem solid var(--text-color);
-  }
-
-  p:first-child {
-    grid-column: 1 / 3;
     background-color: var(--text-color);
     color: var(--background-color);
     font-weight: 500;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    padding: 0 2rem;
+  }
+
+  ul {
+    columns: 2;
+    list-style: none;
+    padding: 0;
+
+    li {
+      height: 3rem;
+      padding: 0 1rem;
+      border-bottom: 0.1rem solid var(--text-color);
+      display: flex;
+      align-items: center;
+      width: calc(100% - 5rem);
+
+      span {
+        margin-left: auto;
+      }
+    }
+
+    .indent:before {
+      content: ">";
+      margin-right: 1rem;
+    }
+
   }
 }