diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index 9d7e9141c..bdc278e5b 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@@ -26,6 +26,7 @@ interface IDropdownMenuContent {
   component?: React.FC<{ handleClose: () => any }>;
   touchscreen?: boolean;
   width?: React.CSSProperties['width'];
+  className?: string;
 }
 
 interface IDropdownMenu {
@@ -40,11 +41,12 @@ interface IDropdownMenu {
   src?: string;
   title?: string;
   width?: React.CSSProperties['width'];
+  className?: string;
 }
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({ handleClose, items, component: Component, touchscreen, width }) => {
+const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({ handleClose, items, component: Component, touchscreen, width, className }) => {
   if (touchscreen) width = undefined;
 
   const intl = useIntl();
@@ -151,7 +153,7 @@ const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({ handleClose, item
   );
 
   return (
-    <div className='max-h-full overflow-auto' ref={ref}>
+    <div className={clsx('max-h-full overflow-auto', className)} ref={ref}>
       {items?.some(item => item?.items?.length) ? (
         <ReactSwipeableViews animateHeight index={tab === undefined ? 0 : 1} style={{ width }}>
           <div className={clsx('max-w-full', { 'w-full': touchscreen })} style={{ width }}>
@@ -200,6 +202,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
     src = require('@phosphor-icons/core/regular/dots-three.svg'),
     title = 'Menu',
     width,
+    className,
   } = props;
 
   const { openDropdownMenu, closeDropdownMenu } = useUiStoreActions();
@@ -255,7 +258,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
       };
       openModal('DROPDOWN_MENU', {
         element: refs.reference.current as HTMLButtonElement,
-        content: <DropdownMenuContent handleClose={handleClose} items={items} component={component} touchscreen />,
+        content: <DropdownMenuContent handleClose={handleClose} items={items} component={component} touchscreen className={className} />,
       });
     } else {
       openDropdownMenu();
diff --git a/packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx b/packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx
index adb2726a8..d809a4dc9 100644
--- a/packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx
+++ b/packages/pl-fe/src/features/compose-event/tabs/edit-event.tsx
@@ -33,6 +33,7 @@ import toast from 'pl-fe/toast';
 import UploadButton from '../components/upload-button';
 
 import type { Location } from 'pl-api';
+import ContentTypeButton from 'pl-fe/features/compose/components/content-type-button';
 
 const messages = defineMessages({
   eventNamePlaceholder: { id: 'compose_event.fields.name_placeholder', defaultMessage: 'Name' },
@@ -172,7 +173,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
   );
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form className='⁂-edit-event' onSubmit={handleSubmit}>
       <FormGroup
         labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
         hintText={<FormattedMessage id='compose_event.fields.banner_hint' defaultMessage='PNG, GIF or JPG. Landscape format is preferred.' />}
@@ -201,15 +202,18 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
       <FormGroup
         labelText={<FormattedMessage id='compose_event.fields.description_label' defaultMessage='Event description' />}
       >
-        <ComposeEditor
-          key={String(isDisabled)}
-          className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
-          placeholderClassName='pt-2'
-          composeId={composeId}
-          placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
-          handleSubmit={handleSubmit}
-          onChange={setText}
-        />
+        <div className='relative'>
+          <ContentTypeButton composeId={composeId} />
+          <ComposeEditor
+            key={String(isDisabled)}
+            className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
+            placeholderClassName='pt-2'
+            composeId={composeId}
+            placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
+            handleSubmit={handleSubmit}
+            onChange={setText}
+          />
+        </div>
       </FormGroup>
       <FormGroup
         labelText={<FormattedMessage id='compose_event.fields.location_label' defaultMessage='Event location' />}
diff --git a/packages/pl-fe/src/features/compose/components/compose-form.tsx b/packages/pl-fe/src/features/compose/components/compose-form.tsx
index eb2dc68a3..31097cfaa 100644
--- a/packages/pl-fe/src/features/compose/components/compose-form.tsx
+++ b/packages/pl-fe/src/features/compose/components/compose-form.tsx
@@ -5,7 +5,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { length } from 'stringz';
 
-import 'pl-fe/styles/new/compose.scss';
 import {
   submitCompose,
   clearComposeSuggestions,
diff --git a/packages/pl-fe/src/features/compose/components/content-type-button.tsx b/packages/pl-fe/src/features/compose/components/content-type-button.tsx
index 0e34f01c0..5d49483ee 100644
--- a/packages/pl-fe/src/features/compose/components/content-type-button.tsx
+++ b/packages/pl-fe/src/features/compose/components/content-type-button.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { changeComposeContentType } from 'pl-fe/actions/compose';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import Button from 'pl-fe/components/ui/button';
+import Icon from 'pl-fe/components/ui/icon';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useCompose } from 'pl-fe/hooks/use-compose';
 import { useInstance } from 'pl-fe/hooks/use-instance';
@@ -86,14 +86,11 @@ const ContentTypeButton: React.FC<IContentTypeButton> = ({ composeId, compact })
         active: contentType === value,
       }))}
     >
-      <Button
-        theme='muted'
-        size='xs'
-        text={compact ? undefined : option?.text}
-        icon={option?.icon}
-        secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
-        title={compact ? option?.text : intl.formatMessage(messages.change_content_type)}
-      />
+      <button className='⁂-content-type-button' title={compact ? option?.text : intl.formatMessage(messages.change_content_type)}>
+        {option?.icon && <Icon src={option.icon} />}
+        {compact ? undefined : option?.text}
+        <Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} />
+      </button>
     </DropdownMenu>
   );
 };
