diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
index 09563b3b..d317d526 100644
--- a/src/components/Controls/AutoComplete.vue
+++ b/src/components/Controls/AutoComplete.vue
@@ -39,6 +39,7 @@
           @keydown.esc="toggleDropdown(false)"
         />
         <svg
+          v-if="!isReadOnly"
           class="w-3 h-3"
           style="background: inherit; margin-right: -3px"
           viewBox="0 0 5 10"
diff --git a/src/components/Controls/Base.vue b/src/components/Controls/Base.vue
index 705ca30e..4f0ab2fe 100644
--- a/src/components/Controls/Base.vue
+++ b/src/components/Controls/Base.vue
@@ -60,7 +60,8 @@ export default {
           'px-2 py-1': this.size === 'small',
           'pointer-events-none': this.isReadOnly,
         },
-        'focus:outline-none focus:bg-gray-200 rounded w-full text-gray-900 placeholder-gray-400',
+        'focus:outline-none focus:bg-gray-200 rounded w-full placeholder-gray-400',
+        this.isReadOnly ? 'text-gray-800' : 'text-gray-900',
       ];
 
       return this.getInputClassesFromProp(classes);