diff --git a/db_app/src/components/CreateAccount.css b/db_app/src/components/CreateAccount.css
new file mode 100644
index 0000000..05d5750
--- /dev/null
+++ b/db_app/src/components/CreateAccount.css
@@ -0,0 +1,20 @@
+.bg {
+    position:fixed;
+     height: 100vh;
+     width: 100vw;
+    }
+    
+    .logbox {
+      background-color: rgba(255, 255, 255, 0.33);
+      padding: 15px;
+      margin-top:10vh;
+      margin-bottom:10vh;
+      margin-left:20vw;
+      margin-right:20vw;
+    }
+    
+    .formbox {
+      background-color: rgba(255, 255, 255, 0.6);
+      margin:10px;
+      padding:10px;
+    }
\ No newline at end of file
diff --git a/db_app/src/components/CreateAccount.js b/db_app/src/components/CreateAccount.js
index ca38f1f..9d20f31 100644
--- a/db_app/src/components/CreateAccount.js
+++ b/db_app/src/components/CreateAccount.js
@@ -1,7 +1,7 @@
 import React,{useState} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 import Axios from 'axios';
-import './Login.css';
+import './CreateAccount.css';
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import TextField from "@mui/material/TextField";
@@ -12,6 +12,18 @@ import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import image from "./images/main_background.jpg"
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: lightGreen[700],
+    },
+  },
+});
+
 
 function CreateAccount() {
 
@@ -51,7 +63,10 @@ function CreateAccount() {
   };
   
     return (
-      <div>
+
+      <ThemeProvider theme={theme}>
+      <div className='bg' style={{backgroundImage: 'url(' + require('./images/main_background.jpg') + ')'}}>
+      <div className='logbox'>
         <Box
         sx={{  
           marginTop: 8,
@@ -63,7 +78,7 @@ function CreateAccount() {
            <Typography component="h1" variant="h5">Create Account</Typography>
        
           
-        <form onSubmit={submitHandler}>
+        <form className='formbox' onSubmit={submitHandler}>
         <TextField
             margin="normal"
             required
@@ -134,6 +149,8 @@ function CreateAccount() {
       </Box>
       
       </div>
+      </div>
+      </ThemeProvider>
   
     );
   }