diff --git a/src/index.tsx b/src/index.tsx
index e53a4c8e53942cccc19a161c9e70c67a89bca80e..0035420e30306ed068f259dba27be821ec018c9e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom/client";
 import './index.css';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 import Footer from './components/Footer';
 import Navbar from './components/Navbar';
 
-
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+root.render(
   <BrowserRouter>
     <Navbar />
     <App />
     <Footer />
   </BrowserRouter>,
-  document.getElementById('root')
 );
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index e5ab0834d2989ccee66eb21b9ab73c73a86c4f93..bd036ee6ec16b41558bd442cad9932a9e827456e 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -4,7 +4,8 @@ import { FormControl, IconButton, Input, InputAdornment, InputLabel, TextField }
 import { VisibilityOff, Visibility } from '@mui/icons-material';
 // import PopUp from '@/components/fragments/popup'
 // import axios from 'axios';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import axios from 'axios';
 
 const Login = () => {
   const [email, setEmail] = useState('');
@@ -12,6 +13,7 @@ const Login = () => {
   const [isLoading, setIsLoading] = useState(false);
 
   const [showPassword, setShowPassword] = React.useState(false);
+  const history = useNavigate();
   const handleClickShowPassword = () => {
     setShowPassword(!showPassword);
   };
@@ -19,9 +21,21 @@ const Login = () => {
   const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
   };
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Handle login logic here
+    console.log('submitting...');
+    console.log(email, password);
+  
+    try {
+      axios.post('http://localhost:3000/psikolog/login/', {
+      email: email,
+      password: password,
+    });
+    history('/register');
+    }
+    catch (error) {
+      console.log(error);
+    }
   };
 
   return (
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 15b94b9aa12cc9c0afb49f5a4b77b045e660e622..c6032764b088917c71deb0cc6885dec77c302323 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -5,13 +5,15 @@ import { FormControl, IconButton, Input, InputAdornment, InputLabel, TextField }
 import { VisibilityOff, Visibility } from '@mui/icons-material';
 // import PopUp from '@/components/fragments/popup'
 // import axios from 'axios';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import axios from 'axios';
 
 const Register = () => {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [phoneNumber, setPhoneNumber] = useState('');
   const [password, setPassword] = useState('');
+  const [clinic, setClinic] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
   const [error, setError] = useState('');
@@ -34,11 +36,32 @@ const Register = () => {
     event.preventDefault();
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const history = useNavigate();
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Handle registration logic here
+    console.log('submitting...');
+    console.log(name, email, phoneNumber, password, clinic);
+    
+    try {
+      const response = await axios.post('http://localhost:3000/psikolog/register/', {
+        psikolog_name: name,
+        psikolog_email: email,
+        psikolog_phone: phoneNumber,
+        psikolog_password: password,
+        psikolog_klinik: clinic,
+      });
+  
+      if (response.status === 200) {
+        history('/login/');
+      } else {
+        console.log('Registration failed:', response);
+      }
+    }
+    catch (error) {
+      console.log(error);
+    }
   };
-
+  
   return (
     <div className="box">
       <h2>REGISTER</h2>
@@ -97,6 +120,12 @@ const Register = () => {
                     </FormControl>
                     
                 </div>
+                <div className="inputBox">
+                    <TextField sx={{ width: '26ch', marginBottom:'15px' }} id="phoneNumber" label="Phone Number" placeholder="Type your phone number" variant="standard" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} />
+                </div>
+                <div className="inputBox">
+                    <TextField sx={{ width: '26ch', marginBottom:'15px' }} id="klinik" label="Klinik" placeholder="Type your clinic" variant="standard" value= {clinic} onChange={(e) => setClinic(e.target.value)}/>
+                </div>
                 <button type="submit" name="" disabled={isLoading}>
                   {isLoading ? "Loading..." : "Sign Up"}
                 </button>