diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index f4ada9696..5097060a7 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -266,7 +266,7 @@ storage-bucket:
       help: The AWS region to use
     access_key_id:
       label: Access key ID
-      help: The AWS access key ID to use.
+      help: The Access key ID generated by AWS for the IAM User to use with this storage bucket. We will not show this data after it is saved, but you can replace.
     secret_access_key:
       label: Secret access key
       help: The secret access key to use.
diff --git a/ui/admin/app/components/form/field/secret-input/index.hbs b/ui/admin/app/components/form/field/secret-input/index.hbs
new file mode 100644
index 000000000..721ef39dd
--- /dev/null
+++ b/ui/admin/app/components/form/field/secret-input/index.hbs
@@ -0,0 +1,43 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div class='secret-input'>
+  {{#if (or this.isDisabled this.isActionable)}}
+    <span class='overlay'></span>
+  {{/if}}
+  <Hds::Form::TextInput::Field
+    @isRequired={{@isRequired}}
+    @isInvalid={{@isInvalid}}
+    @value={{@value}}
+    @type={{@type}}
+    name={{@name}}
+    disabled={{or @isDisabled (not this.isEditing)}}
+    ...attributes
+    as |F|
+  >
+    {{yield F}}
+  </Hds::Form::TextInput::Field>
+
+  {{#if this.isDisabled}}
+    <Hds::Button
+      @text={{t 'actions.edit'}}
+      @icon='edit'
+      disabled={{@isDisabled}}
+    />
+  {{else if this.isActionable}}
+    <Hds::Button
+      @text={{t 'actions.edit'}}
+      @icon='edit'
+      @color='secondary'
+      {{on 'click' this.enableEdit}}
+    />
+  {{else}}
+    <Hds::Button
+      @text={{t 'actions.cancel'}}
+      @color='secondary'
+      {{on 'click' this.cancelEdit}}
+    />
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/ui/admin/app/components/form/field/secret-input/index.js b/ui/admin/app/components/form/field/secret-input/index.js
new file mode 100644
index 000000000..b3e3c8368
--- /dev/null
+++ b/ui/admin/app/components/form/field/secret-input/index.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class FormFieldSecretInputIndexComponent extends Component {
+  // =properties
+  /**
+   * Tracks when secret can be updated
+   * @type {boolean}
+   */
+  @tracked isEditing = false;
+
+  /**
+   * Returns true if the resource form is in read only mode
+   * @type {boolean}
+   */
+  get isDisabled() {
+    return this.args.isDisabled;
+  }
+
+  /**
+   * Returns true if the resource form is in edit mode and
+   * `edit` button is enabled for the secret field.
+   * This state lets the user to update the secret fields if they like
+   * @type {boolean}
+   */
+  get isActionable() {
+    return this.args.showEditButton && !this.isEditing;
+  }
+
+  // =actions
+
+  /**
+   * Sets the secret field to be updated
+   * when `edit` button is clicked in Actionable view
+   */
+  @action
+  enableEdit() {
+    if (!this.args.isDisabled) this.isEditing = true;
+  }
+
+  /**
+   * Clears updated secret when cancel button is
+   * clicked in Actionable view.
+   * Sets the secret field back to disabled mode
+   */
+  @action
+  cancelEdit() {
+    this.isEditing = false;
+    this.args.cancel();
+  }
+}
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 6233388e3..4090dac4f 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -687,6 +687,29 @@
   /* stylelint-enable selector-class-pattern */
 }
 
+// secret input field
+.secret-input {
+  display: flex;
+  align-items: flex-end;
+  column-gap: 0.5rem;
+  position: relative;
+
+  .overlay {
+    width: 60%;
+    height: 1rem;
+    position: absolute;
+    bottom: 2.15rem;
+    left: 0.25rem;
+    border-radius: 0.25rem;
+    background-color: var(--token-color-palette-neutral-200);
+  }
+
+  .hds-button {
+    margin-bottom: 1.5rem;
+    flex-basis: 6rem;
+  }
+}
+
 // session recording player
 .session-recording-player {
   --player-background-color: #252937;