diff --git a/src/components/NameInputModal.css b/src/components/NameInputModal.css
new file mode 100644
index 0000000..b119774
--- /dev/null
+++ b/src/components/NameInputModal.css
@@ -0,0 +1,191 @@
+.name-input-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.name-input-modal-content {
+  background: rgba(20, 20, 30, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  padding: clamp(20px, 3vh, 30px);
+  max-width: 450px;
+  width: 100%;
+  border: 2px solid rgba(255, 215, 0, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  position: relative;
+}
+
+.name-input-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: clamp(15px, 2vh, 20px);
+}
+
+.name-input-modal-title {
+  color: #ffd700;
+  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
+  margin: 0;
+  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+}
+
+.name-input-modal-close {
+  background: rgba(255, 107, 107, 0.2);
+  color: #ff6b6b;
+  border: 2px solid rgba(255, 107, 107, 0.5);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 2rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.name-input-modal-close:hover {
+  background: rgba(255, 107, 107, 0.4);
+  border-color: #ff6b6b;
+  transform: scale(1.1);
+}
+
+.name-input-modal-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.name-input-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.name-input-modal-description {
+  color: rgba(255, 255, 255, 0.9);
+  text-align: center;
+  font-size: clamp(0.95rem, 2vw, 1.1rem);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.name-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.name-input-field {
+  width: 100%;
+  padding: 15px 20px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid rgba(255, 215, 0, 0.3);
+  border-radius: 12px;
+  color: #ffffff;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.name-input-field:focus {
+  outline: none;
+  border-color: #ffd700;
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
+}
+
+.name-input-field::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.name-input-error {
+  color: #ff6b6b;
+  font-size: 0.9rem;
+  margin: 0;
+  text-align: center;
+}
+
+.name-input-modal-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.name-input-submit-button,
+.name-input-cancel-button {
+  padding: 12px 24px;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.name-input-submit-button {
+  background: rgba(255, 215, 0, 0.2);
+  color: #ffd700;
+  border-color: rgba(255, 215, 0, 0.5);
+}
+
+.name-input-submit-button:hover:not(:disabled) {
+  background: rgba(255, 215, 0, 0.3);
+  border-color: #ffd700;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
+}
+
+.name-input-submit-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.name-input-cancel-button {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.8);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.name-input-cancel-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+@media (max-width: 768px) {
+  .name-input-modal-content {
+    padding: 20px;
+  }
+
+  .name-input-modal-title {
+    font-size: 1.5rem;
+  }
+
+  .name-input-modal-close {
+    width: 35px;
+    height: 35px;
+    font-size: 1.5rem;
+  }
+
+  .name-input-modal-footer {
+    flex-direction: column;
+  }
+
+  .name-input-submit-button,
+  .name-input-cancel-button {
+    width: 100%;
+  }
+}
+
diff --git a/src/components/NameInputModal.jsx b/src/components/NameInputModal.jsx
new file mode 100644
index 0000000..4fb18c5
--- /dev/null
+++ b/src/components/NameInputModal.jsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import './NameInputModal.css';
+
+const NameInputModal = ({ isOpen, onSubmit, onCancel }) => {
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+
+  // Сброс формы при открытии модального окна
+  useEffect(() => {
+    if (isOpen) {
+      setName('');
+      setError('');
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const trimmedName = name.trim();
+    
+    if (!trimmedName) {
+      setError('Введите имя');
+      return;
+    }
+
+    if (trimmedName.length > 50) {
+      setError('Имя слишком длинное (максимум 50 символов)');
+      return;
+    }
+
+    setError('');
+    onSubmit(trimmedName);
+  };
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget && onCancel) {
+      onCancel();
+    }
+  };
+
+  return (
+    <div className="name-input-modal-backdrop" onClick={handleBackdropClick}>
+      <div className="name-input-modal-content">
+        <div className="name-input-modal-header">
+          <h2 className="name-input-modal-title">Введите ваше имя</h2>
+          {onCancel && (
+            <button className="name-input-modal-close" onClick={onCancel}>
+              ×
+            </button>
+          )}
+        </div>
+        
+        <form className="name-input-modal-form" onSubmit={handleSubmit}>
+          <div className="name-input-modal-body">
+            <p className="name-input-modal-description">
+              Чтобы присоединиться к комнате, введите ваше имя
+            </p>
+            
+            <div className="name-input-group">
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => {
+                  setName(e.target.value);
+                  setError('');
+                }}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    handleSubmit(e);
+                  }
+                }}
+                placeholder="Ваше имя"
+                className="name-input-field"
+                autoFocus
+                maxLength={50}
+              />
+              {error && (
+                <p className="name-input-error">{error}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="name-input-modal-footer">
+            <button
+              type="submit"
+              className="name-input-submit-button primary"
+              disabled={!name.trim()}
+            >
+              Продолжить
+            </button>
+            {onCancel && (
+              <button
+                type="button"
+                onClick={onCancel}
+                className="name-input-cancel-button secondary"
+              >
+                Отмена
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default NameInputModal;
+