diff --git a/src/components.d.ts b/src/components.d.ts
index 1710ea9a9..78540ef16 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     BlurBlock: typeof import('./components/BlurBlock.vue')['default']
     CapDownQuote: typeof import('./components/CapDownQuote.vue')['default']
     ChannelBackupButton: typeof import('./components/buttons/ChannelBackupButton.vue')['default']
+    ColumnView: typeof import('./components/ColumnView.vue')['default']
     Divider: typeof import('./components/divider.vue')['default']
     DynamicIcon: typeof import('./components/DynamicIcon.vue')['default']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
diff --git a/src/components/ColumnView.vue b/src/components/ColumnView.vue
new file mode 100644
index 000000000..d429d5ae3
--- /dev/null
+++ b/src/components/ColumnView.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import {Component, Vue} from 'vue-facing-decorator';
+
+@Component({})
+export default class ColumnView extends Vue {
+
+}
+</script>
+
+<template>
+    <div class="column-view">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss">
+.column-view {
+    display: block;
+    column-count: 2;
+    column-gap: 20px;
+
+    @media screen and (max-width: 800px) {
+        column-count: 1;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MDX.vue b/src/components/MDX.vue
index 830c3fd46..1cf1f3ee6 100644
--- a/src/components/MDX.vue
+++ b/src/components/MDX.vue
@@ -1,13 +1,14 @@
 <script lang="tsx">
-import BackupButtons from "@/components/buttons/BackupButtons.vue";
 import Banner from "@/components/Banner.vue";
-import CapDownQuote from "@/components/CapDownQuote.vue";
+import BackupButtons from "@/components/buttons/BackupButtons.vue";
 import ChannelBackupButton from "@/components/buttons/ChannelBackupButton.vue";
+import CapDownQuote from "@/components/CapDownQuote.vue";
+import ColumnView from "@/components/ColumnView.vue";
 import DynamicIcon from "@/components/DynamicIcon.vue";
 import * as Vue from 'vue';
 import {computed, defineComponent} from 'vue';
-import PhotoScroll from './PhotoScroll.vue';
 import BlurBlock from "./BlurBlock.vue";
+import PhotoScroll from './PhotoScroll.vue';
 
 export default defineComponent({
     name: "MDX",
@@ -37,7 +38,14 @@ export default defineComponent({
                 {
                     renderFunction.value?.({
                         components: {
-                            PhotoScroll, ChannelBackupButton, CapDownQuote, BackupButtons, DynamicIcon, Banner, BlurBlock
+                            PhotoScroll,
+                            ChannelBackupButton,
+                            CapDownQuote,
+                            ColumnView,
+                            BackupButtons,
+                            DynamicIcon,
+                            Banner,
+                            BlurBlock
                         }
                     })
                 }