diff --git a/packages/pl-fe/src/components/birthday-input.tsx b/packages/pl-fe/src/components/birthday-input.tsx
index 7fa6fbd19..da48cd5d5 100644
--- a/packages/pl-fe/src/components/birthday-input.tsx
+++ b/packages/pl-fe/src/components/birthday-input.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
-import IconButton from 'pl-fe/components/icon-button';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import { DatePicker } from 'pl-fe/features/ui/util/async-components';
 import { useFeatures } from 'pl-fe/hooks/use-features';
 import { useInstance } from 'pl-fe/hooks/use-instance';
@@ -69,7 +69,8 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
     <div className='flex flex-col gap-2'>
       <div className='flex items-center justify-between'>
         <IconButton
-          className='datepicker__button rtl:rotate-180'
+          className='datepicker__button text-gray-400 hover:text-gray-600 rtl:rotate-180'
+          iconClassName='size-4'
           src={require('@phosphor-icons/core/regular/caret-left.svg')}
           onClick={decreaseMonth}
           disabled={prevMonthButtonDisabled}
@@ -78,7 +79,8 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
         />
         <FormattedDate value={date} month='long' />
         <IconButton
-          className='datepicker__button rtl:rotate-180'
+          className='datepicker__button text-gray-400 hover:text-gray-600 rtl:rotate-180'
+          iconClassName='size-4'
           src={require('@phosphor-icons/core/regular/caret-right.svg')}
           onClick={increaseMonth}
           disabled={nextMonthButtonDisabled}
@@ -88,7 +90,8 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
       </div>
       <div className='flex items-center justify-between'>
         <IconButton
-          className='datepicker__button rtl:rotate-180'
+          className='datepicker__button text-gray-400 hover:text-gray-600 rtl:rotate-180'
+          iconClassName='size-4'
           src={require('@phosphor-icons/core/regular/caret-left.svg')}
           onClick={decreaseYear}
           disabled={prevYearButtonDisabled}
@@ -97,7 +100,8 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
         />
         <FormattedDate value={date} year='numeric' />
         <IconButton
-          className='datepicker__button rtl:rotate-180'
+          className='datepicker__button text-gray-400 hover:text-gray-600 rtl:rotate-180'
+          iconClassName='size-4'
           src={require('@phosphor-icons/core/regular/caret-right.svg')}
           onClick={increaseYear}
           disabled={nextYearButtonDisabled}
diff --git a/packages/pl-fe/src/components/icon-button.tsx b/packages/pl-fe/src/components/icon-button.tsx
deleted file mode 100644
index 87e624dc7..000000000
--- a/packages/pl-fe/src/components/icon-button.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import Icon from 'pl-fe/components/icon';
-
-interface IIconButton extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' | 'tabIndex' | 'title'> {
-  active?: boolean;
-  expanded?: boolean;
-  iconClassName?: string;
-  pressed?: boolean;
-  src: string;
-  text?: React.ReactNode;
-}
-
-const IconButton: React.FC<IIconButton> = ({
-  active,
-  className,
-  disabled,
-  expanded,
-  iconClassName,
-  onClick,
-  onKeyDown,
-  onKeyUp,
-  onKeyPress,
-  onMouseDown,
-  onMouseEnter,
-  onMouseLeave,
-  pressed,
-  src,
-  tabIndex = 0,
-  text,
-  title,
-}) => {
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.preventDefault();
-
-    if (!disabled && onClick) {
-      onClick(e);
-    }
-  };
-
-  const handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    if (!disabled && onMouseDown) {
-      onMouseDown(e);
-    }
-  };
-
-  const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
-    if (!disabled && onKeyDown) {
-      onKeyDown(e);
-    }
-  };
-
-  const handleKeyUp: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
-    if (!disabled && onKeyUp) {
-      onKeyUp(e);
-    }
-  };
-
-  const handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
-    if (onKeyPress && !disabled) {
-      onKeyPress(e);
-    }
-  };
-
-  const classes = clsx(className, 'icon-button', {
-    active,
-    'opacity-20 cursor-default': disabled,
-  });
-
-  return (
-    <button
-      aria-label={title}
-      aria-pressed={pressed}
-      aria-expanded={expanded}
-      title={title}
-      className={classes}
-      onClick={handleClick}
-      onMouseDown={handleMouseDown}
-      onKeyDown={handleKeyDown}
-      onKeyUp={handleKeyUp}
-      onKeyPress={handleKeyPress}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      tabIndex={tabIndex}
-      disabled={disabled}
-      type='button'
-    >
-      <div className='flex items-center justify-center'>
-        <Icon className={iconClassName} src={src} aria-hidden='true' />
-      </div>
-      {text && <span className='pl-0.5'>{text}</span>}
-    </button>
-  );
-};
-
-export { IconButton as default };
diff --git a/packages/pl-fe/src/components/ui/icon-button.tsx b/packages/pl-fe/src/components/ui/icon-button.tsx
index a4b21924f..74dbb84b9 100644
--- a/packages/pl-fe/src/components/ui/icon-button.tsx
+++ b/packages/pl-fe/src/components/ui/icon-button.tsx
@@ -29,7 +29,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
     <Component
       ref={ref}
       type='button'
