From 10de47b9117a15b2743d45f36fe74f97870b1516 Mon Sep 17 00:00:00 2001
From: schn33fuchs <silas.raffauf@raffauf-clan.de>
Date: Mon, 11 May 2026 13:15:03 +0200
Subject: [PATCH] Styling

Copied Ninos styles with copilot
---
 frontend/src/pages/basic_pages.rs             |  28 +-
 frontend/src/pages/ticket.rs                  |  81 ++--
 frontend/src/pages/user.rs                    | 125 +++---
 frontend/src/styles/_mixins.scss              |  10 +-
 frontend/src/styles/_utilities.scss           |   3 +-
 frontend/src/styles/_variables.scss           |  30 +-
 .../src/styles/components/_diagnostics.scss   |  44 ++-
 frontend/src/styles/components/_pages.scss    | 355 ++++++++++++++++++
 frontend/src/styles/components/_setup.scss    | 120 ++++++
 frontend/src/styles/components/_sidebar.scss  |  20 +-
 frontend/src/styles/components/_tickets.scss  |  48 ++-
 frontend/src/styles/main.scss                 | 197 +++++++++-
 12 files changed, 923 insertions(+), 138 deletions(-)
 create mode 100644 frontend/src/styles/components/_pages.scss
 create mode 100644 frontend/src/styles/components/_setup.scss

diff --git a/frontend/src/pages/basic_pages.rs b/frontend/src/pages/basic_pages.rs
index c918599..4f948ce 100644
--- a/frontend/src/pages/basic_pages.rs
+++ b/frontend/src/pages/basic_pages.rs
@@ -56,11 +56,13 @@ pub fn home_component() -> Html {
     }
 
     html! {
-        <div>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Welcome" }</h1>
+            </div>
             <crate::utilities::TicketCount/>
-
             <p>{ "You are logged in as: " }</p>
-            <p>{ &*name }</p>
+            <p class="text-muted">{ &*name }</p>
         </div>
     }
 }
