diff --git a/CHANGELOG.md b/CHANGELOG.md
index 205083d3..46dfe209 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to
 
 - ♻️(fullstack) simplify source serialization
 - ✨(backend) expose room configuration to all API consumers
+- 🩹(frontend) improve reaction toolbar centering with dynamic positioning
 
 ## [1.16.0] - 2026-05-13
 
diff --git a/src/frontend/src/features/layout/components/ControlBarRegion.tsx b/src/frontend/src/features/layout/components/ControlBarRegion.tsx
index b19dd6ed..4550e5c0 100644
--- a/src/frontend/src/features/layout/components/ControlBarRegion.tsx
+++ b/src/frontend/src/features/layout/components/ControlBarRegion.tsx
@@ -22,6 +22,8 @@ const controlBarRegion = cva({
   },
 })
 
+export const CONTROL_BAR_REGION_ID = 'control-bar-region'
+
 export type ControlBarRegionProps = React.HTMLAttributes<HTMLDivElement> &
   RecipeVariantProps<typeof controlBarRegion>
 
@@ -34,6 +36,7 @@ export function ControlBarRegion({
   return (
     <div
       role="region"
+      id={CONTROL_BAR_REGION_ID}
       aria-label={t('controls.region')}
       className={controlBarRegion({ mobile })}
       {...props}
diff --git a/src/frontend/src/features/reactions/components/ReactionsToggle.tsx b/src/frontend/src/features/reactions/components/ReactionsToggle.tsx
index 27bfe4cf..9bd20795 100644
--- a/src/frontend/src/features/reactions/components/ReactionsToggle.tsx
+++ b/src/frontend/src/features/reactions/components/ReactionsToggle.tsx
@@ -15,6 +15,8 @@ const focusReactionsToolbar = () => {
     ?.focus()
 }
 
+export const REACTIONS_TOGGLE_ID = 'reactions-toggle'
+
 export const ReactionsToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
 
@@ -35,7 +37,7 @@ export const ReactionsToggle = () => {
 
   return (
     <ToggleButton
-      id="reactions-toggle"
+      id={REACTIONS_TOGGLE_ID}
       data-attr="reactions-toggle"
       square
       variant="primaryDark"
diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
index 04d6d02f..507ab2ff 100644
--- a/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
+++ b/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import { styled } from '@/styled-system/jsx'
 import { useReactionsToolbar } from '../../hooks/useReactionsToolbar'
 import { useIsMobile } from '@/utils/useIsMobile'
@@ -7,6 +13,9 @@ import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import { Button } from '@/primitives'
 
+import { CONTROL_BAR_REGION_ID } from '@/features/layout/components/ControlBarRegion'
+import { REACTIONS_TOGGLE_ID } from '../ReactionsToggle'
+
 const StyledContainer = styled('div', {
   base: {
     display: 'flex',
@@ -30,15 +39,6 @@ const StyledContainer = styled('div', {
         pointerEvents: 'auto',
       },
     },
-    desktopOffset: {
-      true: {
-        // Ideally this value should be calculated dynamically in JavaScript to keep
-        // the reaction toolbar perfectly centered relative to the reaction toggle.
-        // However, for simplicity and to follow a pragmatic 80/20 approach,
-        // this value is currently hardcoded in CSS.
-        marginRight: '30px',
-      },
-    },
   },
 })
 
@@ -67,6 +67,7 @@ export const ReactionButtonsContainer = ({
   const { isOpen } = useReactionsToolbar()
   const isMobile = useIsMobile()
 
+  const containerRef = useRef<HTMLDivElement>(null)
   const scrollRef = useRef<HTMLDivElement>(null)
   const { width } = useSize(scrollRef)
 
@@ -74,6 +75,11 @@ export const ReactionButtonsContainer = ({
   const [overflowing, setOverflowing] = useState(false)
   const [atStart, setAtStart] = useState(true)
   const [atEnd, setAtEnd] = useState(false)
+  const [
+    shouldBeCenteredWithToggleButton,
+    setShouldBeCenteredWithToggleButton,
+  ] = useState(false)
+  const [rightOffset, setRightOffset] = useState(0)
 
   const updateArrows = useCallback(() => {
     const el = scrollRef.current
@@ -83,6 +89,71 @@ export const ReactionButtonsContainer = ({
     setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 1)
   }, [])
 
+  useEffect(() => {
+    if (isMobile) return
+    const region = document.getElementById(CONTROL_BAR_REGION_ID)
+    if (!region) return
+    const check = () => {
+      setShouldBeCenteredWithToggleButton(
+        window.innerWidth > region.clientWidth
+      )
+    }
+    check()
+    const ro = new ResizeObserver(check)
+    ro.observe(region)
+    window.addEventListener('resize', check)
+    return () => {
+      ro.disconnect()
+      window.removeEventListener('resize', check)
+    }
+  }, [isMobile])
+
+  useLayoutEffect(() => {
+    if (!shouldBeCenteredWithToggleButton || isMobile) {
+      setRightOffset(0)
+      return
+    }
+
+    const container = containerRef.current
+    if (!container) return
+
+    let frame = 0
+
+    const align = () => {
+      const toggle = document.getElementById(REACTIONS_TOGGLE_ID)
+      if (!toggle) return
+      const toggleRect = toggle.getBoundingClientRect()
+      const containerRect = container.getBoundingClientRect()
+      const toggleCenterX = toggleRect.left + toggleRect.width / 2
+      const containerCenterX = containerRect.left + containerRect.width / 2
+      const shift = toggleCenterX - containerCenterX
+      if (Math.abs(shift) < 0.5) return
+      setRightOffset((prev) => prev - shift * 2)
+    }
+
+    const schedule = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(align)
+    }
+
+    schedule()
+
+    const ro = new ResizeObserver(schedule)
+    ro.observe(container)
+    const region = document.getElementById(CONTROL_BAR_REGION_ID)
+    if (region) ro.observe(region)
+    const toggle = document.getElementById(REACTIONS_TOGGLE_ID)
+    if (toggle) ro.observe(toggle)
+
+    window.addEventListener('resize', schedule)
+
+    return () => {
+      cancelAnimationFrame(frame)
+      ro.disconnect()
+      window.removeEventListener('resize', schedule)
+    }
+  }, [shouldBeCenteredWithToggleButton, isMobile, isOpen])
+
   useEffect(() => {
     if (isOpen) {
       const id = requestAnimationFrame(() => setIsVisible(true))
@@ -101,9 +172,14 @@ export const ReactionButtonsContainer = ({
 
   return (
     <StyledContainer
+      ref={containerRef}
       aria-hidden={!isOpen}
       isVisible={isVisible}
-      desktopOffset={!isMobile}
+      style={
+        shouldBeCenteredWithToggleButton && !isMobile
+          ? { marginRight: `${rightOffset}px` }
+          : { margin: '0 15px' }
+      }
     >
       {overflowing && (
         <Button