diff --git a/app/server/static/css/forum.css b/app/server/static/css/forum.css
index 85c1914f..153d4f71 100644
--- a/app/server/static/css/forum.css
+++ b/app/server/static/css/forum.css
@@ -170,8 +170,9 @@ p {
 
 }
 
-/*---------- SPACING ----------*/
-
+.has-background-royalblue {
+  background-color:royalblue !important;
+}
 
 /* Padding Zero */
 
@@ -438,6 +439,17 @@ p {
 	}
 }
 
+.pbrem075 {
+  padding-bottom: 0.75rem;
+}
+
+.mrrem025 {
+  margin-right: 0.25rem;
+}
+
+.mlrem-0375 {
+  margin-left:-.375rem;
+}
 
 /* Margin Auto */
 
diff --git a/app/server/templates/admin/admin_base.html b/app/server/templates/admin/admin_base.html
index 06891a35..c4b61de4 100644
--- a/app/server/templates/admin/admin_base.html
+++ b/app/server/templates/admin/admin_base.html
@@ -18,7 +18,7 @@
 </a>
 {% endblock %}
 {% block content %}
-<div class="columns" id="mail-app" style="margin-right:0;" v-cloak>
+<div class="columns mr0" id="mail-app" v-cloak>
   <aside class="column is-2 aside">
     <div>
       <div class="main">
diff --git a/app/server/templates/admin/dataset_upload.html b/app/server/templates/admin/dataset_upload.html
index 1f03ae7f..e2cd97b1 100644
--- a/app/server/templates/admin/dataset_upload.html
+++ b/app/server/templates/admin/dataset_upload.html
@@ -26,10 +26,10 @@
           {% csrf_token %}
           <div class="section">
             <div class="control">
-              <label class="radio" style="margin-bottom:10px;">
+              <label class="radio mb10">
                 <input type="radio" name="format" checked> Upload a TXT file from your computer
               </label>
-              <div class="file has-name is-small" style="margin-bottom:20px;">
+              <div class="file has-name is-small mb20">
                 <label class="file-label">
                   <input class="file-input" type="file" ref="file" name="csv_file" required v-on:change="handleFileUpload()">
                   <span class="file-cta">
diff --git a/app/server/templates/admin/guideline.html b/app/server/templates/admin/guideline.html
index 47310993..1764b082 100644
--- a/app/server/templates/admin/guideline.html
+++ b/app/server/templates/admin/guideline.html
@@ -9,7 +9,7 @@
     <textarea class="editorMarkdown_textarea" :value="input" @input="update"></textarea>
   </div>
   <div class="column is-6 has-background-white" style="border-right: 1px solid #dbdbdb;border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb">
-    <div class="content" style="line-height: 150%;padding: 20px;">
+    <div class="content pt20 pb20 pr20 pl20" style="line-height: 150%">
       <div v-html="compiledMarkdown"></div>
     </div>
   </div>
diff --git a/app/server/templates/admin/label.html b/app/server/templates/admin/label.html
index 9dedfb4d..b01becfe 100644
--- a/app/server/templates/admin/label.html
+++ b/app/server/templates/admin/label.html
@@ -17,11 +17,11 @@
   <div class="card-content">
     <div class="has-text-right">
 
-      <div class="field is-grouped is-grouped-multiline has-text-weight-bold" style="padding-bottom:.75rem;">
+      <div class="field is-grouped is-grouped-multiline has-text-weight-bold pbrem075">
         <div class="control" v-for="label in labels">
           <div class="tags has-addons">
             <span class="tag is-medium" v-bind:style="{ color: label.text_color, 'background-color': label.background_color }">
-              <button class="delete is-small" style="margin-right:.25rem;margin-left:-.375rem;" @click="removeLabel(label)"></button>
+              <button class="delete is-small mrrem025 mlrem-0375" @click="removeLabel(label)"></button>
               [[ label.text ]]
             </span>
             <span class="tag is-medium">[[ label.shortcut ]]</span>
@@ -30,9 +30,9 @@
       </div>
 
       <div class="field is-horizontal bordered-row">
-        <label class="label column is-3" style="margin-bottom:0;">Preview</label>
+        <label class="label column is-3 mb0">Preview</label>
         <div class="control column is-6">
-          <div class="tags has-addons" style="font-weight:700;">
+          <div class="tags has-addons has-text-weight-bold">
             <a class="tag is-medium" v-bind:style="{ color: textColor, backgroundColor: backgroundColor }">
               [[ labelText ]]
             </a>
@@ -42,14 +42,14 @@
       </div>
 
       <div class="field is-horizontal bordered-row">
