diff --git a/.env b/.env
index 0c6fdce..abf0f10 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,3 @@
 VITE_CORE_FRONT_BASE_URL="http://localhost:5173"
-VITE_CORE_API_BASE_URL="http://localhost:8090"
\ No newline at end of file
+VITE_CORE_API_BASE_URL="http://localhost:8090"
+REACT_APP_API_URL=http://localhost:8090
\ No newline at end of file
diff --git a/public/pets/EGG_0.png b/public/pets/EGG_0.png
deleted file mode 100644
index c5ba439..0000000
Binary files a/public/pets/EGG_0.png and /dev/null differ
diff --git a/public/pets/EGG_1.png b/public/pets/EGG_1.png
deleted file mode 100644
index c5ba439..0000000
Binary files a/public/pets/EGG_1.png and /dev/null differ
diff --git a/public/pets/EGG_1_128.png b/public/pets/EGG_1_128.png
index 49e3a4c..a6fa4c8 100644
Binary files a/public/pets/EGG_1_128.png and b/public/pets/EGG_1_128.png differ
diff --git a/public/pets/EGG_2_128.png b/public/pets/EGG_2_128.png
new file mode 100644
index 0000000..2949cf3
Binary files /dev/null and b/public/pets/EGG_2_128.png differ
diff --git a/public/pets/GROWN_0.png b/public/pets/GROWN_0.png
deleted file mode 100644
index 6da827d..0000000
Binary files a/public/pets/GROWN_0.png and /dev/null differ
diff --git a/public/pets/GROWN_1.png b/public/pets/GROWN_1.png
deleted file mode 100644
index 6da827d..0000000
Binary files a/public/pets/GROWN_1.png and /dev/null differ
diff --git a/public/pets/GROWN_1_128.png b/public/pets/GROWN_1_128.png
index c838d9f..6534b32 100644
Binary files a/public/pets/GROWN_1_128.png and b/public/pets/GROWN_1_128.png differ
diff --git a/public/pets/GROWN_2_128.png b/public/pets/GROWN_2_128.png
new file mode 100644
index 0000000..cc19e73
Binary files /dev/null and b/public/pets/GROWN_2_128.png differ
diff --git a/public/pets/HATCH_0.png b/public/pets/HATCH_0.png
deleted file mode 100644
index 83a39d2..0000000
Binary files a/public/pets/HATCH_0.png and /dev/null differ
diff --git a/public/pets/HATCH_1.png b/public/pets/HATCH_1.png
deleted file mode 100644
index 83a39d2..0000000
Binary files a/public/pets/HATCH_1.png and /dev/null differ
diff --git a/public/pets/HATCH_1_128.png b/public/pets/HATCH_1_128.png
index cecf9b5..b15a9dd 100644
Binary files a/public/pets/HATCH_1_128.png and b/public/pets/HATCH_1_128.png differ
diff --git a/public/pets/HATCH_2_128.png b/public/pets/HATCH_2_128.png
new file mode 100644
index 0000000..8a243e8
Binary files /dev/null and b/public/pets/HATCH_2_128.png differ
diff --git a/src/components/ChatRoomList.jsx b/src/components/ChatRoomList.jsx
index 4cdbf92..d1f66df 100644
--- a/src/components/ChatRoomList.jsx
+++ b/src/components/ChatRoomList.jsx
@@ -4,7 +4,6 @@ import ChatService from '../services/ChatService';
 import ChatRoom from './ChatRoom';
 import PasswordModal from './PasswordModal';
 import './ChatStyles.css';
