diff --git a/components/Editor.vue b/components/Editor.vue
index 282454b..ffb3ffd 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -5,10 +5,10 @@
             class="flex items-center justify-between w-full overflow-auto bg-ui-gray-700"
         >
             <div
-                class="flex items-center gap-2 m-2 rounded-lg  bg-ui-gray-800 focus-within:ring-2 focus-within:ring-ui-focus"
+                class="flex items-center gap-2 m-2 rounded-lg bg-ui-gray-800 focus-within:ring-2 focus-within:ring-ui-focus"
             >
                 <label
-                    class="hidden pl-2 text-xs font-semibold leading-none tracking-wide uppercase  text-ui-gray-500 xl:inline-block whitespace-nowrap"
+                    class="hidden pl-2 text-xs font-semibold leading-none tracking-wide uppercase text-ui-gray-500 xl:inline-block whitespace-nowrap"
                 >
                     Lang
                 </label>
@@ -24,10 +24,10 @@
 
             <div class="flex items-stretch gap-2">
                 <div
-                    class="flex items-center gap-2 mr-2 rounded-lg  bg-ui-gray-800 focus-within:ring-2 focus-within:ring-ui-focus lg:mr-0"
+                    class="flex items-center gap-2 mr-2 rounded-lg bg-ui-gray-800 focus-within:ring-2 focus-within:ring-ui-focus lg:mr-0"
                 >
                     <label
-                        class="hidden pl-2 text-xs font-semibold leading-none tracking-wide uppercase  text-ui-gray-500 xl:inline-block whitespace-nowrap"
+                        class="hidden pl-2 text-xs font-semibold leading-none tracking-wide uppercase text-ui-gray-500 xl:inline-block whitespace-nowrap"
                     >
                         Tab Size
                     </label>
@@ -113,6 +113,25 @@
             </div>
         </div>
 
+        <div v-if="allowFilename" class="flex items-center justify-between bg-ui-gray-700">
+            <div
+                class="flex items-center w-full gap-2 m-2 mt-0 rounded-lg bg-ui-gray-800 focus-within:ring-2 focus-within:ring-ui-focus"
+            >
+                <label
+                    class="hidden pl-2 text-xs font-semibold leading-none tracking-wide uppercase text-ui-gray-500 xl:inline-block whitespace-nowrap"
+                >
+                    Filename
+                </label>
+
+                <input
+                    type="text"
+                    :value="filename"
+                    @input="(event) => $emit('update:filename', event.target.value)"
+                    class="w-full text-xs font-medium border-0 rounded-lg cursor-pointer text-ui-gray-400 bg-ui-gray-800 hover:bg-ui-gray-900 focus:bg-ui-gray-900 focus:outline-none focus:ring-0"
+                />
+            </div>
+        </div>
+
         <div ref="container" class="w-full h-full">
             <Monaco
                 class="w-full h-full"
@@ -148,6 +167,8 @@ export default {
         value: String,
         size: Number,
         tabSize: [String, Number],
+        filename: String,
+        allowFilename: Boolean,
         language: String,
         options: Object,
         landscape: Boolean,
diff --git a/components/Page.vue b/components/Page.vue
index c136d89..1e32af1 100644
--- a/components/Page.vue
+++ b/components/Page.vue
@@ -25,6 +25,8 @@
                 :size="sizes[0]"
                 :tab-size="editor.tabSize"
                 :language="editor.language"
+                :filename="editor.filename"
+                :allow-filename="editors.length > 1"
                 :landscape="isLandscape"
                 :can-move-up="index !== 0"
                 :can-move-down="index !== editors.length - 1"
@@ -37,6 +39,7 @@
                 @update:layout="toggleLayout"
                 @update:tab-size="(size) => (editors[index].tabSize = size)"
                 @update:language="(lang) => (editors[index].language = lang)"
+                @update:filename="(filename) => (editors[index].filename = filename)"
             />
         </div>
 
@@ -44,6 +47,7 @@
             dusk="preview"
             ref="preview"
             :tab="tab"
+            :filenames="filenames"
             :code="code"
             :languages="languages"
             class="flex flex-col justify-between w-full h-full overflow-auto"
@@ -140,6 +144,10 @@ export default {
             }));
         },
 
+        filenames() {
+            return this.editors.map(({ filename }) => filename);
+        },
+
         canRemoveEditor() {
             return this.editors.length > 1;
         },
@@ -233,6 +241,7 @@ export default {
                 id: uuid(),
                 tabSize: 4,
                 language: language,
+                filename: '',
                 value: language === 'php' ? '<?php\n\n' : '',
             };
         },
diff --git a/components/Preview.vue b/components/Preview.vue
index 1289851..c5e8d19 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -88,6 +88,7 @@
                             class="z-10"
                             :blocks="blocks"
                             :settings="settings"
+                            :filenames="filenames"
                             @update:title="(title) => (settings.title = title)"
                         />
 
@@ -366,6 +367,7 @@ export default {
     props: {
         tab: Object,
         code: Array,
+        filenames: Array,
         languages: Array,
     },
 
diff --git a/components/Window.vue b/components/Window.vue
index 7db6687..4ac6017 100644
--- a/components/Window.vue
+++ b/components/Window.vue
@@ -32,7 +32,7 @@
                     type="text"
                     ref="title"
                     v-model="title"
-                    class="w-full p-0 text-sm font-medium text-center truncate bg-transparent border-0 shadow-none  focus:ring-0"
+                    class="w-full p-0 text-sm font-medium text-center truncate bg-transparent border-0 shadow-none focus:ring-0"
                     @blur="editingTitle = false"
                 />
 
@@ -45,6 +45,10 @@
             :key="index"
             :style="{ padding: `${settings.padding}px` }"
         >
+            <div v-if="filenames.length > 1" class="mb-2 text-sm text-right text-gray-400">
+                {{ filenames[index] }}
+            </div>
+
             <Code
                 class="relative"
                 :lines="lines"
@@ -63,6 +67,7 @@ export default {
     props: {
         blocks: Array,
         settings: Object,
+        filenames: Array,
     },
 
     components: { Code, FauxMenu },