diff --git a/src/pages/overall/overall.scss b/src/pages/overall/overall.scss
index 05df0af..2465bb6 100644
--- a/src/pages/overall/overall.scss
+++ b/src/pages/overall/overall.scss
@@ -12,18 +12,23 @@
     flex-direction: column;
 }
 
-.span-gpa-header
+.gpa
+{
+    display: block;
+}
+
+.gpa.header
 {
     font-size: 14px;
 }
 
-.span-gpa
+.gpa.text
 {
     font-size: 35px;
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
 }
 
-.gpa-time
+.gpa.time
 {
     font-size: 14px;
 }
diff --git a/src/pages/overall/overall.vue b/src/pages/overall/overall.vue
index 93c5de4..125845b 100644
--- a/src/pages/overall/overall.vue
+++ b/src/pages/overall/overall.vue
@@ -4,14 +4,12 @@
             <el-col :span="4">
                 <el-card style="margin-left: 20px">
                     <div style="padding: 14px;">
-                        <span class="span-gpa-header">GPA:</span>
-                        <br>
-                        <span class="span-gpa">{{getGPA().gpa}}</span>
-                        <span class="span-gpa">(Out of {{getGPA().max}})</span>
-                        <div class="bottom clearfix gpa-time">
-                            <time class="time">{{ new Date().toDateString() }}</time>
-                            <br>
-                            <el-button type="text" class="button">Button</el-button>
+                        <span class="gpa header">GPA:</span>
+                        <span class="gpa text">{{getGPA().gpa}}</span>
+                        <span class="gpa max">(Out of {{getGPA().max}})</span>
+                        <div class="bottom clearfix gpa time">
+                            <time>{{ new Date().toDateString() }}</time>
+                            <el-button type="text" class="gpa button">Button</el-button>
                         </div>
                     </div>
                 </el-card>