2 files changed, 11 insertions, 12 deletions
diff --git a/src/components/select/select.js b/src/components/select/select.js
index 49535d07..ec571a14 100644
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@@ -8,12 +8,9 @@ library.add(
 )
 
 export default {
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
+  emits: ['update:modelValue'],
   props: [
-    'value',
+    'modelValue',
     'disabled',
     'unstyled',
     'kind'
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 5ade1fa6..92493b0b 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -1,4 +1,3 @@
-
 <template>
   <label
     class="Select input"
@@ -6,11 +5,12 @@
   >
     <select
       :disabled="disabled"
-      :value="value"
-      @change="$emit('change', $event.target.value)"
+      :value="modelValue"
+      @change="$emit('update:modelValue', $event.target.value)"
     >
       <slot />
     </select>
+    {{ ' ' }}
     <FAIcon
       class="select-down-icon"
       icon="chevron-down"
@@ -23,7 +23,8 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.Select {
+/* TODO fix order of styles */
+label.Select {
   padding: 0;
 
   select {
@@ -38,10 +39,10 @@
     padding: 0 2em 0 .2em;
     font-family: sans-serif;
     font-family: var(--inputFont, sans-serif);
-    font-size: 14px;
+    font-size: 1em;
     width: 100%;
     z-index: 1;
-    height: 28px;
+    height: 2em;
     line-height: 16px;
   }
 
@@ -51,9 +52,10 @@
     bottom: 0;
     right: 5px;
     height: 100%;
+    width: 0.875em;
     color: $fallback--text;
     color: var(--inputText, $fallback--text);
-    line-height: 28px;
+    line-height: 2;
     z-index: 0;
     pointer-events: none;
   }