diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index b555622..895ec5f 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -1,4 +1,178 @@
-<div class="row column">
-    <h1>Server overview</h1>
-    <p>Server overview will be here.</p>
+<div class="overview">
+	<div class="row column">
+		<h1>Server overview</h1> <!-- this is default name. Will show custom server name if set -->
+	</div>
+	<section class="row column">
+		<div class="page-header"></div>
+	</section>
+
+	<section class="row">
+		<div class="column large-8">
+			<!-- Server Metadata -->
+			<div class="row overview__server-metadata">
+				<div class="column large-4">
+					<h3 class="bold h4">Server information</h3>
+				</div>
+				<div class="column large-8">
+					<ul class="overview__metadata-wrapper">
+						<li class="overview__metadata-block">
+							<p class="content-label">Model</p>
+							<p class="courier-bold">5150-A0A</p>
+						</li>
+						<li class="overview__metadata-block">
+							<p class="content-label">Manufacturer</p>
+							<p class="courier-bold">IBM</p>
+						</li>
+						<li class="overview__metadata-block">
+							<p class="content-label">Firmware version</p>
+							<p class="courier-bold">2.3.104497</p>
+						</li>
+						<li class="overview__metadata-block">
+							<p class="content-label">Serial number</p>
+							<p class="courier-bold">123456abcd</p>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<!-- BMC Metadata -->
+			<div class="row overview__server-metadata">
+				<div class="column large-4">
+					<h3 class="bold h4">BMC information</h3>
+				</div>
+				<div class="column large-8">
+					<ul class="overview__metadata-wrapper">
+						<li class="overview__metadata-block">
+							<p class="content-label">BMC IP address</p>
+							<p class="courier-bold">9.3.111.222</p>
+						</li>
+						<li class="overview__metadata-block">
+							<p class="content-label">Hostname</p>
+							<p class="courier-bold overview__hostname">bmc401.aus.stg1.global</p>
+						</li>
+						<li class="overview__metadata-block">
+							<p class="content-label">Mac address</p>
+							<p class="courier-bold">70:E2:84:14:05:2F</p>
+						</li>
+						<li class="overview__metadata-block">
+							<p class="content-label">Firmware</p>
+							<p class="courier-bold">4.3.104497</p>
+						</li>
+
+					</ul>
+				</div>
+			</div>
+			<!-- Power metadata -->
+			<div class="row overview__server-metadata">
+				<div class="column large-4">
+					<h3 class="bold h4">Power information</h3>
+				</div>
+				<div class="column large-8">
+					<ul class="overview__metadata-wrapper">
+						<li class="overview__metadata-block">
+							<p class="content-label">Power Consumption</p>
+							<p class="courier-bold">000 W</p>
+						</li>
+						<li class="overview__metadata-block">
+							<p class="content-label">Power Cap</p>
+							<p class="courier-bold">000 W</p>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<!-- Power metadata -->
+			<div class="row column overview__event-log event-log__events" >
+				<h3 class="bold h4">High priority events</h3>
+
+				<!-- TODO: I built event log section so that you could easily just pull in our existing event log template. All display tweaks (such as hiding checkbox) are done via SCSS -->
+
+				<!-- show when there are no critical events from event log -->
+				<!-- <p class="disabled">No high priority events</p> -->
+
+				<!-- single event -->
+				<a href="#/server-health/event-log"> <!-- this should go to specific event in event log page -->
+					<div class="row column event-log__single-event">
+						<div class="row">
+							<div class="column small-1 large-1 event-log__col-check">
+								<label class="control-check">
+									<input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
+											ng-checked="event.selected"/>
+									<span class="control__indicator"></span>
+								</label>
+							</div>
+							<div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
+								<p class="inline event__id">#00995</p>
+								<p class="inline event__priority high-priority">High</p>
+								<p class="inline event__severity">emergency</p>
+								<p class="inline event__timestamp">03/09/2017 21:00:26 EDT</p>
+								<div>
+									<p class="inline event__description">Vestibulum ac diam sit amet quam vehicula aliquet quam id dui</p>
+								</div>
+							</div>
+							<div class="column small-1 large-1">
+								<button class="accord-trigger"></button>
+							</div>
+						</div>
+					</div>
+				</a>
+				<!-- single event -->
+				<a href="#/server-health/event-log"><!-- this should go to specific event in event log page -->
+				<div class="row column event-log__single-event">
+					<div class="row">
+						<div class="column small-1 large-1 event-log__col-check">
+							<label class="control-check">
+								<input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
+										ng-checked="event.selected"/>
+								<span class="control__indicator"></span>
+							</label>
+						</div>
+						<div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
+							<p class="inline event__id">#00991</p>
+							<p class="inline event__priority high-priority">High</p>
+							<p class="inline event__severity">emergency</p>
+							<p class="inline event__timestamp">02/09/2017 21:00:26 EDT</p>
+							<div>
+								<p class="inline event__description">Vestibulum ac diam sit amet quam vehicula aliquet quam id dui Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
+							</div>
+						</div>
+						<div class="column small-1 large-1">
+							<button class="accord-trigger"></button>
+						</div>
+					</div>
+				</div>
+				</a>
+			</div>
+		</div>
+		<div class="column large-4">
+			<div class="quick-links" >
+				<a href="" class="quick-links__item quick-links__events event-log__events" >
+					<span class="event__priority high-priority">High</span><p class="inline quick-links__event-copy">3 High priority events</p><!-- link to event log filtered to the high priority events -->
+				</a>
+				<div class="quick-links__item no-icon">
+					<p class="inline quick-links__label">BMC time</p>
+					<p class="inline float-right courier-bold">3:20:12 5/22/2017 UTC</p>
+				</div>
+				<div class="quick-links__item no-icon">
+					<p class="inline quick-links__label">Turn on server indicator</p>
+					<div class="toggle inline float-right">
+						<input id="toggle__switch-round"
+								class="toggle-switch toggle-switch__round-flat"
+								type="checkbox"
+								tabindex="0"
+								ng-click="toggleLED()"
+								ng-checked="dataService.LED_state == 'on'"
+								ng-disabled="dataService.server_unreachable">
+						<label for="toggle__switch-round" tabindex="0">Server indicator is <span class="uid-switch__status">{{dataService.LED_state}}</span></label>
+					</div>
+				</div>
+				<a href="" class="no-icon quick-links__item">
+					<p class="inline quick-links__label">Launch Serial Over Lan</p>
+					<span class="btn-pop-out inline float-right"></span>
+				</a>
+				<a href="" class="quick-links__item">
+					<p class="inline quick-links__label">Edit network settings</p>
+				</a>
+			</div>
+		</div>
+	</section>
 </div>
\ No newline at end of file
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index e69de29..ac61aff 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -0,0 +1,38 @@
+.overview__server-metadata {
+  border-bottom: 1px solid $medgrey;
+  padding: 1.8em 0 0 0;
+}
+.overview__metadata-wrapper {
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+.overview__metadata-block {
+  list-style-type: none;
+  min-width: 45%;
+  margin-bottom: 1em;
+  display: inline-block;
+  white-space: normal;
+  word-break: break-all;
+  @include mediaQuery(small) {
+    float: left;
+  }
+  @include mediaQuery(medium) {
+    margin-left: 1em;
+  }
+}
+.overview__event-log {
+  padding-top: 2em;
+  a {color: $black; text-decoration: none;}
+  .control-check {display: none;}
+  .accord-trigger {
+    transform: rotate(0deg) translateY(-50%);
+    position: absolute;
+    top: 50%;
+    right: 0;
+  }
+  .event-log__event-info {
+    width: 90%;
+    padding-left: 1.4em;
+  }
+}