diff --git a/plemp.js b/plemp.js
index 78d75a9..6e75e22 100644
--- a/plemp.js
+++ b/plemp.js
@@ -94,40 +94,39 @@ app.get('/draggables/:id', function(req, res) {
   var drag = draggables[drag_id];
   var default_style = "left:" + drag.left + "px;top:" + drag.top + "px;";
   var mime_type = drag.mime.split("/")
+  var title = drag.name || drag.title || 'Title not set';
+  var content;
   switch (mime_type[0]) {
     case "image":
-      res.send('<img class="draggable" id="' + drag_id + '" ' +
-                    'style="' + default_style + '" src="' + file_name + '">' +
-               '</img>');
+      content = '<img src="' + file_name + '"></img>';
       break;
     case "video":
-      res.send('<video class="draggable" id="' + drag_id + '" ' +
-                      'style="' + default_style + '" src="' + file_name +
-                      '" controls="true"></video>');
+      content = '<video src="' + file_name + '" controls="true"></video>';
       break;
     case "audio":
-      res.send('<audio class="draggable" id="' + drag_id + '" ' +
-                      'style="' + default_style + ';height=80px;" src="' +
-                      file_name +
-                      '" controls="true"></audio>');
+      content = '<audio src="' + file_name + '" controls="true"></audio>';
       break;
     case "text":
       file_contents = fs.readFileSync("public/upload/" + drag_id);
-      res.send('<div class="draggable" id="' + drag_id + '" ' +
-                    'style="' + default_style + '"><pre>' + file_contents +
-               '</pre></div>');
+      content = '<pre>' + file_contents + '</pre>';
       break;
     case 'application': // FIXME: treat as code for now, but it is probably wrong
       file_contents = fs.readFileSync("public/upload/" + drag_id);
-      res.send('<div class="draggable" id="' + drag_id + '" ' +
-                    'style="' + default_style + '"><pre><code>' + file_contents +
-               '</code></pre></div>');
+      content = '<pre><code class="' + drag.type + '">' + file_contents +
+                     '</code></pre>';
       break;
     default:
-      res.send('<div class="draggable" id="' + drag_id + '" ' +
-                    'style="' + default_style + '">Unknown type: ' +
-               mime_type + '</div>');
+      content = '<span>Unknown type: ' + mime_type + '</span>';
   }
+
+  // Wrap the content in a div with title and comments.
+  res.send('<div class="draggable" id="' + drag_id + '" ' +
+                'style="' + default_style + '">' +
+             '<div class="header"><div class="title">' + title +
+                  '<span class="edit">(edit)</span>' +
+                  '<div class="delete">X</div></div>' +
+             '</div>' + content + '<div class="comments"></div>' +
+           '</div>');
 });
 
 // The position save controller: access through AJAX request by the main
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 63020b4..e3f1e83 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -61,10 +61,59 @@ pre {
 
 .draggable {
   position: absolute;
+  background: white;
+  border: thin solid #888;
   padding: 10px;
   width: 400px;
+}
+
+.draggable div,
+.draggable img,
+.draggable audio,
+.draggable video,
+.draggable pre {
+  width: 400px;
   max-height: 300px;
   overflow: auto;
-  border: thin solid #888;
-  background: white;
+}
+
+.draggable pre {
+  width: 388px;
+}
+
+.draggable .header {
+  padding-bottom: 3px;
+  font-size: 11px;
+  text-align: center;
+}
+
+.draggable .header .title {
+  width: 100%;
+  margin-right: 30px;
+  font-weight: bold;
+  overflow: hidden;
+}
+
+.draggable .header .title .edit {
+  padding-left: 10px;
+  color: #cccccc;
+}
+
+.draggable .header .delete {
+  width: auto;
+  float: right;
+  padding: 0px 2px;
+  border: thin solid black;
+  color: #cccccc;
+  margin-left: 20px;
+}
+
+.draggable .header .edit:hover,
+.draggable .header .delete:hover {
+  color: #000000;
+  cursor: pointer;
+}
+
+.draggable .comments {
+  display: none;
 }