diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
index af1369e..8e3f8cb 100644
--- a/src/assets/css/_variables.scss
+++ b/src/assets/css/_variables.scss
@@ -11,3 +11,7 @@ $chat-standard-padding-s: 16px;
 $chat-standard-padding-xs: 8px;
 $chat-text-size: 1px;
 $chat-button-height: 50px;
+
+$voice-recorder-color: #6f6f6f;
+$voice-recording-color: red;
+$voice-recorded-color: #3ae17d;
\ No newline at end of file
diff --git a/src/assets/css/components/_voice-recorder.scss b/src/assets/css/components/_voice-recorder.scss
new file mode 100644
index 0000000..352e59c
--- /dev/null
+++ b/src/assets/css/components/_voice-recorder.scss
@@ -0,0 +1,30 @@
+.grow-enter-active,
+.grow-leave-active {
+  transition-timing-function: ease-out;
+  transition: opacity 0.3s, border-radius 0.5s, transform 0.5s;
+}
+.grow-enter,
+.grow-leave-to {
+  transform: translateX(var(--v-mic-button-initial-translate)) scaleX(var(--v-mic-button-initial-scale));
+  opacity: 0;
+  border-radius: 25px !important;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+.voice-recorder-btn {
+  padding: 30px;
+  background-color: $voice-recorder-color;
+
+  &.recording {
+    background-color: $voice-recording-color;
+  }
+  &.recorded {
+    background-color: $voice-recorded-color;
+  }
+}
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index 460fe46..8d7984b 100644
--- a/src/components/VoiceRecorder.vue
+++ b/src/components/VoiceRecorder.vue
@@ -17,16 +17,16 @@
             <v-btn
               v-if="state == states.RECORDING"
               id="btn-pause"
-              style="background-color: white; padding: 30px"
               icon
+              class="voice-recorder-btn recording"
               @click.stop="pauseRecording"
             >
-              <v-icon color="black">stop</v-icon>
+              <v-icon color="white">stop</v-icon>
             </v-btn>
             <v-btn
               v-else-if="state == states.RECORDED"
               id="btn-send"
-              style="background-color: #3ae17d; padding: 30px"
+              class="voice-recorder-btn recorded"
               icon
               :disabled="!recordedFile"
               @click.stop="send"
@@ -36,7 +36,7 @@
             <v-btn
               v-else
               id="btn-record"
-              style="background-color: red; padding: 30px"
+              class="voice-recorder-btn"
               icon
               @click.stop="startRecording"
             >
@@ -196,6 +196,7 @@ export default {
       recordingLocked: false,
       recordedFile: null,
       errorMessage: null,
+      recorder: null
     };
   },
   watch: {
@@ -353,13 +354,8 @@ export default {
     },
     cancelRecording() {
       this.state = State.INITIAL;
-      if (this.recorder) {
-        this.recorder.stopRecording();
-        //this.recorder.destroy();
-        this.recorder = null;
-      }
-      this.stopRecordTimer();
-      this.recordingTime = String.fromCharCode(160); // nbsp;
+      this.recorder.stop();
+      this.recorder = null;
       this.close();
     },
     pauseRecording() {
@@ -443,27 +439,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
-</style>
-<style>
-.grow-enter-active,
-.grow-leave-active {
-  transition-timing-function: ease-out;
-  transition: opacity 0.3s, border-radius 0.5s, transform 0.5s;
-}
-.grow-enter,
-.grow-leave-to {
-  transform: translateX(var(--v-mic-button-initial-translate))
-    scaleX(var(--v-mic-button-initial-scale));
-  opacity: 0;
-  border-radius: 25px !important;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
+  @import "@/assets/css/chat.scss";
+  @import "@/assets/css/components/voice-recorder.scss";
 </style>