@@ -80,9 +82,12 @@ pub fn home_component() -> Html {
 pub fn not_found_component() -> Html {
     let message = "404 Not found";
     html! {
-        <div>
-            <h1>{&message}</h1>
-            <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
+        <div class="form-container">
+            <div class="empty-state">
+                <h1>{&message}</h1>
+                <p>{ "The page you are looking for does not exist." }</p>
+                <Link<crate::Route> to={crate::Route::Home}>{ "Back to Home" }</Link<crate::Route>>
+            </div>
         </div>
     }
 }
@@ -102,10 +107,13 @@ pub fn not_found_component() -> Html {
 #[component(PermissionDenied)]
 pub fn denied_component() -> Html {
     html! {
-        <div>
-            <h1>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</h1>
-            <h3>{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</h3>
-            <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
+        <div class="form-container">
+            <div class="empty-state">
+                <h1>{ "Access Denied" }</h1>
+                <p>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</p>
+                <p class="text-muted">{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</p>
+                <Link<crate::Route> to={crate::Route::Home}>{ "Back to Home" }</Link<crate::Route>>
+            </div>
         </div>
     }
 }
diff --git a/frontend/src/pages/ticket.rs b/frontend/src/pages/ticket.rs
index 02e4a0f..b3d76a4 100644
--- a/frontend/src/pages/ticket.rs
+++ b/frontend/src/pages/ticket.rs
@@ -287,52 +287,53 @@ pub fn submit_ticket_component() -> Html {
     let room_valid = (*room).is_some();
 
     html! {
-        <form {onsubmit}>
-            <label>{ "Betreff:" }
-                <input type="text" value={(*betreff).clone()} oninput={betreff_change}/>
-            </label>
-            <br/>
-            <label>{ "Beschreibung:" }
-                <input type="text" value={(*description).clone()} oninput={description_change}/>
-            </label>
-            <br/>
-            <label>{ "Kategorie:" }
-                <select value={(*category).clone()} onchange={category_change}>
-                    <option value="Whiteboard Beamer">{ "Whiteboard Beamer" }</option>
-                    <option value="Internet">{ "Internet" }</option>
-                    <option value="iPad Koffer">{ "iPad Koffer" }</option>
-                    <option value="Apple TV">{ "Apple TV" }</option>
-                    <option value="Docu Cam">{ "Dokumenten Kamera" }</option>
-                    <option value="Sonstiges">{ "Sonstiges" }</option>
-                </select>
-            </label>
-            <br/>
-            <label>{ "Raum:" }
-                <input type="text" value={(*room_input).clone()} oninput={room_change}/>
-            </label>
-            {
-                if !room_valid {
-                    html! {
-                        <p style="color: red;">{ "Ungültiger oder nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Create Ticket" }</h1>
+            </div>
+            <form {onsubmit}>
+                <label>{ "Betreff:" }
+                    <input type="text" value={(*betreff).clone()} oninput={betreff_change}/>
+                </label>
+                <label>{ "Beschreibung:" }
+                    <textarea value={(*description).clone()} oninput={description_change}/>
+                </label>
+                <label>{ "Kategorie:" }
+                    <select value={(*category).clone()} onchange={category_change}>
+                        <option value="Whiteboard Beamer">{ "Whiteboard Beamer" }</option>
+                        <option value="Internet">{ "Internet" }</option>
+                        <option value="iPad Koffer">{ "iPad Koffer" }</option>
+                        <option value="Apple TV">{ "Apple TV" }</option>
+                        <option value="Docu Cam">{ "Dokumenten Kamera" }</option>
+                        <option value="Sonstiges">{ "Sonstiges" }</option>
+                    </select>
+                </label>
+                <label>{ "Raum:" }
+                    <input type="text" value={(*room_input).clone()} oninput={room_change}/>
+                </label>
+                {
+                    if !room_valid {
+                        html! {
+                            <p class="alert error">{ "Ungültiger oder nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
+                        }
+                    } else {
+                        html! {}
                     }
-                } else {
-                    html! {}
                 }
-            }
-            <br/>
-            <button type="submit">{ "Send" }</button>
+                <button type="submit">{ "Send" }</button>
 
-            <Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
+                <Link<crate::Route> to={crate::Route::AllTickets}>{ "View All Tickets" }</Link<crate::Route>>
 
-            {
-                if let Some(s) = &*status {
-                    html!{ <p>{ s }</p> }
-                } else {
-                    html!{}
+                {
+                    if let Some(s) = &*status {
+                        html!{ <p class="alert success">{ s }</p> }
+                    } else {
+                        html!{}
+                    }
                 }
-            }
 
-        </form>
+            </form>
+        </div>
     }
 }
 
diff --git a/frontend/src/pages/user.rs b/frontend/src/pages/user.rs
index 8f68c5e..5893032 100644
--- a/frontend/src/pages/user.rs
+++ b/frontend/src/pages/user.rs
@@ -222,24 +222,29 @@ pub fn register_component() -> Html {
     };
 
     html! {
-        <form {onsubmit}>
-            <label>{ "Vorname:" }
-                <input type="text" value={(*first_name).clone()} oninput={fn_change}/>
-            </label>
-            <label>{ "Nachname:" }
-                <input type="text" value={(*last_name).clone()} oninput={ln_change}/>
-            </label>
-            <label>{ "Benutzername:" }
-                <input type="text" value={(*username).clone()} oninput={un_change}/>
-            </label>
-            <label>{ "Admin:" }
-                <input type="checkbox" checked={*is_admin} onchange={admin_change}/>
-            </label>
-            <label>{ "Password:" }
-                <input type="password" value={(*pwd).clone()} oninput={pwd_change}/>
-            </label>
-            <button type="submit">{ "Bestätigen" }</button>
-        </form>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Register User" }</h1>
+            </div>
+            <form {onsubmit}>
+                <label>{ "Vorname:" }
+                    <input type="text" value={(*first_name).clone()} oninput={fn_change}/>
+                </label>
+                <label>{ "Nachname:" }
+                    <input type="text" value={(*last_name).clone()} oninput={ln_change}/>
+                </label>
+                <label>{ "Benutzername:" }
+                    <input type="text" value={(*username).clone()} oninput={un_change}/>
+                </label>
+                <label>{ "Admin:" }
+                    <input type="checkbox" checked={*is_admin} onchange={admin_change}/>
+                </label>
+                <label>{ "Password:" }
+                    <input type="password" value={(*pwd).clone()} oninput={pwd_change}/>
+                </label>
+                <button type="submit">{ "Bestätigen" }</button>
+            </form>
+        </div>
     }
 }
 
@@ -328,27 +333,32 @@ pub fn login_component() -> Html {
     };
 
     html! {
-        <form {onsubmit}>
-            <input
-                placeholder="username"
-                value={(*username).clone()}
-                oninput={Callback::from(move |e: InputEvent| {
-                    let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-                    username.set(input.value());
-                })}
-            />
-            <input
-                type="password"
-                placeholder="password"
-                value={(*pwd).clone()}
-                oninput={Callback::from(move |e: InputEvent| {
-                    let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-                    pwd.set(input.value());
-                })}
-            />
-            <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
-            if !error.is_empty() { <p style="color:red">{(*error).clone()}</p> }
-        </form>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Login" }</h1>
+            </div>
+            <form {onsubmit}>
+                <input
+                    placeholder="username"
+                    value={(*username).clone()}
+                    oninput={Callback::from(move |e: InputEvent| {
+                        let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                        username.set(input.value());
+                    })}
+                />
+                <input
+                    type="password"
+                    placeholder="password"
+                    value={(*pwd).clone()}
+                    oninput={Callback::from(move |e: InputEvent| {
+                        let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                        pwd.set(input.value());
+                    })}
+                />
+                <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
+                if !error.is_empty() { <p class="alert error">{(*error).clone()}</p> }
+            </form>
+        </div>
     }
 }
 
@@ -417,18 +427,37 @@ pub fn all_users_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <p>{ "Loading..." }</p>
+            </div>
+        }
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <p class="alert error">{ format!("Error: {}", e) }</p>
+            </div>
+        }
     } else {
         html! {
-            <ul>
-            { for users.iter().map(|t| html! {
-                    <li key={t.id.to_string()}>
-                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
-                    </li>
-                })}
-            </ul>
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <ul>
+                { for users.iter().map(|t| html! {
+                        <li key={t.id.to_string()}>
+                            <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
+                        </li>
+                    })}
+                </ul>
+            </div>
         }
     }
 }
diff --git a/frontend/src/styles/_mixins.scss b/frontend/src/styles/_mixins.scss
index 2837238..b5c2083 100644
--- a/frontend/src/styles/_mixins.scss
+++ b/frontend/src/styles/_mixins.scss
@@ -1,8 +1,12 @@
 @use "variables" as *;
 
 @mixin card {
-  backgroud: #fff;
-  border-radius: &border-radius;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  background: $color-container;
+  border-radius: $border-radius;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   padding: $spacing-md;
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-container-dark;
+  }
 }
diff --git a/frontend/src/styles/_utilities.scss b/frontend/src/styles/_utilities.scss
index ed174a8..c9545ef 100644
--- a/frontend/src/styles/_utilities.scss
+++ b/frontend/src/styles/_utilities.scss
@@ -2,5 +2,4 @@
 
 .u-hidden { display: none !important; }
 .u-gap-sm { gap: $spacing-sm; }
-.text-muted { color: $color-muted; }
-
+.text-muted { color: $color-muted; }
\ No newline at end of file
diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss
index 1e2e305..c04e99f 100644
--- a/frontend/src/styles/_variables.scss
+++ b/frontend/src/styles/_variables.scss
@@ -1,8 +1,32 @@
-$color-bg: #ffffff;
+// Color Palette (Reference Style)
+$color-bg: #f0f2f5;
+$color-bg-dark: #121212;
+$color-container: #ffffff;
+$color-container-dark: #333333;
 $color-sidebar: #0f172a;
-$color-accent: #2563eb;
+$color-primary: #2b79c2;
+$color-primary-hover: #1d5fa0;
+$color-accent: #2b79c2;
 $color-muted: #6b7280;
+$color-text: #111827;
+$color-text-dark: #e2e2e2;
+
+// Status Colors
+$color-status-todo: #ffcccc;
+$color-status-todo-text: #a00;
+$color-status-inprogress: #fff3cd;
+$color-status-inprogress-text: #856404;
+$color-status-done: #d4edda;
+$color-status-done-text: #155724;
+
+// Action Colors
+$color-logout: #ff4d4d;
+$color-logout-hover: #e60000;
+
+// Spacing
 $spacing-sm: 8px;
 $spacing-md: 16px;
-$border-radius: 6px;
+$spacing-lg: 2rem;
+$border-radius: 0.5rem;
+$border-radius-lg: 10px;
 
diff --git a/frontend/src/styles/components/_diagnostics.scss b/frontend/src/styles/components/_diagnostics.scss
index ec73468..a3d7ff7 100644
--- a/frontend/src/styles/components/_diagnostics.scss
+++ b/frontend/src/styles/components/_diagnostics.scss
@@ -8,14 +8,18 @@
 }
 
 .diagnostics-section {
-  background-color: $color-bg;
+  background-color: $color-container;
   border-radius: $border-radius;
   padding: $spacing-md;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $color-container-dark;
+  }
 
   h3 {
     margin: 0 0 $spacing-md 0;
-    color: #1f2937;
+    color: $color-primary;
     font-size: 1.1rem;
     font-weight: 600;
   }