-import { API_BACKEND_URL } from '../config';
 import { Home } from 'lucide-react'; // Import Home icon from lucide-react
 
 const ChatRoomList = () => {
@@ -263,13 +262,16 @@ const ChatRoomList = () => {
     const isRoomsEmpty = rooms.length === 0;
 
     const getImageUrl = (imageUrl) => {
-        if (!imageUrl) return null;
-        console.log('Original imageUrl:', imageUrl); // 디버깅용
-        // API_BACKEND_URL이 이미 슬래시로 끝나지 않는지 확인
-        const baseUrl = API_BACKEND_URL.endsWith('/') ? API_BACKEND_URL.slice(0, -1) : API_BACKEND_URL;
-        const fullUrl = `${baseUrl}${imageUrl}`;
-        console.log('Full imageUrl:', fullUrl); // 디버깅용
-        return fullUrl;
+        if (!imageUrl) return '/default-room.png';
+        try {
+            // 이미 완전한 S3 URL인 경우 그대로 반환
+            if (imageUrl.includes('s3.ap-northeast-2.amazonaws.com')) {
+                return imageUrl;
+            }
+            return '/default-room.png';
+        } catch {
+            return '/default-room.png';
+        }
     };
 
     return (
@@ -345,10 +347,13 @@ const ChatRoomList = () => {
                                             src={getImageUrl(room.imageUrl)}
                                             alt={room.title}
                                             className="room-image"
+                                            loading="lazy"
                                             onError={(e) => {
-                                                console.log('Image load failed:', room.imageUrl);
-                                                e.target.onerror = null;
-                                                e.target.src = '/default-room.png';
+                                                if (!e.target.getAttribute('data-error-handled')) {
+                                                    console.error('Image load failed:', room.imageUrl);
+                                                    e.target.setAttribute('data-error-handled', 'true');
+                                                    e.target.src = '/default-room.png';
+                                                }
                                             }}
                                         />
                                     ) : (
diff --git a/src/components/ChatStyles.css b/src/components/ChatStyles.css
index 6d7fee4..66cd721 100644
--- a/src/components/ChatStyles.css
+++ b/src/components/ChatStyles.css
@@ -7,13 +7,10 @@
     --light-gray: #f2f2f2;
     --medium-gray: #e0e0e0;
     --dark-gray: #333333;
-    /* 더 어둡게 변경하여 대비 향상 */
     --white: #ffffff;
     --black: #121212;
-    /* 더 어둡게 변경 */
     --pink: #ff8a9e;
     --text-primary: #222222;
-    /* 텍스트 기본 색상 추가 */
 }
 
 /* 전체 레이아웃 */
@@ -86,7 +83,6 @@
     border: 1px solid var(--medium-gray);
     background-color: var(--light-gray);
     color: var(--text-primary);
-    /* 텍스트 색상 명시 */
 }
 
 /* 탭 메뉴 */
@@ -102,9 +98,7 @@
     text-align: center;
     cursor: pointer;
     color: var(--text-primary);
-    /* 텍스트 색상 명시 */
     font-weight: 500;
-    /* 조금 더 두껍게 */
 }
 
 .chat-tab.active {
@@ -176,7 +170,6 @@
     font-weight: bold;
     margin-bottom: 5px;
     color: var(--text-primary);
-    /* 텍스트 색상 명시 */
 }
 
 .chat-room .chat-name .room-number {
@@ -189,7 +182,6 @@
     color: var(--dark-gray);
     font-size: 14px;
     font-weight: 500;
-    /* 조금 더 두껍게 */
 }
 
 .chat-room .chat-time {
@@ -207,18 +199,14 @@
     border-bottom: 1px solid var(--medium-gray);
 }
 
-/* 채팅 생성 버튼 */
+/* 채팅 생성/새로고침 버튼 */
 .create-room-btn,
-.refresh-btn {
+.refresh-btn,
+.home-btn {
     position: static;
-    /* Remove fixed positioning */
     width: auto;
-    /* Remove fixed width */
     height: auto;
-    /* Remove fixed height */
     border-radius: 20px;
-    /* Rounded corners but not circular */
-    background-color: var(--primary-green);
     color: var(--white);
     display: flex;
     align-items: center;
@@ -232,30 +220,109 @@
     border: none;
 }
 
+.create-room-btn,
+.refresh-btn {
+    background-color: var(--primary-green);
+}
+
+.home-btn {
+    background-color: #3b82f6;
+}
+
 .create-room-btn i,
 .refresh-btn i {
     margin-right: 5px;
     font-size: 16px;
 }
 
-
 .create-room-btn:hover,
-.refresh-btn:hover {
+.refresh-btn:hover,
+.home-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-/* 채팅방 생성 폼 */
-.create-room-form {
+.home-btn:hover {
+    background-color: #2563eb;
+}
+
+/* 채팅방 생성 모달 */
+.create-room-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: rgba(0, 0, 0, 0.75);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2000;
+    padding: 0;
+}
+
+.create-room-modal {
     width: 100%;
-    max-width: 500px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: var(--white);
+    max-width: 600px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden;
+    z-index: 2001;
+}
+
+.create-room-header {
+    background-color: #333;
+    color: white;
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.create-room-header h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+}
+
+.create-room-form {
+    padding: 30px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
+/* 폼 스타일링 */
 .form-group {
-    margin-bottom: 20px;
+    margin-bottom: 25px;
+    width: 100%;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .form-group label,
@@ -264,67 +331,82 @@
     margin-bottom: 8px;
     font-weight: 500;
     color: #333;
-    /* 어두운 배경에 어두운 글자색은 보이지 않으므로 수정 */
     font-size: 14px;
 }
 
-/* 폼 입력 필드 스타일 수정 */
-.form-group input,
-.form-group select,
 .form-control {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid #ddd;
     border-radius: 8px;
     background-color: white;
-    /* 배경색을 흰색으로 변경 */
     color: #333;
-    /* 텍스트 색상을 어두운 색으로 변경 */
     font-size: 15px;
     transition: all 0.2s;
 }
 
-.form-group input:focus,
-.form-group select:focus,
 .form-control:focus {
     outline: none;
     border-color: var(--primary-green);
     box-shadow: 0 0 0 2px rgba(63, 178, 127, 0.2);
 }
 
-/* 필요한 경우 placeholder 색상도 조정 */
-.form-group input::placeholder,
-.form-group select::placeholder,
 .form-control::placeholder {
     color: #aaa;
 }
 
-.form-group input.error,
 .form-control.error {
     border-color: #e74c3c;
 }
 
-.form-group .error-message,
 .error-message {
     color: #e74c3c;
     font-size: 13px;
     margin-top: 5px;
 }
 
+/* 체크박스 스타일 */
+.checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.checkbox-wrapper input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    accent-color: var(--primary-green);
+}
+
+.checkbox-label {
+    color: #333;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+/* 버튼 스타일링 */
 .form-actions {
     display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 20px;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 30px;
+    width: 100%;
 }
 
 .btn {
-    padding: 10px 18px;
+    padding: 12px 30px;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 500;
-    font-size: 15px;
+    font-size: 16px;
+    min-width: 120px;
     transition: all 0.2s;
 }
 
@@ -353,35 +435,20 @@
     background-color: #45c28d;
 }
 
-
-.btn-secondary {
-    background-color: var(--light-gray);
-    color: var(--black);
-}
-
 /* 채팅 창 */
 .chat-window {
     flex: 1;
     display: flex;
     flex-direction: column;
     background-color: var(--light-green);
-}
-
-/* 채팅 헤더 */
-.chat-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px 20px;
-    background-color: var(--white);
-    border-bottom: 1px solid var(--medium-gray);
+    height: 100vh;
+    /* 100%에서 100vh로 변경 */
+    overflow: hidden;
     position: relative;
-    /* 상대 위치 설정 */
-    z-index: 5;
-    /* 적절한 z-index 설정 */
+    /* 추가 */
 }
 
-/* 채팅방 정보 영역 */
+/* 채팅 헤더 */
 .chat-header {
     display: flex;
     justify-content: space-between;
@@ -397,18 +464,15 @@
     display: flex;
     align-items: center;
     gap: 15px;
-    /* 제목과 버튼 사이 간격 */
     flex: 1;
 }
 
-/* 채팅방 제목 */
 .room-title {
     font-size: 18px;
     font-weight: bold;
     color: var(--text-primary);
 }
 
-
 /* 헤더 내 버튼 스타일 */
 .header-actions {
     display: flex;
@@ -446,23 +510,6 @@
     background-color: #fde9e7;
 }
 
-/* 반응형 디자인 */
-@media (max-width: 576px) {
-    .room-info-container {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-    }
-
-    .header-actions {
-        margin-left: 0;
-    }
-
-    .connection-status {
-        margin-top: 5px;
-    }
-}
-
 /* 연결 상태 */
 .connection-status {
     display: flex;
@@ -472,26 +519,28 @@
     font-weight: 500;
 }
 
-/* 버튼 비활성화 상태 */
-.action-btn.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 6px;
 }
 
+.status-indicator.connected {
+    background-color: var(--primary-green);
+}
 
-.chat-header .room-info {
-    font-size: 14px;
-    color: var(--dark-gray);
+.status-indicator.disconnected {
+    background-color: #e74c3c;
 }
 
-/* 오른쪽 버튼 영역 */
-.chat-header .actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+/* 버튼 비활성화 상태 */
+.action-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
-/* 채팅 상단 버튼 그룹 (새로고침, 생성) */
+/* 채팅 상단 버튼 그룹 */
 .chat-action-buttons {
     position: absolute;
     top: 15px;
@@ -501,46 +550,12 @@
     z-index: 10;
 }
 
-.chat-header .action-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--dark-gray);
-    font-weight: 500;
-    padding: 5px 10px;
-}
-
-.chat-header .action-btn:hover {
-    color: var(--primary-green);
-}
-
-.chat-header .action-btn.delete {
-    color: #e74c3c;
-}
-
 /* 채팅 메시지 영역 */
