diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 99a4d1e8..088017dc 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -63,6 +63,18 @@ const config: Config = {
         '75%': { boxShadow: '0 0 0 30px rgba(255, 255, 255, 0)' },
         '100%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0)' },
       },
+      active_speaker: {
+        '0%': { height: '4px' },
+        '25%': { height: '8px' },
+        '50%': { height: '6px' },
+        '100%': { height: '16px' },
+      },
+      active_speake_small: {
+        '0%': { height: '4px' },
+        '25%': { height: '6px' },
+        '50%': { height: '4px' },
+        '100%': { height: '8px' },
+      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.
diff --git a/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx b/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx
new file mode 100644
index 00000000..cf489d6d
--- /dev/null
+++ b/src/frontend/src/features/rooms/components/ActiveSpeaker.tsx
@@ -0,0 +1,70 @@
+import { styled } from '@/styled-system/jsx'
+
+const StyledContainer = styled('div', {
+  base: {
+    width: '24px',
+    height: '24px',
+    boxSizing: 'border-box',
+    backgroundColor: 'primary',
+    borderRadius: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '2px',
+  },
+})
+
+const StyledChild = styled('div', {
+  base: {
+    backgroundColor: 'white',
+    width: '4px',
+    height: '4px',
+    borderRadius: '4px',
+    animationDuration: '400ms',
+    animationName: 'active_speaker',
+    animationIterationCount: 'infinite',
+    animationDirection: 'alternate',
+  },
+  variants: {
+    active: {
+      true: {
+        animationIterationCount: 'infinite',
+      },
+      false: {
+        animationIterationCount: 0,
+      },
+    },
+    size: {
+      small: {
+        animationName: 'active_speake_small',
+      },
+    },
+  },
+})
+
+export const ActiveSpeaker = ({ isSpeaking }: { isSpeaking: boolean }) => {
+  return (
+    <StyledContainer>
+      <StyledChild
+        active={isSpeaking}
+        size="small"
+        style={{
+          animationDelay: '300ms',
+        }}
+      />
+      <StyledChild
+        active={isSpeaking}
+        style={{
+          animationDelay: '100ms',
+        }}
+      />
+      <StyledChild
+        active={isSpeaking}
+        size="small"
+        style={{
+          animationDelay: '500ms',
+        }}
+      />
+    </StyledContainer>
+  )
+}