diff --git a/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less b/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
index dd0c5736ea0..fdf1328624e 100644
--- a/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
+++ b/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
@@ -6,6 +6,9 @@
 				> div {
 					position: relative;
 					font-size: 0;
+					label {
+						font-weight: 300;
+					}
 				}
 			}
 		}
@@ -17,24 +20,21 @@
 		}
 		.current-setting {
 			font-size: 14px;
-			display: inline-block;
 			width: calc(~"100% - 38px");
-		}
-		.icon-pencil {
 			display: inline-block;
-			font-size: 12px;
-			width: 20px;
-			vertical-align: top;
+			vertical-align: middle;
+			min-height: 20px;
 		}
 		.editing {
 			padding-right: 80px;
 			font-size: 14px;
+			margin: -2px 0 -1px -9px;
 		}
 		.buttons {
 			position: absolute;
-			top: 1px;
-			bottom: 1px;
-			right: 1px;
+			top: -1px;
+			bottom: 0;
+			right: 10px;
 			border-radius: 0 4px 4px 0;
 			background: black;
 			.button {
@@ -43,6 +43,10 @@
 		}
 		.button.edit {
 			padding: 8px;
+			font-size: 12px;
+			vertical-align: middle;
+			display: inline-block;
+			visibility: hidden;
 		}
 		.submit {
 			margin-top: 30px;
@@ -50,6 +54,28 @@
 		}
 		[data-edit] {
 			cursor: pointer;
+			margin-top: 3px;
+		}
+		.boolean {
+			font-size: 0;
+			> label {
+				width: calc(~"100% - 45px");
+				display: inline-block;
+				vertical-align: middle;
+			}
+			.setting-block {
+				width: 40px;
+				display: inline-block;
+				vertical-align: middle;
+				margin-left: -5px;
+			}
+		}
+		.setting-block {
+			&:hover {
+				.button.edit {
+					visibility: visible;
+				}
+			}
 		}
 	}
 }
diff --git a/packages/rocketchat-channel-settings/client/views/channelSettings.coffee b/packages/rocketchat-channel-settings/client/views/channelSettings.coffee
index 54a846a21bf..929aea7f630 100644
--- a/packages/rocketchat-channel-settings/client/views/channelSettings.coffee
+++ b/packages/rocketchat-channel-settings/client/views/channelSettings.coffee
@@ -11,6 +11,9 @@ Template.channelSettings.helpers
 	valueOf: (obj, key) ->
 		return obj?[key]
 
+	isTextInput: (value) ->
+		return value == 'text' or value == 'markdown'
+
 	showSetting: (setting, room) ->
 		if setting.showInDirect is false
 			return room.t isnt 'd'
@@ -82,6 +85,13 @@ Template.channelSettings.events
 		t.editing.set($(e.currentTarget).data('edit'))
 		setTimeout (-> t.$('input.editing').focus().select()), 100
 
+	'change [type="radio"]': (e, t) ->
+		t.editing.set($(e.currentTarget).attr('name'))
+
+	'change [type="checkbox"]': (e, t) ->
+		t.editing.set($(e.currentTarget).attr('name'))
+		t.saveSetting()
+
 	'click .cancel': (e, t) ->
 		e.preventDefault()
 		t.editing.set()
@@ -203,11 +213,12 @@ Template.channelSettings.onCreated ->
 	@saveSetting = =>
 		room = ChatRoom.findOne @data?.rid
 		field = @editing.get()
+		console.log('FIELD', field)
 
 		if @settings[field].type is 'select'
 			value = @$(".channel-settings form [name=#{field}]:checked").val()
 		else if @settings[field].type is 'boolean'
-			value = @$(".channel-settings form [name=#{field}]:checked").val() is 'true'
+			value = @$(".channel-settings form [name=#{field}]:checked").val() is 'on'
 		else
 			value = @$(".channel-settings form [name=#{field}]").val()
 
