diff --git a/src/pages/overall/overall-course/course-head/course-head.vue b/src/pages/overall/overall-course/course-head/course-head.vue
index a0d1cc3..3e36fa8 100644
--- a/src/pages/overall/overall-course/course-head/course-head.vue
+++ b/src/pages/overall/overall-course/course-head/course-head.vue
@@ -1,34 +1,41 @@
 <template>
     <div id="course-head" class="course-card-content main vertical-center"
-         :class="clickable ? 'clickable' : ''" @click="redirect">
+         :class="clickable ? 'clickable' : ''">
 
-        <div id="block-info">
-            <div id="name">{{course.name}}</div>
-            <div id="teacher">{{course.teacherName}}</div>
+        <!-- Rating button -->
+        <div id="block-rate" v-if="displayRate" class="vertical-center" @click="ratingDialog = true">
+            Give a<br>Rating!
         </div>
 
-        <div id="block-rate" v-if="displayRate" class="vertical-center">
-            Give a<br>rating!
-        </div>
-
-        <div id="block-grade">
-            <div id="grade">
-                <span id="letter">{{course.letterGrade}} </span>
-                <span id="numeric">{{course.numericGrade === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>
-                <span id="percent" v-if="course.numericGrade !== undefined">%</span>
+        <!-- Main content -->
+        <div id="content" @click="redirect">
+            <!-- Left -->
+            <div id="block-info">
+                <div id="name">{{course.name}}</div>
+                <div id="teacher">{{course.teacherName}}</div>
             </div>
-            <div id="updates" @click="redirect" :class="unread === 0 ? 'none' : 'unread'">
-                <span id="unread-number">{{unread}}</span>
-                <span id="unread-text" :class="clickable ? 'clickable' : ''">new update{{unread >= 2 ? 's' : ''}}</span>
+
+            <!-- Right -->
+            <div id="block-grade">
+                <div id="grade">
+                    <span id="letter">{{course.letterGrade}} </span>
+                    <span id="numeric">{{course.numericGrade === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>
+                    <span id="percent" v-if="course.numericGrade !== undefined">%</span>
+                </div>
+                <div id="updates" @click="redirect" :class="unread === 0 ? 'none' : 'unread'">
+                    <span id="unread-number">{{unread}}</span>
+                    <span id="unread-text" :class="clickable ? 'clickable' : ''">new update{{unread >= 2 ? 's' : ''}}</span>
+                </div>
+            </div>
+
+            <div id="block-term-grades" v-if="course.rawSelectedTerm === -1"
+                 v-for="term in course.allGradingPeriods.slice().reverse()">
+                <div id="term">Term {{term + 1}}</div>
+                <div id="term-letter">{{course.letterGradeTerm(term)}}</div>
+                <div id="term-numeric">{{course.numericGradeTerm(term).toFixed(1)}}%</div>
             </div>
         </div>
 
-        <div id="block-term-grades" v-if="course.rawSelectedTerm === -1"
-             v-for="term in course.allGradingPeriods.slice().reverse()">
-            <div id="term">Term {{term + 1}}</div>
-            <div id="term-letter">{{course.letterGradeTerm(term)}}</div>
-            <div id="term-numeric">{{course.numericGradeTerm(term).toFixed(1)}}%</div>
-        </div>
         <!-- Popup -->
         <el-dialog :title="`Give a Rating for ${course.name}`" :visible.sync="ratingDialog" :show-close="false"
                    width="50%">