-/* 채팅 메시지 영역에 최대 높이와 스크롤 적용 */
 .chat-messages {
     flex: 1;
     padding: 20px;
     overflow-y: auto;
-    /* 세로 스크롤 적용 */
-    max-height: calc(100vh - 180px);
-    /* 채팅 입력창과 헤더를 제외한 높이로 설정 */
-    display: flex;
-    flex-direction: column;
-}
-
-/* 채팅창 전체가 flex로 구성되도록 */
-.chat-window {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--light-green);
-    height: 100%;
-    /* 전체 높이 사용 */
-    overflow: hidden;
-    /* 넘치는 부분 숨김 */
+    /* max-height 속성 제거 또는 수정 */
 }
 
 /* 날짜 구분선 */
@@ -655,7 +670,7 @@
     border: 3px solid var(--light-gray);
     border-top: 3px solid var(--primary-green);
     border-radius: 50%;
-    width: a20px;
+    width: 20px;
     height: 20px;
     animation: spin 1s linear infinite;
     margin-right: 10px;
@@ -673,20 +688,25 @@
 
 /* 채팅 입력 영역 */
 .chat-input {
+    position: sticky;
+    /* 추가 */
+    bottom: 0;
+    /* 추가 */
     display: flex;
     align-items: center;
     padding: 15px 20px;
     background-color: #2a2a2a;
-    /* 배경색 약간 밝게 조정 */
     border-top: 1px solid #444;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    /* 추가 */
+    z-index: 10;
+    /* 추가 */
 }
 
