diff --git a/src/pages/overall/overall.scss b/src/pages/overall/overall.scss
index c920ab9..bf2951c 100644
--- a/src/pages/overall/overall.scss
+++ b/src/pages/overall/overall.scss
@@ -3,7 +3,6 @@
 .el-card
 {
     margin: 10px;
-    height: 494px;
     padding: 0;
 
     // Vertical center
@@ -12,6 +11,11 @@
     flex-direction: column;
 }
 
+.el-card.large
+{
+    height: 494px;
+}
+
 .gpa-card
 {
     margin-left: 20px;
diff --git a/src/pages/overall/overall.vue b/src/pages/overall/overall.vue
index be612cb..4eed475 100644
--- a/src/pages/overall/overall.vue
+++ b/src/pages/overall/overall.vue
@@ -2,7 +2,7 @@
     <div id="overall">
         <el-row>
             <el-col :span="4">
-                <el-card class="gpa-card">
+                <el-card class="large gpa-card">
                     <div style="padding: 14px;">
                         <span class="gpa header">GPA:</span>
                         <span class="gpa text">{{getGPA().gpa}}</span>
@@ -14,12 +14,12 @@
                 </el-card>
             </el-col>
             <el-col :span="14">
-                <el-card class="overall-line-card">
+                <el-card class="large overall-line-card">
                     <overall-line :courses="courses"></overall-line>
                 </el-card>
             </el-col>
             <el-col :span="6">
-                <el-card class="overall-bar-card">
+                <el-card class="large overall-bar-card">
                     <overall-bar :courses="courses"></overall-bar>
                 </el-card>
             </el-col>