diff --git a/app/assets/javascripts/admin/addon/templates/api-keys.hbs b/app/assets/javascripts/admin/addon/templates/api-keys.gjs
similarity index 62%
rename from app/assets/javascripts/admin/addon/templates/api-keys.hbs
rename to app/assets/javascripts/admin/addon/templates/api-keys.gjs
index db9059a64a0..9003d8210d4 100644
--- a/app/assets/javascripts/admin/addon/templates/api-keys.hbs
+++ b/app/assets/javascripts/admin/addon/templates/api-keys.gjs
@@ -1,5 +1,11 @@
-<PluginOutlet @name="admin-api-keys">
-  <div class="admin-api-keys admin-config-page">
+import RouteTemplate from "ember-route-template";
+import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import DPageHeader from "discourse/components/d-page-header";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import { i18n } from "discourse-i18n";
+
+export default RouteTemplate(<template>
+  <PluginOutlet @name="admin-api-keys">
     <DPageHeader
       @titleLabel={{i18n "admin.api_keys.title"}}
       @descriptionLabel={{i18n "admin.api_keys.description"}}
@@ -23,5 +29,5 @@
     <div class="admin-container admin-config-page__main-area">
       {{outlet}}
     </div>
-  </div>
-</PluginOutlet>
\ No newline at end of file
+  </PluginOutlet>
+</template>);
diff --git a/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs b/app/assets/javascripts/admin/addon/templates/api-keys/index.hbs
similarity index 100%
rename from app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
rename to app/assets/javascripts/admin/addon/templates/api-keys/index.hbs
diff --git a/app/assets/javascripts/admin/addon/templates/api-keys-new.hbs b/app/assets/javascripts/admin/addon/templates/api-keys/new.hbs
similarity index 100%
rename from app/assets/javascripts/admin/addon/templates/api-keys-new.hbs
rename to app/assets/javascripts/admin/addon/templates/api-keys/new.hbs
diff --git a/app/assets/javascripts/admin/addon/templates/api-keys-show.hbs b/app/assets/javascripts/admin/addon/templates/api-keys/show.hbs
similarity index 100%
rename from app/assets/javascripts/admin/addon/templates/api-keys-show.hbs
rename to app/assets/javascripts/admin/addon/templates/api-keys/show.hbs
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 50ef4d2309c..d29bf07dda4 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -25,55 +25,7 @@
 
 // Api keys
 
-.d-admin-table.api-keys {
-  margin-bottom: 0.25em;
-
-  tr.revoked {
-    color: var(--primary-high);
-  }
-
-  .d-admin-row__overview.key {
-    width: 20%;
-  }
-}
-
 .admin-api-keys {
-  h2 {
-    margin-bottom: 10px;
-  }
-  .api-key-new {
-    .form-element,
-    .form-element-desc {
-      &.input-area {
-        width: 100%;
-
-        .value-list,
-        .select-kit,
-        input[type="text"],
-        input[type="text"].filter-input {
-          width: 100%;
-          margin: 0;
-        }
-
-        @include breakpoint(mobile-extra-large, min-width) {
-          width: 75%;
-          .value-list,
-          .select-kit,
-          input[type="text"] {
-            width: 50%;
-          }
-        }
-      }
-      &.label-area {
-        label {
-          margin: 0.5em 1em 0 0;
-        }
-        @include breakpoint(mobile-extra-large, min-width) {
-          width: 25%;
-        }
-      }
-    }
-  }
   .api-key-show {
     .form-element,
     .form-element-desc {