diff --git a/app/file_handler.ts b/app/file_handler.ts
new file mode 100644
index 0000000..b96b8dd
--- /dev/null
+++ b/app/file_handler.ts
@@ -0,0 +1,22 @@
+export class FileHandler {
+	public static ProcessImages(fileList: FileList): string[] {
+		const filenames: string[] = [];
+
+		// files is a FileList of File objects. List some properties.
+		for (let i = 0; i < fileList.length; i++) {
+			const f = fileList[i];
+			const reader = new FileReader();
+
+			reader.onload = ((theFile) => {
+				return (e: any) => {
+					filenames.push(e.target.result);
+				};
+			})(f);
+
+			// Read in the image file as a data URL.
+			reader.readAsDataURL(f);
+		}
+
+		return filenames;
+	}
+}
diff --git a/app/frame_handler.ts b/app/frame_handler.ts
new file mode 100644
index 0000000..dc663d2
--- /dev/null
+++ b/app/frame_handler.ts
@@ -0,0 +1,29 @@
+export class FrameHandler {
+	private filenames: string[] = [];
+	private currentFrame: number = 0;
+	private currentImageDiv: HTMLElement;
+
+	constructor(currentImageDiv: HTMLElement) {
+		this.currentImageDiv = currentImageDiv;
+	}
+
+	public loadFrames(filenames: string[]) {
+		this.filenames = filenames;
+		this.currentFrame = 0;
+	}
+
+	public AdvanceFrames(amount: number) {
+		this.currentFrame += amount;
+		this.currentFrame %= this.filenames.length;
+		if (this.currentFrame < 0) {
+			this.currentFrame = this.filenames.length - 1;
+		}
+		this.GoToFrame(this.currentFrame);
+	}
+
+	public GoToFrame(frame: number) {
+		this.currentFrame = frame;
+		this.currentImageDiv.innerHTML = `<img src="${this.filenames[this.currentFrame]}"></img>`;
+		console.log('current frame = ', this.currentFrame);
+	}
+}
diff --git a/app/page.ts b/app/page.ts
index 7cc9ef8..361bddd 100644
--- a/app/page.ts
+++ b/app/page.ts
@@ -1,10 +1,54 @@
-export class Page {
-	public Load() {
-		const thing = document.getElementById('thing') as HTMLElement;
-		thing.innerHTML = '<p>mememememe</p>';
+import { FileHandler } from './file_handler';
+import { FrameHandler } from './frame_handler';
 
-		thing.onclick = (e) => {
-			thing.innerHTML = '<p>blahblahblah</p>';
-		};
+export class Page {
+	private static handleDragOver(evt: DragEvent) {
+		if (evt !== null) {
+			evt.stopPropagation();
+			evt.preventDefault();
+			evt.dataTransfer!.dropEffect = 'copy'; // Explicitly show this is a copy.
+		}
 	}
+
+	private filenames: string[] = [];
+
+	public Load() {
+		// const fileHandler = new FileHandler('dropZone', 'output', this.filenames);
+		const frameHandler = new FrameHandler(document.getElementById('currentImage') as HTMLElement);
+
+		const dropZone = document.getElementById('dropZone') as HTMLElement;
+		const output = document.getElementById('output') as HTMLElement;
+
+		dropZone.addEventListener('dragover', Page.handleDragOver, false);
+		dropZone.addEventListener('drop', this.handleFileSelect, false);
+
+		const keyDown = (event: KeyboardEvent) => {
+			switch (event.keyCode) {
+				case 39: {
+					// right_arrow
+					console.log('next frame action');
+					frameHandler.AdvanceFrames(1);
+					break;
+				}
+
+				case 37: {
+					// left arrow
+					console.log('previous frame action');
+					frameHandler.AdvanceFrames(-1);
+					break;
+				}
+			}
+		};
+
+		document.addEventListener('keydown', keyDown);
+	}
+
+	private handleFileSelect = (event: any) => {
+		event.stopPropagation();
+		event.preventDefault();
+
+		FileHandler.ProcessImages(event.target.result);
+
+		console.log('files: ' + this.filenames.length);
+	};
 }
diff --git a/dist/assets/stylesheets/main.css b/dist/assets/stylesheets/main.css
index 8bada34..38ca12a 100644
--- a/dist/assets/stylesheets/main.css
+++ b/dist/assets/stylesheets/main.css
@@ -1,11 +1,19 @@
-.main {
+div {
 	display: block;
-	width: 50px;
 	color: blue;
+	font-family: "Arial", Helvetica, sans-serif;
 }
 
-.sub {
-	display: block;
-	width: 100px;
-	color: red;
+main {
+	width: 500px;
+}
+
+#dropZone {
+	width: 100%;
+	height: 100%;
+}
+
+#currentImage {
+	width: 400px;
+	height: 400px;
 }
diff --git a/dist/index.html b/dist/index.html
index d3c1c2c..a505daf 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,14 +7,21 @@
     <link rel="stylesheet" href="assets/stylesheets/main.css">
   </head>
 	<body>
-        <div class="main">
-            <p>Hello hello hello hello hello</p>
+
+        <div id="dropZone">
+          <div id="output"></div>
+
+          <div id="thing" class="sub">
+              <p>Hi hihihihihihi</p>
+          </div>
         </div>
 
-        <div id="thing" class="sub">
-            <p>Hi hihihihihihi</p>
+        <!-- canvas -->
+        <div id="currentImage">
+          <img alt="Current Image">
         </div>
 
+
         <script src="bundle.js"></script>
 	</body>
 </html>