diff --git a/package-lock.json b/package-lock.json
index 01dc13a..6ecb0ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6725,6 +6725,11 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
       "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index 557c027..3593e66 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "font-awesome": "^4.7.0",
     "mysql": "^2.18.1",
     "path": "^0.12.7",
     "react": "^17.0.2",
diff --git a/src/Pages/SignInPage/SignInPage.css b/src/Pages/SignInPage/SignInPage.css
index 62ef674..15583b6 100644
--- a/src/Pages/SignInPage/SignInPage.css
+++ b/src/Pages/SignInPage/SignInPage.css
@@ -1,11 +1,24 @@
+div.page-background{
+  position: fixed;
+  background-image:url("../../images/oceanimagedesktop.jpg");
+  background-blend-mode: soft-light;
+  background-size: cover;
+  height: 100% !important;
+  width: 100% !important;
+}
+
 .signin-wrapper {
+  position: fixed;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: 350px;
+  height: 350px;
+  left: 39%;
+  top: 25%;
   justify-content: center;
   align-items: center;
   background-color: aqua;
-  min-height: 100vh;
+  min-height: 300px;
 }
 
 .signin-wrapper input {
@@ -20,4 +33,4 @@
   width: 320px;
   height: 50px;
   margin-top: 15px;
-}
\ No newline at end of file
+}
diff --git a/src/Pages/SignInPage/SignInPage.js b/src/Pages/SignInPage/SignInPage.js
index b946cca..7cdc735 100644
--- a/src/Pages/SignInPage/SignInPage.js
+++ b/src/Pages/SignInPage/SignInPage.js
@@ -41,28 +41,30 @@ function SignIn() {
     }, [])
 
     return (
-        <div className="signin-webpage">
-            <div className="signin-wrapper">
-                <h1>Sign In</h1>
-                <input
-                    type="text"
-                    placeholder="Username..."
-                    onChange={(e) => {
-                        setUsername(e.target.value);
-                    }}
-                />
+        <div className="page-background">
+            <div className="signin-webpage">
+                <div className="signin-wrapper">
+                    <h1>Sign In</h1>
+                    <input
+                        type="text"
+                        placeholder="Username..."
+                        onChange={(e) => {
+                            setUsername(e.target.value);
+                        }}
+                    />
 
-                <input
-                    type="password"
-                    placeholder="Password..."
-                    onChange={(e) => {
-                        setPassword(e.target.value);
-                    }}
-                />
-                <div>
-                    <button onClick={login}> Login </button>
+                    <input
+                        type="password"
+                        placeholder="Password..."
+                        onChange={(e) => {
+                            setPassword(e.target.value);
+                        }}
+                    />
+                    <div>
+                        <button onClick={login}> Login </button>
+                    </div>
+                    <h1>{loginStatus}</h1>
                 </div>
-                <h1>{loginStatus}</h1>
             </div>
         </div>
     );
diff --git a/src/images/oceanimagedesktop.jpg b/src/images/oceanimagedesktop.jpg
new file mode 100644
index 0000000..9b65bf7
Binary files /dev/null and b/src/images/oceanimagedesktop.jpg differ