style fix

frontend/src/App.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import WelcomePage from './pages/WelcomePage/WelcomePage';
-import Register from './components/Register/Register';
-import Login from './components/Login/Login';
+import Register from './pages/Register/Register';
+import Login from './pages/Login/Login';
 import Homepage from './pages/homePage/homePage';
 
 const App = () => {

frontend/src/index.css

@@ -18,6 +18,7 @@ header {
 h1 {
   font-size: 2em;
   color: #333;
+  text-align: center;
 }
 
 .database-list {

frontend/src/components/Login/Login.jsx → frontend/src/pages/Login/Login.jsx

@@ -21,21 +21,24 @@ const Login = () => {
   };
 
   return (
-    <form className="login-form" onSubmit={handleLogin}>
-      <input
-        type="email"
-        placeholder="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <input
-        type="password"
-        placeholder="Password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <button type="submit">Login</button>
-    </form>
+    <div className='register-container'>
+      <h1>Login</h1>
+      <form className="login-form" onSubmit={handleLogin}>
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button type="submit">Login</button>
+      </form>
+    </div>
   );
 };
 

frontend/src/pages/Register/Register.jsx

@@ -0,0 +1,53 @@
+// frontend/src/components/Register/Register.jsx
+import React, { useState } from 'react';
+import axios from 'axios';
+import './Register.css'; // Import Register component styles
+
+const Register = () => {
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleRegister = async (e) => {
+    e.preventDefault(); // Prevent the default form submission behavior
+    try {
+      const response = await axios.post('/api/register', {
+        username,
+        email,
+        password
+      });
+      console.log(response.data); // Handle successful registration
+    } catch (error) {
+      console.error('Registration error:', error);
+    }
+  };
+
+  return (
+    <div className="register-container">
+      <h1>Register</h1>
+      <form className="register-form" onSubmit={handleRegister}>
+        <input
+          type="text"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button type="submit">Register</button>
+      </form>
+    </div>
+  );
+};
+
+export default Register;

frontend/src/pages/WelcomePage/WelcomePage.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import Navbar from '../../components/Navbar/Navbar';
 
 const WelcomePage = () => {
   return (
     <div>
-      <div className="container mt-4">
+      <div>
         <h1>Welcome to My App</h1>
         <p>This is the home page of our application.</p>
       </div>