Finalized CSS on homepage and homepage/details

widget_tee_jays_angelos/homepage/static/homepage/homepagestyle.css

 h1, h2 {
     color: black;
     font-family: 'Montserrat', sans-serif;
+    position: relative;
 }
 li {
     color: black;
     font-family: 'Source Sans Pro', sans-serif;
+    position: relative;
+    top: 10px;
+    margin: 10px;
 }
 p {
     font-family: 'Source Sans Pro', sans-serif;
@@ -40,7 +44,7 @@ img {
     top: 120px;
     font-weight: lighter;
 }
-.rectangleHeader {
+.rectangleDetailsHeader {
     position: absolute;
     left: 0px;
     top: 0px;
@@ -48,3 +52,41 @@ img {
     width: 100%;
     background-color: #daeaf6;
 }
+.homepageRectangleHeader {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 80px;
+    background-color: #ddedea;
+}
+.arrow {
+    width: 20px;
+    height: 4px;
+    background-color: black;
+    position: relative;
+    top: 10px;
+    left: 5px;
+}
+.arrow:before {
+    content: "";
+    display: inline-block;
+    position: relative;
+    top: -17px;
+    left: 0px;
+    width:15px;
+    height: 4px;
+    background-color: black;
+    transform: rotate(-45deg);
+}
+.arrow:after {
+    content: "";
+    display: inline-block;
+    position: relative;
+    top: -23px;
+    left: -1px;
+    width:15px;
+    height: 4px;
+    background-color: black;
+    transform: rotate(45deg);
+}

widget_tee_jays_angelos/homepage/templates/homepage/details.html

 {% extends "homepage/base.html "%}
 {% block content %}
     {% if user %}
-        <div class="rectangleHeader"></div>
+        <div class="rectangleDetailsHeader"></div>
+        <a href="/homepage/"><div class="arrow"></div></a>
         <h1 class="detailsHeaderName">{{ user.first_name }} {{ user.last_name }}</h1>
         <h3 class="detailsHeaderDept">Department of {{ userDept.dept_name }}</h3>
-        <h2 style="position: absolute; left: 300px; top: 270px;">Personal Information</h2>
+        <h2 style="position: absolute; left: 300px; top: 270px; background-color: #fcf4dd;">Personal Information</h2>
+        <h2 style="position: absolute; left: 300px; top: 450px; background-color: #fcf4dd;">Department Information</h2>
+        <h2 style="position: absolute; left: 850px; top: 270px; background-color: #fcf4dd;">Contact Details</h2>
         <p style="position:absolute; left: 300px; top: 325px;">Complete Name: {{ user.last_name }}, {{user.first_name }} {{ user.middle_name }}</p>
         <p style="position:absolute; left: 300px; top: 370px;">ID Number: {{ user.id_num }}</p>
-        <h2 style="position: absolute; left: 300px; top: 450px;">Department Information</h2>
         <p style="position: absolute; left: 300px; top: 500px;">Department: {{ userDept.dept_name }}</p>
         <p style="position: absolute; left: 300px; top: 545px;">Home Unit: {{ userDept.home_unit }}</p>
-        <h2 style="position: absolute; left: 850px; top: 270px;">Contact Details</h2>
         <p style="position: absolute; left: 850px; top: 325px;">Email: {{ user.email }}</p>
         <div class="picShadow"></div>
         <img src="{{ user.picture.url }}" width="200" height="200">

widget_tee_jays_angelos/homepage/templates/homepage/index.html

 {% extends "homepage/base.html" %}
 {% block content %}
-    <title>Widget Users</title>
-    <h1>Widget Users: </h1>
+    <div class="homepageRectangleHeader"></div>
+    <h1 style="text-align: center">Welcome to Widget!</h1>
+    <h2 style="position: relative; top: 20px;">Widget Users</h2>
     {% if user_list %}
         <ol type="1">
             {% for user in user_list %}