diff --git a/docs/src/electron-how-to/preload-script.md b/docs/src/electron-how-to/preload-script.md
index fa48b59..edb1c39 100644
--- a/docs/src/electron-how-to/preload-script.md
+++ b/docs/src/electron-how-to/preload-script.md
@@ -16,7 +16,6 @@ When sending events from renderer to main, you access the `window.mainApi` objec
 Here are the supported functions for mainApi:
 
 - `send`: Send an event to main.
-- `sendSync`: Send an event to main. It can be used when receiving a return value. The UI may be frozen until the operation is complete.
 - `on`: A listener to receive events sent by main.
 - `once`: A listener to receive events sent by main. (Handle only one call)
 - `off`: Remove an event listener
diff --git a/src/main/IPCs.ts b/src/main/IPCs.ts
index 7fc7468..7792378 100644
--- a/src/main/IPCs.ts
+++ b/src/main/IPCs.ts
@@ -1,4 +1,4 @@
-import { ipcMain, shell, IpcMainEvent } from 'electron'
+import { ipcMain, shell, IpcMainEvent, dialog } from 'electron'
 import Constants from './utils/Constants'
 
 /*
@@ -7,13 +7,29 @@ import Constants from './utils/Constants'
 export default class IPCs {
   static initialize(): void {
     // Get application version
-    ipcMain.on('msgRequestGetVersion', (event: IpcMainEvent) => {
-      event.returnValue = Constants.APP_VERSION
+    ipcMain.handle('msgRequestGetVersion', () => {
+      return Constants.APP_VERSION
     })
 
     // Open url via web browser
     ipcMain.on('msgOpenExternalLink', async (event: IpcMainEvent, url: string) => {
       await shell.openExternal(url)
     })
+
+    // Open file
+    ipcMain.handle('msgOpenFile', async (event, filter: string) => {
+      const filters = []
+      if (filter === 'text') {
+        filters.push({ name: 'Text', extensions: ['txt', 'json'] })
+      }
+      if (filter === 'zip') {
+        filters.push({ name: 'Zip', extensions: ['zip'] })
+      }
+      const dialogResult = await dialog.showOpenDialog({
+        properties: ['openFile'],
+        filters
+      })
+      return dialogResult
+    })
   }
 }
diff --git a/src/preload/index.ts b/src/preload/index.ts
index a2be50d..218ae9a 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,24 +1,20 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron'
 
 // Whitelist of valid channels used for IPC communication (Send message from Renderer to Main)
-const mainAvailChannels: string[] = ['msgRequestGetVersion', 'msgOpenExternalLink']
+const mainAvailChannels: string[] = ['msgRequestGetVersion', 'msgOpenExternalLink', 'msgOpenFile']
 const rendererAvailChannels: string[] = []
 
 contextBridge.exposeInMainWorld('mainApi', {
   send: (channel: string, ...data: any[]): void => {
     if (mainAvailChannels.includes(channel)) {
       ipcRenderer.send.apply(null, [channel, ...data])
+      if (process.env.NODE_ENV === 'development') {
+        console.log({ type: 'send', channel, request: data })
+      }
     } else {
       throw new Error(`Unknown ipc channel name: ${channel}`)
     }
   },
-  sendSync: (channel: string, ...data: any[]): any => {
-    if (mainAvailChannels.includes(channel)) {
-      return ipcRenderer.sendSync.apply(null, [channel, ...data])
-    }
-
-    throw new Error(`Unknown ipc channel name: ${channel}`)
-  },
   on: (channel: string, listener: (event: IpcRendererEvent, ...args: any[]) => void): void => {
     if (rendererAvailChannels.includes(channel)) {
       ipcRenderer.on(channel, listener)
@@ -43,6 +39,9 @@ contextBridge.exposeInMainWorld('mainApi', {
   invoke: async (channel: string, ...data: any[]): Promise<any> => {
     if (mainAvailChannels.includes(channel)) {
       const result = await ipcRenderer.invoke.apply(null, [channel, ...data])
+      if (process.env.NODE_ENV === 'development') {
+        console.log({ type: 'invoke', channel, request: data, result })
+      }
       return result
     }
 
diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
index 50ce555..c57a3ff 100644
--- a/src/renderer/locales/en.json
+++ b/src/renderer/locales/en.json
@@ -2,7 +2,8 @@
   "desc": {
     "welcome-title": "Hello Vutron! Everything is ready.",
     "welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code.",
-    "second-desc": "You have moved to the second screen! There is nothing here!"
+    "second-desc": "You have moved to the second screen! There is nothing here!",
+    "selected-file": "Selected file: {filePath}."
   },
   "title": {
     "main": "Main Screen",
@@ -14,6 +15,7 @@
     "change-language": "Change Language",
     "increase-count": "Count 1 increment",
     "documentation": "Documentation",
-    "github": "Source Code"
+    "github": "Source Code",
+    "open-file": "Open a text file"
   }
 }
diff --git a/src/renderer/locales/nl.json b/src/renderer/locales/nl.json
index 4bb360b..9cc7065 100644
--- a/src/renderer/locales/nl.json
+++ b/src/renderer/locales/nl.json
@@ -2,7 +2,8 @@
   "desc": {
     "welcome-title": "Hallo Vutron! Alles is klaar.",
     "welcome-desc": "U kunt nu platformonafhankelijke webapplicaties schrijven. Bekijk wijzigingen in realtime en bouw met één opdracht naar meerdere platforms. Als u hiermee nog niet bekend bent, kunt u hulp krijgen via de onderstaande documentatiepagina, of een vooraf geschreven voorbeeldcode uitvoeren.",
-    "second-desc": "U bent naar het tweede scherm gegaan! Hier is niks!"
+    "second-desc": "U bent naar het tweede scherm gegaan! Hier is niks!",
+    "selected-file": "Geselecteerde bestand: {filePath}."
   },
   "title": {
     "main": "Hoofdscherm",
@@ -14,6 +15,7 @@
     "change-language": "Taal wijzigen",
     "increase-count": "Één stap optellen",
     "documentation": "Documentatie",
-    "github": "Broncode"
+    "github": "Broncode",
+    "open-file": "Open een bestand"
   }
 }
diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue
index 110b907..16403d7 100644
--- a/src/renderer/screens/MainScreen.vue
+++ b/src/renderer/screens/MainScreen.vue
@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
-import { openExternal } from '@/renderer/utils'
+import { openExternal, openFile } from '@/renderer/utils'
 import { useCounterStore } from '@/renderer/store/counter'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
@@ -12,6 +12,7 @@ const { counter } = storeToRefs(useCounterStore())
 const theme = useTheme()
 const languages = ref(['en'])
 const appVersion = ref('Unknown')
+const selectedFile = ref('')
 
 onMounted((): void => {
   languages.value = availableLocales
@@ -21,7 +22,7 @@ onMounted((): void => {
 })
 
 const getApplicationVersionFromMainProcess = (): void => {
-  appVersion.value = window.mainApi.sendSync('msgRequestGetVersion')
+  window.mainApi.invoke('msgRequestGetVersion').then((result: string) => { appVersion.value = result })
 }
 
 const handleChangeTheme = (): void => {
@@ -43,6 +44,13 @@ const handleOpenGitHub = async (): Promise<void> => {
 const handleCountIncrease = (): void => {
   counterIncrease(1)
 }
+
+const handleOpenFile = async () => {
+  const dialogResult = await openFile('text')
+  if (!dialogResult.canceled) {
+    selectedFile.value = dialogResult.filePaths[0]
+  }
+}
 </script>
 
 <template>
@@ -63,8 +71,13 @@ const handleCountIncrease = (): void => {
         <p class="my-4">
           App Version: <strong>{{ appVersion }}</strong>
         </p>
+          <p v-if="selectedFile !== ''">{{
+                  $t('desc.selected-file', {
+                    filePath: selectedFile
+                  })
+                }}</p>
         <v-row class="my-4">
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleChangeTheme">
               <v-icon icon="mdi-brightness-6" />
               <v-tooltip activator="parent" location="bottom">
@@ -72,7 +85,7 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-badge data-testid="counter-badge" color="blue" :content="counter">
               <v-btn data-testid="btn-counter" icon color="primary" @click="handleCountIncrease">
                 <v-icon icon="mdi-plus-circle" />
@@ -82,7 +95,7 @@ const handleCountIncrease = (): void => {
               </v-btn>
             </v-badge>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleOpenDocument">
               <v-icon icon="mdi-file-document" />
               <v-tooltip activator="parent" location="bottom">
@@ -90,7 +103,7 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleOpenGitHub">
               <v-icon icon="mdi-github" />
               <v-tooltip activator="parent" location="bottom">
@@ -98,9 +111,17 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
+          <v-col>
+            <v-btn icon color="primary" @click="handleOpenFile">
+              <v-icon icon="mdi-folder-open" />
+              <v-tooltip activator="parent" location="bottom">
+                {{ $t('menu.open-file') }}
+              </v-tooltip>
+            </v-btn>
+          </v-col>
           <v-col cols="12">
             <v-select
-              data-testid="select-language"
+data-testid="select-language"
               :model-value="locale"
               density="compact"
               :label="$t('menu.change-language')"
diff --git a/src/renderer/utils/index.ts b/src/renderer/utils/index.ts
index aea916e..28228f2 100644
--- a/src/renderer/utils/index.ts
+++ b/src/renderer/utils/index.ts
@@ -6,6 +6,10 @@ export default class Utils {
   static async openExternal(url: string): Promise<void> {
     await window.mainApi.send('msgOpenExternalLink', url)
   }
+
+  static async openFile(type: string): Promise<any> {
+    return window.mainApi.invoke('msgOpenFile', type)
+  }
 }
 
-export const { getCurrentLocale, openExternal } = Utils
+export const { getCurrentLocale, openExternal, openFile } = Utils