diff --git a/Justfile b/Justfile
index 4a0e2a2..8ad9ab9 100644
--- a/Justfile
+++ b/Justfile
@@ -9,3 +9,6 @@ bin args='':
 
 hello:
     @echo "Hello, world!"
+
+watch:
+    cargo watch -c -q -w src -w templates -x run
diff --git a/src/main.rs b/src/main.rs
index 124cde5..f7161c1 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -9,7 +9,7 @@ use log::{debug, info};
 use serde::Serialize;
 use std::sync::{Arc, Mutex};
 
-use vbplay::{AudioThread, DeviceSelection};
+use vbplay::{AudioThread, DeviceSelection, SoundDecoder};
 
 mod soundclips;
 mod state;
@@ -21,15 +21,19 @@ async fn main() {
     jinja.set_loader(path_loader("templates"));
     let template_engine = Engine::from(jinja);
 
-    let audio = vbplay::audio_thread(DeviceSelection::FindByPattern(
-        ".*VB-Audio Virtual Cable.*".to_owned(),
-    ));
+    let audio = vbplay::audio_thread(
+        DeviceSelection::FindByPattern(".*VB-Audio Virtual Cable.*".to_owned()),
+        SoundDecoder::Detect,
+    );
     let audio: Arc<Mutex<AudioThread>> = Arc::new(Mutex::new(audio));
 
     let app_state = AppState {
         engine: template_engine,
-        clips: soundclips::scan_directory_for_clips("E:/sounds/soundboard/all", &["mp3"])
-            .expect("No Soundclips found."),
+        clips: soundclips::scan_directory_for_clips(
+            "E:/sounds/soundboard/all",
+            &["mp3", "ogg", "wav", "flac"],
+        )
+        .expect("No Soundclips found."),
         player: audio,
         playback: None,
     };
diff --git a/src/vbplay.rs b/src/vbplay.rs
index 56a7bf5..a6c26c9 100644
--- a/src/vbplay.rs
+++ b/src/vbplay.rs
@@ -4,11 +4,18 @@ use log::{debug, error, info};
 use minimp3::{Decoder, Error};
 use regex::Regex;
 use std::fs::File;
-use std::io::Cursor;
 use std::io::Read;
+use std::io::{BufReader, Cursor};
 use std::sync::mpsc::{self, Sender};
 use std::thread;
 
+#[derive(Clone)]
+pub enum SoundDecoder {
+    Detect,
+    Mp3Mini,
+    Rodio,
+}
+
 pub enum Command {
     Play(String),
     Stop,
@@ -57,7 +64,7 @@ fn select_device_by_id(index: usize) -> Option<Device> {
 
 pub type AudioThread = Sender<Command>;
 
-pub fn audio_thread(select_device: DeviceSelection) -> AudioThread {
+pub fn audio_thread(select_device: DeviceSelection, select_decoder: SoundDecoder) -> AudioThread {
     let (tx, rx) = mpsc::channel();
 
     thread::spawn(move || {
@@ -76,7 +83,7 @@ pub fn audio_thread(select_device: DeviceSelection) -> AudioThread {
         for command in rx {
             match command {
                 Command::Play(file_name) => {
-                    play_file(&sink, file_name);
+                    play_file(&sink, file_name, &select_decoder);
                 }
                 Command::Stop => {
                     sink.stop();
@@ -88,31 +95,52 @@ pub fn audio_thread(select_device: DeviceSelection) -> AudioThread {
     tx
 }
 
-fn play_file(sink: &rodio::Sink, file_name: String) {
-    let mut mp3_file = File::open(file_name).unwrap();
-    let mut mp3_data = Vec::new();
-    mp3_file.read_to_end(&mut mp3_data).unwrap();
-
-    // Iterate over the MP3 frames and play them
-    let mut decoder = Decoder::new(Cursor::new(mp3_data));
-    loop {
-        match decoder.next_frame() {
-            Ok(frame) => {
-                let source = rodio::buffer::SamplesBuffer::new(
-                    2,
-                    frame.sample_rate.try_into().unwrap(),
-                    &*frame.data,
-                );
-                sink.append(source);
-            }
-            Err(Error::Eof) => {
-                debug!("EOF");
-                break;
-            }
-            Err(e) => {
-                error!("{:?}", e);
-                break;
-            }
-        }
+fn detect_decoder(file_name: &str, sound_decoder: &SoundDecoder) -> SoundDecoder {
+    // TODO: File detection via ending or whitelisting?
+    // This function MUST NOT return SoundDecoder::Detect
+    match sound_decoder {
+        SoundDecoder::Detect => SoundDecoder::Rodio,
+        other => other.clone(),
+    }
+}
+
+fn play_file(sink: &rodio::Sink, file_name: String, sound_decoder: &SoundDecoder) {
+    match detect_decoder(&file_name, sound_decoder) {
+        SoundDecoder::Mp3Mini => {
+            // MP3 Mini provides low latency playback
+            let mut sound_file = File::open(file_name).unwrap();
+            let mut file_data = Vec::new();
+            sound_file.read_to_end(&mut file_data).unwrap();
+            // Iterate over the MP3 frames and play them
+            let mut decoder = Decoder::new(Cursor::new(file_data));
+            loop {
+                match decoder.next_frame() {
+                    Ok(frame) => {
+                        let source = rodio::buffer::SamplesBuffer::new(
+                            2,
+                            frame.sample_rate.try_into().unwrap(),
+                            &*frame.data,
+                        );
+                        sink.append(source);
+                    }
+                    Err(Error::Eof) => {
+                        debug!("EOF");
+                        break;
+                    }
+                    Err(e) => {
+                        error!("{:?}", e);
+                        break;
+                    }
+                }
+            }
+        }
+        SoundDecoder::Rodio => {
+            // Rodio currently supports Ogg, Mp3, WAV and Flac
+            let file = File::open(&file_name).unwrap();
+            let source = rodio::Decoder::new(BufReader::new(file)).expect("Failed to open Decoder");
+            sink.append(source);
+            //sink.sleep_until_end();
+        }
+        SoundDecoder::Detect => error!("This should never happen"),
     }
 }
diff --git a/templates/index.jinja b/templates/index.jinja
index f99738f..235fde5 100644
--- a/templates/index.jinja
+++ b/templates/index.jinja
@@ -5,15 +5,48 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <!-- UIkit CSS -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/css/uikit.min.css" />
+  <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://unpkg.com/fomantic-ui@2.9.3/dist/semantic.min.css">
+  <script src="https://unpkg.com/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
 
-  <!-- UIkit JS -->
-  <script src="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/js/uikit.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/js/uikit-icons.min.js"></script>
-
-  <title>Play</title>
+  <title>Soundboard</title>
   <script>
+    function setLandscape() {
+      if (screen.orientation && screen.orientation.lock) {
+        screen.orientation.lock('landscape').then(() => {
+          console.log("Landscape mode activated");
+        }).catch((error) => {
+          console.error("Landscape mode failed:", error);
+        });
+      } else {
+        console.log("Screen Orientation API not supported");
+      }
+    }
+
+    function setPortrait() {
+      if (screen.orientation && screen.orientation.lock) {
+        screen.orientation.lock('portrait').then(() => {
+          console.log("Portrait mode activated");
+        }).catch((error) => {
+          console.error("Portrait mode failed:", error);
+        });
+      } else {
+        console.log("Screen Orientation API not supported");
+      }
+    }
+
+    function toggleFullScreen() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen().catch((error) => {
+          console.error("Error attempting to enable full-screen mode:", error);
+        });
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
+      }
+    }
+
     function play(hash) {
       fetch("/play/" + hash);
     }
@@ -22,26 +55,72 @@
       fetch("/stop");
     }
   </script>
+  <style type="text/css">
+    :root {
+      --left-column-width: 98px;
+      /* Define a CSS variable for the width */
+    }
+
+    .left-column {
+      width: var(--left-column-width) !important;
+      height: 100%;
+      position: fixed;
+      /* Fix the position relative to the viewport */
+      top: 0;
+      /* Align the top edge with the top of the viewport */
+      bottom: 0;
+      /* Align the bottom edge with the bottom of the viewport */
+      overflow-y: auto;
+      /* Add scroll to the left column if content overflows */
+
+      background-color: rgb(27, 28, 29);
+    }
+
+    .right-column {
+      margin-left: var(--left-column-width) !important;
+    }
+  </style>
 </head>
 
 <body>
-  <div id="main" class="uk-container">
-    <div id="categories">
-      <span class="category">Category 1</span>
-      <!-- More categories -->
-      <button class="more">More</button>
-    </div>
-    <div class="uk-text-center" uk-grid>
-      <div id="soundclips">
-        {% for clip in clips %}
-        <button class="uk-button uk-button-default" onclick="play('{{clip.hash}}')">{{clip.file_name}}</button>
-        {% endfor %}
-      </div>
-    </div>
-    <div class="player">
-      <button onclick="stop()">Stop.</button>
+
+  <div class="left-column column fixed">
+    <div class="ui inverted labeled icon inline vertical compact mini menu" style="min-width: 96.75px;">
+      <a class="item" onclick="stop()">
+        <i class="stop icon"></i>
+        Stop
+      </a>
+      <a class="item" onclick="toggleFullScreen()">
+        <i class="expand layout icon"></i>
+        Fullscreen
+      </a>
+      <a class="item" onclick="setLandscape()">
+        <i class="tv icon"></i>
+        Landscape
+      </a>
+      <a class="item" onclick="setPortrait()">
+        <i class="mobile alternate icon"></i>
+        Portrait
+      </a>
     </div>
   </div>
+  <div class="right-column column">
+
+    <div class="ui basic segment">
+
+      <div class="ui wrapped compact wrapping spaced /**buttons">
+        {% for clip in clips %}
+        <button class="ui {{ loop.cycle('red', 'blue', 'green', 'violet', 'orange') }} basic button"
+          onclick="play('{{clip.hash}}')">{{clip.file_name}}</button>
+        {% endfor %}
+
+      </div>
+    </div>
+  </div>
+  </div>
+
+
+
 </body>
 
 </html>
\ No newline at end of file