diff --git a/packages/renderer/src/lib/volume/CreateVolume.svelte b/packages/renderer/src/lib/volume/CreateVolume.svelte
index e4af01ea1d75f..42ed3075e4c26 100644
--- a/packages/renderer/src/lib/volume/CreateVolume.svelte
+++ b/packages/renderer/src/lib/volume/CreateVolume.svelte
@@ -15,6 +15,7 @@ import Button from '/@/lib/ui/Button.svelte';
 import VolumeIcon from '/@/lib/images/VolumeIcon.svelte';
 import { router } from 'tinro';
 import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import Input from '../ui/Input.svelte';
 
 let providers: ProviderInfo[] = [];
 let providerConnections: ProviderContainerConnectionInfo[] = [];
@@ -67,11 +68,12 @@ export let volumeName = '';
         <div>
           <label for="containerBuildContextDirectory" class="block mb-2 text-sm font-bold text-gray-400"
             >Volume name:</label>
-          <input
+          <Input
+            clearable
             aria-label="Volume Name"
             disabled="{createVolumeFinished}"
             bind:value="{volumeName}"
-            class="w-full p-2 outline-none text-sm bg-charcoal-600 rounded-sm text-gray-700 placeholder-gray-700"
+            class="w-full"
             required />
         </div>
         <div class:hidden="{providerConnections.length < 2}">