diff --git a/src/components/timelines/notification/Follow.tsx b/src/components/timelines/notification/Follow.tsx
index a7a97a41..b232cddf 100644
--- a/src/components/timelines/notification/Follow.tsx
+++ b/src/components/timelines/notification/Follow.tsx
@@ -49,14 +49,16 @@ const Follow: React.FC<Props> = props => {
     <div onClick={() => props.setAccountDetail(props.notification.account)} style={{ cursor: 'pointer' }}>
       {/** action **/}
       <FlexboxGrid style={{ paddingRight: '8px' }}>
-        <FlexboxGrid.Item colspan={20} style={{ display: 'flex', alignItems: 'middle' }}>
+        <FlexboxGrid.Item colspan={22} style={{ display: 'flex', alignItems: 'middle' }}>
           {/** icon **/}
-          <div style={{ paddingRight: '8px', textAlign: 'right', width: '56px' }}>
+          <div style={{ paddingRight: '4px', paddingLeft: '8px', width: '32px', boxSizing: 'border-box' }}>
             <Icon as={BsPersonPlus} color="cyan" />
           </div>
-          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{actionText(props.notification)}</div>
+          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 'calc(100% - 32px)' }}>
+            {actionText(props.notification)}
+          </div>
         </FlexboxGrid.Item>
-        <FlexboxGrid.Item colspan={4} style={{ textAlign: 'right', color: 'var(--rs-text-tertiary)' }}>
+        <FlexboxGrid.Item colspan={2} style={{ textAlign: 'right', color: 'var(--rs-text-tertiary)' }}>
           <Time time={props.notification.created_at} />
         </FlexboxGrid.Item>
       </FlexboxGrid>
diff --git a/src/components/timelines/notification/Move.tsx b/src/components/timelines/notification/Move.tsx
index 85391eba..b0de3b62 100644
--- a/src/components/timelines/notification/Move.tsx
+++ b/src/components/timelines/notification/Move.tsx
@@ -16,14 +16,16 @@ export default function Move(props: Props) {
     <div onClick={() => props.setAccountDetail(props.notification.target)} style={{ cursor: 'pointer' }}>
       {/** action **/}
       <FlexboxGrid style={{ paddingRight: '8px' }}>
-        <FlexboxGrid.Item colspan={20} style={{ display: 'flex', alignItems: 'middle' }}>
+        <FlexboxGrid.Item colspan={22} style={{ display: 'flex', alignItems: 'middle' }}>
           {/** icon **/}
-          <div style={{ paddingRight: '8px', textAlign: 'right', width: '56px' }}>
+          <div style={{ paddingRight: '4px', paddingLeft: '8px', width: '32px', boxSizing: 'border-box' }}>
             <Icon as={BsBag} color="cyan" />
           </div>
-          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{actionText(props.notification)}</div>
+          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 'calc(100% - 32px)' }}>
+            {actionText(props.notification)}
+          </div>
         </FlexboxGrid.Item>
-        <FlexboxGrid.Item colspan={4} style={{ textAlign: 'right', color: 'var(--rs-text-tertiary)' }}>
+        <FlexboxGrid.Item colspan={2} style={{ textAlign: 'right', color: 'var(--rs-text-tertiary)' }}>
           <Time time={props.notification.created_at} />
         </FlexboxGrid.Item>
       </FlexboxGrid>
diff --git a/src/components/timelines/notification/Reaction.tsx b/src/components/timelines/notification/Reaction.tsx
index 9bc70019..626fc9b1 100644
--- a/src/components/timelines/notification/Reaction.tsx
+++ b/src/components/timelines/notification/Reaction.tsx
@@ -41,7 +41,7 @@ const actionIcon = (notification: Entity.Notification) => {
     case 'reaction':
       if (notification.reaction) {
         if (notification.reaction.url) {
-          return <img src={notification.reaction.url} style={{ height: '18px' }} />
+          return <img src={notification.reaction.url} style={{ height: '16px' }} />
         } else {
           return <span dangerouslySetInnerHTML={{ __html: notification.reaction.name }} />
         }
@@ -229,16 +229,18 @@ const Reaction: React.FC<Props> = props => {
     <div>
       {/** action **/}
       <FlexboxGrid align="middle" style={{ paddingRight: '8px' }}>
-        <FlexboxGrid.Item colspan={20}>
+        <FlexboxGrid.Item colspan={22}>
           <div style={{ display: 'flex', alignItems: 'middle' }}>
             {/** icon **/}
-            <div style={{ paddingRight: '8px', textAlign: 'right', width: '56px' }}>{actionIcon(props.notification)}</div>
-            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <div style={{ paddingRight: '4px', paddingLeft: '8px', width: '32px', boxSizing: 'border-box' }}>
+              {actionIcon(props.notification)}
+            </div>
+            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 'calc(100% - 32px)' }}>
               {actionText(props.notification, props.setAccountDetail)}
             </div>
           </div>
         </FlexboxGrid.Item>
-        <FlexboxGrid.Item colspan={4} style={{ textAlign: 'right', color: 'var(--rs-text-secondary)' }}>
+        <FlexboxGrid.Item colspan={2} style={{ textAlign: 'right', color: 'var(--rs-text-secondary)' }}>
           <Time time={props.notification.created_at} />
         </FlexboxGrid.Item>
       </FlexboxGrid>