diff --git a/packages/frontend/src/lib/Card.svelte b/packages/frontend/src/lib/Card.svelte
index 2383d8fa9..18ccb26b9 100644
--- a/packages/frontend/src/lib/Card.svelte
+++ b/packages/frontend/src/lib/Card.svelte
@@ -22,7 +22,7 @@ export let primaryBackground: string = 'bg-charcoal-800';
           <button
             on:click="{() => dispatch('click')}"
             class="{primaryBackground} rounded-full w-8 h-8 flex items-center justify-center mr-3">
-            <Fa size="20" class="text-purple-500 cursor-pointer" icon="{icon}" />
+            <Fa size="1.25x" class="text-purple-500 cursor-pointer" icon="{icon}" />
           </button>
         {/if}
         {#if title}
diff --git a/packages/frontend/src/lib/Checkbox.svelte b/packages/frontend/src/lib/Checkbox.svelte
index cf2ba2b17..f70c44d40 100644
--- a/packages/frontend/src/lib/Checkbox.svelte
+++ b/packages/frontend/src/lib/Checkbox.svelte
@@ -31,13 +31,13 @@ function onClick(checked: boolean) {
     class:cursor-pointer="{!disabled}"
     class:cursor-not-allowed="{disabled}">
     {#if disabled}
-      <Fa size="18" icon="{faSquare}" class="text-charcoal-300" />
+      <Fa size="1.125x" icon="{faSquare}" class="text-charcoal-300" />
     {:else if indeterminate}
-      <Fa size="18" icon="{faMinusSquare}" class="text-dustypurple-500" />
+      <Fa size="1.125x" icon="{faMinusSquare}" class="text-dustypurple-500" />
     {:else if checked}
-      <Fa size="18" icon="{faCheckSquare}" class="text-purple-500" />
+      <Fa size="1.125x" icon="{faCheckSquare}" class="text-purple-500" />
     {:else}
-      <Fa size="18" icon="{faOutlineSquare}" class="text-gray-400" />
+      <Fa size="1.125x" icon="{faOutlineSquare}" class="text-gray-400" />
     {/if}
   </div>
 </label>
diff --git a/packages/frontend/src/lib/ErrorMessage.svelte b/packages/frontend/src/lib/ErrorMessage.svelte
index d286e2497..0ed44120f 100644
--- a/packages/frontend/src/lib/ErrorMessage.svelte
+++ b/packages/frontend/src/lib/ErrorMessage.svelte
@@ -10,14 +10,14 @@ export let icon = false;
 {#if icon}
   {#if error !== undefined && error !== ''}
     <Tooltip tip="{error}" top>
-      <Fa size="18" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
+      <Fa size="1.125x" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
     </Tooltip>
   {/if}
 {:else}
   <div
     class="text-red-500 p-1 flex flex-row items-center {$$props.class}"
     class:opacity-0="{error === undefined || error === ''}">
-    <Fa size="18" class="cursor-pointer text-red-500" icon="{faExclamationCircle}" />
+    <Fa size="1.125x" class="cursor-pointer text-red-500" icon="{faExclamationCircle}" />
     <div role="alert" aria-label="Error Message Content" class="ml-2">{error}</div>
   </div>
 {/if}
diff --git a/packages/frontend/src/lib/NavPage.svelte b/packages/frontend/src/lib/NavPage.svelte
index a565f0333..3463c058a 100644
--- a/packages/frontend/src/lib/NavPage.svelte
+++ b/packages/frontend/src/lib/NavPage.svelte
@@ -18,7 +18,7 @@ export let contentBackground = '';
         <div class="flex flex-row">
           {#if icon}
             <div class="bg-charcoal-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">
-              <Fa size="20" class="text-purple-500" icon="{icon}" />
+              <Fa size="1.125x" class="text-purple-500" icon="{icon}" />
             </div>
           {/if}
           <h1 class="text-xl first-letter:uppercase">{title}</h1>
diff --git a/packages/frontend/src/lib/Navigation.svelte b/packages/frontend/src/lib/Navigation.svelte
index 672aff7b9..942c653ae 100644
--- a/packages/frontend/src/lib/Navigation.svelte
+++ b/packages/frontend/src/lib/Navigation.svelte
@@ -12,7 +12,7 @@ export let meta: TinroRouteMeta;
   aria-label="PreferencesNavigation">
   <div class="flex items-center">
     <div class="pt-4 px-5 mb-10 flex items-center">
-      <Fa size="24" class="text-purple-500 cursor-pointer mr-4" icon="{faBrain}" />
+      <Fa size="1.5x" class="text-purple-500 cursor-pointer mr-4" icon="{faBrain}" />
       <p class="text-xl first-letter:uppercase">AI Studio</p>
     </div>
   </div>
diff --git a/packages/frontend/src/lib/RecipeDetails.svelte b/packages/frontend/src/lib/RecipeDetails.svelte
index 810613006..408b9264b 100644
--- a/packages/frontend/src/lib/RecipeDetails.svelte
+++ b/packages/frontend/src/lib/RecipeDetails.svelte
@@ -167,10 +167,12 @@ function startApplication() {
         <div class="flex flex-col space-y-2 w-[45px]">
           <div class="text-base">Repository</div>
           <div class="cursor-pointer flex text-nowrap items-center">
-            <Fa size="lg" icon="{faGithub}" />
-            <div class="text-sm ml-2">
-              <a on:click="{onClickRepository}">{getDisplayName(recipe?.repository)}</a>
-            </div>
+            <button on:click="{onClickRepository}">
+              <div class="flex flex-row p-0 m-0 bg-transparent justify-center items-center space-x-2">
+                <Fa size="lg" icon="{faGithub}" />
+                <span>{getDisplayName(recipe?.repository)}</span>
+              </div>
+            </button>
           </div>
         </div>
         {#if localPath}
diff --git a/packages/frontend/src/pages/ModelPlayground.svelte b/packages/frontend/src/pages/ModelPlayground.svelte
index 156c11f43..e6a719d20 100644
--- a/packages/frontend/src/pages/ModelPlayground.svelte
+++ b/packages/frontend/src/pages/ModelPlayground.svelte
@@ -8,11 +8,12 @@ import type { QueryState } from '@shared/src/models/IPlaygroundQueryState';
 import { playgroundStates } from '/@/stores/playground-states';
 import type { PlaygroundState } from '@shared/src/models/IPlaygroundState';
 import Card from '/@/lib/Card.svelte';
-export let model: ModelInfo | undefined;
 import { faPlay, faStop, faInfo, faWarning } from '@fortawesome/free-solid-svg-icons';
 import ContainerIcon from '/@/lib/images/ContainerIcon.svelte';
 import ErrorMessage from '/@/lib/ErrorMessage.svelte';
 
+export let model: ModelInfo | undefined;
+
 let prompt = '';
 let queryId: number;
 $: result = '';
@@ -41,11 +42,13 @@ onMount(() => {
   });
 
   const unsubscribeStates = playgroundStates.subscribe((states: PlaygroundState[]) => {
-    playgroundState = states.find(state => state.modelId === model.id);
-    if (playgroundState === undefined) {
-      playgroundState = { modelId: model.id, status: 'none' };
+    if (model) {
+      playgroundState = states.find(state => state.modelId === model?.id);
+      if (playgroundState === undefined) {
+        playgroundState = { modelId: model.id, status: 'none' };
+      }
+      error = playgroundState.error ?? error;
     }
-    error = playgroundState.error ?? error;
   });
 
   return () => {