diff --git a/src/lib/stores/marketplace.ts b/src/lib/stores/marketplace.ts
index 5c95eb771a..f4b8cb55b5 100644
--- a/src/lib/stores/marketplace.ts
+++ b/src/lib/stores/marketplace.ts
@@ -12,34 +12,40 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Starter'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/starter'
             },
             {
-                name: 'php-8.0',
+                name: 'php',
                 commands: 'composer install',
                 entrypoint: 'src/index.php',
                 providerRootDirectory: 'php/starter'
             },
             {
-                name: 'ruby-3.0',
+                name: 'ruby',
                 commands: 'bundle install',
                 entrypoint: 'lib/main.rb',
                 providerRootDirectory: 'ruby/starter'
             },
             {
-                name: 'python-3.9',
+                name: 'python',
                 commands: 'pip install -r requirements.txt',
                 entrypoint: 'src/main.py',
                 providerRootDirectory: 'python/starter'
             },
             {
-                name: 'dart-2.17',
+                name: 'dart',
                 commands: 'dart pub get',
                 entrypoint: 'lib/main.dart',
                 providerRootDirectory: 'dart/starter'
+            },
+            {
+                name: 'bun',
+                commands: 'bun install',
+                entrypoint: 'src/main.ts',
+                providerRootDirectory: 'bun/starter'
             }
         ],
         instructions: `For documentation and instructions check out <a target="_blank" rel="noopener noreferrer" class="link" href="https://github.com/appwrite/templates/tree/main/node/starter">file</a>.`,
