diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
index e0dd6521..bee0bbe6 100644
--- a/packages/frontend/src/App.svelte
+++ b/packages/frontend/src/App.svelte
@@ -26,7 +26,7 @@ onMount(() => {
 });
 </script>
 
-<Route path="/*" breadcrumb="Bootable Containers" isAppMounted="{isMounted}" let:meta>
+<Route path="/*" breadcrumb="Bootable Containers" isAppMounted={isMounted} let:meta>
   <main class="flex flex-col w-screen h-screen overflow-hidden bg-[var(--pd-content-bg)]">
     <div class="flex flex-row w-full h-full overflow-hidden">
       <Route path="/" breadcrumb="Bootable Containers">
@@ -36,7 +36,7 @@ onMount(() => {
         <Build />
       </Route>
       <Route path="/build/:name/:tag" breadcrumb="Build" let:meta>
-        <Build imageName="{decodeURIComponent(meta.params.name)}" imageTag="{decodeURIComponent(meta.params.tag)}" />
+        <Build imageName={decodeURIComponent(meta.params.name)} imageTag={decodeURIComponent(meta.params.tag)} />
       </Route>
     </div>
   </main>
diff --git a/packages/frontend/src/Build.svelte b/packages/frontend/src/Build.svelte
index 90402b77..b40abd0f 100644
--- a/packages/frontend/src/Build.svelte
+++ b/packages/frontend/src/Build.svelte
@@ -380,45 +380,45 @@ export function goToHomePage(): void {
 
 <FormPage
   title="Build Disk Image"
-  inProgress="{buildInProgress}"
-  showBreadcrumb="{true}"
+  inProgress={buildInProgress}
+  showBreadcrumb={true}
   breadcrumbLeftPart="Bootable Containers"
   breadcrumbRightPart="Build Disk Image"
   breadcrumbTitle="Go back to homepage"
-  on:close="{goToHomePage}"
-  on:breadcrumbClick="{goToHomePage}">
+  on:close={goToHomePage}
+  on:breadcrumbClick={goToHomePage}>
   <DiskImageIcon slot="icon" size="30px" />
 
   <div slot="content" class="p-5 min-w-full h-fit">
     {#if success}
       <EmptyScreen
-        icon="{DiskImageIcon}"
+        icon={DiskImageIcon}
         title="Build task started"
         message="Check your progress by viewing the build container, or clicking the tasks button in the bottom right corner of Podman Desktop.">
         <Button
           class="py-3"
-          on:click="{() => {
+          on:click={() => {
             cleanup();
             router.goto('/');
-          }}">
+          }}>
           Go back
         </Button>
       </EmptyScreen>
     {:else if buildErrorMessage}
-      <EmptyScreen icon="{faTriangleExclamation}" title="Error with image build" message="{buildErrorMessage}">
+      <EmptyScreen icon={faTriangleExclamation} title="Error with image build" message={buildErrorMessage}>
         <Button
           class="py-3"
-          on:click="{() => {
+          on:click={() => {
             cleanup();
             router.goto('/');
-          }}">
+          }}>
           Go back
         </Button>
       </EmptyScreen>
     {:else}
       <div
         class="bg-[var(--pd-content-card-bg)] pt-5 space-y-6 px-8 sm:pb-6 xl:pb-8 rounded-lg text-[var(--pd-content-card-header-text)]">
-        <div class="{buildInProgress ? 'opacity-40 pointer-events-none' : ''}">
+        <div class={buildInProgress ? 'opacity-40 pointer-events-none' : ''}>
           <div class="pb-4">
             <label for="modalImageTag" class="block mb-2 font-semibold">Bootable container image</label>
             <div class="relative">