-        <label class="label column is-3" style="margin-bottom:0;">Label Name</label>
+        <label class="label column is-3 mb0">Label Name</label>
         <div class="control column is-6">
           <input class="input" type="text" placeholder="Text input" v-model="labelText">
         </div>
       </div>
 
       <div class="field is-horizontal bordered-row">
-        <label class="label column is-3" style="margin-bottom:0;">Shortcut Key</label>
+        <label class="label column is-3 mb0">Shortcut Key</label>
         <div class="control column is-6">
           <div class="select">
             <select v-model="selectedShortkey">
@@ -64,14 +64,14 @@
 
       <div class="field is-horizontal bordered-row">
 
-        <label class="label column is-3" style="margin-bottom:0;">Background Color</label>
+        <label class="label column is-3 mb0">Background Color</label>
         <div class="control column is-6">
           <input class="input" type="color" v-model="backgroundColor">
         </div>
       </div>
 
       <div class="field is-horizontal bordered-row">
-        <label class="label column is-3" style="margin-bottom:0;">Text Color</label>
+        <label class="label column is-3 mb0">Text Color</label>
         <div class="control column is-6">
           <input class="input" type="color" v-model="textColor">
         </div>
diff --git a/app/server/templates/annotation/annotation_base.html b/app/server/templates/annotation/annotation_base.html
index e457b9f2..3d4869f5 100644
--- a/app/server/templates/annotation/annotation_base.html
+++ b/app/server/templates/annotation/annotation_base.html
@@ -10,7 +10,7 @@
   <aside class="column is-3 aside hero is-fullheight">
     <div>
 
-      <div class="main" style="padding: 20px 20px">
+      <div class="main pr20 pl20">
         <div class="field has-addons">
           <div class="control is-expanded">
             <input class="input" type="text" placeholder="Search document" v-model="searchQuery" @keyup.enter="submit" style="border-right:none;box-shadow: none;-webkit-box-shadow: none;">
@@ -20,12 +20,12 @@
             <div class="dropdown is-hoverable is-right">
               <div class="dropdown-trigger">
                 <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
-                  <span class="icon has-text-grey" style="padding-right:0;">
+                  <span class="icon has-text-grey pr0">
                     <i class="fas fa-angle-down" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
-              <div class="dropdown-menu" id="dropdown-menu" role="menu" style="padding-top:0">
+              <div class="dropdown-menu pt0" id="dropdown-menu" role="menu">
                 <div class="dropdown-content">
                   <a class="dropdown-item">
                     <label class="radio">
@@ -49,7 +49,7 @@
         </div>
       </div>
 
-      <div class="main" style="padding:0px 20px;">
+      <div class="main pt0 pb0 pr20 pl20">
         <span>About [[ count ]] results</span>
       </div>
 
@@ -85,7 +85,7 @@
         <progress class="progress is-inline-block" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
       </div>
       <div class="column is-8">
-        <span style="margin-left:10px;"><strong>[[ total - remaining ]]</strong></span>/<span>[[ total ]]</span>
+        <span class="ml10"><strong>[[ total - remaining ]]</strong></span>/<span>[[ total ]]</span>
       </div>
       <div class="column is-1 has-text-right">
         <a class="button" @click="isActive=!isActive">
@@ -98,7 +98,7 @@
 
     {% block annotation-area %} {% endblock %}
 
-    <div class="level" style="margin-top:30px;">
+    <div class="level mt30">
       <a class="button level-left" v-on:click="prevPage" v-shortkey="{prev1: ['ctrl', 'p'], prev2: ['arrowup'], prev3: ['arrowleft']}"
         @shortkey="prevPage">
         <span class="icon">
diff --git a/app/server/templates/annotation/document_classification.html b/app/server/templates/annotation/document_classification.html
index 0e7c5356..4542fc5b 100644
--- a/app/server/templates/annotation/document_classification.html
+++ b/app/server/templates/annotation/document_classification.html
@@ -3,7 +3,7 @@
 {% block annotation-area %}
 <div class="card">
   <header class="card-header">
-    <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
+    <div class="card-header-title has-background-royalblue" style="padding:1.5rem;">
       <div class="field is-grouped is-grouped-multiline">
         <div class="control" v-for="(label, item) in labels">
           <div class="tags has-addons">
diff --git a/app/server/templates/annotation/seq2seq.html b/app/server/templates/annotation/seq2seq.html
index 3601c1ac..3b00ccc2 100644
--- a/app/server/templates/annotation/seq2seq.html
+++ b/app/server/templates/annotation/seq2seq.html
@@ -1,7 +1,7 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
 {% block annotation-area %}
