diff --git a/frontend/src/components/KeggCard.vue b/frontend/src/components/KeggCard.vue
index 4288304b05cd509bf5e2850f836d518d954d75d4..38f1e60d69b16fa8a8cd78da7a99898b16eca5df 100644
--- a/frontend/src/components/KeggCard.vue
+++ b/frontend/src/components/KeggCard.vue
@@ -1,14 +1,14 @@
 <template>
   <v-flex xs12 md6 lg4>
     <v-card>
-      <v-toolbar-title class="function white--text">
+      <v-toolbar-title class="genefunction white--text">
         <v-icon class="primary--text">account_tree</v-icon>
         KEGG Function
       </v-toolbar-title>
       <div class="text-xs-center" v-if="kegg_detail.length == 0">
         <v-progress-circular
           indeterminate
-          color="function"
+          color="genefunction"
         ></v-progress-circular>
       </div>
       <v-list v-else>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index f8da182a6f87ecc413cb94c14618e17de8b29342..f72cce566678c7832f42cbdd49d25aaec2fcda3b 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -13,7 +13,7 @@ Vue.use(Vuetify, {
     primary: '#263238',
     secondary: '#508991',
     tertiary: '#f5edf0',
-    function: '#65b891',
+    genefunction: '#65b891',
     taxonomy: '#886f68',
   },
 });