@@ -27,7 +31,12 @@
   gap: 12px;
   border: 1px solid #e5e7eb;
   border-radius: $border-radius;
-  background-color: #f9fafb;
+  background-color: $color-container;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $color-container-dark;
+    border-color: #555;
+  }
 }
 
 .weekday-bars {
@@ -50,7 +59,7 @@
 
   .bar {
     width: 100%;
-    background-color: $color-accent;
+    background-color: $color-primary;
     border-radius: 4px 4px 0 0;
     transition: background-color 0.2s ease;
 
@@ -76,8 +85,12 @@
     .day {
       font-weight: 600;
       font-size: 12px;
-      color: #1f2937;
+      color: $color-text;
       margin-bottom: 2px;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
     }
 
     .value {
@@ -94,7 +107,12 @@
   padding: $spacing-md;
   border: 1px solid #e5e7eb;
   border-radius: $border-radius;
-  background-color: #f9fafb;
+  background-color: $color-container;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $color-container-dark;
+    border-color: #555;
+  }
 }
 
 .room-bar-item {
@@ -110,8 +128,12 @@
     .room-label {
       font-weight: 600;
       font-size: 14px;
-      color: #1f2937;
+      color: $color-text;
       min-width: 50px;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
     }
 
     .room-count {
@@ -128,9 +150,13 @@
     border-radius: 4px;
     overflow: hidden;
 
+    @media (prefers-color-scheme: dark) {
+      background-color: #555;
+    }
+
     .room-bar {
       height: 100%;
-      background-color: #f97316;
+      background-color: $color-primary;
       transition: width 0.3s ease;
     }
   }
diff --git a/frontend/src/styles/components/_pages.scss b/frontend/src/styles/components/_pages.scss
new file mode 100644
index 0000000..f418196
--- /dev/null
+++ b/frontend/src/styles/components/_pages.scss
@@ -0,0 +1,355 @@
+@use "../variables" as *;
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-lg;
+  padding-bottom: $spacing-md;
+  border-bottom: 2px solid #e5e7eb;
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom-color: #555;
+  }
+
+  h1 {
+    margin: 0;
+    color: $color-primary;
+    font-size: 1.75rem;
+  }
+}
+
+.page-actions {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+
+  a, button {
+    display: inline-block;
+    padding: $spacing-md;
+    background: $color-primary;
+    color: white;
+    text-decoration: none;
+    border: none;
+    border-radius: $border-radius;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: $color-primary-hover;
+    }
+  }
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  margin-bottom: $spacing-lg;
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+      font-weight: 500;
+      color: $color-text;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
+    }
+
+    input, textarea, select {
+      padding: $spacing-md;
+      border: 1px solid #ccc;
+      border-radius: $border-radius;
+      font-family: Arial, sans-serif;
+      font-size: 1rem;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: #6b6b6b;
+        color: $color-text-dark;
+        border-color: #555;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: $color-primary;
+        box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+      }
+    }
+
+    textarea {
+      min-height: 120px;
+      resize: vertical;
+    }
+
+    button {
+      align-self: flex-start;
+      padding: $spacing-md $spacing-lg;
+      background-color: $color-primary;
+      color: white;
+      border: none;
+      border-radius: $border-radius;
+      font-size: 1rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
+
+      &:hover {
+        background-color: $color-primary-hover;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+
+    a {
+      display: inline-block;
+      padding: $spacing-md $spacing-lg;
+      background: $color-primary;
+      color: white;
+      text-decoration: none;
+      border-radius: $border-radius;
+      text-align: center;
+      transition: background-color 0.2s ease-in-out;
+      align-self: flex-start;
+
+      &:hover {
+        background-color: $color-primary-hover;
+      }
+    }
+  }
+}
+
+.grid-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: $spacing-lg;
+  margin-top: $spacing-lg;
+
+  .grid-item {
+    background: $color-container;
+    border: 1px solid #e5e7eb;
+    border-radius: $border-radius;
+    padding: $spacing-md;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+    @media (prefers-color-scheme: dark) {
+      background: $color-container-dark;
+      border-color: #555;
+    }
+
+    &:hover {
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+      transform: translateY(-2px);
+    }
+
+    h3 {
+      color: $color-primary;
+      margin-top: 0;
+      margin-bottom: $spacing-md;
+    }
+
+    p {
+      margin: $spacing-sm 0;
+      color: $color-muted;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .item-actions {
+      display: flex;
+      gap: $spacing-md;
+      margin-top: $spacing-md;
+      flex-wrap: wrap;
+
+      a, button {
+        flex: 1;
+        min-width: 100px;
+        padding: $spacing-md;
+        border: none;
+        border-radius: $border-radius;
+        font-weight: bold;
+        cursor: pointer;
+        text-decoration: none;
+        text-align: center;
+        transition: background-color 0.2s ease-in-out;
+      }
+
+      a.view, button.view {
+        background: $color-primary;
+        color: white;
+
+        &:hover {
+          background-color: $color-primary-hover;
+        }
+      }
+
+      a.edit, button.edit {
+        background: #f59e0b;
+        color: white;
+
+        &:hover {
+          background-color: #d97706;
+        }
+      }
+
+      a.delete, button.delete {
+        background: $color-logout;
+        color: white;
+
+        &:hover {
+          background-color: $color-logout-hover;
+        }
+      }
+    }
+  }
+}
+
+.table-container {
+  overflow-x: auto;
+  margin-top: $spacing-lg;
+  border-radius: $border-radius;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    background: $color-container;
+
+    @media (prefers-color-scheme: dark) {
+      background: $color-container-dark;
+    }
+
+    thead {
+      background: $color-primary;
+      color: white;
+
+      th {
+        padding: $spacing-md;
+        text-align: left;
+        font-weight: 600;
+        border-bottom: 2px solid darken($color-primary, 10%);
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid #e5e7eb;
+        transition: background-color 0.2s ease;
+
+        @media (prefers-color-scheme: dark) {
+          border-bottom-color: #555;
+        }
+
+        &:hover {
+          background-color: #f9fafb;
+
+          @media (prefers-color-scheme: dark) {
+            background-color: #444;
+          }
+        }
+
+        td {
+          padding: $spacing-md;
+          color: $color-text;
+
+          @media (prefers-color-scheme: dark) {
+            color: $color-text-dark;
+          }
+        }
+      }
+    }
+  }
+}
+
+.alert {
+  padding: $spacing-md;
+  border-radius: $border-radius;
+  margin-bottom: $spacing-lg;
+  border-left: 4px solid;
+
+  &.success {
+    background: $color-status-done;
+    color: $color-status-done-text;
+    border-left-color: $color-status-done-text;
+  }
+
+  &.error {
+    background: $color-status-todo;
+    color: $color-status-todo-text;
+    border-left-color: $color-status-todo-text;
+  }
+
+  &.warning {
+    background: $color-status-inprogress;
+    color: $color-status-inprogress-text;
+    border-left-color: $color-status-inprogress-text;
+  }
+
+  &.info {
+    background: #dbeafe;
+    color: #1e40af;
+    border-left-color: #1e40af;
+
+    @media (prefers-color-scheme: dark) {
+      background: #1e3a8a;
+      color: #93c5fd;
+      border-left-color: #93c5fd;
+    }
+  }
+}
+
+.loading-spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #e5e7eb;
+  border-top-color: $color-primary;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+}
+
+.empty-state {
+  text-align: center;
+  padding: $spacing-lg;
+  color: $color-muted;
+
+  p {
+    font-size: 1.1rem;
+    margin-bottom: $spacing-md;
+  }
+
+  a {
+    display: inline-block;
+    padding: $spacing-md $spacing-lg;
+    background: $color-primary;
+    color: white;
+    text-decoration: none;
+    border-radius: $border-radius;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: $color-primary-hover;
+    }
+  }
+}
diff --git a/frontend/src/styles/components/_setup.scss b/frontend/src/styles/components/_setup.scss
new file mode 100644
index 0000000..aff01e8
--- /dev/null
+++ b/frontend/src/styles/components/_setup.scss
@@ -0,0 +1,120 @@
+@use "../variables" as *;
+
+.setup-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: $color-bg;
+  padding: $spacing-lg;
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-bg-dark;
+  }
+}
+
+.setup-box {
+  width: 100%;
+  max-width: 400px;
+  background: $color-container;
+  padding: $spacing-lg;
+  border-radius: 1rem;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-container-dark;
+  }
+
+  h1 {
+    color: $color-primary;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: $spacing-md;
+  }
+
+  p {
+    text-align: center;
+    color: $color-muted;
+    margin-bottom: $spacing-lg;
+  }
+}
+
+.setup-form {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    label {
+      font-weight: 500;
+      color: $color-text;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
+    }
+  }
+
+  input {
+    padding: $spacing-md;
+    border: 1px solid #ccc;
+    border-radius: $border-radius;
+    font-family: Arial, sans-serif;
+    font-size: 1rem;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: #6b6b6b;
+      color: $color-text-dark;
+      border-color: #555;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $color-primary;
+      box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+    }
+  }
+
+  button {
+    padding: $spacing-md;
+    background-color: $color-primary;
+    color: white;
+    border: none;
+    border-radius: $border-radius;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    margin-top: $spacing-md;
+
+    &:hover {
+      background-color: $color-primary-hover;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+}
+
+.success-message {
+  background: $color-status-done;
+  color: $color-status-done-text;
+  padding: $spacing-md;
+  border-radius: $border-radius;
+  margin-bottom: $spacing-md;
+  border-left: 4px solid $color-status-done-text;
+}
+
+.error-message {
+  background: $color-status-todo;
+  color: $color-status-todo-text;
+  padding: $spacing-md;
+  border-radius: $border-radius;
+  margin-bottom: $spacing-md;
+  border-left: 4px solid $color-status-todo-text;
+}
diff --git a/frontend/src/styles/components/_sidebar.scss b/frontend/src/styles/components/_sidebar.scss
index 110eaab..3bcfea0 100644
--- a/frontend/src/styles/components/_sidebar.scss
+++ b/frontend/src/styles/components/_sidebar.scss
@@ -17,16 +17,17 @@
     text-decoration: none;
     display: block;
     padding: 8px 12px;
-    border-radius: 4px;
-    &:hover { background: rgba(255,255,255,0.04); }
+    border-radius: $border-radius;
+    transition: background 0.2s ease-in-out;
+    &:hover { background: rgba(255,255,255,0.1); }
   }
 
   .menu-toggle { background: transparent; border: none; text-align: left; width: 100%; cursor: pointer; }
 
   .submenu {
     margin-left: 8px;
-    background: rgba(255,255,255,0.02);
-    border-radius: 4px;
+    background: rgba(255,255,255,0.05);
+    border-radius: $border-radius;
     padding: 6px;
     li { padding: 4px 0; }
   }
