diff --git a/src/pages/overall/overall.ts b/src/pages/overall/overall.ts
index f2df7e0..2799909 100644
--- a/src/pages/overall/overall.ts
+++ b/src/pages/overall/overall.ts
@@ -1,10 +1,11 @@
 import {Component, Prop, Vue} from 'vue-property-decorator';
 import GraphOverall from '@/pages/overall/graph-overall/graph-overall';
+import GraphAverage from '@/pages/overall/graph-average/graph-average';
 import {Course} from '@/components/app/app';
 import {GPAUtils} from '@/utils/gpa-utils';
 
 @Component({
-    components: {GraphOverall}
+    components: {GraphOverall, GraphAverage}
 })
 export default class Overall extends Vue
 {
diff --git a/src/pages/overall/overall.vue b/src/pages/overall/overall.vue
index ebac7c5..b665d17 100644
--- a/src/pages/overall/overall.vue
+++ b/src/pages/overall/overall.vue
@@ -13,11 +13,16 @@
                     </div>
                 </el-card>
             </el-col>
-            <el-col :span="20">
-                <el-card style="margin-right: 20px">
+            <el-col :span="16">
+                <el-card>
                     <graph-overall :courses="courses"></graph-overall>
                 </el-card>
             </el-col>
+            <el-col :span="4">
+                <el-card style="margin-right: 20px">
+                    <graph-average :courses="courses"></graph-average>
+                </el-card>
+            </el-col>
         </el-row>
         <div class=""></div>
     </div>