diff --git a/.editorconfig b/.editorconfig
index 47ae637..f2b28c1 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,7 +10,7 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json}]
+[{*.yml,package.json,*.scss,*.js}]
 indent_size = 2
 
 # The indent size used in the package.json file cannot be changed:
diff --git a/code/cms/DMSDocumentAdmin.php b/code/cms/DMSDocumentAdmin.php
index 998bfef..b52eb68 100644
--- a/code/cms/DMSDocumentAdmin.php
+++ b/code/cms/DMSDocumentAdmin.php
@@ -10,6 +10,8 @@ class DMSDocumentAdmin extends ModelAdmin
 
     private static $menu_title = 'Documents';
 
+    private static $menu_icon = 'dms/images/app_icons/drawer.png';
+
     /**
      * Remove the default "add" button and replace it with a customised version for DMS
      *
diff --git a/code/cms/DMSUploadField_ItemHandler.php b/code/cms/DMSUploadField_ItemHandler.php
index 6ea3e1a..374a4ab 100644
--- a/code/cms/DMSUploadField_ItemHandler.php
+++ b/code/cms/DMSUploadField_ItemHandler.php
@@ -37,7 +37,6 @@ class DMSUploadField_ItemHandler extends UploadField_ItemHandler
             $validator
         );
         $form->loadDataFrom($file);
-        $form->addExtraClass('small');
 
         return $form;
     }
diff --git a/code/extensions/DMSSiteTreeExtension.php b/code/extensions/DMSSiteTreeExtension.php
index b612a42..71a2eb3 100644
--- a/code/extensions/DMSSiteTreeExtension.php
+++ b/code/extensions/DMSSiteTreeExtension.php
@@ -20,12 +20,10 @@ class DMSSiteTreeExtension extends DataExtension
             'Document Sets',
             false,
             $this->owner->DocumentSets(), //->Sort('DocumentSort'),
-            new GridFieldConfig_RelationEditor
+            new GridFieldConfig_RecordEditor
         );
         $gridField->addExtraClass('documentsets');
 
-        $gridField->getConfig()->removeComponentsByType('GridFieldAddExistingAutocompleter');
-
         $fields->addFieldToTab(
             'Root.Document Sets (' . $this->owner->DocumentSets()->count() . ')',
             $gridField
diff --git a/code/model/DMSDocument.php b/code/model/DMSDocument.php
index 523bc92..d4e503b 100644
--- a/code/model/DMSDocument.php
+++ b/code/model/DMSDocument.php
@@ -514,9 +514,8 @@ class DMSDocument extends DataObject implements DMSDocumentInterface
     {
         if ($this->getField('Filename')) {
             return $this->getField('Filename');
-        } else {
-            return ASSETS_DIR . '/';
         }
+        return ASSETS_DIR . '/';
     }
 
     /**
@@ -529,6 +528,8 @@ class DMSDocument extends DataObject implements DMSDocumentInterface
 
 
     /**
+     * Returns the filename of a document without the prefix, e.g. 0~filename.jpg -> filename.jpg
+     *
      * @return string
      */
     public function getFilenameWithoutID()
@@ -898,7 +899,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface
         );
 
         $actionsPanel->setName("ActionsPanel");
-        $actionsPanel->addExtraClass("DMSDocumentActionsPanel");
+        $actionsPanel->addExtraClass('dmsdocument-actionspanel');
         $fields->push($actionsPanel);
 
         $this->extend('updateCMSFields', $fields);
@@ -1130,7 +1131,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface
             )->setName("FilePreview")->addExtraClass('cms-file-info')
         );
 
-        $fields->setName('FileP');
+        $fields->addExtraClass('dmsdocument-documentdetails');
         $urlField->dontEscape = true;
 
         return $fields;
@@ -1211,7 +1212,8 @@ class DMSDocument extends DataObject implements DMSDocumentInterface
         $addExisting->setSearchList($this->getRelatedDocumentsForAutocompleter());
 
         // Restrict search fields to specific fields only
-        $addExisting->setSearchFields(array('Title', 'Filename'));
+        $addExisting->setSearchFields(array('Title:PartialMatch', 'Filename:PartialMatch'));
+        $addExisting->setResultsFormat('$Filename');
 
         $this->extend('updateRelatedDocumentsGridField', $gridField);
 
@@ -1304,12 +1306,12 @@ class DMSDocument extends DataObject implements DMSDocumentInterface
      */
     public function getActionTaskHtml()
     {
-        $html = '<div id="Actions" class="field actions">'
+        $html = '<div class="field dmsdocment-actions">'
             . '<label class="left">' . _t('DMSDocument.ACTIONS_LABEL', 'Actions') . '</label>'
             . '<ul>';
 
         foreach ($this->actionTasks as $panelKey => $title) {
-            $html .= '<li class="ss-ui-button" data-panel="' . $panelKey . '">'
+            $html .= '<li class="ss-ui-button dmsdocument-action" data-panel="' . $panelKey . '">'
                 . _t('DMSDocument.ACTION_' . strtoupper($panelKey), $title)
                 . '</li>';
         }
diff --git a/code/model/DMSDocumentSet.php b/code/model/DMSDocumentSet.php
index e0cb159..586eed3 100644
--- a/code/model/DMSDocumentSet.php
+++ b/code/model/DMSDocumentSet.php
@@ -32,6 +32,11 @@ class DMSDocumentSet extends DataObject
         ),
     );
 
