diff --git a/addons/api/mirage/config.js b/addons/api/mirage/config.js
index 89e2a82b5..8c62edd5e 100644
--- a/addons/api/mirage/config.js
+++ b/addons/api/mirage/config.js
@@ -521,6 +521,7 @@ export default function () {
       return managedGroups.where({ authMethodId });
     }
   );
+  this.get('/managed-groups/:id');
 
   /* Uncomment the following line and the Response import above
    * Then change the response code to simulate error responses.
diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml
index cb7b69832..5960782e7 100644
--- a/addons/core/translations/form/en-us.yaml
+++ b/addons/core/translations/form/en-us.yaml
@@ -115,3 +115,5 @@ value:
 callback_url:
   label: Callback URL
   help: The URL to which the third-party provider sends the authentication response.  Paste this into the provider configuration.
+filter:
+  label: Filter
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index d7d07aee2..c52b88323 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -354,3 +354,6 @@ scope:
 managed-group:
   title: Managed Group
   title_plural: Managed Groups
+  description: A managed group is a resource that represents a collection of accounts.
+  actions:
+    delete: Delete Managed Group
diff --git a/ui/admin/app/components/form/managed-group/index.hbs b/ui/admin/app/components/form/managed-group/index.hbs
new file mode 100644
index 000000000..4f0f53c28
--- /dev/null
+++ b/ui/admin/app/components/form/managed-group/index.hbs
@@ -0,0 +1,54 @@
+<Rose::Form as |form|>
+  <form.input
+    @value={{@model.type}}
+    @label={{t 'form.type.label'}}
+    readonly={{true}}
+    @disabled={{true}}
+  />
+
+  <form.input
+    @name='name'
+    @type='name'
+    @value={{@model.name}}
+    @label={{t 'form.name.label'}}
+    @helperText={{t 'form.name.help'}}
+    @error={{@model.error.name}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name='description'
+    @type='description'
+    @value={{@model.description}}
+    @label={{t 'form.description.label'}}
+    @error={{@model.errors.description}}
+    @helperText={{t 'form.description.help'}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+    as |field|
+  >
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  <form.input
+    @value={{@model.attributes.filter}}
+    @label={{t 'form.filter.label'}}
+    readonly={{true}}
+    @disabled={{true}}
+  />
+</Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/router.js b/ui/admin/app/router.js
index 17519a2a5..49a0c0756 100644
--- a/ui/admin/app/router.js
+++ b/ui/admin/app/router.js
@@ -55,7 +55,13 @@ Router.map(function () {
             });
             this.route('new');
           });
-          this.route('managed-groups', function () {});
+          this.route('managed-groups', function () {
+            this.route(
+              'managed-group',
+              { path: ':managed_group_id' },
+              function () {}
+            );
+          });
         });
         this.route('new');
       });
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
index bde134d3f..f1c4acac5 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
@@ -1,4 +1,5 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
 
 export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsRoute extends Route {
   /**
@@ -10,4 +11,18 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsRoute extends
     const { id: auth_method_id } = authMethod;
     return this.store.query('managed-group', { auth_method_id });
   }
+
+  // =actions
+  /**
+   * Rollback changes on a managed group.
+   * @param {ManagedGroupModel} managedGroup
+   */
+  @action
+  cancel(managedGroup) {
+    const { isNew } = managedGroup;
+    managedGroup.rollbackAttributes();
+    if (isNew) {
+      this.transitionTo('scopes.scope.auth-methods.auth-method.managed-groups');
+    }
+  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/index.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/index.js
index 24639a124..7cdc46a89 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/index.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/index.js
@@ -1,3 +1,9 @@
 import Route from '@ember/routing/route';
 
-export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsIndexRoute extends Route {}
+export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsIndexRoute extends Route {
+  setupController(controller) {
+    const authMethod = this.modelFor('scopes.scope.auth-methods.auth-method');
+    super.setupController(...arguments);
+    controller.setProperties({ authMethod });
+  }
+}
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.js
new file mode 100644
index 000000000..816b537da
--- /dev/null
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.js
@@ -0,0 +1,49 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsManagedGroupRoute extends Route {
+  // =methods
+
+  /**
+   * Load managed group by ID.
+   * @param {object} params
+   * @param {string} params.managed_group_id
+   * @returns {ManagedGroupModel}
+   */
+  model({ managed_group_id }) {
+    return this.store.findRecord('managed-group', managed_group_id, {
+      reload: true,
+    });
+  }
+
+  /**
+   * Render the route-set specific page sections
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render(
+      'scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-header',
+      {
+        into: 'scopes/scope/auth-methods/auth-method',
+        outlet: 'header',
+      }
+    );
+
+    this.render(
+      'scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions',
+      {
+        into: 'scopes/scope/auth-methods/auth-method',
+        outlet: 'actions',
+      }
+    );
+
+    this.render(
+      'scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-navigation',
+      {
+        into: 'scopes/scope/auth-methods/auth-method',
+        outlet: 'navigation',
+      }
+    );
+  }
+}
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.js
new file mode 100644
index 000000000..0dbea955a
--- /dev/null
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.js
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsManagedGroupIndexRoute extends Route {}
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
index 959c50afa..7483ea871 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
@@ -12,7 +12,16 @@
     <table.body as |body|>
       {{#each @model as |managed-group|}}
         <body.row as |row|>
-          <row.headerCell>{{managed-group.name}}</row.headerCell>
+          <row.headerCell>
+            {{#if (can 'read model' managed-group)}}
+              <LinkTo
+                @route='scopes.scope.auth-methods.auth-method.managed-groups.managed-group'
+                @model={{managed-group.id}}
+              >
+                {{managed-group.name}}
+              </LinkTo>
+            {{/if}}
+          </row.headerCell>
           <row.cell>{{managed-group.description}}</row.cell>
           <row.cell>
             <Rose::Badge>{{managed-group.type}}</Rose::Badge>
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.hbs
new file mode 100644
index 000000000..a6696c3b6
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group.hbs
@@ -0,0 +1,2 @@
+{{page-title 'ManagedGroup'}}
+{{outlet}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions.hbs
new file mode 100644
index 000000000..240e83e8e
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-actions.hbs
@@ -0,0 +1,11 @@
+{{#if (can 'delete model' @model)}}
+  <Rose::Dropdown
+    @text={{t 'actions.manage'}}
+    @dropdownRight={{true}}
+    as |dropdown|
+  >
+    <dropdown.button @style='danger' @disabled={{@model.canSave}}>
+      {{t 'resources.managed-group.actions.delete'}}
+    </dropdown.button>
+  </Rose::Dropdown>
+{{/if}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-header.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-header.hbs
new file mode 100644
index 000000000..1e7ef1124
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-header.hbs
@@ -0,0 +1,12 @@
+<h2>
+  {{t 'resources.managed-group.title'}}
+  <DocLink @doc='managed-groups' @iconSize='large' />
+</h2>
+<p>{{t 'resources.managed-group.description'}}</p>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t 'actions.copy-to-clipboard'}}
+  @acknowledgeText={{t 'states.copied'}}
+>
+  <code>{{@model.id}}</code>
+</Copyable>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-navigation.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-navigation.hbs
new file mode 100644
index 000000000..3a2ce54b7
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/-navigation.hbs
@@ -0,0 +1,7 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link
+    @route='scopes.scope.auth-methods.auth-method.managed-groups.managed-group.index'
+  >
+    {{t 'titles.details'}}
+  </nav.link>
+</Rose::Nav::Tabs>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.hbs
new file mode 100644
index 000000000..19ab29fcb
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index.hbs
@@ -0,0 +1 @@
+<Form::ManagedGroup @model={{@model}} />
\ No newline at end of file
diff --git a/ui/admin/config/environment.js b/ui/admin/config/environment.js
index 7e4c3ca78..613c6a3e8 100644
--- a/ui/admin/config/environment.js
+++ b/ui/admin/config/environment.js
@@ -48,6 +48,7 @@ module.exports = function (environment) {
         account: '/accounts',
         'account.new': '/accounts/new',
         'auth-method': '/auth-methods',
+        'managed-groups': '/managed-groups',
         group: '/groups',
         'group.add-members': '/groups/add-members',
         'host-catalog': '/host-catalogs',
diff --git a/ui/admin/tests/unit/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group-test.js b/ui/admin/tests/unit/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group-test.js
new file mode 100644
index 000000000..f323d5e2e
--- /dev/null
+++ b/ui/admin/tests/unit/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group-test.js
@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module(
+  'Unit | Route | scopes/scope/auth-methods/auth-method/managed-groups/managed-group',
+  function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+      let route = this.owner.lookup(
+        'route:scopes/scope/auth-methods/auth-method/managed-groups/managed-group'
+      );
+      assert.ok(route);
+    });
+  }
+);
diff --git a/ui/admin/tests/unit/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index-test.js b/ui/admin/tests/unit/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index-test.js
new file mode 100644
index 000000000..47aadd91a
--- /dev/null
+++ b/ui/admin/tests/unit/routes/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index-test.js
@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module(
+  'Unit | Route | scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index',
+  function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+      let route = this.owner.lookup(
+        'route:scopes/scope/auth-methods/auth-method/managed-groups/managed-group/index'
+      );
+      assert.ok(route);
+    });
+  }
+);