diff --git a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
index b7703885c..9f12df2a9 100644
--- a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { addComposeLanguage, changeComposeLanguage, changeComposeModifiedLanguage, deleteComposeLanguage } from 'pl-fe/actions/compose';
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
-import Button from 'pl-fe/components/ui/button';
 import Icon from 'pl-fe/components/ui/icon';
 import Input from 'pl-fe/components/ui/input';
 import { type Language, languages as languagesObject } from 'pl-fe/features/preferences';
@@ -148,8 +147,8 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
 
   return (
     <>
-      <label className='relative m-2 mt-1 block grow'>
-        <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
+      <label className='⁂-language-dropdown__search'>
+        <span>{intl.formatMessage(messages.search)}</span>
 
         <Input
           className='w-64'
@@ -161,17 +160,15 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
         />
         <button
           tabIndex={0}
-          className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-2 rtl:left-0 rtl:right-auto'
           onClick={handleClear}
           title={isSearching ? intl.formatMessage(messages.clear) : intl.formatMessage(messages.search)}
         >
           <Icon
-            className='size-5 text-gray-600'
             src={isSearching ? require('@phosphor-icons/core/regular/backspace.svg') : require('@phosphor-icons/core/regular/magnifying-glass.svg')}
           />
         </button>
       </label>
-      <div className='-mb-1 h-96 w-full overflow-auto' ref={node} tabIndex={-1}>
+      <div className='⁂-language-dropdown__options' ref={node} tabIndex={-1}>
         {results.map(([code, name]) => {
           const active = code === language;
           const modified = code === modifiedLanguage;
@@ -184,32 +181,27 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
               data-index={code}
               onClick={handleOptionClick}
               className={clsx(
-                'flex w-full gap-2 p-2.5 text-left text-sm text-gray-700 dark:text-gray-400',
+                '⁂-language-dropdown__option',
                 {
-                  'bg-gray-100 dark:bg-gray-800 black:bg-gray-900 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700': modified,
-                  'cursor-pointer hover:bg-gray-100 black:hover:bg-gray-900 dark:hover:bg-gray-800': !hasMultipleLanguages || code in textMap,
-                  'cursor-pointer': active,
-                  'cursor-default': !active && !(!hasMultipleLanguages || code in textMap),
+                  '⁂-language-dropdown__option--modified': modified,
+                  '⁂-language-dropdown__option--available': !hasMultipleLanguages || code in textMap,
+                  '⁂-language-dropdown__option--active': active,
                 },
               )}
               aria-selected={active}
               ref={active ? focusedItem : null}
             >
-              <div
-                className={clsx('flex-auto grow text-primary-600 dark:text-primary-400', {
-                  'text-black dark:text-white': modified,
-                })}
-              >
+              <div className='⁂-language-dropdown__option__name'>
                 {name}
               </div>
               {features.multiLanguage && !!language && !active && (
                 code in textMap ? (
                   <button title={intl.formatMessage(messages.deleteLanguage)} onClick={handleDeleteLanguageClick}>
-                    <Icon className='size-4' src={require('@phosphor-icons/core/regular/minus.svg')} />
+                    <Icon src={require('@phosphor-icons/core/regular/minus.svg')} />
                   </button>
                 ) : (
                   <button title={intl.formatMessage(messages.addLanguage)} onClick={handleAddLanguageClick}>
-                    <Icon className='size-4' src={require('@phosphor-icons/core/regular/plus.svg')} />
+                    <Icon src={require('@phosphor-icons/core/regular/plus.svg')} />
                   </button>
                 )
               )}
@@ -254,15 +246,13 @@ const LanguageDropdownButton: React.FC<ILanguageDropdownButton> = ({ composeId,
   return (
     <DropdownMenu
       component={LanguageDropdown}
+      className='⁂-language-dropdown'
     >
-      <Button
-        theme='muted'
-        size='xs'
-        text={buttonLabel}
-        icon={require('@phosphor-icons/core/regular/translate.svg')}
-        secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
-        title={intl.formatMessage(messages.languagePrompt)}
-      />
+      <button title={intl.formatMessage(messages.languagePrompt)}>
+        <Icon src={require('@phosphor-icons/core/regular/translate.svg')} />
+        {buttonLabel}
+        <Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} />
+      </button>
     </DropdownMenu>
   );
 
diff --git a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
index 0c8e82a91..f9cf0aafe 100644
--- a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
@@ -3,7 +3,7 @@ import { useIntl, defineMessages, IntlShape } from 'react-intl';
 
 import { changeComposeFederated, changeComposeVisibility } from 'pl-fe/actions/compose';
 import DropdownMenu, { MenuItem } from 'pl-fe/components/dropdown-menu';
-import Button from 'pl-fe/components/ui/button';
+import Icon from 'pl-fe/components/ui/icon';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useCompose } from 'pl-fe/hooks/use-compose';
 import { useFeatures } from 'pl-fe/hooks/use-features';
@@ -181,14 +181,11 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
 
   return (
     <DropdownMenu items={items} width='16rem'>
-      <Button
-        theme='muted'
-        size='xs'
-        text={compact ? undefined : text}
-        icon={valueOption?.icon}
-        secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
-        title={compact ? text : intl.formatMessage(messages.change_privacy)}
-      />
+      <button title={compact ? text : intl.formatMessage(messages.change_privacy)}>
+        {valueOption?.icon && <Icon src={valueOption.icon} />}
+        {compact ? undefined : text}
+        <Icon src={require('@phosphor-icons/core/regular/caret-down.svg')} />
+      </button>
     </DropdownMenu>
   );
 };
diff --git a/packages/pl-fe/src/styles/new/accounts.scss b/packages/pl-fe/src/styles/new/accounts.scss
index 6fa61d17d..383c73052 100644
--- a/packages/pl-fe/src/styles/new/accounts.scss
+++ b/packages/pl-fe/src/styles/new/accounts.scss
@@ -1,5 +1,9 @@
 @use 'mixins';
 
+.⁂-account-layout {
+  @include mixins.card($size: lg);
+}
+
 .⁂-account-card {
   @apply block w-full shrink-0;
 
diff --git a/packages/pl-fe/src/styles/new/compose.scss b/packages/pl-fe/src/styles/new/compose.scss
index 392acac22..14f784702 100644
--- a/packages/pl-fe/src/styles/new/compose.scss
+++ b/packages/pl-fe/src/styles/new/compose.scss
@@ -5,6 +5,14 @@
 
   &__select-buttons {
     @apply flex gap-2 flex-wrap;
+
+    button {
+      @include mixins.button($theme: muted, $size: xs);
+
+      .⁂-icon svg {
+        @apply size-4;
+      }
+    }
   }
 
   &--transparent &__select-buttons {
@@ -98,4 +106,55 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.⁂-language-dropdown {
+  &__search {
+    @apply relative m-2 mt-1 block grow;
+
+    > span {
+      position: absolute;
+      visibility: hidden;
+    }
+
+    button {
+      @apply absolute inset-y-0 right-0 flex cursor-pointer items-center px-2 rtl:left-0 rtl:right-auto;
+    
+      svg {
+        @apply size-5 text-gray-600;
+      }
+    }
+  }
+
+  &__options {
+    @apply -mb-1 h-96 w-full overflow-auto;
+  }
+
+  &__option {
+    @apply flex w-full gap-2 p-2.5 text-left text-sm text-gray-700 dark:text-gray-400 cursor-default;
+
+    &--modified {
+      @apply bg-gray-100 dark:bg-gray-800 black:bg-gray-900 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700;
+
+      .⁂-language-dropdown__option__name {
+        @apply text-black dark:text-white;
+      }
+    }
+
+    &--available {
+      @apply cursor-pointer hover:bg-gray-100 black:hover:bg-gray-900 dark:hover:bg-gray-800;
+    }
+
+    &--active {
+      @apply cursor-pointer;
+    }
+
+    &__name {
+      @apply flex-auto grow text-primary-600 dark:text-primary-400;
+    }
+
+    svg {
+      @apply size-4;
+    }
+  }
+}
diff --git a/packages/pl-fe/src/styles/new/events.scss b/packages/pl-fe/src/styles/new/events.scss
new file mode 100644
index 000000000..b61e789ed
--- /dev/null
+++ b/packages/pl-fe/src/styles/new/events.scss
@@ -0,0 +1,13 @@
+@use 'mixins';
+
+.⁂-edit-event .⁂-content-type-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 11!important;
+  @include mixins.button($theme: muted, $size: xs);
+
+  .⁂-icon svg {
+    @apply size-4;
+  }
+}
\ No newline at end of file
diff --git a/packages/pl-fe/src/styles/new/index.scss b/packages/pl-fe/src/styles/new/index.scss
index 25fe3c789..6e569971c 100644
--- a/packages/pl-fe/src/styles/new/index.scss
+++ b/packages/pl-fe/src/styles/new/index.scss
@@ -3,3 +3,5 @@
 @use 'accounts';
 @use 'statuses';
 @use 'timelines';
+@use 'compose';
+@use 'events';