diff --git a/packages/client/src/components/Settings/ChatSettings.tsx b/packages/client/src/components/Settings/ChatSettings.tsx
index da65f53..fa90cb8 100644
--- a/packages/client/src/components/Settings/ChatSettings.tsx
+++ b/packages/client/src/components/Settings/ChatSettings.tsx
@@ -10,7 +10,11 @@ export const ChatSettings = () => {
   return (
     <>
       <header>
-        <Switch size="sm" isSelected={loadChat} onValueChange={setLoadChat} />
+        <Switch
+          size="sm"
+          isSelected={loadChat || false}
+          onValueChange={setLoadChat}
+        />
         <h2>Chat</h2>
       </header>
       <section>
diff --git a/packages/client/src/components/Settings/TemplateSettings.tsx b/packages/client/src/components/Settings/TemplateSettings.tsx
index 3c8ef27..f6666de 100644
--- a/packages/client/src/components/Settings/TemplateSettings.tsx
+++ b/packages/client/src/components/Settings/TemplateSettings.tsx
@@ -20,14 +20,18 @@ export const TemplateSettings = () => {
   return (
     <>
       <header>
-        <Switch size="sm" isSelected={enable} onValueChange={setEnable} />
+        <Switch
+          size="sm"
+          isSelected={enable || false}
+          onValueChange={setEnable}
+        />
         <h2>Template</h2>
       </header>
       <section>
         <Input
           label="Template URL"
           size="sm"
-          value={url}
+          value={url || ""}
           onValueChange={setURL}
         />
         <Input
@@ -36,7 +40,7 @@ export const TemplateSettings = () => {
           type="number"
           min="1"
           max={10_000}
-          value={width?.toString()}
+          value={width?.toString() || ""}
           onValueChange={(v) => setWidth(parseInt(v))}
         />
         <div className="flex flex-row gap-1">
@@ -44,14 +48,14 @@ export const TemplateSettings = () => {
             label="Template X"
             size="sm"
             type="number"
-            value={x.toString()}
+            value={x?.toString() || ""}
             onValueChange={(v) => setX(parseInt(v))}
           />
           <Input
             label="Template Y"
             size="sm"
             type="number"
-            value={y.toString()}
+            value={y?.toString() || ""}
             onValueChange={(v) => setY(parseInt(v))}
           />
         </div>
@@ -60,7 +64,7 @@ export const TemplateSettings = () => {
           step={1}
           minValue={0}
           maxValue={100}
-          value={opacity}
+          value={opacity || 100}
           onChange={(v) => setOpacity(v as number)}
           getValue={(v) => v + "%"}
         />