diff --git a/src/main/resources/static/app.js b/src/main/resources/static/app.js
index 293f51a..f416823 100644
--- a/src/main/resources/static/app.js
+++ b/src/main/resources/static/app.js
@@ -3,25 +3,11 @@ const API_BASE = '/api/tasks';
 const taskInput = document.getElementById('taskInput');
 const addBtn = document.getElementById('addBtn');
 const taskList = document.getElementById('taskList');
-const totalCount = document.getElementById('totalCount');
-const pendingCount = document.getElementById('pendingCount');
-const doneCount = document.getElementById('doneCount');
-
-function updateStats(tasks) {
-    const total = tasks.length;
-    const done = tasks.filter(t => t.completed).length;
-    const pending = total - done;
-
-    totalCount.textContent = total;
-    pendingCount.textContent = pending;
-    doneCount.textContent = done;
-}
 
 async function fetchTasks() {
     try {
         const response = await fetch(API_BASE);
         const tasks = await response.json();
-        updateStats(tasks);
         renderTasks(tasks);
     } catch (error) {
         console.error('Error fetching tasks:', error);
@@ -32,64 +18,29 @@ function renderTasks(tasks) {
     taskList.innerHTML = '';
 
     if (tasks.length === 0) {
-        taskList.innerHTML = `
-            <div class="empty-state">
-                <span class="empty-icon">/</span>
-                no tasks yet
-                <div class="empty-hint">type above to add your first task</div>
-            </div>
-        `;
+        taskList.innerHTML = '<div class="empty-state">No tasks yet. Add one above!</div>';
         return;
     }
 
-    // Show pending tasks first, then completed
-    const sorted = [...tasks].sort((a, b) => {
-        if (a.completed !== b.completed) return a.completed ? 1 : -1;
-        return 0;
-    });
-
-    sorted.forEach((task, index) => {
+    tasks.forEach(task => {
         const li = document.createElement('li');
         li.className = `task-item ${task.completed ? 'completed' : ''}`;
-        li.style.animationDelay = `${index * 0.04}s`;
-
-        const indexSpan = document.createElement('span');
-        indexSpan.className = 'task-index';
-        indexSpan.textContent = String(index + 1).padStart(2, '0');
-
-        const checkboxWrapper = document.createElement('label');
-        checkboxWrapper.className = 'checkbox-wrapper';
 
         const checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
         checkbox.checked = task.completed;
         checkbox.addEventListener('change', () => toggleTask(task));
 
-        const checkboxCustom = document.createElement('span');
-        checkboxCustom.className = 'checkbox-custom';
-        checkboxCustom.innerHTML = `<svg viewBox="0 0 12 12"><polyline points="2 6 5 9 10 3"></polyline></svg>`;
-
-        checkboxWrapper.appendChild(checkbox);
-        checkboxWrapper.appendChild(checkboxCustom);
-
-        const nameSpan = document.createElement('span');
-        nameSpan.className = 'task-name';
-        nameSpan.textContent = task.name;
+        const span = document.createElement('span');
+        span.textContent = task.name;
 
         const deleteBtn = document.createElement('button');
         deleteBtn.className = 'delete-btn';
-        deleteBtn.textContent = 'del';
-        deleteBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            li.style.transition = 'all 0.3s ease';
-            li.style.opacity = '0';
-            li.style.transform = 'translateX(20px)';
-            setTimeout(() => deleteTask(task.id), 250);
-        });
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.addEventListener('click', () => deleteTask(task.id));
 
-        li.appendChild(indexSpan);
-        li.appendChild(checkboxWrapper);
-        li.appendChild(nameSpan);
+        li.appendChild(checkbox);
+        li.appendChild(span);
         li.appendChild(deleteBtn);
         taskList.appendChild(li);
     });
@@ -97,13 +48,7 @@ function renderTasks(tasks) {
 
 async function addTask() {
     const name = taskInput.value.trim();
-    if (!name) {
-        // Subtle shake on empty submit
-        taskInput.parentElement.style.animation = 'none';
-        taskInput.parentElement.offsetHeight; // reflow
-        taskInput.parentElement.style.animation = 'shake 0.4s ease';
-        return;
-    }
+    if (!name) return;
 
     try {
         const response = await fetch(API_BASE, {
@@ -158,19 +103,6 @@ async function deleteTask(id) {
     }
 }
 
-// Add shake animation dynamically
-const styleEl = document.createElement('style');
-styleEl.textContent = `
-    @keyframes shake {
-        0%, 100% { transform: translateX(0); }
-        20% { transform: translateX(-4px); }
-        40% { transform: translateX(4px); }
-        60% { transform: translateX(-3px); }
-        80% { transform: translateX(2px); }
-    }
-`;
-document.head.appendChild(styleEl);
-
 addBtn.addEventListener('click', addTask);
 taskInput.addEventListener('keypress', (e) => {
     if (e.key === 'Enter') {
@@ -178,9 +110,4 @@ taskInput.addEventListener('keypress', (e) => {
     }
 });
 
-// Focus input on page load
-window.addEventListener('load', () => {
-    taskInput.focus();
-});
-
 fetchTasks();
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index b268439..4bee4ff 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -3,28 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>todo.</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
+    <title>Todo App</title>
     <style>
-        :root {
-            --bg: #0a0a0a;
-            --surface: #141414;
-            --surface-hover: #1a1a1a;
-            --border: #222;
-            --border-accent: #333;
-            --text: #e8e8e8;
-            --text-muted: #666;
-            --text-dim: #444;
-            --accent: #c8ff00;
-            --accent-dim: rgba(200, 255, 0, 0.08);
-            --danger: #ff3b30;
-            --danger-dim: rgba(255, 59, 48, 0.1);
-            --mono: 'DM Mono', monospace;
-            --serif: 'Instrument Serif', serif;
-        }
-
         * {
             margin: 0;
             padding: 0;
@@ -32,223 +12,67 @@
         }
 
         body {
-            font-family: var(--mono);
-            background: var(--bg);
-            color: var(--text);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
         }
 
-        /* Grain overlay */
-        body::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            opacity: 0.035;
-            pointer-events: none;
-            z-index: 1000;
-            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-            background-repeat: repeat;
-            background-size: 128px 128px;
-        }
-
-        /* Ambient glow */
-        .ambient-glow {
-            position: fixed;
-            width: 600px;
-            height: 600px;
-            border-radius: 50%;
-            filter: blur(200px);
-            opacity: 0.07;
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .glow-1 {
-            top: -200px;
-            right: -100px;
-            background: var(--accent);
-        }
-
-        .glow-2 {
-            bottom: -300px;
-            left: -200px;
-            background: #ff3b30;
-        }
-
-        /* Layout */
-        .app {
-            position: relative;
-            z-index: 1;
-            max-width: 720px;
-            margin: 0 auto;
-            padding: 60px 24px 100px;
-        }
-
-        /* Header */
-        .header {
-            margin-bottom: 60px;
-            position: relative;
-        }
-
-        .header-label {
-            font-size: 11px;
-            text-transform: uppercase;
-            letter-spacing: 0.2em;
-            color: var(--text-muted);
-            margin-bottom: 12px;
-            font-weight: 400;
-        }
-
-        .header-title {
-            font-family: var(--serif);
-            font-size: clamp(4rem, 12vw, 7rem);
-            font-weight: 400;
-            font-style: italic;
-            line-height: 0.85;
-            letter-spacing: -0.03em;
-            color: var(--text);
-            position: relative;
-        }
-
-        .header-title .dot {
-            color: var(--accent);
-        }
-
-        .header-rule {
+        .container {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
             width: 100%;
-            height: 1px;
-            background: var(--border);
-            margin-top: 24px;
-            position: relative;
+            max-width: 600px;
+            padding: 40px;
         }
 
-        .header-rule::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 80px;
-            height: 1px;
-            background: var(--accent);
+        h1 {
+            color: #333;
+            margin-bottom: 30px;
+            text-align: center;
+            font-size: 2.5rem;
         }
 
-        /* Stats bar */
-        .stats {
+        .input-container {
             display: flex;
-            gap: 32px;
-            margin-top: 20px;
-            font-size: 11px;
-            text-transform: uppercase;
-            letter-spacing: 0.15em;
-            color: var(--text-dim);
-        }
-
-        .stats span {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .stats .count {
-            font-size: 13px;
-            color: var(--text-muted);
-            font-weight: 500;
-        }
-
-        .stats .accent-count {
-            color: var(--accent);
-        }
-
-        /* Input area */
-        .input-area {
-            position: relative;
-            margin-bottom: 48px;
-        }
-
-        .input-wrapper {
-            display: flex;
-            align-items: stretch;
-            border: 1px solid var(--border);
-            border-radius: 2px;
-            background: var(--surface);
-            overflow: hidden;
-            transition: border-color 0.3s ease;
-        }
-
-        .input-wrapper:focus-within {
-            border-color: var(--accent);
-            box-shadow: 0 0 0 1px var(--accent), 0 0 40px rgba(200, 255, 0, 0.04);
-        }
-
-        .input-prefix {
-            display: flex;
-            align-items: center;
-            padding: 0 16px;
-            color: var(--text-dim);
-            font-size: 14px;
-            border-right: 1px solid var(--border);
-            user-select: none;
+            gap: 10px;
+            margin-bottom: 30px;
         }
 
         #taskInput {
             flex: 1;
-            padding: 18px 20px;
-            background: transparent;
-            border: none;
-            color: var(--text);
-            font-family: var(--mono);
-            font-size: 14px;
-            outline: none;
-            font-weight: 300;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: border-color 0.3s;
         }
 
-        #taskInput::placeholder {
-            color: var(--text-dim);
+        #taskInput:focus {
+            outline: none;
+            border-color: #667eea;
         }
 
         #addBtn {
-            padding: 18px 28px;
-            background: transparent;
-            color: var(--accent);
+            padding: 12px 24px;
+            background: #667eea;
+            color: white;
             border: none;
-            border-left: 1px solid var(--border);
-            font-family: var(--mono);
-            font-size: 11px;
-            font-weight: 500;
-            letter-spacing: 0.15em;
-            text-transform: uppercase;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
             cursor: pointer;
-            transition: all 0.2s ease;
-            white-space: nowrap;
+            transition: background 0.3s;
         }
 
         #addBtn:hover {
-            background: var(--accent);
-            color: var(--bg);
+            background: #5568d3;
         }
 
-        /* Section label */
-        .section-label {
-            font-size: 10px;
-            text-transform: uppercase;
-            letter-spacing: 0.25em;
-            color: var(--text-dim);
-            margin-bottom: 16px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .section-label::after {
-            content: '';
-            flex: 1;
-            height: 1px;
-            background: var(--border);
-        }
-
-        /* Task list */
         #taskList {
             list-style: none;
         }
@@ -256,310 +80,72 @@
         .task-item {
             display: flex;
             align-items: center;
-            gap: 16px;
-            padding: 16px 20px;
-            border: 1px solid transparent;
-            border-bottom: 1px solid var(--border);
-            cursor: default;
-            transition: all 0.2s ease;
-            position: relative;
-            animation: taskSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
-        }
-
-        .task-item:first-child {
-            border-top: 1px solid var(--border);
+            gap: 12px;
+            padding: 16px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            margin-bottom: 12px;
+            transition: all 0.3s;
         }
 
         .task-item:hover {
-            background: var(--surface);
-            border-color: var(--border);
+            background: #e9ecef;
+            transform: translateY(-2px);
         }
 
-        .task-item:hover .task-index {
-            color: var(--accent);
-        }
-
-        /* Task index number */
-        .task-index {
-            font-size: 10px;
-            color: var(--text-dim);
-            min-width: 20px;
-            font-weight: 500;
-            transition: color 0.2s ease;
-            user-select: none;
-        }
-
-        /* Custom checkbox */
-        .checkbox-wrapper {
-            position: relative;
-            width: 20px;
-            height: 20px;
-            flex-shrink: 0;
-        }
-
-        .checkbox-wrapper input {
-            position: absolute;
-            opacity: 0;
-            cursor: pointer;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-        }
-
-        .checkbox-custom {
-            position: absolute;
-            inset: 0;
-            border: 1.5px solid var(--border-accent);
-            border-radius: 2px;
-            transition: all 0.3s ease;
-        }
-
-        .checkbox-wrapper input:hover + .checkbox-custom {
-            border-color: var(--accent);
-        }
-
-        .checkbox-wrapper input:checked + .checkbox-custom {
-            border-color: var(--accent);
-            background: var(--accent);
-        }
-
-        .checkbox-custom svg {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 10px;
-            height: 10px;
-            opacity: 0;
-            transition: opacity 0.2s ease;
-        }
-
-        .checkbox-wrapper input:checked + .checkbox-custom svg {
-            opacity: 1;
-        }
-
-        .checkbox-custom svg polyline {
-            stroke: var(--bg);
-            stroke-width: 2.5;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            fill: none;
-            stroke-dasharray: 20;
-            stroke-dashoffset: 20;
-            transition: stroke-dashoffset 0.3s ease 0.1s;
-        }
-
-        .checkbox-wrapper input:checked + .checkbox-custom svg polyline {
-            stroke-dashoffset: 0;
-        }
-
-        /* Task text */
-        .task-name {
-            flex: 1;
-            font-size: 14px;
-            font-weight: 300;
-            color: var(--text);
-            transition: all 0.3s ease;
-            line-height: 1.4;
-        }
-
-        .task-item.completed .task-name {
-            color: var(--text-dim);
-            text-decoration: line-through;
-            text-decoration-color: var(--text-dim);
-        }
-
-        .task-item.completed .task-index {
-            color: var(--text-dim);
-            opacity: 0.5;
-        }
-
-        /* Delete button */
-        .delete-btn {
-            opacity: 0;
-            padding: 6px 12px;
-            background: transparent;
-            color: var(--danger);
-            border: 1px solid transparent;
-            border-radius: 2px;
-            font-family: var(--mono);
-            font-size: 10px;
-            letter-spacing: 0.1em;
-            text-transform: uppercase;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .task-item:hover .delete-btn {
-            opacity: 1;
-        }
-
-        .delete-btn:hover {
-            background: var(--danger-dim);
-            border-color: var(--danger);
-        }
-
-        /* Task slide in animation */
-        @keyframes taskSlideIn {
-            from {
-                opacity: 0;
-                transform: translateY(8px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Empty state */
-        .empty-state {
-            text-align: center;
-            padding: 80px 40px;
-            color: var(--text-dim);
-            font-size: 13px;
-            font-weight: 300;
-            letter-spacing: 0.05em;
-            position: relative;
-        }
-
-        .empty-state .empty-icon {
-            font-size: 32px;
-            margin-bottom: 16px;
-            opacity: 0.3;
-            display: block;
-        }
-
-        .empty-state .empty-hint {
-            margin-top: 8px;
-            font-size: 11px;
-            color: var(--text-dim);
+        .task-item.completed {
             opacity: 0.6;
         }
 
-        /* Keyboard hint */
-        .keyboard-hint {
-            position: fixed;
-            bottom: 24px;
-            left: 50%;
-            transform: translateX(-50%);
-            font-size: 10px;
-            color: var(--text-dim);
-            letter-spacing: 0.15em;
-            text-transform: uppercase;
-            opacity: 0.4;
-            display: flex;
-            align-items: center;
-            gap: 8px;
+        .task-item input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
         }
 
-        .kbd {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 2px 7px;
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 3px;
-            font-size: 10px;
-            line-height: 1.4;
+        .task-item span {
+            flex: 1;
+            font-size: 16px;
+            color: #333;
         }
 
-        /* Page load animation */
-        .app {
-            animation: pageIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+        .task-item.completed span {
+            text-decoration: line-through;
+            color: #999;
         }
 
-        @keyframes pageIn {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+        .delete-btn {
+            padding: 8px 16px;
+            background: #dc3545;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background 0.3s;
         }
 
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 6px;
+        .delete-btn:hover {
+            background: #c82333;
         }
 
-        ::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: var(--border);
-            border-radius: 3px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--border-accent);
-        }
-
-        /* Selection */
-        ::selection {
-            background: var(--accent);
-            color: var(--bg);
-        }
-
-        /* Responsive */
-        @media (max-width: 540px) {
-            .app {
-                padding: 40px 16px 80px;
-            }
-
-            .header-title {
-                font-size: 3.5rem;
-            }
-
-            .stats {
-                gap: 20px;
-            }
-
-            .input-prefix {
-                display: none;
-            }
-
-            .keyboard-hint {
-                display: none;
-            }
+        .empty-state {
+            text-align: center;
+            color: #999;
+            padding: 40px;
+            font-size: 18px;
         }
     </style>
 </head>
 <body>
-    <div class="ambient-glow glow-1"></div>
-    <div class="ambient-glow glow-2"></div>
-
-    <div class="app">
-        <header class="header">
-            <div class="header-label">task manager</div>
-            <h1 class="header-title">todo<span class="dot">.</span></h1>
-            <div class="header-rule"></div>
-            <div class="stats">
-                <span><span class="count accent-count" id="totalCount">0</span> total</span>
-                <span><span class="count" id="pendingCount">0</span> pending</span>
-                <span><span class="count" id="doneCount">0</span> done</span>
-            </div>
-        </header>
-
-        <div class="input-area">
-            <div class="input-wrapper">
-                <div class="input-prefix">+</div>
-                <input type="text" id="taskInput" placeholder="what needs to be done?" autocomplete="off" spellcheck="false" />
-                <button id="addBtn">Add</button>
-            </div>
+    <div class="container">
+        <h1>Todo List</h1>
+        <div class="input-container">
+            <input type="text" id="taskInput" placeholder="Add a new task..." />
+            <button id="addBtn">Add Task</button>
         </div>
-
-        <div class="section-label">Tasks</div>
         <ul id="taskList"></ul>
     </div>
-
-    <div class="keyboard-hint">
-        press <span class="kbd">Enter</span> to add
-    </div>
-
     <script src="app.js"></script>
 </body>
 </html>