diff --git a/apps/susidns/src/js/messages.js b/apps/susidns/src/js/messages.js
index 713620066..740d8c970 100644
--- a/apps/susidns/src/js/messages.js
+++ b/apps/susidns/src/js/messages.js
@@ -16,8 +16,107 @@ function HideMessages() {
   }
 }
 
+function ToggleStoragePathView() {
+  var storagePathView = document.getElementById("storagepath");
+  if (storagePathView != null) {
+    storagePathView.classList.toggle("invisible");
+  }
+  clickableHeadline = document.getElementById("addrtitle");
+  if (clickableHeadline != null) {
+    clickableHeadline.classList.toggle("expanded");
+  }
+
+}
+
+function ToggleAddFormTableView() {
+  var buttonView = document.getElementById("addnewaddrbutton");
+  if (buttonView != null) {
+    buttonView.classList.toggle("invisible");
+  }
+  var tableView = document.getElementById("addnewaddrtable");
+  if (tableView != null) {
+    tableView.classList.toggle("invisible");
+  }
+  clickableForm = document.getElementById("addnewaddr");
+  if (clickableForm != null) {
+    clickableForm.classList.toggle("expanded");
+  }
+}
+
+function ToggleImportFormTableView() {
+  var buttonView = document.getElementById("importhostsform");
+  if (buttonView != null) {
+    buttonView.classList.toggle("invisible");
+  }
+  var tableView = document.getElementById("importhostsbuttons");
+  if (tableView != null) {
+    tableView.classList.toggle("invisible");
+  }
+  clickableForm2 = document.getElementById("importhosts");
+  if (clickableForm2 != null) {
+    clickableForm2.classList.toggle("expanded");
+  }
+}
+
+function initClickables() {
+
+  /*Hide the storage path by default, show it if someone clicks on the header*/
+  var storagePathView = document.getElementById("storagepath");
+  if (storagePathView != null) {
+    storagePathView.classList.add("invisible");
+  }
+  clickableHeadline = document.getElementById("addrtitle");
+  if (clickableHeadline != null) {
+    clickableHeadline.addEventListener('click', ToggleStoragePathView, true);
+  }
+
+  /*If the hostname field is empty, hide the add host form and show it when
+  the user clicks on the form header.*/
+  var d = document.getElementById("emptybook");
+  if (d == null) {
+    var x = document.getElementsByName("hostname");
+    var i;
+    for (i = 0; i < x.length; i++) {
+      if (x[i].value == "") {
+        var buttonView = document.getElementById("addnewaddrbutton");
+        if (buttonView != null) {
+          buttonView.classList.add("invisible");
+        }
+        var tableView = document.getElementById("addnewaddrtable");
+        if (tableView != null) {
+          tableView.classList.add("invisible");
+        }
+      }
+    }
+    clickableForm = document.getElementById("addnewaddr");
+    if (clickableForm != null) {
+      clickableForm.addEventListener('click', ToggleAddFormTableView, true);
+    }
+  }else{
+    clickableForm = document.getElementById("addnewaddr");
+    if (clickableForm != null) {
+      clickableForm.classList.toggle("expanded");
+    }
+  }
+
+  /* Set up the Import Hosts form to be collapsible.*/
+  var ibuttonView = document.getElementById("importhostsform");
+  if (ibuttonView != null) {
+    ibuttonView.classList.add("invisible");
+  }
+  var itableView = document.getElementById("importhostsbuttons");
+  if (itableView != null) {
+    itableView.classList.add("invisible");
+  }
+  clickableForm2 = document.getElementById("importhosts");
+  if (clickableForm2 != null) {
+    clickableForm2.addEventListener('click', ToggleImportFormTableView, true);
+  }
+}
+
 document.addEventListener("DOMContentLoaded", function() {
     document.body.addEventListener('click', HideMessages, true);
+    initClickables();
 }, true);
 
 /* @license-end */
diff --git a/apps/susidns/src/jsp/addressbook.jsp b/apps/susidns/src/jsp/addressbook.jsp
index 4883cfd66..ac73f455c 100644
--- a/apps/susidns/src/jsp/addressbook.jsp
+++ b/apps/susidns/src/jsp/addressbook.jsp
@@ -74,15 +74,8 @@
 </div>
 <hr>
 <div class="headline" id="addressbook">
-<h3><%=intl._t("Address book")%>: <%=intl._t(book.getBook())%></h3>
-<h4><%=intl._t("Storage")%>: ${book.displayName}</h4>
-</div>
-
-<div id="messages">${book.messages}<%
-   if (importMessages != null) {
-       %><%=importMessages%><%
-   }
-%></div>
+<h3 id="addrtitle"><%=intl._t("Address book")%>: <%=intl._t(book.getBook())%></h3>
+<h4 id="storagepath"><%=intl._t("Storage")%>: ${book.displayName}</h4>
 
 ${book.loadBookMessages}
 
@@ -102,6 +95,14 @@ ${book.loadBookMessages}
 </form>
 <% } /* book.getEntries().length() > 0 */ %>
 
+</div>
+
+<div id="messages">${book.messages}<%
+   if (importMessages != null) {
+       %><%=importMessages%><%
+   }
+%></div>
+
 <div id="filter">
 <c:if test="${book.hasFilter}">
 <span><%=intl._t("Current filter")%>: <b>${book.filter}</b>
@@ -239,8 +240,8 @@ ${book.loadBookMessages}
 <input type="hidden" name="begin" value="0">
 <input type="hidden" name="end" value="49">
 <div id="add">