diff --git a/packages/rocketchat-channel-settings/client/views/channelSettings.html b/packages/rocketchat-channel-settings/client/views/channelSettings.html
index d2e1052869c..566fcc8d637 100644
--- a/packages/rocketchat-channel-settings/client/views/channelSettings.html
+++ b/packages/rocketchat-channel-settings/client/views/channelSettings.html
@@ -11,14 +11,14 @@
 
 							{{#if $value.canView room}}
 								{{#let value=(valueOf room $key)}}
-									<li>
+									<li class="{{$value.type}}">
 										<label>{{_ $value.label}}</label>
-										<div>
+										<div class="setting-block">
 											{{#if $eq $value.type 'text'}}
 												{{#if editing $key}}
 													<input type="text" name="{{$key}}" value="{{value}}" class="editing" />
 												{{else}}
-													<span class='current-setting'>{{value}}</span>
+													<span class='current-setting' data-edit="{{$key}}">{{value}}</span>
 												{{/if}}
 											{{/if}}
 
@@ -26,58 +26,44 @@
 												{{#if editing $key}}
 													<input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" />
 												{{else}}
-													<span class='current-setting'>{{{RocketChatMarkdown value}}}</span>
+													<span class='current-setting' data-edit="{{$key}}">{{{RocketChatMarkdown value}}}</span>
 												{{/if}}
 											{{/if}}
 
 											{{#if $eq $value.type 'select'}}
-												{{#if editing $key}}
-													{{#each toArray $value.options}}
-														<label>
-															<input type="radio" name="{{../$key}}" value="{{$key}}" checked="{{$eq value $key}}" class="editing" />
-															{{_ $value}}
-														</label>
-													{{/each}}
-												{{else}}
-													<span class='current-setting'>{{_ (valueOf $value.options value)}}</span>
-												{{/if}}
+												{{#each toArray $value.options}}
+													<div class="input radio">
+														<input type="radio" id="{{$key}}" name="{{../$key}}" value="{{$key}}" checked="{{$eq value $key}}" />
+														<label for="{{$key}}">{{_ $value}}</label>
+													</div>
+												{{/each}}
 											{{/if}}
 
 											{{#if $eq $value.type 'boolean'}}
-												{{#if editing $key}}
-													<label>
-														<input type="radio" name="{{$key}}" value="true" checked="{{$eq value true}}" class="editing" />
-														{{_ 'True'}}
-													</label>
-													<label>
-														<input type="radio" name="{{$key}}" value="false" checked="{{$neq value true}}" class="editing" />
-														{{_ 'False'}}
-													</label>
-												{{else}}
-													{{#if value}}
-														<span class='current-setting'>{{_ 'True'}}</span>
-													{{else}}
-														<span class='current-setting'>{{_ 'False'}}</span>
-													{{/if}}
-												{{/if}}
+												<div class="input checkbox toggle">
+													<input type="checkbox" id="{{$key}}" name="{{$key}}" value="{{value}}" checked="{{$eq value true}}" />
+													<label for="{{$key}}"></label>
+												</div>
 											{{/if}}
 
-											{{#if editing $key}}
-												<div class="buttons">
-													{{#unless $eq $value.type 'boolean'}}
-														<button type="button" class="button cancel">
-															<i class="icon-cancel"></i>
+											{{#if $value.canEdit room}}
+												{{#if editing $key}}
+													<div class="buttons">
+														{{#if isTextInput $value.type}}
+															<button type="button" class="button cancel">
+																<i class="icon-cancel"></i>
+															</button>
+														{{/if}}
+														<button type="button" class="button primary save">
+															<i class="icon-ok"></i>
 														</button>
-													{{/unless}}
-													<button type="button" class="button primary save">
-														<i class="icon-ok"></i>
-													</button>
-												</div>
-											{{else}}
-												{{#if $value.canEdit room}}
-													<button type="button" class="button edit">
-														<i class="icon-pencil" data-edit="{{$key}}"></i>
-													</button>
+													</div>
+												{{else}}
+													{{#if isTextInput $value.type}}
+														<button type="button" class="button edit">
+															<i class="icon-pencil" data-edit="{{$key}}"></i>
+														</button>
+													{{/if}}
 												{{/if}}
 											{{/if}}
 										</div>
diff --git a/packages/rocketchat-theme/assets/stylesheets/base.less b/packages/rocketchat-theme/assets/stylesheets/base.less
index f3167bac093..cc3993ac9fd 100644
--- a/packages/rocketchat-theme/assets/stylesheets/base.less
+++ b/packages/rocketchat-theme/assets/stylesheets/base.less
@@ -1068,7 +1068,6 @@ label.required:after {
 			margin-bottom: 0;
 		}
 		label {
-			text-transform: uppercase;
 			font-weight: 400;
 			margin-bottom: 0;
 		}
diff --git a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
index 2e071eaebe8..f6a4a09aff2 100755
--- a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
+++ b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
@@ -107,7 +107,7 @@ blockquote:before {
 	textarea {
 		background-color: @content-background-color;
 		&:focus {
-			border-color: fade(@secondary-background-contrast, 50%);
+			border-color: lighten(@secondary-background-contrast, 30%);
 		}
 	}
 }
@@ -141,6 +141,38 @@ input:-webkit-autofill {
 	background-color: transparent !important;
 }
 
+.input {
+	&.radio {
+		label {
+			&:before {
+				background-color: @content-background-color;
+				border-color: lighten(@secondary-background-contrast, 30%);
+			}
+			&:after {
+				background-color: @secondary-background-contrast;
+			}
+		}
+	}
+	&.checkbox.toggle {
+		input:checked + label:before {
+			background-color: @secondary-background-contrast;
+		}
+		label {
+			&:before {
+				background-color: lighten(@secondary-background-contrast, 30%);
+			}
+			&:after {
+				background-color: @content-background-color;
+			}
+			&:hover {
+				&:before {
+					background-color: lighten(@secondary-background-contrast, 20%);
+				}
+			}
+		}
+	}
+}
+
 
 /** ----------------------------------------------------------------------------
  * Misc typography variants
diff --git a/packages/rocketchat-theme/assets/stylesheets/utils/_forms.import.less b/packages/rocketchat-theme/assets/stylesheets/utils/_forms.import.less
new file mode 100644
index 00000000000..453d405b541
--- /dev/null
+++ b/packages/rocketchat-theme/assets/stylesheets/utils/_forms.import.less
@@ -0,0 +1,91 @@
+.input {
+    &.radio {
+        min-height: 13px;
+        position: relative;
+        input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            outline: 0;
+            z-index: -1;
+            width: 0;
+            height: 0;
+            &:checked + label:after {
+                opacity: 1;
+            }
+        }
+        label {
+            cursor: pointer;
+            user-select: none;
+            padding-left: 20px;
+            &:before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 15px;
+                height: 15px;
+                border-width: 1px;
+                border-radius: 50%;
+            }
+            &:after {
+                content: '';
+                position: absolute;
+                top: 4px;
+                left: 4px;
+                width: 7px;
+                height: 7px;
+                border-radius: 50%;
+                opacity: 0;
+                .transition(opacity .2s ease-out);
+            }
+        }
+    }
+    &.checkbox.toggle {
+        min-height: 20px;
+        position: relative;
+        input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            outline: 0;
+            z-index: -1;
+            width: 0;
+            height: 0;
+            &:checked + label:after {
+                left: 25px;
+            }
+        }
+        label {
+            cursor: pointer;
+            user-select: none;
+            padding-left: 20px;
+            &:before {
+                display: block;
+                position: absolute;
+                content: '';
+                z-index: 0;
+                top: 0;
+                left: 0;
+                box-shadow: none;
+                width: 40px;
+                height: 16px;
+                border-radius: 50px;
+                .transition(background-color .2s ease-out);
+            }
+            &:after {
+                content: '';
+                position: absolute;
+                left: 1px;
+                top: 1px;
+                border-radius: 50%;
+                width: 14px;
+                height: 14px;
+                z-index: 1;
+                .transition(left .2s ease-out);
+            }
+        }
+    }
+}
diff --git a/packages/rocketchat-theme/package.js b/packages/rocketchat-theme/package.js
index 594e04f00f3..33275b6859a 100644
--- a/packages/rocketchat-theme/package.js
+++ b/packages/rocketchat-theme/package.js
@@ -28,6 +28,7 @@ Package.onUse(function(api) {
 	api.addAssets('assets/stylesheets/global/_variables.less', 'server');
 	api.addAssets('assets/stylesheets/utils/_mixins.import.less', 'server');
 	api.addAssets('assets/stylesheets/utils/_colors.import.less', 'server');
+	api.addAssets('assets/stylesheets/utils/_forms.import.less', 'server');
 	api.addAssets('assets/stylesheets/utils/_keyframes.import.less', 'server');
 	api.addAssets('assets/stylesheets/utils/_lesshat.import.less', 'server');
 	api.addAssets('assets/stylesheets/utils/_preloader.import.less', 'server');
diff --git a/packages/rocketchat-theme/server/server.coffee b/packages/rocketchat-theme/server/server.coffee
index b36ade8333a..af2970cb52a 100644
--- a/packages/rocketchat-theme/server/server.coffee
+++ b/packages/rocketchat-theme/server/server.coffee
@@ -60,6 +60,7 @@ RocketChat.theme = new class
 		'assets/stylesheets/swipebox.min.css'
 		'assets/stylesheets/utils/_mixins.import.less'
 		'assets/stylesheets/utils/_colors.import.less'
+		'assets/stylesheets/utils/_forms.import.less'
 	]
 
 	constructor: ->