@@ -70,25 +76,25 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['AI'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/prompt-chatgpt'
             },
             {
-                name: 'python-3.9',
+                name: 'python',
                 commands: 'pip install -r requirements.txt',
                 entrypoint: 'src/main.py',
                 providerRootDirectory: 'python/prompt_chatgpt'
             },
             {
-                name: 'php-8.0',
+                name: 'php',
                 commands: 'composer install',
                 entrypoint: 'src/index.php',
                 providerRootDirectory: 'php/prompt-chatgpt'
             },
             {
-                name: 'dart-2.17',
+                name: 'dart',
                 commands: 'dart pub get',
                 entrypoint: 'lib/main.dart',
                 providerRootDirectory: 'dart/prompt_chatgpt'
@@ -130,13 +136,13 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Messaging'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install && npm run setup',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/discord-command-bot'
             },
             {
-                name: 'python-3.9',
+                name: 'python',
                 commands: 'pip install -r requirements.txt && python src/setup.py',
                 entrypoint: 'src/main.py',
                 providerRootDirectory: 'python/discord_command_bot'
@@ -186,7 +192,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['AI'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/analyze-with-perspectiveapi'
@@ -221,19 +227,19 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['AI'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/censor-with-redact'
             },
             {
-                name: 'python-3.9',
+                name: 'python',
                 commands: 'pip install -r requirements.txt',
                 entrypoint: 'src/main.py',
                 providerRootDirectory: 'python/censor_with_redact'
             },
             {
-                name: 'dart-2.17',
+                name: 'dart',
                 commands: 'dart pub get',
                 entrypoint: 'lib/main.dart',
                 providerRootDirectory: 'dart/censor_with_redact'
@@ -267,7 +273,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Utilities'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/generate-pdf'
@@ -293,7 +299,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Dev Tools'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/github-issue-bot'
@@ -335,7 +341,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Utilities'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/url-shortener'
@@ -401,19 +407,19 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Databases'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/sync-with-algolia'
             },
             {
-                name: 'python-3.9',
+                name: 'python',
                 commands: 'pip install -r requirements.txt',
                 entrypoint: 'src/main.py',
                 providerRootDirectory: 'python/sync_with_algolia'
             },
             {
-                name: 'php-8.0',
+                name: 'php',
                 commands: 'composer install',
                 entrypoint: 'src/index.php',
                 providerRootDirectory: 'php/sync-with-algolia'
@@ -490,7 +496,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Databases'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/sync-with-meilisearch'
@@ -574,7 +580,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Messaging'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/whatsapp-with-vonage'
@@ -629,7 +635,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Messaging'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/push-notification-with-fcm'
@@ -684,19 +690,19 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Utilities'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/email-contact-form'
             },
             {
-                name: 'python-3.9',
+                name: 'python',
                 commands: 'pip install -r requirements.txt',
                 entrypoint: 'src/main.py',
                 providerRootDirectory: 'python/email_contact_form'
             },
             {
-                name: 'php-8.0',
+                name: 'php',
                 commands: 'composer install',
                 entrypoint: 'src/index.php',
                 providerRootDirectory: 'php/email-contact-form'
@@ -766,7 +772,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Utilities'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/subscriptions-with-stripe'
@@ -822,7 +828,7 @@ export const marketplace: MarketplaceTemplate[] = [
         usecases: ['Utilities'],
         runtimes: [
             {
-                name: 'node-18.0',
+                name: 'node',
                 commands: 'npm install && npm run setup',
                 entrypoint: 'src/main.js',
                 providerRootDirectory: 'node/payments-with-stripe'
@@ -932,7 +938,7 @@ Template:
         "timeout": 15,
         "runtimes": [
             {
-                "name": "node-18",
+                "name": "node",
                 "entrypoint": "src/main.js",
                 "commands": "npm install"
             }
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index 189ed47d27..d84ee5b650 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -1,21 +1,21 @@
 <script context="module" lang="ts">
     import CreateTemplate from './createTemplate.svelte';
 
-    export function connectTemplate(template: MarketplaceTemplate, runtime: string | null = null) {
+    export function connectTemplate(
+        template: MarketplaceTemplate,
+        forceLanguage: string | null = null
+    ) {
         const variables: Record<string, string> = {};
         template.variables.forEach((variable) => {
             variables[variable.name] = variable.value ?? '';
         });
 
-        if (!runtime) {
-            runtime = template.runtimes[0].name;
-        }
-
         templateStore.set(template);
         templateConfig.set({
             $id: null,
-            runtime,
             name: template.name,
+            language: forceLanguage,
+            runtime: null,
             variables,
             repositoryBehaviour: 'new',
             repositoryName: template.id,
@@ -106,12 +106,15 @@
                                 </li>
                             {/each}
                         {:then response}
-                            {@const runtimes = new Map(response.runtimes.map((r) => [r.$id, r]))}
-                            {@const templates = quickStart.runtimes.filter((_template) =>
-                                runtimes.has(_template.name)
-                            )}
+                            {@const templates = quickStart.runtimes.filter((_template) => {
+                                return response.runtimes.some((runtime) =>
+                                    runtime.$id.includes(_template.name)
+                                );
+                            })}
                             {#each templates.slice(0, 6) as template}
-                                {@const runtimeDetail = runtimes.get(template.name)}
+                                {@const runtimeDetail = response.runtimes?.find((runtime) =>
+                                    runtime?.$id?.includes(template.name)
+                                )}
                                 <li>
                                     <button
                                         on:click={() => {
@@ -128,13 +131,11 @@
                                         <div class="avatar is-size-small">
                                             <img
                                                 style:--p-text-size="1.25rem"
-                                                src={`${base}/icons/${$app.themeInUse}/color/${
-                                                    template.name.split('-')[0]
-                                                }.svg`}
+                                                src={`${base}/icons/${$app.themeInUse}/color/${template.name}.svg`}
                                                 alt={template.name} />
                                         </div>
                                         <div class="body-text-2">
-                                            {runtimeDetail.name}
+                                            {runtimeDetail?.name ?? template.name}
                                         </div>
                                     </button>
                                 </li>
diff --git a/src/lib/wizards/functions/createTemplate.svelte b/src/lib/wizards/functions/createTemplate.svelte
index be15272431..36f56a87b9 100644
--- a/src/lib/wizards/functions/createTemplate.svelte
+++ b/src/lib/wizards/functions/createTemplate.svelte
@@ -19,8 +19,8 @@
 
     async function create() {
         try {
-            const runtimeDetail = $template.runtimes.find(
-                (r) => r.name === $templateConfig.runtime
+            const runtimeDetail = $template.runtimes.find((r) =>
+                $templateConfig.runtime.includes(r.name)
             );
             if ($templateConfig.appwriteApiKey) {
                 $templateConfig.variables['APPWRITE_API_KEY'] = $templateConfig.appwriteApiKey;
diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 49be494b63..e47021bf1b 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -15,16 +15,22 @@
     }
 
     async function loadRuntimes() {
-        const options = (await $runtimesList).runtimes
+        const allowedRuntimes = (await $runtimesList).runtimes.filter((runtime) => {
+            if ($templateConfig.language) {
+                return runtime.$id.includes($templateConfig.language);
+            } else {
+                return $template.runtimes.some((templateRuntime) =>
+                    runtime.$id.includes(templateRuntime.name)
+                );
+            }
+        });
+        const options = allowedRuntimes
             .map((runtime) => ({
                 label: `${runtime.name} - ${runtime.version}`,
                 value: runtime.$id
             }))
-            .filter((runtime) => {
-                const allowedRuntimes = $template.runtimes.map((r) => r.name);
-                return allowedRuntimes.includes(runtime.value);
-            });
-
+            .reverse();
+        $templateConfig.runtime = options[0]?.value;
         return options;
     }
 </script>
@@ -54,7 +60,6 @@
             <InputSelect
                 label="Runtime"
                 id="runtime"
-                placeholder="Select runtime"
                 required
                 disabled={options.length <= 1}
                 {options}
diff --git a/src/lib/wizards/functions/store.ts b/src/lib/wizards/functions/store.ts
index e607c113bb..9517141b9b 100644
--- a/src/lib/wizards/functions/store.ts
+++ b/src/lib/wizards/functions/store.ts
@@ -7,6 +7,7 @@ export const template = writable<MarketplaceTemplate>();
 export const templateConfig = writable<{
     $id: string;
     name: string;
+    language: string;
     runtime: string;
     variables: { [key: string]: unknown };
     repositoryBehaviour: 'new' | 'existing';
diff --git a/src/routes/console/project-[project]/functions/templates/+page.svelte b/src/routes/console/project-[project]/functions/templates/+page.svelte
index 3e6c37fb44..fc9fdfcb0b 100644
--- a/src/routes/console/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/+page.svelte
@@ -13,7 +13,6 @@
     } from '$lib/components';
     import { Button, InputSearch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { app } from '$lib/stores/app';
     import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
 
     export let data;
@@ -39,23 +38,6 @@
         goto(target.toString());
     }
 
-    function getIconFromRuntime(runtime: string) {
-        switch (true) {
-            case runtime.includes('node'):
-                return 'node';
-            case runtime.includes('php'):
-                return 'php';
-            case runtime.includes('ruby'):
-                return 'ruby';
-            case runtime.includes('python'):
-                return 'python';
-            case runtime.includes('dart'):
-                return 'dart';
-            default:
-                return undefined;
-        }
-    }
-
     function applySearch(event: CustomEvent<string>) {
         const value = event.detail;
         const target = new URL($page.url);
@@ -108,7 +90,6 @@
                         <svelte:fragment slot="title">Runtime</svelte:fragment>
                         <ul class="form-list u-row-gap-16">
                             {#each [...data.runtimes] as runtime}
-                                {@const icon = getIconFromRuntime(runtime)}
                                 <li class="form-item">
                                     <label class="u-flex u-cross-center u-gap-16">
                                         <input
@@ -120,10 +101,10 @@
                                             on:change={(e) => applyFilter('runtime', runtime, e)} />
                                         <div class="u-flex u-cross-center u-gap-8">
                                             <div class="avatar is-size-x-small">
-                                                <SvgIcon name={icon} iconSize="small" />
+                                                <SvgIcon name={runtime} iconSize="small" />
                                             </div>
                                             <div class="u-trim-1 u-capitalize">
-                                                {runtime?.split('-')?.join(' ')}
+                                                {runtime}
                                             </div>
                                         </div>
                                     </label>
@@ -140,19 +121,20 @@
                     Have an idea for a function template? View our <a
                         class="link"
                         href="https://github.com/appwrite/templates/blob/main/CONTRIBUTING.md"
-                        target="_blank">contribution guidelines</a
+                        target="_blank"
+                        rel="noopener noreferrer">contribution guidelines</a
                     >.
                 </p>
             </section>
         </section>
         <section>
-            {#if data.templates.length > 0}
+            {#if data?.templates?.length}
                 <ul
                     class="grid-box"
                     style="--grid-item-size:22rem; --grid-item-size-small-screens:19rem">
                     {#each data.templates as template}
                         {@const displayed = template.runtimes.slice(0, 2)}
-                        {@const hidden = template.runtimes.slice(1, -1)}
+                        {@const hidden = template.runtimes.slice(2)}
                         <li>
                             <article class="card u-min-height-100-percent">
                                 <div class="u-flex u-gap-16 u-cross-center u-main-space-between">
@@ -161,16 +143,12 @@
                                     </h2>
                                     <ul class="avatars-group is-with-border">
                                         {#each displayed as runtime}
-                                            {@const icon = getIconFromRuntime(runtime.name)}
-                                            {#if icon}
+                                            {#if runtime.name}
                                                 <li class="avatars-group-item">
                                                     <div class="avatar is-size-small">
-                                                        <img
-                                                            style:--p-text-size="20px"
-                                                            src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
-                                                            alt={icon}
-                                                            aria-hidden="true"
-                                                            aria-label={icon} />
+                                                        <SvgIcon
+                                                            name={runtime.name}
+                                                            iconSize="medium" />
                                                     </div>
                                                 </li>
                                             {/if}
diff --git a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
index 7a8809820b..78a6fa9bda 100644
--- a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -52,7 +52,7 @@
                     <span class="u-flex u-cross-center u-gap-8">
                         <div class="avatar is-size-small">
                             <span
-                                style:--p-text-size="20px"
+                                style:--p-text-size="var(--icon-size-medium)"
                                 class={$template.icon}
                                 aria-hidden="true" />
                         </div>
diff --git a/src/routes/console/project-[project]/settings/smtp/+page.svelte b/src/routes/console/project-[project]/settings/smtp/+page.svelte
index cfe276fa43..b8254129c6 100644
--- a/src/routes/console/project-[project]/settings/smtp/+page.svelte
+++ b/src/routes/console/project-[project]/settings/smtp/+page.svelte
@@ -46,7 +46,7 @@
     async function updateSmtp() {
         try {
             if (!enabled) {
-                enabled = undefined;
+                enabled = false;
                 senderName = undefined;
                 senderEmail = undefined;
                 replyTo = undefined;
diff --git a/static/icons/dark/color/bun.svg b/static/icons/dark/color/bun.svg
new file mode 100644
index 0000000000..7ef15001d2
--- /dev/null
+++ b/static/icons/dark/color/bun.svg
@@ -0,0 +1 @@
+<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>
\ No newline at end of file
diff --git a/static/icons/light/color/bun.svg b/static/icons/light/color/bun.svg
new file mode 100644
index 0000000000..7ef15001d2
--- /dev/null
+++ b/static/icons/light/color/bun.svg
@@ -0,0 +1 @@
+<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>
\ No newline at end of file