diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 82fbe69..9cf17c5 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -6,7 +6,7 @@
     "message": "Select List:"
   },
   "new_list": {
-    "message": "+ New List"
+    "message": "New List"
   },
   "delete_list": {
     "message": "Delete List"
diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json
index 1524286..5dd5c48 100644
--- a/_locales/ru/messages.json
+++ b/_locales/ru/messages.json
@@ -6,7 +6,7 @@
     "message": "Выберите список:"
   },
   "new_list": {
-    "message": "+ Новый список"
+    "message": "Новый список"
   },
   "delete_list": {
     "message": "Удалить список"
diff --git a/popup/popup.css b/popup/popup.css
index 6a1d2d7..a3c8ccb 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,23 +1,48 @@
+:root {
+  --bg-color: #ffffff;
+  --text-color: #1a1a1a;
+  --input-bg: #f0f0f0;
+  --input-border: #ccc;
+  --button-bg: #007bff;
+  --button-hover: #0056b3;
+  --wordlist-bg: #f9f9f9;
+  --checkbox-accent: #007bff;
+}
+
+.dark {
+  --bg-color: #171717;
+  --text-color: #e0e0e0;
+  --input-bg: #1f1f1f;
+  --input-border: #333;
+  --button-bg: #2e7d32;
+  --button-hover: #388e3c;
+  --wordlist-bg: #1f1f1f;
+  --checkbox-accent: #4caf50;
+}
+
 body {
-  font-family: Arial, sans-serif;
+  font-family: 'Segoe UI', sans-serif;
   width: 360px;
   margin: 0;
   padding: 0;
-  background: #f9f9f9;
-  color: #333;
+  background: var(--bg-color);
+  color: var(--text-color);
+  transition: background 0.3s ease, color 0.3s ease;
 }
 
 .container {
-  padding: 10px;
+  padding: 16px;
 }
 
 h1 {
-  font-size: 1.4em;
-  margin-bottom: 10px;
+  font-size: 1.5em;
+  margin-bottom: 16px;
+  color: var(--text-color);
+  text-align: center;
 }
 
 .section {
-  margin-bottom: 12px;
+  margin-bottom: 16px;
 }
 
 input[type="text"],
@@ -25,38 +50,78 @@ textarea,
 select {
   width: 100%;
   box-sizing: border-box;
-  margin-top: 4px;
-  margin-bottom: 8px;
-  padding: 6px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
+  margin-top: 6px;
+  margin-bottom: 10px;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid var(--input-border);
+  background-color: var(--input-bg);
+  color: var(--text-color);
+  transition: background 0.3s, color 0.3s, border-color 0.3s;
 }
 
 textarea {
-  height: 60px;
+  height: 70px;
   resize: vertical;
 }
 
+input[type="color"] {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  accent-color: var(--checkbox-accent);
+  background-color: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  transform: scale(1.2);
+  cursor: pointer;
+}
+
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 4px;
+  height: 9px;
+  border: solid var(--checkbox-accent);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
 button {
   margin: 4px 2px;
-  padding: 6px 10px;
+  padding: 8px 12px;
   font-size: 0.9em;
   border: none;
-  border-radius: 4px;
-  background-color: #007bff;
+  border-radius: 6px;
+  background-color: var(--button-bg);
   color: white;
   cursor: pointer;
+  transition: background-color 0.2s ease;
 }
 
 button:hover {
-  background-color: #0056b3;
+  background-color: var(--button-hover);
 }
 
-#wordList > div {
+#wordList>div {
   display: flex;
   align-items: center;
   margin-bottom: 6px;
-  gap: 4px;
+  gap: 6px;
+  background: var(--wordlist-bg);
+  padding: 6px;
+  border-radius: 6px;
 }
 
 #wordList input[type="text"] {
@@ -64,14 +129,20 @@ button:hover {
 }
 
 #wordList input[type="color"] {
-  width: 30px;
-  height: 30px;
+  width: 28px;
+  height: 28px;
   padding: 0;
-  border: none;
+  border-radius: 4px;
 }
 
 label {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-size: 0.95em;
+}
+
+input[type="file"] {
+  display: none;
 }
\ No newline at end of file
diff --git a/popup/popup.html b/popup/popup.html
index 377cf75..fa7dc95 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -1,15 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title><span data-i18n="extension_name"></span></title>
-  <link rel="stylesheet" href="popup.css">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title data-i18n="extension_name">Goose Highlighter</title>
+  <link rel="stylesheet" href="popup.css" />
 </head>
