diff --git a/themes/dracula/assets/window-blurred.png b/themes/dracula/assets/window-blurred.png
new file mode 100644
index 0000000..02f21d0
Binary files /dev/null and b/themes/dracula/assets/window-blurred.png differ
diff --git a/themes/dracula/css/style.css b/themes/dracula/css/style.css
index 429de2f..4550db9 100644
--- a/themes/dracula/css/style.css
+++ b/themes/dracula/css/style.css
@@ -38,6 +38,8 @@ html {
   width: 100vw;
   background-color: black;
   font-size: 16px;
+  text-rendering: optimizeSpeed;
+  image-rendering: pixelated;
 }
 html * {
   font-family: system-ui;
@@ -137,11 +139,10 @@ body {
   width: 30em;
   box-sizing: border-box;
   transition: var(--animation-duration);
-
-  /*display: flex;*/
-  /*justify-content: center;*/
-  /*align-items: flex-start;*/
 }
+/*#login-wrapper:hover, #login-wrapper:focus, #login-wrapper:focus-within {*/
+  /*filter: drop-shadow(2px 4px 6px black);*/
+/*}*/
 body.success #login-wrapper {
   background-color: #79d28f;
 }
@@ -448,10 +449,20 @@ button {
   max-height: 100vh;
 }
 
-.panel .image {
+#background-selector {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: -webkit-fill-available;
+  height: auto;
+}
+
+#background-selector .image {
   display: flex;
   flex-direction: column;
   width: 48%;
+  max-height: 100px;
   background-color: transparent;
   margin-top: 1em;
   padding: 0;
@@ -462,17 +473,17 @@ button {
   border-radius: 0;
 }
 
-.panel .image > img {
+#background-selector .image > img {
   background-color: var(--alt1);
   width: -webkit-fill-available;
-  max-height: 200px;
+  height: 100%;
   object-fit: cover;
   filter: brightness(0.8);
 }
-.panel .image:hover, .panel .image:focus {
+#background-selector .image:hover, #background-selector .image:focus {
   filter: drop-shadow(2px 2px 6px black);
 }
-.panel .image:hover > img, .panel .image:focus > img {
+#background-selector .image:hover > img, #background-selector .image:focus > img {
   filter: brightness(1);
 }
 
diff --git a/themes/dracula/index.html b/themes/dracula/index.html
index d257ad1..79e4310 100644
--- a/themes/dracula/index.html
+++ b/themes/dracula/index.html
@@ -81,19 +81,19 @@
         </div>
 
         <div id="bottom-right" class="button-group">
-          <button id="shutdown-button">
+          <button id="shutdown-button" class="hide">
             <span class="mdi mdi-power"></span>
           </button>
 
-          <button id="restart-button">
+          <button id="restart-button" class="hide">
             <span class="mdi mdi-restart"></span>
           </button>
 
-          <button id="suspend-button">
+          <button id="suspend-button" class="hide">
             <span class="mdi mdi-power-sleep"></span>
           </button>
 
-          <button id="hibernate-button">
+          <button id="hibernate-button" class="hide">
             <span class="mdi mdi-power-cycle"></span>
           </button>
         </div>
@@ -112,17 +112,18 @@
         <span class="mdi mdi-close-thick mdi-24px"></span>
       </button>
 
-      <button class="image" tabindex="0">
-        <img src="./assets/dracula.png" alt="">
-      </button>
-      <button class="image" tabindex="0">
-        <img src="./assets/dracula.png" alt="">
-      </button>
-      <button class="image" tabindex="0">
-        <img src="./assets/dracula.png" alt="">
-      </button>
+      <div id="background-selector">
+        <button class="image" tabindex="0">
+          <img src="./assets/dracula.png" alt="">
+        </button>
+        <button class="image" tabindex="0">
+          <img src="./assets/dracula.png" alt="">
+        </button>
+        <button class="image" tabindex="0">
+          <img src="./assets/dracula.png" alt="">
+        </button>
+      </div>
     </div>
-
   </div>
 
   <script src="js/debug.js"></script>
@@ -130,6 +131,9 @@
   <script src="js/sessions.js"></script>
   <script src="js/authenticate.js"></script>
   <script src="js/sidebar.js"></script>
+  <script src="js/backgrounds.js"></script>
+  <script src="js/time-date.js"></script>
+  <script src="js/power.js"></script>
   <script src="js/index.js"></script>
 </body>
 </html>
