diff --git a/package-lock.json b/package-lock.json
index b7887c6..223a8f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "register-service-worker": "^1.7.1",
         "vite-plugin-require": "^1.1.10",
         "vue": "^3.0.0",
+        "vue-collapsed": "^1.2.6",
         "vue-markdown-render": "^2.0.1",
         "vue-number-animation": "^1.1.2",
         "vue-router": "^4.0.0-0",
@@ -24137,6 +24138,11 @@
         "ufo": "^1.1.1"
       }
     },
+    "node_modules/vue-collapsed": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/vue-collapsed/-/vue-collapsed-1.2.6.tgz",
+      "integrity": "sha512-FNrq1l66JLSeod1VDczxMGlv8RAoPvh72qpA79rE8JFwrpuiEzIDo7GTwJoBmHpLI+t6betINy5kxW95AgebwQ=="
+    },
     "node_modules/vue-devtools-stub": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
@@ -44452,6 +44458,11 @@
         "ufo": "^1.1.1"
       }
     },
+    "vue-collapsed": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/vue-collapsed/-/vue-collapsed-1.2.6.tgz",
+      "integrity": "sha512-FNrq1l66JLSeod1VDczxMGlv8RAoPvh72qpA79rE8JFwrpuiEzIDo7GTwJoBmHpLI+t6betINy5kxW95AgebwQ=="
+    },
     "vue-devtools-stub": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
diff --git a/package.json b/package.json
index d12bd53..6a2e8c9 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "register-service-worker": "^1.7.1",
     "vite-plugin-require": "^1.1.10",
     "vue": "^3.0.0",
+    "vue-collapsed": "^1.2.6",
     "vue-markdown-render": "^2.0.1",
     "vue-number-animation": "^1.1.2",
     "vue-router": "^4.0.0-0",
diff --git a/src/components/about-row.vue b/src/components/about-row.vue
index 4357b25..ab8bdd2 100644
--- a/src/components/about-row.vue
+++ b/src/components/about-row.vue
@@ -1,52 +1,54 @@
 <template>
   <div class="about-row">
     <h3>{{ props.title }}</h3>
-    <vue-markdown
-      v-if="props.markdown"
-      class="about-row__markdown"
-      :source="expanded ? mdFullText : mdAbstract"
-    />
-    <p v-else>
-      {{ expanded ? props.plain.fullText : props.plain.abstract }}
-    </p>
+    <div class="about-row__markdown">
+      <vue-markdown
+        v-if="props.markdown"
+        class="about-row__markdown__content"
+        :source="mdAbstract"
+      />
+      <Collapse :when="isExpanded">
+        <vue-markdown
+          v-if="props.markdown"
+          class="about-row__markdown__content"
+          :source="mdDetails"
+        />
+      </Collapse>
+    </div>
+
     <atoms-expand-button class="about-text__expand-button" @expand="expand" @collapse="collapse" />
   </div>
 </template>
 
 <script setup lang="ts">
-import VueMarkdown from 'vue-markdown-render'
 import { defineComponent } from 'vue'
+import { Collapse } from 'vue-collapsed'
+import VueMarkdown from 'vue-markdown-render'
 import { useMarkdownImport } from '~/composables/use-requires'
 
 const requireMarkdown = useMarkdownImport()
 
-interface TextWithAbstract {
-  abstract: string,
-  fullText: string,
-}
-
 const props = defineProps<{
   title: string,
   markdown?: string,
-  plain?: TextWithAbstract,
 }>()
 
 const md = props.markdown ? requireMarkdown(props.markdown) : ''
 const mdAbstract = md.split('\n\n')[0]
-const mdFullText = md.split('\n\n').join(' ')
+const mdDetails = md.split('\n\n').slice(1).join(' ')
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data () {
-    return { expanded: false }
+    return { isExpanded: false }
   },
   methods: {
     expand () {
-      this.expanded = true
+      this.isExpanded = true
     },
     collapse () {
-      this.expanded = false
+      this.isExpanded = false
     }
   }
 })
@@ -77,7 +79,26 @@ export default defineComponent({
     }
   }
 
-  h3, p, .about-row__markdown {
+  .about-row__markdown {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    margin: 0;
+    width: 90%;
+
+    @media #{$desk}, #{$big} {
+      width: 33%;
+      text-align: start;
+    }
+  }
+
+  .about-row__markdown__content {
+    margin: 0;
+  }
+
+  h3 {
     width: 90%;
 
     @media #{$desk}, #{$big} {
@@ -95,3 +116,13 @@ export default defineComponent({
   }
 }
 </style>
+
+<style lang="scss">
+.about-row__markdown__content {
+  margin: 0;
+
+  p {
+    margin: 0;
+  }
+}
+</style>
diff --git a/src/components/description-column.vue b/src/components/description-column.vue
index a5cd2c5..8921e7b 100644
--- a/src/components/description-column.vue
+++ b/src/components/description-column.vue
@@ -1,17 +1,28 @@
 <template>
   <div class="description-column">
     <h3>{{ title }}</h3>
-    <vue-markdown
-      class="description-column__markdown"
-      :class="{ expanded }"
-      :source="expanded ? mdFullText : mdAbstract"
-    />
+
+    <div class="description-column__markdown">
+      <vue-markdown
+        v-if="props.markdown"
+        class="description-column__markdown__content"
+        :source="mdAbstract"
+      />
+      <Collapse :when="isExpanded">
+        <vue-markdown
+          v-if="props.markdown"
+          class="description-column__markdown__content"
+          :source="mdDetails"
+        />
+      </Collapse>
+    </div>
     <atoms-expand-link @expand="expand" @collapse="collapse" />
   </div>
 </template>
 
 <script setup lang="ts">
 import VueMarkdown from 'vue-markdown-render'
+import { Collapse } from 'vue-collapsed'
 import { defineComponent } from 'vue'
 import { useMarkdownImport } from '~/composables/use-requires'
 
@@ -24,20 +35,20 @@ const props = defineProps<{
 
 const md = props.markdown ? requireMarkdown(props.markdown) : ''
 const mdAbstract = md.split('\n\n')[0]
-const mdFullText = md.split('\n\n').join(' ')
+const mdDetails = md.split('\n\n').slice(1).join(' ')
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data () {
-    return { expanded: false }
+    return { isExpanded: false }
   },
   methods: {
     expand () {
-      this.expanded = true
+      this.isExpanded = true
     },
     collapse () {
-      this.expanded = false
+      this.isExpanded = false
     }
   }
 })
