diff --git a/packages/frontend/src/pages/CreateService.spec.ts b/packages/frontend/src/pages/CreateService.spec.ts
index fa33d2bd4..7e248e321 100644
--- a/packages/frontend/src/pages/CreateService.spec.ts
+++ b/packages/frontend/src/pages/CreateService.spec.ts
@@ -266,6 +266,19 @@ test('tasks should be displayed after requestCreateInferenceServer', async () =>
   });
 });
 
+test('port input should update on user input', async () => {
+  render(CreateService);
+
+  const portInput: HTMLInputElement = screen.getByRole('textbox', { name: 'Port input' });
+  expect(portInput).toBeDefined();
+
+  await fireEvent.input(portInput, '8888');
+
+  await vi.waitFor(() => {
+    expect(portInput.value).toBe('8888');
+  });
+});
+
 test('form should be disabled when loading', async () => {
   mocks.modelsInfoSubscribeMock.mockReturnValue([{ id: 'random', file: true }]);
 
diff --git a/packages/frontend/src/pages/CreateService.svelte b/packages/frontend/src/pages/CreateService.svelte
index 732cc6ffc..08a22f155 100644
--- a/packages/frontend/src/pages/CreateService.svelte
+++ b/packages/frontend/src/pages/CreateService.svelte
@@ -212,7 +212,7 @@ export function goToUpPage(): void {
             >Container port</label>
           <Input
             type="number"
-            bind:value={containerPort}
+            value={String(containerPort ?? 0)}
             on:input={onContainerPortInput}
             class="w-full"
             placeholder="8888"