diff --git a/distribusi/distribusi.py b/distribusi/distribusi.py
index 024c1a4..5a24ae0 100644
--- a/distribusi/distribusi.py
+++ b/distribusi/distribusi.py
@@ -116,18 +116,24 @@ def distribusify(args, directory):  # noqa
             if args.verbose:
                 print('Generating directory listing for', root)
 
-            for name in files:
+            for name in sorted(files):
+
                 if 'index.html' not in name:
                     full_path = os.path.join(root, name)
                     mime = MIME_TYPE.from_file(full_path)
                     # example: MIME plain/text becomes 'type' plain 'subtype' text
                     type_, subtype = mime.split('/')
 
+                    caption = name
+
                     if args.verbose:
                         print('Found', name, 'as', mime)
 
                     if type_ in FILE_TYPES:
-                        # expansion for different kind of textfiles
+                        
+                        a = FILE_TYPES[type_].format(name, caption)
+
+                        # expansion for different kind of text files
                         if type_ == 'text':
                             if name.endswith('.html') or subtype == 'html':
                                 subtype = 'html'
@@ -143,14 +149,12 @@ def distribusify(args, directory):  # noqa
                                 # a = FILE_TYPES[type_]
 
                         if type_ == 'image':
-                            caption = name
                             if args.thumbnail:
                                 a = thumbnail(full_path, name, args)
                             if args.no_filenames:
                                 caption = ""
                             if args.captions:
                                 caption = caption(full_path)
-
                             a = FILE_TYPES[type_].format(name, caption)
 
                     if subtype in SUB_TYPES:
@@ -162,8 +166,10 @@ def distribusify(args, directory):  # noqa
                         if args.verbose:
                             message = 'not in list of file types, adding as plain href: \n'
                             print(type_, subtype, message, name)
-                            type_ = 'unkown-file'
+                            subtype = subtype + ' unkown-file'
+
                     a = a.replace('{}', name)
+
                     html.append(div(args, type_, subtype, a, name))
 
             if root != directory:
@@ -180,8 +186,6 @@ def distribusify(args, directory):  # noqa
             elif not os.path.exists(index):
                 write_index(args,index,html, html_head, html_footer)
 
-
-
         if args.remove_index:
             index = os.path.join(root, 'index.html')
             if 'index.html' in files:
diff --git a/distribusi/mappings.py b/distribusi/mappings.py
index b360c33..d9fb9dc 100644
--- a/distribusi/mappings.py
+++ b/distribusi/mappings.py
@@ -3,8 +3,8 @@ CODE_TYPES = ['x-c', 'x-shellscript', 'x-python']
 FILE_TYPES = {
     'image': '<figure><img class="image" src="{}"><figcaption>{}</figcaption></figure>',
     'text': '<a href="{}" class="text">{}</a>',
-    'video': ('<video class="video" controls>' '<source src="{}"></source></video>'),
-    'audio': ('<audio controls class="audio">' '<source src="{}"></source></audio>'),
+    'video': ('<video controls>' '<source src="{}"></video>'),
+    'audio': ('<audio controls class="audio">' '<source src="{}"></audio>'),
 }
 
 SUB_TYPES = {
diff --git a/distribusi/page_template.py b/distribusi/page_template.py
index 6ada8d3..24a1e93 100644
--- a/distribusi/page_template.py
+++ b/distribusi/page_template.py
@@ -7,12 +7,12 @@ html_head = """
     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
     <style>
       .image{max-width: 100%%;}
-      .pdf object{width:100%%;}
+      .pdf object{width:640px;height: 640px;}
       .dir::before{content:"📁 ";font-size:18px;}
-      .filename{display:block;}
+      .filename{display:block;font-family:mono;}
       .unkown-file::before{content:"📄 ";font-size:18px;}
-      div{width: 640px;float:left;padding:1em;}
-      video {width:640px;}
+      div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;}
+      video {width:640px;max-height:640px;}
       %s
     </style>
   </head>