-/* 버튼 색상도 조정 */
 .chat-input .emoji-btn,
 .chat-input .attach-btn {
     color: #ddd;
-    /* 아이콘 색상을 밝게 */
 }
 
 .chat-input .emoji-btn:hover,
@@ -702,9 +722,7 @@
     outline: none;
     color: white;
     background-color: #333;
-    /* 입력창 배경색 */
     border-radius: 20px;
-    /* 더 둥근 모서리 */
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
     transition: all 0.2s ease;
     margin-right: 10px;
@@ -712,11 +730,9 @@
 
 .chat-input input:focus {
     background-color: #3a3a3a;
-    /* 포커스 시 약간 밝은 배경 */
     box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(63, 178, 127, 0.3);
 }
 
-/* 플레이스홀더 텍스트 색상도 변경 */
 .chat-input input::placeholder {
     color: #aaa;
 }
@@ -726,7 +742,6 @@
     color: white;
     border: none;
     border-radius: 20px;
-    /* 둥근 모서리 */
     padding: 10px 20px;
     font-size: 15px;
     font-weight: 500;
@@ -745,7 +760,6 @@
 
 .chat-input .send-btn:hover {
     background-color: #45c28d;
-    /* 호버 시 더 밝은 녹색 */
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
@@ -763,79 +777,27 @@
     box-shadow: none;
 }
 