-      className={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
+      className={clsx('⁂-icon-button flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
         'bg-white dark:bg-transparent': theme === 'seamless',
         'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
         'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200': theme === 'secondary',
diff --git a/packages/pl-fe/src/features/compose/components/schedule-form.tsx b/packages/pl-fe/src/features/compose/components/schedule-form.tsx
index 8a32ff118..7306cdcd5 100644
--- a/packages/pl-fe/src/features/compose/components/schedule-form.tsx
+++ b/packages/pl-fe/src/features/compose/components/schedule-form.tsx
@@ -3,11 +3,8 @@ import React, { Suspense, useCallback } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setSchedule, removeSchedule } from 'pl-fe/actions/compose';
-import IconButton from 'pl-fe/components/icon-button';
-import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import Input from 'pl-fe/components/ui/input';
-import Stack from 'pl-fe/components/ui/stack';
-import Text from 'pl-fe/components/ui/text';
 import { DatePicker } from 'pl-fe/features/ui/util/async-components';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useCompose } from 'pl-fe/hooks/use-compose';
@@ -58,11 +55,11 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
   }
 
   return (
-    <Stack space={2}>
-      <Text theme='muted'>
+    <div className='⁂-compose-form__schedule'>
+      <p className='⁂-compose-form__schedule__hint'>
         <FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
-      </Text>
-      <HStack space={2} alignItems='center'>
+      </p>
+      <div className='⁂-compose-form__schedule__date'>
         <Suspense fallback={<Input type='text' disabled />}>
           <DatePicker
             selected={scheduledAt}
@@ -81,14 +78,12 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
           />
         </Suspense>
         <IconButton
-          iconClassName='h-4 w-4'
-          className='bg-transparent text-gray-400 hover:text-gray-600'
           src={require('@phosphor-icons/core/regular/x.svg')}
           onClick={handleRemove}
           title={intl.formatMessage(messages.remove)}
         />
-      </HStack>
-    </Stack>
+      </div>
+    </div>
   );
 };
 
diff --git a/packages/pl-fe/src/features/reply-mentions/account.tsx b/packages/pl-fe/src/features/reply-mentions/account.tsx
index 2ca17af4d..ca0dea50e 100644
--- a/packages/pl-fe/src/features/reply-mentions/account.tsx
+++ b/packages/pl-fe/src/features/reply-mentions/account.tsx
@@ -5,7 +5,7 @@ import { fetchAccount } from 'pl-fe/actions/accounts';
 import { addToMentions, removeFromMentions } from 'pl-fe/actions/compose';
 import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 import AccountComponent from 'pl-fe/components/account';
-import IconButton from 'pl-fe/components/icon-button';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useCompose } from 'pl-fe/hooks/use-compose';
 