@@ -66,3 +77,15 @@ export default defineComponent({
   }
 }
 </style>
+
+<style lang="scss">
+.description-column__markdown {
+  margin: 20px; // default p tag margin
+}
+
+.description-column__markdown__content {
+  ul {
+    margin: 0;
+  }
+}
+</style>
diff --git a/src/components/instructions-row.vue b/src/components/instructions-row.vue
index 6efd992..b067708 100644
--- a/src/components/instructions-row.vue
+++ b/src/components/instructions-row.vue
@@ -10,7 +10,20 @@
         </atoms-lightbox>
       </template>
       <template v-else>
-        <vue-markdown class="manual-row__markdown" :source="expanded ? mdFullText : mdAbstract" />
+        <div class="manual-row__markdown">
+          <vue-markdown
+            v-if="props.markdown"
+            class="manual-row__markdown__content"
+            :source="mdAbstract"
+          />
+          <Collapse :when="isExpanded">
+            <vue-markdown
+              v-if="props.markdown"
+              class="manual-row__markdown__content"
+              :source="mdDetails"
+            />
+          </Collapse>
+        </div>
         <atoms-expand-link
           class="manual-row__expand-button"
           @expand="expand"
@@ -23,6 +36,7 @@
 
 <script setup lang="ts">
 import VueMarkdown from 'vue-markdown-render'
+import { Collapse } from 'vue-collapsed'
 import { defineComponent } from 'vue'
 import { useMarkdownImport } from '~/composables/use-requires'
 
@@ -37,20 +51,20 @@ const props = defineProps<{
 
 const md = requireMarkdown(props.markdown)
 const mdAbstract = md.split('\n\n')[0]
-const mdFullText = md.split('\n\n').join(' ')
+const mdDetails = md.split('\n\n').slice(1).join(' ')
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data () {
-    return { expanded: false }
+    return { isExpanded: false }
   },
   methods: {
     expand () {
-      this.expanded = true
+      this.isExpanded = true
     },
     collapse () {
-      this.expanded = false
+      this.isExpanded = false
     }
   }
 })
@@ -77,12 +91,33 @@ export default defineComponent({
 
   background-image: url('~/assets/img/manual-filler-right.svg');
   background-repeat: no-repeat;
+
+  // fallback size and position
+  background-position: 90% 100px;
   background-size: auto 80%;
-  background-position: 90% 100%;
+  @media #{$tab} {
+    // based on estimated row height (collapsed) for tablet
+    background-position: 100% 200px;
+    background-size: auto 300px;
+  }
+  @media #{$desk}, #{$big} {
+    // based on estimated row height (collapsed) for wider formats
+    background-position: 90% 100px;
+    background-size: auto 420px;
+  }
 
   &.inverted {
     background-image: url('~/assets/img/manual-filler-left.svg');
-    background-position: -0 100%;
+    background-position: -0 100%; // fallback position
+
+    @media #{$tab} {
+      // based on estimated row height (collapsed) for tablet
+      background-position: -0 200px;
+    }
+    @media #{$desk}, #{$big} {
+      // based on estimated row height (collapsed) for wider formats
+      background-position: -0 100px;
+    }
     flex-direction: row-reverse;
   }
 
@@ -92,8 +127,7 @@ export default defineComponent({
   }
 
   @media #{$tab} {
-    background-size: auto 50%;
-    background-position: 100% 100%;
+    // background-position: 100% 100%;
   }
 }
 
diff --git a/yarn.lock b/yarn.lock
index a00b887..ab0623d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -980,10 +980,10 @@
   dependencies:
     mime "^3.0.0"
 
-"@esbuild/darwin-x64@0.17.14":
+"@esbuild/darwin-arm64@0.17.14":
   version "0.17.14"
-  resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.14.tgz"
-  integrity sha512-zN0U8RWfrDttdFNkHqFYZtOH8hdi22z0pFm0aIJPsNC4QQZv7je8DWCX5iA4Zx6tRhS0CCc0XC2m7wKsbWEo5g==
+  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.14.tgz"
+  integrity sha512-eoSjEuDsU1ROwgBH/c+fZzuSyJUVXQTOIN9xuLs9dE/9HbV/A5IqdXHU1p2OfIMwBwOYJ9SFVGGldxeRCUJFyw==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.3.0":
   version "4.4.0"
@@ -13128,6 +13128,11 @@ vue-bundle-renderer@^1.0.2:
   dependencies:
     ufo "^1.1.1"
 
+vue-collapsed@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/vue-collapsed/-/vue-collapsed-1.2.6.tgz"
+  integrity sha512-FNrq1l66JLSeod1VDczxMGlv8RAoPvh72qpA79rE8JFwrpuiEzIDo7GTwJoBmHpLI+t6betINy5kxW95AgebwQ==
+
 vue-devtools-stub@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz"