diff --git a/app/components/button.js b/app/components/button.js
index 8a0dc01..0235ec4 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -7,9 +7,9 @@ import { on } from '@ember/modifier';
 import eq from '../helpers/eq';
 
 export const sizes = {
-  sm: 'text-sm py-0.5',
-  md: 'px-3 py-2',
-  lg: 'px-4 py-3',
+  sm: 'w-20 text-sm px-2.5 py-1',
+  md: 'w-24 px-3 py-2',
+  lg: 'w-24 px-4 py-3',
 };
 
 export const iconSizes = {
@@ -29,7 +29,7 @@ export default class ButtonComponent extends Component {
       disabled={{this.disabled}}
       type={{this.type}}
       class="
-        inline-flex items-center justify-center w-24 min-w-min
+        inline-flex items-center justify-center min-w-min
         {{get sizes this.size}}
         {{get styles this.style}}
       "
diff --git a/app/components/index-setting.hbs b/app/components/index-setting.hbs
index 56939c2..0cc2925 100644
--- a/app/components/index-setting.hbs
+++ b/app/components/index-setting.hbs
@@ -1,13 +1,18 @@
 <Form::Element @label={{namelize @name}}>
   <MonacoEditor
-    @value={{this.value}}
+    @value={{json-stringify this.value}}
     @language='json'
     @sendValue={{this.save}}
     class='h-40'
     as |monaco|
   >
-    <Button @text='Save' @style='primary' @onClick={{monaco.triggerSendValue}} />
-    <Button @text='Cancel' @onClick={{this.setInitialValue}} />
-    <Button @text='Reset' @onClick={{this.reset}} />
+    <Button
+      @text='Save'
+      @style='primary'
+      @size='sm'
+      @onClick={{monaco.triggerSendValue}}
+    />
+    <Button @text='Cancel' @size='sm' @onClick={{this.setInitialValue}} />
+    <Button @text='Reset' @size='sm' @onClick={{this.reset}} />
   </MonacoEditor>
 </Form::Element>
diff --git a/app/components/index-setting.js b/app/components/index-setting.js
index 1ca5da1..c82f29c 100644
--- a/app/components/index-setting.js
+++ b/app/components/index-setting.js
@@ -12,14 +12,13 @@ export default class FormIndexSettingComponent extends Component {
   }
 
   @action
-  save() {
-    this.args.index.updateSetting(this.args.name, this.value);
+  save(newValue) {
+    this.args.index.updateSetting(this.args.name, JSON.parse(newValue));
   }
 
   @action
   async setInitialValue() {
-    const result = await this.args.index.getSetting(this.args.name);
-    this.value = JSON.stringify(result);
+    this.value = await this.args.index.getSetting(this.args.name);
   }
 
   @action
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
index 55582d3..dbb8947 100644
--- a/app/components/monaco-editor.js
+++ b/app/components/monaco-editor.js
@@ -30,7 +30,7 @@ export default class MonacoEditorComponent extends Component {
         420
       );
 
-      el.style.height = `${contentHeight}px`;
+      el.style.height = `${contentHeight + 1}px`;
       this.editor.layout();
     });
   }
diff --git a/app/models/index.js b/app/models/index.js
index ea2e1f0..a83611c 100644
--- a/app/models/index.js
+++ b/app/models/index.js
@@ -90,8 +90,12 @@ export default class Index {
   }
 
   updateSetting(name, value) {
+    const method = ['faceting', 'pagination', 'typo-tolerance'].includes(name)
+      ? 'PATCH'
+      : 'PUT';
+
     return query(`${this.path}/settings/${dasherize(name)}`, {
-      method: 'PUT',
+      method: method,
       body: JSON.stringify(value),
     });
   }