diff --git a/themes/dracula/js/backgrounds.js b/themes/dracula/js/backgrounds.js
new file mode 100644
index 0000000..32f078b
--- /dev/null
+++ b/themes/dracula/js/backgrounds.js
@@ -0,0 +1,70 @@
+class Backgrounds {
+	constructor() {
+		this._localStorage = window.localStorage
+		this._defaultBackgroundArr = ["assets/dracula.png", "assets/window-blurred.png"]
+		this._sidebar = document.querySelector("#sidebar")
+		this._backgroundsList = document.querySelector("#background-selector")
+		this._background = document.querySelector("#background")
+		this._backgroundImages = null
+		this._backgroundImagesDir = null
+		this._backgroundPath = ""
+	}
+
+	_createImage(path) {
+		let image = document.createElement("img")
+		let button = document.createElement("button")
+		let imageName = path.replace(/^.*[\\\/]/, '')
+		button.classList.add("image")
+		image.src = path
+		image.alt = imageName
+		button.appendChild(image)
+		return button
+	}
+
+	async _createBackgroundArray() {
+		let images = await this._getImages()
+		this._backgroundImages = this._defaultBackgroundArr.concat(images)
+		this._setBackgroundImages()
+		return new Promise((resolve) => resolve())
+	}
+
+	_updateOnStartup() {
+		this._backgroundPath = this._localStorage.getItem("defaultBackgroundImage") || this._backgroundImages[0]
+		this._updateBackgroundImages()
+	}
+
+	_updateBackgroundImages() {
+		let img = this._background.querySelector("img")
+		img.src = this._backgroundPath
+		this._localStorage.setItem("defaultBackgroundImage", String(this._backgroundPath))
+	}
+
+	_setBackgroundImages() {
+		this._backgroundsList.innerHTML = ""
+		for (let i = 0; i < this._backgroundImages.length; i++) {
+			const path = this._backgroundImages[i]
+			let button = this._createImage(path)
+			button.addEventListener("click", () => {
+				this._backgroundPath = path
+				this._updateBackgroundImages()
+			})
+			this._backgroundsList.appendChild(button)
+		}
+	}
+
+	_getImages(path) {
+		this._backgroundImagesDir = greeter_config.branding.background_images_dir || '/usr/share/backgrounds'
+		return new Promise( (resolve) => {
+			theme_utils.dirlist(path ? path : this._backgroundImagesDir, true, result => {
+				resolve(result)
+			})
+		})
+	}
+
+	async _init() {	
+		await this._createBackgroundArray()
+		this._updateOnStartup()
+
+		return new Promise( resolve => resolve() )
+	}
+}
diff --git a/themes/dracula/js/index.js b/themes/dracula/js/index.js
index e985072..eec0686 100644
--- a/themes/dracula/js/index.js
+++ b/themes/dracula/js/index.js
@@ -35,7 +35,12 @@ async function initGreeter() {
 
   sidebar = new Sidebar()
 
-  //power = new Power()
+  time_date = new TimeDate()
+
+  backgrounds = new Backgrounds()
+  await backgrounds._init()
+
+  power = new Power()
 
   //battery = new Battery()
 
@@ -43,88 +48,9 @@ async function initGreeter() {
 
 }
 
-window.addEventListener("GreeterReady", initGreeter)
-
-//const panel_button = document.querySelector("#panel-button")
-//const close_panel_button = document.querySelector("#close-panel-button")
-const panel = document.querySelector(".panel")
-const screen = document.querySelector("#screen")
-
-const sessions_button = document.querySelector("#sessions-button")
-const sessions_dropdown = document.querySelector("#sessions-dropdown")
-
-const time_date_button = document.querySelector("#time-date")
-const pass_form = document.querySelector("#pass-form")
-
-//screen.addEventListener("click", (ev) => {
-  //if (ev.target == panel_button || ev.target.parentElement == panel_button) {
-    //panel.classList.toggle("hide")
-    //panel_button.blur()
-    //wait(100).then(() => {close_panel_button.focus()})
-  //} else
-  //if (ev.target != panel && ev.target.closest(".panel") == null) {
-    //panel.classList.add("hide")
-  //}
-
-  //if (ev.target == close_panel_button || ev.target.parentElement == close_panel_button) {
-    //panel.classList.toggle("hide")
-    //panel_button.focus()
-  //}
-
-  //if (ev.target == sessions_button || ev.target.parentElement == sessions_button) {
-    //sessions_dropdown.classList.toggle("hide")
-  //} else
-  //if (ev.target != sessions_dropdown && ev.target.closest(".dropdown") == null) {
-    //sessions_dropdown.classList.add("hide")
-  //}
-//})
-
-async function toggleTimeDate() {
-  time_date_button.blur()
-  pass_form.blur()
-  if (time_date_button.classList.contains("hide")) {
-    pass_form.classList.add("hide")
-    await wait(300)
-    time_date_button.classList.remove("hide")
-    await wait(100)
-    time_date_button.focus()
-  } else {
-    time_date_button.classList.add("hide")
-    await wait(300)
-    pass_form.classList.remove("hide")
-  }
+if (window._ready_event === undefined) {
+  _ready_event = new Event("GreeterReady")
+  window.dispatchEvent(_ready_event)
 }
 
-time_date_button.addEventListener("click", async (ev) => {
-  toggleTimeDate()
-})
-
-pass_form.addEventListener("keydown", (ev) => {
-  if (ev.keyCode == 27) {
-    toggleTimeDate()
-  }
-})
-
-//sessions_dropdown.addEventListener("keydown", (ev) => {
-  //if (ev.keyCode == 27) {
-    //sessions_dropdown.classList.toggle("hide")
-    //sessions_button.focus()
-  //}
-//})
-
-//panel.addEventListener("keydown", (ev) => {
-  //if (ev.keyCode == 27) {
-    //panel.classList.toggle("hide")
-    //panel_button.focus()
-  //}
-//})
-
-//const time_label = document.querySelector("#time-label")
-//const date_label = document.querySelector("#date-label")
-
-//function updateTimeDate() {
-  //time_label.innerText = theme_utils.get_current_localized_time()
-  //date_label.innerText = theme_utils.get_current_localized_date()
-//}
-
-//setInterval(updateTimeDate, 1000)
+window.addEventListener("GreeterReady", initGreeter)
diff --git a/themes/dracula/js/power.js b/themes/dracula/js/power.js
new file mode 100644
index 0000000..5a2269e
--- /dev/null
+++ b/themes/dracula/js/power.js
@@ -0,0 +1,83 @@
+class Power {
+  constructor() {
+    this._shutdown = document.querySelector("#shutdown-button")
+    this._restart = document.querySelector("#restart-button")
+    this._hibernate = document.querySelector("#hibernate-button")
+    this._suspend = document.querySelector("#suspend-button")
+    this._cover = document.querySelector("#cover")
+    this._covermsg = document.querySelector("#cover > #message")
+    this._init()
+  }
+
+  _show_message(text) {
+    this._covermsg.innerHTML = text
+    this._cover.classList.remove("hide")
+  }
+
+  async _do_shutdown() {
+    this._show_message("Shutting down")
+    await wait(1000)
+    lightdm.shutdown()
+  }
+  async _do_restart() {
+    this._show_message("Restarting")
+    await wait(1000)
+    lightdm.restart()
+  }
+  async _do_hibernate() {
+    this._show_message("Hibernating")
+    await wait(1000)
+    lightdm.hibernate()
+  }
+  async _do_suspend() {
+    this._show_message("Suspending")
+    await wait(1000)
+    lightdm.suspend()
+  }
+
+  _setShutdown() {
+    if (!lightdm.can_shutdown) return
+    this._shutdown.addEventListener("click", () => {
+      this._do_shutdown()
+    })
+    this._shutdown.classList.remove("hide")
+  }
+  _setRestart() {
+    if (!lightdm.can_restart) return
+    this._restart.addEventListener("click", () => {
+      this._do_restart()
+    })
+    this._restart.classList.remove("hide")
+  }
+  _setHibernate() {
+    if (!lightdm.can_hibernate) return
+    this._hibernate.addEventListener("click", () => {
+      this._do_hibernate()
+    })
+    this._hibernate.classList.remove("hide")
+  }
+  _setSuspend() {
+    if (!lightdm.can_suspend) return
+    this._suspend.addEventListener("click", () => {
+      this._do_suspend()
+    })
+    this._suspend.classList.remove("hide")
+  }
+  _setCover() {
+    this._cover.addEventListener("click", () => {
+      this._cover.classList.add("hide")
+    })
+  }
+
+  _setButtons() {
+    this._setShutdown()
+    this._setRestart()
+    this._setHibernate()
+    this._setSuspend()
+    this._setCover()
+  }
+
+  _init() {
+    this._setButtons()
+  }
+}
diff --git a/themes/dracula/js/time-date.js b/themes/dracula/js/time-date.js
new file mode 100644
index 0000000..415a2f4
--- /dev/null
+++ b/themes/dracula/js/time-date.js
@@ -0,0 +1,56 @@
+class TimeDate {
+	constructor() {
+		this._timeDateButton = document.querySelector("#time-date")
+		this._timeLabel = document.querySelector("#time-date #time-label")
+		this._dateLabel = document.querySelector("#time-date #date-label")
+		this._passForm = document.querySelector("#pass-form")
+		this._init()
+	}
+
+	_updateTimeDate() {
+		let date = theme_utils.get_current_localized_date()
+		let time = theme_utils.get_current_localized_time()
+
+		this._dateLabel.innerText = date
+		this._timeLabel.innerText = time
+	}
+
+	_setTimer() {
+		this._updateTimeDate()
+		setInterval(() => {
+			this._updateTimeDate()
+		}, 1000)
+	}
+
+	_setButtons() {
+		this._timeDateButton.addEventListener("click", (ev) => {
+			this.toggleTimeDate()
+		})
+		this._passForm.addEventListener("keydown", (ev) => {
+			if (ev.keyCode == 27) {
+				this.toggleTimeDate()
+			}
+		})
+	}
+
+	async toggleTimeDate() {
+		this._timeDateButton.blur()
+		this._passForm.blur()
+		if (this._timeDateButton.classList.contains("hide")) {
+			this._passForm.classList.add("hide")
+			await wait(300)
+			this._timeDateButton.classList.remove("hide")
+			await wait(100)
+			this._timeDateButton.focus()
+		} else {
+			this._timeDateButton.classList.add("hide")
+			await wait(300)
+			this._passForm.classList.remove("hide")
+		}
+	}
+	
+	_init() {
+		this._setTimer()
+		this._setButtons()
+	}
+}