diff --git a/web/client/src/content/Login/Login.scss b/web/client/src/content/Login/Login.scss
index 74f2f5a..080e4b9 100644
--- a/web/client/src/content/Login/Login.scss
+++ b/web/client/src/content/Login/Login.scss
@@ -81,6 +81,18 @@
   -webkit-text-fill-color: #f4f4f4 !important;
 }
 
+@media only screen and (min-width: $small) {
+  .login__background {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-size: cover;
+    z-index: -1;
+  }
+}
+
 @media only screen and (max-width: $small) {
   .login__container {
     padding: 0 40px;
diff --git a/web/client/src/content/Login/index.js b/web/client/src/content/Login/index.js
index 4ab55bf..5c8b780 100644
--- a/web/client/src/content/Login/index.js
+++ b/web/client/src/content/Login/index.js
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback, useState } from 'react'
+import React, { useContext, useCallback, useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { InlineNotification } from 'carbon-components-react'
 
@@ -9,11 +9,25 @@ import Header from '../../components/Header'
 
 import AuthClient from '../../rest/auth'
 
+const backgroundImages = [
+  'https://images.unsplash.com/photo-1486520299386-6d106b22014b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+  'https://images.unsplash.com/photo-1582447702113-04667dcd1da9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+  'https://images.unsplash.com/photo-1606669059257-19fc4ca49f79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1268&q=80',
+  'https://images.unsplash.com/photo-1551454075-d9daea945c10?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+  'https://images.unsplash.com/photo-1599775009931-5b0b46e8de2c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+  'https://images.unsplash.com/photo-1555950205-ff6f06049d8b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1341&q=80',
+  'https://images.unsplash.com/photo-1530936491244-4265f39516e4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80',
+  'https://images.unsplash.com/photo-1501446529957-6226bd447c46?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80',
+  'https://images.unsplash.com/photo-1559097622-2cff6decd452?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80',
+  'https://images.unsplash.com/photo-1465920431246-94bf7d9d4269?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+]
+
 const Login = ({ history }) => {
   const { t, setCurrentUser } = useContext(AppContext)
   const [error, setError] = useState('')
   const [step, setStep] = useState(1)
   const [loginId, setLoginId] = useState('')
+  const [wallpaperStyle, setWallpaperStyle] = useState({})
 
   const initLogin = useCallback(
     /**
@@ -49,11 +63,21 @@ const Login = ({ history }) => {
     [loginId, setCurrentUser, t, history]
   )
 
+  useEffect(() => {
+    const index = Math.round(Math.random() * 100) % backgroundImages.length
+    const url = backgroundImages[index]
+
+    setWallpaperStyle({
+      backgroundImage: `linear-gradient(90deg, rgba(22,22,22,1) 500px, rgba(0,0,0,0) 150%), url(${url})`,
+    })
+  }, [])
+
   return (
     <>
-      <Header removeLogin></Header>
+      <div className="login__background" style={wallpaperStyle} />
+      <Header removeLogin />
       <div className="login__container">
-        <div className="login__spacer"></div>
+        <div className="login__spacer" />
         <div>
           <img src={logo} width="50px" className="marb-2" alt="OpenEEW" />
           <h1 className="login__title">