diff --git a/src/components/app/app.scss b/src/components/app/app.scss
index 4a4373b..7ba6e7d 100644
--- a/src/components/app/app.scss
+++ b/src/components/app/app.scss
@@ -37,6 +37,11 @@
         background: #7d7d7d !important;
         color: #e9e9e9 !important;
     }
+
+    #overall, #overall-course, .overall-span
+    {
+        background: #555555 !important;
+    }
 }
 
 // ##############
diff --git a/src/pages/overall/overall.vue b/src/pages/overall/overall.vue
index 9ebae89..bec9096 100644
--- a/src/pages/overall/overall.vue
+++ b/src/pages/overall/overall.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="overall">
         <el-row v-if="getGPA().gpa !== -1">
-            <el-col :span="4">
+            <el-col :span="4" class="overall-span">
                 <el-card class="large gpa-card vertical-center">
                     <div style="padding: 14px;">
                         <span class="gpa header">GPA:</span>
@@ -13,12 +13,12 @@
                     </div>
                 </el-card>
             </el-col>
-            <el-col :span="14">
+            <el-col :span="14" class="overall-span">
                 <el-card class="large overall-line-card vertical-center">
                     <overall-line :courses="courses"></overall-line>
                 </el-card>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="6" class="overall-span">
                 <el-card class="large overall-bar-card vertical-center">
                     <overall-bar :courses="courses"></overall-bar>
                 </el-card>