diff --git a/components/dashboard/src/settings/Integrations.test.tsx b/components/dashboard/src/settings/Integrations.test.tsx
new file mode 100644
index 00000000000000..b9a2fa041706e4
--- /dev/null
+++ b/components/dashboard/src/settings/Integrations.test.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { render, fireEvent, screen } from "@testing-library/react";
+import { GitIntegrationModal } from "./Integrations";
+
+test.only("should update redirectURL preview", async () => {
+    render(<GitIntegrationModal mode="new" userId="F00" />);
+
+    fireEvent.change(screen.getByLabelText(/Host/i), {
+        target: { value: "gitlab.gitpod.io:80" },
+    });
+    const host = screen.getByLabelText(/Host/i);
+    // screen.debug(host);
+    expect((host as HTMLInputElement).value).toEqual("gitlab.gitpod.io:80");
+
+    const redirectURL = screen.getByLabelText(/Redirect/i);
+    // screen.debug(redirectURL);
+    expect((redirectURL as HTMLInputElement).value).toEqual("http://localhost/auth/gitlab.gitpod.io_80/callback");
+});
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
index 8de885892d9e2e..054e3abc2880fb 100644
--- a/components/dashboard/src/settings/Integrations.tsx
+++ b/components/dashboard/src/settings/Integrations.tsx
@@ -517,6 +517,11 @@ export function GitIntegrationModal(
     },
 ) {
     const callbackUrl = (host: string) => {
+        // Negative Lookahead (?!\/)
+        // `\/` matches the character `/`
+        // "https://foobar:80".replace(/:(?!\/)/, "_")
+        // => 'https://foobar_80'
+        host = host.replace(/:(?!\/)/, "_");
         const pathname = `/auth/${host}/callback`;
         return gitpodHostUrl.with({ pathname }).toString();
     };
@@ -643,12 +648,6 @@ export function GitIntegrationModal(
                 newHostValue = host.replace("https://", "");
             }
 
-            // Negative Lookahead (?!\/)
-            // `\/` matches the character `/`
-            // "https://foobar:80".replace(/:(?!\/)/, "_")
-            // => 'https://foobar_80'
-            newHostValue = host.replace(/:(?!\/)/, "_");
-
             setHost(newHostValue);
             setRedirectURL(callbackUrl(newHostValue));
             setErrorMessage(undefined);
@@ -798,7 +797,7 @@ export function GitIntegrationModal(
                             Provider Host Name
                         </label>
                         <input
-                            name="hostName"
+                            id="hostName"
                             disabled={mode === "edit" || type === "Bitbucket"}
                             type="text"
                             placeholder={getPlaceholderForIntegrationType(type)}
@@ -813,7 +812,7 @@ export function GitIntegrationModal(
                         </label>
                         <div className="w-full relative">
                             <input
-                                name="redirectURL"
+                                id="redirectURL"
                                 disabled={true}
                                 readOnly={true}
                                 type="text"