@@ -38,16 +39,17 @@
   }
 
   .logout-button {
-    background: rgba(255,255,255,0.1);
+    background: $color-logout;
     color: #fff;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: none;
     padding: 8px 12px;
-    border-radius: 4px;
+    border-radius: $border-radius-lg;
     width: 100%;
     cursor: pointer;
     text-align: left;
-    &:hover { background: rgba(255,255,255,0.15); }
-    &:active { background: rgba(255,255,255,0.2); }
+    font-weight: bold;
+    transition: background 0.2s ease-in-out;
+    &:hover { background: $color-logout-hover; transform: scale(1.02); }
   }
 
   &.user { width: 220px; background: darken($color-sidebar, 6%); }
diff --git a/frontend/src/styles/components/_tickets.scss b/frontend/src/styles/components/_tickets.scss
index 928e663..6c20248 100644
--- a/frontend/src/styles/components/_tickets.scss
+++ b/frontend/src/styles/components/_tickets.scss
@@ -1,9 +1,31 @@
 @use "../mixins" as *;
 @use "../variables" as *;
 
+.ticket {
+  border: 1px solid #ccc;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: $border-radius-lg;
+  background: $color-container;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-container-dark;
+  }
+
+  h3 {
+    margin-top: 0;
+    color: $color-primary;
+  }
+
+  p {
+    margin: 0.3rem 0;
+  }
+}
+
 .ticket-card {
   @include card();
-  border-left: 4px solid $color-accent;
+  border-left: 4px solid $color-primary;
   display: flex;
   flex-direction: column;
   gap: $spacing-sm;
@@ -11,3 +33,27 @@
   .title { font-weight: 600; }
 }
 
