diff --git a/changes/issue-2240-host-details-move-action-buttons b/changes/issue-2240-host-details-move-action-buttons
new file mode 100644
index 0000000000..0c99614529
--- /dev/null
+++ b/changes/issue-2240-host-details-move-action-buttons
@@ -0,0 +1 @@
+* Host details page UI cleaner with action buttons outside details table
\ No newline at end of file
diff --git a/cypress/integration/free/maintainer.spec.ts b/cypress/integration/free/maintainer.spec.ts
index 16d86ae500..b9844032e6 100644
--- a/cypress/integration/free/maintainer.spec.ts
+++ b/cypress/integration/free/maintainer.spec.ts
@@ -22,7 +22,7 @@ describe(
       cy.visit("/hosts/manage");
 
       // Ensure page is loaded
-      // cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
+      cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.contains("All hosts");
 
       // Settings restrictions
@@ -32,6 +32,8 @@ describe(
 
       // Host manage page: No team UI, can add host and label
       cy.visit("/hosts/manage");
+
+      cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.findByText(/teams/i).should("not.exist");
       cy.contains("button", /add new host/i).click();
       cy.findByText("select a team").should("not.exist");
diff --git a/cypress/integration/premium/maintainer.spec.ts b/cypress/integration/premium/maintainer.spec.ts
index 884c1ec817..005e3ac9f4 100644
--- a/cypress/integration/premium/maintainer.spec.ts
+++ b/cypress/integration/premium/maintainer.spec.ts
@@ -27,7 +27,7 @@ describe(
       // Host manage page: Teams column, select a team
       cy.visit("/hosts/manage");
 
-      cy.wait(10000); // eslint-disable-line cypress/no-unnecessary-waiting
+      cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
 
       cy.findByText(/show enroll secret/i).should("exist");
 
@@ -40,9 +40,9 @@ describe(
         // Test host text varies
         cy.findByRole("button").click();
       });
-      cy.get(".title").within(() => {
-        cy.findByText("Team").should("exist");
-      });
+
+      cy.wait(2000); // eslint-disable-line cypress/no-unnecessary-waiting
+      cy.findByText("Team").should("exist");
       cy.contains("button", /transfer/i).click();
       cy.get(".Select-control").click();
       cy.findByText(/create a team/i).should("not.exist");
diff --git a/cypress/integration/premium/observer.spec.ts b/cypress/integration/premium/observer.spec.ts
index cc65ef0c1f..5f5f052cfe 100644
--- a/cypress/integration/premium/observer.spec.ts
+++ b/cypress/integration/premium/observer.spec.ts
@@ -30,9 +30,9 @@ describe("Premium tier - Observer user", () => {
       // Test host text varies
       cy.findByRole("button").click();
     });
-    cy.get(".title").within(() => {
-      cy.findByText("Team").should("exist");
-    });
+
+    cy.wait(2000); // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.findByText("Team").should("exist");
     cy.contains("button", /transfer/i).should("not.exist");
     cy.contains("button", /delete/i).should("not.exist");
     cy.contains("button", /query/i).click();
diff --git a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.tsx
index 983ef98747..cb02628b83 100644
--- a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.tsx
+++ b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.tsx
@@ -702,7 +702,7 @@ const HostDetailsPage = ({
           <span>Back to all hosts</span>
         </Link>
       </div>
-      <div className="section title">
+      <div className="header title">
         <div className="title__inner">
           <div className="hostname-container">
             <h1 className="hostname">{host?.hostname || "---"}</h1>
@@ -714,6 +714,11 @@ const HostDetailsPage = ({
             </p>
             {renderRefetch()}
           </div>
+        </div>
+        {renderActionButtons()}
+      </div>
+      <div className="section title">
+        <div className="title__inner">
           <div className="info-flex">
             <div className="info-flex__item info-flex__item--title">
               <span className="info-flex__header">Status</span>
@@ -743,7 +748,6 @@ const HostDetailsPage = ({
             </div>
           </div>
         </div>
-        {renderActionButtons()}
       </div>
       <div className="section about">
         <p className="section__header">About this host</p>
diff --git a/frontend/pages/hosts/HostDetailsPage/_styles.scss b/frontend/pages/hosts/HostDetailsPage/_styles.scss
index 9a156e4fff..d60dfa3c83 100644
--- a/frontend/pages/hosts/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/_styles.scss
@@ -6,7 +6,13 @@
   padding-bottom: 50px;
   min-width: 0;
   background-color: $ui-off-white;
-  gap: $pad-large;
+  gap: $pad-medium;
+
+  .header {
+    flex: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 
   .section {
     flex: 100%;
@@ -140,17 +146,11 @@
   .title {
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: 1px solid $ui-fleet-blue-15;
     margin: 0;
 
-    &__inner {
-      padding-bottom: $pad-medium;
-    }
-
     .hostname-container {
       display: flex;
       align-items: flex-end;
-      margin-bottom: $pad-large;
     }
 
     .hostname {
@@ -420,6 +420,7 @@
   &__back-link {
     display: flex;
     align-items: center;
+    padding-bottom: $pad-small;
     height: 16px;
     font-size: $x-small;
     color: $core-vibrant-blue;