-/* 반응형 디자인 */
-@media (max-width: 768px) {
-    .chat-input {
-        padding: 12px 15px;
-    }
-
-    .chat-input input {
-        padding: 10px 14px;
-        font-size: 14px;
-    }
-
-    .chat-input .send-btn {
-        padding: 8px 15px;
-        font-size: 14px;
-    }
-}
-
-@media (max-width: 576px) {
-    .chat-input {
-        padding: 10px;
-    }
-
-    .chat-input input {
-        padding: 8px 12px;
-    }
-
-    .chat-input .send-btn {
-        padding: 8px 12px;
-    }
-
-    .chat-input .send-btn i {
-        margin-right: 0;
-    }
-}
-
+/* 채팅 콘텐츠 영역 */
 .chat-content-area {
     flex: 1;
-    background-color: #c4f871;
+    background-color: #f0fbf1;
     display: flex;
     flex-direction: column;
 }
 
+/* 빈 상태 메시지 */
 .empty-state {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
-    color: #fff;
+    color: #222;
     font-size: 18px;
+    flex-direction: column;
 }
 
-/* 연결 상태 표시 */
-.connection-status {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: var(--dark-gray);
-    font-weight: 500;
-}
-
-.status-indicator {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 6px;
-}
-
-.status-indicator.connected {
-    background-color: var(--primary-green);
-}
-
-.status-indicator.disconnected {
-    background-color: #e74c3c;
+.empty-state p {
+    margin: .10px 0;
 }
 
 /* 빈 채팅창 메시지 */
@@ -864,264 +826,21 @@
     font-weight: 500;
 }
 
