diff --git a/src/components/record-modal/re-record-icon.svg b/src/components/record-modal/icon--back.svg
similarity index 100%
rename from src/components/record-modal/re-record-icon.svg
rename to src/components/record-modal/icon--back.svg
diff --git a/src/components/record-modal/icon--play.svg b/src/components/record-modal/icon--play.svg
new file mode 100644
index 000000000..e1b586917
--- /dev/null
+++ b/src/components/record-modal/icon--play.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="44px" height="52px" viewBox="0 0 44 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>play</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M17.2214651,8.34499443 C19.7766419,4.08636653 23.9234057,4.09303946 26.4745787,8.34499443 L40.1520974,31.140859 C42.7072741,35.3994869 40.7489672,38.8517869 35.7726637,38.8517869 L7.92338006,38.8517869 C2.9495089,38.8517869 0.992773429,35.392814 3.54394641,31.140859 L17.2214651,8.34499443 Z" id="path-1"></path>
+        <filter x="-16.7%" y="-19.3%" width="133.5%" height="138.6%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="2.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.298039216   0 0 0 0 0.592156863   0 0 0 0 1  0 0 0 0.1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-623.000000, -347.000000)">
+            <g id="Step-3---Altering-Suggested-Trim" transform="translate(0.000000, 42.000000)">
+                <g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
+                    <g id="play" transform="translate(21.849131, 22.002656) rotate(90.000000) translate(-21.849131, -22.002656) ">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use stroke="#4280D7" stroke-width="1" fill="#4C97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/components/record-modal/icon--stop-playback.svg b/src/components/record-modal/icon--stop-playback.svg
new file mode 100644
index 000000000..bf7bb64be
--- /dev/null
+++ b/src/components/record-modal/icon--stop-playback.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>stop-playback</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="44" height="44" rx="4"></rect>
+        <filter x="-13.6%" y="-13.6%" width="127.3%" height="127.3%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.298039216   0 0 0 0 0.592156863   0 0 0 0 1  0 0 0 0.1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-619.000000, -345.000000)">
+            <g id="Step-4---Playing-Trim" transform="translate(0.000000, 42.000000)">
+                <g id="Play-/-Record-/-Stop" transform="translate(623.000000, 307.000000)">
+                    <g id="stop-playback">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#4C97FF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        <rect stroke="#4280D7" stroke-width="1" x="0.5" y="0.5" width="43" height="43" rx="4"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/record-modal/icon--stop-recording.svg b/src/components/record-modal/icon--stop-recording.svg
new file mode 100644
index 000000000..4bf61fb50
--- /dev/null
+++ b/src/components/record-modal/icon--stop-recording.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>stop-recording</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="20" y="0" width="44" height="44" rx="4"></rect>
+        <filter x="-13.6%" y="-13.6%" width="127.3%" height="127.3%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.4   0 0 0 0 0.101960784  0 0 0 0.1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-619.000000, -345.000000)">
+            <g id="Step-2---Recording" transform="translate(0.000000, 42.000000)">
+                <g id="Play-/-Record-/-Stop" transform="translate(603.000000, 307.000000)">
+                    <g id="stop-recording">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        <use fill="#FF661A" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        <rect stroke="#E64D00" stroke-width="1" x="20.5" y="0.5" width="43" height="43" rx="4"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/record-modal/playback-step.jsx b/src/components/record-modal/playback-step.jsx
index 01001b6ca..72879344b 100644
--- a/src/components/record-modal/playback-step.jsx
+++ b/src/components/record-modal/playback-step.jsx
@@ -5,7 +5,9 @@ const Waveform = require('../waveform/waveform.jsx');
 const Meter = require('../meter/meter.jsx');
 
 const styles = require('./record-modal.css');
