diff --git a/Cargo.toml b/Cargo.toml
index 7ec3c8e..1d480cb 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -22,7 +22,4 @@ members = ["src-tauri"]
 
 [dependencies.web-sys]
 version = "0.3"
-features = [
-  "Window",
-  "console"
-]
\ No newline at end of file
+features = ["Window", "console", "HtmlSelectElement"]
diff --git a/public/glue.js b/public/glue.js
index e3bd0b5..4af08eb 100644
--- a/public/glue.js
+++ b/public/glue.js
@@ -10,4 +10,8 @@ export async function write_config_js(config) {
 
 export async function load_config_js() {
     return await invoke("load_config");
+}
+
+export async function load_champions_js() {
+    return await invoke("load_champions");
 }
\ No newline at end of file
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 9c69acb..815d546 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -17,6 +17,7 @@ serde_json = "1"
 toml = "0.5"
 tokio = "1.38.0"
 serde-wasm-bindgen = "0.4"
+walkdir = "2"
 
 [features]
 # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
diff --git a/src-tauri/src/extractor.rs b/src-tauri/src/extractor.rs
new file mode 100644
index 0000000..85622b8
--- /dev/null
+++ b/src-tauri/src/extractor.rs
@@ -0,0 +1,68 @@
+use std::process::Command;
+use std::env;
+use std::fs;
+use std::process::ExitStatus;
+use serde::de::value::Error;
+use serde::Deserialize;
+use serde::Serialize;
+use walkdir::WalkDir;
+use std::ffi::OsString;
+use std::path::PathBuf;
+
+use crate::config_settings;
+
+#[derive(Serialize, Deserialize)]
+pub struct Champion {
+    name: String,
+    location: String,
+}
+
+#[tauri::command]
+pub async fn load_champions() -> Vec<Champion> {
+
+    let config = config_settings::load_config().await;
+    
+    let champions: Vec<Champion> = WalkDir::new(&config.wad_dir)
+        .into_iter()
+        .filter_map(|entry| entry.ok())
+        .filter_map(|entry| {
+            let path = entry.path();
+            let file_name = path.file_name().and_then(|name| name.to_str())?;
+            let extension = path.extension().and_then(|ext| ext.to_str())?;
+            if extension == "client" &&
+               file_name.ends_with(".wad.client") &&
+               file_name.split('.').count() == 3
+            {
+                let name = file_name.split('.').next().unwrap_or("").to_string();
+                let location = path.to_str().unwrap_or("").to_string();
+                Some(Champion {
+                    name,
+                    location,
+                })
+            } else {
+                None
+            }
+        })
+        .collect();
+
+    champions
+}
+
+#[tauri::command]
+pub async fn extract_wad(champion: Champion) {
+    let config = config_settings::load_config().await;
+
+
+    let current_dir = env::current_dir().expect("Failed to get current directory");
+    let extraction_path = current_dir.join("champions").join(champion.name);
+    let bat_path = PathBuf::from(config.cslol_dir).join("cslol-tools\\wad-extract.exe");
+
+    if !extraction_path.exists() {
+        fs::create_dir_all(&extraction_path).expect("Failed to create extraction folder");
+    }
+
+    let _status = Command::new(&bat_path)
+        .arg(&champion.location)
+        .arg(&extraction_path)
+        .status().unwrap();
+}
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 452f30f..745d36f 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -2,7 +2,10 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 mod config_settings;
+mod extractor;
+
 use config_settings::*;
+use extractor::*;
 
 #[tauri::command]
 fn greet(name: &str) -> String {
@@ -11,7 +14,7 @@ fn greet(name: &str) -> String {
 
 fn main() {
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![greet, init_config, load_config, write_config])
+        .invoke_handler(tauri::generate_handler![greet, init_config, load_config, write_config, extract_wad, load_champions])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
diff --git a/src/app.rs b/src/app.rs
index 8c3bc36..02bfb56 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -15,6 +15,8 @@ pub enum Route {
     #[at("/")]
     Home,
     #[at("/extract")]
+    ExtractRoot,
+    #[at("/extract/*")]
     Extract,
     #[at("/settings")]
     Settings,
@@ -38,12 +40,20 @@ pub fn app() -> Html {
     }
 }
 
-fn switch(routes: Route) -> Html {
-    match routes {
+fn switch(route: Route) -> Html {
+    match route {
         Route::Home => html! { <Home/> },
-        Route::Extract => html! { <Extract/> },
+        Route::ExtractRoot | Route::Extract => html! { <Switch<ExtractRoute> render={switch_extract}/> },
         Route::Settings => html! { <Settings/> },
-        Route::NotFound => html! { <h1>{"404 Page Not Found"}</h1> },
+        Route::NotFound => html! { <NotFound/> },
     }
 }
 
+#[function_component(NotFound)]
+pub fn not_found() -> Html {
+    html! {
+        <h2 class={"content"}>
+            {"Not Found"}
+        </h2>
+    }
+}
\ No newline at end of file
diff --git a/src/extractor.rs b/src/extractor.rs
index 0da6524..46dd999 100644
--- a/src/extractor.rs
+++ b/src/extractor.rs
@@ -1,56 +1,19 @@
-use std::process::Command;
-use std::env;
-use std::fs;
-use walkdir::WalkDir;
-use std::ffi::OsString;
-use std::path::PathBuf;
+use serde::{Deserialize, Serialize};
+use serde_wasm_bindgen::*;
+use wasm_bindgen::prelude::*;
 
-use crate::config_settings;
-
-pub fn extract_wad() {
-    let config = config_settings::load_config();
-    let wad_files: Vec<OsString> = WalkDir::new(config.wad_dir)
-        .into_iter()
-        .filter_map(|entry| entry.ok())
-        .filter(|entry| {
-            let path = entry.path();
-            let file_name = path.file_name().and_then(|name| name.to_str()).unwrap_or("");
-            let extension = path.extension().and_then(|ext| ext.to_str()).unwrap_or("");
-            extension == "client" &&
-            file_name.ends_with(".wad.client") &&
-            file_name.split('.').count() == 3
-        })
-        .map(|entry| entry.path().to_owned().into_os_string())
-        .collect();
-
-    if wad_files.is_empty() {
-        eprintln!("No valid .wad.client files found in the directory");
-        return;
-    }
-
-    let current_dir = env::current_dir().expect("Failed to get current directory");
-    let extraction_path = current_dir.join("wads");
-    let bat_path = PathBuf::from(config.cslol_dir).join("cslol-tools\\wad-extract.exe");
-
-    if !extraction_path.exists() {
-        fs::create_dir_all(&extraction_path).expect("Failed to create extraction folder");
-    }
-
-    for (i, wad_file) in wad_files.iter().enumerate() {
-        let status = Command::new(&bat_path)
-            .arg(&wad_file)
-            .arg(&extraction_path)
-            .status()
-            .expect("Failed to execute command");
-
-        if status.success() {
-            println!("Successfully executed wad-extract.bat for {:?}", wad_file);
-        } else {
-            eprintln!("wad-extract.bat returned a non-zero status for {:?}", wad_file);
-        }
-        
-        if i >= 3 {
-            break;
-        }
-    }
+#[derive(Serialize, Deserialize, Clone)]
+pub struct Champion {
+    pub name: String,
+    pub location: String,
 }
+
+#[wasm_bindgen(module = "/public/glue.js")]
+extern "C" {
+    #[wasm_bindgen(js_name = load_champions_js, catch)]
+    pub async fn load_champions_js() -> Result<JsValue, JsValue>;
+}
+
+pub async fn load_champions() -> Result<Vec<Champion>, Error> {
+    from_value(load_champions_js().await.unwrap())
+}
\ No newline at end of file
diff --git a/src/main.rs b/src/main.rs
index 2c2a721..e133bd2 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,6 +1,6 @@
 mod app;
 mod views;
-// mod extractor;
+mod extractor;
 mod config_settings;
 
 use app::App;
@@ -11,6 +11,6 @@ fn main() {
     console_error_panic_hook::set_once();
     yew::Renderer::<App>::new().render();
     spawn_local(async move {
-        init_config().await;
+        let _ = init_config().await;
     })
 }
diff --git a/src/views/extract.rs b/src/views/extract.rs
index 653cd15..87c6f7e 100644
--- a/src/views/extract.rs
+++ b/src/views/extract.rs
@@ -1,18 +1,76 @@
-use yew::prelude::*;
+use wasm_bindgen::convert::IntoWasmAbi;
+use yew::{prelude::*, suspense::use_future};
+use yew_router::prelude::*;
+use web_sys::{console, HtmlSelectElement};
+
+use crate::{app::Route, extractor::load_champions};
+
+#[derive(Clone, Routable, PartialEq)]
+pub enum ExtractRoute {
+    #[at("/extract")]
+    Extract,
+    #[at("/extract/skinselect")]
+    SkinSelect,
+    #[not_found]
+    #[at("/404")]
+    NotFound,
+}
+
+pub fn switch_extract(route: ExtractRoute) -> Html {
+    match route {
+        ExtractRoute::Extract => html! { <Extract/> },
+        ExtractRoute::SkinSelect => html! { <SkinSelect/> },
+        ExtractRoute::NotFound => html!{ <Redirect<Route> to={Route::NotFound}/> },
+    }
+}
 
 #[function_component(Extract)]
-pub fn extract() -> Html {
-    html! {
-        <div class="content">
-        <h2>{"Extract"}</h2>
-        <p>{"Exctract shit"}</p>
+pub fn extract() -> HtmlResult {
 
-        <form action="/extract-wads" method="post">
-            <div class="option">
-                <button type="submit">{"Extract WADs"}</button>
+    let champions_future = use_future(|| async {load_champions().await})?;
+
+    let champions = champions_future.as_ref().unwrap().clone();
+
+    let champion_selected_handle = use_state(|| champions[0].name.clone());
+    let champion_selected = (*champion_selected_handle).clone();
+
+    let on_submit = {
+        let champion_selected_handle = champion_selected_handle.clone();
+
+        Callback::from(move |event: SubmitEvent| {
+            let champion_selected_event = event.target_unchecked_into::<web_sys::HtmlSelectElement>();
+
+            web_sys::console::log_1(&(*champion_selected_handle).clone().into());
+            champion_selected_handle.set(champion_selected_event.value());
+        })
+    };
+
+    Ok(
+        html! {
+            <div class="content">
+                <h2>{"Extract"}</h2>
+                <p>{"Exctract shit"}</p>
+
+                <div class="option">
+                    <form id="champion" onsubmit={on_submit}>
+                        <select id="champion">
+                        { for champions.iter().enumerate().map(|(index, champion)| html! {
+                            <option value={champion.name.clone()} selected={champion.name == champion_selected}>{&champion.name}</option>
+                        }) }
+                        </select>
+                        <br/>
+                        <button type="submit">{"Select"} </button>
+                    </form>
+                </div>
             </div>
-        </form>
+        }
+    )
+
+}
+
+#[function_component(SkinSelect)]
+pub fn skinselect() -> Html {
+    html! {
 
-    </div>
     }
 }
\ No newline at end of file
diff --git a/src/views/nav.rs b/src/views/nav.rs
index 4b7b0f1..00938af 100644
--- a/src/views/nav.rs
+++ b/src/views/nav.rs
@@ -7,7 +7,7 @@ pub fn nav() -> Html {
     html! {
         <div class="nav">
             <Link<Route> to={Route::Home}>{"Home"}</Link<Route>>
-            <Link<Route> to={Route::Extract}>{"Extract"}</Link<Route>>
+            <Link<Route> to={Route::ExtractRoot}>{"Extract"}</Link<Route>>
             <Link<Route> to={Route::Settings}>{"Settings"}</Link<Route>>
         </div>
     }