diff --git a/src/renderer/fileRenderers/list.njk b/src/renderer/fileRenderers/list.njk
index 32abef5..cc97c5e 100644
--- a/src/renderer/fileRenderers/list.njk
+++ b/src/renderer/fileRenderers/list.njk
@@ -11,8 +11,14 @@
 	</thead>
 	<tbody>
 	{% for file in files %}
-		<tr data-file="{{ file.path }}">
-			<td>{{ file.name }}</td>
+
+		<tr class="type-{{file.type}}" data-file="{{ file.path }}">
+			{% set thumb = file.getThumbnail() %}
+			{% if thumb != undefined %}
+				<td style="background-image: url({{ thumb }})">{{ file.name }}</td>
+			{% else %}
+				<td >{{ file.name }}</td>
+			{% endif %}
 			<td>{{ file.formatTime() }}</td>
 			<td>{{ file.formatSize() }}</td>
 		</tr>
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index 7a00123..86fc810 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -1,6 +1,9 @@
 // import { render as nunjuckRender} from 'nunjucks';
 import fs from 'fs';
 import { sep } from 'path';
+import {
+	shell
+} from 'electron';
 import DeltaFile from '../common/DeltaFile';
 import './style.scss';
 import { Template } from 'nunjucks';
@@ -36,17 +39,17 @@ const showFolder = (folder: string) => {
 	app.innerHTML = tpl.render({files: els});
 	app.querySelectorAll("[data-file]").forEach((el) => {
 		el.addEventListener("click", function(this: HTMLElement) {
-			// console.log(this);
 			let folder = this.getAttribute("data-file");
-			if(folder != null) showFolder(folder);
+			if(folder != null) {
+				let file = DeltaFile.loadFileFromPath(folder);
+				if(file != undefined) {
+					if(file.type == 0) showFolder(folder);
+					else shell.openItem(file.path);
+				}
+
+			}
 		});
 	});
 }
 
 showFolder("/");
-
-// function loadFile(file: string) {
-// 	shell.openItem(file);
-// }
-// console.log(render("index.njk"));
-// console.log(loadFolder("/"));
diff --git a/src/renderer/style.scss b/src/renderer/style.scss
index ae5defc..7fa1cd6 100644
--- a/src/renderer/style.scss
+++ b/src/renderer/style.scss
@@ -108,3 +108,64 @@ html, body {
 * {
 	user-select: none;
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * List
+ */
+
+main {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+	cursor: pointer;
+}
+
+table th {
+	text-align: left;
+}
+
+table tr {
+	border-bottom: 1px solid #aaa;
+	height: 50px;
+}
+
+table tr td {
+	border-left: 1px solid #eee;
+}
+
+table tr td:first-child {
+	padding-left: 60px;
+	background-repeat: no-repeat;
+	border-left: none;
+	background-size: 30px;
+	background-position-y: center;
+	background-position-x: 14px;
+}
+
+table tr.type-0 td:first-child {
+	background-image: url(../../static/icons/folder.svg);
+}
+
+table tr.type-1 td:first-child {
+	background-image: url(../../static/icons/file.svg)
+}