diff --git a/packages/pl-fe/src/components/alt-indicator.tsx b/packages/pl-fe/src/components/alt-indicator.tsx
index 944bbe05b..9369da5a5 100644
--- a/packages/pl-fe/src/components/alt-indicator.tsx
+++ b/packages/pl-fe/src/components/alt-indicator.tsx
@@ -11,21 +11,8 @@ interface IAltIndicator extends Pick<React.HTMLAttributes<HTMLSpanElement>, 'tit
 
 const AltIndicator: React.FC<IAltIndicator> = React.forwardRef<HTMLSpanElement, IAltIndicator>(
   ({ className, warning, message, ...props }, ref) => (
-    <span
-      className={clsx(
-        'inline-flex items-center gap-1 rounded bg-gray-900 px-2 py-1 text-xs font-medium uppercase text-white',
-        className,
-      )}
-      {...props}
-      ref={ref}
-    >
-      {warning && (
-        <Icon
-          className='size-4'
-          src={require('@phosphor-icons/core/regular/warning.svg')}
-          aria-hidden
-        />
-      )}
+    <span className={clsx('⁂-alt-indicator', className)} {...props} ref={ref}>
+      {warning && <Icon src={require('@phosphor-icons/core/regular/warning.svg')} aria-hidden />}
       {message ?? (
         <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
       )}
diff --git a/packages/pl-fe/src/features/ui/components/panels/account-note-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/account-note-panel.tsx
index b660184da..9fd5967f4 100644
--- a/packages/pl-fe/src/features/ui/components/panels/account-note-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/account-note-panel.tsx
@@ -2,8 +2,6 @@ import { debounce } from '@tanstack/react-pacer/debouncer';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import HStack from '@/components/ui/hstack';
-import Text from '@/components/ui/text';
 import Textarea from '@/components/ui/textarea';
 import Widget from '@/components/ui/widget';
 import { useAppSelector } from '@/hooks/use-app-selector';
@@ -56,16 +54,16 @@ const AccountNotePanel: React.FC<IAccountNotePanel> = ({ account }) => {
   return (
     <Widget
       title={
-        <HStack space={2} alignItems='center'>
+        <div className='⁂-account-note-panel__header'>
           <label htmlFor={`account-note-${account.id}`}>
             <FormattedMessage id='account_note.header' defaultMessage='Note' />
           </label>
           {saved && (
-            <Text theme='success' tag='span' className='leading-none'>
+            <span>
               <FormattedMessage id='generic.saved' defaultMessage='Saved' />
-            </Text>
+            </span>
           )}
-        </HStack>
+        </div>
       }
     >
       <Textarea
diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss
index ad6427871..8dd08daea 100644
--- a/packages/pl-fe/src/styles/new/components.scss
+++ b/packages/pl-fe/src/styles/new/components.scss
@@ -568,3 +568,12 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
 .⁂-emoji {
   @apply transition-transform hover:scale-125;
 }
+
+.⁂-alt-indicator {
+  @apply inline-flex items-center gap-1 rounded bg-gray-900 px-2 py-1 text-xs font-medium uppercase text-white;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
diff --git a/packages/pl-fe/src/styles/new/panels.scss b/packages/pl-fe/src/styles/new/panels.scss
new file mode 100644
index 000000000..1b43703d1
--- /dev/null
+++ b/packages/pl-fe/src/styles/new/panels.scss
@@ -0,0 +1,10 @@
+.⁂-account-note-panel__header {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  span {
+    @include mixins.text($theme: success);
+    line-height: 1;
+  }
+}
\ No newline at end of file