@@ -427,7 +427,7 @@ export function goToHomePage(): void {
                 class="rounded-lg block w-full p-2.5 bg-charcoal-600 pl-8 border-r-8 border-transparent outline-1 outline outline-gray-900 placeholder-gray-700 text-white"
                 name="imageChoice"
                 aria-label="image-select"
-                bind:value="{selectedImage}">
+                bind:value={selectedImage}>
                 <!-- Options go here -->
                 {#if !selectedImage}
                   <option value="" disabled selected>Select an image</option>
@@ -436,7 +436,7 @@ export function goToHomePage(): void {
                   {#each bootcAvailableImages as image}
                     <!-- Repo tags is an array, only show if it is > 0 and show the first one -->
                     {#if image.RepoTags && image.RepoTags.length > 0}
-                      <option value="{image.RepoTags[0]}">{image.RepoTags[0]}</option>
+                      <option value={image.RepoTags[0]}>{image.RepoTags[0]}</option>
                     {/if}
                   {/each}
                 {/if}
@@ -446,14 +446,14 @@ export function goToHomePage(): void {
                 <Fa
                   class="absolute left-0 top-0 ml-2 mt-3 text-[var(--pd-state-warning)]"
                   size="1x"
-                  icon="{faTriangleExclamation}" />
+                  icon={faTriangleExclamation} />
               {:else if selectedImage}
-                <Fa class="absolute left-0 top-0 ml-2 mt-3 text-[var(--pd-state-success)]" size="1x" icon="{faCube}" />
+                <Fa class="absolute left-0 top-0 ml-2 mt-3 text-[var(--pd-state-success)]" size="1x" icon={faCube} />
               {:else}
                 <Fa
                   class="absolute left-0 top-0 ml-2 mt-3 text-[var(--pd-state-warning)]"
                   size="1x"
-                  icon="{faQuestionCircle}" />
+                  icon={faQuestionCircle} />
               {/if}
             </div>
             {#if bootcAvailableImages.length === 0}
@@ -471,11 +471,11 @@ export function goToHomePage(): void {
               <Input
                 name="path"
                 id="path"
-                bind:value="{buildFolder}"
+                bind:value={buildFolder}
                 placeholder="Output folder"
                 class="w-full"
                 aria-label="folder-select" />
-              <Button on:click="{() => getPath()}">Browse...</Button>
+              <Button on:click={() => getPath()}>Browse...</Button>
             </div>
           </div>
           <div class="pt-3 space-y-3 h-fit">
@@ -483,33 +483,33 @@ export function goToHomePage(): void {
               <span class="text-md font-semibold mb-2 block">Disk image type</span>
               <div class="flex flex-col ml-1 space-y-2">
                 <Checkbox
-                  checked="{buildType.includes('raw')}"
+                  checked={buildType.includes('raw')}
                   title="raw-checkbox"
-                  on:click="{e => updateBuildType('raw', e.detail)}">
+                  on:click={e => updateBuildType('raw', e.detail)}>
                   RAW image with partition table (*.raw)
                 </Checkbox>
                 <Checkbox
-                  checked="{buildType.includes('qcow2')}"
+                  checked={buildType.includes('qcow2')}
                   title="qcow2-checkbox"
-                  on:click="{e => updateBuildType('qcow2', e.detail)}">
+                  on:click={e => updateBuildType('qcow2', e.detail)}>
                   Virtualization Guest Image (*.qcow2)
                 </Checkbox>
                 <Checkbox
-                  checked="{buildType.includes('iso')}"
+                  checked={buildType.includes('iso')}
                   title="iso-checkbox"
-                  on:click="{e => updateBuildType('iso', e.detail)}">
+                  on:click={e => updateBuildType('iso', e.detail)}>
                   Unattended Baremetal Installer (*.iso)
                 </Checkbox>
                 <Checkbox
-                  checked="{buildType.includes('vmdk')}"
+                  checked={buildType.includes('vmdk')}
                   title="vmdk-checkbox"
-                  on:click="{e => updateBuildType('vmdk', e.detail)}">
+                  on:click={e => updateBuildType('vmdk', e.detail)}>
                   Virtual Machine Disk image (*.vmdk)
                 </Checkbox>
                 <Checkbox
-                  checked="{buildType.includes('ami')}"
+                  checked={buildType.includes('ami')}
                   title="ami-checkbox"
-                  on:click="{e => updateBuildType('ami', e.detail)}">
+                  on:click={e => updateBuildType('ami', e.detail)}>
                   Amazon Machine Image (*.ami)
                 </Checkbox>
               </div>
@@ -519,8 +519,8 @@ export function goToHomePage(): void {
               <div class="flex items-center mb-3 space-x-3">
                 <label for="defaultFs" class="ml-1 flex items-center cursor-pointer" aria-label="default-radio">
                   <input
-                    bind:group="{buildFilesystem}"
-                    disabled="{fedoraDetected}"
+                    bind:group={buildFilesystem}
+                    disabled={fedoraDetected}
                     type="radio"
                     id="defaultFs"
                     name="filesystem"
@@ -530,11 +530,11 @@ export function goToHomePage(): void {
                   <div
                     class="w-4 h-4 rounded-full border-2 border-[var(--pd-input-checkbox-unchecked)] mr-2 peer-checked:border-[var(--pd-input-checkbox-checked)] peer-checked:bg-[var(--pd-input-checkbox-checked)]">
                   </div>
-                  <span class="{fedoraDetected ? 'text-[var(--pd-input-field-disabled-text)]' : ''}">Default</span>
+                  <span class={fedoraDetected ? 'text-[var(--pd-input-field-disabled-text)]' : ''}>Default</span>
                 </label>
                 <label for="xfsFs" class="ml-1 flex items-center cursor-pointer" aria-label="xfs-radio">
                   <input
-                    bind:group="{buildFilesystem}"
+                    bind:group={buildFilesystem}
                     type="radio"
                     id="xfsFs"
                     name="filesystem"
@@ -548,7 +548,7 @@ export function goToHomePage(): void {
                 </label>
                 <label for="ext4Fs" class="ml-1 flex items-center cursor-pointer" aria-label="ext4-radio">
                   <input
-                    bind:group="{buildFilesystem}"
+                    bind:group={buildFilesystem}
                     type="radio"
                     id="ext4Fs"
                     name="filesystem"
@@ -575,14 +575,14 @@ export function goToHomePage(): void {
               <ul class="grid grid-cols-2 gap-x-2 max-w-md">
                 <li>
                   <input
-                    bind:group="{buildArch}"
+                    bind:group={buildArch}
                     type="radio"
                     id="arm64"
                     name="arch"
                     value="arm64"
                     class="sr-only peer"
                     aria-label="arm64-select"
-                    disabled="{!availableArchitectures.includes('arm64')}" />
+                    disabled={!availableArchitectures.includes('arm64')} />
                   <label
                     for="arm64"
                     class="h-full flex items-center p-5 cursor-pointer rounded-md bg-[var(--pd-content-card-inset-bg)] focus:outline-none border-[var(--pd-content-card-border-selected)] peer-checked:bg-[var(--pd-content-card-hover-inset-bg)] {availableArchitectures.includes(
@@ -598,14 +598,14 @@ export function goToHomePage(): void {
                 </li>
                 <li>
                   <input
-                    bind:group="{buildArch}"
+                    bind:group={buildArch}
                     type="radio"
                     id="amd64"
                     name="arch"
                     value="amd64"
                     class="sr-only peer"
                     aria-label="amd64-select"
-                    disabled="{!availableArchitectures.includes('amd64')}" />
+                    disabled={!availableArchitectures.includes('amd64')} />
                   <label
                     for="amd64"
                     class="h-full flex items-center p-5 cursor-pointer rounded-md bg-[var(--pd-content-card-inset-bg)] focus:outline-none border-[var(--pd-content-card-border-selected)] peer-checked:bg-[var(--pd-content-card-hover-inset-bg)] {availableArchitectures.includes(
@@ -633,8 +633,8 @@ export function goToHomePage(): void {
               <span
                 class="font-semibold mb-2 block cursor-pointer"
                 aria-label="advanced-options"
-                on:click="{toggleAdvanced}"
-                ><Fa icon="{showAdvanced ? faCaretDown : faCaretRight}" class="inline-block mr-1" />Advanced Options
+                on:click={toggleAdvanced}
+                ><Fa icon={showAdvanced ? faCaretDown : faCaretRight} class="inline-block mr-1" />Advanced Options
               </span>
               {#if showAdvanced}
                 <!-- Build config -->
@@ -644,11 +644,11 @@ export function goToHomePage(): void {
                     <Input
                       name="buildconfig"
                       id="buildconfig"
-                      bind:value="{buildConfigFile}"
+                      bind:value={buildConfigFile}
                       placeholder="Build configuration file (config.toml or config.json)"
                       class="w-full"
                       aria-label="buildconfig-select" />
-                    <Button on:click="{() => getBuildConfigFile()}">Browse...</Button>
+                    <Button on:click={() => getBuildConfigFile()}>Browse...</Button>
                   </div>
                   <p class="text-sm text-[var(--pd-content-text)] pt-2">
                     The build configuration file is a TOML or JSON file that contains the build options for the disk
@@ -667,7 +667,7 @@ export function goToHomePage(): void {
 
                 <label for="amiName" class="block mt-2 text-sm font-bold">AMI Name</label>
                 <Input
-                  bind:value="{awsAmiName}"
+                  bind:value={awsAmiName}
                   name="amiName"
                   id="amiName"
                   placeholder="AMI Name to be used"
@@ -675,7 +675,7 @@ export function goToHomePage(): void {
 
                 <label for="awsBucket" class="block mt-2 text-sm font-bold">S3 Bucket</label>
                 <Input
-                  bind:value="{awsBucket}"
+                  bind:value={awsBucket}
                   name="awsBucket"
                   id="awsBucket"
                   placeholder="AWS S3 bucket"
@@ -683,7 +683,7 @@ export function goToHomePage(): void {
 
                 <label for="awsRegion" class="block mt-2 text-sm font-bold">S3 Region</label>
                 <Input
-                  bind:value="{awsRegion}"
+                  bind:value={awsRegion}
                   name="awsRegion"
                   id="awsRegion"
                   placeholder="AWS S3 region"
@@ -700,16 +700,15 @@ export function goToHomePage(): void {
           </div>
         </div>
         {#if existingBuild}
-          <Checkbox class="ml-1" title="overwrite-checkbox" bind:checked="{overwrite}">
-            Overwrite existing build</Checkbox>
+          <Checkbox class="ml-1" title="overwrite-checkbox" bind:checked={overwrite}>Overwrite existing build</Checkbox>
         {/if}
         {#if errorFormValidation}
-          <ErrorMessage aria-label="validation" error="{errorFormValidation}" />
+          <ErrorMessage aria-label="validation" error={errorFormValidation} />
         {/if}
         {#if buildInProgress}
-          <Button class="w-full" disabled="{true}">Creating build task</Button>
+          <Button class="w-full" disabled={true}>Creating build task</Button>
         {:else}
-          <Button on:click="{() => buildBootcImage()}" disabled="{errorFormValidation != undefined}" class="w-full"
+          <Button on:click={() => buildBootcImage()} disabled={errorFormValidation != undefined} class="w-full"
             >Build</Button>
         {/if}
       </div>
diff --git a/packages/frontend/src/Homepage.svelte b/packages/frontend/src/Homepage.svelte
index 58efb0d2..5624863f 100644
--- a/packages/frontend/src/Homepage.svelte
+++ b/packages/frontend/src/Homepage.svelte
@@ -112,18 +112,18 @@ const row = new TableRow<BootcBuildInfo>({
 });
 </script>
 
-<NavPage bind:searchTerm="{searchTerm}" title="Bootable Containers" searchEnabled="{true}">
+<NavPage bind:searchTerm={searchTerm} title="Bootable Containers" searchEnabled={true}>
   <svelte:fragment slot="additional-actions">
-    <Button on:click="{() => gotoBuild()}" icon="{DiskImageIcon}" title="Build">Build</Button>
+    <Button on:click={() => gotoBuild()} icon={DiskImageIcon} title="Build">Build</Button>
   </svelte:fragment>
 
   <svelte:fragment slot="bottom-additional-actions">
     {#if selectedItemsNumber > 0}
       <Button
-        on:click="{() => deleteSelectedBuilds()}"
+        on:click={() => deleteSelectedBuilds()}
         title="Delete {selectedItemsNumber} selected items"
-        inProgress="{bulkDeleteInProgress}"
-        icon="{faTrash}" />
+        inProgress={bulkDeleteInProgress}
+        icon={faTrash} />
       <span>On {selectedItemsNumber} selected items.</span>
     {/if}
   </svelte:fragment>
@@ -131,17 +131,17 @@ const row = new TableRow<BootcBuildInfo>({
   <div class="flex min-w-full h-full" slot="content">
     <Table
       kind="disk images"
-      bind:this="{table}"
-      bind:selectedItemsNumber="{selectedItemsNumber}"
-      data="{history}"
-      columns="{columns}"
-      row="{row}"
+      bind:this={table}
+      bind:selectedItemsNumber={selectedItemsNumber}
+      data={history}
+      columns={columns}
+      row={row}
       defaultSortColumn="Name"
-      on:update="{() => (history = history)}">
+      on:update={() => (history = history)}>
     </Table>
 
     {#if $filtered.length === 0 && searchTerm}
-      <FilteredEmptyScreen icon="{DiskImageIcon}" kind="disk images" bind:searchTerm="{searchTerm}" />
+      <FilteredEmptyScreen icon={DiskImageIcon} kind="disk images" bind:searchTerm={searchTerm} />
     {:else if history.length === 0}
       <BootcEmptyScreen />
     {/if}
diff --git a/packages/frontend/src/lib/BootcActions.svelte b/packages/frontend/src/lib/BootcActions.svelte
index e981df58..0860bf25 100644
--- a/packages/frontend/src/lib/BootcActions.svelte
+++ b/packages/frontend/src/lib/BootcActions.svelte
@@ -13,4 +13,4 @@ async function deleteBuild(): Promise<void> {
 }
 </script>
 
-<ListItemButtonIcon title="Delete Build" onClick="{() => deleteBuild()}" detailed="{detailed}" icon="{faTrash}" />
+<ListItemButtonIcon title="Delete Build" onClick={() => deleteBuild()} detailed={detailed} icon={faTrash} />
diff --git a/packages/frontend/src/lib/BootcColumnActions.svelte b/packages/frontend/src/lib/BootcColumnActions.svelte
index 8b2d3f67..325f5646 100644
--- a/packages/frontend/src/lib/BootcColumnActions.svelte
+++ b/packages/frontend/src/lib/BootcColumnActions.svelte
@@ -5,4 +5,4 @@ import BootcActions from './BootcActions.svelte';
 export let object: BootcBuildInfo;
 </script>
 
-<BootcActions object="{object}" on:update />
+<BootcActions object={object} on:update />
diff --git a/packages/frontend/src/lib/BootcEmptyScreen.svelte b/packages/frontend/src/lib/BootcEmptyScreen.svelte
index 20fdb6fc..fbac0665 100644
--- a/packages/frontend/src/lib/BootcEmptyScreen.svelte
+++ b/packages/frontend/src/lib/BootcEmptyScreen.svelte
@@ -70,34 +70,33 @@ $: {
   <div class="flex flex-col h-full items-center text-center space-y-3">
     <!-- Bootable Container Icon -->
     <div class="py-2">
-      <svelte:component this="{BootcSelkie}" size="120" />
+      <svelte:component this={BootcSelkie} size="120" />
     </div>
 
     <h1 class="text-xl pb-4 text-[var(--pd-content-header)]">Welcome to Bootable Containers</h1>
 
     <p class="pb-4 max-w-xl text-[var(--pd-card-header-text)]">
       Bootable Containers builds an entire bootable OS from your container image. Utilizing the technology of a
-      <Link externalRef="{centosBootcSite}">compatible image</Link>, <Link externalRef="{bootcImageBuilderSite}"
+      <Link externalRef={centosBootcSite}>compatible image</Link>, <Link externalRef={bootcImageBuilderSite}
         >bootc-image-builder</Link
-      >, and <Link externalRef="{bootcSite}">bootc</Link>, your container image is transformed into a bootable disk
-      image.
+      >, and <Link externalRef={bootcSite}>bootc</Link>, your container image is transformed into a bootable disk image.
     </p>
 
     <p class="pb-1 max-w-xl text-[var(--pd-card-header-text)]">
       Create your first disk image by {imageExists ? 'building' : 'pulling'} the <Link
-        externalRef="{`https://${exampleImage}`}">example container image</Link
+        externalRef={`https://${exampleImage}`}>example container image</Link
       >:
     </p>
 
     <!-- Build / pull buttons -->
     {#if imageExists}
-      <Button on:click="{() => gotoBuild()}" icon="{faCube}" aria-label="Build image" title="Build"
+      <Button on:click={() => gotoBuild()} icon={faCube} aria-label="Build image" title="Build"
         >Build {exampleImage}</Button>
     {:else}
       <Button
-        on:click="{() => pullExampleImage()}"
-        icon="{faArrowCircleDown}"
-        inProgress="{pullInProgress}"
+        on:click={() => pullExampleImage()}
+        icon={faArrowCircleDown}
+        inProgress={pullInProgress}
         aria-label="Pull image"
         title="Pull image">Pull {exampleImage}</Button>
     {/if}
@@ -108,7 +107,7 @@ $: {
     {/if}
 
     <p class="pt-8 max-w-xl text-[var(--pd-card-header-text)]">
-      Want to learn more including building your own Containerfile? Check out the <Link externalRef="{extensionSite}"
+      Want to learn more including building your own Containerfile? Check out the <Link externalRef={extensionSite}
         >extension documentation</Link
       >.
     </p>
diff --git a/packages/frontend/src/lib/BootcFolderColumn.svelte b/packages/frontend/src/lib/BootcFolderColumn.svelte
index 92e056e3..9c2ba5f3 100644
--- a/packages/frontend/src/lib/BootcFolderColumn.svelte
+++ b/packages/frontend/src/lib/BootcFolderColumn.svelte
@@ -6,7 +6,7 @@ export let object: BootcBuildInfo;
 </script>
 
 <div class="text-[var(--pd-table-body-text)] overflow-hidden text-ellipsis">
-  <Link folder="{object.folder}">
+  <Link folder={object.folder}>
     {object.folder}
   </Link>
 </div>
diff --git a/packages/frontend/src/lib/BootcSelkie.svelte b/packages/frontend/src/lib/BootcSelkie.svelte
index d4dc6f13..e3eaaa09 100644
--- a/packages/frontend/src/lib/BootcSelkie.svelte
+++ b/packages/frontend/src/lib/BootcSelkie.svelte
@@ -3,10 +3,10 @@ export let size = '40';
 </script>
 
 <svg
-  width="{size}"
-  height="{size}"
-  class="{$$props.class}"
-  style="{$$props.style}"
+  width={size}
+  height={size}
+  class={$$props.class}
+  style={$$props.style}
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xml:space="preserve"
diff --git a/packages/frontend/src/lib/BootcStatus.svelte b/packages/frontend/src/lib/BootcStatus.svelte
index 70f1ae0c..bbe7f39d 100644
--- a/packages/frontend/src/lib/BootcStatus.svelte
+++ b/packages/frontend/src/lib/BootcStatus.svelte
@@ -6,4 +6,4 @@ import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 export let object: BootcBuildInfo;
 </script>
 
-<BootcStatusIcon icon="{DiskImageIcon}" status="{object.status}" />
+<BootcStatusIcon icon={DiskImageIcon} status={object.status} />
diff --git a/packages/frontend/src/lib/BootcStatusIcon.svelte b/packages/frontend/src/lib/BootcStatusIcon.svelte
index 5230a498..c0dcef3f 100644
--- a/packages/frontend/src/lib/BootcStatusIcon.svelte
+++ b/packages/frontend/src/lib/BootcStatusIcon.svelte
@@ -20,23 +20,23 @@ $: solid =
 <div class="grid place-content-center" style="position:relative">
   <div
     class="grid place-content-center rounded aspect-square text-xs"
-    class:bg-green-600="{status === 'success'}"
-    class:bg-sky-400="{status === 'running'}"
-    class:bg-red-600="{status === 'error'}"
-    class:bg-amber-600="{status === 'lost'}"
-    class:p-0.5="{!solid}"
-    class:p-1="{solid}"
-    class:border-gray-700="{!solid}"
-    class:text-[var(--pd-status-not-running)]="{!solid}"
-    class:text-[var(--pd-status-contrast)]="{solid}"
+    class:bg-green-600={status === 'success'}
+    class:bg-sky-400={status === 'running'}
+    class:bg-red-600={status === 'error'}
+    class:bg-amber-600={status === 'lost'}
+    class:p-0.5={!solid}
+    class:p-1={solid}
+    class:border-gray-700={!solid}
+    class:text-[var(--pd-status-not-running)]={!solid}
+    class:text-[var(--pd-status-contrast)]={solid}
     role="status"
-    title="{status}">
+    title={status}>
     {#if status === 'running' || status === 'creating' || status === 'deleting'}
       <Spinner size="1.4em" />
     {:else if typeof icon === 'string'}
-      <span class="{icon}" aria-hidden="true"></span>
+      <span class={icon} aria-hidden="true"></span>
     {:else}
-      <svelte:component this="{icon}" size="{size}" solid="{solid}" />
+      <svelte:component this={icon} size={size} solid={solid} />
     {/if}
   </div>
   {#if status === 'success'}
diff --git a/packages/frontend/src/lib/DiskImageIcon.svelte b/packages/frontend/src/lib/DiskImageIcon.svelte
index 93707bf9..2c054b20 100644
--- a/packages/frontend/src/lib/DiskImageIcon.svelte
+++ b/packages/frontend/src/lib/DiskImageIcon.svelte
@@ -4,10 +4,10 @@ export let solid = true;
 </script>
 
 <svg
-  width="{size}"
-  height="{size}"
-  class="{$$props.class}"
-  style="{$$props.style}"
+  width={size}
+  height={size}
+  class={$$props.class}
+  style={$$props.style}
   viewBox="0 0 16 16"
   version="1.1"
   xml:space="preserve"
diff --git a/packages/frontend/src/lib/Link.svelte b/packages/frontend/src/lib/Link.svelte
index a8ca1001..141bd6db 100644
--- a/packages/frontend/src/lib/Link.svelte
+++ b/packages/frontend/src/lib/Link.svelte
@@ -19,6 +19,6 @@ function click() {
 }
 </script>
 
-<Link title="{title}" aria-label="{$$props['aria-label']}" on:click="{() => click()}">
+<Link title={title} aria-label={$$props['aria-label']} on:click={() => click()}>
   <slot />
 </Link>
diff --git a/packages/frontend/src/lib/NoBootcImagesEmptyScreen.svelte b/packages/frontend/src/lib/NoBootcImagesEmptyScreen.svelte
index b9f8f444..b757d416 100644
--- a/packages/frontend/src/lib/NoBootcImagesEmptyScreen.svelte
+++ b/packages/frontend/src/lib/NoBootcImagesEmptyScreen.svelte
@@ -6,4 +6,4 @@ import { EmptyScreen } from '@podman-desktop/ui-svelte';
 <EmptyScreen
   title="No Bootable Container builds have been created yet"
   message="Click on 'Build' to start your first build!"
-  icon="{faLayerGroup}" />
+  icon={faLayerGroup} />
diff --git a/packages/frontend/src/lib/Route.svelte b/packages/frontend/src/lib/Route.svelte
index 876607ff..07b261a4 100644
--- a/packages/frontend/src/lib/Route.svelte
+++ b/packages/frontend/src/lib/Route.svelte
@@ -42,5 +42,5 @@ $: route.update({
 </script>
 
 {#if showContent}
-  <slot params="{params}" meta="{meta}" />
+  <slot params={params} meta={meta} />
 {/if}
diff --git a/packages/frontend/src/lib/upstream/DropDownMenuItem.svelte b/packages/frontend/src/lib/upstream/DropDownMenuItem.svelte
index 23372f82..6eaca0c3 100644
--- a/packages/frontend/src/lib/upstream/DropDownMenuItem.svelte
+++ b/packages/frontend/src/lib/upstream/DropDownMenuItem.svelte
@@ -14,12 +14,12 @@ const disabledClasses = 'text-gray-900 bg-charcoal-800';
 
 {#if !hidden}
   <!-- Use a div + onclick so there's no "blind spots" for when clicking-->
-  <div class="{`p-3 ${enabled ? enabledClasses : disabledClasses}`}" role="none" on:click="{onClick}">
-    <span title="{title}" class="group flex items-center text-sm no-underline whitespace-nowrap" tabindex="-1">
+  <div class={`p-3 ${enabled ? enabledClasses : disabledClasses}`} role="none" on:click={onClick}>
+    <span title={title} class="group flex items-center text-sm no-underline whitespace-nowrap" tabindex="-1">
       {#if typeof icon === 'string'}
-        <span role="img" aria-label="{title}" class="{icon} h-4 w-4"></span>
+        <span role="img" aria-label={title} class="{icon} h-4 w-4"></span>
       {:else}
-        <Fa class="h-4 w-4 text-md" icon="{icon}" />
+        <Fa class="h-4 w-4 text-md" icon={icon} />
       {/if}
       {#if title}<span class="ml-2">{title}</span>{/if}
     </span>
diff --git a/packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte b/packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte
index 30026d9f..2bc86c9c 100644
--- a/packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte
+++ b/packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte
@@ -47,25 +47,25 @@ $: styleClass = detailed
 <!-- If menu = true, use the menu, otherwise implement the button -->
 {#if menu}
   <!-- enabled menu -->
-  <DropdownMenuItem title="{title}" icon="{icon}" enabled="{enabled}" hidden="{hidden}" onClick="{onClick}" />
+  <DropdownMenuItem title={title} icon={icon} enabled={enabled} hidden={hidden} onClick={onClick} />
 {:else}
   <!-- enabled button -->
   <button
-    title="{title}"
-    aria-label="{title}"
-    on:click="{onClick}"
+    title={title}
+    aria-label={title}
+    on:click={onClick}
     class="{styleClass} relative"
-    class:disabled="{inProgress}"
-    class:hidden="{hidden}"
-    disabled="{!enabled}">
+    class:disabled={inProgress}
+    class:hidden={hidden}
+    disabled={!enabled}>
     {#if fontAwesomeIcon}
-      <Fa class="h-4 w-4 {iconOffset}" icon="{fontAwesomeIcon}" />
+      <Fa class="h-4 w-4 {iconOffset}" icon={fontAwesomeIcon} />
     {/if}
 
     <div
       aria-label="spinner"
       class="w-6 h-6 rounded-full animate-spin border border-solid border-violet-500 border-t-transparent absolute {positionTopClass} {positionLeftClass}"
-      class:hidden="{!inProgress}">
+      class:hidden={!inProgress}>
     </div>
   </button>
 {/if}