diff --git a/assets/backgrounds/22.gif b/assets/backgrounds/22.gif
new file mode 100644
index 0000000..fe6968e
Binary files /dev/null and b/assets/backgrounds/22.gif differ
diff --git a/assets/backgrounds/22.mp4 b/assets/backgrounds/22.mp4
new file mode 100644
index 0000000..df243f8
Binary files /dev/null and b/assets/backgrounds/22.mp4 differ
diff --git a/assets/backgrounds/22.webm b/assets/backgrounds/22.webm
new file mode 100644
index 0000000..1d0392e
Binary files /dev/null and b/assets/backgrounds/22.webm differ
diff --git a/src/copland.rs b/src/copland.rs
index 2834e5f..7f18b5d 100644
--- a/src/copland.rs
+++ b/src/copland.rs
@@ -208,7 +208,7 @@ impl Component for Copland {
                 self.theme = theme;
                 let el = self.background_video.cast::<HtmlVideoElement>().unwrap();
                 el.load();
-                el.play().ok();
+                // el.onloadeddata().unwrap().
                 true
             },
             CoplandMsg::OpenWindow(window) => {
@@ -420,11 +420,10 @@ impl Component for Copland {
                 >
                     <source src={format!("assets/backgrounds/{}.webm", self.theme.background)} type="video/webm"/>
                     <source src={format!("assets/backgrounds/{}.mp4", self.theme.background)} type="video/mp4"/>
-                </video>    
+                </video>
                 <div id="window-area"
                     class="window-area"
                     ref={self.window_area.clone()}
-                    // style={format!("background-image: url(assets/backgrounds/{}.gif)", self.theme.background)}
                 >
                     {
                         self.windows.values().map(|window| {
diff --git a/src/main.rs b/src/main.rs
index a6689f4..9a97a83 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -7,7 +7,7 @@ use copland::{Copland, Theme};
 
 use rand::Rng;
 
-pub const MAX_BACKGROUND_INDEX: u32 = 22;
+pub const MAX_BACKGROUND_INDEX: u32 = 23;
 
 #[function_component(App)]
 fn app() -> Html {