-/* 미디어 쿼리 */
-@media (max-width: 768px) {
-    .sidebar {
-        width: 60px;
-    }
-
-    .chat-list-container {
-        position: relative;
-        /* For absolute positioning of buttons */
-    }
-
-    .create-room-btn {
-        left: 130px;
-        width: 40px;
-        height: 40px;
-    }
-
-    .refresh-btn {
-        left: 130px;
-    }
-}
-
-@media (max-width: 576px) {
-    .chat-layout {
-        flex-direction: column;
-    }
-
-    .sidebar {
-        width: 100%;
-        height: 60px;
-        flex-direction: row;
-        padding: 0 10px;
-    }
-
-    .sidebar .profile {
-        margin-bottom: 0;
-        margin-right: 10px;
-    }
-
-    .sidebar .nav-item {
-        height: 100%;
-        width: auto;
-        margin-right: 15px;
-        margin-bottom: 0;
-    }
-
-    .sidebar .bottom-icons {
-        margin-top: 0;
-        margin-left: auto;
-        display: flex;
-    }
-
-    .chat-list-container,
-    .chat-window {
-        width: 100%;
-    }
-
-    .create-room-btn {
-        bottom: 20px;
-        right: 20px;
-        left: auto;
-    }
-
-    .refresh-btn {
-        bottom: 80px;
-        right: 20px;
-        left: auto;
-    }
-
-}
-
-/* 채팅 콘텐츠 영역 (우측 검은 영역) */
-.chat-content-area {
-    flex: 1;
-    background-color: #f0fbf1;
-    /* 검은색 배경 */
-    display: flex;
-    flex-direction: column;
-}
-
-.empty-state {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    color: #222;
-    font-size: 18px;
-    flex-direction: column;
-}
-
-.empty-state p {
-    margin: 10px 0;
-}
-
-.chat-action-buttons {
-    position: absolute;
-    top: 15px;
-    right: 20px;
-    display: flex;
-    gap: 10px;
-    z-index: 10;
-}
-
-@media (max-width: 768px) {
-    .chat-action-buttons {
-        top: 10px;
-        right: 10px;
-        gap: 5px;
-    }
-
-    .create-room-btn,
-    .refresh-btn {
-        padding: 6px 12px;
-        font-size: 13px;
-    }
-}
-
-/* For mobile layouts */
-@media (max-width: 576px) {
-    .chat-action-buttons {
-        top: 70px;
-        /* Adjust based on your mobile header height */
-        right: 10px;
-    }
-}
-
-/* 채팅방 생성 모달 개선 스타일 */
-.create-room-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    background-color: rgba(0, 0, 0, 0.75);
-    /* 더 진한 오버레이 */
-    padding: 20px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-}
-
-.create-room-modal {
-    width: 100%;
-    max-width: 450px;
-    background-color: white;
-    /* 흰색 배경으로 변경 */
+/* 비공개 채팅방 스타일 */
+.chat-room .private-badge {
+    display: inline-block;
+    background-color: #f8d7da;
+    color: #721c24;
+    font-size: 12px;
+    padding: 2px 6px;
     border-radius: 10px;
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-    overflow: hidden;
-    animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.create-room-header {
-    background-color: #333;
-    color: white;
-    padding: 15px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #eee;
-}
-
-.create-room-header h2 {
-    font-size: 18px;
-    font-weight: 600;
-    margin: 0;
-}
-
-.create-room-header .close-btn {
-    background: none;
-    border: none;
-    color: white;
-    font-size: 24px;
-    cursor: pointer;
-    padding: 0;
-    line-height: 1;
-}
-
-.create-room-form {
-    padding: 25px;
-}
-
-.form-label {
-    display: block;
-    margin-bottom: 8px;
-    color: #333;
-    font-weight: 500;
-    font-size: 14px;
-}
-
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-control {
-    width: 100%;
-    padding: 12px 15px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    background-color: white;
-    color: #333;
-    font-size: 15px;
-    transition: all 0.2s;
-}
-
-.form-control:focus {
-    outline: none;
-    border-color: var(--primary-green);
-    box-shadow: 0 0 0 2px rgba(63, 178, 127, 0.2);
-}
-
-.form-control::placeholder {
-    color: #aaa;
-}
-
-.form-control.error {
-    border-color: #e74c3c;
+    margin-left: 8px;
+    font-weight: normal;
 }
 
-.error-message {
+.chat-room .profile-img i.fa-lock {
+    font-size: 20px;
     color: #e74c3c;
-    font-size: 13px;
-    margin-top: 5px;
-}
-
-/* 체크박스 스타일 개선 */
-.checkbox-wrapper {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-}
-
-.checkbox-wrapper input[type="checkbox"] {
-    margin-right: 10px;
-    cursor: pointer;
-    width: 18px;
-    height: 18px;
-    accent-color: var(--primary-green);
-}
-
-.checkbox-label {
-    color: #333;
-    font-size: 14px;
-    cursor: pointer;
 }
 
 /* 비밀번호 입력 모달 스타일 */
@@ -1137,7 +856,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 1000;
+    z-index: 2000;
 }
 
 .password-modal {
@@ -1178,81 +897,6 @@
     line-height: 1.4;
 }
 
-/* 삭제, 나가기 버튼 스타일 */
-.chat-room-actions {
-    display: flex;
-    position: absolute;
-    bottom: -50px;
-    /* 채팅 헤더 아래로 위치 */
-    right: 20px;
-    gap: 10px;
-    z-index: 5;
-}
-
-.chat-room-actions .action-btn {
-    background-color: var(--primary-green);
-    color: white;
-    border: none;
-    border-radius: 20px;
-    padding: 8px 15px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    transition: all 0.2s ease;
-}
-
-.chat-room-actions .action-btn i {
-    margin-right: 5px;
-}
-
-.chat-room-actions .action-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.chat-room-actions .action-btn.delete {
-    background-color: #e74c3c;
-}
-
-/* 반응형 디자인 */
-@media (max-width: 768px) {
-    .chat-room-actions {
-        bottom: -45px;
-        right: 10px;
-    }
-
-    .chat-room-actions .action-btn {
-        padding: 6px 12px;
-        font-size: 13px;
-    }
-}
-
-/* 비공개 채팅방 스타일 */
-.chat-room .private-badge {
-    display: inline-block;
-    background-color: #f8d7da;
-    color: #721c24;
-    font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 10px;
-    margin-left: 8px;
-    font-weight: normal;
-}
-
-.chat-room .profile-img i.fa-lock {
-    font-size: 20px;
-    color: #e74c3c;
-}
-
-/* 비공개 채팅방 입장 시 비밀번호 확인 모달에 대한 스타일 */
-.password-modal-container {
-    z-index: 2000;
-    /* 기본 모달보다 앞에 표시 */
-}
-
 .password-modal .room-info {
     background-color: #f8f9fa;
     padding: 12px;
@@ -1269,30 +913,7 @@
     animation: shake 0.5s ease-in-out;
 }
 
-@keyframes shake {
-
-    0%,
-    100% {
-        transform: translateX(0);
-    }
-
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-        transform: translateX(-5px);
-    }
-
-    20%,
-    40%,
-    60%,
-    80% {
-        transform: translateX(5px);
-    }
-}
-
-/* 로딩 스피너 스타일 */
+/* 로딩 스피너 */
 .spinner {
     display: inline-block;
     width: 16px;
@@ -1305,15 +926,17 @@
     vertical-align: middle;
 }
 
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
+/* 애니메이션 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
     }
-}
 
-/* 비밀번호 오류 애니메이션 */
-.password-modal .error-message {
-    animation: shake 0.5s ease-in-out;
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 @keyframes shake {
@@ -1339,60 +962,124 @@
     }
 }
 
-/* 홈 버튼 스타일 - ChatStyles.css에 추가 */
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 60px;
+    }
 
