diff --git a/app/src/main/assets/index.html b/app/src/main/assets/index.html
index 443ec6c..d31569e 100644
--- a/app/src/main/assets/index.html
+++ b/app/src/main/assets/index.html
@@ -11,7 +11,7 @@
     <script src="https://unpkg.com/recharts/shadcn-recharts.js"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
-        body { margin: 0; padding: 0; overflow-x: hidden; }
+        body { margin: 0; padding: 0; overflow-x: hidden; background: transparent !important; }
         .pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }
         .animate-fade-in { animation: fadeIn 0.3s ease-out; }
         .scrollbar-hide::-webkit-scrollbar { display: none; }
@@ -28,8 +28,8 @@
         }
     </style>
 </head>
-<body>
-    <div id="root"></div>
+<body class="bg-transparent">
+    <div id="root" class="bg-transparent"></div>
 
     <script type="text/babel">
         // Shim for Lucide Icons in browser
@@ -77,7 +77,7 @@
         // Mocking Recharts for Browser (Simple version if library not fully loaded)
         const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } = window.Recharts || {
             ResponsiveContainer: ({children}) => <div style={{width:'100%', height:'100%'}}>{children}</div>,
-            AreaChart: () => <div className="bg-slate-100 w-full h-full flex items-center justify-center text-xs text-slate-400">Chart Placeholder</div>,
+            AreaChart: () => <div className="bg-white/20 w-full h-full flex items-center justify-center text-xs text-white/40">Chart Placeholder</div>,
             Area: () => null, XAxis: () => null, YAxis: () => null, CartesianGrid: () => null, Tooltip: () => null
         };
 
@@ -89,7 +89,7 @@
             moderate: '#DD6B20',// Orange
             severe: '#E53E3E',  // Merah
             primary: '#4F6DAD', // Default Biru
-            bg: '#F5F5F7'
+            bg: 'transparent'
           };
 
           // --- STATE MANAGEMENT ---