@@ -42,9 +42,9 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@phosphor-icons/core/regular/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={require('@phosphor-icons/core/regular/x.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/packages/pl-fe/src/modals/list-adder-modal/components/list.tsx b/packages/pl-fe/src/modals/list-adder-modal/components/list.tsx
index b7d0925dd..fe9cb4f4c 100644
--- a/packages/pl-fe/src/modals/list-adder-modal/components/list.tsx
+++ b/packages/pl-fe/src/modals/list-adder-modal/components/list.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Icon from 'pl-fe/components/icon';
-import IconButton from 'pl-fe/components/icon-button';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import { useAddAccountsToList, useList, useRemoveAccountsFromList } from 'pl-fe/queries/accounts/use-lists';
 
 const messages = defineMessages({
@@ -32,9 +32,9 @@ const List: React.FC<IList> = ({ listId, accountId, added }) => {
   let button;
 
   if (added) {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/packages/pl-fe/src/modals/list-editor-modal/components/account.tsx b/packages/pl-fe/src/modals/list-editor-modal/components/account.tsx
index 8379e9a78..755cab0e0 100644
--- a/packages/pl-fe/src/modals/list-editor-modal/components/account.tsx
+++ b/packages/pl-fe/src/modals/list-editor-modal/components/account.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import IconButton from 'pl-fe/components/icon-button';
 import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import AccountContainer from 'pl-fe/containers/account-container';
 
 const messages = defineMessages({
@@ -23,9 +23,9 @@ const Account: React.FC<IAccount> = ({ accountId, added, onAdd, onRemove }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@phosphor-icons/core/regular/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={() => onRemove(accountId)} />;
+    button = <IconButton src={require('@phosphor-icons/core/regular/x.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={() => onRemove(accountId)} />;
   } else {
-    button = <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={() => onAdd(accountId)} />;
+    button = <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={() => onAdd(accountId)} />;
   }
 
   return (
diff --git a/packages/pl-fe/src/pages/search/search.tsx b/packages/pl-fe/src/pages/search/search.tsx
index 747a3e810..8f232b91a 100644
--- a/packages/pl-fe/src/pages/search/search.tsx
+++ b/packages/pl-fe/src/pages/search/search.tsx
@@ -5,9 +5,9 @@ import { useSearchParams } from 'react-router-dom-v5-compat';
 
 import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 import SearchColumn from 'pl-fe/columns/search';
-import IconButton from 'pl-fe/components/icon-button';
 import Column from 'pl-fe/components/ui/column';
 import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import Input from 'pl-fe/components/ui/input';
 import SvgIcon from 'pl-fe/components/ui/svg-icon';
 import Tabs from 'pl-fe/components/ui/tabs';
@@ -172,7 +172,7 @@ const SearchResults = () => {
     <>
       {accountId ? (
         <HStack className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800' alignItems='center' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleUnsetAccount} />
+          <IconButton className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleUnsetAccount} />
           <Text truncate>
             <FormattedMessage
               id='search_results.filter_message'
diff --git a/packages/pl-fe/src/pages/settings/aliases.tsx b/packages/pl-fe/src/pages/settings/aliases.tsx
index a6147fe9b..e2a8b39d5 100644
--- a/packages/pl-fe/src/pages/settings/aliases.tsx
+++ b/packages/pl-fe/src/pages/settings/aliases.tsx
@@ -5,12 +5,12 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
 import AccountComponent from 'pl-fe/components/account';
 import Icon from 'pl-fe/components/icon';
-import IconButton from 'pl-fe/components/icon-button';
 import ScrollableList from 'pl-fe/components/scrollable-list';
 import Button from 'pl-fe/components/ui/button';
 import { CardHeader, CardTitle } from 'pl-fe/components/ui/card';
 import Column from 'pl-fe/components/ui/column';
 import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import Text from 'pl-fe/components/ui/text';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFeatures } from 'pl-fe/hooks/use-features';
@@ -55,7 +55,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
 
   if (!added && accountId !== me) {
     button = (
-      <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+      <IconButton src={require('@phosphor-icons/core/regular/plus.svg')} className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
     );
   }
 
diff --git a/packages/pl-fe/src/pages/timelines/remote-timeline.tsx b/packages/pl-fe/src/pages/timelines/remote-timeline.tsx
index 89588ed2a..b3d57af0a 100644
--- a/packages/pl-fe/src/pages/timelines/remote-timeline.tsx
+++ b/packages/pl-fe/src/pages/timelines/remote-timeline.tsx
@@ -4,9 +4,9 @@ import { useHistory } from 'react-router-dom';
 
 import { fetchPublicTimeline } from 'pl-fe/actions/timelines';
 import { useRemoteStream } from 'pl-fe/api/hooks/streaming/use-remote-stream';
-import IconButton from 'pl-fe/components/icon-button';
 import Column from 'pl-fe/components/ui/column';
 import HStack from 'pl-fe/components/ui/hstack';
+import IconButton from 'pl-fe/components/ui/icon-button';
 import Text from 'pl-fe/components/ui/text';
 import PinnedHostsPicker from 'pl-fe/features/remote-timeline/components/pinned-hosts-picker';
 import Timeline from 'pl-fe/features/ui/components/timeline';
@@ -52,7 +52,7 @@ const RemoteTimelinePage: React.FC<IRemoteTimelinePage> = ({ params }) => {
 
       {!pinned && (
         <HStack className='mb-4 px-2' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleCloseClick} />
+          <IconButton className='text-gray-400 hover:text-gray-600' iconClassName='h-5 w-5' src={require('@phosphor-icons/core/regular/x.svg')} onClick={handleCloseClick} />
           <Text>
             <FormattedMessage
               id='remote_timeline.filter_message'
diff --git a/packages/pl-fe/src/styles/new/compose.scss b/packages/pl-fe/src/styles/new/compose.scss
index 5c139dcfc..360500a26 100644
--- a/packages/pl-fe/src/styles/new/compose.scss
+++ b/packages/pl-fe/src/styles/new/compose.scss
@@ -1,3 +1,5 @@
+@use 'mixins';
+
 .⁂-compose-form {
   @apply flex flex-col gap-y-4 w-full;
 
@@ -64,4 +66,24 @@
       @apply h-full cursor-pointer py-2.5 pl-1 pr-3 last:rounded-r-full inline-flex select-none appearance-none border border-transparent bg-primary-500 transition-all hover:bg-primary-400 focus:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2 disabled:cursor-default disabled:opacity-75 dark:hover:bg-primary-600;
     }
   }
+
+  &__schedule {
+    @apply flex flex-col gap-2;
+
+    &__hint {
+      @include mixins.text($theme: muted);
+    }
+
+    &__date {
+      @apply flex items-center gap-2;
+    }
+
+    .⁂-icon-button {
+      @apply bg-transparent text-gray-400 hover:text-gray-600;
+
+      svg {
+        @apply size-4;
+      }
+    }
+  }
 }
\ No newline at end of file