diff --git a/pandora/document/models.py b/pandora/document/models.py
index 36bb4b51..5439858e 100644
--- a/pandora/document/models.py
+++ b/pandora/document/models.py
@@ -72,26 +72,13 @@ class Document(models.Model):
 
     @classmethod
     def get(cls, id):
-        username, name, extension = cls.parse_id(id)
-        return cls.objects.get(user__username=username, name=name, extension=extension)
-
-    @classmethod
-    def parse_id(cls, id):
-        public_id = id.replace('_', ' ').replace('\t', '_').split(':')
-        username = public_id[0]
-        name = ":".join(public_id[1:])
-        extension = name.split('.')
-        name = '.'.join(extension[:-1])
-        extension = extension[-1].lower()
-        return username, name, extension
+        return cls.objects.get(pk=ox.fromAZ(id))
 
     def get_absolute_url(self):
         return ('/documents/%s' % quote(self.get_id())).replace('%3A', ':')
 
     def get_id(self):
-        id = u'%s:%s.%s' % (self.user.username, self.name, self.extension)
-        id = id.replace('_', '%09').replace(' ', '_')
-        return id
+        return ox.toAZ(self.id)
 
     def editable(self, user):
         if not user or user.is_anonymous():
@@ -180,7 +167,11 @@ class Document(models.Model):
         return False
 
     def thumbnail(self):
-        return '%s.jpg' % self.file.path
+        if self.extension == 'pdf':
+            thumbnail = '%s.jpg' % self.file.path
+        else:
+            thumbnail = self.file.path
+        return thumbnail
 
     def make_thumbnail(self, force=False):
         thumb = self.thumbnail()
diff --git a/pandora/document/views.py b/pandora/document/views.py
index 96fc19db..e4a89184 100644
--- a/pandora/document/views.py
+++ b/pandora/document/views.py
@@ -14,8 +14,7 @@ from item.models import Item
 import models
 
 def get_document_or_404_json(id):
-    username, name, extension = models.Document.parse_id(id)
-    return get_object_or_404_json(models.Document, user__username=username, name=name, extension=extension)
+    return models.Document.get(id)
 
 @login_required_json
 def addDocument(request):
@@ -221,11 +220,12 @@ def sortDocuments(request):
     return render_to_json_response(response)
 actions.register(sortDocuments, cache=False)
 
-def file(request, id):
+def file(request, id, name=None):
     document = models.Document.get(id)
     return HttpFileResponse(document.file.path)
 
-def thumbnail(request, id):
+def thumbnail(request, id, size=256):
+    size = int(size)
     document = models.Document.get(id)
     return HttpFileResponse(document.thumbnail())
 
