diff --git a/ui/src/components/classroom/Dashboard.tsx b/ui/src/components/classroom/Dashboard.tsx
index 1511a174..c946d9eb 100644
--- a/ui/src/components/classroom/Dashboard.tsx
+++ b/ui/src/components/classroom/Dashboard.tsx
@@ -2,13 +2,12 @@ import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { RoleSelector } from './RoleSelector'
 import { useClassroomLogic } from '@/utils/hooks/useClassroomLogic'
-import { useStoreState } from '@/store/store'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import { Room } from './Room'
 
 export function Dashboard() {
   const {
-    appState,
+    roleState,
     currentClass,
     handleRoleSelect,
     handleJoinClass,
@@ -18,20 +17,18 @@ export function Dashboard() {
     handleDeleteClass,
   } = useClassroomLogic()
   const navigate = useNavigate()
-  const { user } = useStoreState((state) => state.auth)
 
   useEffect(() => {
-    if (appState === 'dashboard') {
+    if (roleState === 'dashboard') {
       navigate(ROUTES_ENUM.protected.admin.classroom.classes, { replace: true })
     }
-  }, [appState, navigate])
+  }, [roleState, navigate])
 
-  if (appState === 'role-selection') {
+  if (roleState === 'role-selection') {
     return <RoleSelector onRoleSelect={handleRoleSelect} />
-  } else if (appState === 'dashboard') {
-    // Yönlendirme yapılacağı için burada içerik render etmiyoruz
+  } else if (roleState === 'dashboard') {
     return null
-  } else if (appState === 'classroom' && currentClass) {
+  } else if (roleState === 'classroom' && currentClass) {
     return <Room classSession={currentClass} onLeaveClass={handleLeaveClass} />
   }
   return null
diff --git a/ui/src/components/classroom/RoleSelector.tsx b/ui/src/components/classroom/RoleSelector.tsx
index c41da1dd..1905bfef 100644
--- a/ui/src/components/classroom/RoleSelector.tsx
+++ b/ui/src/components/classroom/RoleSelector.tsx
@@ -1,22 +1,20 @@
 import React from 'react'
 import { motion } from 'framer-motion'
 import { FaGraduationCap, FaUserCheck, FaEye } from 'react-icons/fa'
+import { Role } from '@/proxy/classroom/models'
 
 interface RoleSelectorProps {
-  onRoleSelect: (role: 'teacher' | 'student' | 'observer') => void
+  onRoleSelect: (role: Role) => void
 }
 
 export const RoleSelector: React.FC<RoleSelectorProps> = ({ onRoleSelect }) => {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+    <div className="min-h-screen flex items-center justify-center p-4">
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         className="text-center w-full max-w-4xl"
       >
-        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 mb-4">
-          Sanal Sınıf Sistemine Hoş Geldiniz
-        </h1>
         <p className="text-lg sm:text-xl text-gray-600 mb-8 sm:mb-12">Lütfen rolünüzü seçin</p>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
diff --git a/ui/src/proxy/classroom/models.ts b/ui/src/proxy/classroom/models.ts
index 1ec43a2d..ca252254 100644
--- a/ui/src/proxy/classroom/models.ts
+++ b/ui/src/proxy/classroom/models.ts
@@ -1,3 +1,5 @@
+export type RoleState = 'role-selection' | 'dashboard' | 'classroom'
+
 export type Role = 'teacher' | 'student' | 'observer'
 
 export interface User {
diff --git a/ui/src/utils/hooks/useClassroomLogic.ts b/ui/src/utils/hooks/useClassroomLogic.ts
index cbe330a0..3f53dd05 100644
--- a/ui/src/utils/hooks/useClassroomLogic.ts
+++ b/ui/src/utils/hooks/useClassroomLogic.ts
@@ -1,9 +1,7 @@
-import { ClassroomDto } from '@/proxy/classroom/models'
+import { ClassroomDto, Role, RoleState } from '@/proxy/classroom/models'
 import { useStoreActions, useStoreState } from '@/store/store'
 import { useState } from 'react'
 
-export type RoleState = 'role-selection' | 'dashboard' | 'classroom'
-
 export function useClassroomLogic() {
   const { user } = useStoreState((state) => state.auth)
   const { setUser } = useStoreActions((actions) => actions.auth.user)
@@ -12,7 +10,7 @@ export function useClassroomLogic() {
   const [currentClass, setCurrentClass] = useState<ClassroomDto | null>(null)
   const [allClasses, setAllClasses] = useState<ClassroomDto[]>([])
 
-  const handleRoleSelect = (role: 'teacher' | 'student' | 'observer') => {
+  const handleRoleSelect = (role: Role) => {
     setUser({
       ...user,
       role,
@@ -52,8 +50,8 @@ export function useClassroomLogic() {
   }
 
   return {
-    appState: roleState,
-    setAppState: setRoleState,
+    roleState,
+    setRoleState,
     currentClass,
     setCurrentClass,
     allClasses,