diff --git a/package-lock.json b/package-lock.json
index 1f99321..a7d9fba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "typescript": "^5.4.5"
       },
       "devDependencies": {
+        "@iconify-json/lucide": "^1.1.188",
         "@tailwindcss/typography": "^0.5.13",
         "@types/color": "^3.0.6",
         "color": "^4.2.3",
@@ -1196,6 +1197,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/@iconify-json/lucide": {
+      "version": "1.1.188",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.188.tgz",
+      "integrity": "sha512-yJNoU7vX11OvdeSKBiAvmbk/etAq2HPCZQkZX1U687NZhn8dTfx1PfyNhPxtJilrd288XGDKK+NQgygcZ+Ho4g==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/tools": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-3.0.7.tgz",
diff --git a/package.json b/package.json
index cc26b36..51c16ba 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "typescript": "^5.4.5"
   },
   "devDependencies": {
+    "@iconify-json/lucide": "^1.1.188",
     "@tailwindcss/typography": "^0.5.13",
     "@types/color": "^3.0.6",
     "color": "^4.2.3",
diff --git a/src/example/description.mdx b/src/example/description.mdx
index 0154846..445a5bb 100644
--- a/src/example/description.mdx
+++ b/src/example/description.mdx
@@ -1,3 +1,5 @@
+import { Icon } from 'astro-icon/components';
+
 # Платежные системы
 
 Необходимо выполнить интеграцию с тремя платежными системами, реализовав следующие операции:
@@ -19,14 +21,9 @@ TODO: объяснение операций, что такое `amount`.
 - Использует логику расчета `payment` и уменьшает итоговое значение на `4`
 
 <div class="flex flex-col gap-3">
-  <div class="collapse bg-base-300 rounded-md">
-    <input type="radio" name="my-accordion-1" />
-    <div class="collapse-title text-xl font-medium">Hint 1</div>
+  <div class="collapse outline outline-1">
+    <input type="checkbox" />
+    <div class="flex items-center gap-1 collapse-title"><Icon name="lucide:lightbulb" />Hint 1</div>
     <div class="collapse-content">Используй фабрику</div>
   </div>
-  <div class="collapse bg-base-300 rounded-md">
-    <input type="radio" name="my-accordion-1" />
-    <div class="collapse-title text-xl font-medium">Hint 2</div>
-    <div class="collapse-content">Используй голову</div>
-  </div>
 </div>
diff --git a/src/pages/example.astro b/src/pages/example.astro
index 31aa2b2..9f43481 100644
--- a/src/pages/example.astro
+++ b/src/pages/example.astro
@@ -1,4 +1,6 @@
 ---
+import { Icon } from 'astro-icon/components';
+
 import Problem from "@/layouts/problem.astro";
 
 import { Content as Description } from "@/example/description.mdx";
@@ -16,12 +18,12 @@ import { Content as Description } from "@/example/description.mdx";
         <div class="breadcrumbs">
           <ul>
             <li><a>Design Patterns</a></li>
-            <li>Creational patterns</li>
           </ul>
         </div>
-        <select class="select select-ghost ml-auto">
-          <option> PHP </option>
-        </select>
+        <button class="btn btn-ghost ml-auto">
+          Sign in
+          <Icon name="lucide:log-in" />
+        </button>
       </div>
       <div class="prose prose-lg max-w-none">
         <Description />
@@ -30,6 +32,14 @@ import { Content as Description } from "@/example/description.mdx";
   </div>
   <div slot="editor" class="flex flex-col h-full">
     <div id="code-editor" class="grow"></div>
+    <div class="p-4 bg-base-300 border-t border-base-100 flex items-center gap-3">
+      <button class="btn btn-sm btn-primary" >
+        Run
+      </button>
+      <select class="select select-sm select-ghost ml-auto">
+        <option> PHP </option>
+      </select>
+    </div>
   </div>
 </Problem>