+
 <body>
   <div class="container">
     <h1 data-i18n="extension_name">Goose Highlighter</h1>
 
+    <div class="section" style="text-align: right;">
+      <label>
+        <input type="checkbox" id="themeToggle" />
+        Dark Mode
+      </label>
+    </div>
+
     <div class="section">
       <label for="listSelect" data-i18n="select_list">Select List:</label>
       <select id="listSelect"></select>
@@ -18,10 +27,11 @@
     </div>
 
     <div class="section">
-      <label><span data-i18n="list_name">List Name:</span> <input type="text" id="listName"></label>
-      <label><span data-i18n="background">Background:</span> <input type="color" id="listBg"></label>
-      <label><span data-i18n="foreground">Foreground:</span> <input type="color" id="listFg"></label>
-      <label><input type="checkbox" id="listActive"> <span data-i18n="enable_highlight">Enable Highlight</span></label>
+      <label><span data-i18n="list_name">List Name:</span> <input type="text" id="listName" /></label>
+      <label><span data-i18n="background">Background:</span> <input type="color" id="listBg" /></label>
+      <label><span data-i18n="foreground">Foreground:</span> <input type="color" id="listFg" /></label>
+      <label><input type="checkbox" id="listActive" /> <span data-i18n="enable_highlight">Enable
+          Highlight</span></label>
     </div>
 
     <div class="section">
@@ -40,7 +50,7 @@
 
     <div class="section">
       <button id="importBtn" data-i18n="import_list">Import JSON</button>
-      <input type="file" id="importInput" accept="application/json" hidden>
+      <input type="file" id="importInput" accept="application/json" hidden />
       <button id="exportBtn" data-i18n="export_list">Export JSON</button>
     </div>
   </div>
@@ -48,4 +58,5 @@
   <script src="../storage.js"></script>
   <script src="popup.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/popup/popup.js b/popup/popup.js
index 9c520bc..e5be9ad 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -20,13 +20,13 @@ async function load() {
   const res = await chrome.storage.local.get("lists");
   lists = res.lists || [];
   if (!lists.length) {
-    lists.push({ 
-      id: Date.now(), 
-      name: chrome.i18n.getMessage("default_list_name"), 
-      background: "#ffff00", 
-      foreground: "#000000", 
-      active: true, 
-      words: [] 
+    lists.push({
+      id: Date.now(),
+      name: chrome.i18n.getMessage("default_list_name"),
+      background: "#ffff00",
+      foreground: "#000000",
+      active: true,
+      words: []
     });
   }
   renderLists();
@@ -67,13 +67,13 @@ listSelect.onchange = () => {
 };
 
 document.getElementById("newListBtn").onclick = () => {
-  lists.push({ 
-    id: Date.now(), 
-    name: chrome.i18n.getMessage("new_list_name"), 
-    background: "#ffff00", 
-    foreground: "#000000", 
-    active: true, 
-    words: [] 
+  lists.push({
+    id: Date.now(),
+    name: chrome.i18n.getMessage("new_list_name"),
+    background: "#ffff00",
+    foreground: "#000000",
+    active: true,
+    words: []
   });
   currentListIndex = lists.length - 1;
   save();
@@ -174,9 +174,7 @@ importInput.onchange = e => {
   reader.readAsText(file);
 };
 
-// Localize the page
 function localizePage() {
-  // Localize all elements with a data-i18n attribute
   const elements = document.querySelectorAll('[data-i18n]');
   elements.forEach(element => {
     const message = element.dataset.i18n;
@@ -191,7 +189,25 @@ function localizePage() {
   });
 }
 
-// Call this function when the page loads
 document.addEventListener('DOMContentLoaded', localizePage);
 
+const toggle = document.getElementById('themeToggle');
+const body = document.body;
+
+const savedTheme = localStorage.getItem('theme');
+if (savedTheme === 'dark') {
+  body.classList.add('dark');
+  toggle.checked = true;
+}
+
+toggle.addEventListener('change', () => {
+  if (toggle.checked) {
+    body.classList.add('dark');
+    localStorage.setItem('theme', 'dark');
+  } else {
+    body.classList.remove('dark');
+    localStorage.setItem('theme', 'light');
+  }
+});
+
 load();
\ No newline at end of file