+    private static $summary_fields = array(
+        'Title' => 'Title',
+        'Documents.Count' => 'No. Documents'
+    );
+
     /**
      * Retrieve a list of the documents in this set. An extension hook is provided before the result is returned.
      *
@@ -85,6 +90,7 @@ class DMSDocumentSet extends DataObject
                 // Document listing
                 $gridFieldConfig = GridFieldConfig::create()
                     ->addComponents(
+                        new GridFieldButtonRow('before'),
                         new GridFieldToolbarHeader(),
                         new GridFieldFilterHeader(),
                         new GridFieldSortableHeader(),
@@ -139,7 +145,7 @@ class DMSDocumentSet extends DataObject
                 $gridField->addExtraClass('documents');
 
                 $gridFieldConfig->addComponent(
-                    $addNewButton = new DMSGridFieldAddNewButton,
+                    $addNewButton = new DMSGridFieldAddNewButton('buttons-before-left'),
                     'GridFieldExportButton'
                 );
                 $addNewButton->setDocumentSetId($self->ID);
diff --git a/dist/css/cmsbundle.css b/dist/css/cmsbundle.css
index bbba63a..a8f59e3 100644
--- a/dist/css/cmsbundle.css
+++ b/dist/css/cmsbundle.css
@@ -1,3 +1,137 @@
+.dmsdocument-documentdetails .fieldgroup-field .cms-file-info-preview {
+  box-shadow: none; }
+
+.dmsdocument-documentdetails .fieldgroup-field .cms-file-info-data {
+  width: 400px; }
+
+.dmsdocument-documentdetails .fieldgroup-field .fieldholder-small {
+  margin-top: 5px; }
+  .dmsdocument-documentdetails .fieldgroup-field .fieldholder-small .fieldholder-small-label {
+    font-weight: bold;
+    float: left; }
+  .dmsdocument-documentdetails .fieldgroup-field .fieldholder-small .readonly {
+    font-style: italic; }
+
+.dmsdocment-actions {
+  border: none;
+  box-shadow: none;
+  margin-bottom: 0;
+  padding: 0; }
+  .dmsdocment-actions label.left {
+    padding: 6px 0 0 0; }
+  .dmsdocment-actions .ss-ui-button {
+    border: none;
+    background: none;
+    border-radius: 0;
+    font-weight: normal; }
+    .dmsdocment-actions .ss-ui-button .ui-button-text {
+      padding-bottom: 1em; }
+    .dmsdocment-actions .ss-ui-button.dms-active, .dmsdocment-actions .ss-ui-button.dms-active:hover {
+      border-bottom: 4px solid #66727d; }
+    .dmsdocment-actions .ss-ui-button:hover, .dmsdocment-actions .ss-ui-button:active {
+      background: none;
+      border: none;
+      box-shadow: none; }
+
+.dmsdocument-actionspanel {
+  margin-top: 0; }
+  .dmsdocument-actionspanel .fieldgroup {
+    border: 1px solid #d0d3d5;
+    display: none;
+    margin-left: 0;
+    padding: 5px 15px; }
+    .dmsdocument-actionspanel .fieldgroup .fieldholder-small label {
+      padding: 0; }
+    .dmsdocument-actionspanel .fieldgroup .embargo li,
+    .dmsdocument-actionspanel .fieldgroup .expiry li {
+      margin-left: 8px;
+      width: 100%; }
+      .dmsdocument-actionspanel .fieldgroup .embargo li label,
+      .dmsdocument-actionspanel .fieldgroup .expiry li label {
+        padding-left: 10px; }
+    .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime,
+    .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime,
+    .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime,
+    .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime {
+      float: left;
+      margin-top: 0;
+      margin-left: 34px;
+      overflow: hidden; }
+      .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.date, .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.time,
+      .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.date,
+      .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.time,
+      .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.date,
+      .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.time,
+      .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.date,
+      .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.time {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        width: auto; }
+        .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn, .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn,
+        .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn,
+        .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn,
+        .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn,
+        .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn,
+        .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn,
+        .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn {
+          overflow: hidden; }
+      .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn {
+        background: url(../../images/calendar-month.png) 90px 7px no-repeat; }
+      .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn {
+        background: url(../../images/clock-frame.png) 90px 7px no-repeat; }
+      .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .middleColumn,
+      .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .middleColumn {
+        border: none;
+        margin-left: 0;
+        width: auto; }
+        .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .middleColumn input.date,
+        .dmsdocument-actionspanel .fieldgroup .embargo .embargoDatetime .middleColumn input.time,
+        .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .middleColumn input.date,
+        .dmsdocument-actionspanel .fieldgroup .embargo .expiryDatetime .middleColumn input.time,
+        .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .middleColumn input.date,
+        .dmsdocument-actionspanel .fieldgroup .expiry .embargoDatetime .middleColumn input.time,
+        .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .middleColumn input.date,
+        .dmsdocument-actionspanel .fieldgroup .expiry .expiryDatetime .middleColumn input.time {
+          margin-right: 40px;
+          width: 80px; }
+    .dmsdocument-actionspanel .fieldgroup .fieldgroup-field label {
+      margin: 0; }
+  .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-preview {
+    background: url(../../images/app_icons/generic_32.png) -10px -6px no-repeat; }
+  .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-name span.name {
+    width: 260px; }
+  .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel {
+    text-indent: 0;
+    width: auto; }
+    .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .btn-icon-deleteLight {
+      background-position: 0 -128px;
+      display: inline-block; }
+    .dmsdocument-actionspanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .ui-button-text {
+      color: #66727d;
+      display: block;
+      float: right;
+      padding: 0 0 0 2em;
+      position: relative; }
+  .dmsdocument-actionspanel > .fieldgroup.middleColumn {
+    display: block;
+    overflow: hidden; }
+    .dmsdocument-actionspanel > .fieldgroup.middleColumn .fieldgroup-field {
+      width: 100%; }
+  .dmsdocument-actionspanel .permissions .fieldholder-small {
+    clear: both; }
+
+#ui-datepicker-div {
+  border: 1px solid #d0d3d5; }
+
 form.small .field input.text,
 form.small .field textarea,
 form.small .field select,
@@ -8,190 +142,11 @@ form.small .field .TreeDropdownField,
 .field.small .TreeDropdownField {
   width: 100%; }
 
-#FileP .fieldgroup-field {
-  width: 100%; }
-  #FileP .fieldgroup-field .cms-file-info-preview {
-    box-shadow: none; }
-  #FileP .fieldgroup-field .cms-file-info-data {
-    width: 400px; }
-  #FileP .fieldgroup-field .fieldholder-small {
-    margin-top: 5px; }
-    #FileP .fieldgroup-field .fieldholder-small label {
-      width: auto;
-      margin-left: 0;
-      padding-top: 0;
-      margin-right: 10px;
-      font-weight: bold;
-      float: left; }
-    #FileP .fieldgroup-field .fieldholder-small .readonly {
-      font-style: italic;
-      color: #666; }
-
-#Actions {
-  box-shadow: none;
-  border: none;
-  padding: 0; }
-  #Actions li {
-    margin-left: 2px; }
-    #Actions li:first-child {
-      margin-left: 0; }
-    #Actions li.delete-button-appended {
-      display: inline-block;
-      position: relative;
-      margin-left: 0; }
-
-.DMSDocumentActionsPanel .fieldgroup {
-  display: none;
-  float: none;
-  width: auto;
-  background: #f8f8f8;
-  padding: 15px;
-  border: 1px solid #d0d3d5; }
-  .DMSDocumentActionsPanel .fieldgroup .fieldholder-small label {
-    float: none;
-    width: auto;
-    margin: 0;
-    padding: 0; }
-    .DMSDocumentActionsPanel .fieldgroup .fieldholder-small label.ss-ui-button {
-      float: left;
-      margin: 0 10px 0 0; }
-  .DMSDocumentActionsPanel .fieldgroup .embargo li,
-  .DMSDocumentActionsPanel .fieldgroup .expiry li {
-    float: none;
-    width: 100%;
-    margin-left: 8px; }
-    .DMSDocumentActionsPanel .fieldgroup .embargo li label,
-    .DMSDocumentActionsPanel .fieldgroup .expiry li label {
-      padding-left: 10px; }
-  .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime,
-  .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime,
-  .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime,
-  .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime {
-    margin-top: 0;
-    margin-left: 34px;
-    overflow: hidden; }
-    .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.date, .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.time,
-    .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.date,
-    .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.time,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.date,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.time,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.date,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.time {
-      display: inline-block;
-      width: auto;
-      margin: 0;
-      padding: 0; }
-    .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.date .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.date .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.date .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.date .middleColumn {
-      background: url(../../images/calendar-month.png) 90px 7px no-repeat;
-      overflow: hidden; }
-    .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .field.time .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .field.time .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .field.time .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .field.time .middleColumn {
-      background: url(../../images/clock-frame.png) 90px 7px no-repeat;
-      overflow: hidden; }
-    .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn,
-    .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn {
-      margin-left: 0;
-      width: auto;
-      border: none; }
-      .DMSDocumentActionsPanel .fieldgroup .embargo .embargoDatetime .middleColumn input,
-      .DMSDocumentActionsPanel .fieldgroup .embargo .expiryDatetime .middleColumn input,
-      .DMSDocumentActionsPanel .fieldgroup .expiry .embargoDatetime .middleColumn input,
-      .DMSDocumentActionsPanel .fieldgroup .expiry .expiryDatetime .middleColumn input {
-        width: 80px;
-        margin-right: 40px; }
-
-.DMSDocumentActionsPanel #Embargo {
-  border: none;
-  box-shadow: none;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none; }
-
-.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-preview {
-  background: url(../../images/app_icons/generic_32.png) -10px -6px no-repeat; }
-
-.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-name span.name {
-  width: 260px; }
-
-.DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel {
-  width: auto;
-  text-indent: 0; }
-  .DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .btn-icon-deleteLight {
-    background-position: 0 -128px;
-    display: inline-block; }
-  .DMSDocumentActionsPanel .ss-uploadfield-files .ss-uploadfield-item-actions .ss-uploadfield-item-cancel .ui-button-text {
-    display: block;
-    position: relative;
-    float: right;
-    color: #555;
-    padding: 0;
-    padding-left: 2em; }
-
-.DMSDocumentActionsPanel > .fieldgroup.middleColumn {
-  overflow: hidden;
-  display: block; }
-  .DMSDocumentActionsPanel > .fieldgroup.middleColumn .fieldgroup-field {
-    width: 100%; }
-
-#Form_ItemEditForm fieldset table.ss-gridfield-table {
-  width: 494px; }
-  #Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main {
-    min-width: 175px; }
-    #Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main.col-action_SetOrderID {
-      width: 60px;
-      min-width: 60px; }
-  #Form_ItemEditForm fieldset table.ss-gridfield-table tr td {
-    white-space: normal; }
-
-#ui-datepicker-div {
-  border: 1px solid #DDD; }
-
-.ui-autocomplete {
-  border: 1px solid #DDD;
-  box-shadow: 0 1px 2px 0px #AFAFAF;
+.dmsdocument-addexisting .ui-autocomplete {
+  border: 1px solid #d0d3d5;
   max-height: 300px;
   overflow: scroll; }
 
-.cms fieldset.documents table td,
-.cms fieldset.relatedLinks table td {
-  white-space: normal; }
-
-.cms fieldset.documents table td.col-buttons,
-.cms fieldset.relatedLinks table td.col-buttons {
-  white-space: nowrap; }
-  .cms fieldset.documents table td.col-buttons .dms-delete-link-only .ui-icon,
-  .cms fieldset.relatedLinks table td.col-buttons .dms-delete-link-only .ui-icon {
-    background: url(../../images/chain-unchain.png) no-repeat; }
-
-.cms fieldset.documents table tr.dms-document-hidden-row.odd,
-.cms fieldset.relatedLinks table tr.dms-document-hidden-row.odd {
-  background-color: rgba(242, 220, 222, 0.6); }
-
-.cms fieldset.documents table tr.dms-document-hidden-row.even,
-.cms fieldset.relatedLinks table tr.dms-document-hidden-row.even {
-  background-color: rgba(243, 202, 204, 0.675); }
-
-.cms fieldset.documents table tr.dms-document-hidden-row:hover,
-.cms fieldset.relatedLinks table tr.dms-document-hidden-row:hover {
-  background-color: rgba(245, 172, 173, 0.8) !important; }
-
-.DMSDocumentAddController .ui-tabs ul.ui-tabs-nav {
-  border-bottom: none;
-  float: right;
-  margin: 8px 0 -1px 0;
-  padding: 0 24px 0 0; }
-  .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li {
-    padding-bottom: 1px;
-    border: 1px solid #C0C0C2; }
-    .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li a {
-      padding: 8px 20px 8px; }
-
 .ss-add .document-add-existing input.document-autocomplete {
   position: absolute;
   z-index: 9999;
@@ -203,20 +158,16 @@ form.small .field .TreeDropdownField,
   box-sizing: border-box;
   -moz-box-sizing: border-box; }
   .ss-add .document-add-existing input.document-autocomplete[disabled] {
-    color: #C0C0C2;
-    text-shadow: 0 -1px 0 #FFF;
-    background: #EEE;
+    color: #d0d3d5;
+    text-shadow: 0 -1px 0 #ffffff;
+    background: #f8f8f8;
     background-image: none;
-    box-shadow: inset 0 1px 8px 0 #C4C4C4;
+    box-shadow: inset 0 1px 8px 0 #d0d3d5;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0; }
 
-.ss-add .document-add-existing .TreeDropdownField {
-  border: none;
-  width: 100%;
-  max-width: 512px;
-  box-sizing: border-box;
-  cursor: pointer; }
+.ss-add .document-add-existing .treedropdown {
+  border: none; }
 
 .ss-add .document-add-existing .treedropdownfield-toggle-panel-link {
   padding: 5px 9px 9px;
@@ -241,13 +192,11 @@ form.small .field .TreeDropdownField,
 
 .ss-add .document-add-existing .document-list {
   width: 510px;
-  border: 1px solid #DDD;
+  border: 1px solid #d0d3d5;
   border-top: none;
   background: #ffffff;
   display: none;
-  box-shadow: 0 2px 4px 1px #DDD;
   max-height: 300px;
-  border-radius: 6px;
   background-clip: padding-box;
   overflow: scroll; }
   .ss-add .document-add-existing .document-list p {
@@ -259,10 +208,10 @@ form.small .field .TreeDropdownField,
       .ss-add .document-add-existing .document-list ul li a {
         display: block;
         padding: 4px 8px;
-        border: 1px solid #FFF;
+        border: 1px solid #ffffff;
         color: black; }
         .ss-add .document-add-existing .document-list ul li a:hover {
-          border: 1px solid #CCC;
+          border: 1px solid #d0d3d5;
           border-radius: 4px;
           background: rgba(203, 203, 203, 0.4);
           cursor: pointer;
@@ -326,20 +275,7 @@ form.small .field .TreeDropdownField,
         .cms .ss-add .treedropdownfield-panel ul li a.jstree-hovered,
         .cms .selectiongroup .treedropdownfield-panel ul li a.jstree-hovered {
           background: rgba(203, 203, 203, 0.4);
-          border: 1px solid #CCC; }
-
-@-moz-document url-prefix() .ss-add .document-add-existing input {
-  padding: 10px 7px; }
-
-#Form_EditForm_Documents {
-  padding: 1em 0; }
-  #Form_EditForm_Documents input[name="filter[LastChanged]"] {
-    display: none; }
-
-#Form_EditForm_RelatedLinks table {
-  padding: 1em 0; }
-  #Form_EditForm_RelatedLinks table thead h2 {
-    display: none; }
+          border: 1px solid #d0d3d5; }
 
 #Form_ItemEditForm h3:first-child {
   display: inline-block;
diff --git a/images/app_icons/drawer.png b/images/app_icons/drawer.png
new file mode 100644
index 0000000..c7c46be
Binary files /dev/null and b/images/app_icons/drawer.png differ
diff --git a/javascript/DMSDocumentCMSFields.js b/javascript/DMSDocumentCMSFields.js
index cbf320f..180f3b5 100644
--- a/javascript/DMSDocumentCMSFields.js
+++ b/javascript/DMSDocumentCMSFields.js
@@ -51,16 +51,16 @@
                 this.trigger('change');
 			}
 		});
-		$('#Actions ul li').entwine({
+		$('.dmsdocment-actions ul li').entwine({
 			onclick: function (e) {
 
 				//add active state to the current button
-				$('#Actions ul li').removeClass('dms-active');
+				$('.dmsdocment-actions ul li').removeClass('dms-active');
 				this.addClass('dms-active');
 				//$('li.dms-active').append('<span class="arrow"></span>');
 
 				//hide all inner field sections
-				var panel = $('.DMSDocumentActionsPanel:first');
+				var panel = $('.dmsdocument-actionspanel:first');
 				panel.find('> .fieldgroup > .fieldgroup-field').hide();
 
 				//show the correct group of controls
@@ -94,7 +94,7 @@
 			}
 		});
 
-		$('.DMSDocumentActionsPanel').entwine({
+		$('.dmsdocument-actionspanel').entwine({
 			onadd: function () {
 				//do an initial show of the entire panel
 				this.show();
@@ -103,17 +103,17 @@
 				this.find('.replace').closest('div.fieldgroup-field').addClass('ss-upload').addClass('ss-uploadfield');
 
 				// add class and hide
-				$('.DMSDocumentActionsPanel .embargo input.date').closest('.fieldholder-small').addClass('embargoDatetime').hide();
-				$('.DMSDocumentActionsPanel .expiry input.date').closest('.fieldholder-small').addClass('expiryDatetime').hide();
+				$('.dmsdocument-actionspanel .embargo input.date').closest('.fieldholder-small').addClass('embargoDatetime').hide();
+				$('.dmsdocument-actionspanel .expiry input.date').closest('.fieldholder-small').addClass('expiryDatetime').hide();
 				// We need to duplicate the above functions to work when Adding documents
 //				$('#Form_EditForm_EmbargoedUntilDate_date').closest('.fieldholder-small').addClass('embargoDatetime').hide();
 //				$('#Form_EditForm_ExpireAtDate_date').closest('.fieldholder-small').addClass('expiryDatetime').hide();
 
 				//Add placeholder attribute to date and time fields
-				$('.DMSDocumentActionsPanel .embargo input.date').attr('placeholder', 'dd-mm-yyyy');
-				$('.DMSDocumentActionsPanel .embargo input.time').attr('placeholder', 'hh:mm:ss');
-				$('.DMSDocumentActionsPanel .expiry input.date').attr('placeholder', 'dd-mm-yyyy');
-				$('.DMSDocumentActionsPanel .expiry input.time').attr('placeholder', 'hh:mm:ss');
+				$('.dmsdocument-actionspanel .embargo input.date').attr('placeholder', 'dd-mm-yyyy');
+				$('.dmsdocument-actionspanel .embargo input.time').attr('placeholder', 'hh:mm:ss');
+				$('.dmsdocument-actionspanel .expiry input.date').attr('placeholder', 'dd-mm-yyyy');
+				$('.dmsdocument-actionspanel .expiry input.time').attr('placeholder', 'hh:mm:ss');
 				// We need to duplicate to work when adding documents
 //				$('#Form_EditForm_EmbargoedUntilDate_date').attr('placeholder', 'dd-mm-yyyy');
 //				$('#Form_EditForm_EmbargoedUntilDate_time').attr('placeholder', 'hh:mm:ss');
@@ -124,8 +124,8 @@
 				$('li[data-panel="embargo"]').click();
 
 				//set the initial state of the radio button and the associated dropdown hiding
-				$('.DMSDocumentActionsPanel .embargo input[type="radio"][checked]').change();
-				$('.DMSDocumentActionsPanel .expiry input[type="radio"][checked]').change();
+				$('.dmsdocument-actionspanel .embargo input[type="radio"][checked]').change();
+				$('.dmsdocument-actionspanel .expiry input[type="radio"][checked]').change();
 				//Again we need to duplicate the above function to work when adding documents
 //				$('#Form_EditForm_Embargo input[checked]').change();
 //				$('#Form_EditForm_Expiry input[checked]').change();
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
new file mode 100644
index 0000000..195b8e7
--- /dev/null
+++ b/scss/_mixins.scss
@@ -0,0 +1,7 @@
+//** Generate a state for an active list item link
+//
+// @param {string} $color - the colour to use for the border
+// @param {string} $size  - the size the border should be, e.g. "8px"
+@mixin dmsdocument-actions-active($color, $size: "4px") {
+  border-bottom: #{$size} solid #{$color};
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0b9d306..027ba43 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -3,3 +3,8 @@
 // Colours
 $color-button-generic: #e6e6e6 !default;
 $color-zebra: #F0F4F7 !default;
+
+$color-grey-lighter: #f8f8f8 !default;
+$color-grey-light: #d0d3d5 !default;
+$color-grey-dark: #66727d !default;
+$color-white: #ffffff !default;
diff --git a/scss/DMSDocumentCMSFields.scss b/scss/cmsfields.scss
similarity index 63%
rename from scss/DMSDocumentCMSFields.scss
rename to scss/cmsfields.scss
index cca8dd8..cdd52ad 100644
--- a/scss/DMSDocumentCMSFields.scss
+++ b/scss/cmsfields.scss
@@ -1,18 +1,6 @@
-form.small .field input.text,
-form.small .field textarea,
-form.small .field select,
-form.small .field .TreeDropdownField,
-.field.small input.text,
-.field.small textarea,
-.field.small select,
-.field.small .TreeDropdownField {
-  width: 100%;
-}
-
-#FileP {
+//** The DMS document details/information on an edit page
+.dmsdocument-documentdetails {
   .fieldgroup-field {
-    width: 100%;
-
     .cms-file-info-preview {
       box-shadow: none;
     }
@@ -20,73 +8,78 @@ form.small .field .TreeDropdownField,
     .cms-file-info-data {
       width: 400px;
     }
+
     .fieldholder-small {
       margin-top: 5px;
-      label {
-        width: auto;
-        margin-left: 0;
-        padding-top: 0;
-        margin-right: 10px;
+
+      .fieldholder-small-label {
         font-weight: bold;
         float: left;
       }
-      .readonly{
+
+      .readonly {
         font-style: italic;
-        color: #666;
       }
     }
   }
 }
 
-#Actions {
-  box-shadow:none;
-  border:none;
-  padding:0;
-  li {
-    margin-left: 2px;
-    &:first-child {
-      margin-left: 0;
+//** The actions panel buttons when editing a DMS document
+.dmsdocment-actions {
+  border: none;
+  box-shadow: none;
+  margin-bottom: 0;
+  padding: 0;
+
+  label.left {
+    padding: 6px 0 0 0;
+  }
+
+  .ss-ui-button {
+    border: none;
+    background: none;
+    border-radius: 0;
+    font-weight: normal;
+
+    .ui-button-text {
+      padding-bottom: 1em;
     }
-    &.delete-button-appended {
-      display: inline-block;
-      position: relative;
-      margin-left: 0;
+
+    &.dms-active,
+    &.dms-active:hover {
+      @include dmsdocument-actions-active($color-grey-dark);
+    }
+
+    &:hover,
+    &:active {
+      background: none;
+      border: none;
+      box-shadow: none;
     }
-    // &.dms-active{
-    //  @include active-actions-btn;
-    // }
   }
 }
 
-.DMSDocumentActionsPanel {
+//** The actions panel, containing mini forms for each DMS document action
+.dmsdocument-actionspanel {
+  margin-top: 0;
+
   .fieldgroup {
+    border: 1px solid $color-grey-light;
     display: none;
-    float: none;
-    width: auto;
-    background: #f8f8f8;
-    padding: 15px;
-    border: 1px solid #d0d3d5;
+    margin-left: 0;
+    padding: 5px 15px;
 
     .fieldholder-small {
       label {
-        float: none;
-        width: auto;
-        margin: 0;
         padding: 0;
-
-        &.ss-ui-button {
-          float: left;
-          margin: 0 10px 0 0;
-        }
       }
     }
 
     .embargo,
     .expiry {
       li {
-        float: none;
-        width: 100%;
         margin-left: 8px;
+        width: 100%;
 
         label {
           padding-left: 10px;
@@ -95,6 +88,7 @@ form.small .field .TreeDropdownField,
 
       .embargoDatetime,
       .expiryDatetime {
+        float: left;
         margin-top: 0;
         margin-left: 34px;
         overflow: hidden;
@@ -103,45 +97,45 @@ form.small .field .TreeDropdownField,
           &.date,
           &.time {
             display: inline-block;
-            width: auto;
             margin: 0;
             padding: 0;
+            width: auto;
+
+            .middleColumn {
+              overflow: hidden;
+            }
           }
 
           &.date {
-            .middleColumn{
+            .middleColumn {
               background: url('../images/calendar-month.png') 90px 7px no-repeat;
-              overflow: hidden;
             }
           }
 
           &.time {
             .middleColumn {
               background: url('../images/clock-frame.png') 90px 7px no-repeat;
-              overflow: hidden;
             }
           }
         }
 
         .middleColumn {
+          border: none;
           margin-left: 0;
           width: auto;
-          border: none;
 
-          input {
-            width: 80px;
+          input.date,
+          input.time {
             margin-right: 40px;
+            width: 80px;
           }
         }
       }
     }
-  }
 
-  #Embargo {
-    border: none;
-    box-shadow: none;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
+    .fieldgroup-field label {
+      margin: 0;
+    }
   }
 
   .ss-uploadfield-files {
@@ -157,8 +151,8 @@ form.small .field .TreeDropdownField,
 
     .ss-uploadfield-item-actions {
       .ss-uploadfield-item-cancel {
-        width: auto;
         text-indent: 0;
+        width: auto;
 
         .btn-icon-deleteLight {
           background-position: 0 -128px;
@@ -166,50 +160,44 @@ form.small .field .TreeDropdownField,
         }
 
         .ui-button-text {
+          color: $color-grey-dark;
           display: block;
-          position: relative;
           float: right;
-          color: #555;
-          padding:0;
-          padding-left: 2em;
+          padding: 0 0 0 2em;
+          position: relative;
         }
       }
     }
   }
 
   & > .fieldgroup.middleColumn {
-    overflow: hidden;
     display: block;
+    overflow: hidden;
 
     .fieldgroup-field {
       width: 100%;
     }
   }
-}
 
-#Form_ItemEditForm {
-  fieldset {
-    table.ss-gridfield-table {
-      width: 494px;
-
-      tr {
-        th.main {
-          min-width: 175px;
-
-          &.col-action_SetOrderID {
-            width: 60px;
-            min-width: 60px;
-          }
-        }
-
-        td {
-          white-space: normal;
-        }
-      }
+  .permissions {
+    .fieldholder-small {
+      clear: both;
     }
   }
 }
 
 #ui-datepicker-div {
-  border: 1px solid #DDD;
+  border: 1px solid $color-grey-light;
+}
+
+//** Overrides for the inline edit screen
+form.small .field input.text,
+form.small .field textarea,
+form.small .field select,
+form.small .field .TreeDropdownField,
+.field.small input.text,
+.field.small textarea,
+.field.small select,
+.field.small .TreeDropdownField {
+  width: 100%;
 }
diff --git a/scss/main.scss b/scss/main.scss
index e213d5d..b5d9a4e 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,3 +1,4 @@
 @import "_variables";
-@import "DMSDocumentCMSFields";
-@import "DMSMainCMS";
+@import "_mixins";
+@import "cmsfields";
+@import "upload";
diff --git a/scss/DMSMainCMS.scss b/scss/upload.scss
similarity index 69%
rename from scss/DMSMainCMS.scss
rename to scss/upload.scss
index 8a2dc82..84ac952 100644
--- a/scss/DMSMainCMS.scss
+++ b/scss/upload.scss
@@ -1,58 +1,8 @@
-.ui-autocomplete{
-  border: 1px solid #DDD;
-  box-shadow: 0 1px 2px 0px #AFAFAF;
-  max-height: 300px;
-  overflow: scroll;
-}
-
-.cms fieldset.documents,
-.cms fieldset.relatedLinks {
-  table {
-    td {
-      white-space: normal;
-    }
-
-    td.col-buttons {
-      white-space: nowrap;
-
-      .dms-delete-link-only {
-        .ui-icon {
-          background: url(../images/chain-unchain.png) no-repeat;
-        }
-      }
-    }
-
-    tr.dms-document-hidden-row {
-      &.odd {
-        background-color: mix($color-zebra, rgba(255, 4, 0, 0.2));
-      }
-
-      &.even {
-        background-color: mix($color-zebra, rgba(255, 4, 0, 0.35));
-      }
-
-      &:hover {
-        background-color: mix($color-zebra, rgba(255, 4, 0, 0.6)) !important;
-      }
-    }
-  }
-}
-
-.DMSDocumentAddController .ui-tabs {
-  ul.ui-tabs-nav {
-    border-bottom: none;
-    float: right;
-    margin: 8px 0 -1px 0;
-    padding: 0 24px 0 0;
-
-    li {
-      padding-bottom: 1px;
-      border: 1px solid #C0C0C2;
-
-      a {
-        padding: 8px 20px 8px;
-      }
-    }
+.dmsdocument-addexisting {
+  .ui-autocomplete {
+    border: 1px solid $color-grey-light;
+    max-height: 300px;
+    overflow: scroll;
   }
 }
 
@@ -70,22 +20,18 @@
       -moz-box-sizing: border-box;
 
       &[disabled] {
-        color: #C0C0C2;
-        text-shadow: 0 -1px 0 #FFF;
-        background: #EEE;
+        color: $color-grey-light;
+        text-shadow: 0 -1px 0 $color-white;
+        background: $color-grey-lighter;
         background-image:none;
-        box-shadow: inset 0 1px 8px 0 #C4C4C4;
+        box-shadow: inset 0 1px 8px 0 $color-grey-light;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
       }
     }
 
-    .TreeDropdownField {
+    .treedropdown {
       border: none;
-      width: 100%;
-      max-width: 512px;
-      box-sizing: border-box;
-      cursor:pointer;
     }
 
     .treedropdownfield-toggle-panel-link {
@@ -116,13 +62,11 @@
 
     .document-list {
       width: 510px;
-      border: 1px solid #DDD;
+      border: 1px solid $color-grey-light;
       border-top: none;
-      background: #ffffff;
+      background: $color-white;
       display: none;
-      box-shadow: 0 2px 4px 1px #DDD;
       max-height: 300px;
-      border-radius: 6px;
       background-clip: padding-box;
       overflow: scroll;
 
@@ -139,11 +83,11 @@
           a {
             display: block;
             padding: 4px 8px;
-            border: 1px solid #FFF;
+            border: 1px solid $color-white;
             color: black;
 
             &:hover {
-              border: 1px solid #CCC;
+              border: 1px solid $color-grey-light;
               border-radius: 4px;
               background: rgba(203, 203, 203, 0.4);
               cursor: pointer;
@@ -222,7 +166,7 @@
         padding: 4px 0;
 
         li {
-          border: 1px solid #ffffff;
+          border: 1px solid $color-white;
 
           a {
             display: block;
@@ -230,7 +174,7 @@
 
             &.jstree-hovered {
               background: rgba(203, 203, 203, 0.4);
-              border: 1px solid #CCC;
+              border: 1px solid $color-grey-light;
             }
           }
         }
@@ -239,32 +183,6 @@
   }
 }
 
-
-// Hack for Firefox to fix padding on adding document input.
-// FF renders the size different and pushes it out by 2px compared to webkit
-@-moz-document url-prefix() .ss-add .document-add-existing input {
-  padding: 10px 7px;
-}
-
-#Form_EditForm_Documents {
-  padding: 1em 0;
-
-  input[name="filter[LastChanged]"] {
-    display: none;
-  }
-}
-
-#Form_EditForm_RelatedLinks {
-  table {
-    padding: 1em 0;
-    thead {
-      h2 {
-        display: none;
-      }
-    }
-  }
-}
-
 #Form_ItemEditForm {
   h3:first-child {
     display: inline-block;
diff --git a/templates/DMSDocumentAddExistingField.ss b/templates/DMSDocumentAddExistingField.ss
index fd36fc2..cc995e6 100644
--- a/templates/DMSDocumentAddExistingField.ss
+++ b/templates/DMSDocumentAddExistingField.ss
@@ -1,4 +1,4 @@
-<div id="document" class="ss-add field treedropdown searchable">
+<div class="ss-add field treedropdown searchable dmsdocument-addexisting">
     <div class="document-add-existing <% if $useFieldContext %>field<% else %>link-editor-context<% end_if %>">
     <% if $useFieldContext %><h3><% else %><div><% end_if %>
         <span class="step-label">
diff --git a/tests/DMSDocumentTest.php b/tests/DMSDocumentTest.php
index 6973d35..53be3d7 100644
--- a/tests/DMSDocumentTest.php
+++ b/tests/DMSDocumentTest.php
@@ -84,7 +84,7 @@ class DMSDocumentTest extends SapphireTest
 
         $this->assertNotContains('test-file-file-doesnt-exist-1', $jsonResult);
         $this->assertContains('test-file-file-doesnt-exist-2', $jsonResult);
-        $this->assertEquals(array('Title', 'Filename'), $autocompleter->getSearchFields());
+        $this->assertEquals(array('Title:PartialMatch', 'Filename:PartialMatch'), $autocompleter->getSearchFields());
     }
 
     /**
@@ -118,7 +118,7 @@ class DMSDocumentTest extends SapphireTest
         $result = $document->getActionTaskHtml();
 
         $this->assertContains('<label class="left">Actions</label>', $result);
-        $this->assertContains('<li class="ss-ui-button" data-panel="', $result);
+        $this->assertContains('<li class="ss-ui-button dmsdocument-action" data-panel="', $result);
         $this->assertContains('permission', $result);
         $this->assertContains('Example', $result);
     }