diff --git a/src/ui/src/assets/css/_noFile.scss b/src/ui/src/assets/css/_noFile.scss
new file mode 100644
index 0000000..445720e
--- /dev/null
+++ b/src/ui/src/assets/css/_noFile.scss
@@ -0,0 +1,26 @@
+.no-file {
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.inner {
+		width: 60%;
+		height: auto;
+		opacity: 0.4;
+		background: color(sidebarBackground);
+		border-radius: 1rem;
+		border: dashed 6px color(scrollbar);
+		padding: 2rem 4rem;
+		text-align: center;
+		max-width: 500px;
+		max-height: 300px;
+
+		svg {
+			&.big {
+				font-size: 4rem;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/ui/src/assets/css/ation.scss b/src/ui/src/assets/css/ation.scss
index 48ee027..d7ac640 100644
--- a/src/ui/src/assets/css/ation.scss
+++ b/src/ui/src/assets/css/ation.scss
@@ -2,8 +2,11 @@
 @import "variables";
 @import "mixins";
 @import "scrollbars";
+@import "forms";
+@import "toolbar";
 
 @import "window";
+@import "noFile";
 @import "slidesList";
 @import "slide";
 @import "blackout";
@@ -20,4 +23,6 @@ body {
 	margin: 0;
 	padding: 0;
 	background: color(background);
+	color: color(foreground);
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
\ No newline at end of file
diff --git a/src/ui/src/components/Ation.js b/src/ui/src/components/Ation.js
index b4dae99..d3e7b36 100644
--- a/src/ui/src/components/Ation.js
+++ b/src/ui/src/components/Ation.js
@@ -5,6 +5,8 @@ import Mode            from "../models/Mode";
 import Slide           from "./Slide";
 import KeyboardControl from "./KeyboardControl";
 import Blackout        from "./Blackout";
+import NoFile          from "./NoFile";
+import Toolbar         from "./Toolbar";
 
 import SlideContext from "../shared/SlideContext";
 
@@ -21,13 +23,16 @@ const Ation = () => {
 		setDeck(slideDeck);
 	}
 
+	if (deck.length < 1)
+		return <NoFile openFile={openFile} />;
+
 	return (
-		<SlideContext.Provider value={{slide, setSlide, mode}}>
+		<SlideContext.Provider value={{slide, setSlide, mode, setMode}}>
 			<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
+				<Toolbar openFile={openFile} />
 				<SlidesList deck={deck} />
 				<main className="main">
 					<Slide data={deck[slide] || null} />
-					<button onClick={openFile}>open</button>	
 				</main>
 			</section>
 			<Blackout show={mode === Mode.BLACKOUT} />
diff --git a/src/ui/src/components/NoFile.js b/src/ui/src/components/NoFile.js
new file mode 100644
index 0000000..ca8ba86
--- /dev/null
+++ b/src/ui/src/components/NoFile.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+import {Easel, Folder2Open} from "react-bootstrap-icons";
+
+const NoFile = ({openFile}) => {
+	return (
+		<section className="no-file">
+			<section className="inner">
+				<p>
+					<Easel className="big" />
+				</p>
+				<i>No presentation loaded</i><br />
+				<p>
+					<button onClick={openFile}><Folder2Open /> open</button>
+				</p>
+			</section>
+		</section>
+	);
+};
+
+export default NoFile;
\ No newline at end of file
diff --git a/src/ui/src/shared/SlideContext.js b/src/ui/src/shared/SlideContext.js
index 05a0529..6584d40 100644
--- a/src/ui/src/shared/SlideContext.js
+++ b/src/ui/src/shared/SlideContext.js
@@ -5,6 +5,7 @@ import Mode from "../models/Mode";
 const SlideContext = createContext({
 	slide    : 0,
 	mode     : Mode.NORMAL,
+	setMode  : () => {},
 	setSlide : () => {}
 });