diff --git a/server/styles/weatherdisplay.css b/server/styles/weatherdisplay.css
new file mode 100644
index 0000000..869e64f
--- /dev/null
+++ b/server/styles/weatherdisplay.css
@@ -0,0 +1,61 @@
+.weather-display {
+	width: 640px;
+	height: 480px;
+	overflow: hidden;
+	position: relative;
+	background-image: url(../images/BackGround1_1.png);
+	/* background-attachment: fixed; */
+}
+
+.weather-display .header {
+	width: 640px;
+	height: 70px;
+	padding-top: 30px;
+}
+
+.weather-display .header .title {
+	color: yellow;
+	text-shadow: 3px 3px black;
+	font-family: 'Star4000';
+	font-size: 24pt;
+	position: absolute;
+	left: 170px;
+	top: 25px;
+}
+
+.weather-display .header .logo {
+	top: 30px;
+	left: 50px;
+	position: absolute; 
+}
+
+.weather-display .header .title.single {
+	top: 40px;
+}
+
+.weather-display .header .date-time {
+	white-space: pre;
+	color: white;
+	font-family: 'Star4000 Small';
+	font-size: 24pt;
+	text-shadow: 2px 2px black;
+	left: 430px;
+	position: absolute;
+}
+.weather-display .header .date-time#date {
+	padding-top: 22px;
+}
+
+
+.weather-display .main-has-scroll {
+	width: 640px;
+	height: 310px;
+	overflow: hidden;
+}
+
+.weather-display .scroll {
+	width: 640px;
+	height: 80px;
+	overflow: hidden;
+}
+
diff --git a/views/index.ejs b/views/index.ejs
index 51f2a46..7868598 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -28,6 +28,7 @@
 		<script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>	
 	<% } else { %>
 		<link rel="stylesheet" type="text/css" href="styles/index.css" />
+		<link rel="stylesheet" type="text/css" href="styles/weatherdisplay.css" />
 		<script type="text/javascript" src="scripts/vendor/auto/jquery.js"></script>
 		<script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
 		<script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
@@ -89,7 +90,10 @@
                     <div class="instructions">Enter your location above to continue</div>
                 </div>
             </div>
-		</div>
+						<div id="weather-hourly" class="weather-display">
+							<%- include('partials/hourly.ejs') %>
+						</div>
+			</div>
         <div id="divTwcBottom">
             <div id="divTwcBottomLeft">
                 <img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" />
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
new file mode 100644
index 0000000..dee4c1c
--- /dev/null
+++ b/views/partials/header.ejs
@@ -0,0 +1,6 @@
+<div class="header">
+	<div class="logo"><img src="images/Logo3.png"/></div>
+	<div class="title single"><%-title %></div>
+	<div class="date-time" id="time">12:00:00PM</div>
+	<div class="date-time" id="date">MON JAN  1</div>
+</div>
\ No newline at end of file
diff --git a/views/partials/hourly.ejs b/views/partials/hourly.ejs
new file mode 100644
index 0000000..d6b27ad
--- /dev/null
+++ b/views/partials/hourly.ejs
@@ -0,0 +1,5 @@
+<%- include('header.ejs', {title: 'Hourly Forecast'}) %>
+<div class="main-has-scroll">
+	Main
+</div>
+<%- include('scroll.ejs') %>
\ No newline at end of file
diff --git a/views/partials/scroll.ejs b/views/partials/scroll.ejs
new file mode 100644
index 0000000..5d37f43
--- /dev/null
+++ b/views/partials/scroll.ejs
@@ -0,0 +1,3 @@
+<div class="scroll">
+	Scroll
+</div>
\ No newline at end of file