diff --git a/.eslintrc.js b/.eslintrc.js
index b462405..b49435a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,8 @@ module.exports = {
   ],
   rules: {
     'vue/require-default-prop': 'off',
-    'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
+    'vue/attribute-order': 'off',
+    '@typescript-eslint/no-explicit-any': 'off'
   }
 }
diff --git a/.gitignore b/.gitignore
index 42bd71b..de14059 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ dist
 out
 .DS_Store
 *.log*
+map-*
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 3909346..fe97cc9 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -5,8 +5,10 @@
       <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
     </HTMLCodeStyleSettings>
     <JSCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
       <option name="FORCE_SEMICOLON_STYLE" value="true" />
       <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
       <option name="FORCE_QUOTE_STYlE" value="true" />
       <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
       <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
@@ -16,8 +18,10 @@
       <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
     </JetCodeStyleSettings>
     <TypeScriptCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
       <option name="FORCE_SEMICOLON_STYLE" value="true" />
       <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
       <option name="FORCE_QUOTE_STYlE" value="true" />
       <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
       <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
@@ -28,7 +32,7 @@
       <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
     </VueCodeStyleSettings>
     <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="150" />
+      <option name="SOFT_MARGINS" value="220" />
       <indentOptions>
         <option name="INDENT_SIZE" value="2" />
         <option name="CONTINUATION_INDENT_SIZE" value="2" />
@@ -36,7 +40,7 @@
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="150" />
+      <option name="SOFT_MARGINS" value="220" />
       <indentOptions>
         <option name="INDENT_SIZE" value="2" />
         <option name="CONTINUATION_INDENT_SIZE" value="2" />
@@ -44,7 +48,7 @@
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="150" />
+      <option name="SOFT_MARGINS" value="220" />
       <indentOptions>
         <option name="INDENT_SIZE" value="2" />
         <option name="CONTINUATION_INDENT_SIZE" value="2" />
@@ -52,7 +56,7 @@
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="150" />
+      <option name="SOFT_MARGINS" value="220" />
       <indentOptions>
         <option name="CONTINUATION_INDENT_SIZE" value="2" />
       </indentOptions>
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index 35893b3..5d3fb87 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -1,4 +1,4 @@
 singleQuote: true
 semi: false
-printWidth: 100
+printWidth: 220
 trailingComma: none
diff --git a/README.md b/README.md
index 2a4b916..dfa4d85 100644
--- a/README.md
+++ b/README.md
@@ -13,12 +13,11 @@ This standalone portable application allows downloading maps from various source
 3. Show and resize the cropping area (use the control key to toggle between dragging the map or the crop area)
 4. Download your map.
 
