diff --git a/index.html b/index.html
index 08f15e3..fa8bab5 100644
--- a/index.html
+++ b/index.html
@@ -1,76 +1,195 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>LINE Ultimate Stable</title>
 <style>
-body{
-  margin:0;
-  font-family:sans-serif;
-  background:linear-gradient(135deg,#00c6ff,#0072ff);
-  display:flex;
-  justify-content:center;
-  align-items:center;
-  height:100vh;
-}
-#app{
-  width:390px;
-  height:680px;
-  background:white;
-  border-radius:20px;
-  display:flex;
-  flex-direction:column;
-  overflow:hidden;
-}
-header{
-  background:#06c755;
-  color:white;
-  padding:15px;
-  text-align:center;
-  font-weight:bold;
-}
-#auth{
-  padding:20px;
-  text-align:center;
-}
-#chat{
-  display:none;
-  flex:1;
-  flex-direction:column;
-}
-#messages{
-  flex:1;
-  overflow-y:auto;
-  padding:10px;
-}
-.msg{
-  margin:6px 0;
-  padding:8px 12px;
-  border-radius:15px;
-  max-width:70%;
-  word-wrap:break-word;
-}
-.me{background:#06c755;color:white;margin-left:auto;}
-.other{background:#eee;}
-.chatimg{max-width:140px;border-radius:10px;margin-top:5px;}
-#inputArea{
-  display:flex;
-  padding:10px;
-  gap:5px;
-}
-input,button{
-  padding:8px;
-  border-radius:10px;
-  border:1px solid #ccc;
-}
-button{
-  background:#06c755;
-  color:white;
-  border:none;
-  cursor:pointer;
-}
-#logout{
-  background:#ff4d4d;
+:root {
+  --line-green: #06c755;
+  --line-green-dark: #05ad4a;
+  --bg-gradient: linear-gradient(160deg, #d8f9e8 0%, #e6f0ff 55%, #f3ecff 100%);
+  --surface: #ffffff;
+  --surface-soft: #f6f8fb;
+  --text-primary: #1f2937;
+  --text-muted: #6b7280;
+  --border: #e5e7eb;
+  --shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
+  background: var(--bg-gradient);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  color: var(--text-primary);
+}
+
+#app {
+  width: min(100%, 420px);
+  height: min(92vh, 760px);
+  background: var(--surface);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+header {
+  background: linear-gradient(120deg, var(--line-green) 0%, #2cd56e 100%);
+  color: white;
+  padding: 20px;
+  text-align: center;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  font-size: 1.05rem;
+}
+
+#auth {
+  padding: 28px 22px;
+  text-align: center;
+  display: grid;
+  gap: 12px;
+  background: linear-gradient(180deg, #ffffff 0%, #fbfffd 100%);
+}
+
+#auth h2 {
+  margin: 0 0 2px;
+  font-size: 1.1rem;
+}
+
+#auth p {
+  margin: 0 0 12px;
+  color: var(--text-muted);
+  font-size: 0.92rem;
+}
+
+#chat {
+  display: none;
+  flex: 1;
+  flex-direction: column;
+  background: linear-gradient(180deg, #f8fcff 0%, #f2fbf6 100%);
+}
+
+#messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.msg {
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: 16px;
+  max-width: 78%;
+  word-break: break-word;
+  line-height: 1.4;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
+}
+
+.me {
+  background: var(--line-green);
+  color: white;
+  margin-left: auto;
+  border-bottom-right-radius: 4px;
+}
+
+.other {
+  background: #ffffff;
+  color: var(--text-primary);
+  margin-right: auto;
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 4px;
+}
+
+.chatimg {
+  width: 100%;
+  max-width: 190px;
+  border-radius: 10px;
+  margin-top: 8px;
+  display: block;
+}
+
+#inputArea {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  padding: 12px;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+}
+
+#imageInput {
+  grid-column: 1 / -1;
+}
+
+#actions {
+  display: flex;
+  gap: 8px;
+}
+
+input,
+button {
+  font: inherit;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+}
+
+input {
+  width: 100%;
+  background: var(--surface-soft);
+}
+
+input:focus {
+  outline: 2px solid rgba(6, 199, 85, 0.25);
+  border-color: var(--line-green);
+}
+
+button {
+  background: var(--line-green);
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+  transition: transform 0.12s ease, opacity 0.12s ease, background 0.2s ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  opacity: 0.96;
+}
+
+button:active {
+  transform: translateY(0);
+}
+
+#googleLogin {
+  background: #ffffff;
+  color: #111827;
+  border: 1px solid #d1d5db;
+}
+
+#logout {
+  margin: 0 12px 12px;
+  background: #ef4444;
+}
+
+#aiBtn {
+  background: #6366f1;
 }
 </style>
 </head>
@@ -79,9 +198,11 @@
 <header>LINE Ultimate</header>
 
 <div id="auth">
-  <button id="googleLogin">Googleログイン</button><br><br>
-  <input id="email" placeholder="email"><br><br>
-  <input id="password" type="password" placeholder="password"><br><br>
+  <h2>ログインしてチャットを始めましょう</h2>
+  <p>Google またはメールアドレスでサインインできます。</p>
+  <button id="googleLogin">Googleログイン</button>
+  <input id="email" placeholder="email" autocomplete="email">
+  <input id="password" type="password" placeholder="password" autocomplete="current-password">
   <button id="register">新規登録</button>
   <button id="login">ログイン</button>
 </div>
@@ -90,9 +211,11 @@
   <div id="messages"></div>
   <div id="inputArea">
     <input id="msg" placeholder="message">
-    <input type="file" id="imageInput">
-    <button id="send">送信</button>
-    <button id="aiBtn">AI</button>
+    <div id="actions">
+      <button id="send">送信</button>
+      <button id="aiBtn">AI</button>
+    </div>
+    <input type="file" id="imageInput" accept="image/*">
   </div>
   <button id="logout">ログアウト</button>
 </div>
@@ -102,10 +225,10 @@
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
 import { getAuth, GoogleAuthProvider, signInWithPopup,
 createUserWithEmailAndPassword, signInWithEmailAndPassword,
-onAuthStateChanged, signOut } 
+onAuthStateChanged, signOut }
 from "https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js";
 import { getFirestore, collection, addDoc, onSnapshot,
-query, orderBy, serverTimestamp } 
+query, orderBy, serverTimestamp }
 from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";
 
 const firebaseConfig = {
@@ -116,9 +239,9 @@
   messagingSenderId: "35972275719",
   appId: "1:35972275719:web:383fd1ac8a47ceca96d4a2"
 };
-  
+
 const GEMMA_KEY = "AIzaSyDY0Jcd-72QPZlfOJAtUCYxeRrjHBvJRtQ";
-  
+
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);
 const db = getFirestore(app);
@@ -155,7 +278,7 @@
 /* 認証監視 */
 onAuthStateChanged(auth,user=>{
   if(!user){
-    authDiv.style.display="block";
+    authDiv.style.display="grid";
     chatDiv.style.display="none";
     return;
   }
