diff --git a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts b/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
index a4901d657b0d4d7246dcff422553a17fa60a31df..0a92ee71d3ecb72428af9fe37b74067121c95802 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
+++ b/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
@@ -9,7 +9,6 @@ import { twMerge } from 'tailwind-merge';
   imports: [CommonModule, CdkTrapFocus],
   template: `<div class="relative w-fit">
     <button
-      class="w-fit outline-2 outline-offset-2 outline-focus"
       [ngClass]="[twMerge('w-fit outline-2 outline-offset-2 outline-focus', buttonClass)]"
       (click)="togglePopup()"
       [attr.aria-expanded]="isPopupOpen"
@@ -18,11 +17,11 @@ import { twMerge } from 'tailwind-merge';
       data-test-id="popup-button"
       #button
     >
-      <ng-content select="[button]" />
+      <ng-content select="[button-content]" />
     </button>
     <ul
       *ngIf="isPopupOpen"
-      class="max-h-120 animate-fadeIn absolute min-w-44 max-w-80 overflow-y-auto rounded shadow-lg shadow-grayborder focus:outline-none"
+      class="absolute max-h-120 min-w-44 max-w-80 animate-fadeIn overflow-y-auto rounded shadow-lg shadow-grayborder focus:outline-none"
       [ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'"
       role="dialog"
       aria-modal="true"
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts b/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts
index ecde2c16145d2e95ddcd3327d51e003d27f721f6..015112aabc92eee9b30ec4ab36ab84cce8da850c 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts
@@ -43,7 +43,7 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: `<ods-popup ${argsToTemplate(args)}>
-        <ods-user-icon button />
+        <ods-user-icon button-content />
         <ods-popup-list-item caption="Lorem" />
         <ods-popup-list-item caption="Ipsum" />
         <ods-popup-list-item caption="Dolor" />
@@ -55,7 +55,7 @@ export const LongText: Story = {
   render: (args) => ({
     props: args,
     template: `<ods-popup ${argsToTemplate(args)}>
-        <p button>Trigger popup</p>
+        <p button-content>Trigger popup</p>
         <ods-popup-list-item caption="Lorem" />
         <ods-popup-list-item caption="Lorem ipsum dolor sit amet" />
       </ods-popup>`,
@@ -66,7 +66,7 @@ export const ItemsWithIcons: Story = {
   render: (args) => ({
     props: args,
     template: `<ods-popup ${argsToTemplate(args)}>
-        <p button>Trigger popup</p>
+        <p button-content>Trigger popup</p>
         <ods-popup-list-item caption="Lorem">
           <ods-save-icon icon size="small" />
         </ods-popup-list-item>