diff --git a/compose.yaml b/compose.yaml
index 6f7c26f..3a5de47 100644
--- a/compose.yaml
+++ b/compose.yaml
@@ -3,6 +3,9 @@ services:
     build:
       context: .
       dockerfile: Dockerfile.dev
+    volumes:
+      - .:/usr/src/app
+      - /usr/src/app/node_modules
     env_file:
       - .env
     environment: # To override the DB URL in the .env file
diff --git a/src/app/account/repo/add/form.js b/src/app/account/repo/add/form.js
index 7db2b93..e4158e3 100644
--- a/src/app/account/repo/add/form.js
+++ b/src/app/account/repo/add/form.js
@@ -7,6 +7,7 @@ import { SubmitButton } from "@/components/forms/SubmitButton";
 import Input from "@/components/forms/Input";
 import Checkbox from "@/components/forms/Checkbox";
 import Alert from "@/components/Alert";
+import {useState,useEffect} from "react"
 
 const initialState = {
   data: undefined,
@@ -16,8 +17,22 @@ const initialState = {
 
 export default function Form({ usage }) {
   const [state, formAction] = useFormState(getRepo, initialState);
-  const disabled = usage >= process.env.NEXT_PUBLIC_REPO_LIMIT ? true : false;
+  const [usageLimitReached,setUsageLimitReached] = useState(false)
+  const [githubUrl , setGithubUrl] = useState(state?.data?.url || '')
+  const [isGithubUrlValid,setIsGithubUrlValid] = useState(false)
+  const [isDisabled,setIsDisabled] = useState(true)
 
+  const githubRegex = /^https:\/\/github\.com\/[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+$/;
+
+  useEffect(()=>{
+
+    setUsageLimitReached(usage >= process.env.NEXT_PUBLIC_REPO_LIMIT);
+    setIsGithubUrlValid(githubRegex.test(githubUrl))
+    
+    setIsDisabled(usageLimitReached || !isGithubUrlValid)
+    
+  },[usage,githubUrl])
+  
   return (
     <form action={formAction}>
       <Alert>
@@ -30,13 +45,15 @@ export default function Form({ usage }) {
           </p>
 
           <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+            
             <Input
               id="url"
               name="url"
               text="GitHub repo URL"
               error={state?.errors?.url}
-              value={state?.data?.url}
-              disabled={disabled}
+              value={githubUrl}
+              onChange={(e)=>setGithubUrl(e.target.value)}
+              disabled={usageLimitReached}
             />
           </div>
         </div>
@@ -79,7 +96,8 @@ export default function Form({ usage }) {
       </fieldset>
 
       <div className="mt-6 flex items-center justify-end gap-x-6">
-        <SubmitButton text="SAVE" disabled={disabled} />
+        <SubmitButton text="SAVE" disabled={isDisabled} />
+        
       </div>
     </form>
   );
diff --git a/src/components/forms/Input.js b/src/components/forms/Input.js
index bc344e7..ef4a7c4 100644
--- a/src/components/forms/Input.js
+++ b/src/components/forms/Input.js
@@ -11,6 +11,7 @@ export default function Input({
   error,
   prepend,
   disabled = false,
+  onChange,
   type = "text",
 }) {
   const { pending } = useFormStatus();
@@ -28,6 +29,7 @@ export default function Input({
       type={type}
       disabled={pending || disabled ? true : false}
       name={id}
+      onChange={onChange}
       id={id}
       className={classNames(
         "block w-full rounded-md border-0 sm:text-sm sm:leading-6 bg-gray-800 disabled:bg-gray-600",