chore(main): release 0.4.0 (#510 )

fix: remove faulty import Meeting (#512 )
* fix: remove faulty import Meeting * fix: remove faulty import Meeting
2025-12-20 12:19:06 +00:00 · 2025-07-25 19:09:57 -06:00 · 2025-07-25 17:48:10 -04:00 · 2025-07-25 17:37:51 -04:00 · 2025-07-25 16:24:06 -04:00 · 2025-07-22 19:15:47 -06:00
88 changed files with 4602 additions and 2985 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,5 @@ ngrok.log
 restart-dev.sh
 *.log
 data/
+www/REFACTOR.md
+www/reload-frontend
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,60 @@
 # Changelog

+## [0.4.0](https://github.com/Monadical-SAS/reflector/compare/v0.3.2...v0.4.0) (2025-07-25)
+
+
+### Features
+
+* Diarization cli ([#509](https://github.com/Monadical-SAS/reflector/issues/509)) ([ffc8003](https://github.com/Monadical-SAS/reflector/commit/ffc8003e6dad236930a27d0fe3e2f2adfb793890))
+
+
+### Bug Fixes
+
+* remove faulty import Meeting ([#512](https://github.com/Monadical-SAS/reflector/issues/512)) ([0e68c79](https://github.com/Monadical-SAS/reflector/commit/0e68c798434e1b481f9482cc3a4702ea00365df4))
+* room concurrency (theoretically) ([#511](https://github.com/Monadical-SAS/reflector/issues/511)) ([7bb3676](https://github.com/Monadical-SAS/reflector/commit/7bb367653afeb2778cff697a0eb217abf0b81b84))
+
+## [0.3.2](https://github.com/Monadical-SAS/reflector/compare/v0.3.1...v0.3.2) (2025-07-22)
+
+
+### Bug Fixes
+
+* match font size for the filter sidebar ([#507](https://github.com/Monadical-SAS/reflector/issues/507)) ([4b8ba5d](https://github.com/Monadical-SAS/reflector/commit/4b8ba5db1733557e27b098ad3d1cdecadf97ae52))
+* whereby consent not displaying ([#505](https://github.com/Monadical-SAS/reflector/issues/505)) ([1120552](https://github.com/Monadical-SAS/reflector/commit/1120552c2c83d084d3a39272ad49b6aeda1af98f))
+
+## [0.3.1](https://github.com/Monadical-SAS/reflector/compare/v0.3.0...v0.3.1) (2025-07-22)
+
+
+### Bug Fixes
+
+* remove fief out of the source code ([#502](https://github.com/Monadical-SAS/reflector/issues/502)) ([890dd15](https://github.com/Monadical-SAS/reflector/commit/890dd15ba5a2be10dbb841e9aeb75d377885f4af))
+* remove primary color for room action menu ([#504](https://github.com/Monadical-SAS/reflector/issues/504)) ([2e33f89](https://github.com/Monadical-SAS/reflector/commit/2e33f89c0f9e5fbaafa80e8d2ae9788450ea2f31))
+
+## [0.3.0](https://github.com/Monadical-SAS/reflector/compare/v0.2.1...v0.3.0) (2025-07-21)
+
+
+### Features
+
+* migrate from chakra 2 to chakra 3 ([#500](https://github.com/Monadical-SAS/reflector/issues/500)) ([a858464](https://github.com/Monadical-SAS/reflector/commit/a858464c7a80e5497acf801d933bf04092f8b526))
+
+## [0.2.1](https://github.com/Monadical-SAS/reflector/compare/v0.2.0...v0.2.1) (2025-07-18)
+
+
+### Bug Fixes
+
+* separate browsing page into different components, limit to 10 by default ([#498](https://github.com/Monadical-SAS/reflector/issues/498)) ([c752da6](https://github.com/Monadical-SAS/reflector/commit/c752da6b97c96318aff079a5b2a6eceadfbfcad1))
+
+## [0.2.0](https://github.com/Monadical-SAS/reflector/compare/0.1.1...v0.2.0) (2025-07-17)
+
+
+### Features
+
+* improve transcript listing with room_id ([#496](https://github.com/Monadical-SAS/reflector/issues/496)) ([d2b5de5](https://github.com/Monadical-SAS/reflector/commit/d2b5de543fc0617fc220caa6a8a290e4040cb10b))
+
+
+### Bug Fixes
+
+* don't attempt to load waveform/mp3 if audio was deleted ([#495](https://github.com/Monadical-SAS/reflector/issues/495)) ([f4578a7](https://github.com/Monadical-SAS/reflector/commit/f4578a743fd0f20312fbd242fa9cccdfaeb20a9e))
+
 ## [0.1.1](https://github.com/Monadical-SAS/reflector/compare/0.1.0...v0.1.1) (2025-07-17)


--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -146,7 +146,7 @@ All endpoints prefixed `/v1/`:
 - `REDIS_URL` - Redis broker for Celery
 - `MODAL_TOKEN_ID`, `MODAL_TOKEN_SECRET` - Modal.com GPU processing
 - `WHEREBY_API_KEY` - Video platform integration
- `REFLECTOR_AUTH_BACKEND` - Authentication method (none, fief, jwt)
+- `REFLECTOR_AUTH_BACKEND` - Authentication method (none, jwt)

 **Frontend** (`www/.env`):
 - `NEXTAUTH_URL`, `NEXTAUTH_SECRET` - Authentication configuration
--- a/server/.env_template
+++ b/server/.env_template
@@ -6,11 +6,6 @@ LLM_BACKEND=modal
 LLM_URL=https://monadical-sas--reflector-llm-web.modal.run
 LLM_MODAL_API_KEY=***REMOVED***

-AUTH_BACKEND=fief
-AUTH_FIEF_URL=https://auth.reflector.media/reflector-local
-AUTH_FIEF_CLIENT_ID=***REMOVED***
-AUTH_FIEF_CLIENT_SECRET=<ask in zulip> <-----------------------------------------------------------------------------------------
-
 TRANSLATE_URL=https://monadical-sas--reflector-translator-web.modal.run
 ZEPHYR_LLM_URL=https://monadical-sas--reflector-llm-zephyr-web.modal.run
 DIARIZATION_URL=https://monadical-sas--reflector-diarizer-web.modal.run
--- a/server/.gitignore
+++ b/server/.gitignore
@@ -180,3 +180,4 @@ reflector.sqlite3
 data/

 dump.rdb
+
--- a/server/env.example
+++ b/server/env.example
@@ -7,11 +7,9 @@
 ## User authentication
 ## =======================================================

-## Using fief (fief.dev)
-AUTH_BACKEND=fief
-AUTH_FIEF_URL=https://auth.reflector.media/reflector-local
-AUTH_FIEF_CLIENT_ID=***REMOVED***
-AUTH_FIEF_CLIENT_SECRET=<ask in zulip>
+## Using jwt/authentik
+AUTH_BACKEND=jwt
+AUTH_JWT_AUDIENCE=

 ## =======================================================
 ## Transcription backend
@@ -88,4 +86,3 @@ DIARIZATION_URL=https://monadical-sas--reflector-diarizer-web.modal.run

 ## Sentry DSN configuration
 #SENTRY_DSN=
-
--- a/server/migrations/versions/b7df9609542c_add_unique_constraint_one_active_.py
+++ b/server/migrations/versions/b7df9609542c_add_unique_constraint_one_active_.py
@@ -0,0 +1,35 @@
+"""add_unique_constraint_one_active_meeting_per_room
+
+Revision ID: b7df9609542c
+Revises: d7fbb74b673b
+Create Date: 2025-07-25 16:27:06.959868
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = 'b7df9609542c'
+down_revision: Union[str, None] = 'd7fbb74b673b'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # Create a partial unique index that ensures only one active meeting per room
+    # This works for both PostgreSQL and SQLite
+    op.create_index(
+        'idx_one_active_meeting_per_room',
+        'meeting',
+        ['room_id'],
+        unique=True,
+        postgresql_where=sa.text('is_active = true'),
+        sqlite_where=sa.text('is_active = 1')
+    )
+
+
+def downgrade() -> None:
+    op.drop_index('idx_one_active_meeting_per_room', table_name='meeting')
--- a/server/migrations/versions/d7fbb74b673b_add_room_id_to_transcript.py
+++ b/server/migrations/versions/d7fbb74b673b_add_room_id_to_transcript.py
@@ -0,0 +1,59 @@
+"""Add room_id to transcript
+
+Revision ID: d7fbb74b673b
+Revises: a9c9c229ee36
+Create Date: 2025-07-17 12:00:00.000000
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision: str = "d7fbb74b673b"
+down_revision: Union[str, None] = "a9c9c229ee36"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # Add room_id column to transcript table
+    op.add_column("transcript", sa.Column("room_id", sa.String(), nullable=True))
+
+    # Add index for room_id for better query performance
+    op.create_index("idx_transcript_room_id", "transcript", ["room_id"])
+
+    # Populate room_id for existing ROOM-type transcripts
+    # This joins through recording -> meeting -> room to get the room_id
+    op.execute("""
+        UPDATE transcript AS t
+        SET room_id = r.id
+        FROM recording rec
+        JOIN meeting m ON rec.meeting_id = m.id
+        JOIN room r ON m.room_id = r.id
+        WHERE t.recording_id = rec.id
+        AND t.source_kind = 'room'
+        AND t.room_id IS NULL
+    """)
+
+    # Fix missing meeting_id for ROOM-type transcripts
+    # The meeting_id field exists but was never populated
+    op.execute("""
+        UPDATE transcript AS t
+        SET meeting_id = rec.meeting_id
+        FROM recording rec
+        WHERE t.recording_id = rec.id
+        AND t.source_kind = 'room'
+        AND t.meeting_id IS NULL
+        AND rec.meeting_id IS NOT NULL
+    """)
+
+
+def downgrade() -> None:
+    # Drop the index first
+    op.drop_index("idx_transcript_room_id", "transcript")
+
+    # Drop the room_id column
+    op.drop_column("transcript", "room_id")
--- a/server/pyproject.toml
+++ b/server/pyproject.toml
@@ -22,7 +22,6 @@ dependencies = [
    "fastapi-pagination>=0.12.6",
    "databases[aiosqlite, asyncpg]>=0.7.0",
    "sqlalchemy<1.5",
-    "fief-client[fastapi]>=0.17.0",
    "alembic>=1.11.3",
    "nltk>=3.8.1",
    "prometheus-fastapi-instrumentator>=6.1.0",
--- a/server/reflector/auth/auth_fief.py
+++ b/server/reflector/auth/auth_fief.py
@@ -1,25 +0,0 @@
-from fastapi.security import OAuth2AuthorizationCodeBearer
-from fief_client import FiefAccessTokenInfo, FiefAsync, FiefUserInfo
-from fief_client.integrations.fastapi import FiefAuth
-from reflector.settings import settings
-
-fief = FiefAsync(
-    settings.AUTH_FIEF_URL,
-    settings.AUTH_FIEF_CLIENT_ID,
-    settings.AUTH_FIEF_CLIENT_SECRET,
-)
-
-scheme = OAuth2AuthorizationCodeBearer(
-    f"{settings.AUTH_FIEF_URL}/authorize",
-    f"{settings.AUTH_FIEF_URL}/api/token",
-    scopes={"openid": "openid", "offline_access": "offline_access"},
-    auto_error=False,
-)
-
-auth = FiefAuth(fief, scheme)
-
-UserInfo = FiefUserInfo
-AccessTokenInfo = FiefAccessTokenInfo
-authenticated = auth.authenticated()
-current_user = auth.current_user()
-current_user_optional = auth.current_user(optional=True)
--- a/server/reflector/db/migrate_user.py
+++ b/server/reflector/db/migrate_user.py
@@ -1,56 +0,0 @@
-from reflector.db import database
-from reflector.db.meetings import meetings
-from reflector.db.rooms import rooms
-from reflector.db.transcripts import transcripts
-
-users_to_migrate = [
-    ["123@lifex.pink", "63b727f5-485d-449f-b528-563d779b11ef", None],
-    ["ana@monadical.com", "1bae2e4d-5c04-49c2-932f-a86266a6ca13", None],
-    ["cspencer@sprocket.org", "614ed0be-392e-488c-bd19-6a9730fd0e9e", None],
-    ["daniel.f.lopez.j@gmail.com", "ca9561bd-c989-4a1e-8877-7081cf62ae7f", None],
-    ["jenalee@monadical.com", "c7c1e79e-b068-4b28-a9f4-29d98b1697ed", None],
-    ["jennifer@rootandseed.com", "f5321727-7546-4b2b-b69d-095a931ef0c4", None],
-    ["jose@monadical.com", "221f079c-7ce0-4677-90b7-0359b6315e27", None],
-    ["labenclayton@gmail.com", "40078cd0-543c-40e4-9c2e-5ce57a686428", None],
-    ["mathieu@monadical.com", "c7a36151-851e-4afa-9fab-aaca834bfd30", None],
-    ["michal.flak.96@gmail.com", "3096eb5e-b590-41fc-a0d1-d152c1895402", None],
-    ["sara@monadical.com", "31ab0cfe-5d2c-4c7a-84de-a29494714c99", None],
-    ["sara@monadical.com", "b871e5f0-754e-447f-9c3d-19f629f0082b", None],
-    ["sebastian@monadical.com", "f024f9d0-15d0-480f-8529-43959fc8b639", None],
-    ["sergey@monadical.com", "5c4798eb-b9ab-4721-a540-bd96fc434156", None],
-    ["sergey@monadical.com", "9dd8a6b4-247e-48fe-b1fb-4c84dd3c01bc", None],
-    ["transient.tran@gmail.com", "617ba2d3-09b6-4b1f-a435-a7f41c3ce060", None],
-]
-
-
-async def migrate_user(email, user_id):
-    # if the email match the email in the users_to_migrate list
-    # reassign all transcripts/rooms/meetings to the new user_id
-
-    user_ids = [user[1] for user in users_to_migrate if user[0] == email]
-    if not user_ids:
-        return
-
-    # do not migrate back
-    if user_id in user_ids:
-        return
-
-    for old_user_id in user_ids:
-        query = (
-            transcripts.update()
-            .where(transcripts.c.user_id == old_user_id)
-            .values(user_id=user_id)
-        )
-        await database.execute(query)
-
-        query = (
-            rooms.update().where(rooms.c.user_id == old_user_id).values(user_id=user_id)
-        )
-        await database.execute(query)
-
-        query = (
-            meetings.update()
-            .where(meetings.c.user_id == old_user_id)
-            .values(user_id=user_id)
-        )
-        await database.execute(query)
--- a/server/reflector/db/transcripts.py
+++ b/server/reflector/db/transcripts.py
@@ -74,10 +74,12 @@ transcripts = sqlalchemy.Table(
    # the main "audio deleted" is the presence of the audio itself / consents not-given
    # same field could've been in recording/meeting, and it's maybe even ok to dupe it at need
    sqlalchemy.Column("audio_deleted", sqlalchemy.Boolean),
+    sqlalchemy.Column("room_id", sqlalchemy.String),
    sqlalchemy.Index("idx_transcript_recording_id", "recording_id"),
    sqlalchemy.Index("idx_transcript_user_id", "user_id"),
    sqlalchemy.Index("idx_transcript_created_at", "created_at"),
    sqlalchemy.Index("idx_transcript_user_id_recording_id", "user_id", "recording_id"),
+    sqlalchemy.Index("idx_transcript_room_id", "room_id"),
 )


@@ -167,6 +169,7 @@ class Transcript(BaseModel):
    zulip_message_id: int | None = None
    source_kind: SourceKind
    audio_deleted: bool | None = None
+    room_id: str | None = None

    @field_serializer("created_at", when_used="json")
    def serialize_datetime(self, dt: datetime) -> str:
@@ -331,17 +334,10 @@ class TranscriptController:
        - `room_id`: filter transcripts by room ID
        - `search_term`: filter transcripts by search term
        """
-        from reflector.db.meetings import meetings
-        from reflector.db.recordings import recordings
        from reflector.db.rooms import rooms

-        query = (
-            transcripts.select()
-            .join(
-                recordings, transcripts.c.recording_id == recordings.c.id, isouter=True
-            )
-            .join(meetings, recordings.c.meeting_id == meetings.c.id, isouter=True)
-            .join(rooms, meetings.c.room_id == rooms.c.id, isouter=True)
+        query = transcripts.select().join(
+            rooms, transcripts.c.room_id == rooms.c.id, isouter=True
        )

        if user_id:
@@ -355,7 +351,7 @@ class TranscriptController:
            query = query.where(transcripts.c.source_kind == source_kind)

        if room_id:
-            query = query.where(rooms.c.id == room_id)
+            query = query.where(transcripts.c.room_id == room_id)

        if search_term:
            query = query.where(transcripts.c.title.ilike(f"%{search_term}%"))
@@ -368,7 +364,6 @@ class TranscriptController:
        query = query.with_only_columns(
            transcript_columns
            + [
-                rooms.c.id.label("room_id"),
                rooms.c.name.label("room_name"),
            ]
        )
@@ -419,6 +414,22 @@ class TranscriptController:
            return None
        return Transcript(**result)

+    async def get_by_room_id(self, room_id: str, **kwargs) -> list[Transcript]:
+        """
+        Get transcripts by room_id (direct access without joins)
+        """
+        query = transcripts.select().where(transcripts.c.room_id == room_id)
+        if "user_id" in kwargs:
+            query = query.where(transcripts.c.user_id == kwargs["user_id"])
+        if "order_by" in kwargs:
+            order_by = kwargs["order_by"]
+            field = getattr(transcripts.c, order_by[1:])
+            if order_by.startswith("-"):
+                field = field.desc()
+            query = query.order_by(field)
+        results = await database.fetch_all(query)
+        return [Transcript(**result) for result in results]
+
    async def get_by_id_for_http(
        self,
        transcript_id: str,
@@ -469,6 +480,8 @@ class TranscriptController:
        user_id: str | None = None,
        recording_id: str | None = None,
        share_mode: str = "private",
+        meeting_id: str | None = None,
+        room_id: str | None = None,
    ):
        """
        Add a new transcript
@@ -481,6 +494,8 @@ class TranscriptController:
            user_id=user_id,
            recording_id=recording_id,
            share_mode=share_mode,
+            meeting_id=meeting_id,
+            room_id=room_id,
        )
        query = transcripts.insert().values(**transcript.model_dump())
        await database.execute(query)
--- a/server/reflector/settings.py
+++ b/server/reflector/settings.py
@@ -90,14 +90,9 @@ class Settings(BaseSettings):
    # Sentry
    SENTRY_DSN: str | None = None

-    # User authentication (none, fief)
+    # User authentication (none, jwt)
    AUTH_BACKEND: str = "none"

-    # User authentication using fief
-    AUTH_FIEF_URL: str | None = None
-    AUTH_FIEF_CLIENT_ID: str | None = None
-    AUTH_FIEF_CLIENT_SECRET: str | None = None
-
    # User authentication using JWT
    AUTH_JWT_ALGORITHM: str = "RS256"
    AUTH_JWT_PUBLIC_KEY: str | None = "authentik.monadical.com_public.pem"
--- a/server/reflector/tools/process_with_diarization.py
+++ b/server/reflector/tools/process_with_diarization.py
@@ -0,0 +1,314 @@
+"""
+@vibe-generated
+Process audio file with diarization support
+===========================================
+
+Extended version of process.py that includes speaker diarization.
+This tool processes audio files locally without requiring the full server infrastructure.
+"""
+
+import asyncio
+import tempfile
+from pathlib import Path
+from typing import List
+import uuid
+
+import av
+from reflector.logger import logger
+from reflector.processors import (
+    AudioChunkerProcessor,
+    AudioMergeProcessor,
+    AudioTranscriptAutoProcessor,
+    AudioFileWriterProcessor,
+    Pipeline,
+    PipelineEvent,
+    TranscriptFinalSummaryProcessor,
+    TranscriptFinalTitleProcessor,
+    TranscriptLinerProcessor,
+    TranscriptTopicDetectorProcessor,
+    TranscriptTranslatorProcessor,
+)
+from reflector.processors.base import BroadcastProcessor, Processor
+from reflector.processors.types import (
+    AudioDiarizationInput,
+    TitleSummary,
+    TitleSummaryWithId,
+)
+
+
+class TopicCollectorProcessor(Processor):
+    """Collect topics for diarization"""
+
+    INPUT_TYPE = TitleSummary
+    OUTPUT_TYPE = TitleSummary
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.topics: List[TitleSummaryWithId] = []
+        self._topic_id = 0
+
+    async def _push(self, data: TitleSummary):
+        # Convert to TitleSummaryWithId and collect
+        self._topic_id += 1
+        topic_with_id = TitleSummaryWithId(
+            id=str(self._topic_id),
+            title=data.title,
+            summary=data.summary,
+            timestamp=data.timestamp,
+            duration=data.duration,
+            transcript=data.transcript,
+        )
+        self.topics.append(topic_with_id)
+
+        # Pass through the original topic
+        await self.emit(data)
+
+    def get_topics(self) -> List[TitleSummaryWithId]:
+        return self.topics
+
+
+async def process_audio_file_with_diarization(
+    filename,
+    event_callback,
+    only_transcript=False,
+    source_language="en",
+    target_language="en",
+    enable_diarization=True,
+    diarization_backend="modal",
+):
+    # Create temp file for audio if diarization is enabled
+    audio_temp_path = None
+    if enable_diarization:
+        audio_temp_file = tempfile.NamedTemporaryFile(suffix=".wav", delete=False)
+        audio_temp_path = audio_temp_file.name
+        audio_temp_file.close()
+
+    # Create processor for collecting topics
+    topic_collector = TopicCollectorProcessor()
+
+    # Build pipeline for audio processing
+    processors = []
+
+    # Add audio file writer at the beginning if diarization is enabled
+    if enable_diarization:
+        processors.append(AudioFileWriterProcessor(audio_temp_path))
+
+    # Add the rest of the processors
+    processors += [
+        AudioChunkerProcessor(),
+        AudioMergeProcessor(),
+        AudioTranscriptAutoProcessor.as_threaded(),
+    ]
+
+    processors += [
+        TranscriptLinerProcessor(),
+        TranscriptTranslatorProcessor.as_threaded(),
+    ]
+
+    if not only_transcript:
+        processors += [
+            TranscriptTopicDetectorProcessor.as_threaded(),
+            # Collect topics for diarization
+            topic_collector,
+            BroadcastProcessor(
+                processors=[
+                    TranscriptFinalTitleProcessor.as_threaded(),
+                    TranscriptFinalSummaryProcessor.as_threaded(),
+                ],
+            ),
+        ]
+
+    # Create main pipeline
+    pipeline = Pipeline(*processors)
+    pipeline.set_pref("audio:source_language", source_language)
+    pipeline.set_pref("audio:target_language", target_language)
+    pipeline.describe()
+    pipeline.on(event_callback)
+
+    # Start processing audio
+    logger.info(f"Opening {filename}")
+    container = av.open(filename)
+    try:
+        logger.info("Start pushing audio into the pipeline")
+        for frame in container.decode(audio=0):
+            await pipeline.push(frame)
+    finally:
+        logger.info("Flushing the pipeline")
+        await pipeline.flush()
+
+    # Run diarization if enabled and we have topics
+    if enable_diarization and not only_transcript and audio_temp_path:
+        topics = topic_collector.get_topics()
+
+        if topics:
+            logger.info(f"Starting diarization with {len(topics)} topics")
+
+            try:
+                # Import diarization processor
+                from reflector.processors import AudioDiarizationAutoProcessor
+
+                # Create diarization processor
+                diarization_processor = AudioDiarizationAutoProcessor(
+                    name=diarization_backend
+                )
+                diarization_processor.on(event_callback)
+
+                # For Modal backend, we need to upload the file to S3 first
+                if diarization_backend == "modal":
+                    from reflector.storage import get_transcripts_storage
+                    from reflector.utils.s3_temp_file import S3TemporaryFile
+                    from datetime import datetime
+
+                    storage = get_transcripts_storage()
+
+                    # Generate a unique filename in evaluation folder
+                    timestamp = datetime.utcnow().strftime("%Y%m%d_%H%M%S")
+                    audio_filename = f"evaluation/diarization_temp/{timestamp}_{uuid.uuid4().hex}.wav"
+
+                    # Use context manager for automatic cleanup
+                    async with S3TemporaryFile(storage, audio_filename) as s3_file:
+                        # Read and upload the audio file
+                        with open(audio_temp_path, "rb") as f:
+                            audio_data = f.read()
+
+                        audio_url = await s3_file.upload(audio_data)
+                        logger.info(f"Uploaded audio to S3: {audio_filename}")
+
+                        # Create diarization input with S3 URL
+                        diarization_input = AudioDiarizationInput(
+                            audio_url=audio_url, topics=topics
+                        )
+
+                        # Run diarization
+                        await diarization_processor.push(diarization_input)
+                        await diarization_processor.flush()
+
+                        logger.info("Diarization complete")
+                        # File will be automatically cleaned up when exiting the context
+                else:
+                    # For local backend, use local file path
+                    audio_url = audio_temp_path
+
+                    # Create diarization input
+                    diarization_input = AudioDiarizationInput(
+                        audio_url=audio_url, topics=topics
+                    )
+
+                    # Run diarization
+                    await diarization_processor.push(diarization_input)
+                    await diarization_processor.flush()
+
+                    logger.info("Diarization complete")
+
+            except ImportError as e:
+                logger.error(f"Failed to import diarization dependencies: {e}")
+                logger.error(
+                    "Install with: uv pip install pyannote.audio torch torchaudio"
+                )
+                logger.error(
+                    "And set HF_TOKEN environment variable for pyannote models"
+                )
+                raise SystemExit(1)
+            except Exception as e:
+                logger.error(f"Diarization failed: {e}")
+                raise SystemExit(1)
+        else:
+            logger.warning("Skipping diarization: no topics available")
+
+    # Clean up temp file
+    if audio_temp_path:
+        try:
+            Path(audio_temp_path).unlink()
+        except Exception as e:
+            logger.warning(f"Failed to clean up temp file {audio_temp_path}: {e}")
+
+    logger.info("All done!")
+
+
+if __name__ == "__main__":
+    import argparse
+    import os
+
+    parser = argparse.ArgumentParser(
+        description="Process audio files with optional speaker diarization"
+    )
+    parser.add_argument("source", help="Source file (mp3, wav, mp4...)")
+    parser.add_argument(
+        "--only-transcript",
+        "-t",
+        action="store_true",
+        help="Only generate transcript without topics/summaries",
+    )
+    parser.add_argument(
+        "--source-language", default="en", help="Source language code (default: en)"
+    )
+    parser.add_argument(
+        "--target-language", default="en", help="Target language code (default: en)"
+    )
+    parser.add_argument("--output", "-o", help="Output file (output.jsonl)")
+    parser.add_argument(
+        "--enable-diarization",
+        "-d",
+        action="store_true",
+        help="Enable speaker diarization",
+    )
+    parser.add_argument(
+        "--diarization-backend",
+        default="modal",
+        choices=["modal"],
+        help="Diarization backend to use (default: modal)",
+    )
+    args = parser.parse_args()
+
+    # Set REDIS_HOST to localhost if not provided
+    if "REDIS_HOST" not in os.environ:
+        os.environ["REDIS_HOST"] = "localhost"
+        logger.info("REDIS_HOST not set, defaulting to localhost")
+
+    output_fd = None
+    if args.output:
+        output_fd = open(args.output, "w")
+
+    async def event_callback(event: PipelineEvent):
+        processor = event.processor
+        data = event.data
+
+        # Ignore internal processors
+        if processor in (
+            "AudioChunkerProcessor",
+            "AudioMergeProcessor",
+            "AudioFileWriterProcessor",
+            "TopicCollectorProcessor",
+            "BroadcastProcessor",
+        ):
+            return
+
+        # If diarization is enabled, skip the original topic events from the pipeline
+        # The diarization processor will emit the same topics but with speaker info
+        if processor == "TranscriptTopicDetectorProcessor" and args.enable_diarization:
+            return
+
+        # Log all events
+        logger.info(f"Event: {processor} - {type(data).__name__}")
+
+        # Write to output
+        if output_fd:
+            output_fd.write(event.model_dump_json())
+            output_fd.write("\n")
+            output_fd.flush()
+
+    asyncio.run(
+        process_audio_file_with_diarization(
+            args.source,
+            event_callback,
+            only_transcript=args.only_transcript,
+            source_language=args.source_language,
+            target_language=args.target_language,
+            enable_diarization=args.enable_diarization,
+            diarization_backend=args.diarization_backend,
+        )
+    )
+
+    if output_fd:
+        output_fd.close()
+        logger.info(f"Output written to {args.output}")
--- a/server/reflector/tools/test_diarization.py
+++ b/server/reflector/tools/test_diarization.py
@@ -0,0 +1,96 @@
+#!/usr/bin/env python3
+"""
+@vibe-generated
+Test script for the diarization CLI tool
+=========================================
+
+This script helps test the diarization functionality with sample audio files.
+"""
+
+import asyncio
+import json
+import sys
+from pathlib import Path
+
+from reflector.logger import logger
+
+
+async def test_diarization(audio_file: str):
+    """Test the diarization functionality"""
+    
+    # Import the processing function
+    from process_with_diarization import process_audio_file_with_diarization
+    
+    # Collect events
+    events = []
+    
+    async def event_callback(event):
+        events.append({
+            "processor": event.processor,
+            "data": event.data
+        })
+        logger.info(f"Event from {event.processor}")
+    
+    # Process the audio file
+    logger.info(f"Processing audio file: {audio_file}")
+    
+    try:
+        await process_audio_file_with_diarization(
+            audio_file,
+            event_callback,
+            only_transcript=False,
+            source_language="en",
+            target_language="en",
+            enable_diarization=True,
+            diarization_backend="modal",
+        )
+        
+        # Analyze results
+        logger.info(f"Processing complete. Received {len(events)} events")
+        
+        # Look for diarization results
+        diarized_topics = []
+        for event in events:
+            if "TitleSummary" in event["processor"]:
+                # Check if words have speaker information
+                if hasattr(event["data"], "transcript") and event["data"].transcript:
+                    words = event["data"].transcript.words
+                    if words and hasattr(words[0], "speaker"):
+                        speakers = set(w.speaker for w in words if hasattr(w, "speaker"))
+                        logger.info(f"Found {len(speakers)} speakers in topic: {event['data'].title}")
+                        diarized_topics.append(event["data"])
+        
+        if diarized_topics:
+            logger.info(f"Successfully diarized {len(diarized_topics)} topics")
+            
+            # Print sample output
+            sample_topic = diarized_topics[0]
+            logger.info("Sample diarized output:")
+            for i, word in enumerate(sample_topic.transcript.words[:10]):
+                logger.info(f"  Word {i}: '{word.text}' - Speaker {word.speaker}")
+        else:
+            logger.warning("No diarization results found in output")
+        
+        return events
+        
+    except Exception as e:
+        logger.error(f"Error during processing: {e}")
+        raise
+
+
+def main():
+    if len(sys.argv) < 2:
+        print("Usage: python test_diarization.py <audio_file>")
+        sys.exit(1)
+    
+    audio_file = sys.argv[1]
+    if not Path(audio_file).exists():
+        print(f"Error: Audio file '{audio_file}' not found")
+        sys.exit(1)
+    
+    # Run the test
+    asyncio.run(test_diarization(audio_file))
+
+
+if __name__ == "__main__":
+    main()
--- a/server/reflector/utils/s3_temp_file.py
+++ b/server/reflector/utils/s3_temp_file.py
@@ -0,0 +1,149 @@
+"""
+@vibe-generated
+S3 Temporary File Context Manager
+
+Provides automatic cleanup of S3 files with retry logic and proper error handling.
+"""
+
+from typing import Optional
+from reflector.storage.base import Storage
+from reflector.logger import logger
+from reflector.utils.retry import retry
+
+
+class S3TemporaryFile:
+    """
+    Async context manager for temporary S3 files with automatic cleanup.
+
+    Ensures that uploaded files are deleted even if exceptions occur during processing.
+    Uses retry logic for all S3 operations to handle transient failures.
+
+    Example:
+        async with S3TemporaryFile(storage, "temp/audio.wav") as s3_file:
+            url = await s3_file.upload(audio_data)
+            # Use url for processing
+        # File is automatically cleaned up here
+    """
+
+    def __init__(self, storage: Storage, filepath: str):
+        """
+        Initialize the temporary file context.
+
+        Args:
+            storage: Storage instance for S3 operations
+            filepath: S3 key/path for the temporary file
+        """
+        self.storage = storage
+        self.filepath = filepath
+        self.uploaded = False
+        self._url: Optional[str] = None
+
+    async def __aenter__(self):
+        """Enter the context manager."""
+        return self
+
+    async def __aexit__(self, exc_type, exc_val, exc_tb):
+        """
+        Exit the context manager and clean up the file.
+
+        Cleanup is attempted even if an exception occurred during processing.
+        Cleanup failures are logged but don't raise exceptions.
+        """
+        if self.uploaded:
+            try:
+                await self._delete_with_retry()
+                logger.info(f"Successfully cleaned up S3 file: {self.filepath}")
+            except Exception as e:
+                # Log the error but don't raise - we don't want cleanup failures
+                # to mask the original exception
+                logger.warning(
+                    f"Failed to cleanup S3 file {self.filepath} after retries: {e}"
+                )
+        return False  # Don't suppress exceptions
+
+    async def upload(self, data: bytes) -> str:
+        """
+        Upload data to S3 and return the public URL.
+
+        Args:
+            data: File data to upload
+
+        Returns:
+            Public URL for the uploaded file
+
+        Raises:
+            Exception: If upload or URL generation fails after retries
+        """
+        await self._upload_with_retry(data)
+        self.uploaded = True
+        self._url = await self._get_url_with_retry()
+        return self._url
+
+    @property
+    def url(self) -> Optional[str]:
+        """Get the URL of the uploaded file, if available."""
+        return self._url
+
+    async def _upload_with_retry(self, data: bytes):
+        """Upload file to S3 with retry logic."""
+
+        async def upload():
+            await self.storage.put_file(self.filepath, data)
+            logger.debug(f"Successfully uploaded file to S3: {self.filepath}")
+            return True  # Return something to indicate success
+
+        await retry(upload)(
+            retry_attempts=3,
+            retry_timeout=30.0,
+            retry_backoff_interval=0.5,
+            retry_backoff_max=5.0,
+        )
+
+    async def _get_url_with_retry(self) -> str:
+        """Get public URL for the file with retry logic."""
+
+        async def get_url():
+            url = await self.storage.get_file_url(self.filepath)
+            logger.debug(f"Generated public URL for S3 file: {self.filepath}")
+            return url
+
+        return await retry(get_url)(
+            retry_attempts=3,
+            retry_timeout=30.0,
+            retry_backoff_interval=0.5,
+            retry_backoff_max=5.0,
+        )
+
+    async def _delete_with_retry(self):
+        """Delete file from S3 with retry logic."""
+
+        async def delete():
+            await self.storage.delete_file(self.filepath)
+            logger.debug(f"Successfully deleted S3 file: {self.filepath}")
+            return True  # Return something to indicate success
+
+        await retry(delete)(
+            retry_attempts=3,
+            retry_timeout=30.0,
+            retry_backoff_interval=0.5,
+            retry_backoff_max=5.0,
+        )
+
+
+# Convenience function for simpler usage
+async def temporary_s3_file(storage: Storage, filepath: str):
+    """
+    Create a temporary S3 file context manager.
+
+    This is a convenience wrapper around S3TemporaryFile for simpler usage.
+
+    Args:
+        storage: Storage instance for S3 operations
+        filepath: S3 key/path for the temporary file
+
+    Example:
+        async with temporary_s3_file(storage, "temp/audio.wav") as s3_file:
+            url = await s3_file.upload(audio_data)
+            # Use url for processing
+    """
+    return S3TemporaryFile(storage, filepath)
--- a/server/reflector/views/rooms.py
+++ b/server/reflector/views/rooms.py
@@ -1,5 +1,6 @@
 from datetime import datetime, timedelta
 from typing import Annotated, Optional, Literal
+import logging

 import reflector.auth as auth
 from fastapi import APIRouter, Depends, HTTPException
@@ -11,6 +12,10 @@ from reflector.db.meetings import meetings_controller
 from reflector.db.rooms import rooms_controller
 from reflector.settings import settings
 from reflector.whereby import create_meeting, upload_logo
+import asyncpg.exceptions
+import sqlite3
+
+logger = logging.getLogger(__name__)

 router = APIRouter()

@@ -149,19 +154,47 @@ async def rooms_create_meeting(

    if meeting is None:
        end_date = current_time + timedelta(hours=8)
-        meeting = await create_meeting("", end_date=end_date, room=room)
-        await upload_logo(meeting["roomName"], "./images/logo.png")

-        meeting = await meetings_controller.create(
-            id=meeting["meetingId"],
-            room_name=meeting["roomName"],
-            room_url=meeting["roomUrl"],
-            host_room_url=meeting["hostRoomUrl"],
-            start_date=datetime.fromisoformat(meeting["startDate"]),
-            end_date=datetime.fromisoformat(meeting["endDate"]),
-            user_id=user_id,
-            room=room,
-        )
+        whereby_meeting = await create_meeting("", end_date=end_date, room=room)
+        await upload_logo(whereby_meeting["roomName"], "./images/logo.png")
+
+        # Now try to save to database
+        try:
+            meeting = await meetings_controller.create(
+                id=whereby_meeting["meetingId"],
+                room_name=whereby_meeting["roomName"],
+                room_url=whereby_meeting["roomUrl"],
+                host_room_url=whereby_meeting["hostRoomUrl"],
+                start_date=datetime.fromisoformat(whereby_meeting["startDate"]),
+                end_date=datetime.fromisoformat(whereby_meeting["endDate"]),
+                user_id=user_id,
+                room=room,
+            )
+        except (asyncpg.exceptions.UniqueViolationError, sqlite3.IntegrityError):
+            # Another request already created a meeting for this room
+            # Log this race condition occurrence
+            logger.info(
+                "Race condition detected for room %s - fetching existing meeting",
+                room.name,
+            )
+            logger.warning(
+                "Whereby meeting %s was created but not used (resource leak) for room %s",
+                whereby_meeting["meetingId"],
+                room.name,
+            )
+
+            # Fetch the meeting that was created by the other request
+            meeting = await meetings_controller.get_active(
+                room=room, current_time=current_time
+            )
+            if meeting is None:
+                # Edge case: meeting was created but expired/deleted between checks
+                logger.error(
+                    "Meeting disappeared after race condition for room %s", room.name
+                )
+                raise HTTPException(
+                    status_code=503, detail="Unable to join meeting - please try again"
+                )

    if user_id != room.user_id:
        meeting.host_room_url = ""
--- a/server/reflector/views/transcripts.py
+++ b/server/reflector/views/transcripts.py
@@ -8,7 +8,6 @@ from fastapi_pagination.ext.databases import paginate
 from jose import jwt
 from pydantic import BaseModel, Field, field_serializer
 from reflector.db.meetings import meetings_controller
-from reflector.db.migrate_user import migrate_user
 from reflector.db.rooms import rooms_controller
 from reflector.db.transcripts import (
    SourceKind,
@@ -114,10 +113,6 @@ async def transcripts_list(

    user_id = user["sub"] if user else None

-    # for fief to jwt migration, migrate user if needed
-    if user:
-        await migrate_user(email=user["email"], user_id=user["sub"])
-
    return await paginate(
        database,
        await transcripts_controller.get_all(
--- a/server/reflector/worker/process.py
+++ b/server/reflector/worker/process.py
@@ -101,6 +101,8 @@ async def process_recording(bucket_name: str, object_key: str):
            user_id=room.user_id,
            recording_id=recording.id,
            share_mode="public",
+            meeting_id=meeting.id,
+            room_id=room.id,
        )

    _, extension = os.path.splitext(object_key)
--- a/server/tests/test_s3_temp_file.py
+++ b/server/tests/test_s3_temp_file.py
@@ -0,0 +1,129 @@
+"""
+@vibe-generated
+Tests for S3 temporary file context manager.
+"""
+
+import pytest
+from unittest.mock import Mock, AsyncMock
+from reflector.utils.s3_temp_file import S3TemporaryFile
+
+
+@pytest.mark.asyncio
+async def test_successful_upload_and_cleanup():
+    """Test that file is uploaded and cleaned up on success."""
+    # Mock storage
+    mock_storage = Mock()
+    mock_storage.put_file = AsyncMock()
+    mock_storage.get_file_url = AsyncMock(return_value="https://example.com/file.wav")
+    mock_storage.delete_file = AsyncMock()
+
+    # Use context manager
+    async with S3TemporaryFile(mock_storage, "test/file.wav") as s3_file:
+        url = await s3_file.upload(b"test data")
+        assert url == "https://example.com/file.wav"
+        assert s3_file.url == "https://example.com/file.wav"
+
+    # Verify operations
+    mock_storage.put_file.assert_called_once_with("test/file.wav", b"test data")
+    mock_storage.get_file_url.assert_called_once_with("test/file.wav")
+    mock_storage.delete_file.assert_called_once_with("test/file.wav")
+
+
+@pytest.mark.asyncio
+async def test_cleanup_on_exception():
+    """Test that cleanup happens even when an exception occurs."""
+    # Mock storage
+    mock_storage = Mock()
+    mock_storage.put_file = AsyncMock()
+    mock_storage.get_file_url = AsyncMock(return_value="https://example.com/file.wav")
+    mock_storage.delete_file = AsyncMock()
+
+    # Use context manager with exception
+    with pytest.raises(ValueError):
+        async with S3TemporaryFile(mock_storage, "test/file.wav") as s3_file:
+            await s3_file.upload(b"test data")
+            raise ValueError("Simulated error during processing")
+
+    # Verify cleanup still happened
+    mock_storage.delete_file.assert_called_once_with("test/file.wav")
+
+
+@pytest.mark.asyncio
+async def test_no_cleanup_if_not_uploaded():
+    """Test that cleanup is skipped if file was never uploaded."""
+    # Mock storage
+    mock_storage = Mock()
+    mock_storage.delete_file = AsyncMock()
+
+    # Use context manager without uploading
+    async with S3TemporaryFile(mock_storage, "test/file.wav"):
+        pass  # Don't upload anything
+
+    # Verify no cleanup attempted
+    mock_storage.delete_file.assert_not_called()
+
+
+@pytest.mark.asyncio
+async def test_cleanup_failure_is_logged_not_raised():
+    """Test that cleanup failures are logged but don't raise exceptions."""
+    # Mock storage
+    mock_storage = Mock()
+    mock_storage.put_file = AsyncMock()
+    mock_storage.get_file_url = AsyncMock(return_value="https://example.com/file.wav")
+    mock_storage.delete_file = AsyncMock(side_effect=Exception("Delete failed"))
+
+    # Use context manager - should not raise
+    async with S3TemporaryFile(mock_storage, "test/file.wav") as s3_file:
+        await s3_file.upload(b"test data")
+
+    # Verify delete was attempted (3 times due to retry)
+    assert mock_storage.delete_file.call_count == 3
+
+
+@pytest.mark.asyncio
+async def test_upload_retry_on_failure():
+    """Test that upload is retried on failure."""
+    # Mock storage with failures then success
+    mock_storage = Mock()
+    mock_storage.put_file = AsyncMock(
+        side_effect=[Exception("Network error"), None]  # Fail once, then succeed
+    )
+    mock_storage.get_file_url = AsyncMock(return_value="https://example.com/file.wav")
+    mock_storage.delete_file = AsyncMock()
+
+    # Use context manager
+    async with S3TemporaryFile(mock_storage, "test/file.wav") as s3_file:
+        url = await s3_file.upload(b"test data")
+        assert url == "https://example.com/file.wav"
+
+    # Verify upload was retried
+    assert mock_storage.put_file.call_count == 2
+
+
+@pytest.mark.asyncio
+async def test_delete_retry_on_failure():
+    """Test that delete is retried on failure."""
+    # Mock storage
+    mock_storage = Mock()
+    mock_storage.put_file = AsyncMock()
+    mock_storage.get_file_url = AsyncMock(return_value="https://example.com/file.wav")
+    mock_storage.delete_file = AsyncMock(
+        side_effect=[Exception("Network error"), None]  # Fail once, then succeed
+    )
+
+    # Use context manager
+    async with S3TemporaryFile(mock_storage, "test/file.wav") as s3_file:
+        await s3_file.upload(b"test data")
+
+    # Verify delete was retried
+    assert mock_storage.delete_file.call_count == 2
+
+
+@pytest.mark.asyncio
+async def test_properties_before_upload():
+    """Test that properties work correctly before upload."""
+    mock_storage = Mock()
+
+    async with S3TemporaryFile(mock_storage, "test/file.wav") as s3_file:
+        assert s3_file.url is None
+        assert s3_file.uploaded is False
--- a/server/tests/test_transcripts.py
+++ b/server/tests/test_transcripts.py
@@ -1,6 +1,6 @@
-import pytest
-from unittest.mock import patch
 from contextlib import asynccontextmanager
+
+import pytest
 from httpx import AsyncClient


@@ -261,67 +261,3 @@ async def test_transcript_mark_reviewed():
        response = await ac.get(f"/transcripts/{tid}")
        assert response.status_code == 200
        assert response.json()["reviewed"] is True
-
-
-@asynccontextmanager
-async def patch_migrate_user():
-    with patch(
-        "reflector.db.migrate_user.users_to_migrate",
-        [["test@mail.com", "randomuserid", None]],
-    ):
-        yield
-
-
-@pytest.mark.asyncio
-async def test_transcripts_list_authenticated_migration():
-    # XXX this test is a bit fragile, as it depends on the storage which
-    #     is shared between tests
-    from reflector.app import app
-
-    testx1 = "testmigration1"
-    testx2 = "testmigration2"
-
-    async with patch_migrate_user(), AsyncClient(
-        app=app, base_url="http://test/v1"
-    ) as ac:
-        # first ensure client 2 does not have any transcripts related to this test
-        async with authenticated_client2_ctx():
-            response = await ac.get("/transcripts")
-            assert response.status_code == 200
-            # assert len(response.json()["items"]) == 0
-            names = [t["name"] for t in response.json()["items"]]
-            assert testx1 not in names
-            assert testx2 not in names
-
-        # create 2 transcripts with client 1
-        async with authenticated_client_ctx():
-            response = await ac.post("/transcripts", json={"name": testx1})
-            assert response.status_code == 200
-            assert response.json()["name"] == testx1
-
-            response = await ac.post("/transcripts", json={"name": testx2})
-            assert response.status_code == 200
-            assert response.json()["name"] == testx2
-
-            response = await ac.get("/transcripts")
-            assert response.status_code == 200
-            assert len(response.json()["items"]) >= 2
-            names = [t["name"] for t in response.json()["items"]]
-            assert testx1 in names
-            assert testx2 in names
-
-        # now going back to client 2, migration should happen
-        async with authenticated_client2_ctx():
-            response = await ac.get("/transcripts")
-            assert response.status_code == 200
-            names = [t["name"] for t in response.json()["items"]]
-            assert testx1 in names
-            assert testx2 in names
-
-        # and client 1 should have nothing now
-        async with authenticated_client_ctx():
-            response = await ac.get("/transcripts")
-            assert response.status_code == 200
-            names = [t["name"] for t in response.json()["items"]]
-            assert testx1 not in names
-            assert testx2 not in names
--- a/server/uv.lock
+++ b/server/uv.lock
@@ -817,25 +817,6 @@ wheels = [
    { url = "https://files.pythonhosted.org/packages/ad/69/28359d152f9e2ec1ff4dff3da47011b6346e9a472f89b409bb13017a7d1f/faster_whisper-1.1.1-py3-none-any.whl", hash = "sha256:5808dc334fb64fb4336921450abccfe5e313a859b31ba61def0ac7f639383d90", size = 1118368, upload-time = "2025-01-01T14:47:16.131Z" },
 ]

-[[package]]
-name = "fief-client"
-version = "0.20.0"
-source = { registry = "https://pypi.org/simple" }
-dependencies = [
-    { name = "httpx" },
-    { name = "jwcrypto" },
-]
-sdist = { url = "https://files.pythonhosted.org/packages/75/af/f6cc3ded8bdb901097b92a3ed444c48576a1b62f01352cb2fa069b0dd166/fief_client-0.20.0.tar.gz", hash = "sha256:dbfb906d03c4a5402ceac5c843aa4708535fb6f5d5c1c4e263ec06fbbbc434d7", size = 32465, upload-time = "2024-10-13T11:54:08.793Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/1c/06/d33506317b4c9b71025eb010d96c4f7a8f89fa620ca30532c2e8e4390593/fief_client-0.20.0-py3-none-any.whl", hash = "sha256:425f40cc7c45c651daec63da402e033c53d91dcaa3f9bf208873fd8692fc16dc", size = 20219, upload-time = "2024-10-13T11:54:07.342Z" },
-]
-
-[package.optional-dependencies]
-fastapi = [
-    { name = "fastapi" },
-    { name = "makefun" },
-]
-
 [[package]]
 name = "filelock"
 version = "3.18.0"
@@ -1211,19 +1192,6 @@ wheels = [
    { url = "https://files.pythonhosted.org/packages/01/0e/b27cdbaccf30b890c40ed1da9fd4a3593a5cf94dae54fb34f8a4b74fcd3f/jsonschema_specifications-2025.4.1-py3-none-any.whl", hash = "sha256:4653bffbd6584f7de83a67e0d620ef16900b390ddc7939d56684d6c81e33f1af", size = 18437, upload-time = "2025-04-23T12:34:05.422Z" },
 ]

-[[package]]
-name = "jwcrypto"
-version = "1.5.6"
-source = { registry = "https://pypi.org/simple" }
-dependencies = [
-    { name = "cryptography" },
-    { name = "typing-extensions" },
-]
-sdist = { url = "https://files.pythonhosted.org/packages/e1/db/870e5d5fb311b0bcf049630b5ba3abca2d339fd5e13ba175b4c13b456d08/jwcrypto-1.5.6.tar.gz", hash = "sha256:771a87762a0c081ae6166958a954f80848820b2ab066937dc8b8379d65b1b039", size = 87168, upload-time = "2024-03-06T19:58:31.831Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/cd/58/4a1880ea64032185e9ae9f63940c9327c6952d5584ea544a8f66972f2fda/jwcrypto-1.5.6-py3-none-any.whl", hash = "sha256:150d2b0ebbdb8f40b77f543fb44ffd2baeff48788be71f67f03566692fd55789", size = 92520, upload-time = "2024-03-06T19:58:29.765Z" },
-]
-
 [[package]]
 name = "kombu"
 version = "5.5.4"
@@ -1299,15 +1267,6 @@ wheels = [
    { url = "https://files.pythonhosted.org/packages/0c/29/0348de65b8cc732daa3e33e67806420b2ae89bdce2b04af740289c5c6c8c/loguru-0.7.3-py3-none-any.whl", hash = "sha256:31a33c10c8e1e10422bfd431aeb5d351c7cf7fa671e3c4df004162264b28220c", size = 61595, upload-time = "2024-12-06T11:20:54.538Z" },
 ]

-[[package]]
-name = "makefun"
-version = "1.16.0"
-source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/7b/cf/6780ab8bc3b84a1cce3e4400aed3d64b6db7d5e227a2f75b6ded5674701a/makefun-1.16.0.tar.gz", hash = "sha256:e14601831570bff1f6d7e68828bcd30d2f5856f24bad5de0ccb22921ceebc947", size = 73565, upload-time = "2025-05-09T15:00:42.313Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/b7/c0/4bc973defd1270b89ccaae04cef0d5fa3ea85b59b108ad2c08aeea9afb76/makefun-1.16.0-py2.py3-none-any.whl", hash = "sha256:43baa4c3e7ae2b17de9ceac20b669e9a67ceeadff31581007cca20a07bbe42c4", size = 22923, upload-time = "2025-05-09T15:00:41.042Z" },
-]
-
 [[package]]
 name = "mako"
 version = "1.3.10"
@@ -2172,7 +2131,6 @@ dependencies = [
    { name = "fastapi", extra = ["standard"] },
    { name = "fastapi-pagination" },
    { name = "faster-whisper" },
-    { name = "fief-client", extra = ["fastapi"] },
    { name = "httpx" },
    { name = "jsonschema" },
    { name = "loguru" },
@@ -2234,7 +2192,6 @@ requires-dist = [
    { name = "fastapi", extras = ["standard"], specifier = ">=0.100.1" },
    { name = "fastapi-pagination", specifier = ">=0.12.6" },
    { name = "faster-whisper", specifier = ">=0.10.0" },
-    { name = "fief-client", extras = ["fastapi"], specifier = ">=0.17.0" },
    { name = "httpx", specifier = ">=0.24.1" },
    { name = "jsonschema", specifier = ">=4.23.0" },
    { name = "loguru", specifier = ">=0.7.0" },
--- a/www/REFACTOR2.md
+++ b/www/REFACTOR2.md
@@ -0,0 +1,86 @@
+# Chakra UI v3 Migration - Remaining Tasks
+
+## Completed
+
+- ✅ Migrated from Chakra UI v2 to v3 in package.json
+- ✅ Updated theme.ts with whiteAlpha color palette and semantic tokens
+- ✅ Added button recipe with fontWeight 600 and hover states
+- ✅ Moved Poppins font from theme to HTML tag className
+- ✅ Fixed deprecated props across all files:
+  - ✅ `isDisabled` → `disabled` (all occurrences fixed)
+  - ✅ `isChecked` → `checked` (all occurrences fixed)
+  - ✅ `isLoading` → `loading` (all occurrences fixed)
+  - ✅ `isOpen` → `open` (all occurrences fixed)
+  - ✅ `noOfLines` → `lineClamp` (all occurrences fixed)
+  - ✅ `align` → `alignItems` on Flex/Stack components (all occurrences fixed)
+  - ✅ `justify` → `justifyContent` on Flex/Stack components (all occurrences fixed)
+
+## Migration Summary
+
+### Files Modified
+
+1. **app/(app)/rooms/page.tsx**
+
+   - Fixed: isDisabled, isChecked, align, justify on multiple components
+   - Updated temporary Select component props
+
+2. **app/(app)/transcripts/fileUploadButton.tsx**
+
+   - Fixed: isDisabled → disabled
+
+3. **app/(app)/transcripts/shareZulip.tsx**
+
+   - Fixed: isDisabled → disabled
+
+4. **app/(app)/transcripts/shareAndPrivacy.tsx**
+
+   - Fixed: isLoading → loading, isOpen → open
+   - Updated temporary Select component props
+
+5. **app/(app)/browse/page.tsx**
+
+   - Fixed: isOpen → open, align → alignItems, justify → justifyContent
+
+6. **app/(app)/transcripts/transcriptTitle.tsx**
+
+   - Fixed: noOfLines → lineClamp
+
+7. **app/(app)/transcripts/[transcriptId]/correct/topicHeader.tsx**
+
+   - Fixed: noOfLines → lineClamp
+
+8. **app/lib/expandableText.tsx**
+
+   - Fixed: noOfLines → lineClamp
+
+9. **app/[roomName]/page.tsx**
+
+   - Fixed: align → alignItems, justify → justifyContent
+
+10. **app/lib/WherebyWebinarEmbed.tsx**
+    - Fixed: align → alignItems, justify → justifyContent
+
+## Other Potential Issues
+
+1. Check for Modal/Dialog component imports and usage (currently using temporary replacements)
+2. Review Select component usage (using temporary replacements)
+3. Test button hover states for whiteAlpha color palette
+4. Verify all color palettes work correctly with the new semantic tokens
+
+## Testing
+
+After completing migrations:
+
+1. Run `yarn dev` and check all pages
+2. Test buttons with different color palettes
+3. Verify disabled states work correctly
+4. Check that text alignment and flex layouts are correct
+5. Test modal/dialog functionality
+
+## Next Steps
+
+The Chakra UI v3 migration is now largely complete for deprecated props. The main remaining items are:
+
+- Replace temporary Modal and Select components with proper Chakra v3 implementations
+- Thorough testing of all UI components
+- Performance optimization if needed
--- a/www/app/(aboutAndPrivacy)/about.tsx
+++ b/www/app/(aboutAndPrivacy)/about.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import FullscreenModal from "./fullsreenModal";
 import AboutContent from "./aboutContent";
+import { Button } from "@chakra-ui/react";

 type AboutProps = {
  buttonText: string;
@@ -12,12 +13,9 @@ export default function About({ buttonText }: AboutProps) {

  return (
    <>
-      <button
-        className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
-        onClick={() => setModalOpen(true)}
-      >
+      <Button mt={2} onClick={() => setModalOpen(true)} variant="subtle">
        {buttonText}
-      </button>
+      </Button>
      {modalOpen && (
        <FullscreenModal close={() => setModalOpen(false)}>
          <AboutContent />
--- a/www/app/(aboutAndPrivacy)/privacy.tsx
+++ b/www/app/(aboutAndPrivacy)/privacy.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import FullscreenModal from "./fullsreenModal";
 import PrivacyContent from "./privacyContent";
+import { Button } from "@chakra-ui/react";

 type PrivacyProps = {
  buttonText: string;
@@ -12,12 +13,9 @@ export default function Privacy({ buttonText }: PrivacyProps) {

  return (
    <>
-      <button
-        className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
-        onClick={() => setModalOpen(true)}
-      >
+      <Button mt={2} onClick={() => setModalOpen(true)} variant="subtle">
        {buttonText}
-      </button>
+      </Button>
      {modalOpen && (
        <FullscreenModal close={() => setModalOpen(false)}>
          <PrivacyContent />
--- a/www/app/(app)/browse/_components/DeleteTranscriptDialog.tsx
+++ b/www/app/(app)/browse/_components/DeleteTranscriptDialog.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Button } from "@chakra-ui/react";
+// import { Dialog } from "@chakra-ui/react";
+
+interface DeleteTranscriptDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  cancelRef: React.RefObject<any>;
+}
+
+export default function DeleteTranscriptDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  cancelRef,
+}: DeleteTranscriptDialogProps) {
+  // Temporarily return null to fix import issues
+  return null;
+
+  /* return (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(e) => !e.open && onClose()}
+      initialFocusEl={() => cancelRef.current}
+    >
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Dialog.Header fontSize="lg" fontWeight="bold">
+            Delete Transcript
+          </Dialog.Header>
+          <Dialog.Body>
+            Are you sure? You can't undo this action afterwards.
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button ref={cancelRef} onClick={onClose}>
+              Cancel
+            </Button>
+            <Button colorPalette="red" onClick={onConfirm} ml={3}>
+              Delete
+            </Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  ); */
+}
--- a/www/app/(app)/browse/_components/FilterSidebar.tsx
+++ b/www/app/(app)/browse/_components/FilterSidebar.tsx
@@ -0,0 +1,120 @@
+import React from "react";
+import { Box, Stack, Link, Heading } from "@chakra-ui/react";
+import NextLink from "next/link";
+import { Room, SourceKind } from "../../../api";
+
+interface FilterSidebarProps {
+  rooms: Room[];
+  selectedSourceKind: SourceKind | null;
+  selectedRoomId: string;
+  onFilterChange: (sourceKind: SourceKind | null, roomId: string) => void;
+}
+
+export default function FilterSidebar({
+  rooms,
+  selectedSourceKind,
+  selectedRoomId,
+  onFilterChange,
+}: FilterSidebarProps) {
+  const myRooms = rooms.filter((room) => !room.is_shared);
+  const sharedRooms = rooms.filter((room) => room.is_shared);
+
+  return (
+    <Box w={{ base: "full", md: "200px" }} p={4} bg="gray.100" rounded="md">
+      <Stack gap={2}>
+        <Link
+          as={NextLink}
+          fontSize="sm"
+          href="#"
+          onClick={() => onFilterChange(null, "")}
+          color={selectedSourceKind === null ? "blue.500" : "gray.600"}
+          fontWeight={selectedSourceKind === null ? "bold" : "normal"}
+        >
+          All Transcripts
+        </Link>
+
+        <Box borderBottomWidth="1px" my={2} />
+
+        {myRooms.length > 0 && (
+          <>
+            <Heading size="sm">My Rooms</Heading>
+
+            {myRooms.map((room) => (
+              <Link
+                key={room.id}
+                as={NextLink}
+                href="#"
+                onClick={() => onFilterChange("room", room.id)}
+                color={
+                  selectedSourceKind === "room" && selectedRoomId === room.id
+                    ? "blue.500"
+                    : "gray.600"
+                }
+                fontWeight={
+                  selectedSourceKind === "room" && selectedRoomId === room.id
+                    ? "bold"
+                    : "normal"
+                }
+                fontSize="sm"
+              >
+                {room.name}
+              </Link>
+            ))}
+          </>
+        )}
+
+        {sharedRooms.length > 0 && (
+          <>
+            <Heading size="sm">Shared Rooms</Heading>
+
+            {sharedRooms.map((room) => (
+              <Link
+                key={room.id}
+                as={NextLink}
+                href="#"
+                onClick={() => onFilterChange("room", room.id)}
+                color={
+                  selectedSourceKind === "room" && selectedRoomId === room.id
+                    ? "blue.500"
+                    : "gray.600"
+                }
+                fontWeight={
+                  selectedSourceKind === "room" && selectedRoomId === room.id
+                    ? "bold"
+                    : "normal"
+                }
+                fontSize="sm"
+              >
+                {room.name}
+              </Link>
+            ))}
+          </>
+        )}
+
+        <Box borderBottomWidth="1px" my={2} />
+        <Link
+          as={NextLink}
+          href="#"
+          onClick={() => onFilterChange("live", "")}
+          color={selectedSourceKind === "live" ? "blue.500" : "gray.600"}
+          _hover={{ color: "blue.300" }}
+          fontWeight={selectedSourceKind === "live" ? "bold" : "normal"}
+          fontSize="sm"
+        >
+          Live Transcripts
+        </Link>
+        <Link
+          as={NextLink}
+          href="#"
+          onClick={() => onFilterChange("file", "")}
+          color={selectedSourceKind === "file" ? "blue.500" : "gray.600"}
+          _hover={{ color: "blue.300" }}
+          fontWeight={selectedSourceKind === "file" ? "bold" : "normal"}
+          fontSize="sm"
+        >
+          Uploaded Files
+        </Link>
+      </Stack>
+    </Box>
+  );
+}
--- a/www/app/(app)/browse/_components/Pagination.tsx
+++ b/www/app/(app)/browse/_components/Pagination.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { Pagination, IconButton, ButtonGroup } from "@chakra-ui/react";
+import { LuChevronLeft, LuChevronRight } from "react-icons/lu";
+
+type PaginationProps = {
+  page: number;
+  setPage: (page: number) => void;
+  total: number;
+  size: number;
+};
+
+export default function PaginationComponent(props: PaginationProps) {
+  const { page, setPage, total, size } = props;
+  const totalPages = Math.ceil(total / size);
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <Pagination.Root
+      count={total}
+      pageSize={size}
+      page={page}
+      onPageChange={(details) => setPage(details.page)}
+      style={{ display: "flex", justifyContent: "center" }}
+    >
+      <ButtonGroup variant="ghost" size="xs">
+        <Pagination.PrevTrigger asChild>
+          <IconButton>
+            <LuChevronLeft />
+          </IconButton>
+        </Pagination.PrevTrigger>
+        <Pagination.Items
+          render={(page) => (
+            <IconButton variant={{ base: "ghost", _selected: "solid" }}>
+              {page.value}
+            </IconButton>
+          )}
+        />
+        <Pagination.NextTrigger asChild>
+          <IconButton>
+            <LuChevronRight />
+          </IconButton>
+        </Pagination.NextTrigger>
+      </ButtonGroup>
+    </Pagination.Root>
+  );
+}
--- a/www/app/(app)/browse/_components/SearchBar.tsx
+++ b/www/app/(app)/browse/_components/SearchBar.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { Flex, Input, Button } from "@chakra-ui/react";
+
+interface SearchBarProps {
+  onSearch: (searchTerm: string) => void;
+}
+
+export default function SearchBar({ onSearch }: SearchBarProps) {
+  const [searchInputValue, setSearchInputValue] = useState("");
+
+  const handleSearch = () => {
+    onSearch(searchInputValue);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleSearch();
+    }
+  };
+
+  return (
+    <Flex alignItems="center">
+      <Input
+        placeholder="Search transcriptions..."
+        value={searchInputValue}
+        onChange={(e) => setSearchInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <Button ml={2} onClick={handleSearch}>
+        Search
+      </Button>
+    </Flex>
+  );
+}
--- a/www/app/(app)/browse/_components/TranscriptActionsMenu.tsx
+++ b/www/app/(app)/browse/_components/TranscriptActionsMenu.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { IconButton, Icon, Menu } from "@chakra-ui/react";
+import { LuMenu, LuTrash, LuRotateCw } from "react-icons/lu";
+
+interface TranscriptActionsMenuProps {
+  transcriptId: string;
+  onDelete: (transcriptId: string) => (e: any) => void;
+  onReprocess: (transcriptId: string) => (e: any) => void;
+}
+
+export default function TranscriptActionsMenu({
+  transcriptId,
+  onDelete,
+  onReprocess,
+}: TranscriptActionsMenuProps) {
+  return (
+    <Menu.Root closeOnSelect={true} lazyMount={true}>
+      <Menu.Trigger asChild>
+        <IconButton aria-label="Options" size="sm" variant="ghost">
+          <LuMenu />
+        </IconButton>
+      </Menu.Trigger>
+      <Menu.Positioner>
+        <Menu.Content>
+          <Menu.Item
+            value="reprocess"
+            onClick={(e) => onReprocess(transcriptId)(e)}
+          >
+            <LuRotateCw /> Reprocess
+          </Menu.Item>
+          <Menu.Item value="delete" onClick={(e) => onDelete(transcriptId)(e)}>
+            <LuTrash /> Delete
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Positioner>
+    </Menu.Root>
+  );
+}
--- a/www/app/(app)/browse/_components/TranscriptCards.tsx
+++ b/www/app/(app)/browse/_components/TranscriptCards.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { Box, Stack, Text, Flex, Link, Spinner } from "@chakra-ui/react";
+import NextLink from "next/link";
+import { GetTranscriptMinimal } from "../../../api";
+import { formatTimeMs, formatLocalDate } from "../../../lib/time";
+import TranscriptStatusIcon from "./TranscriptStatusIcon";
+import TranscriptActionsMenu from "./TranscriptActionsMenu";
+
+interface TranscriptCardsProps {
+  transcripts: GetTranscriptMinimal[];
+  onDelete: (transcriptId: string) => (e: any) => void;
+  onReprocess: (transcriptId: string) => (e: any) => void;
+  loading?: boolean;
+}
+
+export default function TranscriptCards({
+  transcripts,
+  onDelete,
+  onReprocess,
+  loading,
+}: TranscriptCardsProps) {
+  return (
+    <Box display={{ base: "block", lg: "none" }} position="relative">
+      {loading && (
+        <Flex
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          bg="rgba(255, 255, 255, 0.8)"
+          zIndex={10}
+          align="center"
+          justify="center"
+        >
+          <Spinner size="xl" color="gray.700" />
+        </Flex>
+      )}
+      <Box
+        opacity={loading ? 0.9 : 1}
+        pointerEvents={loading ? "none" : "auto"}
+        transition="opacity 0.2s ease-in-out"
+      >
+        <Stack gap={2}>
+          {transcripts.map((item) => (
+            <Box
+              key={item.id}
+              borderWidth={1}
+              p={4}
+              borderRadius="md"
+              fontSize="sm"
+            >
+              <Flex justify="space-between" alignItems="flex-start" gap="2">
+                <Box>
+                  <TranscriptStatusIcon status={item.status} />
+                </Box>
+                <Box flex="1">
+                  <Link
+                    as={NextLink}
+                    href={`/transcripts/${item.id}`}
+                    fontWeight="600"
+                    display="block"
+                  >
+                    {item.title || "Unnamed Transcript"}
+                  </Link>
+                  <Text>
+                    Source:{" "}
+                    {item.source_kind === "room"
+                      ? item.room_name
+                      : item.source_kind}
+                  </Text>
+                  <Text>Date: {formatLocalDate(item.created_at)}</Text>
+                  <Text>Duration: {formatTimeMs(item.duration)}</Text>
+                </Box>
+                <TranscriptActionsMenu
+                  transcriptId={item.id}
+                  onDelete={onDelete}
+                  onReprocess={onReprocess}
+                />
+              </Flex>
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
--- a/www/app/(app)/browse/_components/TranscriptStatusIcon.tsx
+++ b/www/app/(app)/browse/_components/TranscriptStatusIcon.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { Icon, Box } from "@chakra-ui/react";
+import {
+  FaCheck,
+  FaTrash,
+  FaStar,
+  FaMicrophone,
+  FaGear,
+} from "react-icons/fa6";
+
+interface TranscriptStatusIconProps {
+  status: string;
+}
+
+export default function TranscriptStatusIcon({
+  status,
+}: TranscriptStatusIconProps) {
+  switch (status) {
+    case "ended":
+      return (
+        <Box as="span" title="Processing done">
+          <Icon color="green" as={FaCheck} />
+        </Box>
+      );
+    case "error":
+      return (
+        <Box as="span" title="Processing error">
+          <Icon color="red.500" as={FaTrash} />
+        </Box>
+      );
+    case "idle":
+      return (
+        <Box as="span" title="New meeting, no recording">
+          <Icon color="yellow.500" as={FaStar} />
+        </Box>
+      );
+    case "processing":
+      return (
+        <Box as="span" title="Processing in progress">
+          <Icon color="gray.500" as={FaGear} />
+        </Box>
+      );
+    case "recording":
+      return (
+        <Box as="span" title="Recording in progress">
+          <Icon color="blue.500" as={FaMicrophone} />
+        </Box>
+      );
+    default:
+      return null;
+  }
+}
--- a/www/app/(app)/browse/_components/TranscriptTable.tsx
+++ b/www/app/(app)/browse/_components/TranscriptTable.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { Box, Table, Link, Flex, Spinner } from "@chakra-ui/react";
+import NextLink from "next/link";
+import { GetTranscriptMinimal } from "../../../api";
+import { formatTimeMs, formatLocalDate } from "../../../lib/time";
+import TranscriptStatusIcon from "./TranscriptStatusIcon";
+import TranscriptActionsMenu from "./TranscriptActionsMenu";
+
+interface TranscriptTableProps {
+  transcripts: GetTranscriptMinimal[];
+  onDelete: (transcriptId: string) => (e: any) => void;
+  onReprocess: (transcriptId: string) => (e: any) => void;
+  loading?: boolean;
+}
+
+export default function TranscriptTable({
+  transcripts,
+  onDelete,
+  onReprocess,
+  loading,
+}: TranscriptTableProps) {
+  return (
+    <Box display={{ base: "none", lg: "block" }} position="relative">
+      {loading && (
+        <Flex
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          align="center"
+          justify="center"
+        >
+          <Spinner size="xl" color="gray.700" />
+        </Flex>
+      )}
+      <Box
+        opacity={loading ? 0.9 : 1}
+        pointerEvents={loading ? "none" : "auto"}
+        transition="opacity 0.2s ease-in-out"
+      >
+        <Table.Root>
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeader
+                width="16px"
+                fontWeight="600"
+              ></Table.ColumnHeader>
+              <Table.ColumnHeader width="400px" fontWeight="600">
+                Transcription Title
+              </Table.ColumnHeader>
+              <Table.ColumnHeader width="150px" fontWeight="600">
+                Source
+              </Table.ColumnHeader>
+              <Table.ColumnHeader width="200px" fontWeight="600">
+                Date
+              </Table.ColumnHeader>
+              <Table.ColumnHeader width="100px" fontWeight="600">
+                Duration
+              </Table.ColumnHeader>
+              <Table.ColumnHeader
+                width="50px"
+                fontWeight="600"
+              ></Table.ColumnHeader>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {transcripts.map((item) => (
+              <Table.Row key={item.id}>
+                <Table.Cell>
+                  <TranscriptStatusIcon status={item.status} />
+                </Table.Cell>
+                <Table.Cell>
+                  <Link as={NextLink} href={`/transcripts/${item.id}`}>
+                    {item.title || "Unnamed Transcript"}
+                  </Link>
+                </Table.Cell>
+                <Table.Cell>
+                  {item.source_kind === "room"
+                    ? item.room_name
+                    : item.source_kind}
+                </Table.Cell>
+                <Table.Cell>{formatLocalDate(item.created_at)}</Table.Cell>
+                <Table.Cell>{formatTimeMs(item.duration)}</Table.Cell>
+                <Table.Cell>
+                  <TranscriptActionsMenu
+                    transcriptId={item.id}
+                    onDelete={onDelete}
+                    onReprocess={onReprocess}
+                  />
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Box>
+    </Box>
+  );
+}
--- a/www/app/(app)/browse/page.tsx
+++ b/www/app/(app)/browse/page.tsx
@@ -1,55 +1,18 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import {
-  Flex,
-  Spinner,
-  Heading,
-  Box,
-  Text,
-  Link,
-  Stack,
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  Button,
-  Divider,
-  Input,
-  Icon,
-  Tooltip,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  IconButton,
-  AlertDialog,
-  AlertDialogOverlay,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogBody,
-  AlertDialogFooter,
-  Spacer,
-} from "@chakra-ui/react";
-import {
-  FaCheck,
-  FaTrash,
-  FaStar,
-  FaMicrophone,
-  FaGear,
-  FaEllipsisVertical,
-  FaArrowRotateRight,
-} from "react-icons/fa6";
+import { Flex, Spinner, Heading, Text, Link } from "@chakra-ui/react";
 import useTranscriptList from "../transcripts/useTranscriptList";
 import useSessionUser from "../../lib/useSessionUser";
-import NextLink from "next/link";
-import { Room, GetTranscriptMinimal } from "../../api";
-import Pagination from "./pagination";
-import { formatTimeMs, formatLocalDate } from "../../lib/time";
+import { Room } from "../../api";
+import Pagination from "./_components/Pagination";
 import useApi from "../../lib/useApi";
 import { useError } from "../../(errors)/errorContext";
 import { SourceKind } from "../../api";
+import FilterSidebar from "./_components/FilterSidebar";
+import SearchBar from "./_components/SearchBar";
+import TranscriptTable from "./_components/TranscriptTable";
+import TranscriptCards from "./_components/TranscriptCards";
+import DeleteTranscriptDialog from "./_components/DeleteTranscriptDialog";

 export default function TranscriptBrowser() {
  const [selectedSourceKind, setSelectedSourceKind] =
@@ -58,7 +21,6 @@ export default function TranscriptBrowser() {
  const [rooms, setRooms] = useState<Room[]>([]);
  const [page, setPage] = useState(1);
  const [searchTerm, setSearchTerm] = useState("");
-  const [searchInputValue, setSearchInputValue] = useState("");
  const { loading, response, refetch } = useTranscriptList(
    page,
    selectedSourceKind,
@@ -74,17 +36,10 @@ export default function TranscriptBrowser() {
    React.useState<string>();
  const [deletedItemIds, setDeletedItemIds] = React.useState<string[]>();

-  const myRooms = rooms.filter((room) => !room.is_shared);
-  const sharedRooms = rooms.filter((room) => room.is_shared);
-
  useEffect(() => {
    setDeletedItemIds([]);
  }, [page, response]);

-  useEffect(() => {
-    refetch();
-  }, [selectedRoomId, page, searchTerm]);
-
  useEffect(() => {
    if (!api) return;
    api
@@ -100,33 +55,35 @@ export default function TranscriptBrowser() {
    setSelectedSourceKind(sourceKind);
    setSelectedRoomId(roomId);
    setPage(1);
-    refetch();
  };

-  const handleSearch = () => {
+  const handleSearch = (searchTerm: string) => {
    setPage(1);
-    setSearchTerm(searchInputValue);
+    setSearchTerm(searchTerm);
    setSelectedSourceKind(null);
    setSelectedRoomId("");
-    refetch();
-  };
-
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      handleSearch();
-    }
  };

  if (loading && !response)
    return (
-      <Flex flexDir="column" align="center" justify="center" h="100%">
+      <Flex
+        flexDir="column"
+        alignItems="center"
+        justifyContent="center"
+        h="100%"
+      >
        <Spinner size="xl" />
      </Flex>
    );

  if (!loading && !response)
    return (
-      <Flex flexDir="column" align="center" justify="center" h="100%">
+      <Flex
+        flexDir="column"
+        alignItems="center"
+        justifyContent="center"
+        h="100%"
+      >
        <Text>
          No transcripts found, but you can&nbsp;
          <Link href="/transcripts/new" className="underline">
@@ -185,334 +142,64 @@ export default function TranscriptBrowser() {
      flexDir="column"
      w={{ base: "full", md: "container.xl" }}
      mx="auto"
-      p={4}
+      pt={4}
    >
-      <Flex flexDir="row" justify="space-between" align="center" mb={4}>
-        <Heading size="md">
+      <Flex
+        flexDir="row"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={4}
+      >
+        <Heading size="lg">
          {userName ? `${userName}'s Transcriptions` : "Your Transcriptions"}{" "}
          {loading || (deletionLoading && <Spinner size="sm" />)}
        </Heading>
      </Flex>

      <Flex flexDir={{ base: "column", md: "row" }}>
-        <Box w={{ base: "full", md: "300px" }} p={4} bg="gray.100">
-          <Stack spacing={3}>
-            <Link
-              as={NextLink}
-              href="#"
-              onClick={() => handleFilterTranscripts(null, "")}
-              color={selectedSourceKind === null ? "blue.500" : "gray.600"}
-              _hover={{ color: "blue.300" }}
-              fontWeight={selectedSourceKind === null ? "bold" : "normal"}
-            >
-              All Transcripts
-            </Link>
+        <FilterSidebar
+          rooms={rooms}
+          selectedSourceKind={selectedSourceKind}
+          selectedRoomId={selectedRoomId}
+          onFilterChange={handleFilterTranscripts}
+        />

-            <Divider />
-
-            {myRooms.length > 0 && (
-              <>
-                <Heading size="sm">My Rooms</Heading>
-
-                {myRooms.map((room) => (
-                  <Link
-                    key={room.id}
-                    as={NextLink}
-                    href="#"
-                    onClick={() => handleFilterTranscripts("room", room.id)}
-                    color={
-                      selectedSourceKind === "room" &&
-                      selectedRoomId === room.id
-                        ? "blue.500"
-                        : "gray.600"
-                    }
-                    _hover={{ color: "blue.300" }}
-                    fontWeight={
-                      selectedSourceKind === "room" &&
-                      selectedRoomId === room.id
-                        ? "bold"
-                        : "normal"
-                    }
-                    ml={4}
-                  >
-                    {room.name}
-                  </Link>
-                ))}
-              </>
-            )}
-
-            {sharedRooms.length > 0 && (
-              <>
-                <Heading size="sm">Shared Rooms</Heading>
-
-                {sharedRooms.map((room) => (
-                  <Link
-                    key={room.id}
-                    as={NextLink}
-                    href="#"
-                    onClick={() => handleFilterTranscripts("room", room.id)}
-                    color={
-                      selectedSourceKind === "room" &&
-                      selectedRoomId === room.id
-                        ? "blue.500"
-                        : "gray.600"
-                    }
-                    _hover={{ color: "blue.300" }}
-                    fontWeight={
-                      selectedSourceKind === "room" &&
-                      selectedRoomId === room.id
-                        ? "bold"
-                        : "normal"
-                    }
-                    ml={4}
-                  >
-                    {room.name}
-                  </Link>
-                ))}
-              </>
-            )}
-
-            <Divider />
-            <Link
-              as={NextLink}
-              href="#"
-              onClick={() => handleFilterTranscripts("live", "")}
-              color={selectedSourceKind === "live" ? "blue.500" : "gray.600"}
-              _hover={{ color: "blue.300" }}
-              fontWeight={selectedSourceKind === "live" ? "bold" : "normal"}
-            >
-              Live Transcripts
-            </Link>
-            <Link
-              as={NextLink}
-              href="#"
-              onClick={() => handleFilterTranscripts("file", "")}
-              color={selectedSourceKind === "file" ? "blue.500" : "gray.600"}
-              _hover={{ color: "blue.300" }}
-              fontWeight={selectedSourceKind === "file" ? "bold" : "normal"}
-            >
-              Uploaded Files
-            </Link>
-          </Stack>
-        </Box>
-
-        <Flex flexDir="column" flex="1" p={4} gap={4}>
-          <Flex mb={4} alignItems="center">
-            <Input
-              placeholder="Search transcriptions..."
-              value={searchInputValue}
-              onChange={(e) => setSearchInputValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-            />
-            <Button ml={2} onClick={handleSearch}>
-              Search
-            </Button>
-          </Flex>
+        <Flex
+          flexDir="column"
+          flex="1"
+          pt={{ base: 4, md: 0 }}
+          pb={4}
+          gap={4}
+          px={{ base: 0, md: 4 }}
+        >
+          <SearchBar onSearch={handleSearch} />
          <Pagination
            page={page}
            setPage={setPage}
            total={response?.total || 0}
            size={response?.size || 0}
          />
-          <Box display={{ base: "none", md: "block" }}>
-            <Table colorScheme="gray">
-              <Thead>
-                <Tr>
-                  <Th pl={12} width="400px">
-                    Transcription Title
-                  </Th>
-                  <Th width="150px">Source</Th>
-                  <Th width="200px">Date</Th>
-                  <Th width="100px">Duration</Th>
-                  <Th width="50px"></Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {response?.items?.map((item: GetTranscriptMinimal) => (
-                  <Tr key={item.id}>
-                    <Td>
-                      <Flex alignItems="start">
-                        {item.status === "ended" && (
-                          <Tooltip label="Processing done">
-                            <span>
-                              <Icon color="green" as={FaCheck} />
-                            </span>
-                          </Tooltip>
-                        )}
-                        {item.status === "error" && (
-                          <Tooltip label="Processing error">
-                            <span>
-                              <Icon color="red.500" as={FaTrash} />
-                            </span>
-                          </Tooltip>
-                        )}
-                        {item.status === "idle" && (
-                          <Tooltip label="New meeting, no recording">
-                            <span>
-                              <Icon color="yellow.500" as={FaStar} />
-                            </span>
-                          </Tooltip>
-                        )}
-                        {item.status === "processing" && (
-                          <Tooltip label="Processing in progress">
-                            <span>
-                              <Icon color="gray.500" as={FaGear} />
-                            </span>
-                          </Tooltip>
-                        )}
-                        {item.status === "recording" && (
-                          <Tooltip label="Recording in progress">
-                            <span>
-                              <Icon color="blue.500" as={FaMicrophone} />
-                            </span>
-                          </Tooltip>
-                        )}
-                        <Link
-                          as={NextLink}
-                          href={`/transcripts/${item.id}`}
-                          ml={2}
-                        >
-                          {item.title || "Unnamed Transcript"}
-                        </Link>
-                      </Flex>
-                    </Td>
-                    <Td>
-                      {item.source_kind === "room"
-                        ? item.room_name
-                        : item.source_kind}
-                    </Td>
-                    <Td>{formatLocalDate(item.created_at)}</Td>
-                    <Td>{formatTimeMs(item.duration)}</Td>
-                    <Td>
-                      <Menu closeOnSelect={true}>
-                        <MenuButton
-                          as={IconButton}
-                          icon={<Icon as={FaEllipsisVertical} />}
-                          variant="outline"
-                          aria-label="Options"
-                        />
-                        <MenuList>
-                          <MenuItem onClick={handleDeleteTranscript(item.id)}>
-                            Delete
-                          </MenuItem>
-                          <MenuItem onClick={handleProcessTranscript(item.id)}>
-                            Reprocess
-                          </MenuItem>
-                        </MenuList>
-                      </Menu>
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </Box>
-          <Box display={{ base: "block", md: "none" }}>
-            <Stack spacing={2}>
-              {response?.items?.map((item: GetTranscriptMinimal) => (
-                <Box key={item.id} borderWidth={1} p={4} borderRadius="md">
-                  <Flex justify="space-between" alignItems="flex-start" gap="2">
-                    <Box>
-                      {item.status === "ended" && (
-                        <Tooltip label="Processing done">
-                          <span>
-                            <Icon color="green" as={FaCheck} />
-                          </span>
-                        </Tooltip>
-                      )}
-                      {item.status === "error" && (
-                        <Tooltip label="Processing error">
-                          <span>
-                            <Icon color="red.500" as={FaTrash} />
-                          </span>
-                        </Tooltip>
-                      )}
-                      {item.status === "idle" && (
-                        <Tooltip label="New meeting, no recording">
-                          <span>
-                            <Icon color="yellow.500" as={FaStar} />
-                          </span>
-                        </Tooltip>
-                      )}
-                      {item.status === "processing" && (
-                        <Tooltip label="Processing in progress">
-                          <span>
-                            <Icon color="gray.500" as={FaGear} />
-                          </span>
-                        </Tooltip>
-                      )}
-                      {item.status === "recording" && (
-                        <Tooltip label="Recording in progress">
-                          <span>
-                            <Icon color="blue.500" as={FaMicrophone} />
-                          </span>
-                        </Tooltip>
-                      )}
-                    </Box>
-                    <Box flex="1">
-                      <Text fontWeight="bold">
-                        {item.title || "Unnamed Transcript"}
-                      </Text>
-                      <Text>
-                        Source:{" "}
-                        {item.source_kind === "room"
-                          ? item.room_name
-                          : item.source_kind}
-                      </Text>
-                      <Text>Date: {formatLocalDate(item.created_at)}</Text>
-                      <Text>Duration: {formatTimeMs(item.duration)}</Text>
-                    </Box>
-                    <Menu>
-                      <MenuButton
-                        as={IconButton}
-                        icon={<Icon as={FaEllipsisVertical} />}
-                        variant="outline"
-                        aria-label="Options"
-                      />
-                      <MenuList>
-                        <MenuItem onClick={handleDeleteTranscript(item.id)}>
-                          Delete
-                        </MenuItem>
-                        <MenuItem onClick={handleProcessTranscript(item.id)}>
-                          Reprocess
-                        </MenuItem>
-                      </MenuList>
-                    </Menu>
-                  </Flex>
-                </Box>
-              ))}
-            </Stack>
-          </Box>
+          <TranscriptTable
+            transcripts={response?.items || []}
+            onDelete={handleDeleteTranscript}
+            onReprocess={handleProcessTranscript}
+            loading={loading}
+          />
+          <TranscriptCards
+            transcripts={response?.items || []}
+            onDelete={handleDeleteTranscript}
+            onReprocess={handleProcessTranscript}
+            loading={loading}
+          />
        </Flex>
      </Flex>

-      <AlertDialog
+      <DeleteTranscriptDialog
        isOpen={!!transcriptToDeleteId}
-        leastDestructiveRef={cancelRef}
        onClose={onCloseDeletion}
-      >
-        <AlertDialogOverlay>
-          <AlertDialogContent>
-            <AlertDialogHeader fontSize="lg" fontWeight="bold">
-              Delete Transcript
-            </AlertDialogHeader>
-            <AlertDialogBody>
-              Are you sure? You can't undo this action afterwards.
-            </AlertDialogBody>
-            <AlertDialogFooter>
-              <Button ref={cancelRef} onClick={onCloseDeletion}>
-                Cancel
-              </Button>
-              <Button
-                colorScheme="red"
-                onClick={handleDeleteTranscript(transcriptToDeleteId)}
-                ml={3}
-              >
-                Delete
-              </Button>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialogOverlay>
-      </AlertDialog>
+        onConfirm={() => handleDeleteTranscript(transcriptToDeleteId)(null)}
+        cancelRef={cancelRef}
+      />
    </Flex>
  );
 }
--- a/www/app/(app)/browse/pagination.tsx
+++ b/www/app/(app)/browse/pagination.tsx
@@ -1,79 +0,0 @@
-import { Button, Flex, IconButton } from "@chakra-ui/react";
-import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
-
-type PaginationProps = {
-  page: number;
-  setPage: (page: number) => void;
-  total: number;
-  size: number;
-};
-
-export default function Pagination(props: PaginationProps) {
-  const { page, setPage, total, size } = props;
-  const totalPages = Math.ceil(total / size);
-
-  const pageNumbers = Array.from(
-    { length: totalPages },
-    (_, i) => i + 1,
-  ).filter((pageNumber) => {
-    if (totalPages <= 3) {
-      // If there are 3 or fewer total pages, show all pages.
-      return true;
-    } else if (page <= 2) {
-      // For the first two pages, show the first 3 pages.
-      return pageNumber <= 3;
-    } else if (page >= totalPages - 1) {
-      // For the last two pages, show the last 3 pages.
-      return pageNumber >= totalPages - 2;
-    } else {
-      // For all other cases, show 3 pages centered around the current page.
-      return pageNumber >= page - 1 && pageNumber <= page + 1;
-    }
-  });
-
-  const canGoPrevious = page > 1;
-  const canGoNext = page < totalPages;
-
-  const handlePageChange = (newPage: number) => {
-    if (newPage >= 1 && newPage <= totalPages) {
-      setPage(newPage);
-    }
-  };
-  return (
-    <Flex justify="center" align="center" gap="2" mx="2">
-      <IconButton
-        isRound={true}
-        variant="text"
-        color={!canGoPrevious ? "gray" : "dark"}
-        mb="1"
-        icon={<FaChevronLeft />}
-        onClick={() => handlePageChange(page - 1)}
-        disabled={!canGoPrevious}
-        aria-label="Previous page"
-      />
-
-      {pageNumbers.map((pageNumber) => (
-        <Button
-          key={pageNumber}
-          variant="text"
-          color={page === pageNumber ? "gray" : "dark"}
-          onClick={() => handlePageChange(pageNumber)}
-          disabled={page === pageNumber}
-        >
-          {pageNumber}
-        </Button>
-      ))}
-
-      <IconButton
-        isRound={true}
-        variant="text"
-        color={!canGoNext ? "gray" : "dark"}
-        icon={<FaChevronRight />}
-        mb="1"
-        onClick={() => handlePageChange(page + 1)}
-        disabled={!canGoNext}
-        aria-label="Next page"
-      />
-    </Flex>
-  );
-}
--- a/www/app/(app)/layout.tsx
+++ b/www/app/(app)/layout.tsx
@@ -1,4 +1,4 @@
-import { Container, Flex, Link } from "@chakra-ui/layout";
+import { Container, Flex, Link } from "@chakra-ui/react";
 import { getConfig } from "../lib/edgeConfig";
 import NextLink from "next/link";
 import Image from "next/image";
@@ -61,12 +61,7 @@ export default async function AppLayout({
          {browse ? (
            <>
              &nbsp;·&nbsp;
-              <Link
-                href="/browse"
-                as={NextLink}
-                className="font-light px-2"
-                prefetch={false}
-              >
+              <Link href="/browse" as={NextLink} className="font-light px-2">
                Browse
              </Link>
            </>
@@ -76,12 +71,7 @@ export default async function AppLayout({
          {rooms ? (
            <>
              &nbsp;·&nbsp;
-              <Link
-                href="/rooms"
-                as={NextLink}
-                className="font-light px-2"
-                prefetch={false}
-              >
+              <Link href="/rooms" as={NextLink} className="font-light px-2">
                Rooms
              </Link>
            </>
--- a/www/app/(app)/rooms/_components/RoomActionsMenu.tsx
+++ b/www/app/(app)/rooms/_components/RoomActionsMenu.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { IconButton, Menu } from "@chakra-ui/react";
+import { LuMenu, LuPen, LuTrash } from "react-icons/lu";
+
+interface RoomActionsMenuProps {
+  roomId: string;
+  roomData: any;
+  onEdit: (roomId: string, roomData: any) => void;
+  onDelete: (roomId: string) => void;
+}
+
+export function RoomActionsMenu({
+  roomId,
+  roomData,
+  onEdit,
+  onDelete,
+}: RoomActionsMenuProps) {
+  return (
+    <Menu.Root closeOnSelect={true} lazyMount={true}>
+      <Menu.Trigger asChild>
+        <IconButton aria-label="actions" variant="ghost">
+          <LuMenu />
+        </IconButton>
+      </Menu.Trigger>
+      <Menu.Positioner>
+        <Menu.Content>
+          <Menu.Item value="edit" onClick={() => onEdit(roomId, roomData)}>
+            <LuPen /> Edit
+          </Menu.Item>
+          <Menu.Item value="delete" onClick={() => onDelete(roomId)}>
+            <LuTrash /> Delete
+          </Menu.Item>
+        </Menu.Content>
+      </Menu.Positioner>
+    </Menu.Root>
+  );
+}
--- a/www/app/(app)/rooms/_components/RoomCards.tsx
+++ b/www/app/(app)/rooms/_components/RoomCards.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import {
+  Box,
+  Card,
+  Flex,
+  Heading,
+  IconButton,
+  Link,
+  Spacer,
+  Text,
+  VStack,
+  HStack,
+} from "@chakra-ui/react";
+import { LuLink } from "react-icons/lu";
+import { Room } from "../../../api";
+import { RoomActionsMenu } from "./RoomActionsMenu";
+
+interface RoomCardsProps {
+  rooms: Room[];
+  linkCopied: string;
+  onCopyUrl: (roomName: string) => void;
+  onEdit: (roomId: string, roomData: any) => void;
+  onDelete: (roomId: string) => void;
+}
+
+const getRoomModeDisplay = (mode: string): string => {
+  switch (mode) {
+    case "normal":
+      return "2-4 people";
+    case "group":
+      return "2-200 people";
+    default:
+      return mode;
+  }
+};
+
+const getRecordingDisplay = (type: string, trigger: string): string => {
+  if (type === "none") return "-";
+  if (type === "local") return "Local";
+  if (type === "cloud") {
+    switch (trigger) {
+      case "none":
+        return "Cloud";
+      case "prompt":
+        return "Cloud (Prompt)";
+      case "automatic-2nd-participant":
+        return "Cloud (Auto)";
+      default:
+        return `Cloud`;
+    }
+  }
+  return type;
+};
+
+export function RoomCards({
+  rooms,
+  linkCopied,
+  onCopyUrl,
+  onEdit,
+  onDelete,
+}: RoomCardsProps) {
+  return (
+    <Box display={{ base: "block", lg: "none" }}>
+      <VStack gap={3} align="stretch">
+        {rooms.map((room) => (
+          <Card.Root key={room.id} size="sm">
+            <Card.Body>
+              <Flex alignItems="center" mt={-2}>
+                <Heading size="sm">
+                  <Link href={`/${room.name}`}>{room.name}</Link>
+                </Heading>
+                <Spacer />
+                {linkCopied === room.name ? (
+                  <Text color="green.500" mr={2} fontSize="sm">
+                    Copied!
+                  </Text>
+                ) : (
+                  <IconButton
+                    aria-label="Copy URL"
+                    onClick={() => onCopyUrl(room.name)}
+                    mr={2}
+                    size="sm"
+                    variant="ghost"
+                  >
+                    <LuLink />
+                  </IconButton>
+                )}
+                <RoomActionsMenu
+                  roomId={room.id}
+                  roomData={room}
+                  onEdit={onEdit}
+                  onDelete={onDelete}
+                />
+              </Flex>
+              <VStack align="start" fontSize="sm" gap={0}>
+                {room.zulip_auto_post && (
+                  <HStack gap={2}>
+                    <Text fontWeight="500">Zulip:</Text>
+                    <Text>
+                      {room.zulip_stream && room.zulip_topic
+                        ? `${room.zulip_stream} > ${room.zulip_topic}`
+                        : room.zulip_stream || "Enabled"}
+                    </Text>
+                  </HStack>
+                )}
+                <HStack gap={2}>
+                  <Text fontWeight="500">Size:</Text>
+                  <Text>{getRoomModeDisplay(room.room_mode)}</Text>
+                </HStack>
+                <HStack gap={2}>
+                  <Text fontWeight="500">Recording:</Text>
+                  <Text>
+                    {getRecordingDisplay(
+                      room.recording_type,
+                      room.recording_trigger,
+                    )}
+                  </Text>
+                </HStack>
+              </VStack>
+            </Card.Body>
+          </Card.Root>
+        ))}
+      </VStack>
+    </Box>
+  );
+}
--- a/www/app/(app)/rooms/_components/RoomList.tsx
+++ b/www/app/(app)/rooms/_components/RoomList.tsx
@@ -0,0 +1,57 @@
+import { Box, Heading, Text, VStack } from "@chakra-ui/react";
+import { Room } from "../../../api";
+import { RoomTable } from "./RoomTable";
+import { RoomCards } from "./RoomCards";
+
+interface RoomListProps {
+  title: string;
+  rooms: Room[];
+  linkCopied: string;
+  onCopyUrl: (roomName: string) => void;
+  onEdit: (roomId: string, roomData: any) => void;
+  onDelete: (roomId: string) => void;
+  emptyMessage?: string;
+  mb?: number | string;
+  pt?: number | string;
+  loading?: boolean;
+}
+
+export function RoomList({
+  title,
+  rooms,
+  linkCopied,
+  onCopyUrl,
+  onEdit,
+  onDelete,
+  emptyMessage = "No rooms found",
+  mb,
+  pt,
+  loading,
+}: RoomListProps) {
+  return (
+    <VStack alignItems="start" gap={4} mb={mb} pt={pt}>
+      <Heading size="md">{title}</Heading>
+      {rooms.length > 0 ? (
+        <Box w="full">
+          <RoomTable
+            rooms={rooms}
+            linkCopied={linkCopied}
+            onCopyUrl={onCopyUrl}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            loading={loading}
+          />
+          <RoomCards
+            rooms={rooms}
+            linkCopied={linkCopied}
+            onCopyUrl={onCopyUrl}
+            onEdit={onEdit}
+            onDelete={onDelete}
+          />
+        </Box>
+      ) : (
+        <Text>{emptyMessage}</Text>
+      )}
+    </VStack>
+  );
+}
--- a/www/app/(app)/rooms/_components/RoomTable.tsx
+++ b/www/app/(app)/rooms/_components/RoomTable.tsx
@@ -0,0 +1,164 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  Link,
+  Flex,
+  IconButton,
+  Text,
+  Spinner,
+} from "@chakra-ui/react";
+import { LuLink } from "react-icons/lu";
+import { Room } from "../../../api";
+import { RoomActionsMenu } from "./RoomActionsMenu";
+
+interface RoomTableProps {
+  rooms: Room[];
+  linkCopied: string;
+  onCopyUrl: (roomName: string) => void;
+  onEdit: (roomId: string, roomData: any) => void;
+  onDelete: (roomId: string) => void;
+  loading?: boolean;
+}
+
+const getRoomModeDisplay = (mode: string): string => {
+  switch (mode) {
+    case "normal":
+      return "2-4 people";
+    case "group":
+      return "2-200 people";
+    default:
+      return mode;
+  }
+};
+
+const getRecordingDisplay = (type: string, trigger: string): string => {
+  if (type === "none") return "-";
+  if (type === "local") return "Local";
+  if (type === "cloud") {
+    switch (trigger) {
+      case "none":
+        return "Cloud (None)";
+      case "prompt":
+        return "Cloud (Prompt)";
+      case "automatic-2nd-participant":
+        return "Cloud (Auto)";
+      default:
+        return `Cloud (${trigger})`;
+    }
+  }
+  return type;
+};
+
+const getZulipDisplay = (
+  autoPost: boolean,
+  stream: string,
+  topic: string,
+): string => {
+  if (!autoPost) return "-";
+  if (stream && topic) return `${stream} > ${topic}`;
+  if (stream) return stream;
+  return "Enabled";
+};
+
+export function RoomTable({
+  rooms,
+  linkCopied,
+  onCopyUrl,
+  onEdit,
+  onDelete,
+  loading,
+}: RoomTableProps) {
+  return (
+    <Box display={{ base: "none", lg: "block" }} position="relative">
+      {loading && (
+        <Flex
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          align="center"
+          justify="center"
+        >
+          <Spinner size="xl" color="gray.700" />
+        </Flex>
+      )}
+      <Box
+        opacity={loading ? 0.9 : 1}
+        pointerEvents={loading ? "none" : "auto"}
+        transition="opacity 0.2s ease-in-out"
+      >
+        <Table.Root>
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeader width="250px" fontWeight="600">
+                Room Name
+              </Table.ColumnHeader>
+              <Table.ColumnHeader width="250px" fontWeight="600">
+                Zulip
+              </Table.ColumnHeader>
+              <Table.ColumnHeader width="150px" fontWeight="600">
+                Room Size
+              </Table.ColumnHeader>
+              <Table.ColumnHeader width="200px" fontWeight="600">
+                Recording
+              </Table.ColumnHeader>
+              <Table.ColumnHeader
+                width="100px"
+                fontWeight="600"
+              ></Table.ColumnHeader>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {rooms.map((room) => (
+              <Table.Row key={room.id}>
+                <Table.Cell>
+                  <Link href={`/${room.name}`}>{room.name}</Link>
+                </Table.Cell>
+                <Table.Cell>
+                  {getZulipDisplay(
+                    room.zulip_auto_post,
+                    room.zulip_stream,
+                    room.zulip_topic,
+                  )}
+                </Table.Cell>
+                <Table.Cell>{getRoomModeDisplay(room.room_mode)}</Table.Cell>
+                <Table.Cell>
+                  {getRecordingDisplay(
+                    room.recording_type,
+                    room.recording_trigger,
+                  )}
+                </Table.Cell>
+                <Table.Cell>
+                  <Flex alignItems="center" gap={2}>
+                    {linkCopied === room.name ? (
+                      <Text color="green.500" fontSize="sm">
+                        Copied!
+                      </Text>
+                    ) : (
+                      <IconButton
+                        aria-label="Copy URL"
+                        onClick={() => onCopyUrl(room.name)}
+                        size="sm"
+                        variant="ghost"
+                      >
+                        <LuLink />
+                      </IconButton>
+                    )}
+                    <RoomActionsMenu
+                      roomId={room.id}
+                      roomData={room}
+                      onEdit={onEdit}
+                      onDelete={onDelete}
+                    />
+                  </Flex>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Box>
+    </Box>
+  );
+}
--- a/www/app/(app)/rooms/page.tsx
+++ b/www/app/(app)/rooms/page.tsx
@@ -2,61 +2,43 @@

 import {
  Button,
-  Card,
-  CardBody,
+  Checkbox,
+  CloseButton,
+  Dialog,
+  Field,
  Flex,
-  FormControl,
-  FormHelperText,
-  FormLabel,
  Heading,
  Input,
-  Link,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Spacer,
+  Select,
  Spinner,
+  createListCollection,
  useDisclosure,
-  VStack,
-  Text,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  IconButton,
-  Checkbox,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { Container } from "@chakra-ui/react";
-import { FaEllipsisVertical, FaTrash, FaPencil, FaLink } from "react-icons/fa6";
 import useApi from "../../lib/useApi";
 import useRoomList from "./useRoomList";
-import { Select, Options, OptionBase } from "chakra-react-select";
-import { ApiError } from "../../api";
+import { ApiError, Room } from "../../api";
+import { RoomList } from "./_components/RoomList";

-interface SelectOption extends OptionBase {
+interface SelectOption {
  label: string;
  value: string;
 }

 const RESERVED_PATHS = ["browse", "rooms", "transcripts"];

-const roomModeOptions: Options<SelectOption> = [
+const roomModeOptions: SelectOption[] = [
  { label: "2-4 people", value: "normal" },
  { label: "2-200 people", value: "group" },
 ];

-const recordingTriggerOptions: Options<SelectOption> = [
+const recordingTriggerOptions: SelectOption[] = [
  { label: "None", value: "none" },
  { label: "Prompt", value: "prompt" },
  { label: "Automatic", value: "automatic-2nd-participant" },
 ];

-const recordingTypeOptions: Options<SelectOption> = [
+const recordingTypeOptions: SelectOption[] = [
  { label: "None", value: "none" },
  { label: "Local", value: "local" },
  { label: "Cloud", value: "cloud" },
@@ -75,7 +57,20 @@ const roomInitialState = {
 };

 export default function RoomsList() {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { open, onOpen, onClose } = useDisclosure();
+
+  // Create collections for Select components
+  const roomModeCollection = createListCollection({
+    items: roomModeOptions,
+  });
+
+  const recordingTriggerCollection = createListCollection({
+    items: recordingTriggerOptions,
+  });
+
+  const recordingTypeCollection = createListCollection({
+    items: recordingTypeOptions,
+  });
  const [room, setRoom] = useState(roomInitialState);
  const [isEditing, setIsEditing] = useState(false);
  const [editRoomId, setEditRoomId] = useState("");
@@ -131,15 +126,23 @@ export default function RoomsList() {
    fetchZulipTopics();
  }, [room.zulipStream, streams, api]);

-  const streamOptions: Options<SelectOption> = streams.map((stream) => {
+  const streamOptions: SelectOption[] = streams.map((stream) => {
    return { label: stream.name, value: stream.name };
  });

-  const topicOptions: Options<SelectOption> = topics.map((topic) => ({
+  const topicOptions: SelectOption[] = topics.map((topic) => ({
    label: topic.name,
    value: topic.name,
  }));

+  const streamCollection = createListCollection({
+    items: streamOptions,
+  });
+
+  const topicCollection = createListCollection({
+    items: topicOptions,
+  });
+
  const handleCopyUrl = (roomName: string) => {
    const roomUrl = `${window.location.origin}/${roomName}`;
    navigator.clipboard.writeText(roomUrl);
@@ -245,312 +248,350 @@ export default function RoomsList() {
    });
  };

-  const myRooms =
+  const myRooms: Room[] =
    response?.items.filter((roomData) => !roomData.is_shared) || [];
-  const sharedRooms =
+  const sharedRooms: Room[] =
    response?.items.filter((roomData) => roomData.is_shared) || [];

  if (loading && !response)
    return (
-      <Flex flexDir="column" align="center" justify="center" h="100%">
+      <Flex
+        flexDir="column"
+        alignItems="center"
+        justifyContent="center"
+        h="100%"
+      >
        <Spinner size="xl" />
      </Flex>
    );

  return (
-    <>
-      <Container maxW={"container.lg"}>
-        <Flex
-          flexDir="row"
-          justify="flex-end"
-          align="center"
-          flexWrap={"wrap-reverse"}
-          mb={2}
+    <Flex
+      flexDir="column"
+      w={{ base: "full", md: "container.xl" }}
+      mx="auto"
+      pt={2}
+    >
+      <Flex
+        flexDir="row"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={4}
+      >
+        <Heading size="lg">Rooms {loading && <Spinner size="sm" />}</Heading>
+        <Button
+          colorPalette="primary"
+          onClick={() => {
+            setIsEditing(false);
+            setRoom(roomInitialState);
+            setNameError("");
+            onOpen();
+          }}
        >
-          <Heading>Rooms</Heading>
-          <Spacer />
-          <Button
-            colorScheme="blue"
-            onClick={() => {
-              setIsEditing(false);
-              setRoom(roomInitialState);
-              setNameError("");
-              onOpen();
-            }}
-          >
-            Add Room
-          </Button>
-          <Modal isOpen={isOpen} onClose={onClose}>
-            <ModalOverlay />
-            <ModalContent>
-              <ModalHeader>{isEditing ? "Edit Room" : "Add Room"}</ModalHeader>
-              <ModalCloseButton />
-              <ModalBody>
-                <FormControl>
-                  <FormLabel>Room name</FormLabel>
-                  <Input
-                    name="name"
-                    placeholder="room-name"
-                    value={room.name}
-                    onChange={handleRoomChange}
-                  />
-                  <FormHelperText>
-                    No spaces or special characters allowed
-                  </FormHelperText>
-                  {nameError && <Text color="red.500">{nameError}</Text>}
-                </FormControl>
+          Add Room
+        </Button>
+      </Flex>

-                <FormControl mt={4}>
-                  <Checkbox
-                    name="isLocked"
-                    isChecked={room.isLocked}
-                    onChange={handleRoomChange}
-                  >
-                    Locked room
-                  </Checkbox>
-                </FormControl>
-                <FormControl mt={4}>
-                  <FormLabel>Room size</FormLabel>
-                  <Select
-                    name="roomMode"
-                    options={roomModeOptions}
-                    value={{
-                      label: roomModeOptions.find(
-                        (rm) => rm.value === room.roomMode,
-                      )?.label,
-                      value: room.roomMode,
-                    }}
-                    onChange={(newValue) =>
-                      setRoom({
-                        ...room,
-                        roomMode: newValue!.value,
-                      })
-                    }
-                  />
-                </FormControl>
-                <FormControl mt={4}>
-                  <FormLabel>Recording type</FormLabel>
-                  <Select
-                    name="recordingType"
-                    options={recordingTypeOptions}
-                    value={{
-                      label: recordingTypeOptions.find(
-                        (rt) => rt.value === room.recordingType,
-                      )?.label,
-                      value: room.recordingType,
-                    }}
-                    onChange={(newValue) =>
-                      setRoom({
-                        ...room,
-                        recordingType: newValue!.value,
-                        recordingTrigger:
-                          newValue!.value !== "cloud"
-                            ? "none"
-                            : room.recordingTrigger,
-                      })
-                    }
-                  />
-                </FormControl>
-                <FormControl mt={4}>
-                  <FormLabel>Cloud recording start trigger</FormLabel>
-                  <Select
-                    name="recordingTrigger"
-                    options={recordingTriggerOptions}
-                    value={{
-                      label: recordingTriggerOptions.find(
-                        (rt) => rt.value === room.recordingTrigger,
-                      )?.label,
-                      value: room.recordingTrigger,
-                    }}
-                    onChange={(newValue) =>
-                      setRoom({
-                        ...room,
-                        recordingTrigger: newValue!.value,
-                      })
-                    }
-                    isDisabled={room.recordingType !== "cloud"}
-                  />
-                </FormControl>
-                <FormControl mt={8}>
-                  <Checkbox
-                    name="zulipAutoPost"
-                    isChecked={room.zulipAutoPost}
-                    onChange={handleRoomChange}
-                  >
-                    Automatically post transcription to Zulip
-                  </Checkbox>
-                </FormControl>
-                <FormControl mt={4}>
-                  <FormLabel>Zulip stream</FormLabel>
-                  <Select
-                    name="zulipStream"
-                    options={streamOptions}
-                    placeholder="Select stream"
-                    value={{ label: room.zulipStream, value: room.zulipStream }}
-                    onChange={(newValue) =>
-                      setRoom({
-                        ...room,
-                        zulipStream: newValue!.value,
-                        zulipTopic: "",
-                      })
-                    }
-                    isDisabled={!room.zulipAutoPost}
-                  />
-                </FormControl>
-                <FormControl mt={4}>
-                  <FormLabel>Zulip topic</FormLabel>
-                  <Select
-                    name="zulipTopic"
-                    options={topicOptions}
-                    placeholder="Select topic"
-                    value={{ label: room.zulipTopic, value: room.zulipTopic }}
-                    onChange={(newValue) =>
-                      setRoom({
-                        ...room,
-                        zulipTopic: newValue!.value,
-                      })
-                    }
-                    isDisabled={!room.zulipAutoPost}
-                  />
-                </FormControl>
-                <FormControl mt={4}>
-                  <Checkbox
-                    name="isShared"
-                    isChecked={room.isShared}
-                    onChange={handleRoomChange}
-                  >
-                    Shared room
-                  </Checkbox>
-                </FormControl>
-              </ModalBody>
+      <Dialog.Root
+        open={open}
+        onOpenChange={(e) => (e.open ? onOpen() : onClose())}
+        size="lg"
+      >
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>
+                {isEditing ? "Edit Room" : "Add Room"}
+              </Dialog.Title>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton />
+              </Dialog.CloseTrigger>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Field.Root>
+                <Field.Label>Room name</Field.Label>
+                <Input
+                  name="name"
+                  placeholder="room-name"
+                  value={room.name}
+                  onChange={handleRoomChange}
+                />
+                <Field.HelperText>
+                  No spaces or special characters allowed
+                </Field.HelperText>
+                {nameError && <Field.ErrorText>{nameError}</Field.ErrorText>}
+              </Field.Root>

-              <ModalFooter>
-                <Button variant="ghost" mr={3} onClick={onClose}>
-                  Cancel
-                </Button>
-
-                <Button
-                  colorScheme="blue"
-                  onClick={handleSaveRoom}
-                  isDisabled={
-                    !room.name || (room.zulipAutoPost && !room.zulipTopic)
-                  }
+              <Field.Root mt={4}>
+                <Checkbox.Root
+                  name="isLocked"
+                  checked={room.isLocked}
+                  onCheckedChange={(e) => {
+                    const syntheticEvent = {
+                      target: {
+                        name: "isLocked",
+                        type: "checkbox",
+                        checked: e.checked,
+                      },
+                    };
+                    handleRoomChange(syntheticEvent);
+                  }}
                >
-                  {isEditing ? "Save" : "Add"}
-                </Button>
-              </ModalFooter>
-            </ModalContent>
-          </Modal>
-        </Flex>
+                  <Checkbox.HiddenInput />
+                  <Checkbox.Control>
+                    <Checkbox.Indicator />
+                  </Checkbox.Control>
+                  <Checkbox.Label>Locked room</Checkbox.Label>
+                </Checkbox.Root>
+              </Field.Root>
+              <Field.Root mt={4}>
+                <Field.Label>Room size</Field.Label>
+                <Select.Root
+                  value={[room.roomMode]}
+                  onValueChange={(e) =>
+                    setRoom({ ...room, roomMode: e.value[0] })
+                  }
+                  collection={roomModeCollection}
+                >
+                  <Select.HiddenSelect />
+                  <Select.Control>
+                    <Select.Trigger>
+                      <Select.ValueText placeholder="Select room size" />
+                    </Select.Trigger>
+                    <Select.IndicatorGroup>
+                      <Select.Indicator />
+                    </Select.IndicatorGroup>
+                  </Select.Control>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {roomModeOptions.map((option) => (
+                        <Select.Item key={option.value} item={option}>
+                          {option.label}
+                          <Select.ItemIndicator />
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Select.Root>
+              </Field.Root>
+              <Field.Root mt={4}>
+                <Field.Label>Recording type</Field.Label>
+                <Select.Root
+                  value={[room.recordingType]}
+                  onValueChange={(e) =>
+                    setRoom({
+                      ...room,
+                      recordingType: e.value[0],
+                      recordingTrigger:
+                        e.value[0] !== "cloud" ? "none" : room.recordingTrigger,
+                    })
+                  }
+                  collection={recordingTypeCollection}
+                >
+                  <Select.HiddenSelect />
+                  <Select.Control>
+                    <Select.Trigger>
+                      <Select.ValueText placeholder="Select recording type" />
+                    </Select.Trigger>
+                    <Select.IndicatorGroup>
+                      <Select.Indicator />
+                    </Select.IndicatorGroup>
+                  </Select.Control>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {recordingTypeOptions.map((option) => (
+                        <Select.Item key={option.value} item={option}>
+                          {option.label}
+                          <Select.ItemIndicator />
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Select.Root>
+              </Field.Root>
+              <Field.Root mt={4}>
+                <Field.Label>Cloud recording start trigger</Field.Label>
+                <Select.Root
+                  value={[room.recordingTrigger]}
+                  onValueChange={(e) =>
+                    setRoom({ ...room, recordingTrigger: e.value[0] })
+                  }
+                  collection={recordingTriggerCollection}
+                  disabled={room.recordingType !== "cloud"}
+                >
+                  <Select.HiddenSelect />
+                  <Select.Control>
+                    <Select.Trigger>
+                      <Select.ValueText placeholder="Select trigger" />
+                    </Select.Trigger>
+                    <Select.IndicatorGroup>
+                      <Select.Indicator />
+                    </Select.IndicatorGroup>
+                  </Select.Control>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {recordingTriggerOptions.map((option) => (
+                        <Select.Item key={option.value} item={option}>
+                          {option.label}
+                          <Select.ItemIndicator />
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Select.Root>
+              </Field.Root>
+              <Field.Root mt={8}>
+                <Checkbox.Root
+                  name="zulipAutoPost"
+                  checked={room.zulipAutoPost}
+                  onCheckedChange={(e) => {
+                    const syntheticEvent = {
+                      target: {
+                        name: "zulipAutoPost",
+                        type: "checkbox",
+                        checked: e.checked,
+                      },
+                    };
+                    handleRoomChange(syntheticEvent);
+                  }}
+                >
+                  <Checkbox.HiddenInput />
+                  <Checkbox.Control>
+                    <Checkbox.Indicator />
+                  </Checkbox.Control>
+                  <Checkbox.Label>
+                    Automatically post transcription to Zulip
+                  </Checkbox.Label>
+                </Checkbox.Root>
+              </Field.Root>
+              <Field.Root mt={4}>
+                <Field.Label>Zulip stream</Field.Label>
+                <Select.Root
+                  value={room.zulipStream ? [room.zulipStream] : []}
+                  onValueChange={(e) =>
+                    setRoom({
+                      ...room,
+                      zulipStream: e.value[0],
+                      zulipTopic: "",
+                    })
+                  }
+                  collection={streamCollection}
+                  disabled={!room.zulipAutoPost}
+                >
+                  <Select.HiddenSelect />
+                  <Select.Control>
+                    <Select.Trigger>
+                      <Select.ValueText placeholder="Select stream" />
+                    </Select.Trigger>
+                    <Select.IndicatorGroup>
+                      <Select.Indicator />
+                    </Select.IndicatorGroup>
+                  </Select.Control>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {streamOptions.map((option) => (
+                        <Select.Item key={option.value} item={option}>
+                          {option.label}
+                          <Select.ItemIndicator />
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Select.Root>
+              </Field.Root>
+              <Field.Root mt={4}>
+                <Field.Label>Zulip topic</Field.Label>
+                <Select.Root
+                  value={room.zulipTopic ? [room.zulipTopic] : []}
+                  onValueChange={(e) =>
+                    setRoom({ ...room, zulipTopic: e.value[0] })
+                  }
+                  collection={topicCollection}
+                  disabled={!room.zulipAutoPost}
+                >
+                  <Select.HiddenSelect />
+                  <Select.Control>
+                    <Select.Trigger>
+                      <Select.ValueText placeholder="Select topic" />
+                    </Select.Trigger>
+                    <Select.IndicatorGroup>
+                      <Select.Indicator />
+                    </Select.IndicatorGroup>
+                  </Select.Control>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {topicOptions.map((option) => (
+                        <Select.Item key={option.value} item={option}>
+                          {option.label}
+                          <Select.ItemIndicator />
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Select.Root>
+              </Field.Root>
+              <Field.Root mt={4}>
+                <Checkbox.Root
+                  name="isShared"
+                  checked={room.isShared}
+                  onCheckedChange={(e) => {
+                    const syntheticEvent = {
+                      target: {
+                        name: "isShared",
+                        type: "checkbox",
+                        checked: e.checked,
+                      },
+                    };
+                    handleRoomChange(syntheticEvent);
+                  }}
+                >
+                  <Checkbox.HiddenInput />
+                  <Checkbox.Control>
+                    <Checkbox.Indicator />
+                  </Checkbox.Control>
+                  <Checkbox.Label>Shared room</Checkbox.Label>
+                </Checkbox.Root>
+              </Field.Root>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button variant="ghost" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                colorPalette="primary"
+                onClick={handleSaveRoom}
+                disabled={
+                  !room.name || (room.zulipAutoPost && !room.zulipTopic)
+                }
+              >
+                {isEditing ? "Save" : "Add"}
+              </Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>

-        <VStack align="start" mb={10} pt={4} gap={4}>
-          <Heading size="md">My Rooms</Heading>
-          {myRooms.length > 0 ? (
-            myRooms.map((roomData) => (
-              <Card w={"full"} key={roomData.id}>
-                <CardBody>
-                  <Flex align={"center"}>
-                    <Heading size="md">
-                      <Link href={`/${roomData.name}`}>{roomData.name}</Link>
-                    </Heading>
-                    <Spacer />
-                    {linkCopied === roomData.name ? (
-                      <Text mr={2} color="green.500">
-                        Link copied!
-                      </Text>
-                    ) : (
-                      <IconButton
-                        aria-label="Copy URL"
-                        icon={<FaLink />}
-                        onClick={() => handleCopyUrl(roomData.name)}
-                        mr={2}
-                      />
-                    )}
+      <RoomList
+        title="My Rooms"
+        rooms={myRooms}
+        linkCopied={linkCopied}
+        onCopyUrl={handleCopyUrl}
+        onEdit={handleEditRoom}
+        onDelete={handleDeleteRoom}
+        emptyMessage="No rooms found"
+      />

-                    <Menu closeOnSelect={true}>
-                      <MenuButton
-                        as={IconButton}
-                        icon={<FaEllipsisVertical />}
-                        aria-label="actions"
-                      />
-                      <MenuList>
-                        <MenuItem
-                          onClick={() => handleEditRoom(roomData.id, roomData)}
-                          icon={<FaPencil />}
-                        >
-                          Edit
-                        </MenuItem>
-                        <MenuItem
-                          onClick={() => handleDeleteRoom(roomData.id)}
-                          icon={<FaTrash color={"red.500"} />}
-                        >
-                          Delete
-                        </MenuItem>
-                      </MenuList>
-                    </Menu>
-                  </Flex>
-                </CardBody>
-              </Card>
-            ))
-          ) : (
-            <Text>No rooms found</Text>
-          )}
-        </VStack>
-
-        <VStack align="start" pt={4} gap={4}>
-          <Heading size="md">Shared Rooms</Heading>
-          {sharedRooms.length > 0 ? (
-            sharedRooms.map((roomData) => (
-              <Card w={"full"} key={roomData.id}>
-                <CardBody>
-                  <Flex align={"center"}>
-                    <Heading size="md">
-                      <Link href={`/${roomData.name}`}>{roomData.name}</Link>
-                    </Heading>
-                    <Spacer />
-                    {linkCopied === roomData.name ? (
-                      <Text mr={2} color="green.500">
-                        Link copied!
-                      </Text>
-                    ) : (
-                      <IconButton
-                        aria-label="Copy URL"
-                        icon={<FaLink />}
-                        onClick={() => handleCopyUrl(roomData.name)}
-                        mr={2}
-                      />
-                    )}
-
-                    <Menu closeOnSelect={true}>
-                      <MenuButton
-                        as={IconButton}
-                        icon={<FaEllipsisVertical />}
-                        aria-label="actions"
-                      />
-                      <MenuList>
-                        <MenuItem
-                          onClick={() => handleEditRoom(roomData.id, roomData)}
-                          icon={<FaPencil />}
-                        >
-                          Edit
-                        </MenuItem>
-                        <MenuItem
-                          onClick={() => handleDeleteRoom(roomData.id)}
-                          icon={<FaTrash color={"red.500"} />}
-                        >
-                          Delete
-                        </MenuItem>
-                      </MenuList>
-                    </Menu>
-                  </Flex>
-                </CardBody>
-              </Card>
-            ))
-          ) : (
-            <Text>No shared rooms found</Text>
-          )}
-        </VStack>
-      </Container>
-    </>
+      <RoomList
+        title="Shared Rooms"
+        rooms={sharedRooms}
+        linkCopied={linkCopied}
+        onCopyUrl={handleCopyUrl}
+        onEdit={handleEditRoom}
+        onDelete={handleDeleteRoom}
+        emptyMessage="No shared rooms found"
+        pt={4}
+      />
+    </Flex>
  );
 }
--- a/www/app/(app)/transcripts/[transcriptId]/_components/TopicItem.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/_components/TopicItem.tsx
@@ -0,0 +1,61 @@
+import { Box, Text, Accordion, Flex } from "@chakra-ui/react";
+import { formatTime } from "../../../../lib/time";
+import { Topic } from "../../webSocketTypes";
+import { TopicSegment } from "./TopicSegment";
+
+interface TopicItemProps {
+  topic: Topic;
+  isActive: boolean;
+  getSpeakerName: (speakerNumber: number) => string | undefined;
+}
+
+export function TopicItem({ topic, isActive, getSpeakerName }: TopicItemProps) {
+  return (
+    <Accordion.Item value={topic.id} id={`topic-${topic.id}`}>
+      <Accordion.ItemTrigger
+        background={isActive ? "gray.50" : "white"}
+        display="flex"
+        alignItems="start"
+        justifyContent="space-between"
+      >
+        <Flex
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="24px"
+          width="24px"
+        >
+          <Accordion.ItemIndicator />
+        </Flex>
+        <Box flex="1">{topic.title} </Box>
+        <Text as="span" color="gray.500" fontSize="xs" pr={1}>
+          {formatTime(topic.timestamp)}
+        </Text>
+      </Accordion.ItemTrigger>
+      <Accordion.ItemContent>
+        <Accordion.ItemBody p={4}>
+          {isActive && (
+            <>
+              {topic.segments ? (
+                <>
+                  {topic.segments.map((segment, index: number) => (
+                    <TopicSegment
+                      key={index}
+                      segment={segment}
+                      speakerName={
+                        getSpeakerName(segment.speaker) ||
+                        `Speaker ${segment.speaker}`
+                      }
+                    />
+                  ))}
+                </>
+              ) : (
+                <>{topic.transcript}</>
+              )}
+            </>
+          )}
+        </Accordion.ItemBody>
+      </Accordion.ItemContent>
+    </Accordion.Item>
+  );
+}
--- a/www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx
@@ -1,20 +1,10 @@
 import React, { useState, useEffect } from "react";
-import { formatTime } from "../../lib/time";
-import ScrollToBottom from "./scrollToBottom";
-import { Topic } from "./webSocketTypes";
-import { generateHighContrastColor } from "../../lib/utils";
-import useParticipants from "./useParticipants";
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Flex,
-  Text,
-} from "@chakra-ui/react";
-import { featureEnabled } from "../../domainContext";
+import ScrollToBottom from "../../scrollToBottom";
+import { Topic } from "../../webSocketTypes";
+import useParticipants from "../../useParticipants";
+import { Box, Flex, Text, Accordion } from "@chakra-ui/react";
+import { featureEnabled } from "../../../../domainContext";
+import { TopicItem } from "./TopicItem";

 type TopicListProps = {
  topics: Topic[];
@@ -41,9 +31,7 @@ export function TopicList({
  const participants = useParticipants(transcriptId);

  const scrollToTopic = () => {
-    const topicDiv = document.getElementById(
-      `accordion-button-topic-${activeTopic?.id}`,
-    );
+    const topicDiv = document.getElementById(`topic-${activeTopic?.id}`);

    setTimeout(() => {
      topicDiv?.scrollIntoView({
@@ -55,8 +43,8 @@ export function TopicList({
  };

  useEffect(() => {
-    if (activeTopic) scrollToTopic();
-  }, [activeTopic]);
+    if (activeTopic && autoscroll) scrollToTopic();
+  }, [activeTopic, autoscroll]);

  // scroll top is not rounded, heights are, so exact match won't work.
  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
@@ -105,8 +93,10 @@ export function TopicList({
  const requireLogin = featureEnabled("requireLogin");

  useEffect(() => {
-    setActiveTopic(topics[topics.length - 1]);
-  }, [topics]);
+    if (autoscroll) {
+      setActiveTopic(topics[topics.length - 1]);
+    }
+  }, [topics, autoscroll]);

  return (
    <Flex
@@ -131,88 +121,29 @@ export function TopicList({
        h={"100%"}
        onScroll={handleScroll}
        width="full"
-        padding={2}
      >
        {topics.length > 0 && (
-          <Accordion
-            index={topics.findIndex((topic) => topic.id == activeTopic?.id)}
-            variant="custom"
-            allowToggle
+          <Accordion.Root
+            multiple={false}
+            collapsible={true}
+            value={activeTopic ? [activeTopic.id] : []}
+            onValueChange={(details) => {
+              const selectedTopicId = details.value[0];
+              const selectedTopic = selectedTopicId
+                ? topics.find((t) => t.id === selectedTopicId)
+                : null;
+              setActiveTopic(selectedTopic || null);
+            }}
          >
-            {topics.map((topic, index) => (
-              <AccordionItem
-                key={index}
-                background={{
-                  base: "light",
-                  hover: "gray.100",
-                  focus: "gray.100",
-                }}
-                id={`topic-${topic.id}`}
-              >
-                <Flex dir="row" letterSpacing={".2"}>
-                  <AccordionButton
-                    onClick={() => {
-                      setActiveTopic(
-                        activeTopic?.id == topic.id ? null : topic,
-                      );
-                    }}
-                  >
-                    <AccordionIcon />
-                    <Box as="span" textAlign="left" ml="1">
-                      {topic.title}{" "}
-                      <Text
-                        as="span"
-                        color="gray.500"
-                        fontSize="sm"
-                        fontWeight="bold"
-                      >
-                        &nbsp;[{formatTime(topic.timestamp)}]&nbsp;-&nbsp;[
-                        {formatTime(topic.timestamp + (topic.duration || 0))}]
-                      </Text>
-                    </Box>
-                  </AccordionButton>
-                </Flex>
-                <AccordionPanel>
-                  {topic.segments ? (
-                    <>
-                      {topic.segments.map((segment, index: number) => (
-                        <Text
-                          key={index}
-                          className="text-left text-slate-500 text-sm md:text-base"
-                          pb={2}
-                          lineHeight={"1.3"}
-                        >
-                          <Text
-                            as="span"
-                            color={"gray.500"}
-                            fontFamily={"monospace"}
-                            fontSize={"sm"}
-                          >
-                            [{formatTime(segment.start)}]
-                          </Text>
-                          <Text
-                            as="span"
-                            fontWeight={"bold"}
-                            fontSize={"sm"}
-                            color={generateHighContrastColor(
-                              `Speaker ${segment.speaker}`,
-                              [96, 165, 250],
-                            )}
-                          >
-                            {" "}
-                            {getSpeakerName(segment.speaker)}:
-                          </Text>{" "}
-                          <span>{segment.text}</span>
-                        </Text>
-                      ))}
-                    </>
-                  ) : (
-                    <>{topic.transcript}</>
-                  )}
-                </AccordionPanel>
-              </AccordionItem>
+            {topics.map((topic) => (
+              <TopicItem
+                key={topic.id}
+                topic={topic}
+                isActive={activeTopic?.id === topic.id}
+                getSpeakerName={getSpeakerName}
+              />
            ))}
-          </Accordion>
+          </Accordion.Root>
        )}

        {status == "recording" && (
@@ -223,7 +154,7 @@ export function TopicList({
        {(status == "recording" || status == "idle") &&
          currentTranscriptText.length == 0 &&
          topics.length == 0 && (
-            <Box textAlign={"center"} textColor="gray">
+            <Box textAlign={"center"} color="gray">
              <Text>
                Full discussion transcript will appear here after you start
                recording.
@@ -234,7 +165,7 @@ export function TopicList({
            </Box>
          )}
        {status == "processing" && (
-          <Box textAlign={"center"} textColor="gray">
+          <Box textAlign={"center"} color="gray">
            <Text>We are processing the recording, please wait.</Text>
            {!requireLogin && (
              <span>
@@ -244,12 +175,12 @@ export function TopicList({
          </Box>
        )}
        {status == "ended" && topics.length == 0 && (
-          <Box textAlign={"center"} textColor="gray">
+          <Box textAlign={"center"} color="gray">
            <Text>Recording has ended without topics being found.</Text>
          </Box>
        )}
        {status == "error" && (
-          <Box textAlign={"center"} textColor="gray">
+          <Box textAlign={"center"} color="gray">
            <Text>There was an error processing your recording</Text>
          </Box>
        )}
--- a/www/app/(app)/transcripts/[transcriptId]/_components/TopicSegment.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/_components/TopicSegment.tsx
@@ -0,0 +1,39 @@
+import { Text } from "@chakra-ui/react";
+import { formatTime } from "../../../../lib/time";
+import { generateHighContrastColor } from "../../../../lib/utils";
+
+interface TopicSegmentProps {
+  segment: {
+    start: number;
+    speaker: number;
+    text: string;
+  };
+  speakerName: string;
+}
+
+export function TopicSegment({ segment, speakerName }: TopicSegmentProps) {
+  return (
+    <Text
+      className="text-left text-slate-500 text-sm md:text-base"
+      pb={2}
+      lineHeight="1.3"
+    >
+      <Text as="span" color="gray.500" fontFamily="monospace" fontSize="sm">
+        [{formatTime(segment.start)}]
+      </Text>
+      <Text
+        as="span"
+        fontWeight="bold"
+        fontSize="sm"
+        color={generateHighContrastColor(
+          `Speaker ${segment.speaker}`,
+          [96, 165, 250],
+        )}
+      >
+        {" "}
+        {speakerName}:
+      </Text>{" "}
+      <span>{segment.text}</span>
+    </Text>
+  );
+}
--- a/www/app/(app)/transcripts/[transcriptId]/_components/index.ts
+++ b/www/app/(app)/transcripts/[transcriptId]/_components/index.ts
@@ -0,0 +1,3 @@
+export { TopicList } from "./TopicList";
+export { TopicItem } from "./TopicItem";
+export { TopicSegment } from "./TopicSegment";
--- a/www/app/(app)/transcripts/[transcriptId]/correct/participantList.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/correct/participantList.tsx
@@ -11,11 +11,10 @@ import {
  Button,
  Flex,
  Text,
-  UnorderedList,
+  List,
  Input,
  Kbd,
  Spinner,
-  ListItem,
  Grid,
 } from "@chakra-ui/react";

@@ -351,7 +350,7 @@ const ParticipantList = ({
          />
          <Button
            onClick={doAction}
-            colorScheme="blue"
+            colorPalette="blue"
            disabled={!action || anyLoading}
          >
            {!anyLoading ? (
@@ -371,14 +370,14 @@ const ParticipantList = ({
        </Flex>

        {participants.response && (
-          <UnorderedList
+          <List.Root
            mx="0"
            mb={{ base: 2, md: 4 }}
            maxH="100%"
            overflow="scroll"
          >
            {participants.response.map((participant: Participant) => (
-              <ListItem
+              <List.Item
                onClick={selectParticipant(participant)}
                cursor="pointer"
                className={
@@ -410,7 +409,7 @@ const ParticipantList = ({
                    !loading && (
                      <Button
                        onClick={mergeSpeaker(selectedText, participant)}
-                        colorScheme="blue"
+                        colorPalette="blue"
                        ml="2"
                        size="sm"
                      >
@@ -435,7 +434,7 @@ const ParticipantList = ({
                  {selectedTextIsTimeSlice(selectedText) && !loading && (
                    <Button
                      onClick={assignTo(participant)}
-                      colorScheme="blue"
+                      colorPalette="blue"
                      ml="2"
                      size="sm"
                    >
@@ -460,16 +459,16 @@ const ParticipantList = ({

                  <Button
                    onClick={deleteParticipant(participant.id)}
-                    colorScheme="blue"
+                    colorPalette="blue"
                    ml="2"
                    size="sm"
                  >
                    Delete
                  </Button>
                </Box>
-              </ListItem>
+              </List.Item>
            ))}
-          </UnorderedList>
+          </List.Root>
        )}
      </Grid>
    </Box>
--- a/www/app/(app)/transcripts/[transcriptId]/correct/topicHeader.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/correct/topicHeader.tsx
@@ -11,7 +11,7 @@ import {
  SkeletonCircle,
  Flex,
 } from "@chakra-ui/react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { ChevronLeft, ChevronRight } from "lucide-react";

 type TopicHeader = {
  stateCurrentTopic: [
@@ -91,73 +91,62 @@ export default function TopicHeader({
      justifyContent="space-between"
      {...chakraProps}
    >
-      <SkeletonCircle
-        isLoaded={isLoaded}
-        h={isLoaded ? "auto" : "40px"}
-        w={isLoaded ? "auto" : "40px"}
-        mb="2"
-        fadeDuration={1}
-      >
+      {isLoaded ? (
        <Circle
          as="button"
-          onClick={onPrev}
-          disabled={!canGoPrevious}
+          onClick={canGoPrevious ? onPrev : undefined}
          size="40px"
          border="1px"
          color={canGoPrevious ? "inherit" : "gray"}
          borderColor={canGoNext ? "body-text" : "gray"}
+          cursor={canGoPrevious ? "pointer" : "not-allowed"}
+          opacity={canGoPrevious ? 1 : 0.5}
        >
          {canGoPrevious ? (
            <Kbd>
-              <ChevronLeftIcon />
+              <ChevronLeft size={16} />
            </Kbd>
          ) : (
-            <ChevronLeftIcon />
+            <ChevronLeft size={16} />
          )}
        </Circle>
-      </SkeletonCircle>
-      <Skeleton
-        isLoaded={isLoaded}
-        h={isLoaded ? "auto" : "40px"}
-        mb="2"
-        fadeDuration={1}
-        flexGrow={1}
-        mx={6}
-      >
-        <Flex wrap="nowrap" justifyContent="center">
-          <Heading size="lg" textAlign="center" noOfLines={1}>
+      ) : (
+        <SkeletonCircle h="40px" w="40px" mb="2" />
+      )}
+      {isLoaded ? (
+        <Flex wrap="nowrap" justifyContent="center" flexGrow={1} mx={6}>
+          <Heading size="lg" textAlign="center" lineClamp={1}>
            {currentTopic?.title}{" "}
          </Heading>
          <Heading size="lg" ml="3">
            {(number || 0) + 1}/{total}
          </Heading>
        </Flex>
-      </Skeleton>
-      <SkeletonCircle
-        isLoaded={isLoaded}
-        h={isLoaded ? "auto" : "40px"}
-        w={isLoaded ? "auto" : "40px"}
-        mb="2"
-        fadeDuration={1}
-      >
+      ) : (
+        <Skeleton h="40px" mb="2" flexGrow={1} mx={6} />
+      )}
+      {isLoaded ? (
        <Circle
          as="button"
-          onClick={onNext}
-          disabled={!canGoNext}
+          onClick={canGoNext ? onNext : undefined}
          size="40px"
          border="1px"
          color={canGoNext ? "inherit" : "gray"}
          borderColor={canGoNext ? "body-text" : "gray"}
+          cursor={canGoNext ? "pointer" : "not-allowed"}
+          opacity={canGoNext ? 1 : 0.5}
        >
          {canGoNext ? (
            <Kbd>
-              <ChevronRightIcon />
+              <ChevronRight size={16} />
            </Kbd>
          ) : (
-            <ChevronRightIcon />
+            <ChevronRight size={16} />
          )}
        </Circle>
-      </SkeletonCircle>
+      ) : (
+        <SkeletonCircle h="40px" w="40px" mb="2" />
+      )}
    </Box>
  );
 }
--- a/www/app/(app)/transcripts/[transcriptId]/correct/topicPlayer.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/correct/topicPlayer.tsx
@@ -199,61 +199,54 @@ const TopicPlayer = ({
      </Text>
    );
  }
-  return (
-    <Skeleton
-      isLoaded={isLoaded}
-      h={isLoaded ? "auto" : "40px"}
-      fadeDuration={1}
-      w={isLoaded ? "auto" : "container.md"}
-      margin="auto"
-      {...chakraProps}
-    >
-      <Wrap spacing="4" justify="center" align="center">
-        <WrapItem>
-          <SoundWaveCss playing={isPlaying} />
-          <Text fontSize="sm" pt="1" pl="2">
-            {showTime}
-          </Text>
-        </WrapItem>
-        <WrapItem>
-          <Button onClick={playTopic} colorScheme="blue">
-            Play from start
-          </Button>
-        </WrapItem>
-        <WrapItem>
-          {!isPlaying ? (
-            <Button
-              onClick={playCurrent}
-              ref={playButton}
-              id="playButton"
-              colorScheme="blue"
-              w="120px"
-            >
-              <Kbd color="blue.600">Space</Kbd>&nbsp;Play
-            </Button>
-          ) : (
-            <Button
-              onClick={pause}
-              ref={playButton}
-              id="playButton"
-              colorScheme="blue"
-              w="120px"
-            >
-              <Kbd color="blue.600">Space</Kbd>&nbsp;Pause
-            </Button>
-          )}
-        </WrapItem>
-        <WrapItem visibility={selectedTime ? "visible" : "hidden"}>
+  return isLoaded ? (
+    <Wrap gap="4" justify="center" align="center">
+      <WrapItem>
+        <SoundWaveCss playing={isPlaying} />
+        <Text fontSize="sm" pt="1" pl="2">
+          {showTime}
+        </Text>
+      </WrapItem>
+      <WrapItem>
+        <Button onClick={playTopic} colorPalette="blue">
+          Play from start
+        </Button>
+      </WrapItem>
+      <WrapItem>
+        {!isPlaying ? (
          <Button
-            disabled={!selectedTime}
-            onClick={playSelection}
-            colorScheme="blue"
+            onClick={playCurrent}
+            ref={playButton}
+            id="playButton"
+            colorPalette="blue"
+            w="120px"
          >
-            <Kbd color="blue.600">,</Kbd>&nbsp;Play selection
+            <Kbd color="blue.600">Space</Kbd>&nbsp;Play
          </Button>
-        </WrapItem>
-      </Wrap>
-    </Skeleton>
+        ) : (
+          <Button
+            onClick={pause}
+            ref={playButton}
+            id="playButton"
+            colorPalette="blue"
+            w="120px"
+          >
+            <Kbd color="blue.600">Space</Kbd>&nbsp;Pause
+          </Button>
+        )}
+      </WrapItem>
+      <WrapItem visibility={selectedTime ? "visible" : "hidden"}>
+        <Button
+          disabled={!selectedTime}
+          onClick={playSelection}
+          colorPalette="blue"
+        >
+          <Kbd color="blue.600">,</Kbd>&nbsp;Play selection
+        </Button>
+      </WrapItem>
+    </Wrap>
+  ) : (
+    <Skeleton h="40px" w="container.md" margin="auto" {...chakraProps} />
  );
 };

--- a/www/app/(app)/transcripts/[transcriptId]/finalSummary.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/finalSummary.tsx
@@ -16,7 +16,7 @@ import {
  Textarea,
  Spacer,
 } from "@chakra-ui/react";
-import { FaPen } from "react-icons/fa";
+import { LuPen } from "react-icons/lu";
 import { useError } from "../../../(errors)/errorContext";
 import ShareAndPrivacy from "../shareAndPrivacy";

@@ -108,29 +108,26 @@ export default function FinalSummary(props: FinalSummaryProps) {
        right="0"
      >
        {isEditMode && (
-          <>
+          <Flex gap={2} align="center" w="full">
            <Heading size={{ base: "md" }}>Summary</Heading>
            <Spacer />
-            <Button
-              onClick={onDiscardClick}
-              colorScheme="gray"
-              variant={"text"}
-            >
-              Discard
+            <Button onClick={onDiscardClick} variant="ghost">
+              Cancel
            </Button>
-            <Button onClick={onSaveClick} colorScheme="blue">
-              Save
-            </Button>
-          </>
+            <Button onClick={onSaveClick}>Save</Button>
+          </Flex>
        )}
        {!isEditMode && (
          <>
            <Spacer />
            <IconButton
-              icon={<FaPen />}
              aria-label="Edit Summary"
              onClick={onEditClick}
-            />
+              size="sm"
+              variant="subtle"
+            >
+              <LuPen />
+            </IconButton>
            <ShareAndPrivacy
              finalSummaryRef={finalSummaryRef}
              transcriptResponse={props.transcriptResponse}
--- a/www/app/(app)/transcripts/[transcriptId]/page.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/page.tsx
@@ -4,15 +4,14 @@ import useTranscript from "../useTranscript";
 import useTopics from "../useTopics";
 import useWaveform from "../useWaveform";
 import useMp3 from "../useMp3";
-import { TopicList } from "../topicList";
+import { TopicList } from "./_components/TopicList";
 import { Topic } from "../webSocketTypes";
 import React, { useEffect, useState } from "react";
-import "../../../styles/button.css";
 import FinalSummary from "./finalSummary";
 import TranscriptTitle from "../transcriptTitle";
 import Player from "../player";
 import { useRouter } from "next/navigation";
-import { Flex, Grid, GridItem, Skeleton, Text } from "@chakra-ui/react";
+import { Box, Flex, Grid, GridItem, Skeleton, Text } from "@chakra-ui/react";

 type TranscriptDetails = {
  params: {
@@ -29,10 +28,13 @@ export default function TranscriptDetails(details: TranscriptDetails) {
  const transcriptStatus = transcript.response?.status;
  const waiting = statusToRedirect.includes(transcriptStatus || "");

-  const topics = useTopics(transcriptId);
-  const waveform = useWaveform(transcriptId, waiting);
-  const useActiveTopic = useState<Topic | null>(null);
  const mp3 = useMp3(transcriptId, waiting);
+  const topics = useTopics(transcriptId);
+  const waveform = useWaveform(
+    transcriptId,
+    waiting || mp3.loading || mp3.audioDeleted === true,
+  );
+  const useActiveTopic = useState<Topic | null>(null);

  useEffect(() => {
    if (waiting) {
@@ -76,23 +78,24 @@ export default function TranscriptDetails(details: TranscriptDetails) {
        mt={4}
        mb={4}
      >
-        {waveform.waveform &&
-        mp3.media &&
-        !mp3.audioDeleted &&
-        topics.topics ? (
-          <Player
-            topics={topics?.topics}
-            useActiveTopic={useActiveTopic}
-            waveform={waveform.waveform}
-            media={mp3.media}
-            mediaDuration={transcript.response.duration}
-          />
-        ) : waveform.error ? (
-          <div>error loading this recording</div>
-        ) : mp3.audioDeleted ? (
-          <div>Audio was deleted</div>
-        ) : (
-          <Skeleton h={14} />
+        {!mp3.audioDeleted && (
+          <>
+            {waveform.waveform && mp3.media && topics.topics ? (
+              <Player
+                topics={topics?.topics}
+                useActiveTopic={useActiveTopic}
+                waveform={waveform.waveform}
+                media={mp3.media}
+                mediaDuration={transcript.response.duration}
+              />
+            ) : !mp3.loading && (waveform.error || mp3.error) ? (
+              <Box p={4} bg="red.100" borderRadius="md">
+                <Text>Error loading this recording</Text>
+              </Box>
+            ) : (
+              <Skeleton h={14} />
+            )}
+          </>
        )}
        <Grid
          templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
@@ -100,7 +103,8 @@ export default function TranscriptDetails(details: TranscriptDetails) {
            base: "auto minmax(0, 1fr) minmax(0, 1fr)",
            md: "auto minmax(0, 1fr)",
          }}
-          gap={2}
+          gap={4}
+          gridRowGap={2}
          padding={4}
          paddingBottom={0}
          background="gray.bg"
@@ -108,19 +112,24 @@ export default function TranscriptDetails(details: TranscriptDetails) {
          borderColor={"gray.bg"}
          borderRadius={8}
        >
-          <GridItem
-            display="flex"
-            flexDir="row"
-            alignItems={"center"}
-            colSpan={{ base: 1, md: 2 }}
-          >
-            <TranscriptTitle
-              title={transcript.response.title || "Unnamed Transcript"}
-              transcriptId={transcriptId}
-              onUpdate={(newTitle) => {
-                transcript.reload();
-              }}
-            />
+          <GridItem colSpan={{ base: 1, md: 2 }}>
+            <Flex direction="column" gap={0}>
+              <Flex alignItems="center" gap={2}>
+                <TranscriptTitle
+                  title={transcript.response.title || "Unnamed Transcript"}
+                  transcriptId={transcriptId}
+                  onUpdate={(newTitle) => {
+                    transcript.reload();
+                  }}
+                />
+              </Flex>
+              {mp3.audioDeleted && (
+                <Text fontSize="xs" color="gray.600" fontStyle="italic">
+                  No audio is available because one or more participants didn't
+                  consent to keep the audio
+                </Text>
+              )}
+            </Flex>
          </GridItem>
          <TopicList
            topics={topics.topics || []}
--- a/www/app/(app)/transcripts/[transcriptId]/record/page.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/record/page.tsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
 import Recorder from "../../recorder";
-import { TopicList } from "../../topicList";
+import { TopicList } from "../_components/TopicList";
 import useTranscript from "../../useTranscript";
 import { useWebSockets } from "../../useWebSockets";
-import "../../../../styles/button.css";
 import { Topic } from "../../webSocketTypes";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
 import { useRouter } from "next/navigation";
@@ -105,7 +104,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
          </Box>
          <Box w={{ md: "50%" }} h={{ base: "20%", md: "full" }}>
            {!transcriptStarted ? (
-              <Box textAlign={"center"} textColor="gray">
+              <Box textAlign={"center"} color="gray">
                <Text>
                  Live transcript will appear here shortly after you'll start
                  recording.
--- a/www/app/(app)/transcripts/[transcriptId]/shareModal.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/shareModal.tsx
@@ -1,179 +0,0 @@
-import React, { useContext, useState, useEffect } from "react";
-import SelectSearch from "react-select-search";
-import { GetTranscript, GetTranscriptTopic } from "../../../api";
-import "react-select-search/style.css";
-import { DomainContext } from "../../../domainContext";
-import useApi from "../../../lib/useApi";
-
-type ShareModalProps = {
-  show: boolean;
-  setShow: (show: boolean) => void;
-  transcript: GetTranscript | null;
-  topics: GetTranscriptTopic[] | null;
-};
-
-interface Stream {
-  stream_id: number;
-  name: string;
-}
-
-interface Topic {
-  name: string;
-}
-
-interface SelectSearchOption {
-  name: string;
-  value: string;
-}
-
-const ShareModal = (props: ShareModalProps) => {
-  const [stream, setStream] = useState<string | undefined>(undefined);
-  const [topic, setTopic] = useState<string | undefined>(undefined);
-  const [includeTopics, setIncludeTopics] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [streams, setStreams] = useState<Stream[]>([]);
-  const [topics, setTopics] = useState<Topic[]>([]);
-  const api = useApi();
-
-  useEffect(() => {
-    const fetchZulipStreams = async () => {
-      if (!api) return;
-
-      try {
-        const response = await api.v1ZulipGetStreams();
-        setStreams(response);
-        setIsLoading(false);
-      } catch (error) {
-        console.error("Error fetching Zulip streams:", error);
-      }
-    };
-
-    fetchZulipStreams();
-  }, [!api]);
-
-  useEffect(() => {
-    const fetchZulipTopics = async () => {
-      if (!api || !stream) return;
-      try {
-        const selectedStream = streams.find((s) => s.name === stream);
-        if (selectedStream) {
-          const response = await api.v1ZulipGetTopics({
-            streamId: selectedStream.stream_id,
-          });
-          setTopics(response);
-        }
-      } catch (error) {
-        console.error("Error fetching Zulip topics:", error);
-      }
-    };
-
-    fetchZulipTopics();
-  }, [stream, streams, api]);
-
-  const handleSendToZulip = async () => {
-    if (!api || !props.transcript) return;
-
-    if (stream && topic) {
-      try {
-        await api.v1TranscriptPostToZulip({
-          transcriptId: props.transcript.id,
-          stream,
-          topic,
-          includeTopics,
-        });
-      } catch (error) {
-        console.log(error);
-      }
-    }
-  };
-
-  if (props.show && isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  const streamOptions: SelectSearchOption[] = streams.map((stream) => ({
-    name: stream.name,
-    value: stream.name,
-  }));
-
-  const topicOptions: SelectSearchOption[] = topics.map((topic) => ({
-    name: topic.name,
-    value: topic.name,
-  }));
-
-  return (
-    <div className="absolute">
-      {props.show && (
-        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
-          <div className="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white">
-            <div className="mt-3 text-center">
-              <h3 className="font-bold text-xl">Send to Zulip</h3>
-
-              {/* Checkbox for 'Include Topics' */}
-              <div className="mt-4 text-left ml-5">
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    className="form-checkbox rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-                    checked={includeTopics}
-                    onChange={(e) => setIncludeTopics(e.target.checked)}
-                  />
-                  <span className="ml-2">Include topics</span>
-                </label>
-              </div>
-
-              <div className="flex items-center mt-4">
-                <span className="mr-2">#</span>
-                <SelectSearch
-                  search={true}
-                  options={streamOptions}
-                  value={stream}
-                  onChange={(val) => {
-                    setTopic(undefined); // Reset topic when stream changes
-                    setStream(val.toString());
-                  }}
-                  placeholder="Pick a stream"
-                />
-              </div>
-
-              {stream && (
-                <div className="flex items-center mt-4">
-                  <span className="mr-2 invisible">#</span>
-                  <SelectSearch
-                    search={true}
-                    options={topicOptions}
-                    value={topic}
-                    onChange={(val) => setTopic(val.toString())}
-                    placeholder="Pick a topic"
-                  />
-                </div>
-              )}
-
-              <button
-                className={`bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded py-2 px-4 mr-3 ${
-                  !stream || !topic ? "opacity-50 cursor-not-allowed" : ""
-                }`}
-                disabled={!stream || !topic}
-                onClick={() => {
-                  handleSendToZulip();
-                  props.setShow(false);
-                }}
-              >
-                Send to Zulip
-              </button>
-
-              <button
-                className="bg-red-500 hover:bg-red-700 focus-visible:bg-red-700 text-white rounded py-2 px-4 mt-4"
-                onClick={() => props.setShow(false)}
-              >
-                Close
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ShareModal;
--- a/www/app/(app)/transcripts/[transcriptId]/upload/page.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/upload/page.tsx
@@ -2,7 +2,6 @@
 import { useEffect, useState } from "react";
 import useTranscript from "../../useTranscript";
 import { useWebSockets } from "../../useWebSockets";
-import "../../../../styles/button.css";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
 import { useRouter } from "next/navigation";
 import useMp3 from "../../useMp3";
@@ -62,18 +61,14 @@ const TranscriptUpload = (details: TranscriptUpload) => {
    <>
      <VStack
        align={"left"}
-        w="full"
        h="full"
-        mb={4}
-        background="gray.bg"
-        border={"2px solid"}
-        borderColor={"gray.bg"}
-        borderRadius={8}
-        p="4"
+        pt={4}
+        mx="auto"
+        w={{ base: "full", md: "container.xl" }}
      >
        <Heading size={"lg"}>Upload meeting</Heading>
        <Center h={"full"} w="full">
-          <VStack spacing={10}>
+          <VStack gap={10} bg="gray.100" p={10} borderRadius="md" maxW="500px">
            {status && status == "idle" && (
              <>
                <Text>
@@ -94,7 +89,6 @@ const TranscriptUpload = (details: TranscriptUpload) => {
                  processed.
                </Text>
                <Button
-                  colorScheme="blue"
                  onClick={() => {
                    router.push("/browse");
                  }}
--- a/www/app/(app)/transcripts/fileUploadButton.tsx
+++ b/www/app/(app)/transcripts/fileUploadButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import useApi from "../../lib/useApi";
-import { Button, CircularProgress } from "@chakra-ui/react";
+import { Button, Spinner } from "@chakra-ui/react";

 type FileUploadButton = {
  transcriptId: string;
@@ -63,16 +63,11 @@ export default function FileUploadButton(props: FileUploadButton) {

  return (
    <>
-      <Button
-        onClick={triggerFileUpload}
-        colorScheme="blue"
-        mr={2}
-        isDisabled={progress > 0}
-      >
+      <Button onClick={triggerFileUpload} mr={2} disabled={progress > 0}>
        {progress > 0 && progress < 100 ? (
          <>
            Uploading...&nbsp;
-            <CircularProgress size="20px" value={progress} />
+            <Spinner size="sm" />
          </>
        ) : (
          <>Select File</>
--- a/www/app/(app)/transcripts/new/page.tsx
+++ b/www/app/(app)/transcripts/new/page.tsx
@@ -2,7 +2,6 @@
 import React, { useEffect, useState } from "react";
 import useAudioDevice from "../useAudioDevice";
 import "react-select-search/style.css";
-import "../../../styles/button.css";
 import "../../../styles/form.scss";
 import About from "../../../(aboutAndPrivacy)/about";
 import Privacy from "../../../(aboutAndPrivacy)/privacy";
@@ -30,15 +29,6 @@ import {
  IconButton,
  Spacer,
  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  AlertDialog,
-  AlertDialogOverlay,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogBody,
-  AlertDialogFooter,
  Tooltip,
  Input,
 } from "@chakra-ui/react";
@@ -107,18 +97,18 @@ const TranscriptCreate = () => {
    >
      <Flex
        flexDir={{ base: "column", md: "row" }}
-        justify="space-between"
-        align="center"
+        justifyContent="space-between"
+        alignItems="center"
        gap={8}
      >
        <Flex
          flexDir="column"
          h="full"
-          justify="evenly"
+          justifyContent="evenly"
          flexBasis="1"
          flexGrow={1}
        >
-          <Heading size="lg" textAlign={{ base: "center", md: "left" }}>
+          <Heading size="2xl" textAlign={{ base: "center", md: "left" }}>
            Welcome to Reflector
          </Heading>
          <Text mt={6}>
@@ -143,9 +133,7 @@ const TranscriptCreate = () => {
            {isLoading ? (
              <Spinner />
            ) : requireLogin && !isAuthenticated ? (
-              <Button onClick={() => signIn("authentik")} colorScheme="blue">
-                Log in
-              </Button>
+              <Button onClick={() => signIn("authentik")}>Log in</Button>
            ) : (
              <Flex
                rounded="xl"
@@ -156,7 +144,7 @@ const TranscriptCreate = () => {
                flexDir="column"
                my={4}
              >
-                <Heading size="md" mb={4}>
+                <Heading size="xl" mb={4}>
                  Try Reflector
                </Heading>
                <Box mb={4}>
@@ -191,7 +179,7 @@ const TranscriptCreate = () => {
                    </Text>
                  ) : (
                    <Button
-                      colorScheme="whiteAlpha"
+                      colorPalette="whiteAlpha"
                      onClick={requestPermission}
                      disabled={permissionDenied}
                    >
@@ -202,20 +190,20 @@ const TranscriptCreate = () => {
                  <Text className="">Checking permissions...</Text>
                )}
                <Button
-                  colorScheme="whiteAlpha"
+                  colorPalette="whiteAlpha"
                  onClick={send}
-                  isDisabled={!permissionOk || loadingRecord || loadingUpload}
+                  disabled={!permissionOk || loadingRecord || loadingUpload}
                  mt={2}
                >
                  {loadingRecord ? "Loading..." : "Record Meeting"}
                </Button>
-                <Text align="center" m="2">
+                <Text textAlign="center" m="2">
                  OR
                </Text>
                <Button
-                  colorScheme="whiteAlpha"
+                  colorPalette="whiteAlpha"
                  onClick={uploadFile}
-                  isDisabled={loadingRecord || loadingUpload}
+                  disabled={loadingRecord || loadingUpload}
                >
                  {loadingUpload ? "Loading..." : "Upload File"}
                </Button>
--- a/www/app/(app)/transcripts/player.tsx
+++ b/www/app/(app)/transcripts/player.tsx
@@ -8,8 +8,7 @@ import { Topic } from "./webSocketTypes";
 import { AudioWaveform } from "../../api";
 import { waveSurferStyles } from "../../styles/recorder";
 import { Box, Flex, IconButton } from "@chakra-ui/react";
-import PlayIcon from "../../styles/icons/play";
-import PauseIcon from "../../styles/icons/pause";
+import { LuPause, LuPlay } from "react-icons/lu";

 type PlayerProps = {
  topics: Topic[];
@@ -167,13 +166,15 @@ export default function Player(props: PlayerProps) {
    <Flex className="flex items-center w-full relative">
      <IconButton
        aria-label={isPlaying ? "Pause" : "Play"}
-        icon={isPlaying ? <PauseIcon /> : <PlayIcon />}
        variant={"ghost"}
-        colorScheme={"blue"}
+        colorPalette={"blue"}
        mr={2}
        id="play-btn"
        onClick={handlePlayClick}
-      />
+        size="sm"
+      >
+        {isPlaying ? <LuPause /> : <LuPlay />}
+      </IconButton>

      <Box position="relative" flex={1}>
        <Box ref={waveformRef} height={14}></Box>
--- a/www/app/(app)/transcripts/recorder.tsx
+++ b/www/app/(app)/transcripts/recorder.tsx
@@ -9,20 +9,8 @@ import { useError } from "../../(errors)/errorContext";
 import FileUploadButton from "./fileUploadButton";
 import useWebRTC from "./useWebRTC";
 import useAudioDevice from "./useAudioDevice";
-import {
-  Box,
-  Flex,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItemOption,
-  MenuList,
-  MenuOptionGroup,
-} from "@chakra-ui/react";
-import StopRecordIcon from "../../styles/icons/stopRecord";
-import PlayIcon from "../../styles/icons/play";
-import { LuScreenShare } from "react-icons/lu";
-import { FaMicrophone } from "react-icons/fa";
+import { Box, Flex, IconButton, Menu, RadioGroup } from "@chakra-ui/react";
+import { LuScreenShare, LuMic, LuPlay, LuStopCircle } from "react-icons/lu";

 type RecorderProps = {
  transcriptId: string;
@@ -139,7 +127,7 @@ export default function Recorder(props: RecorderProps) {
    } else {
      clearInterval(timeInterval as number);
      setCurrentTime((prev) => {
-        setDuration(prev);
+        setDuration(prev / 1000);
        return 0;
      });
    }
@@ -260,48 +248,56 @@ export default function Recorder(props: RecorderProps) {
    <Flex className="flex items-center w-full relative">
      <IconButton
        aria-label={isRecording ? "Stop" : "Record"}
-        icon={isRecording ? <StopRecordIcon /> : <PlayIcon />}
        variant={"ghost"}
-        colorScheme={"blue"}
+        colorPalette={"blue"}
        mr={2}
        onClick={handleRecClick}
-      />
+      >
+        {isRecording ? <LuStopCircle /> : <LuPlay />}
+      </IconButton>
      {!isRecording && (window as any).chrome && (
        <IconButton
          aria-label={"Record Tab"}
-          icon={<LuScreenShare />}
          variant={"ghost"}
-          colorScheme={"blue"}
+          colorPalette={"blue"}
          disabled={isRecording}
          mr={2}
          onClick={handleRecordTabClick}
-        />
+          size="sm"
+        >
+          <LuScreenShare />
+        </IconButton>
      )}
      {audioDevices && audioDevices?.length > 0 && deviceId && !isRecording && (
-        <Menu>
-          <MenuButton
-            as={IconButton}
-            aria-label={"Switch microphone"}
-            icon={<FaMicrophone />}
-            variant={"ghost"}
-            disabled={isRecording}
-            colorScheme={"blue"}
-            mr={2}
-          />
-          <MenuList>
-            <MenuOptionGroup defaultValue={audioDevices[0].value} type="radio">
-              {audioDevices.map((device) => (
-                <MenuItemOption
-                  key={device.value}
-                  value={device.value}
-                  onClick={() => setDeviceId(device.value)}
-                >
-                  {device.label}
-                </MenuItemOption>
-              ))}
-            </MenuOptionGroup>
-          </MenuList>
-        </Menu>
+        <Menu.Root>
+          <Menu.Trigger asChild>
+            <IconButton
+              aria-label={"Switch microphone"}
+              variant={"ghost"}
+              disabled={isRecording}
+              colorPalette={"blue"}
+              mr={2}
+              size="sm"
+            >
+              <LuMic />
+            </IconButton>
+          </Menu.Trigger>
+          <Menu.Positioner>
+            <Menu.Content>
+              <Menu.RadioItemGroup
+                value={deviceId}
+                onValueChange={(e) => setDeviceId(e.value)}
+              >
+                {audioDevices.map((device) => (
+                  <Menu.RadioItem key={device.value} value={device.value}>
+                    <Menu.ItemIndicator />
+                    {device.label}
+                  </Menu.RadioItem>
+                ))}
+              </Menu.RadioItemGroup>
+            </Menu.Content>
+          </Menu.Positioner>
+        </Menu.Root>
      )}
      <Box position="relative" flex={1}>
        <Box ref={waveformRef} height={14}></Box>
--- a/www/app/(app)/transcripts/shareAndPrivacy.tsx
+++ b/www/app/(app)/transcripts/shareAndPrivacy.tsx
@@ -7,18 +7,17 @@ import {
  Box,
  Flex,
  IconButton,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
  Text,
+  Dialog,
+  Portal,
+  CloseButton,
+  Select,
+  createListCollection,
 } from "@chakra-ui/react";
-import { FaShare } from "react-icons/fa";
+import { LuShare2 } from "react-icons/lu";
 import useApi from "../../lib/useApi";
 import useSessionUser from "../../lib/useSessionUser";
 import { CustomSession } from "../../lib/types";
-import { Select } from "chakra-react-select";
 import ShareLink from "./shareLink";
 import ShareCopy from "./shareCopy";
 import ShareZulip from "./shareZulip";
@@ -31,31 +30,41 @@ type ShareAndPrivacyProps = {

 type ShareOption = { value: ShareMode; label: string };

-const shareOptions = [
+const shareOptionsData = [
  { label: "Private", value: toShareMode("private") },
  { label: "Secure", value: toShareMode("semi-private") },
  { label: "Public", value: toShareMode("public") },
 ];

+const shareOptions = createListCollection({
+  items: shareOptionsData,
+});
+
 export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
  const [showModal, setShowModal] = useState(false);
  const [isOwner, setIsOwner] = useState(false);
  const [shareMode, setShareMode] = useState<ShareOption>(
-    shareOptions.find(
+    shareOptionsData.find(
      (option) => option.value === props.transcriptResponse.share_mode,
-    ) || shareOptions[0],
+    ) || shareOptionsData[0],
  );
  const [shareLoading, setShareLoading] = useState(false);
  const requireLogin = featureEnabled("requireLogin");
  const api = useApi();

-  const updateShareMode = async (selectedShareMode: any) => {
+  const updateShareMode = async (selectedValue: string) => {
    if (!api)
      throw new Error("ShareLink's API should always be ready at this point");

+    const selectedOption = shareOptionsData.find(
+      (option) => option.value === selectedValue,
+    );
+
+    if (!selectedOption) return;
+
    setShareLoading(true);
    const requestBody: UpdateTranscript = {
-      share_mode: toShareMode(selectedShareMode.value),
+      share_mode: selectedValue as "public" | "semi-private" | "private",
    };

    const updatedTranscript = await api.v1TranscriptUpdate({
@@ -63,9 +72,9 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
      requestBody,
    });
    setShareMode(
-      shareOptions.find(
+      shareOptionsData.find(
        (option) => option.value === updatedTranscript.share_mode,
-      ) || shareOptions[0],
+      ) || shareOptionsData[0],
    );
    setShareLoading(false);
  };
@@ -79,72 +88,102 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
  return (
    <>
      <IconButton
-        icon={<FaShare />}
        onClick={() => setShowModal(true)}
        aria-label="Share"
-      />
-      <Modal
-        isOpen={!!showModal}
-        onClose={() => setShowModal(false)}
-        size={"xl"}
+        size="sm"
+        variant="subtle"
      >
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Share</ModalHeader>
-          <ModalBody>
-            {requireLogin && (
-              <Box mb={4}>
-                <Text size="sm" mb="2" fontWeight={"bold"}>
-                  Share mode
-                </Text>
-                <Text size="sm" mb="2">
-                  {shareMode.value === "private" &&
-                    "This transcript is private and can only be accessed by you."}
-                  {shareMode.value === "semi-private" &&
-                    "This transcript is secure. Only authenticated users can access it."}
-                  {shareMode.value === "public" &&
-                    "This transcript is public. Everyone can access it."}
-                </Text>
+        <LuShare2 />
+      </IconButton>
+      <Dialog.Root
+        open={showModal}
+        onOpenChange={(e) => setShowModal(e.open)}
+        size="lg"
+      >
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Share</Dialog.Title>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton />
+              </Dialog.CloseTrigger>
+            </Dialog.Header>
+            <Dialog.Body>
+              {requireLogin && (
+                <Box mb={4}>
+                  <Text mb="2" fontWeight={"bold"}>
+                    Share mode
+                  </Text>
+                  <Text mb="2">
+                    {shareMode.value === "private" &&
+                      "This transcript is private and can only be accessed by you."}
+                    {shareMode.value === "semi-private" &&
+                      "This transcript is secure. Only authenticated users can access it."}
+                    {shareMode.value === "public" &&
+                      "This transcript is public. Everyone can access it."}
+                  </Text>

-                {isOwner && api && (
-                  <Select
-                    options={
-                      [
-                        { value: "private", label: "Private" },
-                        { label: "Secure", value: "semi-private" },
-                        { label: "Public", value: "public" },
-                      ] as any
-                    }
-                    value={shareMode}
-                    onChange={updateShareMode}
-                    isLoading={shareLoading}
+                  {isOwner && api && (
+                    <Select.Root
+                      key={shareMode.value}
+                      value={[shareMode.value]}
+                      onValueChange={(e) => updateShareMode(e.value[0])}
+                      disabled={shareLoading}
+                      collection={shareOptions}
+                      lazyMount={true}
+                    >
+                      <Select.HiddenSelect />
+                      <Select.Control>
+                        <Select.Trigger>
+                          <Select.ValueText>{shareMode.label}</Select.ValueText>
+                        </Select.Trigger>
+                        <Select.IndicatorGroup>
+                          <Select.Indicator />
+                        </Select.IndicatorGroup>
+                      </Select.Control>
+                      <Select.Positioner>
+                        <Select.Content>
+                          {shareOptions.items.map((option) => (
+                            <Select.Item
+                              key={option.value}
+                              item={option}
+                              label={option.label}
+                            >
+                              {option.label}
+                              <Select.ItemIndicator />
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select.Positioner>
+                    </Select.Root>
+                  )}
+                </Box>
+              )}
+
+              <Text fontSize="sm" mb="2" fontWeight={"bold"}>
+                Share options
+              </Text>
+              <Flex gap={2} mb={2}>
+                {requireLogin && (
+                  <ShareZulip
+                    transcriptResponse={props.transcriptResponse}
+                    topicsResponse={props.topicsResponse}
+                    disabled={toShareMode(shareMode.value) === "private"}
                  />
                )}
-              </Box>
-            )}
-
-            <Text size="sm" mb="2" fontWeight={"bold"}>
-              Share options
-            </Text>
-            <Flex gap={2} mb={2}>
-              {requireLogin && (
-                <ShareZulip
+                <ShareCopy
+                  finalSummaryRef={props.finalSummaryRef}
                  transcriptResponse={props.transcriptResponse}
                  topicsResponse={props.topicsResponse}
-                  disabled={toShareMode(shareMode.value) === "private"}
                />
-              )}
-              <ShareCopy
-                finalSummaryRef={props.finalSummaryRef}
-                transcriptResponse={props.transcriptResponse}
-                topicsResponse={props.topicsResponse}
-              />
-            </Flex>
+              </Flex>

-            <ShareLink transcriptId={props.transcriptResponse.id} />
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+              <ShareLink transcriptId={props.transcriptResponse.id} />
+            </Dialog.Body>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
    </>
  );
 }
--- a/www/app/(app)/transcripts/shareCopy.tsx
+++ b/www/app/(app)/transcripts/shareCopy.tsx
@@ -46,15 +46,10 @@ export default function ShareCopy({

  return (
    <Box {...boxProps}>
-      <Button
-        onClick={onCopyTranscriptClick}
-        colorScheme="blue"
-        size={"sm"}
-        mr={2}
-      >
+      <Button onClick={onCopyTranscriptClick} mr={2} variant="subtle">
        {isCopiedTranscript ? "Copied!" : "Copy Transcript"}
      </Button>
-      <Button onClick={onCopySummaryClick} colorScheme="blue" size={"sm"}>
+      <Button onClick={onCopySummaryClick} variant="subtle">
        {isCopiedSummary ? "Copied!" : "Copy Summary"}
      </Button>
    </Box>
--- a/www/app/(app)/transcripts/shareLink.tsx
+++ b/www/app/(app)/transcripts/shareLink.tsx
@@ -63,7 +63,7 @@ const ShareLink = (props: ShareLinkProps) => {
          onChange={() => {}}
          mx="2"
        />
-        <Button onClick={handleCopyClick} colorScheme="blue">
+        <Button onClick={handleCopyClick}>
          {isCopied ? "Copied!" : "Copy"}
        </Button>
      </Flex>
--- a/www/app/(app)/transcripts/shareZulip.tsx
+++ b/www/app/(app)/transcripts/shareZulip.tsx
@@ -1,8 +1,23 @@
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { featureEnabled } from "../../domainContext";
-import ShareModal from "./[transcriptId]/shareModal";
 import { GetTranscript, GetTranscriptTopic } from "../../api";
-import { BoxProps, Button } from "@chakra-ui/react";
+import {
+  BoxProps,
+  Button,
+  Dialog,
+  CloseButton,
+  Text,
+  Box,
+  Flex,
+  Checkbox,
+  Combobox,
+  Spinner,
+  Portal,
+  useFilter,
+  useListCollection,
+} from "@chakra-ui/react";
+import { TbBrandZulip } from "react-icons/tb";
+import useApi from "../../lib/useApi";

 type ShareZulipProps = {
  transcriptResponse: GetTranscript;
@@ -10,27 +25,251 @@ type ShareZulipProps = {
  disabled: boolean;
 };

+interface Stream {
+  stream_id: number;
+  name: string;
+}
+
+interface Topic {
+  name: string;
+}
+
 export default function ShareZulip(props: ShareZulipProps & BoxProps) {
  const [showModal, setShowModal] = useState(false);
+  const [stream, setStream] = useState<string | undefined>(undefined);
+  const [topic, setTopic] = useState<string | undefined>(undefined);
+  const [includeTopics, setIncludeTopics] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [streams, setStreams] = useState<Stream[]>([]);
+  const [topics, setTopics] = useState<Topic[]>([]);
+  const api = useApi();
+  const { contains } = useFilter({ sensitivity: "base" });
+
+  const {
+    collection: streamItemsCollection,
+    filter: streamItemsFilter,
+    set: streamItemsSet,
+  } = useListCollection({
+    items: [],
+    filter: contains,
+  });
+
+  const {
+    collection: topicItemsCollection,
+    filter: topicItemsFilter,
+    set: topicItemsSet,
+  } = useListCollection({
+    items: [],
+    filter: contains,
+  });
+
+  useEffect(() => {
+    const fetchZulipStreams = async () => {
+      if (!api) return;
+
+      try {
+        const response = await api.v1ZulipGetStreams();
+        setStreams(response);
+
+        streamItemsSet(
+          response.map((stream) => ({
+            label: stream.name,
+            value: stream.name,
+          })),
+        );
+
+        setIsLoading(false);
+      } catch (error) {
+        console.error("Error fetching Zulip streams:", error);
+      }
+    };
+
+    fetchZulipStreams();
+  }, [!api]);
+
+  useEffect(() => {
+    const fetchZulipTopics = async () => {
+      if (!api || !stream) return;
+      try {
+        const selectedStream = streams.find((s) => s.name === stream);
+        if (selectedStream) {
+          const response = await api.v1ZulipGetTopics({
+            streamId: selectedStream.stream_id,
+          });
+          setTopics(response);
+          topicItemsSet(
+            response.map((topic) => ({
+              label: topic.name,
+              value: topic.name,
+            })),
+          );
+        } else {
+          topicItemsSet([]);
+        }
+      } catch (error) {
+        console.error("Error fetching Zulip topics:", error);
+      }
+    };
+
+    fetchZulipTopics();
+  }, [stream, streams, api]);
+
+  const handleSendToZulip = async () => {
+    if (!api || !props.transcriptResponse) return;
+
+    if (stream && topic) {
+      try {
+        await api.v1TranscriptPostToZulip({
+          transcriptId: props.transcriptResponse.id,
+          stream,
+          topic,
+          includeTopics,
+        });
+        setShowModal(false);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  };
+
  if (!featureEnabled("sendToZulip")) return null;

  return (
    <>
-      <Button
-        colorScheme="blue"
-        size={"sm"}
-        isDisabled={props.disabled}
-        onClick={() => setShowModal(true)}
-      >
-        ➡️ Send to Zulip
+      <Button disabled={props.disabled} onClick={() => setShowModal(true)}>
+        <TbBrandZulip /> Send to Zulip
      </Button>

-      <ShareModal
-        transcript={props.transcriptResponse}
-        topics={props.topicsResponse}
-        show={showModal}
-        setShow={(v) => setShowModal(v)}
-      />
+      <Dialog.Root
+        open={showModal}
+        onOpenChange={(e) => setShowModal(e.open)}
+        size="md"
+      >
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Send to Zulip</Dialog.Title>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton />
+              </Dialog.CloseTrigger>
+            </Dialog.Header>
+            <Dialog.Body>
+              {isLoading ? (
+                <Flex justify="center" py={8}>
+                  <Spinner />
+                </Flex>
+              ) : (
+                <>
+                  <Box mb={4}>
+                    <Checkbox.Root
+                      checked={includeTopics}
+                      onCheckedChange={(e) => setIncludeTopics(!!e.checked)}
+                    >
+                      <Checkbox.HiddenInput />
+                      <Checkbox.Control>
+                        <Checkbox.Indicator />
+                      </Checkbox.Control>
+                      <Checkbox.Label>Include topics</Checkbox.Label>
+                    </Checkbox.Root>
+                  </Box>
+
+                  <Box mb={4}>
+                    <Flex align="center" gap={2}>
+                      <Text>#</Text>
+                      <Combobox.Root
+                        collection={streamItemsCollection}
+                        value={stream ? [stream] : []}
+                        onValueChange={(e) => {
+                          setTopic(undefined);
+                          setStream(e.value[0]);
+                        }}
+                        onInputValueChange={(e) =>
+                          streamItemsFilter(e.inputValue)
+                        }
+                        openOnClick={true}
+                        positioning={{
+                          strategy: "fixed",
+                          hideWhenDetached: true,
+                        }}
+                      >
+                        <Combobox.Control>
+                          <Combobox.Input placeholder="Pick a stream" />
+                          <Combobox.IndicatorGroup>
+                            <Combobox.ClearTrigger />
+                            <Combobox.Trigger />
+                          </Combobox.IndicatorGroup>
+                        </Combobox.Control>
+                        <Combobox.Positioner>
+                          <Combobox.Content>
+                            <Combobox.Empty>No streams found</Combobox.Empty>
+                            {streamItemsCollection.items.map((item) => (
+                              <Combobox.Item key={item.value} item={item}>
+                                {item.label}
+                              </Combobox.Item>
+                            ))}
+                          </Combobox.Content>
+                        </Combobox.Positioner>
+                      </Combobox.Root>
+                    </Flex>
+                  </Box>
+
+                  {stream && (
+                    <Box mb={4}>
+                      <Flex align="center" gap={2}>
+                        <Text visibility="hidden">#</Text>
+                        <Combobox.Root
+                          collection={topicItemsCollection}
+                          value={topic ? [topic] : []}
+                          onValueChange={(e) => setTopic(e.value[0])}
+                          onInputValueChange={(e) =>
+                            topicItemsFilter(e.inputValue)
+                          }
+                          openOnClick
+                          selectionBehavior="replace"
+                          skipAnimationOnMount={true}
+                          closeOnSelect={true}
+                          positioning={{
+                            strategy: "fixed",
+                            hideWhenDetached: true,
+                          }}
+                        >
+                          <Combobox.Control>
+                            <Combobox.Input placeholder="Pick a topic" />
+                            <Combobox.IndicatorGroup>
+                              <Combobox.ClearTrigger />
+                              <Combobox.Trigger />
+                            </Combobox.IndicatorGroup>
+                          </Combobox.Control>
+                          <Combobox.Positioner>
+                            <Combobox.Content>
+                              <Combobox.Empty>No topics found</Combobox.Empty>
+                              {topicItemsCollection.items.map((item) => (
+                                <Combobox.Item key={item.value} item={item}>
+                                  {item.label}
+                                  <Combobox.ItemIndicator />
+                                </Combobox.Item>
+                              ))}
+                            </Combobox.Content>
+                          </Combobox.Positioner>
+                        </Combobox.Root>
+                      </Flex>
+                    </Box>
+                  )}
+                </>
+              )}
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button variant="ghost" onClick={() => setShowModal(false)}>
+                Close
+              </Button>
+              <Button disabled={!stream || !topic} onClick={handleSendToZulip}>
+                Send to Zulip
+              </Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
    </>
  );
 }
--- a/www/app/(app)/transcripts/transcriptTitle.tsx
+++ b/www/app/(app)/transcripts/transcriptTitle.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { UpdateTranscript } from "../../api";
 import useApi from "../../lib/useApi";
-import { Heading, IconButton, Input } from "@chakra-ui/react";
-import { FaPen } from "react-icons/fa";
+import { Heading, IconButton, Input, Flex, Spacer } from "@chakra-ui/react";
+import { LuPen } from "react-icons/lu";

 type TranscriptTitle = {
  title: string;
@@ -87,23 +87,26 @@ const TranscriptTitle = (props: TranscriptTitle) => {
          // className="text-2xl lg:text-4xl font-extrabold text-center mb-4 w-full border-none bg-transparent overflow-hidden h-[fit-content]"
        />
      ) : (
-        <>
+        <Flex alignItems="center">
          <Heading
-            // className="text-2xl lg:text-4xl font-extrabold text-center mb-4 cursor-pointer"
            onClick={handleTitleClick}
            cursor={"pointer"}
            size={"lg"}
-            noOfLines={1}
+            lineClamp={1}
+            pr={2}
          >
            {displayedTitle}
          </Heading>
+          <Spacer />
          <IconButton
-            icon={<FaPen />}
            aria-label="Edit Transcript Title"
            onClick={handleTitleClick}
-            fontSize={"15px"}
-          />
-        </>
+            size="sm"
+            variant="subtle"
+          >
+            <LuPen />
+          </IconButton>
+        </Flex>
      )}
    </>
  );
--- a/www/app/(app)/transcripts/useMp3.ts
+++ b/www/app/(app)/transcripts/useMp3.ts
@@ -54,62 +54,65 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
  useEffect(() => {
    if (!transcriptId || !api || later) return;

-    let deleted: boolean | null = null;
+    let stopped = false;
+    let audioElement: HTMLAudioElement | null = null;
+    let handleCanPlay: (() => void) | null = null;
+    let handleError: (() => void) | null = null;

    setTranscriptMetadataLoading(true);
-
-    const audioElement = document.createElement("audio");
-    audioElement.src = `${api_url}/v1/transcripts/${transcriptId}/audio/mp3`;
-    audioElement.crossOrigin = "anonymous";
-    audioElement.preload = "auto";
-
-    const handleCanPlay = () => {
-      if (deleted) {
-        console.error(
-          "Illegal state: audio supposed to be deleted, but was loaded",
-        );
-        return;
-      }
-      setAudioLoading(false);
-      setAudioLoadingError(null);
-    };
-
-    const handleError = () => {
-      setAudioLoading(false);
-      if (deleted) {
-        // we arrived here earlier, ignore
-        return;
-      }
-      setAudioLoadingError("Failed to load audio");
-    };
-
-    audioElement.addEventListener("canplay", handleCanPlay);
-    audioElement.addEventListener("error", handleError);
-
-    setMedia(audioElement);
-
    setAudioLoading(true);

-    let stopped = false;
-    // Fetch transcript info in parallel
+    // First fetch transcript info to check if audio is deleted
    api
      .v1TranscriptGet({ transcriptId })
      .then((transcript) => {
-        if (stopped) return;
-        deleted = transcript.audio_deleted || false;
+        if (stopped) {
+          return;
+        }
+
+        const deleted = transcript.audio_deleted || false;
        setAudioDeleted(deleted);
        setTranscriptMetadataLoadingError(null);
+
        if (deleted) {
+          // Audio is deleted, don't attempt to load it
          setMedia(null);
          setAudioLoadingError(null);
+          setAudioLoading(false);
+          return;
+        }
+
+        // Audio is not deleted, proceed to load it
+        audioElement = document.createElement("audio");
+        audioElement.src = `${api_url}/v1/transcripts/${transcriptId}/audio/mp3`;
+        audioElement.crossOrigin = "anonymous";
+        audioElement.preload = "auto";
+
+        handleCanPlay = () => {
+          if (stopped) return;
+          setAudioLoading(false);
+          setAudioLoadingError(null);
+        };
+
+        handleError = () => {
+          if (stopped) return;
+          setAudioLoading(false);
+          setAudioLoadingError("Failed to load audio");
+        };
+
+        audioElement.addEventListener("canplay", handleCanPlay);
+        audioElement.addEventListener("error", handleError);
+
+        if (!stopped) {
+          setMedia(audioElement);
        }
-        // if deleted, media will or already returned error
      })
      .catch((error) => {
        if (stopped) return;
        console.error("Failed to fetch transcript:", error);
        setAudioDeleted(null);
        setTranscriptMetadataLoadingError(error.message);
+        setAudioLoading(false);
      })
      .finally(() => {
        if (stopped) return;
@@ -118,10 +121,14 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {

    return () => {
      stopped = true;
-      audioElement.removeEventListener("canplay", handleCanPlay);
-      audioElement.removeEventListener("error", handleError);
+      if (audioElement) {
+        audioElement.src = "";
+        if (handleCanPlay)
+          audioElement.removeEventListener("canplay", handleCanPlay);
+        if (handleError) audioElement.removeEventListener("error", handleError);
+      }
    };
-  }, [transcriptId, !api, later, api_url]);
+  }, [transcriptId, api, later, api_url]);

  const getNow = () => {
    setLater(false);
--- a/www/app/(app)/transcripts/useTranscriptList.ts
+++ b/www/app/(app)/transcripts/useTranscriptList.ts
@@ -39,6 +39,7 @@ const useTranscriptList = (
        sourceKind,
        roomId,
        searchTerm,
+        size: 10,
      })
      .then((response) => {
        setResponse(response);
@@ -50,7 +51,7 @@ const useTranscriptList = (
        setError(err);
        setErrorState(err);
      });
-  }, [!api, page, refetchCount, roomId, searchTerm]);
+  }, [api, page, refetchCount, roomId, searchTerm, sourceKind]);

  return { response, loading, error, refetch };
 };
--- a/www/app/(app)/transcripts/useWaveform.ts
+++ b/www/app/(app)/transcripts/useWaveform.ts
@@ -10,16 +10,22 @@ type AudioWaveFormResponse = {
  error: Error | null;
 };

-const useWaveform = (id: string, waiting: boolean): AudioWaveFormResponse => {
+const useWaveform = (id: string, skip: boolean): AudioWaveFormResponse => {
  const [waveform, setWaveform] = useState<AudioWaveform | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
  const [error, setErrorState] = useState<Error | null>(null);
  const { setError } = useError();
  const api = useApi();

  useEffect(() => {
-    if (!id || !api || waiting) return;
+    if (!id || !api || skip) {
+      setLoading(false);
+      setErrorState(null);
+      setWaveform(null);
+      return;
+    }
    setLoading(true);
+    setErrorState(null);
    api
      .v1TranscriptGetAudioWaveform({ transcriptId: id })
      .then((result) => {
@@ -29,14 +35,9 @@ const useWaveform = (id: string, waiting: boolean): AudioWaveFormResponse => {
      })
      .catch((err) => {
        setErrorState(err);
-        const shouldShowHuman = shouldShowError(err);
-        if (shouldShowHuman) {
-          setError(err, "There was an error loading the waveform");
-        } else {
-          setError(err);
-        }
+        setLoading(false);
      });
-  }, [id, !api, waiting]);
+  }, [id, api, skip]);

  return { waveform, loading, error };
 };
--- a/www/app/(app)/transcripts/waveformLoading.tsx
+++ b/www/app/(app)/transcripts/waveformLoading.tsx
@@ -2,6 +2,6 @@ import { Center, Spinner } from "@chakra-ui/react";

 export default () => (
  <Center h={14}>
-    <Spinner speed="1s"></Spinner>
+    <Spinner />
  </Center>
 );
--- a/www/app/(auth)/userInfo.tsx
+++ b/www/app/(auth)/userInfo.tsx
@@ -7,7 +7,7 @@ export default function UserInfo() {
  const { isLoading, isAuthenticated } = useSessionStatus();

  return isLoading ? (
-    <Spinner size="xs" thickness="1px" className="mx-3" />
+    <Spinner size="xs" className="mx-3" />
  ) : !isAuthenticated ? (
    <Link
      href="/"
--- a/www/app/[roomName]/page.tsx
+++ b/www/app/[roomName]/page.tsx
@@ -15,9 +15,9 @@ import {
  VStack,
  HStack,
  Spinner,
-  useToast,
  Icon,
 } from "@chakra-ui/react";
+import { toaster } from "../components/ui/toaster";
 import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import { notFound } from "next/navigation";
@@ -80,7 +80,6 @@ const useConsentDialog = (
  // toast would open duplicates, even with using "id=" prop
  const [modalOpen, setModalOpen] = useState(false);
  const api = useApi();
-  const toast = useToast();

  const handleConsent = useCallback(
    async (meetingId: string, given: boolean) => {
@@ -109,24 +108,23 @@ const useConsentDialog = (

    setModalOpen(true);

-    const TOAST_NEVER_DISMISS_VALUE = null;
-    const toastId = toast({
-      position: "top",
-      duration: TOAST_NEVER_DISMISS_VALUE,
-      render: ({ onClose }) => {
+    const toastId = toaster.create({
+      placement: "top",
+      duration: null,
+      render: ({ dismiss }) => {
        const AcceptButton = () => {
          const buttonRef = useRef<HTMLButtonElement>(null);
          useConsentWherebyFocusManagement(buttonRef, wherebyRef);
          return (
            <Button
              ref={buttonRef}
-              colorScheme="blue"
+              colorPalette="primary"
              size="sm"
              onClick={() => {
                handleConsent(meetingId, true).then(() => {
                  /*signifies it's ok to now wait here.*/
                });
-                onClose();
+                dismiss();
              }}
            >
              Yes, store the audio
@@ -143,51 +141,58 @@ const useConsentDialog = (
            maxW="md"
            mx="auto"
          >
-            <VStack spacing={4} align="center">
+            <VStack gap={4} alignItems="center">
              <Text fontSize="md" textAlign="center" fontWeight="medium">
                Can we have your permission to store this meeting's audio
                recording on our servers?
              </Text>
-              <HStack spacing={4} justify="center">
-                <AcceptButton />
+              <HStack gap={4} justifyContent="center">
                <Button
-                  colorScheme="gray"
+                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    handleConsent(meetingId, false).then(() => {
                      /*signifies it's ok to now wait here.*/
                    });
-                    onClose();
+                    dismiss();
                  }}
                >
                  No, delete after transcription
                </Button>
+                <AcceptButton />
              </HStack>
            </VStack>
          </Box>
        );
      },
-      onCloseComplete: () => {
-        setModalOpen(false);
-      },
+    });
+
+    // Set modal state when toast is dismissed
+    toastId.then((id) => {
+      const checkToastStatus = setInterval(() => {
+        if (!toaster.isActive(id)) {
+          setModalOpen(false);
+          clearInterval(checkToastStatus);
+        }
+      }, 100);
    });

    // Handle escape key to close the toast
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
-        toast.close(toastId);
+        toastId.then((id) => toaster.dismiss(id));
      }
    };

    document.addEventListener("keydown", handleKeyDown);

    const cleanup = () => {
-      toast.close(toastId);
+      toastId.then((id) => toaster.dismiss(id));
      document.removeEventListener("keydown", handleKeyDown);
    };

    return cleanup;
-  }, [meetingId, toast, handleConsent, wherebyRef, modalOpen]);
+  }, [meetingId, handleConsent, wherebyRef, modalOpen]);

  return { showConsentModal, consentState, hasConsent, consentLoading };
 };
@@ -212,7 +217,7 @@ function ConsentDialogButton({
      top="56px"
      left="8px"
      zIndex={1000}
-      colorScheme="blue"
+      colorPalette="blue"
      size="sm"
      onClick={showConsentModal}
    >
@@ -294,13 +299,7 @@ export default function Room(details: RoomDetails) {
        bg="gray.50"
        p={4}
      >
-        <Spinner
-          thickness="4px"
-          speed="0.65s"
-          emptyColor="gray.200"
-          color="blue.500"
-          size="xl"
-        />
+        <Spinner color="blue.500" size="xl" />
      </Box>
    );
  }
--- a/www/app/components/ui/toaster.tsx
+++ b/www/app/components/ui/toaster.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
+import { createPortal } from "react-dom";
+import { Box } from "@chakra-ui/react";
+
+interface ToastOptions {
+  placement?: string;
+  duration?: number | null;
+  render: (props: { dismiss: () => void }) => React.ReactNode;
+}
+
+interface Toast extends ToastOptions {
+  id: string;
+}
+
+interface ToasterContextType {
+  toasts: Toast[];
+  addToast: (options: ToastOptions) => string;
+  removeToast: (id: string) => void;
+}
+
+const ToasterContext = createContext<ToasterContextType | null>(null);
+
+export const ToasterProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((options: ToastOptions) => {
+    const id = String(Date.now() + Math.random());
+    setToasts((prev) => [...prev, { ...options, id }]);
+
+    if (options.duration !== null) {
+      setTimeout(() => {
+        removeToast(id);
+      }, options.duration || 5000);
+    }
+
+    return id;
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  return (
+    <ToasterContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+      <ToastContainer />
+    </ToasterContext.Provider>
+  );
+};
+
+const ToastContainer = () => {
+  const context = useContext(ToasterContext);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!context || !mounted) return null;
+
+  return createPortal(
+    <Box
+      position="fixed"
+      top="20px"
+      left="50%"
+      transform="translateX(-50%)"
+      zIndex={9999}
+      pointerEvents="none"
+    >
+      {context.toasts.map((toast) => (
+        <Box key={toast.id} mb={3} pointerEvents="auto">
+          {toast.render({ dismiss: () => context.removeToast(toast.id) })}
+        </Box>
+      ))}
+    </Box>,
+    document.body,
+  );
+};
+
+class ToasterClass {
+  private listeners: ((action: { type: string; payload: any }) => void)[] = [];
+  private nextId = 1;
+  private toastsMap: Map<string, boolean> = new Map();
+
+  subscribe(listener: (action: { type: string; payload: any }) => void) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+
+  private notify(action: { type: string; payload: any }) {
+    this.listeners.forEach((listener) => listener(action));
+  }
+
+  create(options: ToastOptions): Promise<string> {
+    const id = String(this.nextId++);
+    this.toastsMap.set(id, true);
+    this.notify({ type: "ADD_TOAST", payload: { ...options, id } });
+
+    if (options.duration !== null) {
+      setTimeout(() => {
+        this.dismiss(id);
+      }, options.duration || 5000);
+    }
+
+    return Promise.resolve(id);
+  }
+
+  dismiss(id: string) {
+    this.toastsMap.delete(id);
+    this.notify({ type: "REMOVE_TOAST", payload: id });
+  }
+
+  isActive(id: string): boolean {
+    return this.toastsMap.has(id);
+  }
+}
+
+export const toaster = new ToasterClass();
+
+// Bridge component to connect the class-based API with React
+export const Toaster = () => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  useEffect(() => {
+    const unsubscribe = toaster.subscribe((action) => {
+      if (action.type === "ADD_TOAST") {
+        setToasts((prev) => [...prev, action.payload]);
+      } else if (action.type === "REMOVE_TOAST") {
+        setToasts((prev) =>
+          prev.filter((toast) => toast.id !== action.payload),
+        );
+      }
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <Box
+      position="fixed"
+      top="20px"
+      left="50%"
+      transform="translateX(-50%)"
+      zIndex={9999}
+      pointerEvents="none"
+    >
+      {toasts.map((toast) => (
+        <Box key={toast.id} mb={3} pointerEvents="auto">
+          {toast.render({ dismiss: () => toaster.dismiss(toast.id) })}
+        </Box>
+      ))}
+    </Box>,
+    document.body,
+  );
+};
--- a/www/app/layout.tsx
+++ b/www/app/layout.tsx
@@ -1,5 +1,6 @@
 import "./styles/globals.scss";
 import { Metadata, Viewport } from "next";
+import { Poppins } from "next/font/google";
 import SessionProvider from "./lib/SessionProvider";
 import { ErrorProvider } from "./(errors)/errorContext";
 import ErrorMessage from "./(errors)/errorMessage";
@@ -9,6 +10,12 @@ import { getConfig } from "./lib/edgeConfig";
 import { ErrorBoundary } from "@sentry/nextjs";
 import { Providers } from "./providers";

+const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["200", "400", "600"],
+  display: "swap",
+});
+
 export const viewport: Viewport = {
  themeColor: "black",
  width: "device-width",
@@ -65,7 +72,7 @@ export default async function RootLayout({
  const config = await getConfig();

  return (
-    <html lang="en">
+    <html lang="en" className={poppins.className} suppressHydrationWarning>
      <body className={"h-[100svh] w-[100svw] overflow-x-hidden relative"}>
        <SessionProvider>
          <DomainContextProvider config={config}>
--- a/www/app/lib/WherebyWebinarEmbed.tsx
+++ b/www/app/lib/WherebyWebinarEmbed.tsx
@@ -1,7 +1,8 @@
 "use client";
 import { useCallback, useEffect, useRef } from "react";
 import "@whereby.com/browser-sdk/embed";
-import { Box, Button, HStack, useToast, Text } from "@chakra-ui/react";
+import { Box, Button, HStack, Text, Link } from "@chakra-ui/react";
+import { toaster } from "../components/ui/toaster";

 interface WherebyEmbedProps {
  roomUrl: string;
@@ -16,34 +17,31 @@ export default function WherebyWebinarEmbed({
  const wherebyRef = useRef<HTMLElement>(null);

  // TODO extract common toast logic / styles to be used by consent toast on normal rooms
-  const toast = useToast();
  useEffect(() => {
    if (roomUrl && !localStorage.getItem("recording-notice-dismissed")) {
-      const toastId = toast({
-        position: "top",
+      const toastIdPromise = toaster.create({
+        placement: "top",
        duration: null,
-        render: ({ onClose }) => (
+        render: ({ dismiss }) => (
          <Box p={4} bg="white" borderRadius="md" boxShadow="md">
-            <HStack justify="space-between" align="center">
+            <HStack justifyContent="space-between" alignItems="center">
              <Text>
                This webinar is being recorded. By continuing, you agree to our{" "}
-                <Button
-                  as="a"
+                <Link
                  href="https://monadical.com/privacy"
-                  variant="link"
                  color="blue.600"
                  textDecoration="underline"
                  target="_blank"
                >
                  Privacy Policy
-                </Button>
+                </Link>
              </Text>
              <Button
                size="sm"
                variant="ghost"
                onClick={() => {
                  localStorage.setItem("recording-notice-dismissed", "true");
-                  onClose();
+                  dismiss();
                }}
              >
                ✕
@@ -54,10 +52,10 @@ export default function WherebyWebinarEmbed({
      });

      return () => {
-        toast.close(toastId);
+        toastIdPromise.then((id) => toaster.dismiss(id));
      };
    }
-  }, [roomUrl, toast]);
+  }, [roomUrl]);

  const handleLeave = () => {
    if (onLeave) {
--- a/www/app/lib/expandableText.tsx
+++ b/www/app/lib/expandableText.tsx
@@ -26,13 +26,13 @@ export const ExpandableText = forwardRef<HTMLDivElement, Props>(

    return (
      <Box ref={ref} {...rest}>
-        <Box ref={inputRef} noOfLines={expandedCount}>
+        <Box ref={inputRef} lineClamp={expandedCount}>
          {children}
        </Box>
        <Button
          display={isTextClamped ? "block" : "none"}
          size="sm"
-          variant="link"
+          variant="ghost"
          onClick={handleToggle}
          mt={2}
        >
--- a/www/app/providers.tsx
+++ b/www/app/providers.tsx
@@ -1,14 +1,18 @@
 "use client";

 import { ChakraProvider } from "@chakra-ui/react";
-import theme from "./styles/theme";
+import system from "./styles/theme";

 import { WherebyProvider } from "@whereby.com/browser-sdk/react";
+import { Toaster } from "./components/ui/toaster";

 export function Providers({ children }: { children: React.ReactNode }) {
  return (
-    <ChakraProvider theme={theme}>
-      <WherebyProvider>{children}</WherebyProvider>
+    <ChakraProvider value={system}>
+      <WherebyProvider>
+        {children}
+        <Toaster />
+      </WherebyProvider>
    </ChakraProvider>
  );
 }
--- a/www/app/styles/button.css
+++ b/www/app/styles/button.css
@@ -1,120 +0,0 @@
-/* Define basic button styles */
-input[type="button"],
-button {
-  /* Reset default button styles */
-  border: none;
-  background-color: transparent;
-  font-family: inherit;
-  padding: 0;
-  /* Visual */
-  border-radius: 8px;
-  /* Size */
-  padding: 0.4em 1em;
-  min-height: 44px;
-  /* Text */
-  text-align: center;
-  line-height: 1.1;
-  /* Display */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /* Animation */
-  transition: 220ms all ease-in-out;
-}
-
-button:focus-visible {
-  outline-style: none;
-}
-
-@media (max-width: 768px) {
-  input[type="button"],
-  button {
-    padding: 0.25em 0.75em;
-    min-height: 30px;
-  }
-}
-
-/* Button modifiers */
-input[type="button"].small,
-button.small {
-  font-size: 1.15rem;
-}
-
-input[type="button"].block,
-button.block {
-  width: 100%;
-}
-
-/* Disabled styles */
-/* input[type="button"][disabled], */
-/* button[disabled] { */
-/*   border-color: #ccc; */
-/*   background: #b8b8b8 !important; */
-/*   cursor: not-allowed; */
-/* } */
-/**/
-/* input[type="button"][disabled]:hover, */
-/* button[disabled]:hover { */
-/*   background: #b8b8b8 !important; */
-/*   cursor: not-allowed !important; */
-/* } */
-
-/* Red button states */
-input[type="button"][data-color="red"],
-button[data-color="red"],
-input[type="button"][data-color="red"]:hover,
-button[data-color="red"]:hover,
-input[type="button"][data-color="red"]:active,
-button[data-color="red"]:active {
-  background-color: #cc3347;
-}
-
-/* Green button states */
-input[type="button"][data-color="green"],
-button[data-color="green"],
-input[type="button"][data-color="green"]:hover,
-button[data-color="green"]:hover,
-input[type="button"][data-color="green"]:active,
-button[data-color="green"]:active {
-  background-color: #33cc47;
-}
-
-/* Blue button states */
-input[type="button"][data-color="blue"],
-button[data-color="blue"],
-input[type="button"][data-color="blue"]:hover,
-button[data-color="blue"]:hover,
-input[type="button"][data-color="blue"]:active,
-button[data-color="blue"]:active {
-  background-color: #3347cc;
-}
-
-/* Orange button states */
-input[type="button"][data-color="orange"],
-button[data-color="orange"],
-input[type="button"][data-color="orange"]:hover,
-button[data-color="orange"]:hover,
-input[type="button"][data-color="orange"]:active,
-button[data-color="orange"]:active {
-  background-color: #ff7f00;
-}
-
-/* Purple button states */
-input[type="button"][data-color="purple"],
-button[data-color="purple"],
-input[type="button"][data-color="purple"]:hover,
-button[data-color="purple"]:hover,
-input[type="button"][data-color="purple"]:active,
-button[data-color="purple"]:active {
-  background-color: #800080;
-}
-
-/* Yellow button states */
-input[type="button"][data-color="yellow"],
-button[data-color="yellow"],
-input[type="button"][data-color="yellow"]:hover,
-button[data-color="yellow"]:hover,
-input[type="button"][data-color="yellow"]:active,
-button[data-color="yellow"]:active {
-  background-color: #ffff00;
-}
--- a/www/app/styles/icons/pause.tsx
+++ b/www/app/styles/icons/pause.tsx
@@ -2,13 +2,15 @@ import { Icon } from "@chakra-ui/react";

 export default function PauseIcon(props) {
  return (
-    <Icon viewBox="0 0 30 30" {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.514 5.5C11.514 4.11929 10.3947 3 9.01404 3C7.63333 3 6.51404 4.11929 6.51404 5.5V24.5C6.51404 25.8807 7.63333 27 9.01404 27C10.3947 27 11.514 25.8807 11.514 24.5L11.514 5.5ZM23.486 5.5C23.486 4.11929 22.3667 3 20.986 3C19.6053 3 18.486 4.11929 18.486 5.5L18.486 24.5C18.486 25.8807 19.6053 27 20.986 27C22.3667 27 23.486 25.8807 23.486 24.5V5.5Z"
-      />
+    <Icon {...props}>
+      <svg viewBox="0 0 30 30">
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.514 5.5C11.514 4.11929 10.3947 3 9.01404 3C7.63333 3 6.51404 4.11929 6.51404 5.5V24.5C6.51404 25.8807 7.63333 27 9.01404 27C10.3947 27 11.514 25.8807 11.514 24.5L11.514 5.5ZM23.486 5.5C23.486 4.11929 22.3667 3 20.986 3C19.6053 3 18.486 4.11929 18.486 5.5L18.486 24.5C18.486 25.8807 19.6053 27 20.986 27C22.3667 27 23.486 25.8807 23.486 24.5V5.5Z"
+        />
+      </svg>
    </Icon>
  );
 }
--- a/www/app/styles/icons/play.tsx
+++ b/www/app/styles/icons/play.tsx
@@ -2,11 +2,13 @@ import { Icon } from "@chakra-ui/react";

 export default function PlayIcon(props) {
  return (
-    <Icon viewBox="0 0 30 30" {...props}>
-      <path
-        fill="currentColor"
-        d="M27 13.2679C28.3333 14.0377 28.3333 15.9622 27 16.732L10.5 26.2583C9.16666 27.0281 7.5 26.0659 7.5 24.5263L7.5 5.47372C7.5 3.93412 9.16667 2.97187 10.5 3.74167L27 13.2679Z"
-      />
+    <Icon {...props}>
+      <svg viewBox="0 0 30 30">
+        <path
+          fill="currentColor"
+          d="M27 13.2679C28.3333 14.0377 28.3333 15.9622 27 16.732L10.5 26.2583C9.16666 27.0281 7.5 26.0659 7.5 24.5263L7.5 5.47372C7.5 3.93412 9.16667 2.97187 10.5 3.74167L27 13.2679Z"
+        />
+      </svg>
    </Icon>
  );
 }
--- a/www/app/styles/icons/stopRecord.tsx
+++ b/www/app/styles/icons/stopRecord.tsx
@@ -2,8 +2,10 @@ import { Icon } from "@chakra-ui/react";

 export default function StopRecordIcon(props) {
  return (
-    <Icon viewBox="0 0 20 20" {...props}>
-      <rect width="20" height="20" rx="1" fill="currentColor" />
+    <Icon {...props}>
+      <svg viewBox="0 0 20 20">
+        <rect width="20" height="20" rx="1" fill="currentColor" />
+      </svg>
    </Icon>
  );
 }
--- a/www/app/styles/markdown.css
+++ b/www/app/styles/markdown.css
@@ -10,7 +10,7 @@
 }

 .markdown h1 {
-  font-size: 1.2em;
+  font-size: 1.1em;
  font-weight: bold;
  /* text-decoration: underline;
  text-underline-offset: 0.2em; */
--- a/www/app/styles/recorder.js
+++ b/www/app/styles/recorder.js
@@ -1,10 +1,9 @@
-import { theme } from "@chakra-ui/react";
-
+// Hardcoded colors for now - can be replaced with token system in Chakra v3
 export const waveSurferStyles = {
  playerSettings: {
-    waveColor: theme.colors.blue[500],
-    progressColor: theme.colors.blue[700],
-    cursorColor: theme.colors.red[500],
+    waveColor: "#3182ce",
+    progressColor: "#2c5282",
+    cursorColor: "#e53e3e",
    hideScrollbar: true,
    autoScroll: false,
    autoCenter: false,
@@ -31,5 +30,5 @@ export const waveSurferStyles = {
    transition: width 100ms linear;
    z-index: 0;
  `,
-  markerHover: { backgroundColor: theme.colors.gray[200] },
+  markerHover: { backgroundColor: "#e2e8f0" },
 };
--- a/www/app/styles/theme.ts
+++ b/www/app/styles/theme.ts
@@ -1,83 +1,182 @@
-import { extendTheme } from "@chakra-ui/react";
-import { Poppins } from "next/font/google";
-import { accordionAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
+import {
+  createSystem,
+  defaultConfig,
+  defineConfig,
+  defineRecipe,
+  defineSlotRecipe,
+  defaultSystem,
+} from "@chakra-ui/react";

-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(accordionAnatomy.keys);
-
-const poppins = Poppins({
-  subsets: ["latin"],
-  weight: ["200", "400", "600"],
-  display: "swap",
-});
-const custom = definePartsStyle({
-  container: {
-    border: "0",
-    borderRadius: "8px",
-    backgroundColor: "white",
-    mb: 2,
-    mr: 2,
-  },
-  panel: {
-    pl: 8,
-    pb: 0,
-  },
-  button: {
-    justifyContent: "flex-start",
-    pl: 2,
+const accordionSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "container",
+    "item",
+    "itemTrigger",
+    "itemContent",
+    "itemIndicator",
+  ],
+  base: {
+    item: {
+      bg: "white",
+      borderRadius: "xl",
+      border: "0",
+      mb: "2",
+      width: "full",
+    },
+    itemTrigger: {
+      p: "2",
+      cursor: "pointer",
+      _hover: {
+        bg: "gray.200",
+      },
+    },
  },
 });

-const accordionTheme = defineMultiStyleConfig({
-  variants: { custom },
-});
-
-const linkTheme = defineStyle({
-  baseStyle: {
+const linkRecipe = defineRecipe({
+  className: "link",
+  base: {
+    textDecoration: "none",
    _hover: {
      color: "blue.500",
      textDecoration: "none",
    },
+    _focus: {
+      outline: "none",
+      boxShadow: "none",
+    },
+    _focusVisible: {
+      outline: "none",
+      boxShadow: "none",
+    },
+  },
+  variants: {
+    variant: {
+      plain: {
+        _hover: {
+          textDecoration: "none",
+        },
+      },
+    },
  },
 });
+
+const buttonRecipe = defineRecipe({
+  base: {
+    fontWeight: "600",
+    _hover: {
+      bg: "gray.200",
+    },
+    _focus: {
+      outline: "none",
+      boxShadow: "none",
+    },
+    _focusVisible: {
+      outline: "none",
+      boxShadow: "none",
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        colorPalette: "blue",
+      },
+      outline: {
+        _hover: {
+          bg: "gray.200",
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      colorPalette: "whiteAlpha",
+      css: {
+        bg: "whiteAlpha.500",
+        color: "white",
+        _hover: {
+          bg: "whiteAlpha.600",
+          opacity: 1,
+        },
+      },
+    },
+  ],
+});
+
 export const colors = {
  blue: {
-    primary: "#3158E2",
-    500: "#3158E2",
-    light: "#B1CBFF",
-    200: "#B1CBFF",
-    dark: "#0E1B48",
-    900: "#0E1B48",
+    primary: { value: "#3158E2" },
+    500: { value: "#3158E2" },
+    light: { value: "#B1CBFF" },
+    200: { value: "#B1CBFF" },
+    dark: { value: "#0E1B48" },
+    900: { value: "#0E1B48" },
  },
  red: {
-    primary: "#DF7070",
-    500: "#DF7070",
-    light: "#FBD5D5",
-    200: "#FBD5D5",
+    primary: { value: "#DF7070" },
+    500: { value: "#DF7070" },
+    light: { value: "#FBD5D5" },
+    200: { value: "#FBD5D5" },
  },
  gray: {
-    bg: "#F4F4F4",
-    100: "#F4F4F4",
-    light: "#D5D5D5",
-    200: "#D5D5D5",
-    primary: "#838383",
-    500: "#838383",
+    solid: { value: "#F4F4F4" },
+    bg: { value: "#F4F4F4" },
+    100: { value: "#F4F4F4" },
+    light: { value: "#D5D5D5" },
+    200: { value: "#D5D5D5" },
+    primary: { value: "#838383" },
+    500: { value: "#838383" },
+    800: { value: "#1A202C" },
  },
-  light: "#FFFFFF",
-  dark: "#0C0D0E",
+  whiteAlpha: {
+    50: { value: "rgba(255, 255, 255, 0.04)" },
+    100: { value: "rgba(255, 255, 255, 0.06)" },
+    200: { value: "rgba(255, 255, 255, 0.08)" },
+    300: { value: "rgba(255, 255, 255, 0.16)" },
+    400: { value: "rgba(255, 255, 255, 0.24)" },
+    500: { value: "rgba(255, 255, 255, 0.36)" },
+    600: { value: "rgba(255, 255, 255, 0.48)" },
+    700: { value: "rgba(255, 255, 255, 0.64)" },
+    800: { value: "rgba(255, 255, 255, 0.80)" },
+    900: { value: "rgba(255, 255, 255, 0.92)" },
+  },
+  light: { value: "#FFFFFF" },
+  dark: { value: "#0C0D0E" },
 };

-const theme = extendTheme({
-  colors,
-  components: {
-    Accordion: accordionTheme,
-    Link: linkTheme,
-  },
-  fonts: {
-    body: poppins.style.fontFamily,
-    heading: poppins.style.fontFamily,
+const config = defineConfig({
+  theme: {
+    tokens: {
+      colors,
+      fonts: {
+        heading: { value: "Poppins, sans-serif" },
+        body: { value: "Poppins, sans-serif" },
+      },
+    },
+    semanticTokens: {
+      colors: {
+        whiteAlpha: {
+          solid: { value: "{colors.whiteAlpha.500}" },
+          contrast: { value: "{colors.white}" },
+          fg: { value: "{colors.white}" },
+          muted: { value: "{colors.whiteAlpha.100}" },
+          subtle: { value: "{colors.whiteAlpha.50}" },
+          emphasized: { value: "{colors.whiteAlpha.600}" },
+          focusRing: { value: "{colors.whiteAlpha.500}" },
+        },
+      },
+    },
+    slotRecipes: {
+      accordion: accordionSlotRecipe,
+    },
+    recipes: {
+      link: linkRecipe,
+      button: buttonRecipe,
+    },
  },
 });

-export default theme;
+export const system = createSystem(defaultConfig, config);
+
+export default system;
--- a/www/app/webinars/[title]/page.tsx
+++ b/www/app/webinars/[title]/page.tsx
@@ -9,7 +9,7 @@ const WherebyEmbed = dynamic(() => import("../../lib/WherebyWebinarEmbed"), {
  ssr: false,
 });
 import { FormEvent } from "react";
-import { Input, FormControl } from "@chakra-ui/react";
+import { Input, Field } from "@chakra-ui/react";
 import { VStack } from "@chakra-ui/react";
 import { Alert } from "@chakra-ui/react";
 import { Text } from "@chakra-ui/react";
@@ -258,17 +258,18 @@ export default function WebinarPage(details: WebinarDetails) {
              </h2>

              {formSubmitted ? (
-                <Alert status="success" borderRadius="lg" mb={4}>
-                  <Text>
+                <Alert.Root status="success" borderRadius="lg" mb={4}>
+                  <Alert.Indicator />
+                  <Alert.Title>
                    Thanks for signing up! The webinar recording will be ready
                    soon, and we'll email you as soon as it's available. Stay
                    tuned!
-                  </Text>
-                </Alert>
+                  </Alert.Title>
+                </Alert.Root>
              ) : (
                <form onSubmit={handleSubmit}>
-                  <VStack spacing={4} w="full">
-                    <FormControl isRequired>
+                  <VStack gap={4} w="full">
+                    <Field.Root required>
                      <Input
                        type="text"
                        placeholder="Your Name"
@@ -279,8 +280,8 @@ export default function WebinarPage(details: WebinarDetails) {
                          setFormData({ ...formData, name: e.target.value })
                        }
                      />
-                    </FormControl>
-                    <FormControl isRequired>
+                    </Field.Root>
+                    <Field.Root required>
                      <Input
                        type="email"
                        placeholder="Your Email"
@@ -291,7 +292,7 @@ export default function WebinarPage(details: WebinarDetails) {
                          setFormData({ ...formData, email: e.target.value })
                        }
                      />
-                    </FormControl>
+                    </Field.Root>
                    <Input
                      type="text"
                      placeholder="Company Name"
--- a/www/chakra-v3-migration.yml
+++ b/www/chakra-v3-migration.yml
@@ -0,0 +1,70 @@
+rules:
+  # Fix isDisabled to disabled
+  - id: fix-isDisabled
+    pattern: isDisabled={$VALUE}
+    fix: disabled={$VALUE}
+    language: tsx
+
+  # Fix isLoading to loading
+  - id: fix-isLoading
+    pattern: isLoading={$VALUE}
+    fix: loading={$VALUE}
+    language: tsx
+
+  # Fix isChecked to checked
+  - id: fix-isChecked
+    pattern: isChecked={$VALUE}
+    fix: checked={$VALUE}
+    language: tsx
+
+  # Fix isOpen to open
+  - id: fix-isOpen
+    pattern: isOpen={$VALUE}
+    fix: open={$VALUE}
+    language: tsx
+
+  # Fix noOfLines to lineClamp
+  - id: fix-noOfLines
+    pattern: noOfLines={$VALUE}
+    fix: lineClamp={$VALUE}
+    language: tsx
+
+  # Fix align on Flex components
+  - id: fix-flex-align
+    pattern:
+      context: <Flex $$$ATTRS align="$VALUE" $$$REST>$$$CHILDREN</Flex>
+      selector: attribute[name="align"]
+    fix: alignItems="$VALUE"
+    language: tsx
+
+  # Fix justify on Flex components
+  - id: fix-flex-justify
+    pattern:
+      context: <Flex $$$ATTRS justify="$VALUE" $$$REST>$$$CHILDREN</Flex>
+      selector: attribute[name="justify"]
+    fix: justifyContent="$VALUE"
+    language: tsx
+
+  # Fix align on VStack components
+  - id: fix-vstack-align
+    pattern:
+      context: <VStack $$$ATTRS align="$VALUE" $$$REST>$$$CHILDREN</VStack>
+      selector: attribute[name="align"]
+    fix: alignItems="$VALUE"
+    language: tsx
+
+  # Fix align on HStack components
+  - id: fix-hstack-align
+    pattern:
+      context: <HStack $$$ATTRS align="$VALUE" $$$REST>$$$CHILDREN</HStack>
+      selector: attribute[name="align"]
+    fix: alignItems="$VALUE"
+    language: tsx
+
+  # Fix justify on HStack components
+  - id: fix-hstack-justify
+    pattern:
+      context: <HStack $$$ATTRS justify="$VALUE" $$$REST>$$$CHILDREN</HStack>
+      selector: attribute[name="justify"]
+    fix: justifyContent="$VALUE"
+    language: tsx
--- a/www/fix-isDisabled.yml
+++ b/www/fix-isDisabled.yml
@@ -0,0 +1,5 @@
+id: fix-isDisabled
+language: tsx
+rule:
+  pattern: isDisabled={$VALUE}
+fix: disabled={$VALUE}
--- a/www/next.config.js
+++ b/www/next.config.js
@@ -40,5 +40,9 @@ module.exports = withSentryConfig(

    // Automatically tree-shake Sentry logger statements to reduce bundle size
    disableLogger: true,
+
+    experimental: {
+      optimizePackageImports: ["@chakra-ui/react"],
+    },
  },
 );
--- a/www/package.json
+++ b/www/package.json
@@ -11,19 +11,8 @@
    "openapi": "openapi-ts"
  },
  "dependencies": {
-    "@chakra-ui/form-control": "2.2.0",
-    "@chakra-ui/icon": "3.2.0",
-    "@chakra-ui/icons": "2.1.1",
-    "@chakra-ui/layout": "^2.3.1",
-    "@chakra-ui/media-query": "^3.3.0",
-    "@chakra-ui/menu": "^2.2.1",
-    "@chakra-ui/next-js": "^2.2.0",
-    "@chakra-ui/react": "^2.8.2",
-    "@chakra-ui/react-types": "^2.0.6",
-    "@chakra-ui/spinner": "^2.1.0",
-    "@chakra-ui/system": "2.6.2",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@chakra-ui/react": "^3.22.0",
+    "@emotion/react": "^11.14.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
@@ -37,11 +26,12 @@
    "eslint": "^9.9.1",
    "eslint-config-next": "^14.2.7",
    "fontawesome": "^5.6.3",
-    "framer-motion": "^10.16.16",
    "ioredis": "^5.4.1",
    "jest-worker": "^29.6.2",
+    "lucide-react": "^0.525.0",
    "next": "^14.2.7",
    "next-auth": "^4.24.7",
+    "next-themes": "^0.4.6",
    "postcss": "8.4.25",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
--- a/www/reload-frontend
+++ b/www/reload-frontend
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */

 module.exports = {
+  corePlugins: {
+    preflight: false,
+  },
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
--- a/www/yarn.lock
+++ b/www/yarn.lock
Author	SHA1	Message	Date
Mathieu Virbel	db3beae5cd	chore(main): release 0.4.0 (#510 )	2025-07-25 19:09:57 -06:00
Igor Loskutov	03b9a18c1b	fix: remove faulty import Meeting (#512 ) * fix: remove faulty import Meeting * fix: remove faulty import Meeting	2025-07-25 17:48:10 -04:00
Igor Loskutov	7e3027adb6	fix: room concurrency (theoretically) (#511 ) * fix: room concurrency (theoretically) * cleanup * cleanup	2025-07-25 17:37:51 -04:00
Igor Loskutov	27b43d85ab	feat: Diarization cli (#509 ) * diarisation cli * feat: s3 upload for modal diarisation cli call * chore: cleanup * chore: s3 cleanup improvement * chore: lint * chore: cleanup * chore: cleanup * chore: cleanup * chore: cleanup	2025-07-25 16:24:06 -04:00
Mathieu Virbel	2289a1a231	chore(main): release 0.3.2 (#506 )	2025-07-22 19:15:47 -06:00
Mathieu Virbel	d0e130eb13	fix: match font size for the filter sidebar (#507 )	2025-07-22 14:59:23 -06:00
Mathieu Virbel	24fabe3e86	fix: whereby consent not displaying (#505 )	2025-07-22 12:20:26 -06:00
Mathieu Virbel	6fedbbe63f	chore(main): release 0.3.1 (#503 )	2025-07-21 22:52:21 -06:00
Mathieu Virbel	b39175cdc9	fix: remove primary color for room action menu (#504 )	2025-07-21 22:45:26 -06:00
Mathieu Virbel	2a2af5fff2	fix: remove fief out of the source code (#502 ) * fix: remove fief out of the source code * fix: remove corresponding test about migration	2025-07-21 21:09:05 -06:00
Mathieu Virbel	ad44492cae	chore(main): release 0.3.0 (#501 )	2025-07-21 19:14:15 -06:00
Mathieu Virbel	901a239952	feat: migrate from chakra 2 to chakra 3 (#500 ) * feat: separate page into different component, greatly improving the loading and reactivity * fix: various fixes * feat: migrate to Chakra UI v3 - update theme, fix deprecated props - Add whiteAlpha color palette with semantic tokens - Update button recipe with fontWeight 600 and hover states - Move Poppins font from theme to HTML tag className - Fix deprecated props: isDisabled→disabled, align→alignItems/textAlign - Remove button.css as styles are now handled by Chakra v3 * fix: complete Chakra UI v3 deprecated prop migrations - Replace all isDisabled with disabled - Replace all isChecked with checked - Replace all isLoading with loading - Replace all isOpen with open - Replace all noOfLines with lineClamp - Replace all align with alignItems on Flex/Stack components - Replace all justify with justifyContent on Flex/Stack components - Update temporary Select components to use new prop names - Update REFACTOR2.md with completion status * fix: add value prop to Menu.Item for proper hover states in Chakra v3 * fix: update browse page components for Chakra UI v3 compatibility - Fix FilterSidebar status filter styling and prop usage - Update Pagination component to use new Chakra v3 props and structure - Refactor TranscriptTable to use modern Chakra patterns - Clean up browse page layout and props - Remove unused import from transcripts API view - Enhance theme with additional semantic color tokens * fix: polish browse page UI for Chakra v3 - Add rounded corners to FilterSidebar - Adjust responsive breakpoints from md to lg for table/card view - Add consistent font weights to table headers - Improve card view typography and spacing - Fix padding and margins for better mobile experience - Remove unused table recipe from theme * fix: padding * fix: rework transcript page * fix: more tidy layout for topic * fix: share and privacy using chakra3 select * fix: fix share and privacy select, now working, with closing dialog * fix: complete Chakra UI v3 migration for share components and fix all TypeScript errors - Refactor shareZulip.tsx to integrate modal content directly - Replace react-select-search with Chakra UI v3 Select components using collection pattern - Convert all Checkbox components to use v3 composable structure (Checkbox.Root, etc.) - Fix Card components to use Card.Root and Card.Body - Replace deprecated textColor prop with color prop - Update Menu components to use v3 namespace pattern (Menu.Root, Menu.Trigger, etc.) - Remove unused AlertDialog imports - Fix useDisclosure hook changes (isOpen -> open) - Replace UnorderedList with List.Root and ListItem with List.Item - Fix Skeleton components by removing isLoaded prop and using conditional rendering - Update Button variants to valid v3 options - Fix Spinner props (remove thickness, speed, emptyColor) - Update toast API to use custom toaster component - Fix Progress components and FormControl to Field.Root - Update Alert to use compound component pattern - Remove shareModal.tsx file after integration * fix: bring back topic list * fix: normalize menu item * fix: migrate rooms page to Chakra UI v3 pattern - Updated layout to match browse page with Flex container and proper spacing - Migrated add/edit room modal from custom HTML to Chakra UI v3 Dialog component - Replaced all Select components with Chakra UI v3 Select using createListCollection - Replaced FormControl/FormLabel/FormHelperText with Field.Root/Field.Label/Field.HelperText - Removed inline styles and used Chakra props (mr={2} instead of style={{ marginRight: "8px" }}) - Fixed TypeScript interfaces removing OptionBase extension - Fixed theme.ts accordion anatomy import issue * refactor: convert rooms list to table view with responsive design - Create RoomTable component for desktop view showing room details in columns - Create RoomCards component for mobile/tablet responsive view - Refactor RoomList to use table/card components based on screen size - Display Zulip configuration, room size, and recording settings in table - Remove unused RoomItem component - Import Room type from API for proper typing * refactor: extract RoomActionsMenu component to eliminate duplication - Create RoomActionsMenu component for consistent room action menus - Update RoomCards and RoomTable to use the new shared component - Remove duplicated menu code from both components * feat: add icons to TranscriptActionsMenu for consistency - Add FaTrash icon for Delete action with red color - Add FaArrowsRotate icon for Reprocess action - Matches the pattern established in RoomActionsMenu * refactor: update icons from Font Awesome to Lucide React - Replace FaEllipsisVertical with LuMenu in menu triggers - Replace FaLink with LuLink for copy URL buttons - Replace FaPencil with LuPen for edit actions - Replace FaTrash with LuTrash for delete actions - Replace FaArrowsRotate with LuRotateCw for reprocess action - Consistent icon library usage across all components * refactor: little pass on the icons * fix: lu icon * fix: primary for button * fix: recording page with mic selection * fix: also fix duration * fix: use combobox for share zulip * fix: use proper theming for button, variant was not recognized * fix: room actions menu * fix: remove other variant primary left.	2025-07-21 16:16:12 -06:00
Mathieu Virbel	d77b5611f8	chore(main): release 0.2.1 (#499 )	2025-07-17 20:19:56 -06:00
Mathieu Virbel	fc38345d65	fix: separate browsing page into different components, limit to 10 by default (#498 ) * feat: limit the amount of transcripts to 10 by default * feat: separate page into different component, greatly improving the loading and reactivity * fix: current implementation immediately invokes the onDelete and onReprocess From pr-agent-monadical: Suggestion: The current implementation immediately invokes the onDelete and onReprocess functions when the component renders, rather than when the menu items are clicked. This can cause unexpected behavior and potential memory leaks. Use callback functions that only execute when the menu items are actually clicked. [possible issue, importance: 9]	2025-07-17 20:18:00 -06:00
Mathieu Virbel	5a1d662dc4	chore(main): release 0.2.0 (#497 )	2025-07-17 15:55:19 -06:00
Mathieu Virbel	033bd4bc48	feat: improve transcript listing with room_id (#496 ) Added a new field in transcript for room_id, and set room_id/meeting_id in a transcript now. Use this field to list the transcripts. URL is now very fast.	2025-07-17 15:43:36 -06:00
Mathieu Virbel	0eb670ca19	fix: don't attempt to load waveform/mp3 if audio was deleted (#495 )	2025-07-17 10:04:59 -06:00