Express js react app

src/Pages/RegistrationPage/RegistrationPage.css

@@ -1,11 +1,23 @@
+div.page-background{
+    position: fixed;
+    background-image:url("../../images/oceanimagedesktop.jpg");
+    background-blend-mode: soft-light;
+    background-size: cover;
+    opacity: 95%;
+    height: 100% !important;
+    width: 100% !important;
+  }
+
 .information {
+    position: relative;
     display: flex;
-    min-height: 100vh;
-    width: 100%;
+    height: 88%;
+    left: 40%;
+    top: 2%;
+    width: 300px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: aqua;
 }
 
 .information input {

src/Pages/RegistrationPage/RegistrationPage.js

@@ -47,51 +47,53 @@ function Registration() {
 	};
 
 	return (
-		<div className="information">
-			<label>Username:</label>
-			<input type="text"
-				onChange={(event) => {
-					setUsername(event.target.value);
-				}}
-			/>
-			<label>Password:</label>
-			<input type="text"
-				onChange={(event) => {
-					setPassword(event.target.value);
-				}}
-			/>
-			<label>Email:</label>
-			<input type="text"
-				onChange={(event) => {
-					setEmail(event.target.value);
-				}}
-			/>
-			<label>Address:</label>
-			<input type="text"
-				onChange={(event) => {
-					setAddress(event.target.value);
-				}}
-			/>
-			<label>First Name:</label>
-			<input type="text"
-				onChange={(event) => {
-					setFirstname(event.target.value);
-				}}
-			/>
-			<label>Last Name:</label>
-			<input type="text"
-				onChange={(event) => {
-					setLastname(event.target.value);
-				}}
-			/>
-			<label>Phone Number:</label>
-			<input type="text"
-				onChange={(event) => {
-					setPhone(event.target.value);
-				}}
-			/>
-			<button onClick={registerUser}>Register</button>
-			<h1>{registrationStatus}</h1>
+		<div className="page-background">
+			<div className="information">
+				<label>Username:</label>
+				<input type="text"
+					onChange={(event) => {
+						setUsername(event.target.value);
+					}}
+				/>
+				<label>Password:</label>
+				<input type="text"
+					onChange={(event) => {
+						setPassword(event.target.value);
+					}}
+				/>
+				<label>Email:</label>
+				<input type="text"
+					onChange={(event) => {
+						setEmail(event.target.value);
+					}}
+				/>
+				<label>Address:</label>
+				<input type="text"
+					onChange={(event) => {
+						setAddress(event.target.value);
+					}}
+				/>
+				<label>First Name:</label>
+				<input type="text"
+					onChange={(event) => {
+						setFirstname(event.target.value);
+					}}
+				/>
+				<label>Last Name:</label>
+				<input type="text"
+					onChange={(event) => {
+						setLastname(event.target.value);
+					}}
+				/>
+				<label>Phone Number:</label>
+				<input type="text"
+					onChange={(event) => {
+						setPhone(event.target.value);
+					}}
+				/>
+				<button onClick={registerUser}>Register</button>
+				<h1>{registrationStatus}</h1>
+			</div>
 		</div>
 	);
 }

src/Pages/SignInPage/SignInPage.js

@@ -52,7 +52,7 @@ function SignIn() {
                             setUsername(e.target.value);
                         }}
                     />
-
+                    
                     <input
                         type="password"
                         placeholder="Password..."