diff --git a/src/app/app.component.html b/src/app/app.component.html
index c1ba4ccd8e6f340dc1f6369e9b1e0d033bf1405e..68c64db1e2db747ed0a5fc3249c95338997123a0 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,6 @@
+<div class="alert-banner">
+  <p><md-icon class="material-icons error" role="img" aria-hidden="true">warning</md-icon> Course Search & Enroll will not be available from June 28 at 4:00pm to July 8 at 8:00am due to the <a href="https://upgrade.sis.wisc.edu/" target="_blank">SIS Upgrade.</a></p>
+</div>
 <header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar" role="banner">
   <cse-header></cse-header>
   <cse-navigation></cse-navigation>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 70a8cd3c7be87c69e4e377c5dce600ea2b412077..e2eecd940f12a1c2bb0a79258840ad0564a23928 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,7 +4,7 @@
 
 header {
   position: absolute;
-  top: 0;
+  top: 44px;
   left: 0;
   width: 100%;
   height: 112px;
@@ -20,7 +20,7 @@ header {
 
 main {
   position: absolute;
-  top: 112px;
+  top: 156px;
   left: 0;
   bottom: 0;
   right: 0;
@@ -32,3 +32,25 @@ main {
   min-width: 360px;
   height: 100vh;
 }
+
+.alert-banner {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-color: white;
+  p {
+    margin: 13px 0;
+    padding: 0px 15px;
+    font-family: mat-font-family($config);
+    font-size: 13px;
+    -webkit-font-smoothing: antialiased;
+  }
+  md-icon {
+    font-size: 16px;
+    color: #ff8000;
+    top: 2px;
+  }
+  a {
+    text-decoration: none;
+  }
+}