diff --git a/packages/orbit-components/src/Card/Card.stories.tsx b/packages/orbit-components/src/Card/Card.stories.tsx
index 98f4887ede..6a2f9feefb 100644
--- a/packages/orbit-components/src/Card/Card.stories.tsx
+++ b/packages/orbit-components/src/Card/Card.stories.tsx
@@ -258,6 +258,24 @@ export const CardWithDefaultExpanded: Story = {
       >
         Hidden content
       </CardSection>
+      <CardSection
+        expandable
+        header={
+          <Stack inline align="center" justify="end">
+            <Text type="secondary">Trip length: 1h55m</Text>
+            <Badge icon={<Clock />} type="warningSubtle">
+              Unavailable
+            </Badge>
+          </Stack>
+        }
+        actions={
+          <ButtonLink compact type="secondary" size="small">
+            Open
+          </ButtonLink>
+        }
+      >
+        Hidden content
+      </CardSection>
       <CardSection
         expandable
         initialExpanded={initialExpanded}
@@ -269,7 +287,7 @@ export const CardWithDefaultExpanded: Story = {
         }
         onClose={action("onClose")}
         header={
-          <Stack inline justify="end">
+          <Stack inline align="center" justify="end">
             <Text type="secondary">Trip length: 1h55m</Text>
             <Badge icon={<Clock />} type="warningSubtle">
               Unavailable
diff --git a/packages/orbit-components/src/Card/CardSection/index.tsx b/packages/orbit-components/src/Card/CardSection/index.tsx
index 5551bc7631..e649b4880f 100644
--- a/packages/orbit-components/src/Card/CardSection/index.tsx
+++ b/packages/orbit-components/src/Card/CardSection/index.tsx
@@ -9,6 +9,13 @@ import type { Props } from "./types";
 import Header from "../components/Header";
 import Expandable from "./components/Expandable";
 import handleKeyDown from "../../utils/handleKeyDown";
+import Stack from "../../Stack";
+
+const Actions = ({ actions }) => (
+  <Stack inline grow={false} justify="end">
+    {actions}
+  </Stack>
+);
 
 export default function CardSection({
   title,
@@ -68,24 +75,35 @@ export default function CardSection({
       onKeyDown={onClick == null ? undefined : handleKeyDown(onClick)}
     >
       {(title != null || header != null) && expandable && (
-        <button
-          type="button"
-          className="p-400 lm:p-600 hover:bg-white-normal-hover w-full"
-          aria-expanded={opened}
-          aria-controls={slideID}
-          onClick={handleClick}
+        <div
+          className={cx(
+            "hover:bg-white-normal-hover p-400 lm:p-600 gap-300 relative z-10 flex cursor-pointer items-center",
+            "has-[.orbit-card-header-button:focus]:focus-within:rounded-100 has-[.orbit-card-header-button:focus]:focus-within:outline-blue-normal has-[.orbit-card-header-button:focus]:focus-within:outline has-[.orbit-card-header-button:focus]:focus-within:outline-2",
+          )}
         >
-          <Header
-            title={title}
-            titleAs={titleAs}
-            description={description}
-            expandable={expandable}
-            header={header}
-            expanded={opened}
-            actions={actions}
-            isSection
-          />
-        </button>
+          <button
+            type="button"
+            className={cx(
+              "orbit-card-header-button w-full focus:outline-none",
+              "before:absolute before:inset-0",
+            )}
+            aria-expanded={opened}
+            aria-controls={slideID}
+            onClick={handleClick}
+          >
+            <Header
+              title={title}
+              titleAs={titleAs}
+              description={description}
+              expandable={expandable}
+              header={header}
+              expanded={opened}
+              actions={Boolean(actions)}
+              isSection
+            />
+          </button>
+          {actions && <Actions actions={actions} />}
+        </div>
       )}
 
       {(title != null || header != null) && !expandable && (
@@ -100,6 +118,7 @@ export default function CardSection({
             actions={actions}
             isSection
           />
+          {actions && <Actions actions={actions} />}
         </div>
       )}
 
diff --git a/packages/orbit-components/src/Card/components/Header.tsx b/packages/orbit-components/src/Card/components/Header.tsx
index 58e299d25f..1e25aecc24 100644
--- a/packages/orbit-components/src/Card/components/Header.tsx
+++ b/packages/orbit-components/src/Card/components/Header.tsx
@@ -68,7 +68,7 @@ const Header = ({
         color="secondary"
       />
     )}
-    {actions && (
+    {React.isValidElement(actions) && (
       <Stack inline grow={false} justify="end">
         {actions}
       </Stack>