diff --git a/apis/client/add/wizard.html b/apis/client/add/wizard.html
index 7559c6a28f..a91d79c3c1 100644
--- a/apis/client/add/wizard.html
+++ b/apis/client/add/wizard.html
@@ -1,16 +1,18 @@
 <template name="addApiBackendWizard">
-  <h1>
-    {{_ "addApiBackendWizard_heading" }}
-  </h1>
-  {{> wizard
-    id="add-api-backend-wizard"
-    route="addApiBackend-wizard"
-    steps=steps
-    buttonClasses="btn btn-default"
-    stepsTemplate="steps_bootstrap3"
-    clearOnDestroy=true
-    backButton=backButtonText
-    nextButton=nextButtonText
-    confirmButton=confirmButtonText
-  }}
+  <div class="container">
+    <h1 class="page-main-title">
+      {{_ "addApiBackendWizard_heading" }}
+    </h1>
+    {{> wizard
+      id="add-api-backend-wizard"
+      route="addApiBackend-wizard"
+      steps=steps
+      buttonClasses="btn btn-default"
+      stepsTemplate="steps_bootstrap3"
+      clearOnDestroy=true
+      backButton=backButtonText
+      nextButton=nextButtonText
+      confirmButton=confirmButtonText
+    }}
+  </div>
 </template>
diff --git a/apis/client/edit/form/editApiBackendForm.html b/apis/client/edit/form/editApiBackendForm.html
index 9751e8c3a6..4de900313a 100644
--- a/apis/client/edit/form/editApiBackendForm.html
+++ b/apis/client/edit/form/editApiBackendForm.html
@@ -1,73 +1,75 @@
 <template name="editApiBackendForm">
