diff --git a/src/assets/main.css b/src/assets/main.css
index b611b2e..caeeda3 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -24,6 +24,12 @@ button {
   padding: 0.5em 0.75em;
 }
 
+select,
+input {
+  font-size: 1.1em;
+  padding: 0.5em;
+}
+
 progress::-webkit-progress-bar,
 progress::-moz-progress-bar {
   background: var(--fg-color);
diff --git a/src/components/DiskExplorer.vue b/src/components/DiskExplorer.vue
index 663f5bc..a2c468a 100644
--- a/src/components/DiskExplorer.vue
+++ b/src/components/DiskExplorer.vue
@@ -2,6 +2,7 @@
 import { FloppyDisk } from '@/floppy/disk.ts'
 import { computed, ref } from 'vue'
 import HexDump from '@/components/HexDump.vue'
+import TextDump from '@/components/TextDump.vue'
 
 const { floppyDisk = null } = defineProps<{ floppyDisk: FloppyDisk | null }>()
 
@@ -11,6 +12,8 @@ const currentFileData = ref(new ArrayBuffer(0))
 
 const currentFileName = ref<string>('')
 
+const dataView = ref('hex-dump')
+
 const directories = computed(() => {
   const fileList = floppyDisk?.getFileList()
 
@@ -97,8 +100,15 @@ function loadFile(name: string, firstCluster: number, size: number) {
         </li>
       </ul>
     </div>
-    <div class="hex">
-      <HexDump :buffer="currentFileData" />
+    <div>
+      <select v-model="dataView">
+        <option value="hex-dump">Hex Dump</option>
+        <option value="text-dump">Text</option>
+      </select>
+    </div>
+    <div class="current-file-view">
+      <TextDump v-if="dataView === 'text-dump'" :buffer="currentFileData" />
+      <HexDump v-if="dataView === 'hex-dump'" :buffer="currentFileData" />
     </div>
   </div>
 </template>
@@ -109,14 +119,15 @@ div.path {
 }
 
 div.cols {
+  margin-top: 1em;
   display: flex;
+  gap: 1em;
 }
 
 div.file-list {
   box-sizing: border-box;
   min-width: 12em;
   background: rgba(255, 255, 255, 0.075);
-  margin: 1em;
   max-height: 40em;
   overflow-y: auto;
   padding: 1em 1em 0;
@@ -157,4 +168,8 @@ ul {
   padding: 0;
   list-style: none;
 }
+
+.current-file-view {
+  width: 100%;
+}
 </style>
diff --git a/src/components/HexDump.vue b/src/components/HexDump.vue
index 2dc9204..db4beea 100644
--- a/src/components/HexDump.vue
+++ b/src/components/HexDump.vue
@@ -91,6 +91,7 @@ const hexDump = computed(() => {
 
 <style scoped>
 pre {
+  margin: 0;
   padding: 0.5em 1em 10em;
   box-sizing: border-box;
   overflow-y: scroll;
diff --git a/src/components/TextDump.vue b/src/components/TextDump.vue
new file mode 100644
index 0000000..dc526c1
--- /dev/null
+++ b/src/components/TextDump.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const { buffer } = defineProps<{ buffer: ArrayBuffer }>()
+
+const textDump = computed(() => {
+  const decoder = new TextDecoder()
+  return decoder.decode(buffer)
+})
+</script>
+
+<template>
+  <textarea v-model="textDump" readonly></textarea>
+</template>
+
+<style scoped>
+textarea {
+  margin: 0;
+  padding: 0.5em 1em 1em;
+  text-wrap: wrap;
+  box-sizing: border-box;
+  min-height: 20rem;
+  height: 40rem;
+  max-height: 40rem;
+  background: rgba(255, 255, 255, 0.15);
+  color: #c0c0c0;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  width: 100%;
+  font-size: 1.1em;
+}
+</style>