diff --git a/apps/web/src/components/navbar/AddDatabaseForm/index.tsx b/apps/web/src/components/navbar/AddDatabaseForm/index.tsx
index 4b003b8a9690cb558ca277865c1a5c6a3e1558cf..222b42d207b87093c3ad4ff2c4a47547dc2797f6 100644
--- a/apps/web/src/components/navbar/AddDatabaseForm/index.tsx
+++ b/apps/web/src/components/navbar/AddDatabaseForm/index.tsx
@@ -8,7 +8,7 @@
 /* The comment above was added so the code coverage wouldn't count this file towards code coverage.
  * We do not test components/renderfunctions/styling files.
  * See testing plan for more details.*/
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { TextField, Button, NativeSelect } from '@mui/material';
 import styles from './add-database-form.module.scss';
 import {
@@ -49,6 +49,21 @@ export default function AddDatabaseForm(props: AddDatabaseFormProps) {
     // styles: props.styles, // FIXME
     type: DatabaseType.ArangoDB,
   });
+  const [portValidation, setPortValidation] = useState<string>('valid');
+
+  useEffect(() => {
+    console.log('state :>> ', state);
+    console.log('state.port :>> ', state.port);
+    if (state && state.port && state.port > 9999) {
+      setPortValidation('error');
+    } else {
+      setPortValidation('valid');
+    }
+  }, [state.port]);
+
+  useEffect(() => {
+    console.log('portValidation', portValidation);
+  }, [portValidation]);
 
   /**
    * Validates if the port value is numerical. Only then will the state be updated.
@@ -132,14 +147,30 @@ export default function AddDatabaseForm(props: AddDatabaseFormProps) {
               }
               required
             />
-            <TextField
-              className={styles.portLabel}
-              label="Port"
-              type="port"
-              value={state.port}
-              onChange={(event) => handlePortChanged(event.currentTarget.value)}
-              required
-            />
+            {portValidation && portValidation == 'error' ? (
+              <TextField
+                error
+                className={styles.portLabel}
+                label="Port error"
+                type="port"
+                value={state.port}
+                onChange={(event) =>
+                  handlePortChanged(event.currentTarget.value)
+                }
+                required
+              />
+            ) : (
+              <TextField
+                className={styles.portLabel}
+                label="Port"
+                type="port"
+                value={state.port}
+                onChange={(event) =>
+                  handlePortChanged(event.currentTarget.value)
+                }
+                required
+              />
+            )}
           </div>
           <div className={styles.loginContainer}>
             <TextField
@@ -187,9 +218,21 @@ export default function AddDatabaseForm(props: AddDatabaseFormProps) {
             />
           </div>
           <div className={styles.loginContainerButton}>
-            <Button variant="contained" type="submit" color="success">
-              Submit
-            </Button>
+            {portValidation && portValidation == 'error' ? (
+              <Button
+                disabled
+                variant="contained"
+                type="submit"
+                color="success"
+              >
+                Submit
+              </Button>
+            ) : (
+              <Button variant="contained" type="submit" color="success">
+                Submit
+              </Button>
+            )}
+
             <Button
               className={styles.cancelButton}
               variant="outlined"