diff --git a/src/assets/main.scss b/src/assets/main.scss
index 07530a2..60f76a2 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -1,11 +1,6 @@
 @charset "utf-8";
 @import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap');
-
-$family-monospace: 'Oxygen Mono',
-  monospace;
-
-$family-primary: $family-monospace;
-
+@import "variables";
 @import '../../node_modules/bulma/bulma.sass';
 
 *,
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
new file mode 100644
index 0000000..8403393
--- /dev/null
+++ b/src/assets/variables.scss
@@ -0,0 +1,7 @@
+$family-monospace: 'Oxygen Mono',
+  monospace;
+
+$family-primary: $family-monospace;
+$primary: #192a56;
+$info: #40739e;
+$link: #2f3640;
\ No newline at end of file
diff --git a/src/modules/record/components/RecordControls.vue b/src/modules/record/components/RecordControls.vue
index e23c2fd..7e4fbc3 100644
--- a/src/modules/record/components/RecordControls.vue
+++ b/src/modules/record/components/RecordControls.vue
@@ -89,7 +89,7 @@ whenever(logicAnd(notUsingInput, s), () => {
 </script>
 
 <template>
-  <div class="record-controls buttons">
+  <div class="record-controls buttons has-addons">
     <template v-if="!record || !record.end">
       <button v-if="canStart" @click="startRecording" class="button is-primary">
         start
diff --git a/src/modules/record/components/StepRecord.vue b/src/modules/record/components/StepRecord.vue
index 3c49a34..b6bde96 100644
--- a/src/modules/record/components/StepRecord.vue
+++ b/src/modules/record/components/StepRecord.vue
@@ -73,7 +73,10 @@ const isSuperiorToEstimation = computed(() => {
 </template>
 
 <style scoped lang="scss">
+@import '@/assets/variables';
+
 $blob-size: 15px;
+$blob-color: $link;
 
 .step-record {
   .status {
@@ -96,8 +99,8 @@ $blob-size: 15px;
     border-radius: 50%;
     height: $blob-size;
     width: $blob-size;
-    background: rgba(51, 217, 178, 1);
-    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
+    background: $blob-color;
+    box-shadow: 0 0 0 0 $blob-color;
     animation: pulse 2s infinite;
   }
 
@@ -113,7 +116,7 @@ $blob-size: 15px;
 @keyframes pulse {
   0% {
     transform: scale(0.95);
-    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
+    box-shadow: 0 0 0 0 $blob-color;
   }
 
   70% {