diff --git a/backend/src/driver_data.rs b/backend/src/driver_data.rs
index 9cdd38f..bd1e790 100644
--- a/backend/src/driver_data.rs
+++ b/backend/src/driver_data.rs
@@ -1,13 +1,18 @@
 use crate::models::{Driver, NewDriver};
 use common::CommonDriver;
-use diesel::prelude::*;
+use diesel::{prelude::*, query_builder::SqlQuery, sql_query};
 
-pub fn listdrivers(connection: &mut PgConnection) {
-    use crate::schema::drivers::dsl::*;
-    let queury = drivers.load::<Driver>(connection).expect("KANKER");
-    for driver in queury {
-        println!("{} {}", driver.name, driver.address);
+pub fn listdrivers(connection: &mut PgConnection) -> Vec<CommonDriver> {
+    let query = sql_query("SELECT * FROM drivers WHERE id = 10").load::<Driver>(connection);
+    let mut drivers: Vec<CommonDriver> = Vec::new();
+    for driver in query.unwrap() {
+        drivers.push(CommonDriver {
+            id: driver.id,
+            name: driver.name,
+            address: driver.address,
+        });
     }
+    return drivers;
 }
 
 pub fn addriver(connection: &mut PgConnection, new_driver: NewDriver) {
@@ -31,4 +36,3 @@ pub fn get_driver(connection: &mut PgConnection, driver_id: i32) -> CommonDriver
         address: String::from(&driver.address),
     };
 }
-
diff --git a/backend/src/models.rs b/backend/src/models.rs
index 5d242c1..ed035e1 100644
--- a/backend/src/models.rs
+++ b/backend/src/models.rs
@@ -67,7 +67,8 @@ pub struct AutoIssuedTicket<'a> {
 }
 
 //Drivers
-#[derive(Queryable, AsChangeset, Identifiable)]
+#[derive(Queryable, AsChangeset, Identifiable, QueryableByName)]
+#[table_name = "drivers"]
 pub struct Driver {
     pub id: i32,
     pub name: String,
@@ -87,8 +88,8 @@ pub struct NewDriver<'a> {
 }
 
 //Vehicles
-#[derive(Queryable)]
-#[diesel(belongs_to(Driver))]
+#[derive(Queryable, QueryableByName)]
+#[diesel(belongs_to(Driver), table_name = vehicles)]
 pub struct Vehicle {
     pub model: Option<String>,
     pub color: Option<String>,
diff --git a/backend/src/yes.rs b/backend/src/yes.rs
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/dist/db-frontend-c0621f030a0450bc.js b/frontend/dist/db-frontend-906e3d2c2bbb6313.js
similarity index 98%
rename from frontend/dist/db-frontend-c0621f030a0450bc.js
rename to frontend/dist/db-frontend-906e3d2c2bbb6313.js
index c894770..bacefbe 100644
--- a/frontend/dist/db-frontend-c0621f030a0450bc.js
+++ b/frontend/dist/db-frontend-906e3d2c2bbb6313.js
@@ -615,12 +615,12 @@ function getImports() {
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm0(arg0, arg1));
     };
-    imports.wbg.__wbindgen_closure_wrapper4152 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 287, __wbg_adapter_18);
+    imports.wbg.__wbindgen_closure_wrapper4026 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 272, __wbg_adapter_18);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper4211 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 303, __wbg_adapter_21);
+    imports.wbg.__wbindgen_closure_wrapper4088 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 288, __wbg_adapter_21);
         return addHeapObject(ret);
     };
 