-<div class="card" style="background-color:royalblue;color:white;font-weight:bold;">
+<div class="card has-text-weight-bold has-text-white has-background-royalblue">
   <div class="card-content">
     <div class="content" v-if="docs[pageNumber]">
       [[ docs[pageNumber].text ]]
diff --git a/app/server/templates/annotation/sequence_labeling.html b/app/server/templates/annotation/sequence_labeling.html
index bb6ba54a..08139081 100644
--- a/app/server/templates/annotation/sequence_labeling.html
+++ b/app/server/templates/annotation/sequence_labeling.html
@@ -3,7 +3,7 @@
 {% block annotation-area %}
 <div class="card">
   <header class="card-header">
-    <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
+    <div class="card-header-title has-background-royalblue" style="padding:1.5rem;">
       <div class="field is-grouped is-grouped-multiline">
         <div class="control" v-for="label in labels">
           <div class="tags has-addons">
diff --git a/app/server/templates/demo/demo_named_entity.html b/app/server/templates/demo/demo_named_entity.html
index 83560e84..fcf935a7 100644
--- a/app/server/templates/demo/demo_named_entity.html
+++ b/app/server/templates/demo/demo_named_entity.html
@@ -3,7 +3,7 @@
 {% block annotation-area %}
 <div class="card">
   <header class="card-header">
-    <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
+    <div class="card-header-title has-background-royalblue" style="padding:1.5rem;">
       <div class="field is-grouped is-grouped-multiline">
         <div class="control" v-for="label in labels">
           <div class="tags has-addons">
diff --git a/app/server/templates/demo/demo_text_classification.html b/app/server/templates/demo/demo_text_classification.html
index 79c40213..015a19a5 100644
--- a/app/server/templates/demo/demo_text_classification.html
+++ b/app/server/templates/demo/demo_text_classification.html
@@ -3,7 +3,7 @@
 {% block annotation-area %}
 <div class="card">
   <header class="card-header">
-    <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
+    <div class="card-header-title has-background-royalblue" style="padding:1.5rem;">
       <div class="field is-grouped is-grouped-multiline">
         <div class="control" v-for="(label, item) in labels">
           <div class="tags has-addons">
diff --git a/app/server/templates/demo/demo_translation.html b/app/server/templates/demo/demo_translation.html
index ba47d910..2a5bc3f7 100644
--- a/app/server/templates/demo/demo_translation.html
+++ b/app/server/templates/demo/demo_translation.html
@@ -1,7 +1,7 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
 {% block annotation-area %}
-<div class="card" style="background-color:royalblue;color:white;font-weight:bold;">
+<div class="card has-text-weight-bold	has-text-white has-background-royalblue">
   <div class="card-content">
     <div class="content" v-if="docs[pageNumber]">
       [[ docs[pageNumber].text ]]
diff --git a/app/server/templates/projects.html b/app/server/templates/projects.html
index bb2c675e..14c59104 100644
--- a/app/server/templates/projects.html
+++ b/app/server/templates/projects.html
@@ -26,7 +26,7 @@
   </section>
 
   <div class="container">
-    <div class="columns" style="margin-top:0">
+    <div class="columns mt0">
       <div class="column is-3">
         <aside class="menu">
           <p class="menu-label">
@@ -66,7 +66,7 @@
                 </div>
                 {% endfor %}
               </section>
-              <footer class="modal-card-foot" style="background-color:#dbdbdb !important;padding:20px !important;">
+              <footer class="modal-card-foot pt20 pb20 pr20 pl20 has-background-white-ter">
                 <button class="button is-primary">Create</button>
                 <button class="button" @click="isActive=!isActive">Cancel</button>
               </footer>
@@ -107,7 +107,7 @@
                   <section class="modal-card-body">
                     Are you sure you want to delete project?
                   </section>
-                  <footer class="modal-card-foot" style="background-color:#dbdbdb !important;padding:20px !important;">
+                  <footer class="modal-card-foot pt20 pb20 pr20 pl20 has-background-white-ter">
                     <button class="button is-danger" @click="deleteProject(project)">Delete</button>
                     <button class="button" @click="isDelete=!isDelete">Cancel</button>
                   </footer>
@@ -115,7 +115,7 @@
               </div>
               <div class="card-footer">
                 <a v-bind:href="'/projects/' + project.id + '/docs'" class="card-footer-item">Edit</a>
-                <a href="#1" class="card-footer-item has-text-danger" style="font-weight:700" @click="isDelete=!isDelete">Delete</a>
+                <a href="#1" class="card-footer-item has-text-danger has-text-weight-bold" @click="isDelete=!isDelete">Delete</a>
               </div>
               {% endif %}
             </div>