diff --git a/.vscode/launch.json b/.vscode/launch.json
index e972b42..a12d224 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -9,7 +9,9 @@
       "type": "go",
       "request": "launch",
       "mode": "auto",
-      "program": "${fileDirname}"
+      "program": "${fileDirname}",
+      "buildFlags": ["-ldflags=-X main.overrideUrl=http://localhost:1234"],
+      "env": { "DEBUG": "true" }
     }
   ]
 }
diff --git a/main.go b/main.go
index e42839a..ee4bf6d 100644
--- a/main.go
+++ b/main.go
@@ -18,7 +18,6 @@ import (
 	webview "github.com/webview/webview_go"
 )
 
-// FIXME: Design UI (with live warnings/errors).
 // FIXME: Validate written image.
 // TODO: Future support for flashing to an internal drive?
 
@@ -132,7 +131,6 @@ func main() {
 			} else if !stat.Mode().IsRegular() {
 				w.Eval("setDialogReact(" + ParseToJsString("Error: Select a regular file!") + ")")
 			} else { // Send this back to React.
-				w.Eval("setFileSizeReact(" + strconv.Itoa(int(stat.Size())) + ")")
 				w.Eval("setFileReact(" + ParseToJsString(filename) + ")")
 			}
 		}
@@ -142,7 +140,7 @@ func main() {
 	var inputPipe io.WriteCloser
 	var cancelled bool = false
 	var mutex sync.Mutex
-	w.Bind("flash", func(file string, selectedDevice string) {
+	w.Bind("flash", func(file string, device string, deviceSize int) {
 		cancelled = false
 		stat, err := os.Stat(file)
 		if err != nil {
@@ -151,18 +149,19 @@ func main() {
 		} else if !stat.Mode().IsRegular() {
 			w.Eval("setDialogReact(" + ParseToJsString("Error: Select a regular file!") + ")")
 			return
-		} else {
-			w.Eval("setFileSizeReact(" + strconv.Itoa(int(stat.Size())) + ")")
+		} else if stat.Size() > int64(deviceSize) {
+			w.Eval("setDialogReact(" + ParseToJsString("Error: The disk image is too big to fit on the selected drive!") + ")")
+			return
 		}
-		channel, stdin, err := app.CopyConvert(file, selectedDevice)
+		fileSizeStr := strconv.Itoa(int(stat.Size()))
+		channel, stdin, err := app.CopyConvert(file, device)
 		inputPipe = stdin
 		if err != nil {
 			w.Eval("setDialogReact(" + ParseToJsString("Error: "+err.Error()) + ")")
 			return
-		} else {
-			w.Eval("setSpeedReact(" + ParseToJsString("0 MB/s") + ")") // Show progress instantly.
-			w.Eval("setProgressReact(0)")
 		}
+		// Show progress instantly.
+		w.Eval("setProgressReact({ bytes: 0, total: " + fileSizeStr + ", speed: '0 MB/s' })")
 		go (func() {
 			errored := false
 			for {
@@ -177,10 +176,11 @@ func main() {
 					w.Dispatch(func() {
 						if progress.Error != nil { // Error is always the last emitted.
 							errored = true
-							w.Eval("setDialogReact(" + ParseToJsString("Error: "+progress.Error.Error()) + ")")
+							w.Eval("setProgressReact(" + ParseToJsString("Error: "+progress.Error.Error()) + ")")
 						} else {
-							w.Eval("setSpeedReact(" + ParseToJsString(progress.Speed) + ")")
-							w.Eval("setProgressReact(" + strconv.Itoa(progress.Bytes) + ")")
+							w.Eval("setProgressReact({ bytes: " + strconv.Itoa(progress.Bytes) +
+								", total: " + fileSizeStr +
+								", speed: " + ParseToJsString(progress.Speed) + " })")
 						}
 					})
 				} else {
diff --git a/renderer/App.module.scss b/renderer/App.module.scss
index 3fcf4f6..4c37e52 100644
--- a/renderer/App.module.scss
+++ b/renderer/App.module.scss
@@ -11,26 +11,3 @@
   width: 100%;
   max-width: 540px;
 }
-
-.select-container {
-  display: flex;
-  padding-top: 0.4em;
-  padding-bottom: 0.4em;
-  > :last-child {
-    margin-left: 0.4em;
-  }
-}
-
-.flash-progress-container {
-  display: flex;
-  align-items: center;
-  padding-top: 0.4em;
-}
-
-.full-width {
-  width: 100%;
-}
-
-.spacer {
-  width: 5px;
-}
diff --git a/renderer/App.tsx b/renderer/App.tsx
index 70ddec4..bf98040 100644
--- a/renderer/App.tsx
+++ b/renderer/App.tsx
@@ -1,118 +1,55 @@
+import { DialogContent, DialogTitle, Modal, ModalClose, ModalDialog } from '@mui/joy'
 import { useEffect, useState } from 'react'
-import JSBI from 'jsbi'
-import Dialog from './Dialog'
 import * as styles from './App.module.scss'
-import { Button, Option, Select, Textarea, Typography, useColorScheme } from '@mui/joy'
+import MainScreen from './screens/MainScreen'
+import ProgressScreen from './screens/ProgressScreen'
 
 // TODO: Experiment with lg size for the UI.
 const App = (): JSX.Element => {
   const [file, setFile] = useState('')
-  const [speed, setSpeed] = useState('')
-  const [dialog, setDialog] = useState('')
-  const [confirm, setConfirm] = useState(false)
+  const [device, setDevice] = useState<string | null>(null)
   const [devices, setDevices] = useState<string[]>([])
-  const [fileSize, setFileSize] = useState(0)
-  const [progress, setProgress] = useState<number | string | null>(null)
-  const [selectedDevice, setSelectedDevice] = useState<string | null>(null)
   globalThis.setFileReact = setFile
-  globalThis.setSpeedReact = setSpeed
-  globalThis.setDialogReact = setDialog
   globalThis.setDevicesReact = setDevices
+  const [dialog, setDialog] = useState('')
+  globalThis.setDialogReact = setDialog
+  const [progress, setProgress] = useState<Progress | string | null>(null)
   globalThis.setProgressReact = setProgress
-  globalThis.setFileSizeReact = setFileSize
-  useColorScheme().setMode('light')
   useEffect(() => {
     globalThis.refreshDevices()
   }, [])
-  useEffect(() => setSelectedDevice(null), [devices])
+  useEffect(() => setDevice(null), [devices])
 
-  const inProgress = typeof progress === 'number'
-  useEffect(() => setConfirm(false), [inProgress])
-  const onFlashButtonClick = (): void => {
-    if (inProgress) {
-      // FIXME: A dialog would be better.
-      if (confirm) {
-        setConfirm(false)
-        globalThis.cancelFlash()
-      } else setConfirm(true)
-      return
-    }
-    setProgress(null)
-    if (selectedDevice === null) return setDialog('Error: Select a device to flash the ISO to!')
-    if (file === '') return setDialog('Error: Select an ISO to flash to a device!')
-    if (JSBI.greaterThan(JSBI.BigInt(fileSize), JSBI.BigInt(selectedDevice.split(' ')[0]))) {
-      return setDialog('Error: The ISO file is too big to fit on the selected drive!')
-    }
-    if (!confirm) return setConfirm(true)
-    setConfirm(false)
-    globalThis.flash(file, selectedDevice.split(' ')[1])
-  }
-  const onFileInputChange: React.ChangeEventHandler<HTMLTextAreaElement> = event =>
-    setFile(event.target.value.replace(/\n/g, ''))
-
-  const progressPercent = inProgress
-    ? JSBI.divide(JSBI.multiply(JSBI.BigInt(progress), JSBI.BigInt(100)), JSBI.BigInt(fileSize))
-    : JSBI.BigInt(0)
   return (
     <div className={styles.root}>
-      <Dialog
-        open={dialog !== ''}
-        onClose={() => setDialog('')}
-        message={dialog.startsWith('Error: ') ? dialog.substring(7) : dialog}
-        error={dialog.startsWith('Error: ')}
-      />
+      <Modal open={dialog !== ''} onClose={() => setDialog('')}>
+        <ModalDialog color={dialog.startsWith('Error: ') ? 'danger' : undefined}>
+          <ModalClose variant='soft' />
+          <DialogTitle>{dialog.startsWith('Error: ') ? 'Error' : 'Info'}</DialogTitle>
+          <DialogContent>
+            {dialog.startsWith('Error: ') ? dialog.substring(7) : dialog}
+          </DialogContent>
+        </ModalDialog>
+      </Modal>
       <div className={styles.container}>
-        <Typography>Step 1: Select the disk image (.iso, .img, etc) to flash.</Typography>
-        <div className={styles['select-container']}>
-          <Button variant='soft' onClick={() => globalThis.promptForFile()}>
-            Select File
-          </Button>
-          <Textarea
-            minRows={2}
-            maxRows={2}
-            required
-            placeholder='Path to disk image'
-            className={styles['full-width']}
-            value={file}
-            onChange={onFileInputChange}
+        {progress === null && (
+          <MainScreen
+            file={file}
+            setFile={setFile}
+            device={device}
+            setDevice={setDevice}
+            devices={devices}
+            setDialog={setDialog}
           />
-        </div>
-        <br />
-        <Typography>Step 2: Select the device to flash to.</Typography>
-        <div className={styles['select-container']}>
-          <Select
-            className={styles['full-width']}
-            placeholder='Select a device'
-            value={selectedDevice}
-            required
-            onChange={(_, value) => setSelectedDevice(value)}
-          >
-            {devices.map(device => (
-              <Option key={device} value={device}>
-                {device.substr(device.indexOf(' ') + 1)}
-              </Option>
-            ))}
-          </Select>
-          <Button onClick={() => globalThis.refreshDevices()} variant='soft'>
-            Refresh
-          </Button>
-        </div>
-
-        <br />
-        <div className={styles['flash-progress-container']}>
-          {/* FIXME: Add Settings dialog to disable validation. */}
-          {inProgress && (
-            // FIXME: Move this to a dedicated screen.
-            <Typography className={styles['full-width']}>
-              Progress: {progressPercent.toString()}% | Speed: {speed}
-            </Typography>
-          )}
-          <div className={styles['full-width']} />
-          <Button onClick={onFlashButtonClick}>
-            {confirm ? 'Confirm?' : inProgress ? 'Cancel' : 'Flash'}
-          </Button>
-          {typeof progress === 'string' && <span>{progress}</span>}
-        </div>
+        )}
+        {progress !== null && (
+          <ProgressScreen
+            device={device ?? ''}
+            file={file}
+            progress={progress}
+            setProgress={setProgress}
+          />
+        )}
       </div>
     </div>
   )
diff --git a/renderer/Dialog.module.scss b/renderer/Dialog.module.scss
deleted file mode 100644
index 6fce928..0000000
--- a/renderer/Dialog.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.dialog-sheet {
-  max-width: 320px;
-}
-
-.flex-spacer {
-  flex: 1;
-}
diff --git a/renderer/Dialog.tsx b/renderer/Dialog.tsx
deleted file mode 100644
index 9ebfdf1..0000000
--- a/renderer/Dialog.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DialogContent, DialogTitle, Modal, ModalClose, ModalDialog } from '@mui/joy'
-import * as styles from './Dialog.module.scss'
-
-const Dialog = (props: {
-  open: boolean
-  onClose: () => void
-  message: string
-  error: boolean
-}): JSX.Element => {
-  return (
-    <Modal open={props.open} onClose={props.onClose}>
-      <ModalDialog className={styles['dialog-sheet']} color={props.error ? 'danger' : undefined}>
-        <ModalClose variant='soft' />
-        <DialogTitle>{props.error ? 'Error' : 'Info'}</DialogTitle>
-        <DialogContent>{props.message}</DialogContent>
-      </ModalDialog>
-    </Modal>
-  )
-}
-
-export default Dialog
diff --git a/renderer/index.tsx b/renderer/index.tsx
index 820851e..098b490 100644
--- a/renderer/index.tsx
+++ b/renderer/index.tsx
@@ -5,17 +5,20 @@ import App from './App'
 declare global {
   /* eslint-disable no-var */
   // Exports from Go app process.
-  var flash: (filePath: string, devicePath: string) => void
+  var flash: (filePath: string, devicePath: string, deviceSize: number) => void
   var cancelFlash: () => void
   var promptForFile: () => void
   var refreshDevices: () => void
   // Export React state to the global scope.
   var setFileReact: (file: string) => void
-  var setSpeedReact: (speed: string) => void
-  var setDialogReact: (dialog: string) => void
   var setDevicesReact: (devices: string[]) => void
-  var setFileSizeReact: (fileSize: number) => void
-  var setProgressReact: (progress: number | string | null) => void
+  var setDialogReact: (dialog: string) => void
+  var setProgressReact: (progress: Progress | string | null) => void
+  interface Progress {
+    bytes: number
+    total: number
+    speed: string
+  }
 } /* eslint-enable no-var */
 
 const theme = extendTheme({
diff --git a/renderer/screens/MainScreen.module.scss b/renderer/screens/MainScreen.module.scss
new file mode 100644
index 0000000..17ae13d
--- /dev/null
+++ b/renderer/screens/MainScreen.module.scss
@@ -0,0 +1,19 @@
+.select-container {
+  display: flex;
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
+
+  > :last-child {
+    margin-left: 0.4em;
+  }
+}
+
+.flash-progress-container {
+  display: flex;
+  align-items: center;
+  padding-top: 0.4em;
+}
+
+.full-width {
+  width: 100%;
+}
diff --git a/renderer/screens/MainScreen.tsx b/renderer/screens/MainScreen.tsx
new file mode 100644
index 0000000..3df71c4
--- /dev/null
+++ b/renderer/screens/MainScreen.tsx
@@ -0,0 +1,105 @@
+import {
+  Button,
+  DialogContent,
+  DialogTitle,
+  Modal,
+  ModalClose,
+  ModalDialog,
+  Option,
+  Select,
+  Textarea,
+  Typography,
+} from '@mui/joy'
+import * as styles from './MainScreen.module.scss'
+import { useState } from 'react'
+
+const MainScreen = ({
+  file,
+  setFile,
+  device,
+  setDevice,
+  devices,
+  setDialog,
+}: {
+  file: string
+  setFile: React.Dispatch<React.SetStateAction<string>>
+  device: string | null
+  setDevice: React.Dispatch<React.SetStateAction<string | null>>
+  devices: string[]
+  setDialog: React.Dispatch<React.SetStateAction<string>>
+}): JSX.Element => {
+  const [confirm, setConfirm] = useState(false)
+  const onFileInputChange: React.ChangeEventHandler<HTMLTextAreaElement> = event =>
+    setFile(event.target.value.replace(/\n/g, ''))
+  const onFlashClick = (): void => {
+    if (device === null) return setDialog('Error: Select a device to flash the image to!')
+    if (file === '') return setDialog('Error: Select a disk image to flash to device!')
+    setConfirm(true)
+  }
+  const onFlashConfirm = (): void => {
+    if (device === null || file === '') return
+    setConfirm(false)
+    globalThis.flash(file, device.split(' ')[1], +device.split(' ')[0])
+  }
+
+  return (
+    <>
+      <Modal open={confirm} onClose={() => setConfirm(false)}>
+        <ModalDialog>
+          <ModalClose variant='soft' />
+          <DialogTitle>Do you want to continue?</DialogTitle>
+          <DialogContent>
+            This operation will WIPE ALL DATA from: {device?.substr(device.indexOf(' ') + 1)}.
+          </DialogContent>
+          <Button color='danger' onClick={onFlashConfirm}>
+            Proceed
+          </Button>
+        </ModalDialog>
+      </Modal>
+      <Typography>Step 1: Select the disk image (.iso, .img, etc) to flash.</Typography>
+      <div className={styles['select-container']}>
+        <Button variant='soft' onClick={() => globalThis.promptForFile()}>
+          Select File
+        </Button>
+        <Textarea
+          minRows={2}
+          maxRows={2}
+          required
+          placeholder='Path to disk image'
+          className={styles['full-width']}
+          value={file}
+          onChange={onFileInputChange}
+        />
+      </div>
+      <br />
+      <Typography>Step 2: Select the device to flash to.</Typography>
+      <div className={styles['select-container']}>
+        <Select
+          className={styles['full-width']}
+          placeholder='Select a device'
+          value={device}
+          required
+          onChange={(_, value) => setDevice(value)}
+        >
+          {devices.map(device => (
+            <Option key={device} value={device}>
+              {device.substr(device.indexOf(' ') + 1)}
+            </Option>
+          ))}
+        </Select>
+        <Button onClick={() => globalThis.refreshDevices()} variant='soft'>
+          Refresh
+        </Button>
+      </div>
+
+      <br />
+      <div className={styles['flash-progress-container']}>
+        {/* FIXME: Add Settings dialog to disable validation and toggle dark mode. */}
+        <div className={styles['full-width']} />
+        <Button onClick={onFlashClick}>Flash</Button>
+      </div>
+    </>
+  )
+}
+
+export default MainScreen
diff --git a/renderer/screens/ProgressScreen.module.scss b/renderer/screens/ProgressScreen.module.scss
new file mode 100644
index 0000000..b09b4bf
--- /dev/null
+++ b/renderer/screens/ProgressScreen.module.scss
@@ -0,0 +1,7 @@
+.full-width {
+  flex: 1;
+}
+
+.action-container {
+  display: flex;
+}
diff --git a/renderer/screens/ProgressScreen.tsx b/renderer/screens/ProgressScreen.tsx
new file mode 100644
index 0000000..426b424
--- /dev/null
+++ b/renderer/screens/ProgressScreen.tsx
@@ -0,0 +1,79 @@
+import { Button, LinearProgress, Typography } from '@mui/joy'
+import JSBI from 'jsbi'
+import * as styles from './ProgressScreen.module.scss'
+
+const ProgressScreen = ({
+  progress,
+  setProgress,
+  device,
+  file,
+}: {
+  progress: Progress | string
+  setProgress: React.Dispatch<React.SetStateAction<Progress | string | null>>
+  device: string
+  file: string
+}): JSX.Element => {
+  const isDone = progress === 'Done!'
+  const isError = typeof progress === 'string' && !isDone
+  const progressPercent =
+    !isError && !isDone
+      ? JSBI.divide(
+          JSBI.multiply(JSBI.BigInt(progress.bytes), JSBI.BigInt(100)),
+          JSBI.BigInt(progress.total),
+        )
+      : JSBI.BigInt(0)
+
+  const sourceImage = file.replace('\\', '/').split('/').pop()
+  const targetDisk = device.substr(device.indexOf(' ') + 1)
+  const onDismiss = (): void => {
+    if (isError || isDone) setProgress(null)
+    // Urgent FIXME: Cancel flash
+  }
+
+  return (
+    <>
+      <Typography gutterBottom level='h3' color={isError ? 'danger' : undefined}>
+        {isDone && 'Completed flashing ISO to disk!'}
+        {isError && 'Error during '}
+        {!isDone && 'Phase 1/1: Writing ISO to disk...'}
+      </Typography>
+      <LinearProgress
+        sx={{ mb: '0.8em' }}
+        color={isError ? 'danger' : undefined}
+        determinate={!isError}
+        value={isError ? undefined : isDone ? 100 : JSBI.toNumber(progressPercent)}
+      />
+      {!isDone && (
+        <Typography level='title-lg' gutterBottom color={isError ? 'danger' : undefined}>
+          {isError || isDone
+            ? progress // Urgent FIXME byte conversion...
+            : `${progressPercent.toString()}% (${progress.bytes} bytes / ${progress.total} bytes) — ${progress.speed}`}
+        </Typography>
+      )}
+      <Typography gutterBottom>
+        <strong>Source Image: </strong> {sourceImage}
+        <br />
+        <strong>Target Disk: </strong> {targetDisk}
+      </Typography>
+      {!isError && !isDone && (
+        <Typography gutterBottom color='warning'>
+          <strong>Note:</strong> Do not remove the external drive or shut down the computer during
+          the write process.
+        </Typography>
+      )}
+      {isDone && (
+        <Typography gutterBottom>
+          <strong>Note:</strong> You may now remove the external drive safely.
+        </Typography>
+      )}
+      <div className={styles['action-container']}>
+        <div className={styles['full-width']} />
+        <Button onClick={onDismiss} color={isDone ? 'primary' : 'danger'} variant='soft'>
+          {isError || isDone ? 'Dismiss' : 'Cancel Flash'}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default ProgressScreen