diff --git a/src/backend/mod.rs b/src/backend/mod.rs
index 1640adf..27715ab 100644
--- a/src/backend/mod.rs
+++ b/src/backend/mod.rs
@@ -1 +1,6 @@
-// use dioxus::prelude::*;
+use dioxus::prelude::*;
+
+#[server]
+pub async fn log_in(username: String, password: String) -> Result<String, ServerFnError> {
+    Ok(format!("{username}@{password}"))
+}
diff --git a/src/login.rs b/src/login.rs
index 3e40e84..288b617 100644
--- a/src/login.rs
+++ b/src/login.rs
@@ -1,16 +1,48 @@
 use dioxus::prelude::*;
 
-use crate::Route;
+use crate::{backend, utils};
 
 const LOGIN_CSS: Asset = asset!("/assets/styles/login.css");
 
 #[component]
 pub fn Login() -> Element {
+    let username = use_signal(|| String::new());
+    let password = use_signal(|| String::new());
+
+    let is_disabled = {
+        let username = username.clone();
+        let password = password.clone();
+        move || username().is_empty() || password().is_empty()
+    };
+
+    let log_in = {
+        let username = username.clone();
+        let password = password.clone();
+        move || async move {
+            if username().is_empty() || password().is_empty() {
+                return;
+            }
+            match backend::log_in(username.read().clone(), password.read().clone()).await {
+                Ok(id) => {
+                    utils::set_cookie("session_id", &id);
+                    utils::redirect("/dashboard");
+                }
+                Err(_) => {}
+            }
+        }
+    };
+
     rsx! {
         document::Link { rel: "stylesheet", href: LOGIN_CSS }
 
         div {
             id: "login_wrapper",
+            onkeypress: move |e: Event<KeyboardData>| async move {
+                if e.key() == Key::Enter {
+                    log_in().await;
+                }
+            },
+            tabindex: "0",
 
             img {
                 id: "background_img",
@@ -23,16 +55,23 @@ pub fn Login() -> Element {
 
                 div {
                     p { "Username" }
-                    input { class: "field" }
+                    input { onchange: {let mut username = username.clone(); move |e: Event<FormData>| {username.set(e.value())}}, class: "field" }
                 }
                 div{
                     p { "Password" }
-                    input { class: "field" }
+                    input {
+                        class: "field",
+                        onchange: {
+                            let mut password = password.clone();
+                            move |e: Event<FormData>| {password.set(e.value())}
+                        },
+                    }
                 }
 
-                Link {
-                    to: Route::Dashboard {  },
-                    button { "Login" }
+                button {
+                    disabled: is_disabled(),
+                    onclick: move |_| log_in(),
+                    "Login"
                 }
             }
         }
diff --git a/src/main.rs b/src/main.rs
index 8cb7287..ed55e45 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,9 +1,9 @@
 mod backend;
 mod components;
-mod cookie;
 mod dashboard;
 mod login;
 mod settings;
+mod utils;
 
 use dioxus::prelude::*;
 use web_sys::window;
@@ -38,7 +38,7 @@ fn App() -> Element {
     use_effect({
         let mut theme = theme.clone();
         move || {
-            theme.set(cookie::get_cookie("theme").unwrap_or_default());
+            theme.set(utils::get_cookie("theme").unwrap_or_default());
         }
     });
 
diff --git a/src/settings.rs b/src/settings.rs
index e09318e..e339ad1 100644
--- a/src/settings.rs
+++ b/src/settings.rs
@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 
-use crate::{components::sidebar::SideBar, cookie};
+use crate::{components::sidebar::SideBar, utils};
 
 pub enum Property {
     Dropdown(&'static [&'static str]),
@@ -44,10 +44,10 @@ pub fn Settings() -> Element {
                                         }
                                         div {
                                             id: "{name}",
-                                            class: "dropdown",
+                                            class: "dropdown dropdown-none",
                                             for o in opts {
                                                 button { onclick: move |_| {
-                                                    cookie::set_cookie(name, &o);
+                                                    utils::set_cookie(name, &o);
                                                     if *needs_refresh {
                                                         if let Some(win) = web_sys::window() {
                                                             win.location().reload().unwrap();
diff --git a/src/cookie.rs b/src/utils.rs
similarity index 90%
rename from src/cookie.rs
rename to src/utils.rs
index f08ae32..8caa3bd 100644
--- a/src/cookie.rs
+++ b/src/utils.rs
@@ -1,3 +1,4 @@
+use dioxus::prelude::use_navigator;
 use wasm_bindgen::JsCast;
 use web_sys::{window, HtmlDocument};
 
@@ -35,3 +36,7 @@ pub fn get_cookie(name: &str) -> Option<String> {
     }
     None
 }
+
+pub fn redirect(target: &str) {
+    use_navigator().push(target);
+}