diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index c16e12d..a3d22ed 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -1,6 +1,7 @@
 <div class="overview">
 	<div class="row column">
-		<h1>Server overview</h1> <!-- this is default name. Will show custom server name if set -->
+		<h1 class="inline">IBM Power Witherspoon 2</h1>
+		<button class="link" ng-click="edit_server_name = !edit_server_name">edit</button><!-- this is default name. Will show custom server name if set -->
 	</div>
 	<section class="row">
 		<div class="column large-8">
@@ -148,4 +149,31 @@
 			</div>
 		</div>
 	</section>
-</div>
\ No newline at end of file
+</div>
+<!-- edit server name modal -->
+<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': edit_server_name}">
+	<div class="modal__upload" role="document">
+		<div class="screen-reader-offscreen modal-description">Edit server name</div><!-- accessibility only; used for screen readers -->
+		<div class="page-header ">
+			<h1 class="modal-title h4"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 32 32"><path
+					d="M18 14h-6v2h1v6h-2v2h8v-2h-2z"/><circle cx="16" cy="10" r="2"/><path
+					d="M16 2C8.269 2 2 8.269 2 16s6.269 14 14 14 14-6.269 14-14S23.731 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg></span>
+				Edit server name
+			</h1>
+		</div>
+		<div class="modal__content">
+			<p>The server name is displayed in the header and can contain any characters up to a total of 64</p>
+			<form>
+				<label for="editServerName" class="hide"></label>
+				<input id="editServerName" class="modal__edit-server-name" maxlength="64" type="text" ng-model="char_count" ng-trim="false">
+				<p class="modal__char-count">{{64 - char_count.length}}/64</p>
+			</form>
+		</div>
+		<div class="modal__button-wrapper">
+			<button class="inline btn-secondary" ng-click="edit_server_name= false;">Cancel</button>
+			<button class="inline btn-primary" ng-click="">Save</button>
+		</div>
+	</div>
+</section>
+<div class="modal-overlay" tabindex="-1" ng-class="{'active': edit_server_name}"></div>
\ No newline at end of file
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index ad0ef29..0169480 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -18,9 +18,6 @@
   @include mediaQuery(small) {
     float: left;
   }
-  @include mediaQuery(medium) {
-    margin-left: .8em;
-  }
 }
 .overview__event-log {
   padding-top: 2em;
@@ -40,3 +37,13 @@
     margin-left: 2.3em;
   }
 }
+
+input.modal__edit-server-name {
+  margin-bottom: 0;
+}
+
+.modal__char-count {
+  text-align: right;
+  font-size: .8em;
+  color: $darkgrey;
+}
\ No newline at end of file