diff --git a/simple_todo_app/index.html b/simple_todo_app/index.html
index a7df94b..01a2c5d 100644
--- a/simple_todo_app/index.html
+++ b/simple_todo_app/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Stylish To-Do List App</title>
+    <title class="font-bold text-3xl shadow-lg">Stylish To-Do List App</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <style>
         body { transition: background-color 0.5s; }
@@ -13,16 +13,29 @@
         .theme-blue { background-color: #3b82f6; color: #f9fafb; }
         .theme-green { background-color: #10b981; color: #f9fafb; }
         .input-dark { background-color: #374151; color: #f9fafb; }
+        .input-gray { background-color: #374151; color: #f9fafb; }
+        .input-blue { background-color: #374151; color: #f9fafb; }
+        .input-green { background-color: #374151; color: #f9fafb; }
         .settings { display: none; transition: opacity 0.5s; }
         .settings.active { display: block; opacity: 1; }
         .settings.hidden { opacity: 0; }
         .todo-item-dark { background-color: #374151; color: #f9fafb; }
+        .todo-item-gray { background-color: #374151; color: #f9fafb; }
+        .todo-item-blue { background-color: #374151; color: #f9fafb; }
+        .todo-item-green { background-color: #374151; color: #f9fafb; }
         .rounded-btn { border-radius: 0.375rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
+        .title { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
+        .theme-light .input-dark { background-color: #e5e7eb; }
+        .theme-dark .input-dark { background-color: #374151; }
+        .theme-gray .input-dark { background-color: #4b5563; }
+        .theme-blue .input-dark { background-color: #1e3a8a; }
+        .theme-green .input-dark { background-color: #065f46; }
+
     </style>
 </head>
 <body class="theme-gray" id="body">
     <div class="max-w-md mx-auto p-5">
-        <h1 class="text-2xl font-bold text-center mb-4">To-Do List</h1>
+        <h1 class="title text-3xl font-bold text-center mb-4">To-Do List</h1>
         <input type="text" id="todo-input" placeholder="Add a new task..." class="border p-2 w-full mb-2" onkeypress="handleKeyPress(event)">
         <div class="flex space-x-2 mb-4">
             <button id="add-task-btn" onclick="addTodo()" class="bg-green-500 text-white p-2 flex items-center rounded-btn">
@@ -40,11 +53,14 @@ <h1 class="text-2xl font-bold text-center mb-4">To-Do List</h1>
             <button onclick="toggleSettings()" class="bg-gray-500 text-white p-2 flex items-center rounded-btn">
                 Settings
             </button>
+            <a href="https://github.com/ParisNeo/AI_Apps" target="_blank" class="bg-gray-800 text-white p-2 flex items-center rounded-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2C6.48 2 2 6.48 2 12c0 4.41 2.87 8.16 6.84 9.49.5.09.68-.22.68-.49 0-.24-.01-.87-.01-1.71-2.79.61-3.38-1.35-3.38-1.35-.45-1.14-1.1-1.44-1.1-1.44-.9-.61.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.53 2.34 1.09 2.91.83.09-.64.35-1.09.64-1.34-2.22-.25-4.56-1.11-4.56-4.93 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0112 6.84c.85.004 1.71.115 2.5.34 1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.83-2.35 4.68-4.58 4.93.36.31.68.92.68 1.85 0 1.34-.01 2.42-.01 2.75 0 .27.18.59.69.49C19.13 20.16 22 16.41 22 12c0-5.52-4.48-10-10-10z" /></svg>
+                GitHub
+            </a>
         </div>
         <ul id="todo-list" class="space-y-2"></ul>
         <div id="settings" class="settings hidden">
             <h2 class="text-xl font-bold mb-2">Settings</h2>
-            <button onclick="toggleSettings()" class="bg-red-500 text-white p-2 mb-4 rounded-btn">Back</button>
             <label for="theme-selector" class="block mb-2">Select Theme:</label>
             <select id="theme-selector" class="border p-2 w-full mb-4" onchange="changeTheme()">
                 <option value="gray">Gray Theme</option>
@@ -53,6 +69,7 @@ <h2 class="text-xl font-bold mb-2">Settings</h2>
                 <option value="blue">Blue Theme</option>
                 <option value="green">Green Theme</option>
             </select>
+            <button onclick="toggleSettings()" class="bg-red-500 text-white p-2 mb-4 rounded-btn">Back</button>
         </div>
     </div>
     <script>
@@ -141,11 +158,15 @@ <h2 class="text-xl font-bold mb-2">Settings</h2>
             const body = document.getElementById('body');
             const theme = document.getElementById('theme-selector').value;
             body.className = `theme-${theme}`;
-            document.getElementById('todo-input').className = theme === 'dark' ? 'border p-2 w-full mb-2 input-dark' : 'border p-2 w-full mb-2';
+            const inputClass = theme === 'dark' || theme === 'gray' || theme === 'blue' || theme === 'green' ? 'border p-2 w-full mb-2 input-dark' : 'border p-2 w-full mb-2';
+            const selectClass = theme === 'dark' || theme === 'gray' || theme === 'blue' || theme === 'green' ? 'border p-2 w-full mb-4 input-dark' : 'border p-2 w-full mb-4';
+            document.getElementById('todo-input').className = inputClass;
+            document.getElementById('theme-selector').className = selectClass;
             localStorage.setItem('theme', theme);
             renderTodos();
         }
 
+
         function toggleSettings() {
             const settings = document.getElementById('settings');
             const isActive = settings.classList.toggle('active');
@@ -157,7 +178,10 @@ <h2 class="text-xl font-bold mb-2">Settings</h2>
         function loadTodos() {
             const theme = localStorage.getItem('theme') || 'gray';
             document.getElementById('body').className = `theme-${theme}`;
-            document.getElementById('todo-input').className = theme === 'dark' ? 'border p-2 w-full mb-2 input-dark' : 'border p-2 w-full mb-2';
+            const inputClass = theme === 'dark' || theme === 'gray' || theme === 'blue' || theme === 'green' ? 'border p-2 w-full mb-2 input-dark' : 'border p-2 w-full mb-2';
+            const selectClass = theme === 'dark' || theme === 'gray' || theme === 'blue' || theme === 'green' ? 'border p-2 w-full mb-4 input-dark' : 'border p-2 w-full mb-4';
+            document.getElementById('todo-input').className = inputClass;
+            document.getElementById('theme-selector').className = selectClass;
             document.getElementById('theme-selector').value = theme;
             renderTodos();
         }