-  <div class="api-backends-content">
-    <h1>{{_ "apiBackends_Edit_API_Title"}}</h1>
-    {{#autoForm collection=formCollection doc=apiBackend id="apiBackendForm" type="update"}}
-    {{>showHelp 'api_name'}}
-    {{> afQuickField name='name'}}
-    <span class="help-block">{{_ "apiBackends_Title_Help"}}</span>
-    {{> afQuickField name='description'}}
-    <legend>{{_ "editApiBackendForm-uploadLogo"}}</legend>
-    {{> uploadApiLogo apiBackend=apiBackend }}
-    <legend>{{_ "apiBackends_Backend_Title"}}</legend>
-    <span class="help-block">{{_ "apiBackends_Backend_Help"}}</span>
-    {{> afQuickField name='backend_protocol' options="allowed"}}
-    {{>showHelp 'servers'}}
-    {{> afQuickField name='servers'}}
-    <legend>{{_ "apiBackends_Host_Title"}}</legend>
-    <div class="row">
-      <div class="col-lg-4">
-        {{>showHelp 'frontend_host'}}
-        {{> afQuickField name='frontend_host'}}
+  <div class="container">
+    <div class="api-backends-content">
+      <h1>{{_ "apiBackends_Edit_API_Title"}}</h1>
+      {{#autoForm collection=formCollection doc=apiBackend id="apiBackendForm" type="update"}}
+      {{>showHelp 'api_name'}}
+      {{> afQuickField name='name'}}
+      <span class="help-block">{{_ "apiBackends_Title_Help"}}</span>
+      {{> afQuickField name='description'}}
+      <legend>{{_ "editApiBackendForm-uploadLogo"}}</legend>
+      {{> uploadApiLogo apiBackend=apiBackend }}
+      <legend>{{_ "apiBackends_Backend_Title"}}</legend>
+      <span class="help-block">{{_ "apiBackends_Backend_Help"}}</span>
+      {{> afQuickField name='backend_protocol' options="allowed"}}
+      {{>showHelp 'servers'}}
+      {{> afQuickField name='servers'}}
+      <legend>{{_ "apiBackends_Host_Title"}}</legend>
+      <div class="row">
+        <div class="col-lg-4">
+          {{>showHelp 'frontend_host'}}
+          {{> afQuickField name='frontend_host'}}
+        </div>
+        <div class="col-lg-4 arrow">
+          <i class="fa fa-arrow-right fa-2x"></i>
+          <div>{{_ "apiBackends_HostRewrite"}}</div>
+        </div>
+        <div class="col-lg-4">
+          {{>showHelp 'backend_host'}}
+          {{> afQuickField name='backend_host'}}
+        </div>
       </div>
-      <div class="col-lg-4 arrow">
-        <i class="fa fa-arrow-right fa-2x"></i>
-        <div>{{_ "apiBackends_HostRewrite"}}</div>
+      <legend>{{_ "apiBackends_Matching_Title"}}</legend>
+      <span class="help-block">{{_ "apiBackends_Matching_Title_Help"}}</span>
+      {{>showHelp 'url_matches'}}
+      {{> afQuickField name='url_matches'}}
+      <legend data-toggle="collapse" data-target="#global-request-block" aria-expanded="false"><i class="fa fa-chevron-right"></i> {{_ "apiBackends_GlobalRequestSettings_Title"}}</legend>
+      <div id="global-request-block" class="collapse in">
+        {{>showHelp 'append_query_string'}}
+        {{> afQuickField name='append_query_string'}}
+        {{>showHelp 'set_headers'}}
+        {{> afQuickField name='set_headers'}}
+        {{>showHelp 'http_basic_auth'}}
+        {{> afQuickField name='http_basic_auth'}}
+        {{>showHelp 'require_https'}}
+        {{> afQuickField name='require_https' options="allowed"}}
+        {{>showHelp 'api_key_verification_level'}}
+        {{> afQuickField name='api_key_verification_level' options="allowed"}}
+        {{> afQuickField name='required_roles'}}
+        {{> afQuickField name='pass_api_key_header'}}
+        {{> afQuickField name='pass_api_key_query_param'}}
+        {{> afQuickField name='rate_limit_mode' options="allowed"}}
+        {{#if afFieldValueIs name='rate_limit_mode' value="Custom rate limits"}}
+        {{> afQuickField name='custom_rate_limits'}}
+        {{/if}}
+        {{>showHelp 'settings'}}
+        {{> afQuickField name='settings'}}
       </div>
-      <div class="col-lg-4">
-        {{>showHelp 'backend_host'}}
-        {{> afQuickField name='backend_host'}}
+      <legend data-toggle="collapse" data-target="#advanced-rewriting-block" aria-expanded="false"><i class="fa fa-chevron-right"></i> {{_ "apiBackends_AdvancedRequestsRewriting"}}</legend>
+      <div id="advanced-rewriting-block" class="collapse in">
+        <span class="help-block">{{_ "apiBackends_AdvancedRequestsRewriting_Help"}}</span>
+        {{> afQuickField name='rewrite'}}
       </div>
+      <legend data-toggle="collapse" data-target="#advanced-block" aria-expanded="false"><i class="fa fa-chevron-right"></i> {{_ "apiBackends_AdvancedSettings"}}</legend>
+      <div id="advanced-block" class="collapse in">
+        {{>showHelp 'balance_algorithm'}}
+        {{> afQuickField name='balance_algorithm' options="allowed"}}
+        {{> afQuickField name='error_templates'}}
+      </div>
+      <div id="form-buttons">
+        <button type="submit" class="btn btn-lg btn-success" id="add-apibackends">{{_ "apiBackends_Submit"}}</button>
+      </div>
+      {{/autoForm}}
     </div>
-    <legend>{{_ "apiBackends_Matching_Title"}}</legend>
-    <span class="help-block">{{_ "apiBackends_Matching_Title_Help"}}</span>
-    {{>showHelp 'url_matches'}}
-    {{> afQuickField name='url_matches'}}
-    <legend data-toggle="collapse" data-target="#global-request-block" aria-expanded="false"><i class="fa fa-chevron-right"></i> {{_ "apiBackends_GlobalRequestSettings_Title"}}</legend>
-    <div id="global-request-block" class="collapse in">
-      {{>showHelp 'append_query_string'}}
-      {{> afQuickField name='append_query_string'}}
-      {{>showHelp 'set_headers'}}
-      {{> afQuickField name='set_headers'}}
-      {{>showHelp 'http_basic_auth'}}
-      {{> afQuickField name='http_basic_auth'}}
-      {{>showHelp 'require_https'}}
-      {{> afQuickField name='require_https' options="allowed"}}
-      {{>showHelp 'api_key_verification_level'}}
-      {{> afQuickField name='api_key_verification_level' options="allowed"}}
-      {{> afQuickField name='required_roles'}}
-      {{> afQuickField name='pass_api_key_header'}}
-      {{> afQuickField name='pass_api_key_query_param'}}
-      {{> afQuickField name='rate_limit_mode' options="allowed"}}
-      {{#if afFieldValueIs name='rate_limit_mode' value="Custom rate limits"}}
-      {{> afQuickField name='custom_rate_limits'}}
-      {{/if}}
-      {{>showHelp 'settings'}}
-      {{> afQuickField name='settings'}}
-    </div>
-    <legend data-toggle="collapse" data-target="#advanced-rewriting-block" aria-expanded="false"><i class="fa fa-chevron-right"></i> {{_ "apiBackends_AdvancedRequestsRewriting"}}</legend>
-    <div id="advanced-rewriting-block" class="collapse in">
-      <span class="help-block">{{_ "apiBackends_AdvancedRequestsRewriting_Help"}}</span>
-      {{> afQuickField name='rewrite'}}
-    </div>
-    <legend data-toggle="collapse" data-target="#advanced-block" aria-expanded="false"><i class="fa fa-chevron-right"></i> {{_ "apiBackends_AdvancedSettings"}}</legend>
-    <div id="advanced-block" class="collapse in">
-      {{>showHelp 'balance_algorithm'}}
-      {{> afQuickField name='balance_algorithm' options="allowed"}}
-      {{> afQuickField name='error_templates'}}
-    </div>
-    <div id="form-buttons">
-      <button type="submit" class="btn btn-lg btn-success" id="add-apibackends">{{_ "apiBackends_Submit"}}</button>
-    </div>
-    {{/autoForm}}
   </div>
 </template>
diff --git a/apis/client/export/export.html b/apis/client/export/export.html
index 132dd20f48..b09e613521 100644
--- a/apis/client/export/export.html
+++ b/apis/client/export/export.html
@@ -2,7 +2,6 @@
   <div class="panel panel-default">
     <div class="panel-heading">
       <h2 class="panel-title">
-        <i class="fa fa-cloud-download"></i>
         {{_ "view_ApiBackend_Export_Title"}}
       </h2>
     </div>
diff --git a/apis/client/manage/manage.html b/apis/client/manage/manage.html
index 17ba3eb389..69483a8a75 100644
--- a/apis/client/manage/manage.html
+++ b/apis/client/manage/manage.html
@@ -1,84 +1,86 @@
 <template name='manageApiBackends'>
-  <h1 class="page-heading">{{_ "manage_ApiBackends_Title"}}</h1>
-  {{# each managedApis }}
-  <div class="panel panel-default managed-apis">
-    <div class="panel-heading">
-      <h2 class="panel-title">
-        {{ name }}
-        <div class="btn-group pull-right">
-          <a
-             href="{{ pathFor route='viewApiBackend' }}"
-             class="btn btn-success">
-            {{_ "manage_ApiBackends_View"}}
-          </a>
-          <a
-             href="{{ pathFor route='editApiBackend' }}"
-             class="btn btn-warning">
-            {{_ "manage_ApiBackends_Edit"}}
-          </a>
-          <a
-             href="#"
-             class="btn btn-danger"
-             id="deleteModal">
-            {{_ "manageApiBackends_deleteButton"}}
-          </a>
-        </div>
-        <div class="clearfix"></div>
-      </h2>
-    </div>
-    <div class="panel-body">
-      <div class="col-md-4">
-        <div class="panel panel-default">
-          <div class="panel-heading">
+  <div class="container">
+    <h1 class="page-main-title">{{_ "manage_ApiBackends_Title"}}</h1>
+    {{# each managedApis }}
+    <div class="panel panel-default managed-apis">
+      <div class="panel-heading">
+        <h2 class="panel-title">
+          {{ name }}
+          <div class="btn-group pull-right">
             <a
-               data-toggle="collapse"
-               data-target="#api-id-{{ _id }}-backend"
-               class="api-panel-title">
-              <h3 class="panel-title">
-                {{ backend_host }} ({{ backend_protocol }})
-              </h3>
+               href="{{ pathFor route='viewApiBackend' }}"
+               class="btn btn-success">
+              {{_ "manage_ApiBackends_View"}}
+            </a>
+            <a
+               href="{{ pathFor route='editApiBackend' }}"
+               class="btn btn-warning">
+              {{_ "manage_ApiBackends_Edit"}}
             </a>
-          </div><!-- /.panel-heading -->
-          <div id="api-id-{{ _id }}-backend" class="panel-body collapse">
-            <h4>Servers</h4>
-            <ul class="list-group">
-              {{# each servers }}
-              <li class="list-group-item">{{ host }} : {{ port }}</li>
-              {{/ each }}
-            </ul>
-          </div><!-- /.panel-body -->
-        </div><!-- /.panel -->
-      </div>
-      <div class="col-md-4 arrow text-center">
-        <i class="fa fa-arrow-right fa-2x"></i>
-        <span>{{_ "manage_ApiBackends_Rewrite"}}</span>
-      </div>
-      <div class="col-md-4">
-        <div class="panel panel-default">
-          <div class="panel-heading">
             <a
-               data-toggle="collapse"
-               data-target="#api-id-{{ _id }}-frontend"
-               class="api-panel-title">
-              <h3 class="panel-title">
-                {{ frontend_host }}
-              </h3>
+               href="#"
+               class="btn btn-danger"
+               id="deleteModal">
+              {{_ "manageApiBackends_deleteButton"}}
             </a>
-          </div><!-- /.panel-heading -->
-          <div id="api-id-{{ _id }}-frontend" class="panel-body collapse">
-            <h4>{{_ "manage_ApiBackends_Matches"}}</h4>
-            <ul class="list-group">
-              {{# each url_matches }}
-              <li class="list-group-item">
-                <span>{{_ "manage_ApiBackends_Backend"}} {{ backend_prefix }}</span><br />
-                <span>{{_ "manage_ApiBackends_Frontend"}} {{ frontend_prefix }}</span>
-              </li>
-              {{/ each }}
-            </ul>
-          </div><!-- /.panel-body -->
-        </div><!-- /.panel -->
+          </div>
+          <div class="clearfix"></div>
+        </h2>
+      </div>
+      <div class="panel-body">
+        <div class="col-md-4">
+          <div class="panel panel-default">
+            <div class="panel-heading">
+              <a
+                 data-toggle="collapse"
+                 data-target="#api-id-{{ _id }}-backend"
+                 class="api-panel-title">
+                <h3 class="panel-title">
+                  {{ backend_host }} ({{ backend_protocol }})
+                </h3>
+              </a>
+            </div><!-- /.panel-heading -->
+            <div id="api-id-{{ _id }}-backend" class="panel-body collapse">
+              <h4>Servers</h4>
+              <ul class="list-group">
+                {{# each servers }}
+                <li class="list-group-item">{{ host }} : {{ port }}</li>
+                {{/ each }}
+              </ul>
+            </div><!-- /.panel-body -->
+          </div><!-- /.panel -->
+        </div>
+        <div class="col-md-4 arrow text-center">
+          <i class="fa fa-arrow-right fa-2x"></i>
+          <span>{{_ "manage_ApiBackends_Rewrite"}}</span>
+        </div>
+        <div class="col-md-4">
+          <div class="panel panel-default">
+            <div class="panel-heading">
+              <a
+                 data-toggle="collapse"
+                 data-target="#api-id-{{ _id }}-frontend"
+                 class="api-panel-title">
+                <h3 class="panel-title">
+                  {{ frontend_host }}
+                </h3>
+              </a>
+            </div><!-- /.panel-heading -->
+            <div id="api-id-{{ _id }}-frontend" class="panel-body collapse">
+              <h4>{{_ "manage_ApiBackends_Matches"}}</h4>
+              <ul class="list-group">
+                {{# each url_matches }}
+                <li class="list-group-item">
+                  <span>{{_ "manage_ApiBackends_Backend"}} {{ backend_prefix }}</span><br />
+                  <span>{{_ "manage_ApiBackends_Frontend"}} {{ frontend_prefix }}</span>
+                </li>
+                {{/ each }}
+              </ul>
+            </div><!-- /.panel-body -->
+          </div><!-- /.panel -->
+        </div>
       </div>
     </div>
+    {{/ each }}
   </div>
-  {{/ each }}
 </template>
diff --git a/apis/client/view/backlog/backlog.html b/apis/client/view/backlog/backlog.html
index af01489c38..177b92ae69 100644
--- a/apis/client/view/backlog/backlog.html
+++ b/apis/client/view/backlog/backlog.html
@@ -3,7 +3,7 @@
     <div class="panel-heading">
       {{#if currentUserCanEditBacklog }}
           <button type="button"
-                  class="btn btn-info btn-sm pull-right"
+                  class="btn btn-info btn-xs pull-right"
                   data-toggle="modal"
                   data-target="#apiBacklogFormModal"
                   data-backdrop="static"
@@ -13,7 +13,6 @@
           </button>
       {{/if}}
       <h2 class="panel-title clearfix">
-        <i class="fa fa-check-square-o"></i>
         {{_ "apiBacklog_mainTitle"}}
       </h2>
     </div>
diff --git a/apis/client/view/details/details.html b/apis/client/view/details/details.html
index 91d15bca6b..2937dd3fbe 100644
--- a/apis/client/view/details/details.html
+++ b/apis/client/view/details/details.html
@@ -1,34 +1,38 @@
 <template name="viewApiBackendDetails">
   <div class="panel panel-default">
     <div class="panel-heading">
-      {{# if apiBackend.currentUserCanEdit }}
-      <div class="btn-group pull-right">
-        <a
-           href="#"
-           class="btn btn-danger"
-           id="deleteModal">
-          {{_ "viewApiBackendDetails_deleteButton"}}
-        </a>
-        <a
-           href="{{ pathFor 'editApiBackend' _id=apiBackend._id }}"
-           class="btn btn-info">
-          <i class="fa fa-cog"></i>
-          {{_ "view_ApiBackend_Details_editButtonText" }}
-        </a>
-      </div>
-      {{/ if }}
       <h2 class="panel-title clearfix">
-        <i class="fa fa-info-circle"></i>
         {{_ "view_ApiBackend_Details_Title"}}
       </h2>
     </div>
     <div class="panel-body">
       <div class="row">
-        <div class="col-md-6">
-          {{> viewApiBackendServers apiBackend=apiBackend }}
-        </div>
-        <div class="col-md-6">
-          {{> viewApiBackendUrlMatchers apiBackend=apiBackend }}
+        <div class="col-lg-12 api-details-block">
+          {{ # if apiBackend.description }}
+          <h3>Description</h3>
+          <p>
+            {{ apiBackend.description }}
+          </p>
+          <hr class="panel-hr" />
+          {{ / if }}
+          <h3>Base URL</h3>
+          <div class="input-group">
+            <input
+                   type="text"
+                   class="form-control"
+                   id="base-url"
+                   value="{{ apiUmbrellaBaseUrl }}">
+            <span class="input-group-btn">
+              <button
+                      class="btn btn-default"
+                      id="copyBaseUrl"
+                      type="button"
+                      data-original-title="Copied!"
+                      data-clipboard-target="#base-url">
+                <i class="fa fa-clipboard" alt="Copy to clipboard"></i>
+              </button>
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/apis/client/view/details/details.js b/apis/client/view/details/details.js
index 144615bf3e..966f347f6d 100644
--- a/apis/client/view/details/details.js
+++ b/apis/client/view/details/details.js
@@ -1,14 +1,57 @@
-import { ApiBackends } from '/apis/collection/backend';
-
-Template.viewApiBackendDetails.events({
-  // event handler to execute when delete API button is clicked
-  "click #deleteModal": function() {
-    var apiBackendId = this.apiBackend;
-    /* As information to the delete modal, pass in the API backend document.
-    This is needed so that the API name can be shown in the dialog,
-    as well for other information needed for API removal, such as ID*/
-    Modal.show('deleteApiBackendConfirmation', function() {
-        return ApiBackends.findOne(apiBackendId);
-    });
+import Clipboard from "clipboard";
+
+Template.viewApiBackendDetails.onCreated(function () {
+
+  // Get reference to template instance
+  var instance = this;
+
+  // Create variable to hold API Umbrella base URL
+  instance.apiUmbrellaBaseUrl = new ReactiveVar();
+
+  // Get API Umbrella base URL from server
+  Meteor.call("getApiUmbrellaBaseUrl", function (error, apiUmbrellaBaseUrl) {
+    // Set reactive variable to contain API Umbrella base URL
+    instance.apiUmbrellaBaseUrl.set(apiUmbrellaBaseUrl);
+  });
+});
+
+Template.viewApiBackendDetails.helpers({
+  apiUmbrellaBaseUrl: function () {
+
+    // Get reference to template instance
+    var instance = Template.instance();
+
+    // Fetch API Backend's frontend prefix value
+    var apiBackendFrontendPrefix = instance.data.apiBackend.url_matches[0].frontend_prefix;
+
+    // Get reference to API Umbrella base URL & construct a URI object
+    var apiUmbrellaBaseUrl = new URI(instance.apiUmbrellaBaseUrl.get());
+
+    // Append a frontend prefix to a API Umbrella base URL
+    apiUmbrellaBaseUrl.segment(0, apiBackendFrontendPrefix);
+
+    // Clean up URL & remove extra slashes
+    apiUmbrellaBaseUrl.normalize();
+
+    return apiUmbrellaBaseUrl;
   }
 });
+
+Template.viewApiBackendDetails.onRendered(function () {
+
+  // Initialize Clipboard copy button
+  let copyButton = new Clipboard("#copyBaseUrl");
+
+  // Tooltip position
+  $('#copyBaseUrl').tooltip({
+    trigger: 'click',
+    placement: 'bottom'
+  });
+
+  // Tell the user when copy is successful
+  copyButton.on("success", function () {
+    $('#copyBaseUrl').tooltip('hide')
+      .attr('data-original-title', 'Copied!')
+      .tooltip('show');
+  });
+});
diff --git a/apis/client/view/details/matchers/matchers.html b/apis/client/view/details/matchers/matchers.html
deleted file mode 100644
index 9d7ceef8a3..0000000000
--- a/apis/client/view/details/matchers/matchers.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<template name="viewApiBackendUrlMatchers">
-  <div class="col-xs-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h2 class="panel-title">{{_ "view_ApiBackend_Matchers"}}</h2>
-      </div>
-      <div class="panel-body">
-        <div class="row">
-          {{#each apiBackend.url_matches}}
-          <div class="col-lg-12">
-            <ul class="list-group">
-              <li class="list-group-item">
-                <span class="label label-primary">
-                  {{_ "view_ApiBackend_Backend_Prefix"}}
-                </span>
-                &nbsp;{{ backend_prefix }}
-              </li>
-              <li class="list-group-item">
-                <span class="label label-primary">
-                  {{_ "view_ApiBackend_Frontend_Prefix"}}
-                </span>
-                &nbsp;{{ frontend_prefix }}
-              </li>
-            </ul>
-          </div>
-          {{/each}}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/apis/client/view/details/servers/servers.html b/apis/client/view/details/servers/servers.html
deleted file mode 100644
index 0595d24e1c..0000000000
--- a/apis/client/view/details/servers/servers.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<template name="viewApiBackendServers">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h2 class="panel-title">{{_ "view_ApiBackend_Servers"}}</h2>
-    </div>
-    <div class="panel-body">
-      <div id="api-backend-servers" class="form-group">
-        <div id="servers-api-backend" class="input-group">
-          <span class="input-group-addon primary">
-            {{_ "view_ApiBackend_Backend"}}
-          </span>
-          <input
-            id="frontend-text"
-            class="form-control"
-            value="{{apiBackend.backend_host}}"
-            title="{{apiBackend.backend_host}}"
-            readonly="readonly"
-          >
-          <span class="input-group-addon {{ serverBackendProtocolClass }}">
-            {{ apiBackend.backend_protocol }}
-          </span>
-        </div>
-        <div id="servers-api-frontend" class="input-group">
-          <span class="input-group-addon primary">
-            {{_ "view_ApiBackend_Frontend"}}
-          </span>
-          <input
-            id="frontend-text"
-            class="form-control"
-            value="{{apiBackend.frontend_host}}"
-            title="{{apiBackend.frontend_host}}"
-            readonly="readonly"
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/apis/client/view/details/servers/servers.js b/apis/client/view/details/servers/servers.js
deleted file mode 100644
index 73ddea55c0..0000000000
--- a/apis/client/view/details/servers/servers.js
+++ /dev/null
@@ -1,13 +0,0 @@
-Template.viewApiBackendServers.helpers({
-  "serverBackendProtocolClass": function () {
-    // Get API Backend protocol
-    var apiBackendProtocol = this.apiBackend.backend_protocol;
-
-    // Change the class to 'warning' if protocol is HTTP; 'success' if HTTPS
-    if (apiBackendProtocol === "http") {
-      return "warning";
-    } else if (apiBackendProtocol === "https") {
-      return "success";
-    }
-  }
-});
diff --git a/apis/client/view/details/servers/servers.less b/apis/client/view/details/servers/servers.less
deleted file mode 100644
index dc5bd61149..0000000000
--- a/apis/client/view/details/servers/servers.less
+++ /dev/null
@@ -1,40 +0,0 @@
-/* Bootstrap */
-@import "/core/client/style/bootstrap-variables.less";
-
-#frontend-text {
-  background-color: #fff;
-}
-
-#servers-api-backend {
-  margin-bottom: 1em;
-}
-
-.input-group-addon.primary {
-  color: rgb(255, 255, 255);
-  background-color: @brand-primary;
-  border-color: @brand-primary;
-}
-
-.input-group-addon.success {
-  color: rgb(255, 255, 255);
-  background-color: @brand-success;
-  border-color: @brand-success;
-}
-
-.input-group-addon.info {
-  color: rgb(255, 255, 255);
-  background-color: @brand-info;
-  border-color: @brand-info;
-}
-
-.input-group-addon.warning {
-  color: rgb(255, 255, 255);
-  background-color: @brand-warning;
-  border-color: @brand-warning;
-}
-
-.input-group-addon.danger {
-  color: rgb(255, 255, 255);
-  background-color: @brand-danger;
-  border-color: @brand-danger;
-}
diff --git a/apis/client/view/feedback/feedback_form/feedback_form.html b/apis/client/view/feedback/feedback_form/feedback_form.html
index 18ed61f56b..5815c78d97 100644
--- a/apis/client/view/feedback/feedback_form/feedback_form.html
+++ b/apis/client/view/feedback/feedback_form/feedback_form.html
@@ -1,5 +1,5 @@
 <template name="feedbackForm">
-  <button type="button" class="btn btn-info btn-sm pull-right feedback-form-button" data-toggle="modal" data-target="#feedbackForm" data-backdrop="static" data-keyboard="false"><i class="fa fa-comments-o"></i>&nbsp;{{_ "feedback_feedbackForm_button"}}</button>
+  <button type="button" class="btn btn-info btn-xs pull-right feedback-form-button" data-toggle="modal" data-target="#feedbackForm" data-backdrop="static" data-keyboard="false"><i class="fa fa-comments-o"></i>&nbsp;{{_ "feedback_feedbackForm_button"}}</button>
   <div class="modal fade" id="feedbackForm" tabindex="-1" role="dialog" aria-labelledby="feedbackFormLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
diff --git a/apis/client/view/feedback/feedback_list/feedback_list.html b/apis/client/view/feedback/feedback_list/feedback_list.html
index 6d4b1208c6..5f231f439a 100644
--- a/apis/client/view/feedback/feedback_list/feedback_list.html
+++ b/apis/client/view/feedback/feedback_list/feedback_list.html
@@ -4,27 +4,24 @@
       {{#if currentUser}}
         {{> feedbackForm }}
       {{/ if }}
-      <h1 class="panel-title clearfix">
-        <i class="fa fa-comments-o"></i>
+      <h2 class="panel-title clearfix">
         {{_ "feedback_main_title"}}
-      </h1>
+      </h2>
     </div>
     <div class="panel-body">
-      <div class="row">
-        {{#if haveFeedback}}
+      {{#if haveFeedback}}
         <div class="tab-content">
           <div class="tab-pane fade in active" id="home">
             <div class="list-group">
               {{#each userFeedback}}
-              {{> singleFeedback }}
+                {{> singleFeedback }}
               {{/each}}
             </div>
           </div>
         </div>
-        {{else}}
-        <p>{{_ "feedback_no_feedback"}}</p>
-        {{/if}}
-      </div>
+      {{else}}
+        <i>{{_ "feedback_no_feedback"}}</i>
+      {{/if}}
     </div>
   </div>
 </template>
diff --git a/apis/client/view/header/header.html b/apis/client/view/header/header.html
new file mode 100644
index 0000000000..121744497c
--- /dev/null
+++ b/apis/client/view/header/header.html
@@ -0,0 +1,85 @@
+<template name="viewApiBackendPageHeader">
+  <div class="page-head-topblock">
+    <div class="container">
+      <div class="page-head-infoblock">
+        {{> viewApiLogo }}
+        <h1 class="api-name">
+          {{ apiBackend.name }}
+          {{> viewApiBackendStatus apiBackend=apiBackend width="0.4" }}
+        </h1>
+        <ul class="list-inline view-api-meta-details">
+          <li>
+            <i class="fa fa-user"></i>
+            {{ apiBackend.getApiManagersByName }}
+          </li>
+        </ul>
+      </div>
+      <div class="page-head-starsblock pull-right">
+        {{# if currentUser }}
+        {{> favourite apiBackend=apiBackend }}
+        {{else}}
+        <a href="#" class="star-button">
+          <div
+               class="api-card-bookmark"
+               data-toggle="tooltip"
+               data-placement="bottom"
+               title="{{_ 'catalogue-Bookmark-Tooltip_NonUser'}}">
+            <span class="api-card-bookmark-number">{{ apiBackend.bookmarkCount }}</span>
+            <i class="fa fa-star bookmark-default"></i>
+          </div>
+        </a>
+        {{/if}}
+      </div>
+      <div class="view-api-navigation">
+        <ul class="nav nav-tabs">
+          <li class="active">
+            <a href="#api-backend-details" data-toggle="tab">
+              <i class="fa fa-info-circle"></i>
+              {{_ "viewApiBackendNavigationMenu_details" }}
+            </a>
+          </li>
+          <li>
+            <a href="#api-backend-documentation" data-toggle="tab">
+              <i class="fa fa-file-text"></i>
+              {{_ "viewApiBackendNavigationMenu_documentation" }}
+            </a>
+          </li>
+          <li>
+            <a href="#api-backend-metadata" data-toggle="tab">
+              <i class="fa fa-book"></i>
+              {{_ "viewApiBackendNavigationMenu_metadata" }}
+            </a>
+          </li>
+          <li>
+            <a href="#api-backend-feedback" data-toggle="tab">
+              <i class="fa fa-comments-o"></i>
+              {{_ "viewApiBackendNavigationMenu_feedback" }}
+            </a>
+          </li>
+          <li>
+            <a href="#api-backend-backlog" data-toggle="tab">
+              <i class="fa fa-check-square-o"></i>
+              {{_ "viewApiBackendNavigationMenu_backlog" }}
+            </a>
+          </li>
+          <li>
+            <a href="#api-backend-export" data-toggle="tab">
+              <i class="fa fa-cloud-download"></i>
+              {{_ "viewApiBackendNavigationMenu_export" }}
+            </a>
+          </li>
+          {{ # if currentUser }}
+          {{# if apiBackend.currentUserCanEdit }}
+          <li>
+            <a href="#api-backend-settings" data-toggle="tab">
+              <i class="fa fa-cog"></i>
+              {{_ "viewApiBackendNavigationMenu_settings" }}
+            </a>
+          </li>
+          {{ / if }}
+          {{ / if }}
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apis/client/view/header/header.less b/apis/client/view/header/header.less
new file mode 100644
index 0000000000..9d657b08b1
--- /dev/null
+++ b/apis/client/view/header/header.less
@@ -0,0 +1,118 @@
+/* Bootstrap */
+@import "/core/client/style/bootstrap-variables.less";
+
+.page-head-topblock {
+  position: relative;
+  bottom: 1.7em;
+  padding-top: 1.7em;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  color: #666;
+  background-color: #fafafa;
+  border-bottom: 1px solid #eee;
+
+  .api-name {
+    font-size: 1.7em;
+    font-weight: 600;
+    padding-left: 0.5em;
+    margin-left: 2em;
+    margin-bottom: 0;
+    margin-top: 0.1em;
+  }
+
+  .view-api-meta-details {
+    padding-left: 0.5em;
+    margin-left: 3.4em;
+    margin-top: 0.2em;
+  }
+}
+
+.page-head-infoblock {
+  clear: both;
+  display: inline-block;
+}
+
+.nav-tabs > li {
+  margin-bottom: -2px;
+}
+
+.page-head-starsblock {
+  font-size: 1em;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  a {
+    color: @gray;
+    text-decoration: none;
+    &:hover { text-decoration: none; color: @gray; }
+    &:focus { text-decoration: none; color: @gray; }
+    &:active { text-decoration: none; color: @gray; }
+    &:visited { text-decoration: none; color: @gray; }
+  }
+
+  .star-button {
+    background-color: #f4f4f4;
+    border-right: 1px solid #ddd;
+    display: inline-block;
+    font-weight: bold;
+    line-height: 0.9em;
+    padding-left: 0.9em;
+    padding-right: 0.9em;
+    padding-bottom: 0.5em;
+    padding-top: 0.5em;
+    text-decoration: none;
+    &:hover { text-decoration: none; color: darken(@gray, 10%); }
+    &:focus { text-decoration: none; color: darken(@gray, 10%); }
+    &:active { text-decoration: none; color: darken(@gray, 10%); }
+    &:visited { text-decoration: none; color: darken(@gray, 10%); }
+  }
+
+  .star-counter {
+    padding-left: 0.4em;
+    padding-right: 0.6em;
+    padding-bottom: 0.2em;
+    padding-top: 0.2em;
+    color: #333;
+    background-color: #fff;
+  }
+}
+
+.view-api-navigation {
+  position: relative;
+  top: 2px;
+  margin-top: 0.6em;
+  clear: both;
+
+  .nav-tabs {
+    border-bottom: none;
+  }
+
+  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+    font-weight: bold;
+    line-height: initial;
+    color: #333;
+    background-color: #fff;
+    border-top-color: @brand-primary;
+    border-top-width: 3px;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    border-right-color: #EEE;
+    border-left-color: #EEE;
+  }
+
+  .nav-tabs > li {
+    border: 0px solid transparent;
+    border-width: 3px 1px 1px;
+    border-radius: 3px 3px 0 0;
+  }
+
+  .nav-tabs > li > a {
+    color: #555;
+  }
+
+  .nav > li > a:hover, .nav > li > a:focus {
+    text-decoration: none;
+    background-color: transparent;
+    color: #333;
+    border-color: transparent;
+  }
+}
diff --git a/apis/client/view/heading/heading.html b/apis/client/view/heading/heading.html
deleted file mode 100644
index 8f88942ef1..0000000000
--- a/apis/client/view/heading/heading.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<template name="viewApiBackendPageHeading">
-  <div class="page-heading">
-    <div class="btn-group pull-right" role="group" aria-label="...">
-      {{ # if currentUser }}
-        {{ # if isInRole 'admin' }}
-          {{> flagApiButton apiBackend=apiBackend }}
-        {{ / if }}
-      {{ / if }}
-      {{> apiBackendsUsageInstructionsButton }}
-    </div>
-    <h1 class="page-title">
-      {{> viewApiLogo }}
-      {{ apiBackend.name }}
-      {{> viewApiBackendStatus apiBackend=apiBackend width="0.4"  }}
-    </h1>
-    {{> apiBackendUsageInstructions }}
-  </div>
-</template>
diff --git a/apis/client/view/navigation/navigation.html b/apis/client/view/navigation/navigation.html
deleted file mode 100644
index da5d07a61c..0000000000
--- a/apis/client/view/navigation/navigation.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<template name="viewApiBackendNavigationMenu">
-  <div class="col-xs-12">
-    <ul class="nav nav-pills">
-      <li class="active">
-        <a href="#api-backend-details" data-toggle="pill">
-          <i class="fa fa-info-circle"></i>
-          {{_ "viewApiBackendNavigationMenu_details" }}
-        </a>
-      </li>
-      <li>
-        <a href="#api-backend-documentation" data-toggle="pill">
-          <i class="fa fa-file-text"></i>
-          {{_ "viewApiBackendNavigationMenu_documentation" }}
-        </a>
-      </li>
-      <li>
-        <a href="#api-backend-metadata" data-toggle="pill">
-          <i class="fa fa-book"></i>
-          {{_ "viewApiBackendNavigationMenu_metadata" }}
-        </a>
-      </li>
-      <li>
-        <a href="#api-backend-feedback" data-toggle="pill">
-          <i class="fa fa-comments-o"></i>
-          {{_ "viewApiBackendNavigationMenu_feedback" }}
-        </a>
-      </li>
-      <li>
-        <a href="#api-backend-backlog" data-toggle="pill">
-          <i class="fa fa-check-square-o"></i>
-          {{_ "viewApiBackendNavigationMenu_backlog" }}
-        </a>
-      </li>
-      <li>
-        <a href="#api-backend-export" data-toggle="pill">
-          <i class="fa fa-cloud-download"></i>
-          {{_ "viewApiBackendNavigationMenu_export" }}
-        </a>
-      </li>
-    </ul>
-    <br /> <!-- TODO: add proper spacing to the pill navigarion -->
-  </div>
-</template>
diff --git a/apis/client/view/settings/settings.html b/apis/client/view/settings/settings.html
new file mode 100644
index 0000000000..94d922f220
--- /dev/null
+++ b/apis/client/view/settings/settings.html
@@ -0,0 +1,61 @@
+<template name="viewApiBackendSettings">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h2 class="panel-title">
+        {{_ "viewApiBackendSettings_panelTitleAbout" }}
+      </h2>
+    </div>
+    <div class="panel-body">
+      <h3>{{_ "editApiBackendForm-uploadLogo" }}</h3>
+      <p>
+        {{_ "viewApiBackendSettings_uploadLogoText" }}
+      </p>
+      {{> uploadApiLogo apiBackend=apiBackend }}
+      <hr class="panel-hr" />
+      {{#autoForm collection=formCollection doc=apiBackend id="apiBackendForm" type="update"}}
+      {{> afQuickField name='name'}}
+      {{> afQuickField name='description'}}
+      <div id="form-buttons">
+        <button type="submit" class="btn btn-success" id="save-settings">Save</button>
+      </div>
+      {{/autoForm}}
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h2 class="panel-title">
+        {{_ "viewApiBackendSettings_panelTitleEdit" }}
+      </h2>
+    </div>
+    <div class="panel-body">
+      <h3>{{_ "viewApiBackendSettings_editApiSettingsTitle" }}</h3>
+      <p>
+        {{_ "viewApiBackendSettings_editApiSettingsText" }}
+      </p>
+      <a
+         href="{{ pathFor 'editApiBackend' _id=apiBackend._id }}"
+         class="btn btn-primary">
+        {{_ "view_ApiBackend_Details_editButtonText" }}
+      </a>
+    </div>
+  </div>
+  <div class="panel panel-danger">
+    <div class="panel-heading">
+      <h2 class="panel-title">
+        {{_ "viewApiBackendSettings_panelTitleManage" }}
+      </h2>
+    </div>
+    <div class="panel-body">
+      <h3>{{_ "viewApiBackendSettings_deleteApiTitle" }}</h3>
+      <p>
+        {{_ "viewApiBackendSettings_deleteApiText" }}
+      </p>
+      <a
+         href="#"
+         class="btn btn-danger"
+         id="deleteModal">
+        {{_ "viewApiBackendDetails_deleteButton"}}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/apis/client/view/settings/settings.js b/apis/client/view/settings/settings.js
new file mode 100644
index 0000000000..37d50fe824
--- /dev/null
+++ b/apis/client/view/settings/settings.js
@@ -0,0 +1,20 @@
+import { ApiBackends } from '/apis/collection/backend';
+
+Template.viewApiBackendSettings.events({
+  // event handler to execute when delete API button is clicked
+  "click #deleteModal": function() {
+    var apiBackendId = this.apiBackend;
+    /* As information to the delete modal, pass in the API backend document.
+    This is needed so that the API name can be shown in the dialog,
+    as well for other information needed for API removal, such as ID*/
+    Modal.show('deleteApiBackendConfirmation', function() {
+        return ApiBackends.findOne(apiBackendId);
+    });
+  }
+});
+
+Template.viewApiBackendSettings.helpers({
+  formCollection() {
+    return ApiBackends;
+  }
+});
diff --git a/apis/client/view/settings/settings.less b/apis/client/view/settings/settings.less
new file mode 100644
index 0000000000..059693db09
--- /dev/null
+++ b/apis/client/view/settings/settings.less
@@ -0,0 +1,9 @@
+.panel-section {
+  margin-bottom: 1em;
+}
+
+.panel-hr {
+  margin: 1em 0;
+  border: 0;
+  border-bottom: 1px solid #ddd;
+}
diff --git a/apis/client/view/details/status/status.html b/apis/client/view/status/status.html
similarity index 100%
rename from apis/client/view/details/status/status.html
rename to apis/client/view/status/status.html
diff --git a/apis/client/view/details/status/status.js b/apis/client/view/status/status.js
similarity index 100%
rename from apis/client/view/details/status/status.js
rename to apis/client/view/status/status.js
diff --git a/apis/client/view/details/status/status.less b/apis/client/view/status/status.less
similarity index 100%
rename from apis/client/view/details/status/status.less
rename to apis/client/view/status/status.less
diff --git a/apis/client/view/usageInstructions/usageInstructions.html b/apis/client/view/usageInstructions/usageInstructions.html
deleted file mode 100644
index 78c6b462a8..0000000000
--- a/apis/client/view/usageInstructions/usageInstructions.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<template name="apiBackendUsageInstructions">
-  <div id="usage-instructions" class="collapse alert alert-info">
-    <i class="fa fa-info-circle fa-5x pull-left"></i>
-      <p>
-        <h4>{{_ "apiBackend_Usage_Instructions_Headline"}}</h4>
-        <em>{{ apiUmbrellaBaseUrl }}</em>
-      </p>
-      {{#unless currentUser}}
-        <p>
-          <strong>
-              {{_ "apiBackend_Usage_Instructions_Note"}}
-          </strong>
-            {{_ "apiBackend_Usage_Instructions_Note_Text"}}
-            <a href="{{ pathFor route='profile' }}">{{_ "apiBackend_Usage_Instructions_Profile_Page_Link"}}</a>
-        </p>
-      {{/unless}}
-  </div>
-</template>
diff --git a/apis/client/view/usageInstructions/usageInstructions.js b/apis/client/view/usageInstructions/usageInstructions.js
deleted file mode 100644
index bc815f1fc6..0000000000
--- a/apis/client/view/usageInstructions/usageInstructions.js
+++ /dev/null
@@ -1,47 +0,0 @@
-Template.apiBackendUsageInstructions.created = function () {
-  // Get reference to template instance
-  var instance = this;
-
-  // Create variable to hold API Umbrella base URL
-  instance.apiUmbrellaBaseUrl = new ReactiveVar();
-
-  // Get API Umbrella base URL from server
-  Meteor.call("getApiUmbrellaBaseUrl", function (error, apiUmbrellaBaseUrl) {
-    // Set reactive variable to contain API Umbrella base URL
-    instance.apiUmbrellaBaseUrl.set(apiUmbrellaBaseUrl);
-  });
-};
-
-Template.apiBackendUsageInstructions.helpers({
-  apiUmbrellaBaseUrl: function () {
-
-    // Get reference to template instance
-    var instance = Template.instance();
-
-    // Fetch API Backend's frontend prefix value
-    var apiBackendFrontendPrefix = instance.data.apiBackend.url_matches[0].frontend_prefix;
-
-    // Get reference to API Umbrella base URL & construct a URI object
-    var apiUmbrellaBaseUrl = new URI(instance.apiUmbrellaBaseUrl.get());
-
-    // Append a frontend prefix to a API Umbrella base URL
-    apiUmbrellaBaseUrl.segment(0, apiBackendFrontendPrefix);
-
-    // Clean up URL & remove extra slashes
-    apiUmbrellaBaseUrl.normalize();
-
-    if (Meteor.user()) {
-
-      // Add api_key parameter to URL (https://host.com/frontend_prefix?api_key=your_api_key)
-      apiUmbrellaBaseUrl.addSearch('api_key', Meteor.user().profile.apiKey);
-
-    } else {
-
-      // Add plain text if user is not authorised
-      apiUmbrellaBaseUrl.addSearch('api_key', "your_api_key_here");
-
-    }
-
-    return apiUmbrellaBaseUrl;
-  }
-});
diff --git a/apis/client/view/usageInstructions/usageInstructionsButton.html b/apis/client/view/usageInstructions/usageInstructionsButton.html
deleted file mode 100644
index eb022af09b..0000000000
--- a/apis/client/view/usageInstructions/usageInstructionsButton.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<template name="apiBackendsUsageInstructionsButton">
-  <button
-    class="btn btn-info btn-sm"
-    data-toggle="collapse"
-    data-target="#usage-instructions">
-    <i class="fa fa-eye"></i>&nbsp;
-      View usage instructions
-  </button>
-</template>
diff --git a/apis/client/view/view_api_backend.html b/apis/client/view/view_api_backend.html
index ca9d3d67cd..dd601b289a 100644
--- a/apis/client/view/view_api_backend.html
+++ b/apis/client/view/view_api_backend.html
@@ -1,36 +1,41 @@
 <template name="viewApiBackend">
   {{#if Template.subscriptionsReady }}
-  {{> viewApiBackendPageHeading apiBackend=apiBackend }}
-  <div class="row">
-    {{> viewApiBackendNavigationMenu apiBackend=apiBackend }}
-  </div>
-
-  <div class="tab-content">
-    <div id="api-backend-details" class="tab-pane fade in active">
-      {{> viewApiBackendDetails apiBackend=apiBackend }}
-    </div> <!-- /api-backend-details -->
+  {{> viewApiBackendPageHeader apiBackend=apiBackend }}
+  <div class="container">
+    <div class="tab-content">
+      <div id="api-backend-details" class="tab-pane fade in active">
+        {{> viewApiBackendDetails apiBackend=apiBackend }}
+      </div> <!-- /api-backend-details -->
 
-    <div id="api-backend-documentation" class="tab-pane fade in">
-      {{> documentation apiBackend=apiBackend }}
-    </div> <!-- /api-backend-Documentation -->
+      <div id="api-backend-documentation" class="tab-pane fade">
+        {{> documentation apiBackend=apiBackend }}
+      </div> <!-- /api-backend-Documentation -->
 
-    <div id="api-backend-metadata" class="tab-pane fade in">
-      {{> viewApiBackendMetadata apiBackend=apiBackend }}
-    </div> <!-- /api-backend-metadata -->
+      <div id="api-backend-metadata" class="tab-pane fade">
+        {{> viewApiBackendMetadata apiBackend=apiBackend }}
+      </div> <!-- /api-backend-metadata -->
 
-    <div id="api-backend-feedback" class="tab-pane fade in">
-      {{> feedbackList apiBackend=apiBackend }}
-    </div> <!-- /api-backend-metadata -->
+      <div id="api-backend-feedback" class="tab-pane fade">
+        {{> feedbackList apiBackend=apiBackend }}
+      </div> <!-- /api-backend-metadata -->
 
-    <div id="api-backend-export" class="tab-pane fade in">
-      {{> viewApiBackendExport apiBackend=apiBackend }}
-    </div> <!-- /api-backend-export -->
+      <div id="api-backend-export" class="tab-pane fade">
+        {{> viewApiBackendExport apiBackend=apiBackend }}
+      </div> <!-- /api-backend-export -->
 
-    <div id="api-backend-backlog" class="tab-pane fade in">
-      {{> apiBacklog apiBackend=apiBackend backlogItems=backlogItems }}
-    </div> <!-- /api-backend-export -->
+      <div id="api-backend-backlog" class="tab-pane fade">
+        {{> apiBacklog apiBackend=apiBackend backlogItems=backlogItems }}
+      </div> <!-- /api-backend-export -->
 
-  </div> <!-- /tab-content -->
+      {{ # if currentUser }}
+        {{# if apiBackend.currentUserCanEdit }}
+          <div id="api-backend-settings" class="tab-pane fade">
+            {{> viewApiBackendSettings apiBackend=apiBackend }}
+          </div>
+        {{ / if }}
+      {{ / if }}
+    </div>
+  </div>
   {{ else }}
   {{> spinner }}
   {{/ if }}
diff --git a/apis/collection/helpers.js b/apis/collection/helpers.js
index 567e3627ef..9f779a0c0f 100644
--- a/apis/collection/helpers.js
+++ b/apis/collection/helpers.js
@@ -46,7 +46,7 @@ ApiBackends.helpers({
     // Get count of API Bookmarks where API Backend ID is in API Backend IDs array
     const apiBookmarkCount = ApiBookmarks.find({apiIds: apiBackendId}).count();
 
-    return apiBookmarkCount;
+    return apiBookmarkCount || '0';
   },
   setBookmarkCount () {
     // get average rating value
@@ -148,5 +148,8 @@ ApiBackends.helpers({
   relativeCreatedAt () {
     // Return relative updated_at
     return moment(this.created_at).fromNow();
+  },
+  description () {
+    const apiBackendIdDescription = this.description;
   }
 });
diff --git a/apis/logo/view/client/view.css b/apis/logo/view/client/view.css
index 9a52aeba10..27d233cf81 100644
--- a/apis/logo/view/client/view.css
+++ b/apis/logo/view/client/view.css
@@ -1,5 +1,6 @@
 .view-api-logo {
   width: 50px;
   height: 50px;
-  border-radius: 50%;
+  border-radius: 3px;
+  float: left;
 }
diff --git a/apis/server/methods/apiUmbrellaBaseUrl.js b/apis/server/methods/apiUmbrellaBaseUrl.js
new file mode 100644
index 0000000000..df8762ce16
--- /dev/null
+++ b/apis/server/methods/apiUmbrellaBaseUrl.js
@@ -0,0 +1,7 @@
+Meteor.methods({
+  'getApiUmbrellaBaseUrl': function () {
+    // Get base url from settings collection
+    var apiUmbrellaBaseUrl = Settings.findOne().apiUmbrella.host;
+    return apiUmbrellaBaseUrl;
+  }
+});
diff --git a/bookmarks/client/favourite.html b/bookmarks/client/favourite.html
index 7caa2513b6..2246844507 100644
--- a/bookmarks/client/favourite.html
+++ b/bookmarks/client/favourite.html
@@ -1,7 +1,20 @@
 <template name="favourite">
   {{ # if isBookmarked }}
-    <i class="fa fa-bookmark bookmark bookmarked"></i>
+  <a href="#" class="star-button bookmark bookmarked">
+    <i class="fa fa-star"></i>
+    {{ # unless catalogueView }}
+    &nbsp;Unstar
+    {{ / unless }}
+  </a>
   {{ else }}
-    <i class="fa fa-bookmark-o bookmark"></i>
+  <a href="#" class="star-button bookmark">
+    <i class="fa fa-star-o"></i>
+    {{ # unless catalogueView }}
+    &nbsp;Star
+    {{ / unless }}
+  </a>
   {{ / if }}
+  <span class="star-counter">
+    {{ apiBackend.bookmarkCount }}
+  </span>
 </template>
diff --git a/bookmarks/client/favourite.less b/bookmarks/client/favourite.less
index 7c7e53ca1b..80b4e1f200 100644
--- a/bookmarks/client/favourite.less
+++ b/bookmarks/client/favourite.less
@@ -10,5 +10,5 @@
 
 .bookmarked {
   cursor: pointer;
-  color: @brand-primary;
+  color: @gray;
 }
diff --git a/catalogue/client/catalogue.html b/catalogue/client/catalogue.html
index 7da979d365..d31d06d1ca 100644
--- a/catalogue/client/catalogue.html
+++ b/catalogue/client/catalogue.html
@@ -1,136 +1,138 @@
 <template name="catalogue">
-  <h3 class="catalogue-main-title">{{_ "catalogue_Title"}}</h3>
-  <nav id="catalogue-toolbar" class="navbar navbar-default">
-    <div class="container-fluid">
-      <!-- Brand and toggle get grouped for better mobile display -->
-      <div class="navbar-header">
-        <button
-                type="button"
-                class="navbar-toggle collapsed"
-                data-toggle="collapse"
-                data-target="#bs-example-navbar-collapse-1"
-                aria-expanded="false">
-          <span class="sr-only">{{_ "catalogue_toolbar_toggleCollapse" }}</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-      </div>
+  <div class="container">
+    <h1 class="page-main-title">{{_ "catalogue_Title"}}</h1>
+    <nav id="catalogue-toolbar" class="navbar navbar-default">
+      <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+          <button
+                  type="button"
+                  class="navbar-toggle collapsed"
+                  data-toggle="collapse"
+                  data-target="#bs-example-navbar-collapse-1"
+                  aria-expanded="false">
+            <span class="sr-only">{{_ "catalogue_toolbar_toggleCollapse" }}</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+        </div>
 
-      <!-- Collect the nav links, forms, and other content for toggling -->
-      <div class="collapse navbar-collapse sort-filter-toolbar" id="bs-example-navbar-collapse-1">
-        <div class="nav navbar-nav">
-          <p class="navbar-text sort-filter-toolbar-title">
-            {{_ "catalogue_toolbar_sortBy_title" }}
-          </p>
-          <div class="form-group sort-options-form">
-            <form class="form navbar-form navbar-nav" id="sort-options-select">
-              <select name="sort-menu" class="form-control sort-options-select" id="sort-select">
-                <option value="name">
-                  {{_ "catalogue_toolbar_sortMenuOptions_name" }}
-                </option>
-                <option value="bookmarkCount">
-                  {{_ "catalogue_toolbar_sortMenuOptions_bookmarkCount" }}
-                </option>
-                <option value="averageRating">
-                  {{_ "catalogue_toolbar_sortMenuOptions_averageRating" }}
-                </option>
-                <option value="created_at">
-                  {{_ "catalogue_toolbar_sortMenuOptions_dateCreated" }}
-                </option>
-              </select>
-            </form>
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse sort-filter-toolbar" id="bs-example-navbar-collapse-1">
+          <div class="nav navbar-nav">
+            <p class="navbar-text sort-filter-toolbar-title">
+              {{_ "catalogue_toolbar_sortBy_title" }}
+            </p>
+            <div class="form-group sort-options-form">
+              <form class="form navbar-form navbar-nav" id="sort-options-select">
+                <select name="sort-menu" class="form-control sort-options-select" id="sort-select">
+                  <option value="name">
+                    {{_ "catalogue_toolbar_sortMenuOptions_name" }}
+                  </option>
+                  <option value="bookmarkCount">
+                    {{_ "catalogue_toolbar_sortMenuOptions_bookmarkCount" }}
+                  </option>
+                  <option value="averageRating">
+                    {{_ "catalogue_toolbar_sortMenuOptions_averageRating" }}
+                  </option>
+                  <option value="created_at">
+                    {{_ "catalogue_toolbar_sortMenuOptions_dateCreated" }}
+                  </option>
+                </select>
+              </form>
+            </div>
           </div>
-        </div>
-        <div class="nav navbar-nav">
-          <div class="btn-group navbar-btn" role="group" aria-label="Sort direction" data-toggle="buttons">
-            <label
-              class="btn btn-default toolbar-tooltip active"
-              title="{{_ 'catalogue_toolbar_sortMenuOptions_sortAscending' }}">
-              <input type="radio" name="sort-direction" id="sort-ascending" value="ascending">
-              <i class="fa fa-sort-amount-asc" aria-hidden="true"></i>
-            </label>
-            <label
-              class="btn btn-default toolbar-tooltip"
-              title="{{_ 'catalogue_toolbar_sortMenuOptions_sortDescending' }}">
-              <input type="radio" name="sort-direction" id="sort-descending" value="descending">
-              <i class="fa fa-sort-amount-desc" aria-hidden="true"></i>
-            </label>
+          <div class="nav navbar-nav">
+            <div class="btn-group navbar-btn" role="group" aria-label="Sort direction" data-toggle="buttons">
+              <label
+                     class="btn btn-default toolbar-tooltip active"
+                     title="{{_ 'catalogue_toolbar_sortMenuOptions_sortAscending' }}">
+                <input type="radio" name="sort-direction" id="sort-ascending" value="ascending">
+                <i class="fa fa-sort-amount-asc" aria-hidden="true"></i>
+              </label>
+              <label
+                     class="btn btn-default toolbar-tooltip"
+                     title="{{_ 'catalogue_toolbar_sortMenuOptions_sortDescending' }}">
+                <input type="radio" name="sort-direction" id="sort-descending" value="descending">
+                <i class="fa fa-sort-amount-desc" aria-hidden="true"></i>
+              </label>
+            </div>
           </div>
-        </div>
-        {{# if currentUser }}
-        <div class="nav navbar-nav">
-          <div class="btn-group navbar-btn filter-options-menu" role="group" aria-label="Filter options" data-toggle="buttons">
-            <label class="btn btn-default active">
-              <input type="radio" name="filter-options" id="show-all" value="all">
-              {{_ "catalogue_toolbar_filterOptions_showAll" }}
-            </label>
-            <label class="btn btn-default">
-              <input type="radio" name="filter-options" id="my-apis" value="my-apis">
-              {{_ "catalogue_toolbar_filterOptions_myApis" }}
-            </label>
-            <label class="btn btn-default">
-              <input type="radio" name="filter-options" id="my-bookmarks" value="my-bookmarks">
-              {{_ "catalogue_toolbar_filterOptions_myBookmarks" }}
-            </label>
+          {{# if currentUser }}
+          <div class="nav navbar-nav">
+            <div class="btn-group navbar-btn filter-options-menu" role="group" aria-label="Filter options" data-toggle="buttons">
+              <label class="btn btn-default active">
+                <input type="radio" name="filter-options" id="show-all" value="all">
+                {{_ "catalogue_toolbar_filterOptions_showAll" }}
+              </label>
+              <label class="btn btn-default">
+                <input type="radio" name="filter-options" id="my-apis" value="my-apis">
+                {{_ "catalogue_toolbar_filterOptions_myApis" }}
+              </label>
+              <label class="btn btn-default">
+                <input type="radio" name="filter-options" id="my-bookmarks" value="my-bookmarks">
+                {{_ "catalogue_toolbar_filterOptions_myBookmarks" }}
+              </label>
+            </div>
           </div>
-        </div>
-        {{/if}}
-        <div class="nav navbar-nav navbar-right">
-          <div class="btn-group navbar-btn" role="group" aria-label="View mode" data-toggle="buttons">
-            <label
-              class="btn btn-default toolbar-tooltip active"
-              title="{{_ 'catalogue_toolbar_viewMode_grid' }}">
-              <input type="radio" name="view-mode" id="grid-mode" value="grid">
-              <i class="fa fa-th-large" aria-hidden="true"></i>
-            </label>
-            <label
-              class="btn btn-default toolbar-tooltip"
-              title="{{_ 'catalogue_toolbar_viewMode_table' }}">
-              <input type="radio" name="view-mode" id="table-mode" value="table">
-              <i class="fa fa-table" aria-hidden="true"></i>
-            </label>
+          {{/if}}
+          <div class="nav navbar-nav navbar-right">
+            <div class="btn-group navbar-btn" role="group" aria-label="View mode" data-toggle="buttons">
+              <label
+                     class="btn btn-default toolbar-tooltip active"
+                     title="{{_ 'catalogue_toolbar_viewMode_grid' }}">
+                <input type="radio" name="view-mode" id="grid-mode" value="grid">
+                <i class="fa fa-th-large" aria-hidden="true"></i>
+              </label>
+              <label
+                     class="btn btn-default toolbar-tooltip"
+                     title="{{_ 'catalogue_toolbar_viewMode_table' }}">
+                <input type="radio" name="view-mode" id="table-mode" value="table">
+                <i class="fa fa-table" aria-hidden="true"></i>
+              </label>
+            </div>
           </div>
-        </div>
-      </div><!-- /.navbar-collapse -->
-    </div><!-- /.container-fluid -->
-  </nav>
+        </div><!-- /.navbar-collapse -->
+      </div><!-- /.container-fluid -->
+    </nav>
 
-  <!-- if viewMode is table, show table -->
-  {{# if gridViewMode }}
+    <!-- if viewMode is table, show table -->
+    {{# if gridViewMode }}
     {{# if Template.subscriptionsReady }}
-      {{> catalogueGrid apiBackends=apiBackends }}
+    {{> catalogueGrid apiBackends=apiBackends }}
     {{else}}
-      {{> spinner }}
+    {{> spinner }}
     {{/if}}
-  {{/ if }}
+    {{/ if }}
 
-  <!-- if viewMode is table, show table -->
-  {{# if tableViewMode }}
+    <!-- if viewMode is table, show table -->
+    {{# if tableViewMode }}
     {{# if Template.subscriptionsReady }}
-      {{> catalogueTable apiBackends=apiBackends }}
+    {{> catalogueTable apiBackends=apiBackends }}
     {{else}}
-      {{> spinner }}
+    {{> spinner }}
     {{/if}}
-  {{/ if }}
+    {{/ if }}
 
-  <div class="text-center">
-    <ul class="pagination">
-      <li class="{{ prevButtonDisabledClass }}" >
-        <a href="#" aria-label="Previous" id="prev-page">
-          <span aria-hidden="true">{{_ "catalogue_paginationButtons_previous" }}</span>
-        </a>
-      </li>
-      {{ # each page in pageNumbers }}
+    <div class="text-center">
+      <ul class="pagination">
+        <li class="{{ prevButtonDisabledClass }}" >
+          <a href="#" aria-label="Previous" id="prev-page">
+            <span aria-hidden="true">{{_ "catalogue_paginationButtons_previous" }}</span>
+          </a>
+        </li>
+        {{ # each page in pageNumbers }}
         <li class="{{ pageIsActive page }}">
           <a href="#" class="change-page">{{ page }}</a>
         </li>
-      {{ / each }}
-      <li class="{{ nextButtonDisabledClass }}">
-        <a href="#" aria-label="Next" id="next-page">
-          <span aria-hidden="true">{{_ "catalogue_paginationButtons_next" }}</span>
-        </a>
-      </li>
-    </ul>
+        {{ / each }}
+        <li class="{{ nextButtonDisabledClass }}">
+          <a href="#" aria-label="Next" id="next-page">
+            <span aria-hidden="true">{{_ "catalogue_paginationButtons_next" }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
diff --git a/catalogue/client/catalogue.css b/catalogue/client/catalogue.less
similarity index 60%
rename from catalogue/client/catalogue.css
rename to catalogue/client/catalogue.less
index dd03214379..74b9ca1360 100644
--- a/catalogue/client/catalogue.css
+++ b/catalogue/client/catalogue.less
@@ -1,3 +1,5 @@
+@import "/core/client/style/bootstrap-variables.less";
+
 .sort-options-select {
   padding-left: 0.5em;
 }
@@ -18,10 +20,6 @@
   display: inline;
 }
 
-.catalogue-main-title {
-  margin-left: 0.63em;
-}
-
 /* Class to make pagination buttons inactive */
 .inactive a {
   color: #d3d3d3 !important;
@@ -34,3 +32,12 @@
   cursor: default;
   background-color: #fafafa !important;
 }
+
+.api-card-bookmark a {
+  color: @gray;
+  text-decoration: none;
+  &:hover { text-decoration: none; color: @gray; }
+  &:focus { text-decoration: none; color: @gray; }
+  &:active { text-decoration: none; color: @gray; }
+  &:visited { text-decoration: none; color: @gray; }
+}
diff --git a/catalogue/client/grid/grid.html b/catalogue/client/grid/grid.html
index 886f5db579..38beb0196d 100644
--- a/catalogue/client/grid/grid.html
+++ b/catalogue/client/grid/grid.html
@@ -22,17 +22,6 @@
             </p>
           </div>
           <ul class="api-card-stats list-inline">
-            <li class="pull-left">
-              <div class="api-card-star-average"
-                   data-toggle="tooltip"
-                   data-placement="bottom"
-                   title="{{_ 'catalogue-AverageRating-Tooltip'}}">
-                {{#if api.averageRating }}
-                {{ api.averageRating }}
-                <i class="fa fa-star-half-o"></i>
-                {{/if}}
-              </div>
-            </li>
             {{# if currentUser }}
             <li class="pull-left">
               <div
@@ -40,8 +29,7 @@
                    data-toggle="tooltip"
                    data-placement="bottom"
                    title="{{_ 'catalogue-Bookmark-Tooltip_User'}}">
-                <span class="api-card-bookmark-number">{{ api.bookmarkCount }}</span>
-                {{> favourite apiBackend=api }}
+                {{> favourite apiBackend=api catalogueView=true }}
               </div>
             </li>
             {{else}}
@@ -52,7 +40,7 @@
                    data-placement="bottom"
                    title="{{_ 'catalogue-Bookmark-Tooltip_NonUser'}}">
                 <span class="api-card-bookmark-number">{{ api.bookmarkCount }}</span>
-                <i class="fa fa-bookmark bookmark-default"></i>
+                <i class="fa fa-star bookmark-default"></i>
               </div>
             </li>
             {{/if}}
diff --git a/catalogue/client/table/table.html b/catalogue/client/table/table.html
index aae38445d0..417488ba16 100644
--- a/catalogue/client/table/table.html
+++ b/catalogue/client/table/table.html
@@ -26,18 +26,14 @@ <h4 class="api-catalogue-table-title">
               {{ api.relativeCreatedAt }}
             </i>
           </td>
-          <td class="col-sm-1">
-            {{> apiBackendRating api }}
-          </td>
           <td class="col-sm-1 text-center">
             {{# if currentUser }}
             <span class="api-card-bookmark">
-              {{> favourite apiBackend=api }}
-              {{ api.bookmarkCount }}
+              {{> favourite apiBackend=api catalogueView=true }}
             </span>
             {{else}}
             <span class="api-card-bookmark">
-              <i class="fa fa-bookmark bookmark-default"></i>
+              <i class="fa fa-star bookmark-default"></i>
               {{ api.bookmarkCount }}
             </span>
             {{/if}}
diff --git a/core/client/layouts/master_layout/master_layout.css b/core/client/layouts/master_layout/master_layout.css
deleted file mode 100644
index 94d81234ac..0000000000
--- a/core/client/layouts/master_layout/master_layout.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.master-layout {
-  margin-bottom: 2em;
-}
diff --git a/core/client/layouts/master_layout/master_layout.html b/core/client/layouts/master_layout/master_layout.html
index abbe2914ac..ad64de13fb 100644
--- a/core/client/layouts/master_layout/master_layout.html
+++ b/core/client/layouts/master_layout/master_layout.html
@@ -2,10 +2,10 @@
   {{> languageBar }}
   <div class="master-layout">
     {{> navbar branding=branding }}
-    <div class="container">
+    <div class="content-wrapper">
       {{> yield }}
       {{> sAlert}}
+      {{> autoformModals}}
     </div>
-    {{> autoformModals}}
   </div>
 </template>
diff --git a/core/client/layouts/master_layout/master_layout.less b/core/client/layouts/master_layout/master_layout.less
new file mode 100644
index 0000000000..80700b14d5
--- /dev/null
+++ b/core/client/layouts/master_layout/master_layout.less
@@ -0,0 +1,17 @@
+.master-layout {
+  margin-bottom: 2em;
+}
+
+.content-wrapper {
+  padding-top: 1.4em;
+
+  h1 {
+    margin-top: 0;
+  }
+
+  .page-main-title {
+    font-size: 1.7em;
+    font-weight: 600;
+  }
+}
+
diff --git a/core/client/layouts/master_layout/navbar/navbar.less b/core/client/layouts/master_layout/navbar/navbar.less
index 085b270b11..eacd587c65 100644
--- a/core/client/layouts/master_layout/navbar/navbar.less
+++ b/core/client/layouts/master_layout/navbar/navbar.less
@@ -12,7 +12,6 @@
     margin-bottom: 0;
     border: none;
     border-radius: 0;
-    margin-bottom: 2em;
 
     .navbar-header {
       padding-left: 0.9em;
diff --git a/core/client/shared/not_authorized.html b/core/client/shared/not_authorized.html
index e3f5e0ed49..118b2d456d 100644
--- a/core/client/shared/not_authorized.html
+++ b/core/client/shared/not_authorized.html
@@ -1,11 +1,13 @@
 <template name="notAuthorized">
-  <div class="error-page">
-    <h1 class="headline text-danger">{{_ "notAuthorized_Title"}}</h1>
-    <div class="error-content">
-      <p>
-        <i class="fa fa-warning text-danger"></i>&nbsp;
-        {{_ "notAuthorized_Message"}}
-      </p>
+  <div class="container">
+    <div class="error-page">
+      <h1 class="headline text-danger">{{_ "notAuthorized_Title"}}</h1>
+      <div class="error-content">
+        <p>
+          <i class="fa fa-warning text-danger"></i>&nbsp;
+          {{_ "notAuthorized_Message"}}
+        </p>
+      </div>
     </div>
   </div>
 </template>
diff --git a/core/client/shared/not_found.html b/core/client/shared/not_found.html
index 2fd6b6b593..0a51c8fe0f 100644
--- a/core/client/shared/not_found.html
+++ b/core/client/shared/not_found.html
@@ -1,14 +1,16 @@
 <template name="notFound">
-  <div class="error-page">
-    <h2 class="text-warning"> 404</h2>
-    <div class="error-content">
-      <h3><i class="fa fa-warning text-warning"></i> {{_ "notFound_Title"}}</h3>
-      <p>
-        {{_ "notFound_Message_Part1"}}
-        <br><a href='javascript:void(0)' onClick='history.go(-1); return false;'>
-        {{_ "notFound_Message_Part2"}}
-        </a>
-      </p>
+  <div class="container">
+    <div class="error-page">
+      <h2 class="text-warning"> 404</h2>
+      <div class="error-content">
+        <h3><i class="fa fa-warning text-warning"></i> {{_ "notFound_Title"}}</h3>
+        <p>
+          {{_ "notFound_Message_Part1"}}
+          <br><a href='javascript:void(0)' onClick='history.go(-1); return false;'>
+          {{_ "notFound_Message_Part2"}}
+          </a>
+        </p>
+      </div>
     </div>
   </div>
 </template>
diff --git a/core/client/style/bootstrap-variables.less b/core/client/style/bootstrap-variables.less
index 9b82f7745b..1b069dc879 100644
--- a/core/client/style/bootstrap-variables.less
+++ b/core/client/style/bootstrap-variables.less
@@ -48,6 +48,7 @@
 //
 //## Font, line-height, and color for body text, headings, and more.
 
+@font-family-default:     "Roboto", sans-serif;
 @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
diff --git a/core/client/style/global.less b/core/client/style/global.less
index 48d915779f..40c11276ca 100644
--- a/core/client/style/global.less
+++ b/core/client/style/global.less
@@ -1,9 +1,6 @@
 /* Bootstrap */
 @import "/core/client/style/bootstrap-variables.less";
 
-/* Global variables */
-@font-family-default: 'Roboto', sans-serif;
-
 html, body, h1, h2, h3, h4, h5, h6, p {
   font-family: @font-family-default;
 }
@@ -36,12 +33,22 @@ hr {
   margin-top: 0;
 }
 
-.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-  color: #fff;
-  background-color: @nav-pills-active-link-hover-bg;
-}
-
 .no-margin-row {
   margin-left: 0;
   margin-right: 0;
 }
+
+.panel:last-child {
+  margin-bottom: 0;
+}
+
+.panel-body h3 {
+  font-size: 16px;
+  margin-top: 0px;
+  margin-bottom: 5px;
+  font-weight: 700;
+}
+
+.panel-body p {
+  color: @gray;
+}
diff --git a/dashboard/client/dashboard.html b/dashboard/client/dashboard.html
index 1f77fedd70..7f8f698d09 100644
--- a/dashboard/client/dashboard.html
+++ b/dashboard/client/dashboard.html
@@ -1,15 +1,16 @@
 <template name="dashboard">
-  {{# if isInRole 'admin, manager' }}
+  <div class="container">
+    {{# if isInRole 'admin, manager' }}
     <div class="row">
       <div class="col-lg-12">
-        <h1 class="dashboard-title">
+        <h1 class="page-main-title">
           {{_ "dashboard_mainTitle" }}
         </h1>
       </div>
     </div>
     {{ > dashboardCharts chartData=chartData loadingState=loadingState }}
-  {{ else }}
-   <div class="row">
+    {{ else }}
+    <div class="row">
       <div class="col-lg-12">
         <h1 class="dashboard-no-apis">
           {{_ "dashboard_noApisTitle" }}
@@ -18,5 +19,6 @@ <h1 class="dashboard-no-apis">
         </h1>
       </div>
     </div>
-  {{ / if }}
+    {{ / if }}
+  </div>
 </template>
diff --git a/dashboard/client/dashboard.less b/dashboard/client/dashboard.less
index 6c9b93635a..d836fbbf90 100644
--- a/dashboard/client/dashboard.less
+++ b/dashboard/client/dashboard.less
@@ -1,9 +1,3 @@
-.dashboard-title {
-  font-size: 1.7em;
-  font-weight: 600;
-  margin-top: 0px;
-}
-
 .dashboard-no-apis {
   text-align: center;
   margin-top: 5em;
diff --git a/documentation/view/client/documentation.html b/documentation/view/client/documentation.html
index 7324f528e4..ab404a3898 100644
--- a/documentation/view/client/documentation.html
+++ b/documentation/view/client/documentation.html
@@ -4,13 +4,12 @@
       {{#if apiBackend.currentUserCanEdit }}
         <button
           id="manage-api-documentation"
-          class="btn btn-sm btn-info pull-right">
+          class="btn btn-xs btn-info pull-right">
           <i class="fa fa-pencil"></i>&nbsp;
           Manage
         </button>
       {{/if}}
       <h2 class="panel-title clearfix">
-        <i class="fa fa-file-text"></i>
         {{_ "documentation_Title" }}
       </h2>
     </div>
diff --git a/lib/i18n/en.i18n.json b/lib/i18n/en.i18n.json
index d9599be5f3..ecd9d1172d 100644
--- a/lib/i18n/en.i18n.json
+++ b/lib/i18n/en.i18n.json
@@ -387,6 +387,15 @@
   "viewApiBackendNavigationMenu_export": "Export",
   "viewApiBackendNavigationMenu_feedback": "Feedback",
   "viewApiBackendNavigationMenu_metadata": "Metadata",
+  "viewApiBackendNavigationMenu_settings": "Settings",
+  "viewApiBackendSettings_panelTitleAbout": "About",
+  "viewApiBackendSettings_panelTitleEdit": "Edit",
+  "viewApiBackendSettings_panelTitleManage": "Manage",
+  "viewApiBackendSettings_editApiSettingsText": "You can modify the proxy settings for your API. Clicking the button will open a settings form.",
+  "viewApiBackendSettings_editApiSettingsTitle": "Modify the API settings",
+  "viewApiBackendSettings_deleteApiText": "This action cannot be undone. The API Backend and all its related information, i.e. metadata, documentation, API backlog items and feedback will be removed.",
+  "viewApiBackendSettings_deleteApiTitle": "Delete the API",
+  "viewApiBackendSettings_uploadLogoText": "You can upload a logo for your API. The logo will appear in the catalogue and on the single API page.",
   "viewApiBackendStatus_statusMessage_ClientError": "Client error.",
   "viewApiBackendStatus_statusMessage_ErrorCodeText": "Status code:",
   "viewApiBackendStatus_statusMessage_RedirectError": "Redirection.",
diff --git a/metadata/client/edit/edit.html b/metadata/client/edit/edit.html
index fedb98c70c..383c07cae3 100644
--- a/metadata/client/edit/edit.html
+++ b/metadata/client/edit/edit.html
@@ -1,6 +1,6 @@
 <template name="editApiMetadata">
   <button type="button"
-    class="btn btn-info btn-sm pull-right"
+    class="btn btn-info btn-xs pull-right"
     data-toggle="modal"
     data-target="#apiMetadataModal"
     data-backdrop="static"
diff --git a/metadata/client/view/metadata.html b/metadata/client/view/metadata.html
index 842fae5b18..ecc9d08a98 100644
--- a/metadata/client/view/metadata.html
+++ b/metadata/client/view/metadata.html
@@ -5,7 +5,6 @@
         {{> editApiMetadata metadata=metadata }}
       {{/if}}
       <h2 class="panel-title clearfix">
-        <i class="fa fa-book"></i>
         {{_ "view_ApiBackend_Metadata_Title"}}
       </h2>
     </div>
@@ -79,7 +78,7 @@ <h3>{{ service.name }}</h3>
       </div>
       {{/ with }}
       {{ else }}
-      <p>{{_ "view_ApiBackend_Metadata_NotFound"}}</p>
+      <i>{{_ "view_ApiBackend_Metadata_NotFound"}}</i>
       {{/ if }}
     </div>
   </div>
diff --git a/public/img/placeholder-logo.jpg b/public/img/placeholder-logo.jpg
index 86d8ed6977..d21f817e7a 100644
Binary files a/public/img/placeholder-logo.jpg and b/public/img/placeholder-logo.jpg differ