-<h3><%=intl._t("Add new destination")%></h3>
-<table>
+<h3 id="addnewaddr" ><%=intl._t("Add new destination")%></h3>
+<table id="addnewaddrtable">
 <tr>
 <td><b><%=intl._t("Hostname")%></b></td>
 <td><input type="text" name="hostname" value="${book.hostname}" size="54"></td>
@@ -250,7 +251,7 @@ ${book.loadBookMessages}
 <td><input type="text" name="destination" value="${book.destination}" size="70"></td>
 </tr>
 </table>
-<p class="buttons">
+<p class="buttons" id="addnewaddrbutton">
 <input class="cancel" type="reset" value="<%=intl._t("Cancel")%>" >
 <input class="accept" type="submit" name="action" value="<%=intl._t("Replace")%>" >
 <% if (!book.getBook().equals("published")) { %>
@@ -268,14 +269,14 @@ ${book.loadBookMessages}
 <input type="hidden" name="begin" value="0">
 <input type="hidden" name="end" value="49">
 <div id="import">
-<h3><%=intl._t("Import from hosts.txt file")%></h3>
-<table>
+<h3 id="importhosts"><%=intl._t("Import from hosts.txt file")%></h3>
+<table id="importhostsform">
 <tr>
 <td><b><%=intl._t("File")%></b></td>
 <td><input name="file" type="file" accept=".txt" value="" /></td>
 </tr>
 </table>
-<p class="buttons">
+<p class="buttons" id="importhostsbuttons">
 <input class="cancel" type="reset" value="<%=intl._t("Cancel")%>" >
 <input class="download" type="submit" name="action" value="<%=intl._t("Import")%>" >
 </p>
diff --git a/apps/susidns/src/jsp/details.jsp b/apps/susidns/src/jsp/details.jsp
index e50b93d59..027cc0f2f 100644
--- a/apps/susidns/src/jsp/details.jsp
+++ b/apps/susidns/src/jsp/details.jsp
@@ -49,9 +49,9 @@
 <a id="config" href="config"><%=intl._t("Configuration")%></a>
 </div>
 <hr>
-<div class="headline">
+<div class="headline" id="addressbook">
 <h3><%=intl._t("Address book")%>: <%=intl._t(book.getBook())%></h3>
-<h4><%=intl._t("Storage")%>: ${book.displayName}</h4>
+<h4 id="storagepath"><%=intl._t("Storage")%>: ${book.displayName}</h4>
 </div>
 <div id="book">
 <%
diff --git a/apps/susidns/src/themes/light/susidns.css b/apps/susidns/src/themes/light/susidns.css
index 064ff686a..7274b9ee4 100644
--- a/apps/susidns/src/themes/light/susidns.css
+++ b/apps/susidns/src/themes/light/susidns.css
@@ -119,6 +119,12 @@ object {
      border: 1px solid #dee2e6;
      transition: ease border 0.7s
 }
+
+.invisible {
+     visibility: hidden;
+     display: none;
+}
+
 .headline {
      border: 1px solid #dee2e6;
      margin: -1px 0 -2px;
@@ -144,13 +150,13 @@ h3 {
 .headline h3 {
      font-size: 11.5pt !important;
      background: url(../images/addressbook.png) 6px center no-repeat #fcfcff;
-     background: url(../images/addressbook.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);
+     /*background: url(../images/addressbook.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);*/
      background-size: 22px 22px, 100% 100%, 100% 100%;
 }
 
 .headline#subscriptions h3 {
      background: url(../images/subs_24.png) 6px center no-repeat #fcfcff;
-     background: url(../images/subs_24.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);
+     /*background: url(../images/subs_24.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);*/
      background-size: 22px 22px, 100% 100%, 100% 100%;
 }
 
@@ -161,7 +167,7 @@ h3 {
 }
 
 .headline#subscriptions h3, .headline#configure h3, .headline#addressbook h3, .headline h3 {
-     margin: -8px -5px -5px;
+     /*margin: -8px -5px -5px;*/
      padding: 9px 5px 8px 32px;
      text-transform: capitalize;
 }
@@ -286,10 +292,21 @@ div.help {
 
 div.help h3, #add h3, #import h3 {
      border: 1px solid #dee2e6;
-     padding: 5px 10px;
+     padding: 5px 32px;
      margin: -1px -16px 0;
-     background: #fcfcff;
-     background: linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);
+     background: url(/themes/console/light/images/dropdown.png) #f8f8ff;
+     background-repeat: no-repeat !important;
+     background-position: .5%, 15% !important;
+}
+
+.expanded {
+     background: url(/themes/console/light/images/dropdown_active.png) #f8f8ff !important;
+     background-repeat: no-repeat !important;
+     background-position: .5%, 15% !important;
+}
+
+#addrtitle.expanded {
+     background: url(../images/addressbook.png) 6px center no-repeat #fcfcff !important;
 }
 
 p#help {
@@ -623,7 +640,6 @@ textarea[name="config"]:focus, textarea[name="content"]:focus {
      min-width: 300px;
      margin: -1px 10%;
      box-shadow: inset 0 0 0 1px #fff;
-     background: linear-gradient(to bottom, #fcfcff 50%, #eef 50%);
 }
 
 #filter span a {
@@ -663,7 +679,6 @@ form {
 }
 
 th {
-     background: linear-gradient(to bottom, #fcfcff 50%, #eef 50%);
      font-size: 9pt;
 }
 
@@ -1391,7 +1406,7 @@ td.destinations textarea {
 }
 
 input.export {
-     margin-top: 8px;
+     margin-top: -6px;
 }
 
 #host_list th:nth-child(2), #host_list td:nth-child(2),