@@ -658,7 +658,7 @@ function initSync(module) {
 
 async function init(input) {
     if (typeof input === 'undefined') {
-        input = new URL('db-frontend-c0621f030a0450bc_bg.wasm', import.meta.url);
+        input = new URL('db-frontend-906e3d2c2bbb6313_bg.wasm', import.meta.url);
     }
     const imports = getImports();
 
diff --git a/frontend/dist/db-frontend-906e3d2c2bbb6313_bg.wasm b/frontend/dist/db-frontend-906e3d2c2bbb6313_bg.wasm
new file mode 100644
index 0000000..c0af028
Binary files /dev/null and b/frontend/dist/db-frontend-906e3d2c2bbb6313_bg.wasm differ
diff --git a/frontend/dist/db-frontend-c0621f030a0450bc_bg.wasm b/frontend/dist/db-frontend-c0621f030a0450bc_bg.wasm
deleted file mode 100644
index bc31daf..0000000
Binary files a/frontend/dist/db-frontend-c0621f030a0450bc_bg.wasm and /dev/null differ
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 46ef420..ab6c616 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -2,10 +2,10 @@
         <meta charset="utf-8">
         <title>Ze greatest</title>
     
-<link rel="preload" href="/db-frontend-c0621f030a0450bc_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
-<link rel="modulepreload" href="/db-frontend-c0621f030a0450bc.js"></head>
+<link rel="preload" href="/db-frontend-906e3d2c2bbb6313_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+<link rel="modulepreload" href="/db-frontend-906e3d2c2bbb6313.js"></head>
 <body>
-<script type="module">import init from '/db-frontend-c0621f030a0450bc.js';init('/db-frontend-c0621f030a0450bc_bg.wasm');</script><script>(function () {
+<script type="module">import init from '/db-frontend-906e3d2c2bbb6313.js';init('/db-frontend-906e3d2c2bbb6313_bg.wasm');</script><script>(function () {
     var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     var url = protocol + '//' + window.location.host + '/_trunk/ws';
     var poll_interval = 5000;
diff --git a/frontend/src/fetching.rs b/frontend/src/fetching.rs
index 5050a98..6360c49 100644
--- a/frontend/src/fetching.rs
+++ b/frontend/src/fetching.rs
@@ -1,14 +1,13 @@
-use gloo::{console::log, utils::format::JsValueSerdeExt};
+use common::{CommonAdmin, CommonDriver};
 use std::{
     error::Error,
     fmt::{self, Debug, Display, Formatter},
 };
 use wasm_bindgen::{JsCast, JsValue};
-
-use common::{CommonAdmin, CommonDriver};
 use wasm_bindgen_futures::JsFuture;
 use web_sys::{Request, RequestInit, RequestMode, Response};
-use yew::{html, Component, Context, Html};
+use yew::props;
+use yew::{html, Component, Context, Html, Properties};
 //Trait to handle Future yew HTMLS
 pub trait UseAble {
     //Return  HTML if didn't fail return error if not
@@ -17,13 +16,13 @@ pub trait UseAble {
 impl UseAble for CommonDriver {
     fn use_it(self) -> Result<Html, String> {
         let name = self.name;
-        let email = self.address;
+        let address = self.address;
         let id = self.id;
         let html = html! {
             <div>
                 <h2> { "Driver:" } </h2>
                 <p> { format!("Name: {}", name) } </p>
-                <p> { format!("Email: {}", email) } </p>
+                <p> { format!("Address: {}", address) } </p>
                 <p> { format!("ID: {}", id) } </p>
             </div>
         };
@@ -33,13 +32,13 @@ impl UseAble for CommonDriver {
 impl UseAble for CommonAdmin {
     fn use_it(self) -> Result<Html, String> {
         let name = self.name;
-        let email = self.address;
+        let address = self.address;
         let id = self.id;
         let html = html! {
             <div>
                 <h2> { "Admin:" } </h2>
                 <p> { format!("Name: {}", name) } </p>
-                <p> { format!("Email: {}", email) } </p>
+                <p> { format!("Address: {}", address) } </p>
                 <p> { format!("ID: {}", id) } </p>
             </div>
         };
@@ -48,16 +47,18 @@ impl UseAble for CommonAdmin {
 }
 
 //Wwasm bingdengen code
-const DRIVER_URL: &str = "http://db.sewelam.tech/api/driver/1234";
+const DRIVER_URL: &str = "http://db.sewelam.tech/api/driver/50";
+const ADMIN_URL: &str = "http://db.sewelam.tech/api/admin/";
+const TICKET_URL: &str = "http://db.sewelam.tech/api/ticket/";
 const FUNNY_TXT_URL: &str = "https://whatthecommit.com/index.txt";
 const INCORRECT_URL: &str = "http://libkyy.cf";
 //Generic Msg for our states
-enum Msg<T> {
+pub enum Msg<T> {
     SetDataFetchState(FetchState<T>),
     GetData,
     GetError,
 }
-struct RandomCommit {
+pub struct RandomCommit {
     commit: FetchState<String>,
 }
 //This trait is for all yew components
@@ -78,7 +79,7 @@ impl Component for RandomCommit {
             }
             Msg::GetData => {
                 ctx.link().send_future(async {
-                    match fetch_commit(FUNNY_TXT_URL).await {
+                    match fetch_url_text(FUNNY_TXT_URL).await {
                         Ok(commit) => Msg::SetDataFetchState(FetchState::Success(commit)),
                         Err(err) => Msg::SetDataFetchState(FetchState::Failed(err)),
                     }
@@ -89,7 +90,7 @@ impl Component for RandomCommit {
             }
             Msg::GetError => {
                 ctx.link().send_future(async {
-                    match fetch_commit(INCORRECT_URL).await {
+                    match fetch_url_text(INCORRECT_URL).await {
                         Ok(commit) => Msg::SetDataFetchState(FetchState::Success(commit)),
                         Err(err) => Msg::SetDataFetchState(FetchState::Failed(err)),
                     }
@@ -108,27 +109,36 @@ impl Component for RandomCommit {
                     <button onclick={ctx.link().callback(|_| Msg::GetData)}>
                         { "Get commit msg" }
                     </button>
-                    <button onclick={ctx.link().callback(|_| Msg::GetError)}>
-                        { "Get using incorrect URL" }
-                    </button>
                 </>
             },
             FetchState::Fetching => html! { "Fetching" },
             FetchState::Success(data) => {
-                html! { <> <h2> {"Commit Header:"} </h2> {data}</> }
+                html! { <> {data}</> }
             }
             FetchState::Failed(err) => html! { err },
         }
     }
 }
 //Generate Struct and implement component for driver using CommonDriver
-struct Driver {
+pub struct DriverComponent {
     driver: FetchState<String>,
 }
+
+#[derive(Default, Properties, PartialEq)]
+pub struct ApiParams {
+    pub entered_id: i32,
+}
+impl ApiParams {
+    pub fn new_api_thingy_with_id(id: i32) -> Self {
+        props! { ApiParams {
+            entered_id: id
+        }}
+    }
+}
 //implement the component for Driver using a string
-impl Component for Driver {
+impl Component for DriverComponent {
     type Message = Msg<String>;
-    type Properties = ();
+    type Properties = ApiParams;
     fn create(_ctx: &Context<Self>) -> Self {
         Self {
             driver: FetchState::NotFetching,
@@ -143,7 +153,7 @@ impl Component for Driver {
             }
             Msg::GetData => {
                 ctx.link().send_future(async {
-                    match fetch_driver(DRIVER_URL).await {
+                    match fetch_url_text(DRIVER_URL).await {
                         Ok(driver) => Msg::SetDataFetchState(FetchState::Success(driver)),
                         Err(err) => Msg::SetDataFetchState(FetchState::Failed(err)),
                     }
@@ -154,7 +164,7 @@ impl Component for Driver {
             }
             Msg::GetError => {
                 ctx.link().send_future(async {
-                    match fetch_driver(INCORRECT_URL).await {
+                    match fetch_url_text(INCORRECT_URL).await {
                         Ok(driver) => Msg::SetDataFetchState(FetchState::Success(driver)),
                         Err(err) => Msg::SetDataFetchState(FetchState::Failed(err)),
                     }
@@ -170,16 +180,22 @@ impl Component for Driver {
         match &self.driver {
             FetchState::NotFetching => html! {
                 <>
+
+                    <label for="id"> {"ID:"} </label>
+                    <input type="text" id="name" name="name"/>
+
+                    <br/>
                     <button onclick={ctx.link().callback(|_| Msg::GetData)}>
                         { "Get driver" }
                     </button>
-                    <button onclick={ctx.link().callback(|_| Msg::GetError)}>
-                        { "Get using incorrect URL" }
-                    </button>
                 </>
             },
             FetchState::Fetching => html! { "Fetching" },
-            FetchState::Success(data) => html! { <> <h2> {"Driver"} </h2> {data} </> },
+            FetchState::Success(data) => html! { <> {data} <br/>
+                <button onclick={ctx.link().callback(|_| Msg::GetData)}>
+                    { "Get new driver (assuming input works :D)" }
+                </button>
+            </> },
             FetchState::Failed(err) => html! { err },
         }
     }
@@ -211,26 +227,7 @@ pub enum FetchState<T> {
     Failed(FetchError),
 }
 
-//Working example function
-async fn fetch_commit(url: &'static str) -> Result<String, FetchError> {
-    //initialise request
-    let mut opts = RequestInit::new();
-    opts.method("GET");
-    opts.mode(RequestMode::Cors); //Cors is required for fetch to work
-
-    let request = Request::new_with_str_and_init(url, &opts)?;
-
-    let window = gloo::utils::window();
-    //get response value
-    let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;
-    let resp: Response = resp_value.dyn_into().unwrap();
-
-    //parse response value as text
-    let text = JsFuture::from(resp.text()?).await?;
-    Ok(text.as_string().unwrap())
-}
-
-async fn fetch_driver(url: &'static str) -> Result<String, FetchError> {
+async fn fetch_url_text(url: &'static str) -> Result<String, FetchError> {
     let mut opts = RequestInit::new();
     opts.method("GET");
     opts.mode(RequestMode::Cors); //Cors is required for fetch to work
@@ -243,12 +240,3 @@ async fn fetch_driver(url: &'static str) -> Result<String, FetchError> {
     let text = JsFuture::from(resp.text()?).await?;
     Ok(text.as_string().unwrap())
 }
-
-//renders components above
-pub fn render_commit() {
-    yew::Renderer::<RandomCommit>::new().render();
-}
-
-pub fn render_driver() {
-    yew::Renderer::<Driver>::new().render();
-}
diff --git a/frontend/src/main.rs b/frontend/src/main.rs
index 7c10f73..f93ac7e 100644
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -1,59 +1,20 @@
+mod driver_list;
 mod fetching;
 use yew::prelude::*;
 
+use crate::fetching::DriverComponent;
+
 #[function_component]
 fn App() -> Html {
-    let stdnts = vec![
-        Stdnt {
-            id: 1,
-            name: "Hamada".to_string(),
-            email: "Hamada@Gmail.com".to_string(),
-            gpa: 3.4,
-        },
-        Stdnt {
-            id: 2,
-            name: "Gamal".to_string(),
-            email: "Gamal@Gmail.com".to_string(),
-            gpa: 4.0,
-        },
-        Stdnt {
-            id: 3,
-            name: "Joe".to_string(),
-            email: "joe@proton.mail".to_string(),
-            gpa: 3.8,
-        },
-    ];
-    let stdnts_comp = stdnts
-        .iter()
-        .map(|stdnt| {
-            html! {
-                <>
-                <p key={stdnt.id}>{format!("Name: {}", stdnt.name)} </p>
-                <p key={stdnt.id}>{format!("Email: {}", stdnt.email)} </p>
-                <p key={stdnt.id}>{format!("GPA: {}",stdnt.gpa)} </p>
-                <br/>
-                </>
-            }
-        })
-        .collect::<Html>();
-
+    let entered_id = 50;
     html! {
         <div>
-            <h2> { "Students:" } </h2>
-            <p> { stdnts_comp } </p>
-            // <p> { driver_comp } </p>
+            <h2> {"Better?"} </h2>
+            <DriverComponent {entered_id}/>
         </div>
     }
 }
-struct Stdnt {
-    id: usize,
-    name: String,
-    gpa: f32,
-    email: String,
-}
 
 fn main() {
     yew::Renderer::<App>::new().render();
-    fetching::render_commit();
-    fetching::render_driver();
 }