diff --git a/frontend/src/app/[meetingId]/page.tsx b/frontend/src/app/[meetingId]/page.tsx
index e020cfd8f..dcdc5fd75 100644
--- a/frontend/src/app/[meetingId]/page.tsx
+++ b/frontend/src/app/[meetingId]/page.tsx
@@ -1,34 +1,32 @@
 'use client';
 
-import ChatModal from '@/components/meeting/ChatModal';
-import InfoModal from '@/components/meeting/InfoModal';
-import MeetingMenu from '@/components/meeting/MeetingMenu';
-import MemberModal from '@/components/meeting/MemberModal';
-import MemberVideoBar from '@/components/meeting/MemberVideoBar';
-import { useMeeingStore } from '@/store/useMeetingStore';
+import MeetingLobby from '@/components/meeting/MeetingLobby';
+import MeetingRoom from '@/components/meeting/MeetingRoom';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
 
 export default function MeetingPage() {
-  const { isInfoOpen, isMemberOpen, isChatOpen } = useMeeingStore();
+  const params = useParams<{ meetingId: string }>();
+  const meetingId = params.meetingId;
 
-  return (
-    <main className="flex h-screen w-screen flex-col bg-neutral-900">
-      <MemberVideoBar />
-
-      <section className="relative flex-1">
-        {/* 워크스페이스 / 코드 에디터 등의 컴포넌트가 들어갈 공간 */}
+  const [isJoined, setIsJoined] = useState<boolean>(false);
 
-        {/* 참가자 / 채팅창 */}
-        {(isMemberOpen || isChatOpen) && (
-          <div className="absolute top-2 right-2 bottom-2 flex w-80 flex-col gap-2">
-            {isMemberOpen && <MemberModal />}
-            {isChatOpen && <ChatModal />}
-          </div>
-        )}
-      </section>
+  if (!meetingId) {
+    return <div>잘못된 회의 접근입니다. 다시 시도해주세요.</div>;
+  }
 
-      <MeetingMenu />
+  // 참여 버튼을 눌렀을 때의 핸들러
+  const handleJoin = () => {
+    setIsJoined(true);
+  };
 
-      {isInfoOpen && <InfoModal />}
+  return (
+    <main className="min-h-screen">
+      {!isJoined ? (
+        <MeetingLobby meetingId={meetingId} onJoin={handleJoin} />
+      ) : (
+        <MeetingRoom meetingId={meetingId} />
+      )}
     </main>
   );
 }
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 406dcb037..b34b5b30e 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -22,7 +22,7 @@ body {
 }
 
 button {
-  cursor: pointer;
+  @apply cursor-pointer disabled:cursor-not-allowed;
 }
 
 .flex-center {
diff --git a/frontend/src/components/common/button/Button.tsx b/frontend/src/components/common/button/Button.tsx
index fb837bb90..86a46695e 100644
--- a/frontend/src/components/common/button/Button.tsx
+++ b/frontend/src/components/common/button/Button.tsx
@@ -11,7 +11,7 @@ const style: {
 } = {
   base: 'inline-flex items-center justify-center box-border select-none m-0 p-0 w-fit h-fit cursor-pointer disabled:cursor-default',
   size: {
-    sm: 'h-full max-h-[50px] px-3 py-[6px] text-sm font-bold',
+    sm: 'h-full h-auto px-3 px-1.5 text-sm font-bold',
     lg: 'w-full h-full max-h-[52px] py-4 px-2 text-base font-bold',
   },
   shape: {
@@ -20,7 +20,7 @@ const style: {
   },
   color: {
     active: 'text-white', // TODO: 버튼 호버 시 활성화되는 스타일
-    primary: 'bg-sky-600 text-white', // sky
+    primary: 'bg-sky-600 text-white hover:bg-sky-700', // sky
     secondary: 'bg-sky-700 text-white', // dark-sky
     outlinePrimary: 'bg-white border border-sky-600 text-sky-600',
     disabled: 'bg-neutral-500 text-white', // ex. 취소 버튼
diff --git a/frontend/src/components/meeting/DeviceDropdown.tsx b/frontend/src/components/meeting/DeviceDropdown.tsx
new file mode 100644
index 000000000..c563fc628
--- /dev/null
+++ b/frontend/src/components/meeting/DeviceDropdown.tsx
@@ -0,0 +1,62 @@
+import { ArrowDownIcon } from '@/assets/icons/common';
+import { useState } from 'react';
+
+interface Props {
+  label: string;
+  devices: MediaDeviceInfo[];
+  icon: React.ComponentType<{ className?: string }>;
+  selectedId: string;
+  onSelect: (id: string) => void;
+  className?: string;
+}
+
+export function DeviceDropdown({
+  label,
+  devices,
+  icon: Icon,
+  selectedId,
+  onSelect,
+  className,
+}: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selected = devices.find((d) => d.deviceId === selectedId);
+  const isDisabled = devices.length === 0;
+
+  return (
+    <div className={`relative min-w-0 ${className}`}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        disabled={isDisabled}
+        className={`flex w-full items-center justify-between gap-2 rounded-sm border border-neutral-300 px-3 py-2 text-sm transition-colors ${
+          isDisabled
+            ? 'cursor-not-allowed bg-neutral-100 text-neutral-400' // 비활성화 스타일
+            : 'border-neutral-300 bg-white text-neutral-700 hover:border-neutral-400'
+        }`}
+      >
+        <Icon className="h-4 w-4 shrink-0" />
+        <span className="truncate">{selected?.label || `접근 권한 필요`}</span>
+
+        <ArrowDownIcon className="h-4 w-4 shrink-0" />
+      </button>
+
+      {!isDisabled && isOpen && (
+        <ul className="absolute z-10 mt-1 max-h-30 w-full overflow-y-auto rounded-sm border border-neutral-200 bg-white shadow">
+          {devices.map((device) => (
+            <li
+              key={device.deviceId}
+              onClick={() => {
+                onSelect(device.deviceId);
+                setIsOpen(false);
+              }}
+              className="cursor-pointer px-3 py-2 text-sm first:rounded-t-sm last:rounded-b-sm hover:bg-neutral-100"
+            >
+              {device.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/meeting/MeetingLobby.tsx b/frontend/src/components/meeting/MeetingLobby.tsx
new file mode 100644
index 000000000..152eed255
--- /dev/null
+++ b/frontend/src/components/meeting/MeetingLobby.tsx
@@ -0,0 +1,80 @@
+import { useMediaDevices } from '@/hooks/useMediaDevices';
+import Button from '../common/button';
+import { DeviceDropdown } from './DeviceDropdown';
+import { MediaPreview } from './media/MediaPreview';
+import { CamOnIcon, MicOnIcon, VolumnIcon } from '@/assets/icons/meeting';
+
+export default function MeetingLobby({
+  meetingId,
+  onJoin,
+}: {
+  meetingId: string;
+  onJoin: () => void;
+}) {
+  const meetingLeader = 'Tony';
+  const meetingMemberCnt = 9;
+
+  const {
+    microphones,
+    cameras,
+    speakers,
+    micId,
+    cameraId,
+    speakerId,
+    setMicId,
+    setCameraId,
+    setSpeakerId,
+  } = useMediaDevices();
+
+  return (
+    <main className="box-border flex min-h-screen items-center justify-center gap-20 px-6 py-4">
+      {/* 영상, 마이크 설정 부분 */}
+      <section className="flex w-full max-w-160 flex-col gap-6">
+        <MediaPreview />
+
+        <div className="flex w-full items-center gap-4 text-sm">
+          <DeviceDropdown
+            label="스피커"
+            devices={speakers}
+            icon={VolumnIcon}
+            selectedId={speakerId}
+            onSelect={setSpeakerId}
+            className="flex-1"
+          />
+
+          <DeviceDropdown
+            label="마이크"
+            devices={microphones}
+            icon={MicOnIcon}
+            selectedId={micId}
+            onSelect={setMicId}
+            className="flex-1"
+          />
+
+          <DeviceDropdown
+            label="카메라"
+            devices={cameras}
+            icon={CamOnIcon}
+            selectedId={cameraId}
+            onSelect={setCameraId}
+            className="flex-1"
+          />
+        </div>
+      </section>
+
+      {/* 회의 참여 부분 */}
+      <section className="flex w-full max-w-60 flex-col items-center justify-center">
+        <h1 className="mb-2 text-2xl text-neutral-900">
+          <b>{meetingLeader}</b> 님의 회의실
+        </h1>
+        <span className="text-base text-neutral-600">
+          현재 참여자: {meetingMemberCnt}명
+        </span>
+
+        <Button className="mt-6" onClick={onJoin}>
+          회의 참여하기
+        </Button>
+      </section>
+    </main>
+  );
+}
diff --git a/frontend/src/components/meeting/MeetingRoom.tsx b/frontend/src/components/meeting/MeetingRoom.tsx
new file mode 100644
index 000000000..ec352d030
--- /dev/null
+++ b/frontend/src/components/meeting/MeetingRoom.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import ChatModal from '@/components/meeting/ChatModal';
+import InfoModal from '@/components/meeting/InfoModal';
+import MeetingMenu from '@/components/meeting/MeetingMenu';
+import MemberModal from '@/components/meeting/MemberModal';
+import MemberVideoBar from '@/components/meeting/MemberVideoBar';
+import { useMeeingStore } from '@/store/useMeetingStore';
+
+export default function MeetingRoom({ meetingId }: { meetingId: string }) {
+  const { isInfoOpen, isMemberOpen, isChatOpen } = useMeeingStore();
+
+  return (
+    <main className="flex h-screen w-screen flex-col bg-neutral-900">
+      <MemberVideoBar />
+
+      <section className="relative flex-1">
+        {/* 워크스페이스 / 코드 에디터 등의 컴포넌트가 들어갈 공간 */}
+
+        {/* 참가자 / 채팅창 */}
+        {(isMemberOpen || isChatOpen) && (
+          <div className="absolute top-2 right-2 bottom-2 flex w-80 flex-col gap-2">
+            {isMemberOpen && <MemberModal />}
+            {isChatOpen && <ChatModal />}
+          </div>
+        )}
+      </section>
+
+      <MeetingMenu />
+
+      {isInfoOpen && <InfoModal />}
+    </main>
+  );
+}
diff --git a/frontend/src/components/meeting/media/MediaPreview.tsx b/frontend/src/components/meeting/media/MediaPreview.tsx
new file mode 100644
index 000000000..9b42a4359
--- /dev/null
+++ b/frontend/src/components/meeting/media/MediaPreview.tsx
@@ -0,0 +1,75 @@
+import {
+  CamOffIcon,
+  CamOnIcon,
+  MicOffIcon,
+  MicOnIcon,
+} from '@/assets/icons/meeting';
+import Button from '@/components/common/button';
+import VideoView from './VideoView';
+import { useMediaPreview } from '@/hooks/useMediaPreview';
+
+export function MediaPreview() {
+  const { media, stream, canRenderVideo, toggleAudio, toggleVideo } =
+    useMediaPreview();
+
+  return (
+    <div
+      className={`relative box-border h-90 w-160 overflow-hidden rounded-2xl bg-neutral-700 ${!canRenderVideo && 'p-4'}`}
+    >
+      {/* Video Layer */}
+      {canRenderVideo && stream && <VideoView stream={stream} />}
+
+      {/* Placeholder Layer */}
+      {!canRenderVideo && (
+        <div className="flex h-full flex-col items-center justify-center gap-6 text-center">
+          <p className="text-sm font-bold text-white">
+            {media.cameraPermission === 'denied' ? (
+              <>
+                브라우저 주소창의 자물쇠 아이콘을 눌러
+                <br />
+                카메라와 마이크 권한을 허용해 주세요.
+              </>
+            ) : (
+              <>
+                마이크와 카메라를 사용하려면
+                <br />
+                접근 권한이 필요해요
+              </>
+            )}
+          </p>
+
+          {(media.cameraPermission === 'unknown' ||
+            media.micPermission === 'unknown') && (
+            <Button
+              size="sm"
+              shape="square"
+              className="px-3 py-2 text-sm"
+              //   onClick={requestPermission}
+            >
+              마이크 및 카메라 접근 허용
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Control Layer */}
+      <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 gap-6">
+        <button onClick={toggleVideo} className="group">
+          {media.videoOn ? (
+            <CamOnIcon className="h-12 w-12 rounded-full bg-white p-3 text-neutral-700 shadow-lg transition-all group-active:scale-95" />
+          ) : (
+            <CamOffIcon className="h-12 w-12 rounded-full bg-white p-3 shadow-lg transition-all group-active:scale-95" />
+          )}
+        </button>
+
+        <button onClick={toggleAudio} className="group">
+          {media.audioOn ? (
+            <MicOnIcon className="h-12 w-12 rounded-full bg-white p-3 text-neutral-700 shadow-lg transition-all group-active:scale-95" />
+          ) : (
+            <MicOffIcon className="h-12 w-12 rounded-full bg-white p-3 shadow-lg transition-all group-active:scale-95" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/meeting/media/VideoView.tsx b/frontend/src/components/meeting/media/VideoView.tsx
new file mode 100644
index 000000000..26a01b39c
--- /dev/null
+++ b/frontend/src/components/meeting/media/VideoView.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+interface VideoViewProps {
+  stream: MediaStream;
+  muted?: boolean;
+  mirrored?: boolean;
+}
+
+export default function VideoView({
+  stream,
+  muted = true,
+  mirrored = true,
+}: VideoViewProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    video.srcObject = stream;
+
+    // Safari와 iOS 대응
+    video.onloadedmetadata = () => {
+      video.play().catch(() => {
+        // autoplay 정책 실패 시 무시
+      });
+    };
+
+    return () => {
+      video.pause();
+      video.srcObject = null;
+    };
+  }, [stream]);
+
+  return (
+    <video
+      ref={videoRef}
+      muted={muted}
+      playsInline
+      autoPlay
+      className={`h-full w-full object-cover ${mirrored ? '-scale-x-100' : ''}`}
+    />
+  );
+}
diff --git a/frontend/src/hooks/useMediaDevices.tsx b/frontend/src/hooks/useMediaDevices.tsx
new file mode 100644
index 000000000..b4666a592
--- /dev/null
+++ b/frontend/src/hooks/useMediaDevices.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export type DeviceKind = 'audioinput' | 'audiooutput' | 'videoinput';
+
+export const useMediaDevices = () => {
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+
+  const [speakerId, setSpeakerId] = useState<string>('');
+  const [micId, setMicId] = useState<string>('');
+  const [cameraId, setCameraId] = useState<string>('');
+
+  useEffect(() => {
+    const init = async () => {
+      const list = await navigator.mediaDevices.enumerateDevices();
+
+      // 버튼 disabled를 위해 빈 라벨 필터링
+      const validDevices = list.filter((d) => d.label !== '');
+      setDevices(validDevices);
+
+      const mic = list.find((d) => d.kind === 'audioinput');
+      const cam = list.find((d) => d.kind === 'videoinput');
+      const speaker = list.find((d) => d.kind === 'audiooutput');
+
+      if (mic) setMicId(mic.deviceId);
+      if (cam) setCameraId(cam.deviceId);
+      if (speaker) setSpeakerId(speaker.deviceId);
+    };
+
+    init();
+  }, []);
+
+  const byKind = (kind: DeviceKind) => devices.filter((d) => d.kind === kind);
+
+  return {
+    microphones: byKind('audioinput'),
+    cameras: byKind('videoinput'),
+    speakers: byKind('audiooutput'),
+
+    micId,
+    cameraId,
+    speakerId,
+
+    setMicId,
+    setCameraId,
+    setSpeakerId,
+  };
+};
diff --git a/frontend/src/hooks/useMediaPreview.tsx b/frontend/src/hooks/useMediaPreview.tsx
new file mode 100644
index 000000000..032002109
--- /dev/null
+++ b/frontend/src/hooks/useMediaPreview.tsx
@@ -0,0 +1,167 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+export type MediaPermission = 'unknown' | 'granted' | 'denied';
+
+export interface MediaState {
+  videoOn: boolean;
+  audioOn: boolean;
+  cameraPermission: MediaPermission;
+  micPermission: MediaPermission;
+}
+
+export const useMediaPreview = (micId?: string, cameraId?: string) => {
+  const [media, setMedia] = useState<MediaState>({
+    videoOn: false,
+    audioOn: false,
+    cameraPermission: 'unknown',
+    micPermission: 'unknown',
+  });
+
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+
+  // 초기 스트림 생성 로직
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      let audioTrack: MediaStreamTrack | null = null;
+      let videoTrack: MediaStreamTrack | null = null;
+
+      try {
+        const audioStream = await navigator.mediaDevices.getUserMedia({
+          audio: micId ? { deviceId: micId } : true,
+          video: false,
+        });
+        audioTrack = audioStream.getAudioTracks()[0];
+
+        if (cancelled) return;
+        setMedia((prev) => ({
+          ...prev,
+          micPermission: 'granted',
+          audioOn: true, // 초기화 시 켜짐
+        }));
+      } catch {
+        if (cancelled) return;
+        setMedia((prev) => ({
+          ...prev,
+          micPermission: 'denied',
+          audioOn: false,
+        }));
+      }
+
+      try {
+        const videoStream = await navigator.mediaDevices.getUserMedia({
+          audio: false,
+          video: cameraId ? { deviceId: cameraId } : true,
+        });
+        videoTrack = videoStream.getVideoTracks()[0];
+
+        if (cancelled) return;
+        setMedia((prev) => ({
+          ...prev,
+          cameraPermission: 'granted',
+          videoOn: true, // 초기화 시 켜짐
+        }));
+      } catch {
+        if (cancelled) return;
+        setMedia((prev) => ({
+          ...prev,
+          cameraPermission: 'denied',
+          videoOn: false,
+        }));
+      }
+
+      if (cancelled) return;
+
+      // stream 합치기
+      const tracks = [
+        ...(audioTrack ? [audioTrack] : []),
+        ...(videoTrack ? [videoTrack] : []),
+      ];
+
+      const combinedStream = new MediaStream(tracks);
+      streamRef.current = combinedStream;
+      setStream(combinedStream);
+    })();
+
+    return () => {
+      cancelled = true;
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    };
+  }, [micId, cameraId]);
+
+  const toggleVideo = useCallback(async () => {
+    if (!streamRef.current) return;
+
+    if (media.videoOn) {
+      // off시 트랙 중지 및 스트림에서 제거
+      const videoTracks = streamRef.current.getVideoTracks();
+      videoTracks.forEach((track) => {
+        track.stop();
+        streamRef.current?.removeTrack(track);
+      });
+      setMedia((prev) => ({ ...prev, videoOn: false }));
+    } else {
+      // on시 새로운 장치 스트림 요청
+      try {
+        const newStream = await navigator.mediaDevices.getUserMedia({
+          video: cameraId ? { deviceId: cameraId } : true,
+        });
+        const newTrack = newStream.getVideoTracks()[0];
+
+        streamRef.current.addTrack(newTrack);
+        setMedia((prev) => ({ ...prev, videoOn: true }));
+      } catch (error) {
+        // TODO: 토스트 메시지로 바꾸기
+        alert('카메라 권한을 허용해주세요.');
+      }
+    }
+  }, [media.videoOn, cameraId]);
+
+  const toggleAudio = useCallback(async () => {
+    if (!streamRef.current) return;
+
+    if (media.audioOn) {
+      const audioTracks = streamRef.current.getAudioTracks();
+      audioTracks.forEach((track) => {
+        track.stop();
+        streamRef.current?.removeTrack(track);
+      });
+      setMedia((prev) => ({ ...prev, audioOn: false }));
+    } else {
+      try {
+        const newStream = await navigator.mediaDevices.getUserMedia({
+          audio: micId ? { deviceId: micId } : true,
+        });
+        const newTrack = newStream.getAudioTracks()[0];
+
+        streamRef.current.addTrack(newTrack);
+        setMedia((prev) => ({ ...prev, audioOn: true }));
+      } catch (error) {
+        // TODO: 토스트 메시지로 바꾸기
+        alert('마이크 권한을 허용해주세요.');
+      }
+    }
+  }, [media.audioOn, micId]);
+
+  const canRenderVideo = useMemo(() => {
+    return (
+      media.videoOn &&
+      media.cameraPermission === 'granted' &&
+      stream !== null &&
+      stream.getVideoTracks().length > 0
+    );
+  }, [media.videoOn, media.cameraPermission, stream]);
+
+  return {
+    media,
+    stream,
+    canRenderVideo,
+    toggleVideo,
+    toggleAudio,
+  };
+};