diff --git a/src/components/Form/TextField.svelte b/src/components/Form/TextField.svelte
index f0aff187..a1fb0b59 100644
--- a/src/components/Form/TextField.svelte
+++ b/src/components/Form/TextField.svelte
@@ -6,6 +6,7 @@
   export let label = '';
   export let placeholder = '';
   export let value = '';
+  export let name = '';
   export let onKeyDown = () => {};
   export let className = '';
   export let inputClassName = '';
@@ -78,6 +79,7 @@
     disabled={isDisabled}
     autocomplete={autoComplete ? 'on' : 'off'}
     on:blur={onChange}
+    {name}
   />
   {#if isPassword}
     <span class="password-eye">
diff --git a/src/components/Navigation/index.svelte b/src/components/Navigation/index.svelte
index 899a4e42..495cff00 100644
--- a/src/components/Navigation/index.svelte
+++ b/src/components/Navigation/index.svelte
@@ -95,7 +95,9 @@
               label="Login"
               variant={VARIANTS.NONE}
               className="py-3 px-6 mx-2 app-background-color"
-              onClick={() => goto('/login' + redirect)}
+              onClick={() => {
+                goto('/login' + redirect);
+              }}
             />
             <PrimaryButton
               label="Sign Up"
diff --git a/src/routes/onboarding.svelte b/src/routes/onboarding.svelte
index fb059eef..5f4c7b86 100644
--- a/src/routes/onboarding.svelte
+++ b/src/routes/onboarding.svelte
@@ -32,7 +32,6 @@
   }
 
   const maxSteps = 2;
-
   let fields: OnboardingField = {
     fullname: '',
     orgName: '',
@@ -87,15 +86,22 @@
     const payload = await response.json();
     fields.metadata = payload;
   }
-
   function setOrgSiteName(orgName: string | undefined, isTouched: boolean) {
-    console.log('set org name', orgName, isTouched);
     if (!orgName || isTouched) return;
-
-    fields.siteName = orgName
-      // @ts-ignore
-      .replaceAll(' ', '-')
-      .toLowerCase();
+    let inputElement = event?.target as HTMLInputElement;
+    let value = inputElement.name;
+    console.log('set org name', orgName, isTouched, value);
+    if (value == 'orgname') {
+      fields.siteName = orgName
+        ?.toLowerCase()
+        ?.replace(/\s+/g, '-')
+        ?.replace(/[^a-zA-Z0-9-]/g, '');
+    } else {
+      if (value == 'sitename') {
+        fields.siteName = inputElement.value;
+      }
+    }
+    console.log('set org name', orgName, isTouched, value);
   }
 
   const handleSubmit = async () => {
@@ -190,6 +196,10 @@
   };
 
   $: progress = Math.round((step / maxSteps) * 100);
+  $: fields.siteName = fields.siteName
+    ?.toLowerCase()
+    ?.replace(/\s+/g, '-')
+    ?.replace(/[^a-zA-Z0-9-]/g, '');
   $: setOrgSiteName(fields.orgName, isSiteNameTouched);
 </script>
 
@@ -226,6 +236,7 @@
             <TextField
               label="Full Name"
               bind:value={fields.fullname}
+              name="fullname"
               type="text"
               placeholder="e.g Joke Silva"
               className="mb-5 w-full"
@@ -237,12 +248,15 @@
             <TextField
               label="Name of Organization"
               bind:value={fields.orgName}
+              name="orgname"
               type="text"
               placeholder="e.g Education For All"
               className="mb-5 w-full"
               labelClassName="text-lg font-normal"
               errorMessage={errors.orgName}
-              onChange={() => (isSiteNameTouched = true)}
+              onChange={() => {
+                isSiteNameTouched = true;
+              }}
             />
 
             <!-- Org Site Name -->
@@ -250,6 +264,7 @@
               label="Organisation Site name"
               helperMessage={`https://${fields.siteName || ''}.classroomio.com`}
               bind:value={fields.siteName}
+              name="sitename"
               type="text"
               placeholder="e.g edforall"
               className="mb-5 w-full"
diff --git a/src/routes/signup.svelte b/src/routes/signup.svelte
index 45d4c645..f261d7fa 100644
--- a/src/routes/signup.svelte
+++ b/src/routes/signup.svelte
@@ -5,17 +5,17 @@
 </script>
 
 <script>
-  import { goto } from '@sapper/app';
-  import TextField from '../components/Form/TextField.svelte';
-  import PrimaryButton from '../components/PrimaryButton/index.svelte';
-  import { getSupabase } from '../utils/functions/supabase';
+  import { goto } from "@sapper/app";
+  import TextField from "../components/Form/TextField.svelte";
+  import PrimaryButton from "../components/PrimaryButton/index.svelte";
+  import { getSupabase } from "../utils/functions/supabase";
   import {
     authValidation,
     getConfirmPasswordError,
     getDisableSubmit,
-  } from '../utils/functions/validator';
-  import { SIGNUP_FIELDS } from '../utils/constants/authentication';
-  import AuthUI from '../components/AuthUI/index.svelte';
+  } from "../utils/functions/validator";
+  import { SIGNUP_FIELDS } from "../utils/constants/authentication";
+  import AuthUI from "../components/AuthUI/index.svelte";
 
   export let config;
 
@@ -30,7 +30,7 @@
 
   async function handleSubmit(e) {
     const validationRes = authValidation(fields);
-    console.log('validationRes', validationRes);
+    console.log("validationRes", validationRes);
 
     if (Object.keys(validationRes).length) {
       errors = Object.assign(errors, validationRes);
@@ -43,12 +43,12 @@
         email: fields.email,
         password: fields.password,
       });
-      console.log('data', data);
+      console.log("data", data);
       if (error) throw error;
 
       formRef?.reset();
 
-      return goto('/login');
+      return goto("/login");
       // success = true;
       // fields = Object.assign({}, SIGNUP_FIELDS);
     } catch (error) {