@@ -282,10 +282,10 @@
           };
 
           const getSeverityInfo = (score) => {
-            if (score >= 10) return { color: COLORS.severe, bg: 'bg-red-50', text: 'text-red-700', fill: 'bg-red-500', label: 'Berat' };
-            if (score >= 7) return { color: COLORS.moderate, bg: 'bg-orange-50', text: 'text-orange-700', fill: 'bg-orange-500', label: 'Sedang' };
-            if (score >= 4) return { color: COLORS.mild, bg: 'bg-yellow-50', text: 'text-yellow-700', fill: 'bg-yellow-500', label: 'Ringan' };
-            return { color: COLORS.normal, bg: 'bg-green-50', text: 'text-green-700', fill: 'bg-green-500', label: 'Normal' };
+            if (score >= 10) return { color: COLORS.severe, bg: 'bg-red-50/80', text: 'text-red-700', fill: 'bg-red-500', label: 'Berat' };
+            if (score >= 7) return { color: COLORS.moderate, bg: 'bg-orange-50/80', text: 'text-orange-700', fill: 'bg-orange-500', label: 'Sedang' };
+            if (score >= 4) return { color: COLORS.mild, bg: 'bg-yellow-50/80', text: 'text-yellow-700', fill: 'bg-yellow-500', label: 'Ringan' };
+            return { color: COLORS.normal, bg: 'bg-green-50/80', text: 'text-green-700', fill: 'bg-green-500', label: 'Normal' };
           };
 
           const getChartData = () => {
@@ -377,29 +377,29 @@
 
           const renderJournal = () => (
             <div className="flex flex-col h-[calc(100vh-170px)] animate-fade-in">
-              <div className="bg-white p-1 rounded-xl flex shadow-sm border border-slate-100 mb-4 shrink-0">
-                <button onClick={() => setJournalMode('free')} className={`flex-1 py-3 text-sm font-bold rounded-lg transition-all ${journalMode === 'free' ? 'bg-[#4F6DAD] text-white shadow-md' : 'text-slate-400 hover:bg-slate-50'}`}>Jurnal Bebas</button>
-                <button onClick={() => setJournalMode('reflection')} className={`flex-1 py-3 text-sm font-bold rounded-lg transition-all ${journalMode === 'reflection' ? 'bg-[#4F6DAD] text-white shadow-md' : 'text-slate-400 hover:bg-slate-50'}`}>Refleksi Harian</button>
+              <div className="bg-white/70 backdrop-blur-sm p-1 rounded-xl flex shadow-sm border border-white/20 mb-4 shrink-0">
+                <button onClick={() => setJournalMode('free')} className={`flex-1 py-3 text-sm font-bold rounded-lg transition-all ${journalMode === 'free' ? 'bg-[#4F6DAD] text-white shadow-md' : 'text-slate-400 hover:bg-slate-50/50'}`}>Jurnal Bebas</button>
+                <button onClick={() => setJournalMode('reflection')} className={`flex-1 py-3 text-sm font-bold rounded-lg transition-all ${journalMode === 'reflection' ? 'bg-[#4F6DAD] text-white shadow-md' : 'text-slate-400 hover:bg-slate-50/50'}`}>Refleksi Harian</button>
               </div>
 
-              <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 relative flex-1 flex flex-col">
+              <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20 relative flex-1 flex flex-col">
                 {journalMode === 'free' ? (
                   <>
                     <textarea 
                       value={journalText} 
                       onChange={(e) => setJournalText(e.target.value)} 
                       placeholder="Tuliskan perasaanmu..." 
-                      className="w-full flex-1 bg-[#F5F5F7] p-4 rounded-2xl border border-slate-200 outline-none resize-none text-slate-700 focus:ring-2 focus:ring-[#4F6DAD] focus:border-transparent transition-all mb-4"
+                      className="w-full flex-1 bg-white/50 p-4 rounded-2xl border border-white/30 outline-none resize-none text-slate-700 focus:ring-2 focus:ring-[#4F6DAD] transition-all mb-4"
                     ></textarea>
                     
                     <div className="shrink-0">
                       <div className="flex items-center gap-2 mb-3">
-                        <input type="text" value={tagInput} onChange={(e) => setTagInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleAddTag()} placeholder="+ Tag..." className="text-xs p-2 rounded-lg bg-[#F5F5F7] border border-slate-200 outline-none w-36" />
-                        <button onClick={handleAddTag} disabled={!tagInput.trim()} className="p-2 bg-slate-100 rounded-lg text-slate-500 hover:bg-[#4F6DAD] hover:text-white disabled:opacity-50 transition-colors"><Plus className="w-3 h-3" /></button>
+                        <input type="text" value={tagInput} onChange={(e) => setTagInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleAddTag()} placeholder="+ Tag..." className="text-xs p-2 rounded-lg bg-white/50 border border-white/30 outline-none w-36" />
+                        <button onClick={handleAddTag} disabled={!tagInput.trim()} className="p-2 bg-white/50 rounded-lg text-slate-500 hover:bg-[#4F6DAD] hover:text-white disabled:opacity-50 transition-colors"><Plus className="w-3 h-3" /></button>
                       </div>
                       <div className="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-hide">
                         {availableTags.map(tag => (
-                          <button key={tag} onClick={() => setJournalTags(prev => prev.includes(tag) ? prev.filter(t=>t!==tag) : [...prev, tag])} className={`px-3 py-1 rounded-full text-xs font-bold transition-colors whitespace-nowrap ${journalTags.includes(tag) ? 'bg-[#4F6DAD] text-white' : 'bg-slate-100 text-slate-400'}`}>{tag}</button>
+                          <button key={tag} onClick={() => setJournalTags(prev => prev.includes(tag) ? prev.filter(t=>t!==tag) : [...prev, tag])} className={`px-3 py-1 rounded-full text-xs font-bold transition-colors whitespace-nowrap ${journalTags.includes(tag) ? 'bg-[#4F6DAD] text-white' : 'bg-white/50 text-slate-400'}`}>{tag}</button>
                         ))}
                       </div>
                     </div>
@@ -411,27 +411,27 @@
                         q: 'Satu hal kecil yang membuatmu tersenyum hari ini?', 
                         key: 'q1', 
                         icon: Smile, 
-                        color: 'text-yellow-600 bg-yellow-100',
+                        color: 'text-yellow-600 bg-yellow-100/80',
                         ph: 'Misal: Kopi pagi yang enak, sapaan teman...'
                       },
                       { 
                         q: 'Tantangan terbesar hari ini & solusinya?', 
                         key: 'q2', 
                         icon: Activity, 
-                        color: 'text-red-600 bg-red-100',
+                        color: 'text-red-600 bg-red-100/80',
                         ph: 'Misal: Macet total, solusinya dengar podcast...'
                       },
                       { 
                         q: 'Satu hal yang ingin kamu perbaiki besok?', 
                         key: 'q3', 
                         icon: TrendingUp, 
-                        color: 'text-blue-600 bg-blue-100',
+                        color: 'text-blue-600 bg-blue-100/80',
                         ph: 'Misal: Tidur lebih awal, kurangi sosmed...'
                       }
                     ].map((item, idx) => (
                       <div key={idx} className="group relative">
                         <div className="flex items-center gap-2 mb-2">
-                           <div className={`p-1.5 rounded-lg ${item.color}`}>
+                           <div className={`p-1.5 rounded-lg ${item.color} backdrop-blur-sm`}>
                              <item.icon className="w-4 h-4"/>
                            </div>
                            <label className="text-xs font-bold text-slate-700 uppercase tracking-wide">{item.q}</label>
@@ -439,7 +439,7 @@
                         <textarea 
                           value={reflectionAnswers[item.key]} 
                           onChange={(e) => setReflectionAnswers({...reflectionAnswers, [item.key]: e.target.value})} 
-                          className="w-full p-4 bg-[#F5F5F7] rounded-2xl border border-slate-200 outline-none focus:ring-2 focus:ring-[#4F6DAD] focus:bg-white focus:border-transparent transition-all resize-none text-slate-700 text-sm placeholder:text-slate-400" 
+                          className="w-full p-4 bg-white/50 rounded-2xl border border-white/30 outline-none focus:ring-2 focus:ring-[#4F6DAD] focus:bg-white/80 transition-all resize-none text-slate-700 text-sm placeholder:text-slate-400" 
                           placeholder={item.ph} 
                           rows={3} 
                         />
@@ -448,7 +448,7 @@
                   </div>
                 )}
                 
-                <div className="shrink-0 mt-3 flex flex-col gap-3 pt-3 border-t border-slate-50">
+                <div className="shrink-0 mt-3 flex flex-col gap-3 pt-3 border-t border-white/20">
                   {autoSaveTime && <div className="flex items-center justify-end gap-1.5 text-[10px] text-slate-400 font-medium animate-fade-in"><CheckCircle className="w-3 h-3 text-green-500" /> Disimpan otomatis {autoSaveTime}</div>}
                   <button onClick={handleSaveJournal} className="w-full bg-[#4F6DAD] text-white py-4 rounded-2xl font-bold text-lg hover:shadow-lg hover:bg-[#3E5C9A] active:scale-[0.98] transition-all flex items-center justify-center gap-2 shadow-md"><Save className="w-5 h-5"/> Simpan Jurnal</button>
                 </div>
@@ -456,12 +456,12 @@
               
               {showAssessmentAlert && (
                 <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50 p-6 animate-fade-in">
-                  <div className="bg-white p-6 rounded-3xl shadow-2xl max-w-sm w-full text-center">
+                  <div className="bg-white/90 backdrop-blur-md p-6 rounded-3xl shadow-2xl max-w-sm w-full text-center">
                     <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4"><Activity className="w-8 h-8 text-yellow-600"/></div>
                     <h3 className="text-xl font-bold text-slate-800 mb-2">Lupa Sesuatu?</h3>
                     <p className="text-slate-500 mb-6">Anda belum menilai mood hari ini.</p>
                     <div className="flex gap-3">
-                      <button onClick={() => setShowAssessmentAlert(false)} className="flex-1 py-3 text-slate-400 font-bold hover:bg-slate-50 rounded-xl">Nanti Saja</button>
+                      <button onClick={() => setShowAssessmentAlert(false)} className="flex-1 py-3 text-slate-400 font-bold hover:bg-white/50 rounded-xl">Nanti Saja</button>
                       <button onClick={() => {setShowAssessmentAlert(false); setActiveTab('assessment')}} className="flex-1 py-3 bg-[#4F6DAD] text-white font-bold rounded-xl shadow-lg">Ya, Lanjut</button>
                     </div>
                   </div>
@@ -477,16 +477,16 @@
 
             return (
               <div className="space-y-6 animate-fade-in pb-20">
-                <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 sticky top-20 z-10">
+                <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20 sticky top-20 z-10">
                   <div className="flex justify-between items-center mb-2">
                     <h2 className="text-lg font-bold text-slate-700">Skor Mental</h2>
                     <span className={`px-3 py-1 rounded-lg text-xs font-bold ${risk.bg} ${risk.text}`}>{total} - {risk.label}</span>
                   </div>
-                  <div className="w-full bg-slate-100 h-2 rounded-full mt-3 overflow-hidden">
+                  <div className="w-full bg-white/20 h-2 rounded-full mt-3 overflow-hidden">
                     <div className={`h-full transition-all duration-500 ${total >= 10 ? 'bg-red-500' : total >= 7 ? 'bg-orange-500' : total >= 4 ? 'bg-yellow-500' : 'bg-[#38A169]'}`} style={{width: `${(total/12)*100}%`}}></div>
                   </div>
                 </div>
-                <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 space-y-8">
+                <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20 space-y-8">
                   {indicators.map((item) => {
                     const val = assessmentInputs[item.id];
                     const getSeverity = (v) => {
@@ -506,13 +506,13 @@
                         </div>
 
                         <div className="relative h-10 flex items-center">
-                           <div className="absolute w-full h-3 bg-slate-200 rounded-full"></div>
+                           <div className="absolute w-full h-3 bg-white/30 rounded-full"></div>
                            
                            <div 
                              className="absolute h-3 rounded-full transition-all duration-300"
                              style={{
                                width: `${percent}%`,
-                               background: `linear-gradient(to right, ${sev.hex}, ${sev.hex})`
+                               backgroundColor: sev.hex
                              }}
                            ></div>
 
@@ -554,15 +554,15 @@
             <div className="space-y-6 animate-fade-in pb-20">
               {!activeGame && (
                 <div className="grid grid-cols-1 gap-4">
-                  <button onClick={() => { setActiveGame('simon'); startSimonGame(); }} className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
+                  <button onClick={() => { setActiveGame('simon'); startSimonGame(); }} className="bg-white/80 backdrop-blur-md p-5 rounded-2xl border border-white/20 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
                     <div className="p-3 bg-purple-100 text-purple-600 rounded-xl"><BrainCircuit className="w-6 h-6"/></div>
                     <div><h3 className="font-bold text-slate-800">Tes Memori</h3><p className="text-xs text-slate-400">Ingat urutan pola grid 3x3</p></div>
                   </button>
-                  <button onClick={() => { setActiveGame('reaction'); setReactionState('intro'); }} className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
+                  <button onClick={() => { setActiveGame('reaction'); setReactionState('intro'); }} className="bg-white/80 backdrop-blur-md p-5 rounded-2xl border border-white/20 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
                     <div className="p-3 bg-yellow-100 text-yellow-600 rounded-xl"><Zap className="w-6 h-6"/></div>
                     <div><h3 className="font-bold text-slate-800">Kecepatan Reaksi</h3><p className="text-xs text-slate-400">Tes refleks visual</p></div>
                   </button>
-                  <button onClick={() => { setActiveGame('logic'); setLogicState('setup'); }} className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
+                  <button onClick={() => { setActiveGame('logic'); setLogicState('setup'); }} className="bg-white/80 backdrop-blur-md p-5 rounded-2xl border border-white/20 shadow-sm hover:shadow-md transition-all text-left flex gap-4 items-center">
                     <div className="p-3 bg-blue-100 text-blue-600 rounded-xl"><Search className="w-6 h-6"/></div>
                     <div><h3 className="font-bold text-slate-800">Tes Logika</h3><p className="text-xs text-slate-400">Asah pola pikir</p></div>
                   </button>
@@ -571,10 +571,10 @@
 
               {/* GAME: REACTION */}
               {activeGame === 'reaction' && (
-                <div className="bg-white p-6 rounded-3xl shadow-lg text-center h-[400px] flex flex-col justify-center relative">
-                  <button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-slate-100 rounded-full"><X className="w-4 h-4"/></button>
+                <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-lg text-center h-[400px] flex flex-col justify-center relative border border-white/20">
+                  <button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-white/50 rounded-full"><X className="w-4 h-4"/></button>
                   <h3 className="font-bold text-xl mb-4 text-[#4F6DAD]">Tes Reaksi</h3>
-                  <div onClick={handleReactionClick} className={`flex-1 rounded-2xl flex flex-col items-center justify-center cursor-pointer transition-all select-none ${reactionState === 'intro' ? 'bg-slate-100' : reactionState === 'waiting' ? 'bg-red-500' : reactionState === 'ready' ? 'bg-green-500' : reactionState === 'too-soon' ? 'bg-orange-500' : 'bg-[#4F6DAD]'}`}>
+                  <div onClick={handleReactionClick} className={`flex-1 rounded-2xl flex flex-col items-center justify-center cursor-pointer transition-all select-none ${reactionState === 'intro' ? 'bg-white/30' : reactionState === 'waiting' ? 'bg-red-500' : reactionState === 'ready' ? 'bg-green-500' : reactionState === 'too-soon' ? 'bg-orange-500' : 'bg-[#4F6DAD]'}`}>
                     {reactionState === 'intro' && <button onClick={(e) => { e.stopPropagation(); startReactionGame(); }} className="bg-[#4F6DAD] text-white px-8 py-3 rounded-full font-bold shadow-lg">Mulai Tes</button>}
                     {reactionState === 'waiting' && <p className="text-white font-bold text-2xl animate-pulse">Tunggu Hijau...</p>}
                     {reactionState === 'ready' && <p className="text-white font-bold text-3xl">TEKAN!</p>}
@@ -587,8 +587,8 @@
 
               {/* GAME: MEMORY TEST (SIMON 3x3) */}
               {activeGame === 'simon' && (
-                <div className="bg-white p-6 rounded-3xl shadow-lg text-center relative">
-                  <button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-slate-100 rounded-full"><X className="w-4 h-4"/></button>
+                <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-lg text-center relative border border-white/20">
+                  <button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-white/50 rounded-full"><X className="w-4 h-4"/></button>
                   <div className="mb-6">
                     <h3 className="font-bold text-xl text-[#4F6DAD]">Tes Memori</h3>
                     <p className="text-sm text-slate-500">Skor: {simonScore}</p>
@@ -608,8 +608,8 @@
                           onClick={() => handleSimonClick(i)}
                           className={`h-20 rounded-xl transition-all duration-150 shadow-sm border-b-4 active:border-b-0 active:translate-y-1 ${
                             simonFlash === i 
-                              ? 'bg-[#4F6DAD] border-[#3b5488] brightness-110 scale-105' // Active Blue
-                              : 'bg-slate-200 border-slate-300 hover:bg-slate-300' // Default Gray
+                              ? 'bg-[#4F6DAD] border-[#3b5488] brightness-110 scale-105' 
+                              : 'bg-white/30 border-white/40 hover:bg-white/50' 
                           }`}
                         ></button>
                       ))}
@@ -622,8 +622,8 @@
 
               {/* GAME: LOGIC */}
               {activeGame === 'logic' && (
-                <div className="bg-white p-6 rounded-3xl shadow-lg relative min-h-[400px] flex flex-col">
-                  <button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-slate-100 rounded-full"><X className="w-4 h-4"/></button>
+                <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-lg relative min-h-[400px] flex flex-col border border-white/20">
+                  <button onClick={() => setActiveGame(null)} className="absolute top-4 right-4 p-2 bg-white/50 rounded-full"><X className="w-4 h-4"/></button>
                   
                   {logicState === 'setup' && (
                     <div className="flex flex-col justify-center flex-1">
@@ -631,7 +631,7 @@
                       
                       <div className="mb-6">
                         <label className="text-xs font-bold text-slate-400 uppercase mb-2 block">Tingkat Kesulitan</label>
-                        <div className="flex bg-slate-100 p-1 rounded-xl">
+                        <div className="flex bg-white/30 p-1 rounded-xl">
                           {['mudah', 'sedang', 'susah'].map(lvl => (
                             <button key={lvl} onClick={() => setLogicSetup({...logicSetup, difficulty: lvl})} className={`flex-1 py-2 rounded-lg text-xs font-bold capitalize transition-all ${logicSetup.difficulty === lvl ? 'bg-white shadow text-[#4F6DAD]' : 'text-slate-400'}`}>{lvl}</button>
                           ))}
@@ -642,7 +642,7 @@
                         <label className="text-xs font-bold text-slate-400 uppercase mb-2 block">Jumlah Soal</label>
                         <div className="flex gap-4">
                           {[5, 10].map(count => (
-                            <button key={count} onClick={() => setLogicSetup({...logicSetup, count})} className={`flex-1 py-3 border-2 rounded-xl font-bold transition-all ${logicSetup.count === count ? 'border-[#4F6DAD] text-[#4F6DAD] bg-indigo-50' : 'border-slate-200 text-slate-400'}`}>{count} Soal</button>
+                            <button key={count} onClick={() => setLogicSetup({...logicSetup, count})} className={`flex-1 py-3 border-2 rounded-xl font-bold transition-all ${logicSetup.count === count ? 'border-[#4F6DAD] text-[#4F6DAD] bg-white/50' : 'border-white/30 text-slate-400'}`}>{count} Soal</button>
                           ))}
                         </div>
                       </div>
@@ -655,14 +655,14 @@
                     <div className="flex flex-col h-full">
                       <div className="flex justify-between items-center mb-6">
                         <span className="text-xs font-bold text-slate-400">Soal {logicCurrentIdx + 1}/{logicQuestions.length}</span>
-                        <span className="text-xs font-bold bg-indigo-50 text-[#4F6DAD] px-2 py-1 rounded capitalize">{logicSetup.difficulty}</span>
+                        <span className="text-xs font-bold bg-white/50 text-[#4F6DAD] px-2 py-1 rounded capitalize">{logicSetup.difficulty}</span>
                       </div>
                       
                       <h4 className="font-bold text-lg text-slate-800 mb-8 leading-relaxed">{logicQuestions[logicCurrentIdx]?.q}</h4>
                       
                       <div className="space-y-3 flex-1">
                         {logicQuestions[logicCurrentIdx]?.options.map((opt, idx) => (
-                          <button key={idx} onClick={() => handleLogicAnswer(idx)} className="w-full text-left p-4 rounded-xl border border-slate-200 hover:bg-indigo-50 hover:border-[#4F6DAD] transition-all font-medium text-slate-600 active:scale-[0.98]">
+                          <button key={idx} onClick={() => handleLogicAnswer(idx)} className="w-full text-left p-4 rounded-xl border border-white/30 bg-white/20 hover:bg-white/50 hover:border-[#4F6DAD] transition-all font-medium text-slate-600 active:scale-[0.98]">
                             {opt}
                           </button>
                         ))}
@@ -672,7 +672,7 @@
 
                   {logicState === 'finished' && (
                     <div className="text-center flex flex-col justify-center flex-1">
-                      <div className="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4 text-[#4F6DAD] text-4xl font-bold">{Math.round((logicScore/logicQuestions.length)*100)}%</div>
+                      <div className="w-20 h-20 bg-indigo-100/80 rounded-full flex items-center justify-center mx-auto mb-4 text-[#4F6DAD] text-4xl font-bold">{Math.round((logicScore/logicQuestions.length)*100)}%</div>
                       <h3 className="font-bold text-xl text-slate-800 mb-2">Tes Selesai!</h3>
                       <p className="text-slate-500 mb-8">Anda menjawab {logicScore} benar dari {logicQuestions.length} soal.</p>
                       <button onClick={() => setLogicState('setup')} className="bg-[#4F6DAD] text-white px-8 py-3 rounded-xl font-bold">Ulangi Tes</button>
@@ -692,26 +692,26 @@
 
             return (
               <div className="space-y-6 animate-fade-in pb-20">
-                <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex items-center justify-between">
+                <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20 flex items-center justify-between">
                   <div className="flex items-center gap-4"><div className="w-14 h-14 bg-[#4F6DAD] rounded-full flex items-center justify-center text-white text-xl font-bold">U</div><div><h2 className="font-bold text-lg text-slate-800">{userProfile.name}</h2><p className="text-xs text-slate-400">Bergabung Jan 2024</p></div></div>
                   <div className="text-center"><div className="flex items-center gap-1 text-orange-500 font-bold text-xl">{userProfile.streak} <span className="text-2xl">🔥</span></div><p className="text-[10px] text-slate-400 uppercase font-bold tracking-wider">Streak</p></div>
                 </div>
                 
-                <button onClick={() => setShowHelpModal(true)} className="w-full bg-red-50 border border-red-100 text-red-600 py-3 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-red-100 transition-colors">
+                <button onClick={() => setShowHelpModal(true)} className="w-full bg-red-50/80 backdrop-blur-sm border border-red-100 text-red-600 py-3 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-red-100/80 transition-colors">
                   <Phone className="w-4 h-4" /> BUTUH BANTUAN DARURAT?
                 </button>
                 
                 {/* 1. LENCANA PENCAPAIAN */}
                 <div>
                   <h3 className="font-bold text-slate-700 mb-3 flex items-center gap-2"><Award className="w-5 h-5 text-[#4F6DAD]"/> Lencana</h3>
-                  <div className="bg-white p-4 rounded-3xl shadow-sm border border-slate-100"><div className="grid grid-cols-3 gap-4 max-h-64 overflow-y-auto pr-1">{BADGES_DB.map(badge => (<div key={badge.id} onClick={() => setModalBadge(badge)} className={`aspect-square rounded-2xl flex flex-col items-center justify-center text-center p-2 cursor-pointer transition-all ${userProfile.badges.includes(badge.id) ? 'bg-[#F5F5F7] hover:bg-slate-200' : 'opacity-40 grayscale bg-slate-50'}`}><span className="text-3xl mb-1">{badge.icon}</span><span className="text-[10px] font-bold text-slate-600 leading-tight">{badge.name}</span></div>))}</div></div>
+                  <div className="bg-white/80 backdrop-blur-md p-4 rounded-3xl shadow-sm border border-white/20"><div className="grid grid-cols-3 gap-4 max-h-64 overflow-y-auto pr-1">{BADGES_DB.map(badge => (<div key={badge.id} onClick={() => setModalBadge(badge)} className={`aspect-square rounded-2xl flex flex-col items-center justify-center text-center p-2 cursor-pointer transition-all ${userProfile.badges.includes(badge.id) ? 'bg-white/50 hover:bg-white/80' : 'opacity-40 grayscale bg-white/20'}`}><span className="text-3xl mb-1">{badge.icon}</span><span className="text-[10px] font-bold text-slate-600 leading-tight">{badge.name}</span></div>))}</div></div>
                 </div>
                 
                 {/* 2. LAPORAN KESEHATAN */}
-                <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100">
+                <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-white/20">
                   <div className="flex justify-between items-center mb-6">
                     <h3 className="font-bold text-slate-700">Laporan Kesehatan</h3>
-                    <select value={reportRange} onChange={(e) => setReportRange(e.target.value)} className="bg-[#F5F5F7] text-xs font-bold text-slate-600 py-2 px-3 rounded-lg border-none outline-none">
+                    <select value={reportRange} onChange={(e) => setReportRange(e.target.value)} className="bg-white/50 text-xs font-bold text-slate-600 py-2 px-3 rounded-lg border-none outline-none">
                       <option value="mingguan">Mingguan</option>
                       <option value="bulanan">Bulanan</option>
                       <option value="tahunan">Tahunan</option>
@@ -727,9 +727,9 @@
                             <stop offset="95%" stopColor={severityInfo.color} stopOpacity={0}/>
                           </linearGradient>
                         </defs>
-                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0"/>
-                        <XAxis dataKey="name" tick={{fontSize:10}} axisLine={false} tickLine={false}/>
-                        <Tooltip contentStyle={{borderRadius:'10px', border:'none'}}/>
+                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.1)"/>
+                        <XAxis dataKey="name" tick={{fontSize:10, fill:'#64748b'}} axisLine={false} tickLine={false}/>
+                        <Tooltip contentStyle={{borderRadius:'10px', border:'none', backgroundColor:'rgba(255,255,255,0.9)'}}/>
                         <Area type="monotone" dataKey="score" stroke={severityInfo.color} strokeWidth={3} fill="url(#colorScore)"/>
                       </AreaChart>
                     </ResponsiveContainer>
@@ -741,46 +741,44 @@
                       <div>
                         <h4 className={`text-xs font-bold ${severityInfo.text} uppercase mb-1`}>AI Insight: {severityInfo.label}</h4>
                         <p className={`text-xs ${severityInfo.text} leading-relaxed opacity-90`}>
-                          {avgScore >= 10 ? "Tingkat stres sangat tinggi. Segera hubungi bantuan profesional atau orang terdekat." :
-                           avgScore >= 7 ? "Terdeteksi beban emosi sedang. Luangkan waktu untuk hobi atau meditasi." :
-                           avgScore >= 4 ? "Ada sedikit gejolak. Tetap jaga pola tidur dan aktivitas fisik." :
-                           "Kondisi mental Anda stabil dan sehat. Teruskan kebiasaan baik ini!"}
+                          {avgScore >= 10 ? "Tingkat stres sangat tinggi. Segera hubungi bantuan profesional." :
+                           avgScore >= 7 ? "Terdeteksi beban emosi sedang. Luangkan waktu untuk hobi." :
+                           avgScore >= 4 ? "Ada sedikit gejolak. Tetap jaga pola tidur." :
+                           "Kondisi mental Anda stabil. Teruskan kebiasaan baik ini!"}
                         </p>
                       </div>
                     </div>
                   ) : (
-                    <div className="bg-slate-50 p-4 rounded-xl flex gap-3 items-center text-slate-400">
+                    <div className="bg-white/30 p-4 rounded-xl flex gap-3 items-center text-slate-400">
                       <BrainCircuit className="w-5 h-5"/>
                       <p className="text-xs">Isi penilaian untuk melihat analisis AI.</p>
                     </div>
                   )}
                 </div>
 
-                {/* 3. RIWAYAT JURNAL TERBARU (DIBAWAH) */}
+                {/* 3. RIWAYAT JURNAL TERBARU */}
                 <div>
                   <h3 className="font-bold text-slate-700 mb-3 flex items-center gap-2"><BookOpen className="w-5 h-5 text-[#4F6DAD]"/> Riwayat Jurnal Terbaru</h3>
                   {journals.length > 0 ? (
                     <div className="space-y-3">
                       {journals.slice(0, 3).map(j => (
-                        <div key={j.id} className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100">
-                          <div className="flex justify-between mb-1">
-                            <span className="text-xs font-bold text-[#4F6DAD]">{j.date}</span>
-                          </div>
-                          <p className="text-sm text-slate-600 line-clamp-1">{j.content.text}</p>
+                        <div key={j.id} className="bg-white/50 backdrop-blur-md p-4 rounded-2xl shadow-sm border border-white/20 text-sm">
+                          <span className="text-[#4F6DAD] font-bold">{j.date}</span>
+                          <p className="line-clamp-1 text-slate-600">{j.content.text}</p>
                         </div>
                       ))}
-                      <button onClick={() => setViewMode('history_full')} className="w-full py-3 text-[#4F6DAD] font-bold text-xs bg-indigo-50 rounded-xl hover:bg-indigo-100">Lihat Semua</button>
+                      <button onClick={() => setViewMode('history_full')} className="w-full py-3 text-[#4F6DAD] font-bold text-xs bg-white/50 rounded-xl hover:bg-white/80 border border-white/30">Lihat Semua</button>
                     </div>
                   ) : (
-                    <div className="bg-white p-6 rounded-2xl border border-dashed border-slate-200 text-center text-slate-400 text-sm">
+                    <div className="bg-white/30 p-6 rounded-2xl border border-dashed border-white/40 text-center text-slate-400 text-sm">
                       Belum ada jurnal yang disimpan.
                     </div>
                   )}
                 </div>
 
-                {/* 4. HAPUS AKUN (PALING BAWAH) */}
+                {/* 4. HAPUS AKUN */}
                 <div className="pt-4">
-                  <button onClick={handleDeleteAccount} className="w-full py-4 text-red-500 font-bold text-sm bg-red-50 rounded-2xl border border-red-100 hover:bg-red-100 transition-colors flex items-center justify-center gap-2">
+                  <button onClick={handleDeleteAccount} className="w-full py-4 text-red-500 font-bold text-sm bg-red-50/50 backdrop-blur-sm rounded-2xl border border-red-100 hover:bg-red-100/50 transition-colors flex items-center justify-center gap-2">
                     <Trash2 className="w-4 h-4"/> Hapus Akun Permanen
                   </button>
                 </div>
@@ -798,21 +796,21 @@
 
             return (
               <div className="animate-slide-up pb-20">
-                <div className="sticky top-0 bg-[#F5F5F7] pt-4 pb-2 z-10 flex items-center gap-3 mb-4"><button onClick={() => setViewMode('main')} className="p-2 bg-white rounded-full shadow-sm"><X className="w-5 h-5"/></button><h2 className="text-xl font-bold text-slate-800">Riwayat Jurnal</h2></div>
-                <div className="relative mb-6"><Search className="absolute left-4 top-3.5 w-5 h-5 text-slate-400" /><input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Cari jurnal atau tag..." className="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-200 focus:border-[#4F6DAD] outline-none shadow-sm"/></div>
+                <div className="sticky top-0 bg-transparent pt-4 pb-2 z-10 flex items-center gap-3 mb-4"><button onClick={() => setViewMode('main')} className="p-2 bg-white/80 backdrop-blur-md rounded-full shadow-sm"><X className="w-5 h-5"/></button><h2 className="text-xl font-bold text-slate-800">Riwayat Jurnal</h2></div>
+                <div className="relative mb-6"><Search className="absolute left-4 top-3.5 w-5 h-5 text-slate-400" /><input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Cari jurnal atau tag..." className="w-full pl-12 pr-4 py-3 rounded-xl border border-white/30 bg-white/50 backdrop-blur-md focus:border-[#4F6DAD] outline-none shadow-sm"/></div>
                 <div className="space-y-4">
                   {filteredJournals.length > 0 ? filteredJournals.map(j => (
-                    <div key={j.id} className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100">
-                      <div className="flex justify-between items-start mb-2"><span className="text-xs font-bold text-[#4F6DAD] bg-indigo-50 px-2 py-1 rounded-md">{j.date}</span></div>
+                    <div key={j.id} className="bg-white/80 backdrop-blur-md p-5 rounded-2xl shadow-sm border border-white/20">
+                      <div className="flex justify-between items-start mb-2"><span className="text-xs font-bold text-[#4F6DAD] bg-white/50 px-2 py-1 rounded-md border border-white/30">{j.date}</span></div>
                       <div className="space-y-4">
-                        <p className="text-slate-700 text-sm leading-relaxed border-b border-slate-100 pb-3">{j.content.text}</p>
-                        <div className="bg-slate-50 p-4 rounded-xl space-y-3">
+                        <p className="text-slate-700 text-sm leading-relaxed border-b border-white/20 pb-3">{j.content.text}</p>
+                        <div className="bg-white/30 p-4 rounded-xl space-y-3 border border-white/20">
                           <div className="flex items-center gap-2 mb-1"><div className="w-1.5 h-1.5 rounded-full bg-[#4F6DAD]"></div><span className="text-xs font-bold text-slate-500 uppercase">Hal Kecil</span></div><p className="text-sm text-slate-600 pl-3.5 italic">"{j.content.reflection.q1}"</p>
                           <div className="flex items-center gap-2 mb-1 mt-3"><div className="w-1.5 h-1.5 rounded-full bg-red-400"></div><span className="text-xs font-bold text-slate-500 uppercase">Tantangan</span></div><p className="text-sm text-slate-600 pl-3.5 italic">"{j.content.reflection.q2}"</p>
                           <div className="flex items-center gap-2 mb-1 mt-3"><div className="w-1.5 h-1.5 rounded-full bg-blue-400"></div><span className="text-xs font-bold text-slate-500 uppercase">Perbaikan</span></div><p className="text-sm text-slate-600 pl-3.5 italic">"{j.content.reflection.q3}"</p>
                         </div>
                       </div>
-                      {j.tags && <div className="flex gap-2 mt-3">{j.tags.map(t => <span key={t} onClick={() => handleTagClick(t)} className="text-[10px] text-slate-500 bg-slate-100 px-2 py-1 rounded-full cursor-pointer hover:bg-[#4F6DAD] hover:text-white transition-colors">{t}</span>)}</div>}
+                      {j.tags && <div className="flex gap-2 mt-3">{j.tags.map(t => <span key={t} onClick={() => handleTagClick(t)} className="text-[10px] text-slate-500 bg-white/50 px-2 py-1 rounded-full border border-white/20 cursor-pointer hover:bg-[#4F6DAD] hover:text-white transition-colors">{t}</span>)}</div>}
                     </div>
                   )) : <div className="text-center py-10 text-slate-400"><p>Tidak ditemukan.</p></div>}
                 </div>
@@ -820,13 +818,13 @@
             );
           };
 
-          if (viewMode === 'history_full') return <div className="min-h-screen bg-[#F5F5F7] font-sans text-[#2D3748] max-w-md mx-auto p-6 relative">{renderHistoryFull()}</div>;
+          if (viewMode === 'history_full') return <div className="min-h-screen bg-transparent font-sans text-[#2D3748] max-w-md mx-auto p-6 relative">{renderHistoryFull()}</div>;
 
           return (
-            <div className="min-h-screen bg-[#F5F5F7] font-sans text-[#2D3748] max-w-md mx-auto relative shadow-2xl overflow-hidden">
-              <header className="bg-white px-6 pt-8 pb-4 shadow-sm flex justify-between items-center sticky top-0 z-20">
+            <div className="min-h-screen bg-transparent font-sans text-[#2D3748] max-w-md mx-auto relative overflow-hidden">
+              <header className="bg-white/80 backdrop-blur-md px-6 pt-8 pb-4 shadow-sm flex justify-between items-center sticky top-0 z-20 border-b border-white/20">
                 <div className="flex items-center gap-2"><div className="bg-[#4F6DAD] p-2 rounded-lg text-white"><Activity className="w-5 h-5" /></div><h1 className="text-lg font-extrabold text-[#4F6DAD]">PsyJournal</h1></div>
-                <div className="w-8 h-8 rounded-full bg-slate-100 border border-slate-200 overflow-hidden"><User className="w-full h-full p-1 text-slate-400"/></div>
+                <div className="w-8 h-8 rounded-full bg-white/50 border border-white/30 overflow-hidden"><User className="w-full h-full p-1 text-slate-400"/></div>
               </header>
               <main className="p-4">
                 {activeTab === 'journal' && renderJournal()}
@@ -834,18 +832,18 @@
                 {activeTab === 'cognitive' && renderCognitive()}
                 {activeTab === 'profile' && renderProfile()}
               </main>
-              <nav className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-slate-200 px-6 py-3 flex justify-between items-center z-30 pb-safe">
+              <nav className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/80 backdrop-blur-md border-t border-white/20 px-6 py-3 flex justify-between items-center z-30 pb-safe">
                 {[{ id: 'journal', icon: BookOpen, label: 'Jurnal' }, { id: 'assessment', icon: Activity, label: 'Penilaian' }, { id: 'cognitive', icon: BrainCircuit, label: 'Tes' }, { id: 'profile', icon: User, label: 'Profil' }].map((item) => (
-                  <button key={item.id} onClick={() => setActiveTab(item.id)} className={`flex flex-col items-center gap-1 transition-all ${activeTab === item.id ? 'text-[#4F6DAD] -translate-y-1' : 'text-slate-300'}`}><item.icon className={`w-6 h-6 ${activeTab === item.id ? 'fill-current' : ''}`} /><span className="text-[10px] font-bold">{item.label}</span></button>
+                  <button key={item.id} onClick={() => setActiveTab(item.id)} className={`flex flex-col items-center gap-1 transition-all ${activeTab === item.id ? 'text-[#4F6DAD] -translate-y-1' : 'text-slate-400'}`}><item.icon className={`w-6 h-6 ${activeTab === item.id ? 'fill-current' : ''}`} /><span className="text-[10px] font-bold">{item.label}</span></button>
                 ))}
               </nav>
               {modalBadge && (
                 <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-6 animate-fade-in">
-                  <div className="bg-white rounded-3xl p-8 w-full max-w-sm text-center relative shadow-2xl flex flex-col items-center">
+                  <div className="bg-white/90 backdrop-blur-md rounded-3xl p-8 w-full max-w-sm text-center relative shadow-2xl flex flex-col items-center border border-white/30">
                      <button onClick={() => setModalBadge(null)} className="absolute top-4 right-4 text-slate-400"><X/></button>
                      <div className="text-7xl mb-4 animate-bounce mt-4">{modalBadge.icon}</div>
                      <h3 className="text-2xl font-bold text-[#4F6DAD] mb-1">{modalBadge.name}</h3>
-                     <div className="bg-slate-50 px-4 py-1.5 rounded-full mb-6 border border-slate-100 shadow-sm mt-2"><span className="text-xs text-slate-500 font-bold flex items-center gap-1"><Clock className="w-3 h-3"/> Dicapai: {modalBadge.date}</span></div>
+                     <div className="bg-white/50 px-4 py-1.5 rounded-full mb-6 border border-white/30 shadow-sm mt-2"><span className="text-xs text-slate-500 font-bold flex items-center gap-1"><Clock className="w-3 h-3"/> Dicapai: {modalBadge.date}</span></div>
                      <p className="text-slate-600 text-sm mb-8 px-4 text-center leading-relaxed">{modalBadge.desc}</p>
                      <button onClick={() => setModalBadge(null)} className="w-full bg-[#4F6DAD] text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2"><ArrowRight className="w-4 h-4"/> Tutup</button>
                   </div>
@@ -854,21 +852,21 @@
               
               {showHelpModal && (
                 <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-6 animate-fade-in">
-                  <div className="bg-white rounded-3xl p-6 w-full max-w-sm shadow-2xl relative">
+                  <div className="bg-white/90 backdrop-blur-md rounded-3xl p-6 w-full max-w-sm shadow-2xl relative border border-white/30">
                     <button onClick={() => setShowHelpModal(false)} className="absolute top-4 right-4 text-slate-400 hover:text-slate-600"><X className="w-5 h-5"/></button>
                     <div className="flex items-center gap-2 mb-6 text-red-600">
                       <AlertTriangle className="w-6 h-6"/>
                       <h3 className="text-xl font-bold">Bantuan Darurat</h3>
                     </div>
                     <div className="space-y-4">
-                      <a href="tel:119" className="flex items-center gap-4 p-4 bg-red-50 text-red-700 rounded-2xl border border-red-100 hover:bg-red-100 transition-colors">
+                      <a href="tel:119" className="flex items-center gap-4 p-4 bg-red-50/80 text-red-700 rounded-2xl border border-red-100 hover:bg-red-100/80 transition-colors">
                         <div className="bg-red-200 p-3 rounded-full"><Phone className="w-6 h-6"/></div>
                         <div>
                           <div className="font-bold text-lg">Panggil Ambulans</div>
                           <div className="text-xs opacity-70">Nomor Darurat: 119</div>
                         </div>
                       </a>
-                      <a href="https://www.intothelightid.org/tentang-bunuh-diri/layanan-konseling-psikolog-psikiater/" target="_blank" rel="noopener noreferrer" className="flex items-center gap-4 p-4 bg-blue-50 text-blue-700 rounded-2xl border border-blue-100 hover:bg-blue-100 transition-colors">
+                      <a href="https://www.intothelightid.org/tentang-bunuh-diri/layanan-konseling-psikolog-psikiater/" target="_blank" rel="noopener noreferrer" className="flex items-center gap-4 p-4 bg-blue-50/80 text-blue-700 rounded-2xl border border-blue-100 hover:bg-blue-100/80 transition-colors">
                         <div className="bg-blue-200 p-3 rounded-full"><Globe className="w-6 h-6"/></div>
                         <div>
                           <div className="font-bold text-lg">Layanan Profesional</div>
@@ -876,9 +874,6 @@
                         </div>
                       </a>
                     </div>
-                    <p className="text-center text-xs text-slate-400 mt-6 px-4">
-                      Jangan ragu untuk meminta bantuan. Anda tidak sendirian.
-                    </p>
                   </div>
                 </div>
               )}
diff --git a/app/src/main/java/com/example/ppb_kelompok2/DatabaseHelper.kt b/app/src/main/java/com/example/ppb_kelompok2/DatabaseHelper.kt
index e69de29..d984b8d 100644
--- a/app/src/main/java/com/example/ppb_kelompok2/DatabaseHelper.kt
+++ b/app/src/main/java/com/example/ppb_kelompok2/DatabaseHelper.kt
@@ -0,0 +1,56 @@
+package com.example.ppb_kelompok2
+
+import android.content.ContentValues
+import android.content.Context
+import android.database.sqlite.SQLiteDatabase
+import android.database.sqlite.SQLiteOpenHelper
+
+class DatabaseHelper(context: Context) : SQLiteOpenHelper(context, DATABASE_NAME, null, DATABASE_VERSION) {
+
+    companion object {
+        private const val DATABASE_NAME = "UserDB"
+        private const val DATABASE_VERSION = 1
+        private const val TABLE_USERS = "users"
+        private const val COLUMN_ID = "id"
+        private const val COLUMN_USERNAME = "username"
+        private const val COLUMN_PASSWORD = "password"
+    }
+
+    override fun onCreate(db: SQLiteDatabase?) {
+        val createTable = ("CREATE TABLE " + TABLE_USERS + "("
+                + COLUMN_ID + " INTEGER PRIMARY KEY AUTOINCREMENT,"
+                + COLUMN_USERNAME + " TEXT,"
+                + COLUMN_PASSWORD + " TEXT" + ")")
+        db?.execSQL(createTable)
+
+        // Insert a default user for testing
+        val values = ContentValues().apply {
+            put(COLUMN_USERNAME, "admin")
+            put(COLUMN_PASSWORD, "admin123")
+        }
+        db?.insert(TABLE_USERS, null, values)
+    }
+
+    override fun onUpgrade(db: SQLiteDatabase?, oldVersion: Int, newVersion: Int) {
+        db?.execSQL("DROP TABLE IF EXISTS $TABLE_USERS")
+        onCreate(db)
+    }
+
+    fun checkUser(username: String, password: String): Boolean {
+        val db = this.readableDatabase
+        val query = "SELECT * FROM $TABLE_USERS WHERE $COLUMN_USERNAME = ? AND $COLUMN_PASSWORD = ?"
+        val cursor = db.rawQuery(query, arrayOf(username, password))
+        val exists = cursor.count > 0
+        cursor.close()
+        return exists
+    }
+
+    fun registerUser(username: String, password: String): Long {
+        val db = this.writableDatabase
+        val values = ContentValues().apply {
+            put(COLUMN_USERNAME, username)
+            put(COLUMN_PASSWORD, password)
+        }
+        return db.insert(TABLE_USERS, null, values)
+    }
+}
diff --git a/app/src/main/java/com/example/ppb_kelompok2/MainActivity.kt b/app/src/main/java/com/example/ppb_kelompok2/MainActivity.kt
index 81c0483..fb9c80d 100644
--- a/app/src/main/java/com/example/ppb_kelompok2/MainActivity.kt
+++ b/app/src/main/java/com/example/ppb_kelompok2/MainActivity.kt
@@ -6,26 +6,163 @@ import android.view.ViewGroup
 import android.webkit.WebSettings
 import android.webkit.WebView
 import android.webkit.WebViewClient
+import android.widget.Toast
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Surface
-import androidx.compose.runtime.Composable
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.compose.ui.viewinterop.AndroidView
-
+import com.example.ppb_kelompok2.ui.theme.DarkBlue
+import com.example.ppb_kelompok2.ui.theme.LightBlue
+import com.example.ppb_kelompok2.ui.theme.PPB_Kelompok2Theme
+import com.example.ppb_kelompok2.ui.theme.White
+//jnfbshbs
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
+        val dbHelper = DatabaseHelper(this)
         setContent {
-            Surface(modifier = Modifier.fillMaxSize()) {
-                WebViewContainer()
+            PPB_Kelompok2Theme {
+                var isLoggedIn by remember { mutableStateOf(false) }
+                
+                // Latar belakang gradasi untuk seluruh aplikasi
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colors = listOf(LightBlue, DarkBlue, White)
+                            )
+                        )
+                ) {
+                    if (isLoggedIn) {
+                        WebViewContainer()
+                    } else {
+                        LoginRegisterScreen(dbHelper) {
+                            isLoggedIn = true
+                        }
+                    }
+                }
             }
         }
     }
-} //
+}
+
+@Composable
+fun LoginRegisterScreen(dbHelper: DatabaseHelper, onLoginSuccess: () -> Unit) {
+    var isLoginMode by remember { mutableStateOf(true) }
+    var username by remember { mutableStateOf("") }
+    var password by remember { mutableStateOf("") }
+    val context = LocalContext.current
+
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        // Judul Aplikasi
+        Text(
+            text = "PsyJournal",
+            style = MaterialTheme.typography.displayMedium,
+            color = White,
+            fontWeight = FontWeight.ExtraBold,
+            modifier = Modifier.padding(bottom = 32.dp)
+        )
+
+        Card(
+            modifier = Modifier
+                .padding(24.dp)
+                .fillMaxWidth(),
+            elevation = CardDefaults.cardElevation(defaultElevation = 12.dp),
+            colors = CardDefaults.cardColors(containerColor = Color.White.copy(alpha = 0.9f))
+        ) {
+            Column(
+                modifier = Modifier
+                    .padding(24.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center
+            ) {
+                Text(
+                    text = if (isLoginMode) "Login" else "Register",
+                    style = MaterialTheme.typography.headlineLarge,
+                    color = DarkBlue,
+                    fontWeight = FontWeight.Bold
+                )
+                Spacer(modifier = Modifier.height(24.dp))
+                
+                OutlinedTextField(
+                    value = username,
+                    onValueChange = { username = it },
+                    label = { Text("Username") },
+                    modifier = Modifier.fillMaxWidth(),
+                    singleLine = true
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+                
+                OutlinedTextField(
+                    value = password,
+                    onValueChange = { password = it },
+                    label = { Text("Password") },
+                    visualTransformation = PasswordVisualTransformation(),
+                    modifier = Modifier.fillMaxWidth(),
+                    singleLine = true
+                )
+                Spacer(modifier = Modifier.height(32.dp))
+                
+                Button(
+                    onClick = {
+                        if (username.isEmpty() || password.isEmpty()) {
+                            Toast.makeText(context, "Harap isi semua bidang", Toast.LENGTH_SHORT).show()
+                            return@Button
+                        }
+
+                        if (isLoginMode) {
+                            if (dbHelper.checkUser(username, password)) {
+                                Toast.makeText(context, "Login Berhasil!", Toast.LENGTH_SHORT).show()
+                                onLoginSuccess()
+                            } else {
+                                Toast.makeText(context, "Username atau Password salah", Toast.LENGTH_SHORT).show()
+                            }
+                        } else {
+                            val result = dbHelper.registerUser(username, password)
+                            if (result != -1L) {
+                                Toast.makeText(context, "Registrasi Berhasil! Silakan Login", Toast.LENGTH_SHORT).show()
+                                isLoginMode = true
+                            } else {
+                                Toast.makeText(context, "Registrasi Gagal", Toast.LENGTH_SHORT).show()
+                            }
+                        }
+                    },
+                    modifier = Modifier.fillMaxWidth(),
+                    colors = ButtonDefaults.buttonColors(containerColor = DarkBlue)
+                ) {
+                    Text(if (isLoginMode) "MASUK" else "DAFTAR", color = Color.White)
+                }
+                
+                TextButton(onClick = { isLoginMode = !isLoginMode }) {
+                    Text(
+                        text = if (isLoginMode) "Belum punya akun? Daftar di sini" else "Sudah punya akun? Login di sini",
+                        color = Color.Gray,
+                        fontSize = 14.sp
+                    )
+                }
+            }
+        }
+    }
+}
 
 @SuppressLint("SetJavaScriptEnabled")
 @Composable
@@ -38,7 +175,6 @@ fun WebViewContainer() {
                     ViewGroup.LayoutParams.MATCH_PARENT
                 )
                 
-                // Konfigurasi WebView agar React berjalan lancar
                 settings.apply {
                     javaScriptEnabled = true
                     domStorageEnabled = true
@@ -51,8 +187,8 @@ fun WebViewContainer() {
                 }
                 
                 webViewClient = WebViewClient()
-                
-                // Memuat file index.html dari folder assets
+                // Membuat latar belakang WebView transparan agar gradasi di bawahnya terlihat
+                setBackgroundColor(android.graphics.Color.TRANSPARENT)
                 loadUrl("file:///android_asset/index.html")
             }
         },
diff --git a/app/src/main/java/com/example/ppb_kelompok2/ui/theme/Color.kt b/app/src/main/java/com/example/ppb_kelompok2/ui/theme/Color.kt
index 68bcd44..d000332 100644
--- a/app/src/main/java/com/example/ppb_kelompok2/ui/theme/Color.kt
+++ b/app/src/main/java/com/example/ppb_kelompok2/ui/theme/Color.kt
@@ -8,4 +8,9 @@ val Pink80 = Color(0xFFEFB8C8)
 
 val Purple40 = Color(0xFF6650a4)
 val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
\ No newline at end of file
+val Pink40 = Color(0xFF7D5260)
+
+// Gradient Colors
+val LightBlue = Color(0xFFADD8E6)
+val DarkBlue = Color(0xFF00008B)
+val White = Color(0xFFFFFFFF)
