diff --git a/src/pages/components/select/images/select-invalid-state-fluid.png b/src/pages/components/select/images/select-invalid-state-fluid.png
index 43b8fd7ad57..deed52a446d 100644
Binary files a/src/pages/components/select/images/select-invalid-state-fluid.png and b/src/pages/components/select/images/select-invalid-state-fluid.png differ
diff --git a/src/pages/components/select/images/select-states-fixed.png b/src/pages/components/select/images/select-states-fixed.png
index 4b28a6f4f39..5fb9327e0f3 100644
Binary files a/src/pages/components/select/images/select-states-fixed.png and b/src/pages/components/select/images/select-states-fixed.png differ
diff --git a/src/pages/components/select/images/select-states-fluid.png b/src/pages/components/select/images/select-states-fluid.png
index c9693dcb802..cbdd8a5b060 100644
Binary files a/src/pages/components/select/images/select-states-fluid.png and b/src/pages/components/select/images/select-states-fluid.png differ
diff --git a/src/pages/components/select/images/select-style-states-fixed.png b/src/pages/components/select/images/select-style-states-fixed.png
index 4b28a6f4f39..b1b0dd75636 100644
Binary files a/src/pages/components/select/images/select-style-states-fixed.png and b/src/pages/components/select/images/select-style-states-fixed.png differ
diff --git a/src/pages/components/select/images/select-style-states-fluid.png b/src/pages/components/select/images/select-style-states-fluid.png
index c9693dcb802..f70641a9cbf 100644
Binary files a/src/pages/components/select/images/select-style-states-fluid.png and b/src/pages/components/select/images/select-style-states-fluid.png differ
diff --git a/src/pages/components/select/style.mdx b/src/pages/components/select/style.mdx
index c24858fc369..bf20c6a7c8b 100755
--- a/src/pages/components/select/style.mdx
+++ b/src/pages/components/select/style.mdx
@@ -47,27 +47,34 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| State    | Element         | Property         | Color token         |
-| -------- | --------------- | ---------------- | ------------------- |
-| Hover    | Field           | background-color | `$field-hover` \*   |
-| Focus    | Field           | border           | `$focus`            |
-| Invalid  | Field           | border           | `$support-error`    |
-|          | Error message   | text-color       | `$text-error`       |
-|          | Error icon      | fill             | `$support-error`    |
-| Warning  | Warning message | text-color       | `$text-primary`     |
-|          | Warning icon    | fill             | `$support-warning`  |
-| Disabled | Field           | background-color | `$field` \*         |
-|          | Input text      | text-color       | `$text-disabled     |
-|          | Field           | border-bottom    | transparent         |
-|          | Field (fluid)   | border-bottom    | `$border-subtle` \* |
-|          | Label           | text-color       | `$text-disabled`    |
-|          | Chevron icon    | fill             | `$icon-disabled`    |
+| State     | Element         | Property                   | Color token         |
+| --------- | --------------- | -------------------------- | ------------------- |
+| Hover     | Field           | background-color           | `$field-hover` \*   |
+| Focus     | Field           | border                     | `$focus`            |
+| Invalid   | Field           | border                     | `$support-error`    |
+|           | Error message   | text-color                 | `$text-error`       |
+|           | Error icon      | fill                       | `$support-error`    |
+| Warning   | Warning message | text-color                 | `$text-primary`     |
+|           | Warning icon    | fill                       | `$support-warning`  |
+| Disabled  | Field           | background-color           | `$field` \*         |
+|           |                 | border-bottom (default)    | transparent         |
+|           |                 | border-bottom (fluid)      | `$border-subtle` \* |
+|           | Label           | text-color                 | `$text-disabled`    |
+|           | Input text      | text-color                 | `$text-disabled     |
+|           | Chevron icon    | fill                       | `$icon-disabled`    |
+| Read-only | Field           | background-color (default) | transparent         |
+|           |                 | background-color (fluid)   | `$layer` \*         |
+|           |                 | border-bottom              | `$border-subtle` \* |
+|           | Label           | text-color                 | `$text-secondary`   |
+|           | Input text      | text-color (default)       | `$text-primary`     |
+|           |                 | text-color (fluid)         | `$text-secondary`   |
+|           | Chevron icon    | fill                       | `$icon-disabled`    |
 
 - Denotes a contextual color token that will change values based on the layer it
   is placed on.
 
 <Row>
-<Column colLg={12}>
+<Column colLg={8}>
 
 <Tabs>
 
diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx
index 53634a5d466..030e0a41078 100755
--- a/src/pages/components/select/usage.mdx
+++ b/src/pages/components/select/usage.mdx
@@ -92,8 +92,7 @@ while the dropdown component can be styled as needed.
       id: 'select',
       label: 'Select',
     },
-  ]}
->
+  ]}>
   <ComponentVariant
     id="select"
     knobs={{
@@ -106,11 +105,11 @@ while the dropdown component can be styled as needed.
         'https://react.carbondesignsystem.com/?path=/story/components-select--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-select--basic',
-      Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-select--default',
-    }}
-  >
+    }}>
     {`
 <Select
   defaultValue="placeholder-item"
@@ -328,16 +327,16 @@ The select has multiple interactive states for both default and inline variants:
 **enabled**, **hover**, **focus**, **open**, **error**, **warning**, and
 **disabled**.
 
-| State       | When to use                                                                                                                                                                                                                                                  |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| _Enabled_   | When the select is live and a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. An enabled select field should contain a default value.                                                |
-| _Hover_     | When a user's mouse cursor is hovering over the field.                                                                                                                                                                                                       |
-| _Focus_     | When a user tabs to or clicks on the select field, the field becomes focused, indicating the user has successfully navigated to the component.                                                                                                               |
-| _Error_     | When the required select value has not been selected. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved.                                                                             |
-| _Warning_   | When you need to call the user's attention to an exception condition. The condition might not be an error but can cause problems if not resolved.                                                                                                            |
-| _Disabled_  | When the user is not allowed to interact with the select due to either permissions, dependencies, or prerequisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance. |
-| _Skeleton_  | Used on an initial page load to indicate that the select has not yet fully loaded.                                                                                                                                                                           |
-| _Read-only_ | _Coming soon!_                                                                                                                                                                                                                                               |
+| State       | When to use                                                                                                                                                                                                                                                                                   |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| _Enabled_   | When the select is live and a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. An enabled select field should contain a default value.                                                                                 |
+| _Hover_     | When a user's mouse cursor is hovering over the field.                                                                                                                                                                                                                                        |
+| _Focus_     | When a user tabs to or clicks on the select field, the field becomes focused, indicating the user has successfully navigated to the component.                                                                                                                                                |
+| _Error_     | When the required select value has not been selected. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved.                                                                                                              |
+| _Warning_   | When you need to call the user's attention to an exception condition. The condition might not be an error but can cause problems if not resolved.                                                                                                                                             |
+| _Disabled_  | When the user cannot interact with a component and all interactive functions have been removed. Unlike read-only states, disabled states are not focusable, are not read by screen readers, and do not need to pass visual contrast, making them inaccessible if they need to be interpreted. |
+| _Skeleton_  | Used on an initial page load to indicate that the select has not yet fully loaded.                                                                                                                                                                                                            |
+| _Read-only_ | When the user can review but not modify the component. This state removes all interactive functions like the disabled state but can still be focusable, accessible by screen readers, and passes visual contrast for readability.                                                             |
 
 <Row>
 <Column colLg={12}>