diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index d2a874ad..06e240ed 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -41,6 +41,14 @@ class Preferences extends React.Component {
       preference__option: true,
       'preference__option--selected': !this.props.isTabIndent
     });
+    let autosaveOnClass = classNames({
+      preference__option: true,
+      'preference__option--selected': this.props.autosave
+    });
+    let autosaveOffClass = classNames({
+      preference__option: true,
+      'preference__option--selected': !this.props.autosave
+    });
     return (
       <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
         <div className="preferences__heading">
@@ -118,10 +126,18 @@ class Preferences extends React.Component {
         </div>
         <div className="preference">
           <h4 className="preference__title">Autosave</h4>
-          <label htmlFor="autosave-on">On</label>
-          <input type="radio" id="autosave-on" name="autosave" value="true" checked={this.props.autosave} onChange={this.handleUpdateAutosave} />
-          <label htmlFor="autosave-off">Off</label>
-          <input type="radio" id="autosave-off" name="autosave" value="false" checked={!this.props.autosave} onChange={this.handleUpdateAutosave} />
+          <div className="preference__options">
+            <button
+              className={autosaveOnClass}
+              onClick={() => this.props.setAutosave(true)}
+              aria-label="autosave on"
+            >On</button>
+            <button
+              className={autosaveOffClass}
+              onClick={() => this.props.setAutosave(false)}
+              aria-label="autosave off"
+            >Off</button>
+          </div>
         </div>
       </section>
     );
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 9675bb59..74bb1d70 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -95,7 +95,7 @@
 %preference-option {
 	background-color: $light-button-background-color;
 	color: $light-inactive-text-color;
-	font-size: #{14 / $base-font-size}rem;
+	font-size: #{12 / $base-font-size}rem;
 	cursor: pointer;
 	text-align: left;
 	margin-bottom: #{5 / $base-font-size}rem;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index ca877fb0..b304fadd 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -61,6 +61,7 @@
 	margin: 0;
 	line-height: #{20 / $base-font-size}rem;
 	color: $light-inactive-text-color;
+	font-size: #{9 / $base-font-size}rem;
 	&:hover {
 		color: $light-inactive-text-color;
 	}
@@ -70,13 +71,38 @@
 	display: flex;
 	flex-direction: column;
 	width: #{90 / $base-font-size}rem;
+	padding-left: #{28 / $base-font-size}rem;
 }
 
 .preference__option {
 	@extend %preference-option;
 	list-style-type: none;
-	padding-left: #{28 / $base-font-size}rem;
+	padding: 0;
 	&--selected {
 		@extend %preference-option--selected;
 	}
 }
+
+.preference__autosave-input {
+	// display: none;
+}
+
+.preference__autosave-label {
+	font-size: #{12 / $base-font-size}rem;
+	color: $light-inactive-text-color;
+	cursor: pointer;
+	&:hover {
+		color: $light-primary-text-color;
+	}
+}
+
+.preference__autosave-input:checked + .preference__autosave-label {
+	color: $light-primary-text-color;
+}
+
+.preference__options {
+	display: flex;
+	justify-content: space-between;
+	width: #{70 / $base-font-size}rem;
+}
+