-
-![screenshot.gif](https://github.com/extic/map-downloader/blob/main/packages/renderer/public/screenshot.gif?raw=true)
+![screenshot.gif](https://github.com/extic/map-downloader/blob/main/src/renderer/public/screenshot.gif?raw=true)
 
 ## Donate
 
-If you like this application, I would very much appriciate your donation as it gives me the will to continue and improve it. Thank you!
+If you like this application, I would very much appreciate your donation as it gives me the will to continue and improve it. Thank you!
 
 ## List of map sources
 - GovMap - https://www.govmap.gov.il
diff --git a/package-lock.json b/package-lock.json
index b355e4e..d8070fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.0",
         "@electron-toolkit/utils": "^3.0.0",
+        "electron-fetch": "^1.9.1",
         "electron-updater": "^6.1.7",
         "pinia": "^2.2.0",
         "pureimage": "^0.4.13",
@@ -4291,6 +4292,18 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/electron-fetch": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/electron-fetch/-/electron-fetch-1.9.1.tgz",
+      "integrity": "sha512-M9qw6oUILGVrcENMSRRefE1MbHPIz0h79EKIeJWK9v563aT9Qkh8aEHPO1H5vi970wPirNY+jO9OpFoLiMsMGA==",
+      "license": "MIT",
+      "dependencies": {
+        "encoding": "^0.1.13"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/electron-publish": {
       "version": "24.13.1",
       "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-24.13.1.tgz",
@@ -4452,6 +4465,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -5599,7 +5621,6 @@
     },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -6999,7 +7020,6 @@
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/sanitize-filename": {
diff --git a/package.json b/package.json
index 9c44444..321859c 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "electron-fetch": "^1.9.1",
     "electron-updater": "^6.1.7",
     "pinia": "^2.2.0",
     "pureimage": "^0.4.13",
diff --git a/src/common/maps/govmap.data.ts b/src/common/maps/govmap.data.ts
index 9b6693a..6df5ab9 100644
--- a/src/common/maps/govmap.data.ts
+++ b/src/common/maps/govmap.data.ts
@@ -1,7 +1,4 @@
-// import * as pimage from "pureimage"
-// import { Bitmap } from "pureimage"
-// import { Readable } from "stream"
-import { MapData, UrlResult, UrlUsageType } from "./map.data"
+import { MapData, UrlResult, UrlUsageType } from './map.data'
 
 export const mapDataGovMap: MapData = {
   name: 'GovMap',
@@ -10,7 +7,7 @@ export const mapDataGovMap: MapData = {
     if (mapType === '1:25000' && (zoomLevel < 5 || zoomLevel > 9)) {
       return { url: '', unsupported: true }
     }
-    const zoomLevelStr = (mapType === '1:25000' ? zoomLevel - 5 : zoomLevel).toString(10).padStart(2, "0")
+    const zoomLevelStr = (mapType === '1:25000' ? zoomLevel - 5 : zoomLevel).toString(10).padStart(2, '0')
     const rowStr = row.toString(16).padStart(8, '0')
     const colStr = col.toString(16).padStart(8, '0')
     // https://cdn.govmap.gov.il/B0BZ1ORTO23/L08/R00004987/C00004114.jpg
@@ -20,7 +17,6 @@ export const mapDataGovMap: MapData = {
     const mapTypeStr = mapType === 'Satellite' ? 'B0BZ1ORTO23' : mapType === 'Street & Buildings' ? 'B0b3010BLDG' : '2024MAP25KTO'
     const suffix = mapType === 'Satellite' ? 'jpg' : 'png'
     const domain = 'cdn.govmap.gov.il'
-    console.log(`https://${domain}/${mapTypeStr}/L${zoomLevelStr}/R${rowStr}/C${colStr}.${suffix}`);
     return {
       url: `https://${domain}/${mapTypeStr}/L${zoomLevelStr}/R${rowStr}/C${colStr}.${suffix}`
     }
@@ -41,12 +37,6 @@ export const mapDataGovMap: MapData = {
     return 2
   },
 
-  // decode: async (mapType: string, buffer: Buffer): Promise<Bitmap> => {
-  //   return await (mapType === 'Satellite'
-  //     ? pimage.decodeJPEGFromStream(Readable.from(buffer))
-  //     : pimage.decodePNGFromStream(Readable.from(buffer)))
-  // },
-
   supportedMapTypes: ['Satellite', 'Street & Buildings', '1:25000'],
 
   showScale: true,
diff --git a/src/common/maps/map.data.ts b/src/common/maps/map.data.ts
index 9feef00..9af8de8 100644
--- a/src/common/maps/map.data.ts
+++ b/src/common/maps/map.data.ts
@@ -1,11 +1,4 @@
-// import { Bitmap } from "pureimage"
-import { mapDataTelAviv } from './tel-aviv.data'
-import { mapDataGalilTahton } from './galil-tahton.data'
-import { mapDataHaifa } from './haifa.data'
 import { mapDataGovMap } from './govmap.data'
-import { mapDataHodHasharon } from './hod-hasharon.data'
-import { mapDataMapy } from './mapy.data'
-import { mapDataNetanya } from './netanya.data'
 
 export type ZoomLayer = {
   readonly scale: number
@@ -27,17 +20,10 @@ export type UrlResult = {
 
 export type MapData = {
   name: string
-  urlProvider: (
-    usageType: UrlUsageType,
-    mapType: string,
-    zoomLevel: number,
-    row: number,
-    col: number
-  ) => Promise<UrlResult>
+  urlProvider: (usageType: UrlUsageType, mapType: string, zoomLevel: number, row: number, col: number) => Promise<UrlResult>
   getDownloaderHeaders?: () => any
   zoomLevelProvider: (zoomLevel: number) => string
   zoomFactorProvider: (zoomLevel: number, zoomIn: boolean) => number
-  // decode: (mapType: string, buffer: Buffer) => Promise<Bitmap>
   supportedMapTypes: string[]
   showScale: boolean
   referer: string | undefined
diff --git a/src/main/downloader.ts b/src/main/downloader.ts
new file mode 100644
index 0000000..0ca575e
--- /dev/null
+++ b/src/main/downloader.ts
@@ -0,0 +1,92 @@
+import * as pimage from 'pureimage'
+import * as fs from 'fs'
+import { BrowserWindow, shell } from 'electron'
+import crypto from 'crypto'
+import { DownloadData } from '../common/download'
+import { MapData, maps, UrlResult, UrlUsageType } from '../common/maps/map.data'
+import { getBackendData } from './maps/map-backend'
+
+export const downloadOptions = {
+  canceled: false
+}
+
+export const downloadMap = async (win: BrowserWindow, request: DownloadData) => {
+  if (!request) {
+    return
+  }
+
+  downloadOptions.canceled = false
+
+  const maxX = request.endCol - request.startCol + 1
+  const maxY = request.endRow - request.startRow + 1
+
+  console.log(`Starting download of ${maxX * maxY} tiles`)
+
+  const map = maps.find((it) => it.name === request.mapName)!
+
+  const croppedWidth = maxX * 256 - request.startX - (256 - request.endX)
+  const croppedHeight = maxY * 256 - request.startY - (256 - request.endY)
+  const overallImg = pimage.make(croppedWidth, croppedHeight)
+  const overallCtx = overallImg.getContext('2d')
+
+  const backendData = getBackendData(map.name)
+
+  for (let y = 0; y < maxY; y++) {
+    for (let x = 0; x < maxX; x++) {
+      if (downloadOptions.canceled) {
+        console.log('Download canceled')
+        return
+      }
+
+      const progress = (x + y * maxX) / (maxX * maxY)
+      win.webContents.send('download-progress', progress)
+
+      console.log(`Downloading images: ${(progress * 100).toFixed(2)}%, x=${x}/${maxX}, y=${y}/${maxY}`)
+
+      const { url, unsupported } = await getTileUrl(map, request.zoomLevel, request.startRow + y, request.startCol + x, request.mapType)
+      try {
+        if (!unsupported) {
+          const headers = map.getDownloaderHeaders ? map.getDownloaderHeaders() : {}
+
+          const response = await fetch(url, headers) //, { responseType: "arraybuffer" });
+          const arrayBuffer = await response.arrayBuffer()
+          const buffer = Buffer.from(arrayBuffer)
+          const img1 = await backendData.decode(request.mapType, buffer)
+          const ctx = img1.getContext('2d')
+          const imageData = ctx.getImageData(0, 0, 256, 256)
+          for (let j = 0; j < 256; j++) {
+            const posY = j + y * 256 - request.startY
+            if (posY >= 0) {
+              for (let i = 0; i < 256; i++) {
+                const posX = i + x * 256 - request.startX
+                if (posX >= 0) {
+                  overallCtx.fillPixelWithColor(posX, posY, imageData.getPixelRGBA(i, j))
+                }
+              }
+            }
+          }
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+
+  console.log(`Downloading done`)
+
+  const fileName = `map-${crypto.randomUUID()}.png`
+  pimage
+    .encodePNGToStream(overallImg, fs.createWriteStream(fileName))
+    .then(() => {
+      win.webContents.send('download-done', true)
+      shell.openPath(fileName)
+    })
+    .catch((e) => {
+      console.log('there was an error writing', e)
+      win.webContents.send('download-done', false)
+    })
+}
+
+const getTileUrl = async (map: MapData, zoomLevel: number, row: number, col: number, mapType: string): Promise<UrlResult> => {
+  return await map.urlProvider(UrlUsageType.DOWNLOAD, mapType, zoomLevel, row, col)
+}
diff --git a/src/main/event-registrar.ts b/src/main/event-registrar.ts
new file mode 100644
index 0000000..943d87c
--- /dev/null
+++ b/src/main/event-registrar.ts
@@ -0,0 +1,26 @@
+import { App, BrowserWindow, ipcMain } from 'electron'
+import { downloadMap, downloadOptions } from './downloader'
+import { handleHttpRequest } from './http-request.service'
+import { setReferrer } from './main-store'
+
+export const eventRegistrar = {
+  registerEvents: (win: BrowserWindow, app: App) => {
+    ipcMain.on('download-map', async (_, arg) => {
+      await downloadMap(win, arg)
+    })
+
+    ipcMain.on('cancel-download', () => {
+      downloadOptions.canceled = true
+    })
+
+    ipcMain.on('get-app-version', () => {
+      win.webContents.send('app-version', app.getVersion())
+    })
+
+    ipcMain.on('set-referer', (_, arg) => {
+      setReferrer(arg)
+    })
+
+    ipcMain.handle('http:request', handleHttpRequest)
+  }
+}
diff --git a/src/main/http-request.service.ts b/src/main/http-request.service.ts
new file mode 100644
index 0000000..002e380
--- /dev/null
+++ b/src/main/http-request.service.ts
@@ -0,0 +1,12 @@
+import { IpcMainInvokeEvent } from 'electron'
+import fetch from 'electron-fetch'
+
+export async function handleHttpRequest(_: IpcMainInvokeEvent, url: string): Promise<ArrayBuffer> {
+  console.log('Getting', url)
+  const response = await fetch(url, {
+    headers: {
+      referer: 'https://en.mapy.cz/'
+    }
+  })
+  return await response.arrayBuffer()
+}
diff --git a/src/main/index.ts b/src/main/index.ts
index c9cb32b..7ac8885 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,7 +1,8 @@
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, BrowserWindow, shell } from 'electron'
 import { join } from 'path'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
+import { electronApp, is, optimizer } from '@electron-toolkit/utils'
 import icon from '../../resources/favicon.ico?asset'
+import { eventRegistrar } from './event-registrar'
 
 function createWindow(): void {
   // Create the browser window.
@@ -19,6 +20,10 @@ function createWindow(): void {
     }
   })
 
+  if (process.env.NODE_ENV !== "production") {
+    mainWindow.webContents.openDevTools()
+  }
+
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
   })
@@ -35,6 +40,8 @@ function createWindow(): void {
   } else {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
   }
+
+  eventRegistrar.registerEvents(mainWindow, app);
 }
 
 // This method will be called when Electron has finished
@@ -52,7 +59,8 @@ app.whenReady().then(() => {
   })
 
   // IPC test
-  ipcMain.on('ping', () => console.log('pong'))
+  // ipcMain.on('ping', () => console.log('pong'))
+  // ipcMain.on('download-map', (a) => console.log(a))
 
   createWindow()
 
diff --git a/src/main/main-store.ts b/src/main/main-store.ts
new file mode 100644
index 0000000..72a653c
--- /dev/null
+++ b/src/main/main-store.ts
@@ -0,0 +1,9 @@
+let currentReferer = ''
+
+export const setReferrer = (referer: string) => {
+  currentReferer = referer
+}
+
+export const getReferrer = (): string => {
+  return currentReferer
+}
diff --git a/src/main/maps/govmap.backend.ts b/src/main/maps/govmap.backend.ts
new file mode 100644
index 0000000..6d2c7bd
--- /dev/null
+++ b/src/main/maps/govmap.backend.ts
@@ -0,0 +1,12 @@
+import * as pimage from 'pureimage'
+import { Bitmap } from 'pureimage'
+import { Readable } from 'stream'
+import { MapBackendData } from './map-backend'
+
+export const mapBackendDataGovMap: MapBackendData = {
+  name: 'GovMap',
+
+  decode: async (mapType: string, buffer: Buffer): Promise<Bitmap> => {
+    return await (mapType === 'Satellite' ? pimage.decodeJPEGFromStream(Readable.from(buffer)) : pimage.decodePNGFromStream(Readable.from(buffer)))
+  }
+}
diff --git a/src/main/maps/map-backend.ts b/src/main/maps/map-backend.ts
new file mode 100644
index 0000000..44738bd
--- /dev/null
+++ b/src/main/maps/map-backend.ts
@@ -0,0 +1,21 @@
+import { mapBackendDataGovMap } from './govmap.backend'
+import { Bitmap } from 'pureimage'
+
+export type MapBackendData = {
+  name: string
+  decode: (mapType: string, buffer: Buffer) => Promise<Bitmap>
+}
+
+const mapBackend = [
+  mapBackendDataGovMap,
+  // mapDataGalilTahton,
+  // mapDataTelAviv,
+  // mapDataHaifa,
+  // mapDataHodHasharon,
+  // mapDataNetanya,
+  // mapDataMapy
+]
+
+export function getBackendData(mapName: string) {
+  return mapBackend.find((it) => it.name === mapName)!
+}
diff --git a/src/renderer/public/screenshot.gif b/src/renderer/public/screenshot.gif
new file mode 100644
index 0000000..f18b778
Binary files /dev/null and b/src/renderer/public/screenshot.gif differ
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index 9180e27..98240ae 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -1,14 +1,3 @@
 <template>
   <router-view />
-<!--  <div class="action">-->
-<!--    <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>-->
-<!--  </div>-->
 </template>
-
-<script setup lang="ts">
-// const ipcHandle = () => window.electron.ipcRenderer.send('ping')
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/renderer/src/assets/images/dialog-close-button.svg b/src/renderer/src/assets/images/dialog-close-button.svg
new file mode 100644
index 0000000..91daff5
--- /dev/null
+++ b/src/renderer/src/assets/images/dialog-close-button.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" fill="#333">
+  <g stroke="none" stroke-width="1" fill-rule="evenodd" transform="translate(-13,-13)">
+    <polygon points="19,17.510581 14.489419,13 13,14.489419 17.510581,19 13,23.510581 14.489419,25 19,20.489419 23.510581,25 25,23.510581 20.489419,19 25,14.489419 23.510581,13 " />
+  </g>
+</svg>
diff --git a/src/renderer/src/assets/images/unsupported.png b/src/renderer/src/assets/images/unsupported.png
new file mode 100644
index 0000000..edcb008
Binary files /dev/null and b/src/renderer/src/assets/images/unsupported.png differ
diff --git a/src/renderer/src/components/ControlsPane.vue b/src/renderer/src/components/ControlsPane.vue
index 8bb0ce5..3180001 100644
--- a/src/renderer/src/components/ControlsPane.vue
+++ b/src/renderer/src/components/ControlsPane.vue
@@ -43,20 +43,11 @@
 </template>
 
 <script setup lang="ts">
-// import { computed, defineComponent, onMounted, watch } from "vue";
-// import { isProduction } from "../utils";
-// import { openDownloadDialog } from "./DownloadDialog.vue";
-// import { useMapStore } from "../store/map-store";
-// import { MapData, maps } from "../../../common/maps/map.data";
-// import { ipcRenderer } from "electron";
-//
-// export default defineComponent({
-//   name: "ControlsPane",
-//
-//   setup() {
-import { useMapStore } from "../store/map-store"
-import { MapData, maps } from "../../../common/maps/map.data"
-import { onMounted } from "vue"
+import { useMapStore } from '../store/map-store'
+import { maps } from '../../../common/maps/map.data'
+import { onMounted } from 'vue'
+import { useDialog } from './dialog/use-dialog'
+import DownloadDialog from './dialog/download-dialog.vue'
 
 const store = useMapStore()
 
@@ -84,10 +75,35 @@ function toggleDragMode() {
   store.dragMode = store.dragMode === 'map' ? 'crop' : 'map'
 }
 
+const dialog = useDialog();
+
 function download() {
-  // openDownloadDialog();
+  // const zoomLayers = store.map.zoomLayers;
+  // const layer = zoomLayers[store.zoomLevel];
+  // const mapWidth = !map.value!.clientWidth;
+  // const mapHeight = map.value!.clientHeight;
+  //
+  // const startX = store.cropLeft + store.posLeft - Math.floor(mapWidth / 2) + layer.centerTileOffsetX;
+  // const startY = store.cropTop + store.posTop - Math.floor(mapHeight / 2) + layer.centerTileOffsetY;
+  //
+  // store.setDownloadData({
+  //   zoomLevel: store.zoomLevel,
+  //   startCol: Math.floor(startX / 256) + layer.centerTileX,
+  //   startRow: Math.floor(startY / 256) + layer.centerTileY,
+  //   endCol: Math.floor((startX + store.cropWidth) / 256) + layer.centerTileX,
+  //   endRow: Math.floor((startY + store.cropHeight) / 256) + layer.centerTileY,
+  //   startX: mod(startX, 256),
+  //   startY: mod(startY, 256),
+  //   endX: mod(startX + store.cropWidth, 256),
+  //   endY: mod(startY + store.cropHeight, 256),
+  //   mapName: store.map.name,
+  //   mapType: store.mapType,
+  // });
+
+  dialog.show(DownloadDialog, { mapWidth: store.mapWidth, mapHeight: store.mapHeight })
 }
 
+
 function donate() {
   window.open(
     'https://www.paypal.com/donate/?business=R4VGRL3MHAWCY&no_recurring=0&item_name=Maps+Downloader+-+I+welcome+your+support+as+it+takes+some+time+and+effort+continuing+developing+and+maintaining+it.+Thank+you%21&currency_code=ILS'
diff --git a/src/renderer/src/components/MapView.vue b/src/renderer/src/components/MapView.vue
index 4f094df..2377e02 100644
--- a/src/renderer/src/components/MapView.vue
+++ b/src/renderer/src/components/MapView.vue
@@ -1,8 +1,8 @@
 <template>
-  <div ref="map" class="map-view" v-draggable="{ dragged }" @wheel="zoom($event)">
+  <div ref="map" v-draggable="{ dragged }" class="map-view" @wheel="zoom($event)">
     <div v-for="tile in tiles" :key="tile.top * 100000 + tile.left" :style="{ left: tile.left + 'px', top: tile.top + 'px' }" class="tile">
-      <img v-if="!tile.unsupported" :src="tile.url" referrerpolicy="origin" alt="map tile" @error="noTileImage"/>
-      <img v-else src="../assets/images/unsupported.png"/>
+      <img v-if="!tile.unsupported" :src="tile.url" referrerpolicy="origin" alt="map tile" @error="noTileImage" />
+      <img v-else src="../assets/images/unsupported.png" />
     </div>
     <crop-area v-if="store.showCrop && !isCropAreaTooSmall" />
     <div class="map-info">
@@ -19,10 +19,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, onBeforeUpdate, onMounted, ref, watch } from "vue";
-import { useMapStore } from "../store/map-store";
-import CropArea from "./CropArea.vue";
-import { MapData, UrlUsageType } from "../../../common/maps/map.data";
+import { computed, onMounted, ref, watch } from 'vue'
+import { useMapStore } from '../store/map-store'
+import CropArea from './CropArea.vue'
+import { UrlUsageType } from '../../../common/maps/map.data'
+import { mod } from '../utils'
 
 interface TileData {
   readonly left: number
@@ -42,10 +43,6 @@ const isCropAreaTooSmall = computed(() => {
   return store.cropWidth < 50 || store.cropHeight < 50
 })
 
-const mod = (n: number, m: number): number => {
-  return ((n % m) + m) % m;
-}
-
 async function updateTiles() {
   const zoomLayers = store.map.zoomLayers
   const layer = zoomLayers[store.zoomLevel]
@@ -71,15 +68,15 @@ async function updateTiles() {
 }
 
 function updateMapDimensions() {
-  const mapWidth = map.value!.clientWidth;
-  const mapHeight = map.value!.clientHeight;
-  store.setMapDimensions(mapWidth, mapHeight);
+  const mapWidth = map.value!.clientWidth
+  const mapHeight = map.value!.clientHeight
+  store.setMapDimensions(mapWidth, mapHeight)
 }
 
 onMounted(async () => {
   updateMapDimensions()
   store.resetCropArea()
-  updateDownloadData()
+  // updateDownloadData()
   await updateTiles()
 
   watch(
@@ -92,11 +89,11 @@ onMounted(async () => {
 
       if (oldMap !== newMap) {
         store.resetCropArea()
-        updateDownloadData()
+        // updateDownloadData()
       } else if (newMapType !== oldMapType) {
-        updateDownloadData()
+        // updateDownloadData()
       }
-  //     instance!.proxy!.$forceUpdate();
+      //     instance!.proxy!.$forceUpdate();
     }
   )
   //
@@ -113,10 +110,11 @@ onMounted(async () => {
       await updateTiles()
     }
   )
-  //
-  // (document.getElementsByTagName("BODY")[0] as HTMLElement).onresize = () => {
-  //   updateMapDimensions()
-  // }
+
+  const body = document.getElementsByTagName('body')[0]
+  body.onresize = () => {
+    updateMapDimensions()
+  }
 })
 
 function dragged(deltaX: number, deltaY: number) {
@@ -124,7 +122,7 @@ function dragged(deltaX: number, deltaY: number) {
   store.posTop = store.posTop - deltaY
   store.cropLeft = store.cropLeft + deltaX
   store.cropTop = store.cropTop + deltaY
-  updateDownloadData()
+  // updateDownloadData()
   // instance!.proxy!.$forceUpdate()
 }
 
@@ -133,7 +131,6 @@ const updateDownloadData = () => {
   // const layer = zoomLayers[store.zoomLevel];
   // const mapWidth = map.value!.clientWidth;
   // const mapHeight = map.value!.clientHeight;
-
   // const startX = store.cropLeft + store.posLeft - Math.floor(mapWidth / 2) + layer.centerTileOffsetX;
   // const startY = store.cropTop + store.posTop - Math.floor(mapHeight / 2) + layer.centerTileOffsetY;
   //
@@ -150,7 +147,7 @@ const updateDownloadData = () => {
   //   mapName: store.map.name,
   //   mapType: store.mapType,
   // });
-};
+}
 
 // const instance = getCurrentInstance();
 
@@ -176,7 +173,7 @@ function zoom(event: WheelEvent) {
     store.cropWidth = store.cropWidth * factor
     store.cropHeight = store.cropHeight * factor
 
-//   instance!.proxy!.$forceUpdate();
+    //   instance!.proxy!.$forceUpdate();
   }
 }
 
diff --git a/src/renderer/src/components/dialog/base-dialog.vue b/src/renderer/src/components/dialog/base-dialog.vue
new file mode 100644
index 0000000..86e41c0
--- /dev/null
+++ b/src/renderer/src/components/dialog/base-dialog.vue
@@ -0,0 +1,91 @@
+<template>
+  <dialog ref="dialog" @click.self="closeDialog">
+    <header class="dialog-header">
+      <slot name="header"></slot>
+      <button class="dialog-close" @click="closeDialog">
+        <img src="../../assets/images/dialog-close-button.svg" />
+      </button>
+    </header>
+    <div class="dialog-body">
+      <slot></slot>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const emit = defineEmits(['close'])
+const dialog = ref<HTMLDialogElement>()
+
+const closeDialog = () => {
+  dialog.value!.close()
+  emit('close')
+}
+
+const openDialog = () => {
+  dialog.value!.showModal()
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    closeDialog()
+  }
+}
+
+defineExpose({
+  closeDialog
+})
+
+onMounted(() => {
+  openDialog()
+  document.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeyDown)
+})
+</script>
+
+<style scoped>
+dialog {
+  font-size: 1rem;
+  border: none;
+  border-radius: 10px;
+  box-shadow: 3px 4px 9px 2px #0000008a;
+  width: 40vw;
+  min-width: 20em;
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.41);
+  }
+
+  header {
+    background: white;
+    color: black;
+    padding: 1em 0;
+    border-radius: 5px 5px 0 0;
+    display: flex;
+    align-items: center;
+
+    .dialog-close {
+      outline: none;
+      width: 2.4em;
+      height: 2.4em;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      flex-shrink: 0;
+      padding: 0;
+      background: transparent;
+
+      img {
+        width: 1.3em;
+        height: 1.3em;
+        position: relative;
+        top: 1px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/renderer/src/components/dialog/download-dialog.vue b/src/renderer/src/components/dialog/download-dialog.vue
new file mode 100644
index 0000000..4c43a6e
--- /dev/null
+++ b/src/renderer/src/components/dialog/download-dialog.vue
@@ -0,0 +1,174 @@
+<template>
+  <base-dialog ref="base">
+    <template #header>
+      <span class="title">{{ error ? 'Error' : 'Creating Map...' }}</span>
+    </template>
+    <template #default>
+      <div class="donate-dialog-content">
+        <div class="dialog-content">
+          <div v-if="!error">
+            <div>Progress</div>
+            <div class="progress-bar-container">
+              <div class="progress-bar" :style="{ width: progress * 100 + '%' }"></div>
+              <div class="progress-value">{{ progressValue() }}%</div>
+            </div>
+          </div>
+          <div v-else class="error">{{ error }}</div>
+        </div>
+        <div class="buttons">
+          <button @click="cancel">{{ error ? 'Close' : 'Cancel' }}</button>
+        </div>
+      </div>
+    </template>
+  </base-dialog>
+</template>
+
+<script setup lang="ts">
+import BaseDialog from './base-dialog.vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useMapStore } from '../../store/map-store'
+import { DownloadData } from '../../../../common/download'
+import { mod } from '../../utils'
+
+const base = ref<typeof BaseDialog>()
+const error = ref(null as string | null)
+const progress = ref(0)
+const store = useMapStore()
+
+const props = defineProps({
+  mapWidth: Number,
+  mapHeight: Number
+})
+
+function progressValue() {
+  return (progress.value * 100).toFixed(2)
+}
+
+function cancel() {
+  // <template #footer>
+  // <button @click="base!.closeDialog">Close</button>
+  //   </template>
+}
+
+function onDownloadProgress(_: any, downloadProgress: number) {
+  progress.value = downloadProgress
+}
+
+function onDownloadDone(_: any, result: boolean) {
+  progress.value = 1
+  if (result) {
+    base.value!.closeDialog()
+  } else {
+    error.value = 'There was an error while downloading. Please try again.'
+  }
+}
+
+let downloadProgressEventTargetRef: (() => void) | null = null
+let downloadDoneEventTargetRef: (() => void) | null = null
+
+onMounted(() => {
+  const zoomLayers = store.map.zoomLayers
+  const layer = zoomLayers[store.zoomLevel]
+  const mapWidth = props.mapWidth!
+  const mapHeight = props.mapHeight!
+
+  const startX = store.cropLeft + store.posLeft - Math.floor(mapWidth / 2) + layer.centerTileOffsetX
+  const startY = store.cropTop + store.posTop - Math.floor(mapHeight / 2) + layer.centerTileOffsetY
+
+  const downloadData: DownloadData = {
+    zoomLevel: store.zoomLevel,
+    startCol: Math.floor(startX / 256) + layer.centerTileX,
+    startRow: Math.floor(startY / 256) + layer.centerTileY,
+    endCol: Math.floor((startX + store.cropWidth) / 256) + layer.centerTileX,
+    endRow: Math.floor((startY + store.cropHeight) / 256) + layer.centerTileY,
+    startX: mod(startX, 256),
+    startY: mod(startY, 256),
+    endX: mod(startX + store.cropWidth, 256),
+    endY: mod(startY + store.cropHeight, 256),
+    mapName: store.map.name,
+    mapType: store.mapType
+  }
+
+  const tilesX = downloadData.endCol - downloadData.startCol + 1
+  const tilesY = downloadData.endRow - downloadData.startRow + 1
+  const tooLarge = tilesX * tilesY > 2500
+  if (tooLarge) {
+    error.value = 'Content to download is too large, please down-size the crop area.'
+  } else {
+    downloadProgressEventTargetRef = window.electron.ipcRenderer.on('download-progress', onDownloadProgress)
+    downloadDoneEventTargetRef = window.electron.ipcRenderer.on('download-done', onDownloadDone)
+
+    window.electron.ipcRenderer.send('download-map', downloadData)
+  }
+})
+
+onUnmounted(() => {
+  downloadProgressEventTargetRef?.()
+  downloadDoneEventTargetRef?.()
+})
+</script>
+
+<style scoped>
+.title {
+  flex-grow: 1;
+  font-size: 1.3em;
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  margin: 1em 0 3em 0;
+
+  .progress-bar-container {
+    border: 1px solid gray;
+    border-radius: 5px;
+    position: relative;
+    height: 1.5em;
+    overflow: hidden;
+    margin-top: 5px;
+
+    .progress-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: #65b3ff;
+      height: 1.5em;
+    }
+
+    .progress-value {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1.5em;
+      line-height: 1.5em;
+      text-align: center;
+    }
+  }
+
+  .error {
+    margin-bottom: 2em;
+  }
+}
+
+.buttons {
+  margin-top: 2em;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  justify-content: flex-end;
+
+  button {
+    padding: 0.3em 1em;
+    border: 1px solid #555;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 10em;
+
+    &.primary {
+      background-color: #65b3ff;
+      color: white;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/src/components/dialog/use-dialog.ts b/src/renderer/src/components/dialog/use-dialog.ts
new file mode 100644
index 0000000..b2f1124
--- /dev/null
+++ b/src/renderer/src/components/dialog/use-dialog.ts
@@ -0,0 +1,23 @@
+import { type Component, createVNode, getCurrentInstance, render } from 'vue'
+
+export function useDialog() {
+  const { appContext } = getCurrentInstance()!
+
+  function show(dialog: Component, props: any) {
+    const dialogContainer = document.createElement('div')
+    document.body.appendChild(dialogContainer)
+
+    const dialogInstance = createVNode(dialog, {
+      ...props,
+      onClose: () => {
+        render(null, dialogContainer)
+        dialogContainer.remove()
+      }
+    })
+
+    dialogInstance.appContext = appContext
+    render(dialogInstance, dialogContainer)
+  }
+
+  return { show }
+}
diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts
index f6ebf3d..53134c3 100644
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -1,12 +1,12 @@
 import './assets/main.css'
 
+import router from './router'
+import { createPinia } from 'pinia'
+import { mapDataGovMap } from '../../common/maps/govmap.data'
+import { useMapStore } from './store/map-store'
+import draggable from './components/draggable.directive'
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from "./router"
-import { createPinia } from "pinia"
-import { mapDataGovMap } from "../../common/maps/govmap.data"
-import { useMapStore } from "./store/map-store";
-import draggable from "./components/draggable.directive";
 
 export const pinia = createPinia()
 
diff --git a/src/renderer/src/store/dialog-store.ts b/src/renderer/src/store/dialog-store.ts
new file mode 100644
index 0000000..a9fc12e
--- /dev/null
+++ b/src/renderer/src/store/dialog-store.ts
@@ -0,0 +1,12 @@
+// import { defineStore } from 'pinia'
+// import { ref } from 'vue'
+//
+// export const useDialogStore = defineStore('dialog', () => {
+//   const veilZIndex = ref(0)
+//
+//   function increaseVeilZIndex() {
+//     veilZIndex.value = veilZIndex.value + 2
+//   }
+//
+//   return { veilZIndex, increaseVeilZIndex }
+// })
diff --git a/src/renderer/src/store/map-store.ts b/src/renderer/src/store/map-store.ts
index 6addac7..de0b8c6 100644
--- a/src/renderer/src/store/map-store.ts
+++ b/src/renderer/src/store/map-store.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { MapData, maps } from '../../../common/maps/map.data'
 import { DownloadData } from '../../../common/download'
-import { ref } from "vue";
+import { ref } from 'vue'
 
 export type DragMode = 'map' | 'crop'
 
@@ -34,7 +34,7 @@ export const useMapStore = defineStore('map', () => {
   const downloadData = ref<DownloadData>(resetDownloadData())
   const mapWidth = ref(0)
   const mapHeight = ref(0)
-  const tooLarge = ref(false)
+  // const tooLarge = ref(false)
   const appVersion = ref('')
 
   function setMap(mapData: MapData): void {
@@ -88,7 +88,7 @@ export const useMapStore = defineStore('map', () => {
     downloadData,
     mapWidth,
     mapHeight,
-    tooLarge,
+    // tooLarge,
     appVersion,
     setMap,
     setMapDimensions,
diff --git a/src/renderer/src/utils.ts b/src/renderer/src/utils.ts
new file mode 100644
index 0000000..f273101
--- /dev/null
+++ b/src/renderer/src/utils.ts
@@ -0,0 +1,3 @@
+export function mod(n: number, m: number): number {
+  return ((n % m) + m) % m
+}
diff --git a/src/renderer/src/views/MapContainer.vue b/src/renderer/src/views/MapContainer.vue
index 13e3b0a..7dff07b 100644
--- a/src/renderer/src/views/MapContainer.vue
+++ b/src/renderer/src/views/MapContainer.vue
@@ -6,27 +6,19 @@
 </template>
 
 <script setup lang="ts">
-// import {defineComponent} from "vue"
-// import MapView from "../components/MapView.vue"
-// import HeaderBar from "../components/HeaderBar.vue"
-//
-// export default defineComponent({
-//     name: 'MapContainer',
-//     components: {MapView, HeaderBar}
-// });
-import HeaderBar from "../components/HeaderBar.vue"
-import MapView from "../components/MapView.vue"
+import HeaderBar from '../components/HeaderBar.vue'
+import MapView from '../components/MapView.vue'
 </script>
 
 <style scoped>
 .map-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
-    .map {
-        flex-grow: 1;
-    }
+  .map {
+    flex-grow: 1;
+  }
 }
 </style>
diff --git a/tsconfig.node.json b/tsconfig.node.json
index db23a68..8e148e3 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,6 +1,6 @@
 {
   "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
-  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
+  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*", "src/common/**/*"],
   "compilerOptions": {
     "composite": true,
     "types": ["electron-vite/node"]