-.home-btn {
-    position: static;
-    width: auto;
-    height: auto;
-    border-radius: 20px;
-    background-color: #3b82f6;
-    /* 파란색 배경 - 다른 버튼과 구분 */
-    color: var(--white);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 15px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    transition: all 0.2s ease;
-    border: none;
-}
+    .chat-list-container {
+        position: relative;
+    }
 
-.home-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    background-color: #2563eb;
-}
+    .chat-input {
+        padding: 12px 15px;
+    }
 
-/* 채팅 상단 버튼 그룹 조정 - 기존에 있지만 gap 조정 */
-.chat-action-buttons {
-    position: absolute;
-    top: 15px;
-    right: 20px;
-    display: flex;
-    gap: 10px;
-    z-index: 10;
-}
+    .chat-input input {
+        padding: 10px 14px;
+        font-size: 14px;
+    }
 
-/* 모바일 레이아웃에서 홈 버튼 조정 */
-@media (max-width: 768px) {
+    .chat-input .send-btn {
+        padding: 8px 15px;
+        font-size: 14px;
+    }
+
+    .chat-action-buttons {
+        top: 10px;
+        right: 10px;
+        gap: 5px;
+    }
+
+    .create-room-btn,
+    .refresh-btn,
     .home-btn {
         padding: 6px 12px;
         font-size: 13px;
     }
 
-    .chat-action-buttons {
-        flex-wrap: wrap;
-        /* 공간이 부족하면 버튼 줄바꿈 */
+    .room-info-container {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+
+    .header-actions {
+        margin-left: 0;
+    }
+
+    .connection-status {
+        margin-top: 5px;
     }
 }
 
 @media (max-width: 576px) {
+    .chat-layout {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        width: 100%;
+        height: 60px;
+        flex-direction: row;
+        padding: 0 10px;
+    }
+
+    .sidebar .profile {
+        margin-bottom: 0;
+        margin-right: 10px;
+    }
+
+    .sidebar .nav-item {
+        height: 100%;
+        width: auto;
+        margin-right: 15px;
+        margin-bottom: 0;
+    }
+
+    .sidebar .bottom-icons {
+        margin-top: 0;
+        margin-left: auto;
+        display: flex;
+    }
+
+    .chat-list-container,
+    .chat-window {
+        width: 100%;
+    }
+
+    .create-room-btn {
+        bottom: 20px;
+        right: 20px;
+        left: auto;
+    }
+
+    .refresh-btn {
+        bottom: 80px;
+        right: 20px;
+        left: auto;
+    }
+
+    .chat-input {
+        padding: 10px;
+    }
+
+    .chat-input input {
+        padding: 8px 12px;
+    }
+
+    .chat-input .send-btn {
+        padding: 8px 12px;
+    }
+
+    .chat-input .send-btn i {
+        margin-right: 0;
+    }
+
     .chat-action-buttons {
         top: 70px;
         right: 10px;
+        flex-wrap: wrap;
     }
 }
\ No newline at end of file
diff --git a/src/config.js b/src/config.js
index 74c4773..e2723db 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,4 +1,8 @@
-const API_BACKEND_URL = import.meta.env.VITE_CORE_API_BASE_URL;
-const API_FRONT_URL = import.meta.env.VITE_CORE_FRONT_BASE_URL;
+// Vite 환경변수 사용
+const API_BACKEND_URL = import.meta.env.VITE_CORE_API_BASE_URL || 'http://localhost:8090';
+const API_FRONT_URL = import.meta.env.VITE_CORE_FRONT_BASE_URL || 'http://localhost:5173';
 
-export { API_BACKEND_URL, API_FRONT_URL };
\ No newline at end of file
+export {
+    API_BACKEND_URL,
+    API_FRONT_URL
+};
\ No newline at end of file
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index f8eed47..298bf19 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -15,8 +15,8 @@ const Profile = ({ userInfo }) => {
   
   // 티어 아이콘 매핑
   const tierEmojis = {
-    SEED: "🌱",
-    SPROUT: "🌿",
+    SEED: "🫘",
+    SPROUT: "🌱",
     FLOWER: "🌺",
     FRUIT: "🍎",
     TREE: "🌳",
@@ -153,7 +153,7 @@ const Profile = ({ userInfo }) => {
       <div className="pet-section">
         <div className="pet-frame">
           <img 
-            src={`/pets/${userInfo.petGrow}_0_128.png`} 
+            src={`/pets/${userInfo.petGrow}_${userInfo.petType}_128.png`}
             alt="Pet" 
             className={`pet-image animated-pet ${isRefreshing ? 'refreshing' : ''}`} 
           />
diff --git a/src/pages/profile.css b/src/pages/profile.css
index 30251bb..5010219 100644
--- a/src/pages/profile.css
+++ b/src/pages/profile.css
@@ -3,7 +3,7 @@
   width: 100%;
   background-color: white;
   border-radius: 12px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
   padding: 24px;
   margin-bottom: 32px;
   box-sizing: border-box;
@@ -18,9 +18,16 @@
   transform: translateY(-2px);
 }
 
+h2 {
+  color: #222222;
+}
+
 /* Pet section styling */
 .pet-section {
   position: relative;
+  display: flex  ;
+  justify-content: center;
+  width: 170px;
   flex-shrink: 0;
 }
 
@@ -75,6 +82,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  padding-left:10px;
 }
 
 .user-header {