diff --git a/ajax/controller.php b/ajax/controller.php
index 4bc7c33c..e8230bfe 100644
--- a/ajax/controller.php
+++ b/ajax/controller.php
@@ -31,7 +31,7 @@ class Controller {
 	public static function startSession($args){
 		$uid = self::preDispatch();
 		try{
-			$path = @$_POST['path'];
+			$path = \OC\Files\Filesystem::getPath(@$_POST['fileid']);
 			if (!$path){
 				throw new \Exception('No file has been passed');
 			}
diff --git a/ajax/thumbnail.php b/ajax/thumbnail.php
deleted file mode 100644
index 16c196d4..00000000
--- a/ajax/thumbnail.php
+++ /dev/null
@@ -1,70 +0,0 @@
-<?php
-
-/**
- * ownCloud - office application
- *
- * @author Frank Karlitschek
- * @copyright 2012 Frank Karlitschek frank@owncloud.org
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-namespace OCA\Office;
-
-\OCP\JSON::checkLoggedIn();
-\OCP\JSON::checkAppEnabled('office');
-session_write_close();
-
-// TODO: short-circuit or fix the http 500 that happens on ajax/thumbnail.php
-// or just wait unit preview is merged to core ;)
-
-$file = $_GET['filepath'];
-if (method_exists('\OCP\Preview', 'show')){
-	\OCP\Preview::show($file, 256, 256);
-} else {
-	$mimetype = \OCP\Files::getMimeType($file);
-
-	// Replace slash and backslash with a minus
-	$icon = \str_replace(array('/', '\\') , '-', $mimetype);
-
-	$iconFile = '';
-	
-	// Is it a dir?
-	if ($mimetype === 'dir'){
-		$iconFile = \OC::$SERVERROOT . '/core/img/filetypes/folder.png';
-	}
-
-	// Icon exists?
-	if (!$iconFile && file_exists(\OC::$SERVERROOT . '/core/img/filetypes/' . $icon . '.png')){
-		$iconFile =  \OC::$SERVERROOT . '/core/img/filetypes/' . $icon . '.png';
-	}
-
-	// Try only the first part of the filetype
-	$mimePart = substr($icon, 0, strpos($icon, '-'));
-	if (!$iconFile && file_exists(\OC::$SERVERROOT . '/core/img/filetypes/' . $mimePart . '.png')){
-		$iconFile = \OC::$SERVERROOT . '/core/img/filetypes/' . $mimePart . '.png';
-	} 
-	
-	if (!$iconFile){
-		$iconFile = \OC::$SERVERROOT . '/core/img/filetypes/file.png';
-	}
-	
-	\OC_Util::obEnd();
-	
-	//$iconFile = ;
-	header('Content-Type: ' . \OCP\Files::getMimeType($iconFile));
-	readfile($iconFile);
-}
-
diff --git a/css/style.css b/css/style.css
index a099079e..925b8d96 100755
--- a/css/style.css
+++ b/css/style.css
@@ -4,12 +4,24 @@
 .documentslist li{
 	margin:4px;
 }
-.documentslist li img {
-	width:32px;
+.documentslist .session-active {
+	float: left;
+	margin-left: 16px;
+	margin-top: 16px;
+	width: 20px;
+}
+.documentslist .document-info {
+	display: inline;
 	height:32px;
 }
-.documentslist li .document-info {
-	display: inline;
+.documentslist .document-info a {
+	display: block;
+	background-repeat: no-repeat;
+	background-size: 32px;
+	height: 32px;
+	padding-left: 36px;
+	vertical-align: middle;
+	line-height: 32px;
 }
 
 #office-content{
diff --git a/index.php b/index.php
index d7938db6..471fcfe4 100755
--- a/index.php
+++ b/index.php
@@ -33,14 +33,6 @@ namespace OCA\Office;
 \OCP\Util::addStyle( 'office', 'editor' );
 \OCP\Util::addScript('office', 'office');
 
-$list=Storage::getDocuments();
-
 $tmpl = new \OCP\Template('office', 'documents', 'user');
-$sessions = Session::getAll();
-if (!is_array($sessions)){
-	$sessions = array();
-}
 
-$tmpl->assign('sessions', $sessions);
-$tmpl->assign('list', $list);
 $tmpl->printPage();
diff --git a/js/office.js b/js/office.js
index d8c24c92..036d802c 100644
--- a/js/office.js
+++ b/js/office.js
@@ -90,8 +90,9 @@ var officeMain = {
 		});
 	},
 	
-	startSession: function(filepath) {
+	startSession: function(fileid) {
 		"use strict";
+		console.log('starting session for fileid '+fileid);
 		if (officeMain.initialized === undefined) {
 			alert("WebODF Editor not yet initialized...");
 			return;
@@ -99,12 +100,13 @@ var officeMain = {
 
 		$.post(
 			OC.Router.generate('office_session_start'),
-			{'path': filepath},
+			{'fileid': fileid},
 			officeMain.initSession
 		);
 	},
 	
 	joinSession: function(esId) {
+		console.log('joining session '+esId);
 		$.post(
 			OC.Router.generate('office_session_join') + '/' + esId,
 			{},
@@ -164,15 +166,104 @@ var officeMain = {
 	}
 };
 
+
+/**
+ * TODO copy from files, move from files to core? load files.js?
+ * @param {type} mime
+ * @returns {getMimeIcon}
+ */
+function getMimeIcon(mime){
+	var def = new $.Deferred();
+	if(getMimeIcon.cache[mime]){
+		def.resolve(getMimeIcon.cache[mime]);
+	}else{
+		jQuery.getJSON( OC.filePath('office','ajax','mimeicon.php'), {mime: mime})
+		.done(function(data){
+			getMimeIcon.cache[mime]=data.path;
+			def.resolve(getMimeIcon.cache[mime]);
+		})
+		.error(function(jqXHR, textStatus, errorThrown){
+			console.log(textStatus + ': ' + errorThrown);
+			console.log(jqXHR);
+		});
+	}
+	return def;
+}
+getMimeIcon.cache={};
+
+// fill the albums from Gallery.images
+var officeDocuments = {
+	_documents: [],
+	_sessions: []
+};
+officeDocuments.loadDocuments = function () {
+	var self = this;
+	var def = new $.Deferred();
+	jQuery.getJSON(OC.filePath('office', 'ajax', 'documents.php'))
+		.done(function (data) {
+			self._documents = data.documents;
+			def.resolve();
+		})
+		.fail(function(data){
+			console.log(t('office','Failed to load documents.'));
+		});
+	return def;
+};
+officeDocuments.loadSessions = function () {
+	var self = this;
+	var def = new $.Deferred();
+	jQuery.getJSON(OC.filePath('office', 'ajax', 'sessions.php'))
+		.done(function (data) {
+			self._sessions = data.sessions;
+			def.resolve();
+		})
+		.fail(function(data){
+			console.log(t('office','Failed to load sessions.'));
+		});
+	return def;
+};
+officeDocuments.renderDocuments = function () {
+	
+	//remove all but template
+	$('.documentslist .document:not(.template)').remove();
+	
+	jQuery.each(this._documents, function(i,document){
+		var docElem = $('.documentslist .template').clone();
+		docElem.removeClass('template');
+		docElem.addClass('document');
+		docElem.attr('data-id', document.fileid);
+		
+		var a = docElem.find('a');
+		a.text(document.name);
+		a.attr('href', OC.Router.generate('download',{file:document.path}));
+		
+		getMimeIcon(document.mimetype).then(function(path){
+			a.css('background-image', 'url("'+path+'")');
+		});
+		$('.documentslist').append(docElem);
+		docElem.show();
+	});
+	jQuery.each(this._sessions, function(i,session){
+		var docElem = $('.documentslist .document[data-id="'+session.file_id+'"]');
+		if (docElem.length > 0) {
+			docElem.attr('data-esid', session.es_id);
+			docElem.find('a').before('<img class="svg session-active" src="'+OC.imagePath('core','places/contacts-dark')+'">');
+			docElem.addClass('session');
+		} else {
+			console.log('Could not find file '+session.file_id+' for session '+session.es_id);
+		}
+	});
+};
+
 $(document).ready(function() {
 	"use strict";
 	
-	$('.documentslist li').click(function(event) {
+	$('.documentslist').on('click', 'li', function(event) {
 		event.preventDefault();
 		if ($(this).attr('data-esid')){
 			officeMain.joinSession($(this).attr('data-esid'));
-		} else if ($(this).attr('data-file')){
-			officeMain.startSession($(this).attr('data-file'));
+		} else if ($(this).attr('data-id')){
+			officeMain.startSession($(this).attr('data-id'));
 		}
 	});
 	
@@ -214,5 +305,15 @@ $(document).ready(function() {
 		}
 	});
 
+	//TODO load list of files
+	jQuery.when(officeDocuments.loadDocuments(), officeDocuments.loadSessions())
+			.then(function(){
+				officeDocuments.renderDocuments();
+			});
+			//TODO show no docs please upload
+	//TODO load list of sessions, and add 'active' as icon overlay
+	//TODO when clicking on a document without a session initialize it
+	//TODO when ending a session as the last user close session?
+
 	OC.addScript('office', 'dojo-amalgamation', officeMain.onStartup);
-});
+});
\ No newline at end of file
diff --git a/templates/documents.php b/templates/documents.php
index f64a3b15..a2221539 100755
--- a/templates/documents.php
+++ b/templates/documents.php
@@ -6,32 +6,16 @@
 	</div>
 </div>
 <div id="office-content">
-<?php if(empty($_['list']) && empty($_['sessions'])) { ?>
-	<div id="emptyfolder"><?php p('No documents are found. Please upload a document!');?></div>	
-<?php } else { ?>
 	<div id="editor-content">
 	<ul class="documentslist">
-		<li>
+		<li class="add-document">
 			<img class="svg" src="<?php p(\OCP\Util::imagePath('core','actions/add.svg')) ?>" />
 		</li>
-	<?php foreach ($_['sessions'] as $session){ ?>
-		<?php $info = \OCA\Office\Session::getInfo($session['es_id']); ?>
-		<li data-esid="<?php p($session['es_id']); ?>">
-			Session: <?php p($session['file_id']); ?>
-			<?php p($l->t('Users:') . ' ' . $info['users']) ?>
-		</li>
-	<?php } ?>
-	<?php foreach($_['list'] as $entry) { ?>
-		<li data-file="<?php p($entry['path']) ?>">
-			<img src="<?php p(\OCP\Util::linkToAbsolute('office','ajax/thumbnail.php').'?filepath='.\OCP\Util::encodePath($entry['path'])) ?>" />
+		<li class="document template" data-file="" style="display:none;">
 			<div class="document-info">
-				<a target="_blank" href="<?php p(\OCP\Util::linkToRoute('download', array('file' => $entry['path']))) ?>"><?php p($entry['name'])?></a>
-			<?php p(\OCP\Util::formatDate(intval($entry['mtime']))); ?>
-			<?php p(\OCP\Util::humanFileSize($entry['size'])); ?>
+				<a target="_blank" href=""></a>
 			</div>
 		</li>
-	<?php } ?>
 	</ul>
 	</div>
-<?php } ?>
 </div>