diff --git a/pandora/urls.py b/pandora/urls.py
index 55dd91cf..f9762859 100644
--- a/pandora/urls.py
+++ b/pandora/urls.py
@@ -30,8 +30,8 @@ urlpatterns = patterns('',
     (r'^file/(?P<oshash>.*)$', 'archive.views.lookup_file'),
     (r'^api/?$', include(ox.django.api.urls)),
     (r'^resetUI$', 'user.views.reset_ui'),
-    (r'^documents/(?P<id>.*?.pdf).jpg$', 'document.views.thumbnail'),
-    (r'^documents/(?P<id>.*?.)$', 'document.views.file'),
+    (r'^documents/(?P<id>[A-Z0-9].+)/(?P<size>\d*)p.jpg$', 'document.views.thumbnail'),
+    (r'^documents/(?P<id>[A-Z0-9].+)/(?P<name>.*?\..+)$', 'document.views.file'),
     (r'^edit/(?P<id>.*?)/icon(?P<size>\d*).jpg$', 'edit.views.icon'),
     (r'^list/(?P<id>.*?)/icon(?P<size>\d*).jpg$', 'itemlist.views.icon'),
     (r'^text/(?P<id>.*?)/icon(?P<size>\d*).jpg$', 'text.views.icon'),
diff --git a/static/js/documentsDialog.js b/static/js/documentsDialog.js
index f83d639f..1bee1484 100644
--- a/static/js/documentsDialog.js
+++ b/static/js/documentsDialog.js
@@ -442,9 +442,8 @@ pandora.ui.documentsDialog = function(options) {
     }
 
     function renderPreview() {
-        var isImage = Ox.contains(['jpg', 'png'], selected.split('.').pop()),
-            size = getPreviewSize(),
-            src = '/documents/' + selected + (isImage ? '' : '.jpg');
+        var size = getPreviewSize(),
+            src = '/documents/' + selected + '/256p.jpg';
         return Ox.ImageElement({
                 height: size.height,
                 src: src,
@@ -453,6 +452,13 @@ pandora.ui.documentsDialog = function(options) {
             .css({
                 margin: size.margin,
                 borderRadius: '8px'
+            })
+            .on({
+                click: function() {
+                    var info = $list.value(selected),
+                        url = '/documents/' + selected + '/' + info.name + '.' + info.extension;
+                    window.open('/url=' + encodeURIComponent(url), '_blank');
+                }
             });
     }
 
diff --git a/static/js/documentsView.js b/static/js/documentsView.js
index 3eba5d04..66118cd5 100644
--- a/static/js/documentsView.js
+++ b/static/js/documentsView.js
@@ -19,6 +19,29 @@ pandora.ui.documentsView = function(options, self) {
 
     self.$preview = Ox.Element();
 
+    self.$menu = Ox.MenuButton({
+            items: [
+                {
+                    id: 'add',
+                    title: Ox._('Add Documents...')
+                },
+            ],
+            title: 'set',
+            type: 'image'
+        })
+        .css({
+            float: 'left',
+            margin: '4px'
+        })
+        .bindEvent({
+            click: function(data) {
+                if (data.id == 'add') {
+                    addDocuments();
+                } else if (data.id == 'fixme') {
+                }
+            }
+        })
+        .appendTo(self.$toolbar);
 
     self.$documentsList = Ox.TableList({
             columns: [
@@ -75,6 +98,7 @@ pandora.ui.documentsView = function(options, self) {
             columnsResizable: true,
             columnsVisible: true,
             items: options.documents,
+            keys: ['ratio'],
             scrollbarVisible: true,
             sort: [{key: 'index', operator: '+'}],
             sortable: true,
@@ -82,22 +106,7 @@ pandora.ui.documentsView = function(options, self) {
         })
         .bindEvent({
             add: function(data) {
-                pandora.$ui.documentsDialog = pandora.ui.documentsDialog({
-                    callback: function(ids) {
-                        if (ids) {
-                            pandora.api.addDocument({
-                                item: pandora.user.ui.item,
-                                ids: ids
-                            }, function() {
-                                Ox.Request.clearCache();
-                                //fixme just upload list here
-                                //self.$documentsList.reloadList();
-                                pandora.$ui.contentPanel.replaceElement(1,
-                                    pandora.$ui.item = pandora.ui.item());
-                            });
-                        }
-                    }
-                }).open();
+                addDocuments();
             },
             'delete': function(data) {
                 if (data.ids.length > 0 && options.editable) {
@@ -138,22 +147,73 @@ pandora.ui.documentsView = function(options, self) {
             }
         });
 
+    function addDocuments() {
+        pandora.$ui.documentsDialog = pandora.ui.documentsDialog({
+            callback: function(ids) {
+                if (ids) {
+                    pandora.api.addDocument({
+                        item: pandora.user.ui.item,
+                        ids: ids
+                    }, function() {
+                        Ox.Request.clearCache();
+                        //fixme just upload list here
+                        //self.$documentsList.reloadList();
+                        pandora.$ui.contentPanel.replaceElement(1,
+                            pandora.$ui.item = pandora.ui.item());
+                    });
+                }
+            }
+        }).open();
+    }
+
     function renderPreview() {
-        var isImage = Ox.contains(['jpg', 'png'],
-                self.selected ? self.selected.split('.').pop() : ''),
-            size = {width: 256, height: 256},
-            src = '/documents/' + self.selected + (isImage ? '' : '.jpg');
+        var size = getPreviewSize(),
+            src = '/documents/' + self.selected + '/256p.jpg';
         self.$preview.empty();
         self.selected && self.$preview
-            .append(Ox.ImageElement({
-                height: size.height,
-                src: src,
-                width: size.width
-            }))
+            .append(
+                Ox.ImageElement({
+                    height: size.height,
+                    src: src,
+                    width: size.width
+                })
+                .css({
+                    margin: size.margin,
+                    borderRadius: '8px'
+                })
+                .on({
+                    click: function() {
+                        var info = self.$documentsList.value(self.selected),
+                            url = '/documents/' + self.selected + '/' + info.name + '.' + info.extension;
+                        window.open('/url=' + encodeURIComponent(url), '_blank');
+                    }
+                })
+            )
             .append(Ox.Element()
+                .css({
+                    margin: size.margin,
+                    paddingTop: '8px'
+                })
                 .html(self.$documentsList.value(self.selected, 'description')
             ));
     }
+
+    function getPreviewSize() {
+        var ratio = self.$documentsList.value(self.selected, 'ratio'),
+            previewWidth = self.$preview.width() - 8,
+            height = ratio < 1 ? previewWidth : previewWidth / ratio,
+            width = ratio >= 1 ? previewWidth : previewWidth * ratio,
+            left = Math.floor((previewWidth - Ox.UI.SCROLLBAR_SIZE - width) / 2);
+        return {
+            height: height,
+            // fixme: CSS gets applied twice, to image and enclosing element
+            margin: [8, 8, 8, 8 + left].map(function(px) {
+                return px / 2 + 'px';
+            }).join(' '),
+            width: width
+        };
+    }
+
     function selectDocument(data) {
         if (data.ids[0] != self.selected) {
             self.selected = data.ids[0];