diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 20753d94b9..31a1dc5dcb 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -1053,23 +1053,6 @@ $left-gutter: 64px;
         pointer-events: none; /* ensures the title for the sender name can be correctly displayed */
     }
 
-    /* Display notification dot */
-    &[data-notification]::before,
-    .mx_NotificationBadge {
-        position: absolute;
-        $notification-inset-block-start: 14px; /* 14px: align the dot with the timestamp row */
-
-        /* !important to fix overly specific CSS selector applied on mx_NotificationBadge */
-        width: $notification-dot-size !important;
-        height: $notification-dot-size !important;
-        border-radius: 50%;
-        inset: $notification-inset-block-start $spacing-8 auto auto;
-    }
-
-    .mx_NotificationBadge_count {
-        display: none;
-    }
-
     &[data-notification="total"]::before {
         background-color: $room-icon-unread-color;
     }
@@ -1441,14 +1424,6 @@ $left-gutter: 64px;
                 margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
             }
         }
-
-        &[data-shape="ThreadsList"][data-notification]::before,
-        .mx_NotificationBadge {
-            /* stylelint-disable-next-line declaration-colon-space-after */
-            inset-block-start: calc(
-                $notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top)
-            );
-        }
     }
 }
 
diff --git a/res/css/views/rooms/_NotificationBadge.pcss b/res/css/views/rooms/_NotificationBadge.pcss
index d7f15eacde..68b44b124b 100644
--- a/res/css/views/rooms/_NotificationBadge.pcss
+++ b/res/css/views/rooms/_NotificationBadge.pcss
@@ -41,11 +41,13 @@ limitations under the License.
         /* These are the 3 background types */
 
         &.mx_NotificationBadge_dot {
-            background-color: $primary-content; /* increased visibility */
+            width: 8px;
+            height: 8px;
+            border-radius: 8px;
 
-            width: 6px;
-            height: 6px;
-            border-radius: 6px;
+            .mx_NotificationBadge_count {
+                display: none;
+            }
         }
 
         &.mx_NotificationBadge_knocked {
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 8ea3e35f67..cb41417338 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1308,6 +1308,11 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                                 ""
                             )}
                             {timestamp}
+                            <UnreadNotificationBadge
+                                room={room || undefined}
+                                threadId={this.props.mxEvent.getId()}
+                                type="dot"
+                            />
                         </div>
                         {isRenderingNotification && room ? (
                             <div className="mx_EventTile_avatar">
@@ -1336,7 +1341,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         )}
 
                         {msgOption}
-                        <UnreadNotificationBadge room={room || undefined} threadId={this.props.mxEvent.getId()} />
                     </>,
                 );
             }
diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
index 95f71cc085..03529defc1 100644
--- a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
@@ -28,6 +28,7 @@ interface Props {
     count: number;
     level: NotificationLevel;
     knocked?: boolean;
+    type?: "badge" | "dot";
 }
 
 interface ClickableProps extends Props {
@@ -39,7 +40,7 @@ interface ClickableProps extends Props {
 }
 
 export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props, ClickableProps>>(
-    ({ symbol, count, level, knocked, ...props }, ref) => {
+    ({ symbol, count, level, knocked, type = "badge", ...props }, ref) => {
         const hideBold = useSettingValue("feature_hidebold");
 
         // Don't show a badge if we don't need to
@@ -59,10 +60,10 @@ export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props,
             mx_NotificationBadge: true,
             mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
             mx_NotificationBadge_highlighted: level >= NotificationLevel.Highlight,
-            mx_NotificationBadge_dot: isEmptyBadge && !knocked,
+            mx_NotificationBadge_dot: (isEmptyBadge && !knocked) || type === "dot",
             mx_NotificationBadge_knocked: knocked,
-            mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3,
-            mx_NotificationBadge_3char: symbol && symbol.length > 2,
+            mx_NotificationBadge_2char: type === "badge" && symbol && symbol.length > 0 && symbol.length < 3,
+            mx_NotificationBadge_3char: type === "badge" && symbol && symbol.length > 2,
         });
 
         if (props.onClick) {
diff --git a/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
index 4708c33b95..5864a63be0 100644
--- a/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
@@ -23,10 +23,11 @@ import { StatelessNotificationBadge } from "./StatelessNotificationBadge";
 interface Props {
     room?: Room;
     threadId?: string;
+    type?: "badge" | "dot";
 }
 
-export function UnreadNotificationBadge({ room, threadId }: Props): JSX.Element {
+export function UnreadNotificationBadge({ room, threadId, type }: Props): JSX.Element {
     const { symbol, count, level } = useUnreadNotifications(room, threadId);
 
-    return <StatelessNotificationBadge symbol={symbol} count={count} level={level} />;
+    return <StatelessNotificationBadge symbol={symbol} count={count} level={level} type={type} />;
 }