+.status {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-top: 8px;
+
+  &.To-Do { 
+    background: $color-status-todo; 
+    color: $color-status-todo-text; 
+  }
+
+  &.InProgress { 
+    background: $color-status-inprogress; 
+    color: $color-status-inprogress-text; 
+  }
+
+  &.Done { 
+    background: $color-status-done; 
+    color: $color-status-done-text; 
+  }
+}
+
diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss
index a8d7160..f4fc7f3 100644
--- a/frontend/src/styles/main.scss
+++ b/frontend/src/styles/main.scss
@@ -4,35 +4,206 @@
 @use "components/sidebar";
 @use "components/tickets";
 @use "components/diagnostics";
+@use "components/pages";
+@use "components/setup";
+
+* {
+  box-sizing: border-box;
+}
 
 body {
   background: variables.$color-bg;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
-  color: #111827;
+  font-family: Arial, sans-serif;
+  color: variables.$color-text;
   margin: 0;
+  padding: 0;
+
+  @media (prefers-color-scheme: dark) {
+    background: variables.$color-bg-dark;
+    color: variables.$color-text-dark;
+  }
+}
+
+.container {
+  max-width: 900px;
+  margin: auto;
+  background: variables.$color-container;
+  padding: variables.$spacing-lg;
+  border-radius: 1rem;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background: variables.$color-container-dark;
+  }
+}
+
+.header-with-image {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.header-with-image img {
+  height: 60px;
+}
+
+input, textarea, select {
+  width: 100%;
+  padding: variables.$spacing-md;
+  font-size: 1rem;
+  border-radius: variables.$border-radius;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  margin-bottom: 15px;
+  font-family: Arial, sans-serif;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: #6b6b6b;
+    color: variables.$color-text-dark;
+    border-color: #555;
+  }
+}
+
+button {
+  padding: variables.$spacing-md;
+  font-size: 1rem;
+  border-radius: variables.$border-radius;
+  background-color: variables.$color-primary;
+  color: white;
+  border: none;
+  cursor: pointer;
+  margin-bottom: 15px;
+  transition: background-color 0.2s ease-in-out;
+  font-family: Arial, sans-serif;
+  font-weight: bold;
+
+  &:hover {
+    background-color: variables.$color-primary-hover;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-md;
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: variables.$spacing-sm;
+    font-weight: 500;
+  }
+
+  a {
+    display: inline-block;
+    padding: variables.$spacing-md;
+    background: variables.$color-primary;
+    color: white;
+    text-decoration: none;
+    border-radius: variables.$border-radius;
+    text-align: center;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: variables.$color-primary-hover;
+    }
+  }
+}
+
+.login-btn {
+  display: inline-block;
+  padding: 12px 400px;
+  background: variables.$color-primary;
+  color: white;
+  border-radius: variables.$border-radius-lg;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease-in-out;
+  margin-bottom: 15px;
+
+  &:hover {
+    background: variables.$color-primary-hover;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.logout-btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background: variables.$color-logout;
+  color: white;
+  border-radius: variables.$border-radius-lg;
+  text-decoration: none;
+  font-weight: bold;
+  transition: 0.2s ease-in-out;
+  margin-bottom: 20px;
+
+  &:hover {
+    background: variables.$color-logout-hover;
+    transform: scale(1.05);
+  }
 }
 
 .admin { display: flex; }
-.content { flex: 1; padding: variables.$spacing-md; }
 
 .layout {
-    display: flex;
-    min-height: 100vh;
+  display: flex;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
 }
 
 .sidebar {
-    width: 260px;
-    flex-shrink: 0;
+  width: 260px;
+  flex-shrink: 0;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
 }
 
 .content {
-    flex: 1;
-    min-width: 0;
+  flex: 1;
+  min-width: 0;
+  margin-left: 260px;
+  padding: variables.$spacing-lg;
+  
+  > :first-child {
+    max-width: 900px;
+    margin: 0 auto;
+    background: variables.$color-container;
+    padding: variables.$spacing-lg;
+    border-radius: 1rem;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+
+    @media (prefers-color-scheme: dark) {
+      background: variables.$color-container-dark;
+    }
+  }
+
+  h1, h2, h3 {
+    color: variables.$color-primary;
+    margin-top: 0;
+  }
 }
 
 @media (max-width: 768px) {
-  .sidebar { position: fixed; left: -100%; transition: left .2s; }
-  .sidebar.open { left: 0; }
-  .content { margin-left: 0; }
+  .sidebar { 
+    position: fixed; 
+    left: -260px; 
+    transition: left .3s ease-in-out;
+    z-index: 1000;
+  }
+  .sidebar.open { 
+    left: 0; 
+  }
+  .content { 
+    margin-left: 0;
+  }
 }
-