-const reRecordIcon = require('./re-record-icon.svg');
+const backIcon = require('./icon--back.svg');
+const stopIcon = require('./icon--stop-playback.svg');
+const playIcon = require('./icon--play.svg');
 
 const PlaybackStep = props => (
     <Box>
@@ -32,60 +34,7 @@ const PlaybackStep = props => (
                 className={styles.mainButton}
                 onClick={props.playing ? props.onStopPlaying : props.onPlay}
             >
-                <svg
-                    height={70}
-                    style={{
-                        overflow: 'visible'
-                    }}
-                    width={70}
-                >
-                    <g transform="translate(-35,-35) scale(1.5) translate(23, 23)">
-                        {props.playing ? (
-                            <g>
-                                <rect
-                                    fill="#4C97FF"
-                                    height={30}
-                                    rx={3}
-                                    ry={3}
-                                    stroke="#4280D7"
-                                    width={30}
-                                    x={10}
-                                    y={10}
-                                />
-                                <rect
-                                    className={styles.pulser}
-                                    fill="#4C97FF"
-                                    height={30}
-                                    rx={3}
-                                    ry={3}
-                                    stroke="#4280D7"
-                                    width={30}
-                                    x={10}
-                                    y={10}
-                                />
-                            </g>
-                        ) : (
-                            <g>
-                                <polygon
-                                    fill="#4280D7"
-                                    points="15 15 35 25 15 35"
-                                    stroke="#4280D7"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth="7"
-                                />
-                                <polygon
-                                    fill="#4C97FF"
-                                    points="15 15 35 25 15 35"
-                                    stroke="#4C97FF"
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth="5"
-                                />
-                            </g>
-                        )}
-                    </g>
-                </svg>
+                <img src={props.playing ? stopIcon : playIcon} />
                 <div className={styles.helpText}>
                     <span className={styles.playingText}>
                         {props.playing ? 'Stop' : 'Play'}
@@ -98,7 +47,7 @@ const PlaybackStep = props => (
                 className={styles.cancelButton}
                 onClick={props.onBack}
             >
-                <img src={reRecordIcon} /> Re-record
+                <img src={backIcon} /> Re-record
             </button>
             <button
                 className={styles.okButton}
diff --git a/src/components/record-modal/record-modal.css b/src/components/record-modal/record-modal.css
index 72426d2a4..27c1bb40c 100644
--- a/src/components/record-modal/record-modal.css
+++ b/src/components/record-modal/record-modal.css
@@ -93,6 +93,7 @@ $sides: 5rem;
 }
 
 .help-text {
+    margin: 10px auto 0;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: rgb(167, 170, 181);
     font-size: 0.95rem;
@@ -170,20 +171,17 @@ $sides: 5rem;
     height: 180px;
 }
 
-/* SVG styling */
-.pulser {
-    transform: scale(1.0);
-    transform-origin: center center;
-    animation: pulse-me 0.5s ease-in-out infinite alternate;
+.record-button {
+    overflow: visible;
 }
 
-@keyframes pulse-me {
-    0% {
-        transform: scale(1.05);
-        opacity: 0.05;
-    }
-    100% {
-        opacity: 0.2;
-        transform: scale(1.25);
-    }
+.record-button-circle {
+    fill: #FF661A;
+    stroke: #E64D00;
+}
+
+.record-button-circle-outline {
+    fill: #FF661A;
+    opacity: 0.2;
+    transition: 0.1s;
 }
diff --git a/src/components/record-modal/recording-step.jsx b/src/components/record-modal/recording-step.jsx
index 3f4b08c49..5cb13e14b 100644
--- a/src/components/record-modal/recording-step.jsx
+++ b/src/components/record-modal/recording-step.jsx
@@ -5,6 +5,7 @@ const Meter = require('../meter/meter.jsx');
 const Waveform = require('../waveform/waveform.jsx');
 
 const styles = require('./record-modal.css');
+const stopIcon = require('./icon--stop-recording.svg');
 
 const RecordingStep = props => (
     <Box>
@@ -36,55 +37,28 @@ const RecordingStep = props => (
                 className={styles.mainButton}
                 onClick={props.recording ? props.onStopRecording : props.onRecord}
             >
-                <svg
-                    height={70}
-                    width={70}
-                >
-                    <g transform="translate(-35,-35) scale(1.5) translate(23, 23)">
-                        {props.recording ? (
-                            <g>
-                                <rect
-                                    fill="#FF661A"
-                                    height={30}
-                                    rx={3}
-                                    ry={3}
-                                    stroke="#E64D00"
-                                    width={30}
-                                    x={10}
-                                    y={10}
-                                />
-                                <rect
-                                    className={styles.pulser}
-                                    fill="#FF661A"
-                                    height={30}
-                                    rx={3}
-                                    ry={3}
-                                    stroke="#E64D00"
-                                    width={30}
-                                    x={10}
-                                    y={10}
-                                />
-                            </g>
-                        ) : (
-                            <g>
-                                <circle
-                                    cx={25}
-                                    cy={25}
-                                    fill="#FF661A"
-                                    r={15}
-                                    stroke="#E64D00"
-                                />
-                                <circle
-                                    cx={25}
-                                    cy={25}
-                                    fill="#FF661A"
-                                    r={18 + props.level * 10}
-                                    style={{opacity: 0.15, transition: '0.1s'}}
-                                />
-                            </g>
-                        )}
-                    </g>
-                </svg>
+                {props.recording ? (
+                    <img src={stopIcon} />
+                ) : (
+                    <svg
+                        className={styles.recordButton}
+                        height="52"
+                        width="52"
+                    >
+                        <circle
+                            className={styles.recordButtonCircle}
+                            cx="26"
+                            cy="26"
+                            r="25"
+                        />
+                        <circle
+                            className={styles.recordButtonCircleOutline}
+                            cx="26"
+                            cy="26"
+                            r={27 + props.level * 5}
+                        />
+                    </svg>
+                )}
                 <div className={styles.helpText}>
                     <span className={styles.recordingText}>
                         {props.recording ? 'Stop recording' : 'Record'}
diff --git a/src/lib/audio/audio-recorder.js b/src/lib/audio/audio-recorder.js
index d8aef0ec7..17fddb433 100644
--- a/src/lib/audio/audio-recorder.js
+++ b/src/lib/audio/audio-recorder.js
@@ -135,6 +135,7 @@ AudioRecorder.prototype.stop = function () {
 AudioRecorder.prototype.dispose = function () {
     this.scriptProcessorNode.onaudioprocess = null;
     this.scriptProcessorNode.disconnect();
+    this.analyserNode.disconnect();
     this.sourceNode.disconnect();
     this.mediaStreamSource.disconnect();
     this.userMediaStream.getAudioTracks()[0].stop();