diff --git a/addons/rose/addon/helpers/set-from-event.js b/addons/rose/addon/helpers/set-from-event.js
index 7544acee9..1fdfbea2e 100644
--- a/addons/rose/addon/helpers/set-from-event.js
+++ b/addons/rose/addon/helpers/set-from-event.js
@@ -5,7 +5,7 @@ export function setFromEvent([context, field]) {
   // The Ember `set` function is used here because `field` may be in dotted
   // notation, refering to nested fields within `context`.
   return (event) =>
-    event?.target?.value ? set(context, field, event.target.value) : null;
+    event?.target ? set(context, field, event.target.value) : null;
 }
 
 export default helper(setFromEvent);
diff --git a/addons/rose/addon/styles/addon.scss b/addons/rose/addon/styles/addon.scss
index bd18ab6c2..0efd11cf3 100644
--- a/addons/rose/addon/styles/addon.scss
+++ b/addons/rose/addon/styles/addon.scss
@@ -1,2 +1,3 @@
 @import '@hashicorp/design-system-components';
 @import 'hds/themes/dark-mode';
+@import 'hds/overrides';
diff --git a/addons/rose/addon/styles/hds/overrides.scss b/addons/rose/addon/styles/hds/overrides.scss
new file mode 100644
index 000000000..211921f2a
--- /dev/null
+++ b/addons/rose/addon/styles/hds/overrides.scss
@@ -0,0 +1,4 @@
+// field bottom margin (HDS leaves this to implementers)
+[class^='hds-form-field'] {
+  margin-bottom: 1.5rem;
+}
diff --git a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
index 303530b26..52ca49918 100644
--- a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
+++ b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
@@ -79,6 +79,7 @@
   --token-form-control-base-border-color-default: var(
     --token-color-palette-neutral-200
   );
+  --token-form-indicator-optional-color: var(--token-color-palette-neutral-200);
 }
 
 // HDS Light Mode
diff --git a/addons/rose/app/styles/rose/components/table/_table.scss b/addons/rose/app/styles/rose/components/table/_table.scss
index 8416b7ab2..ae2448102 100644
--- a/addons/rose/app/styles/rose/components/table/_table.scss
+++ b/addons/rose/app/styles/rose/components/table/_table.scss
@@ -19,8 +19,8 @@
   // This styles are add to stop the input to apply extra margin (default on forms)
   .rose-form-input,
   .rose-form-input-field,
-  .hds-form-select,
-  [class^='hds-form-field-'] .hds-form-select:not(:first-child) {
+  [class^='hds-form-field'],
+  [class^='hds-form-field']:not(:first-child) {
     margin: 0;
     width: 100%;
   }
diff --git a/ui/admin/app/components/form/scope/index.hbs b/ui/admin/app/components/form/scope/index.hbs
index 84b4afd53..6cf9fe2af 100644
--- a/ui/admin/app/components/form/scope/index.hbs
+++ b/ui/admin/app/components/form/scope/index.hbs
@@ -6,44 +6,47 @@
   as |form|
 >
 
-  <form.input
-    @name='name'
-    @type='name'
+  <Hds::Form::TextInput::Field
+    @isOptional={{true}}
+    @isRequired={{false}}
     @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @helperText={{t 'form.name.help'}}
-    @error={{@model.errors.name}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.name}}
+    @type='text'
+    name='name'
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'name')}}
+    as |F|
   >
+    <F.Label>{{t 'form.name.label'}}</F.Label>
+    <F.HelperText>{{t 'form.name.help'}}</F.HelperText>
     {{#if @model.errors.name}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.input>
+  </Hds::Form::TextInput::Field>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  <Hds::Form::Textarea::Field
+    @isOptional={{true}}
+    @isRequired={{false}}
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @helperText={{t 'form.description.help'}}
-    @error={{@model.errors.description}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{form.disabled}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   {{#if (can 'save model' @model)}}
     <form.actions
diff --git a/ui/admin/tests/acceptance/scopes-test.js b/ui/admin/tests/acceptance/scopes-test.js
index b33af5a91..cc72f163f 100644
--- a/ui/admin/tests/acceptance/scopes-test.js
+++ b/ui/admin/tests/acceptance/scopes-test.js
@@ -192,6 +192,6 @@ module('Acceptance | scopes', function (hooks) {
     await visit(urls.newOrgScope);
     await click('[type="submit"]');
     assert.dom('.rose-notification-body').hasText('The request was invalid.');
-    assert.dom('.rose-form-error-message').hasText('Name is required.');
+    assert.dom('.hds-form-error__message').hasText('Name is required.');
   });
 });
diff --git a/ui/admin/tests/acceptance/scopes/update-test.js b/ui/admin/tests/acceptance/scopes/update-test.js
index ba48bd77c..6e2c88489 100644
--- a/ui/admin/tests/acceptance/scopes/update-test.js
+++ b/ui/admin/tests/acceptance/scopes/update-test.js
@@ -130,7 +130,7 @@ module('Acceptance | scopes | update', function (hooks) {
       'The request was invalid.'
     );
     assert.ok(
-      find('.rose-form-error-message').textContent.trim(),
+      find('.hds-form-error__message').textContent.trim(),
       'Name is required.'
     );
   });