diff --git a/ui/app/components/secret-engine/metadata-card.hbs b/ui/app/components/secret-engine/card/metadata.hbs
similarity index 100%
rename from ui/app/components/secret-engine/metadata-card.hbs
rename to ui/app/components/secret-engine/card/metadata.hbs
diff --git a/ui/app/components/secret-engine/metadata-card.ts b/ui/app/components/secret-engine/card/metadata.ts
similarity index 89%
rename from ui/app/components/secret-engine/metadata-card.ts
rename to ui/app/components/secret-engine/card/metadata.ts
index 9565035f58..c32393ae98 100644
--- a/ui/app/components/secret-engine/metadata-card.ts
+++ b/ui/app/components/secret-engine/card/metadata.ts
@@ -9,7 +9,7 @@ interface Args {
   model: SecretsEngineResource;
 }
 
-export default class MetadataCard extends Component<Args> {
+export default class Metadata extends Component<Args> {
   constructor(owner: unknown, args: Args) {
     super(owner, args);
   }
diff --git a/ui/app/components/secret-engine/security-card.hbs b/ui/app/components/secret-engine/card/security.hbs
similarity index 100%
rename from ui/app/components/secret-engine/security-card.hbs
rename to ui/app/components/secret-engine/card/security.hbs
diff --git a/ui/app/components/secret-engine/security-card.ts b/ui/app/components/secret-engine/card/security.ts
similarity index 100%
rename from ui/app/components/secret-engine/security-card.ts
rename to ui/app/components/secret-engine/card/security.ts
diff --git a/ui/app/components/secret-engine/card/version.hbs b/ui/app/components/secret-engine/card/version.hbs
new file mode 100644
index 0000000000..a0178e4dcf
--- /dev/null
+++ b/ui/app/components/secret-engine/card/version.hbs
@@ -0,0 +1,37 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+<Hds::Card::Container @level="mid" @hasBorder={{true}} class="has-padding-s has-top-bottom-margin-12">
+  <Hds::Text::Display @size="300">Version</Hds::Text::Display>
+
+  {{! TODO: Having this set up with flex for now, grid might be better? }}
+  <div class="flex gap-36 has-top-margin-l">
+    <div class="flex is-flex-column row-gap-8">
+      <Hds::Text::Display>Engine type</Hds::Text::Display>
+      <Hds::Text::Display>Current version</Hds::Text::Display>
+      <Hds::Text::Display>Latest version</Hds::Text::Display>
+    </div>
+
+    <div class="flex is-flex-column is-flex-align-start row-gap-12">
+      <Hds::Text::Body @tag="p" class="hds-border-strong side-padding-4 border-radius-4">{{@model.type}}</Hds::Text::Body>
+      {{! TODO: Verify if we want to display the full version or chop down ie. v0.17.1 vs v0.17.1-0.230942309423094... }}
+      <Hds::Text::Body @tag="p">{{@model.running_plugin_version}}</Hds::Text::Body>
+      {{! TODO: leaving as is for now to match design, but we might be removing this if we cant get latest version from some source }}
+      <Hds::Text::Body @tag="p">v.12.46</Hds::Text::Body>
+    </div>
+  </div>
+
+  <Hds::Separator />
+
+  <div>
+    <Hds::Text::Display @tag="h1" class="has-bottom-margin-s">Update version to:</Hds::Text::Display>
+    <Hds::Dropdown @listPosition="bottom-left" as |D|>
+      <D.ToggleButton @text="Select version" @color="secondary" />
+      {{! TODO: Update interactives with available versions from API }}
+      <D.Interactive>12.32</D.Interactive>
+      <D.Interactive>12.4</D.Interactive>
+      <D.Interactive>12.42</D.Interactive>
+    </Hds::Dropdown>
+  </div>
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/app/components/secret-engine/card/version.ts b/ui/app/components/secret-engine/card/version.ts
new file mode 100644
index 0000000000..f28e2d3707
--- /dev/null
+++ b/ui/app/components/secret-engine/card/version.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import SecretsEngineResource from 'vault/resources/secrets/engine';
+interface Args {
+  model: SecretsEngineResource;
+}
+
+export default class Version extends Component<Args> {
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+  }
+}
diff --git a/ui/app/styles/helper-classes/flexbox-and-grid.scss b/ui/app/styles/helper-classes/flexbox-and-grid.scss
index 879e531239..7294f5349b 100644
--- a/ui/app/styles/helper-classes/flexbox-and-grid.scss
+++ b/ui/app/styles/helper-classes/flexbox-and-grid.scss
@@ -29,6 +29,10 @@
     row-gap: size_variables.$spacing-8;
   }
 
+  &.row-gap-12 {
+    row-gap: size_variables.$spacing-12;
+  }
+
   &.column-gap-8 {
     column-gap: size_variables.$spacing-8;
   }