diff --git a/ai-filter.sln b/ai-filter.sln
index 619e643..243c1c1 100644
--- a/ai-filter.sln
+++ b/ai-filter.sln
@@ -48,6 +48,21 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "content", "content", "{028F
 		content\filterEditor.js = content\filterEditor.js
 	EndProjectSection
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "prompt_templates", "prompt_templates", "{86516D53-50D4-4FE2-9D8A-977A8F5EBDBD}"
+	ProjectSection(SolutionItems) = preProject
+		prompt_templates\mistral.txt = prompt_templates\mistral.txt
+		prompt_templates\openai.txt = prompt_templates\openai.txt
+		prompt_templates\qwen.txt = prompt_templates\qwen.txt
+	EndProjectSection
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "resources", "resources", "{68A87938-5C2B-49F5-8AAA-8A34FBBFD854}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "img", "img", "{F266602F-1755-4A95-A11B-6C90C701C5BF}"
+	ProjectSection(SolutionItems) = preProject
+		resources\img\full-logo.png = resources\img\full-logo.png
+		resources\img\logo.png = resources\img\logo.png
+	EndProjectSection
+EndProject
 Global
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -60,5 +75,8 @@ Global
 		{8BEA7793-3336-40ED-AB96-7FFB09FEB0F6} = {D446E5C6-BDDE-4091-BD1A-EC57170003CF}
 		{B334FFB0-4BD2-496E-BDC4-786620E019DA} = {F2C8C786-FA23-4B63-934C-8CAA39D9BF95}
 		{028FDA4B-AC3E-4A0E-9291-978E213F9B78} = {BCC6E6D2-343B-4C48-854D-5FE3BBC3CB70}
+		{86516D53-50D4-4FE2-9D8A-977A8F5EBDBD} = {BCC6E6D2-343B-4C48-854D-5FE3BBC3CB70}
+		{68A87938-5C2B-49F5-8AAA-8A34FBBFD854} = {BCC6E6D2-343B-4C48-854D-5FE3BBC3CB70}
+		{F266602F-1755-4A95-A11B-6C90C701C5BF} = {68A87938-5C2B-49F5-8AAA-8A34FBBFD854}
 	EndGlobalSection
 EndGlobal
diff --git a/options/options.html b/options/options.html
index d567186..992fc1d 100644
--- a/options/options.html
+++ b/options/options.html
@@ -1,23 +1,151 @@
 ﻿<!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>AI Filter Options</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f9f9f9;
+            color: #333;
+        }
+
+        header {
+            background-color: #ffffff;
+            padding: 20px 30px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+            header img {
+                max-height: 40px;
+            }
+
+        main {
+            max-width: 700px;
+            margin: 30px auto;
+            padding: 0 20px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #222;
+        }
+
+        input[type="text"],
+        select,
+        textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-size: 14px;
+            background-color: #fff;
+            transition: border-color 0.3s;
+        }
+
+            input[type="text"]:focus,
+            select:focus,
+            textarea:focus {
+                border-color: #007acc;
+                outline: none;
+            }
+
+        textarea {
+            resize: vertical;
+        }
+
+        .placeholder-text {
+            color: #888;
+            font-style: italic;
+        }
+
+        .button-group {
+            margin-top: 20px;
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+
+        button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+        }
+
+            button#save {
+                background-color: #007acc;
+                color: white;
+            }
+
+                button#save:hover {
+                    background-color: #005fa3;
+                }
+
+            button#reset-system {
+                background-color: #f44336;
+                color: white;
+            }
+
+                button#reset-system:hover {
+                    background-color: #d32f2f;
+                }
+
+        @media (max-width: 600px) {
+            main {
+                margin: 20px 15px;
+            }
+        }
+    </style>
 </head>
 <body>
-    <label>Endpoint: <input id="endpoint" type="text"></label><br>
-    <label>Prompt template:
-        <select id="template"></select>
-    </label><br>
-    <div id="custom-template-container" style="display:none">
-        <label>Custom template</label><br>
-        <textarea id="custom-template" rows="6" cols="60"></textarea>
-        <p>Placeholders: {{system}}, {{email}}, {{operator}}, {{query}}</p>
-    </div>
-    <label>System instructions:</label><br>
-    <textarea id="system-instructions" rows="4" cols="60"></textarea>
-    <button id="reset-system">Reset to default</button><br>
-    <button id="save">Save</button>
+    <header>
+        <img src="../resources/img/full-logo.png" alt="AI Filter Logo">
+    </header>
+
+    <main>
+        <div class="form-group">
+            <label for="endpoint">Endpoint:</label>
+            <input type="text" id="endpoint" placeholder="https://api.example.com">
+        </div>
+
+        <div class="form-group">
+            <label for="template">Prompt template:</label>
+            <select id="template">
+            </select>
+        </div>
+
+        <div id="custom-template-container" class="form-group" style="display:none">
+            <label>Custom template</label>
+            <textarea id="custom-template" rows="6" cols="60" placeholder="Enter your custom template here..."></textarea>
+            <p class="placeholder-text">Placeholders: {{system}}, {{email}}, {{operator}}, {{query}}</p>
+        </div>
+
+        <div class="form-group">
+            <label for="system-instructions">System instructions:</label>
+            <textarea id="system-instructions" rows="4" cols="60" placeholder="Enter system instructions..."></textarea>
+        </div>
+
+        <div class="button-group">
+            <button id="reset-system">Reset to default</button>
+            <button id="save">Save</button>
+        </div>
+    </main>
+
     <script src="options.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/img/full-logo.png b/resources/img/full-logo.png
new file mode 100644
index 0000000..baf1d52
Binary files /dev/null and b/resources/img/full-logo.png differ
diff --git a/resources/img/logo.png b/resources/img/logo.png
new file mode 100644
index 0000000..c991e5d
Binary files /dev/null and b/resources/img/logo.png differ
