diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 3cc6a5409..eb5296f9f 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
     import Template from './template.svelte';
 
-    import { AvatarInitials, Code } from '$lib/components';
+    import { AvatarInitials, Code, SvgIcon } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { useCompletion } from 'ai/svelte';
     import { subPanels } from '../subPanels';
 
     import { isLanguage, type Language } from '$lib/components/code.svelte';
-    import CoolerAppwrite from '$lib/images/appwrite-cooler.svg';
     import { VARS } from '$lib/system';
 
     const { input, handleSubmit, completion, isLoading, complete } = useCompletion({
@@ -106,7 +105,7 @@
         <div class="content">
             <div class="u-flex u-gap-8">
                 <div class="logo">
-                    <img src={CoolerAppwrite} alt="Appwrite logo" />
+                    <SvgIcon name="sparkles" type="color" />
                 </div>
                 <div class="answer">
                     {#if $isLoading && !$completion}
@@ -169,6 +168,14 @@
 </Template>
 
 <style lang="scss">
+    :global(.theme-dark) .content {
+        --logo-bg: #282a3b;
+    }
+
+    :global(.theme-light) .content {
+        --logo-bg: #f2f2f8;
+    }
+
     .content {
         overflow-y: auto;
         padding: 1rem;
@@ -182,7 +189,7 @@
             flex-shrink: 0;
 
             border-radius: 0.25rem;
-            background: #282a3b;
+            background: var(--logo-bg);
         }
 
         .answer {
@@ -192,29 +199,6 @@
                 white-space: pre-wrap;
             }
         }
-
-        h2 {
-            color: hsl(var(--color-neutral-70));
-        }
-
-        .examples {
-            display: flex;
-            flex-direction: column;
-
-            li {
-                padding: 0.59375rem 0.5rem;
-
-                button {
-                    &:hover {
-                        opacity: 0.75;
-                    }
-
-                    i {
-                        color: hsl(var(--color-neutral-70));
-                    }
-                }
-            }
-        }
     }
 
     .footer {
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 217c22c31..c277528b5 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -10,7 +10,7 @@
 
     import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
 
-    type Option = $$Generic<Command>;
+    type Option = $$Generic<Omit<Command, 'group'> & { group?: string }>;
     export let options: Option[] | null = null;
     export let search = '';
     export let searchPlaceholder = 'Search...';
diff --git a/static/icons/dark/color/sparkles.svg b/static/icons/dark/color/sparkles.svg
new file mode 100644
index 000000000..2b07d1760
--- /dev/null
+++ b/static/icons/dark/color/sparkles.svg
@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5.55229 2 6 2.44772 6 3V4H7C7.55229 4 8 4.44772 8 5C8 5.55228 7.55229 6 7 6H6V7C6 7.55228 5.55229 8 5 8C4.44772 8 4 7.55228 4 7V6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H4V3C4 2.44772 4.44772 2 5 2ZM5 12C5.55229 12 6 12.4477 6 13V14H7C7.55229 14 8 14.4477 8 15C8 15.5523 7.55229 16 7 16H6V17C6 17.5523 5.55229 18 5 18C4.44772 18 4 17.5523 4 17V16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H4V13C4 12.4477 4.44772 12 5 12Z" fill="url(#paint0_linear_1513_36621)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2C12.4537 2 12.8505 2.30548 12.9667 2.74411L14.1459 7.19893L17.4997 9.13381C17.8092 9.3124 17.9999 9.64262 17.9999 10C17.9999 10.3574 17.8092 10.6876 17.4997 10.8662L14.1459 12.8011L12.9667 17.2559C12.8505 17.6945 12.4537 18 11.9999 18C11.5462 18 11.1494 17.6945 11.0332 17.2559L9.85402 12.8011L6.50027 10.8662C6.19072 10.6876 6 10.3574 6 10C6 9.64262 6.19072 9.31241 6.50027 9.13382L9.85402 7.19893L11.0332 2.74411C11.1494 2.30548 11.5462 2 11.9999 2Z" fill="url(#paint1_linear_1513_36621)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5.55229 2 6 2.44772 6 3V4H7C7.55229 4 8 4.44772 8 5C8 5.55228 7.55229 6 7 6H6V7C6 7.55228 5.55229 8 5 8C4.44772 8 4 7.55228 4 7V6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H4V3C4 2.44772 4.44772 2 5 2ZM5 12C5.55229 12 6 12.4477 6 13V14H7C7.55229 14 8 14.4477 8 15C8 15.5523 7.55229 16 7 16H6V17C6 17.5523 5.55229 18 5 18C4.44772 18 4 17.5523 4 17V16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H4V13C4 12.4477 4.44772 12 5 12Z" stroke="url(#paint2_linear_1513_36621)" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2C12.4537 2 12.8505 2.30548 12.9667 2.74411L14.1459 7.19893L17.4997 9.13381C17.8092 9.3124 17.9999 9.64262 17.9999 10C17.9999 10.3574 17.8092 10.6876 17.4997 10.8662L14.1459 12.8011L12.9667 17.2559C12.8505 17.6945 12.4537 18 11.9999 18C11.5462 18 11.1494 17.6945 11.0332 17.2559L9.85402 12.8011L6.50027 10.8662C6.19072 10.6876 6 10.3574 6 10C6 9.64262 6.19072 9.31241 6.50027 9.13382L9.85402 7.19893L11.0332 2.74411C11.1494 2.30548 11.5462 2 11.9999 2Z" stroke="url(#paint3_linear_1513_36621)" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1513_36621" x1="9.99998" y1="-5" x2="9.99998" y2="31.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1513_36621" x1="9.99998" y1="-5" x2="9.99998" y2="31.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1513_36621" x1="9.99997" y1="2" x2="9.99997" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1513_36621" x1="9.99997" y1="2" x2="9.99997" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/sparkles.svg b/static/icons/light/color/sparkles.svg
new file mode 100644
index 000000000..ccfa91b97
--- /dev/null
+++ b/static/icons/light/color/sparkles.svg
@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5.55229 2 6 2.44772 6 3V4H7C7.55229 4 8 4.44772 8 5C8 5.55228 7.55229 6 7 6H6V7C6 7.55228 5.55229 8 5 8C4.44772 8 4 7.55228 4 7V6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H4V3C4 2.44772 4.44772 2 5 2ZM5 12C5.55229 12 6 12.4477 6 13V14H7C7.55229 14 8 14.4477 8 15C8 15.5523 7.55229 16 7 16H6V17C6 17.5523 5.55229 18 5 18C4.44772 18 4 17.5523 4 17V16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H4V13C4 12.4477 4.44772 12 5 12Z" fill="url(#paint0_linear_1513_36627)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2C12.4537 2 12.8505 2.30548 12.9667 2.74411L14.1459 7.19893L17.4997 9.13381C17.8092 9.3124 17.9999 9.64262 17.9999 10C17.9999 10.3574 17.8092 10.6876 17.4997 10.8662L14.1459 12.8011L12.9667 17.2559C12.8505 17.6945 12.4537 18 11.9999 18C11.5462 18 11.1494 17.6945 11.0332 17.2559L9.85402 12.8011L6.50027 10.8662C6.19072 10.6876 6 10.3574 6 10C6 9.64262 6.19072 9.31241 6.50027 9.13382L9.85402 7.19893L11.0332 2.74411C11.1494 2.30548 11.5462 2 11.9999 2Z" fill="url(#paint1_linear_1513_36627)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5.55229 2 6 2.44772 6 3V4H7C7.55229 4 8 4.44772 8 5C8 5.55228 7.55229 6 7 6H6V7C6 7.55228 5.55229 8 5 8C4.44772 8 4 7.55228 4 7V6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H4V3C4 2.44772 4.44772 2 5 2ZM5 12C5.55229 12 6 12.4477 6 13V14H7C7.55229 14 8 14.4477 8 15C8 15.5523 7.55229 16 7 16H6V17C6 17.5523 5.55229 18 5 18C4.44772 18 4 17.5523 4 17V16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H4V13C4 12.4477 4.44772 12 5 12Z" stroke="url(#paint2_linear_1513_36627)" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2C12.4537 2 12.8505 2.30548 12.9667 2.74411L14.1459 7.19893L17.4997 9.13381C17.8092 9.3124 17.9999 9.64262 17.9999 10C17.9999 10.3574 17.8092 10.6876 17.4997 10.8662L14.1459 12.8011L12.9667 17.2559C12.8505 17.6945 12.4537 18 11.9999 18C11.5462 18 11.1494 17.6945 11.0332 17.2559L9.85402 12.8011L6.50027 10.8662C6.19072 10.6876 6 10.3574 6 10C6 9.64262 6.19072 9.31241 6.50027 9.13382L9.85402 7.19893L11.0332 2.74411C11.1494 2.30548 11.5462 2 11.9999 2Z" stroke="url(#paint3_linear_1513_36627)" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1513_36627" x1="9.99998" y1="-5" x2="9.99998" y2="31.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1513_36627" x1="9.99998" y1="-5" x2="9.99998" y2="31.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1513_36627" x1="9.99997" y1="2" x2="9.99997" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1513_36627" x1="9.99997" y1="2" x2="9.99997" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>