diff --git a/html/demo-when_empty-task-planning.html b/html/demo-when_empty-task-planning.html
new file mode 100644
index 0000000..a5c97c5
--- /dev/null
+++ b/html/demo-when_empty-task-planning.html
@@ -0,0 +1,122 @@
+<en>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        :root {
+            --color_theme_primary: ##__COLOR_THEME_PRIMARY__##;
+            --color_theme_secondary: ##__COLOR_THEME_SECONDARY__##;
+            --color_theme_accent: ##__COLOR_THEME_ACCENT__##;
+            --color_theme_background: ##__COLOR_THEME_BACKGROUND__##;
+            --color_theme_surface: ##__COLOR_THEME_SURFACE__##;
+            --color_theme_neutral_light: ##__COLOR_THEME_NEUTRAL_LIGHT__##;
+            --color_theme_text_primary: ##__COLOR_THEME_TEXT_PRIMARY__##;
+            --color_theme_text_secondary: ##__COLOR_THEME_TEXT_SECONDARY__##;
+        }
+    </style>
+</head>
+<body>
+    <div class="no-results-container"
+        style="text-align: center; padding: 40px; background-color: var(--color_theme_background);">
+        <svg width="180" height="180" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <!-- Background elements -->
+            <circle cx="12" cy="12" r="11" fill="var(--color_theme_neutral_light)" />
+
+            <!-- Main search illustration -->
+            <g transform="translate(4, 4)">
+                <circle cx="7" cy="7" r="6" stroke="var(--color_theme_primary)" stroke-width="1.5"
+                    fill="var(--color_theme_surface)" />
+                <line x1="11.5" y1="11.5" x2="16" y2="16" stroke="var(--color_theme_primary)" stroke-width="1.5"
+                    stroke-linecap="round" />
+
+                <!-- Animated elements -->
+                <path d="M7 4.5v5" stroke="var(--color_theme_accent)" stroke-width="1.5" stroke-linecap="round">
+                    <animate attributeName="d" dur="1.5s" repeatCount="indefinite"
+                        values="M7 4.5v5;M7 6.5v1;M7 4.5v5" />
+                </path>
+            </g>
+
+            <!-- Decorative elements -->
+            <circle cx="18" cy="6" r="1" fill="var(--color_theme_secondary)">
+                <animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="0.3;1;0.3" />
+            </circle>
+            <circle cx="6" cy="18" r="1" fill="var(--color_theme_secondary)">
+                <animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="1;0.3;1" />
+            </circle>
+        </svg>
+
+        <div style="margin-top: 24px;">
+            <h3 style="color: var(--color_theme_text_primary); font-size: 20px; margin-bottom: 8px;">
+                No plans yet
+            </h3>
+            <p style="color: var(--color_theme_text_secondary); font-size: 14px; margin-bottom: 16px;">
+                Tap '+Planning' to create a new plan
+            </p>
+        </div>
+    </div>
+</body>
+</html>
+</en>
+<vi>
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        :root {
+            --color_theme_primary: ##__COLOR_THEME_PRIMARY__##;
+            --color_theme_secondary: ##__COLOR_THEME_SECONDARY__##;
+            --color_theme_accent: ##__COLOR_THEME_ACCENT__##;
+            --color_theme_background: ##__COLOR_THEME_BACKGROUND__##;
+            --color_theme_surface: ##__COLOR_THEME_SURFACE__##;
+            --color_theme_neutral_light: ##__COLOR_THEME_NEUTRAL_LIGHT__##;
+            --color_theme_text_primary: ##__COLOR_THEME_TEXT_PRIMARY__##;
+            --color_theme_text_secondary: ##__COLOR_THEME_TEXT_SECONDARY__##;
+        }
+    </style>
+</head>
+<body>
+    <div class="no-results-container"
+        style="text-align: center; padding: 40px; background-color: var(--color_theme_background);">
+        <svg width="180" height="180" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <!-- Background elements -->
+            <circle cx="12" cy="12" r="11" fill="var(--color_theme_neutral_light)" />
+
+            <!-- Main search illustration -->
+            <g transform="translate(4, 4)">
+                <circle cx="7" cy="7" r="6" stroke="var(--color_theme_primary)" stroke-width="1.5"
+                    fill="var(--color_theme_surface)" />
+                <line x1="11.5" y1="11.5" x2="16" y2="16" stroke="var(--color_theme_primary)" stroke-width="1.5"
+                    stroke-linecap="round" />
+
+                <!-- Animated elements -->
+                <path d="M7 4.5v5" stroke="var(--color_theme_accent)" stroke-width="1.5" stroke-linecap="round">
+                    <animate attributeName="d" dur="1.5s" repeatCount="indefinite"
+                        values="M7 4.5v5;M7 6.5v1;M7 4.5v5" />
+                </path>
+            </g>
+
+            <!-- Decorative elements -->
+            <circle cx="18" cy="6" r="1" fill="var(--color_theme_secondary)">
+                <animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="0.3;1;0.3" />
+            </circle>
+            <circle cx="6" cy="18" r="1" fill="var(--color_theme_secondary)">
+                <animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="1;0.3;1" />
+            </circle>
+        </svg>
+
+        <div style="margin-top: 24px;">
+            <h3 style="color: var(--color_theme_text_primary); font-size: 20px; margin-bottom: 8px;">
+                Chưa có kế hoạch nào
+            </h3>
+            <p style="color: var(--color_theme_text_secondary); font-size: 14px; margin-bottom: 16px;">
+                Nhấn '+Kế hoạch' để tạo kế hoạch mới
+            </p>
+        </div>
+    </div>
+</body>
+</html>
+</vi>
\ No newline at end of file
