diff --git a/client/cypress/e2e/frontend/survey.spec.js b/client/cypress/e2e/frontend/survey.spec.js
index 9fb404b2..f5b33178 100644
--- a/client/cypress/e2e/frontend/survey.spec.js
+++ b/client/cypress/e2e/frontend/survey.spec.js
@@ -5,7 +5,7 @@ describe('Survey', () => {
     cy.setup();
   });
 
-  it.skip('should display and fill out the survey', () => {
+  it('should display a matrix correctly', () => {
     // todo: fix bitbucket hickup and re-enable
     let answer = null;
 
@@ -21,7 +21,53 @@ describe('Survey', () => {
           survey: {
             id: 'U3VydmV5Tm9kZTox',
             title: 'Test',
-            data: '{"pages": [{"name": "Seite 1", "elements": [{"name": "Fall 1", "type": "panel", "title": "Fall 1", "elements": [{"name": "A: Max gibt ihr das Geld und muss das Billardspiel absagen.", "type": "text", "placeHolder": "Passende Tugenden erfassen...", "correctAnswer": "Triss"}, {"name": "question2", "type": "text", "title": "B: Max gibt ihr das Geld nicht und geht Billard spielen.", "placeHolder": "Passende Tugenden erfassen...", "correctAnswer": "Jaskier"}], "description": "Max hat Ende Monat noch Fr. 20.\\u2013 \\u00fcbrig, die er gespart hat, um mit seinem besten Kumpel, der ein halbes Jahr im Ausland verweilte, Billard spielen zu gehen. Doch dann bittet ihn seine j\\u00fcngere Schwester um Geld. Sie hat ein unverhofftes Date mit einem jungen Mann, in den sie sich bereits vor Monaten unsterblich verliebt hat. Leider ist ihr Kontostand aber bereits auf Null."}]}, {"name": "Seite 2", "elements": [{"name": "panel1", "type": "panel", "title": "Fall 2", "elements": [{"name": "question1", "type": "text", "title": "A: Silvio bringt seinen Mitfahrer in Sicherheit.", "placeHolder": "Passende Tugenden erfassen...", "correctAnswer": "Yennefer", "useDisplayValuesInTitle": false}, {"name": "question3", "type": "text", "title": "B: Silvio sperrt die Strasse ab.", "placeHolder": "Passende Tugenden erfassen...", "correctAnswer": "Geralt"}], "description": "Auf der Autobahn brennt ein Lastwagen, der jederzeit explodieren kann. Silvio, dem Fahrer, bleiben nur noch wenige Minuten: Entweder bringt er seinen ohnm\\u00e4chtig gewordenen Mitfahrer in Sicherheit oder er sperrt die Strasse ab, die nach wie vor dicht befahren wird."}]}], "completeText": "Abschliessen", "showQuestionNumbers": "off"}',
+            data: ` {
+ "title": "Titel Übung",
+ "logoPosition": "right",
+ "pages": [
+  {
+   "name": "page1",
+   "elements": [
+    {
+     "type": "matrixdropdown",
+     "name": "question3",
+     "title": "Frage",
+     "columns": [
+      {
+       "name": "Column 1",
+       "title": "Spalte A"
+      },
+      {
+       "name": "Column 2",
+       "title": "Spalte B"
+      }
+     ],
+     "choices": [
+      "Placeholder"
+     ],
+     "cellType": "checkbox",
+     "rows": [
+      {
+       "value": "Row 1",
+       "text": "Zeile 1"
+      },
+      {
+       "value": "Row 2",
+       "text": "Zeile 2"
+      },
+      {
+       "value": "Row 3",
+       "text": "Zeile 3"
+      }
+     ]
+    }
+   ],
+   "title": "Titel Seite 1"
+  }
+ ]
+}
+
+`,
             module: {
               id: 'TW9kdWxlTm9kZToxNw==',
               __typename: 'ModuleNode',
@@ -49,20 +95,10 @@ describe('Survey', () => {
 
     cy.visit('/survey/U3VydmV5Tm9kZTox');
 
-    cy.get('.survey__panel-title').should('contain', 'Fall 1');
+    cy.get('h1').should('contain', 'Titel Übung');
 
-    cy.get('#sq_100i').type('Wohlwollen');
-    cy.get('#sq_101i').type('Demut');
+    cy.get('.base-input-container__label').should('not.be.visible');
 
-    cy.get('[value="Speichern & Weiter"]').click();
-
-    cy.get('#sq_102i').type('Keuschheit');
-    cy.get('#sq_103i').type('Geduld');
-
-    cy.get('[value=Abschliessen]').click();
-
-    cy.visit('/survey/U3VydmV5Tm9kZTox');
-
-    cy.get('#sq_100i').should('have.value', 'Wohlwollen');
+    // cy.get('[value="Speichern & Weiter"]').click();
   });
 });
diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss
index 2ff800d8..5224c922 100644
--- a/client/src/styles/_survey.scss
+++ b/client/src/styles/_survey.scss
@@ -172,9 +172,6 @@
       @include small-text;
       vertical-align: bottom;
       padding: $small-spacing 0;
-
-      > span {
-      }
     }
   }
 
@@ -200,3 +197,44 @@
   // manually setting this for the knockout version
   display: inline-flex;
 }
+
+.sv-table__cell {
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  justify-content: center;
+  display: flex;
+
+  &:first-child {
+    justify-content: flex-start;
+  }
+
+  // hide the label for matrix entries, cause survey.js makes us enter one, even though we don't want it
+  .base-input-container__label {
+    display: none;
+  }
+
+  .base-input-container--survey {
+    margin-bottom: 0;
+  }
+}
+
+.sv-table__row {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: $medium-spacing;
+  tr {
+    width: 100%;
+  }
+  tbody {
+    flex-direction: column;
+    row-gap: $medium-spacing;
+  }
+}