diff --git a/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html b/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html
index 923d855a8f253f2c543ee7cdfc10e8d314631172..5d0d3f03e53c192c6350087b765d9aee1b9a9259 100644
--- a/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html
+++ b/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html
@@ -1,23 +1,59 @@
 <div class="__js-root">
   <ui-popout-table sizing-classes="max-w-[100ch] w-full" :open-by-default="false">
     <template slot="head">
-      <tr class="bg-black [&_*]:!text-white [&_*]:!pt-2">
-        <th>Company</th>
-        <th>Contact</th>
-        <th>Country</th>
+      <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
+        <th>
+          <p>
+            Company
+          </p>
+        </th>
+        <th>
+          <p>
+            Contact
+          </p>
+        </th>
+        <th>
+          <p>
+            Country
+          </p>
+        </th>
       </tr>
     </template>
 
     <template slot="body">
       <tr>
-        <td>Alfreds Futterkiste</td>
-        <td>Maria Anders</td>
-        <td>Germany</td>
+        <td>
+          <p>
+            Alfreds Futterkiste
+          </p>
+        </td>
+        <td>
+          <p>
+            Maria Anders
+          </p>
+        </td>
+        <td>
+          <p>
+            Germany
+          </p>
+        </td>
       </tr>
       <tr>
-        <td>Centro comercial Moctezuma</td>
-        <td>Francisco Chang</td>
-        <td>Mexico</td>
+        <td>
+          <p>
+            Centro comercial Moctezuma
+          </p>
+        </td>
+        <td>
+          <p>
+            Francisco Chang
+          </p>
+        </td>
+        <td>
+          <p>
+            Mexico
+          </p>
+        </td>
       </tr>
     </template>
   </ui-popout-table>
diff --git a/majak_uistyleguide/templates/patterns/atoms/table/table.html b/majak_uistyleguide/templates/patterns/atoms/table/table.html
index 9b4f4a751086d4d0cf2f53287b95361ad1f3b76b..714d6f7fd53ad78a52399abf5d8d7213dfa838b8 100644
--- a/majak_uistyleguide/templates/patterns/atoms/table/table.html
+++ b/majak_uistyleguide/templates/patterns/atoms/table/table.html
@@ -1,14 +1,19 @@
 <div class="my-6 prose max-w-[100ch]">
   <table>
     <thead>
-      <tr class="bg-black [&_*]:!text-white [&_*]:!pt-2">
+      <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
         <th>Company</th>
         <th>Contact</th>
         <th>Country</th>
       </tr>
     </thead>
 
-    <tbody>
+    <tbody
+      class="
+        w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
+        [&_tr:nth-child(even)]:bg-grey-50
+      "
+    >
       <tr>
         <td>Alfreds Futterkiste</td>
         <td>Maria Anders</td>
@@ -17,7 +22,11 @@
       <tr>
         <td>Centro comercial Moctezuma</td>
         <td>Francisco Chang</td>
-        <td>Mexico</td>
+        <td>
+          A<br>
+          B<br>
+          C<br>
+        </td>
       </tr>
     </tbody>
   </table>
diff --git a/src/css/molecules/card_box.pcss b/src/css/molecules/card_box.pcss
index ddd5afe864f7eecd1025881f3fd9650498b62d80..f638b392666c80af3a4441dded173c11377637d0 100644
--- a/src/css/molecules/card_box.pcss
+++ b/src/css/molecules/card_box.pcss
@@ -1,10 +1,10 @@
 .flip-card {
-  .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
 
-  .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
   }
diff --git a/src/js/components/PopoutTable.vue b/src/js/components/PopoutTable.vue
index 5b4fe22300ec98b91bb80542612fc13a9ebb070b..8d8b60bbb1e93600d60f079e3688b5adf0db8187 100644
--- a/src/js/components/PopoutTable.vue
+++ b/src/js/components/PopoutTable.vue
@@ -1,12 +1,14 @@
 <template>
   <table :class="'duration-200 my-6 prose ' + $props.sizingClasses">
+    <slot name="caption"></slot>
+
     <thead class="relative w-full duration-200">
       <slot name="head"></slot>
 
       <div class="absolute top-0 right-[-60px]">
         <button
           ref="togglerButton"
-          class="w-12 h-12 rounded-full bg-white hover:bg-grey-125 duration-150 flex justify-center items-center"
+          class="w-10 h-10 rounded-full bg-white hover:bg-grey-125 duration-150 flex justify-center items-center"
           @click="$data.isOpen = !$data.isOpen"
         >
           <i
@@ -23,7 +25,10 @@
 
     <tbody
       v-if="$data.isOpen"
-      class="w-full duration-200"
+      class="
+        w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
+        [&_tr:nth-child(even)]:bg-grey-50
+      "
     >
       <slot name="body"></slot>
     </tbody>