diff --git a/client/public/assets/locales/en.json b/client/public/assets/locales/en.json
index 756625db..fdc9b522 100644
--- a/client/public/assets/locales/en.json
+++ b/client/public/assets/locales/en.json
@@ -52,6 +52,7 @@
     "upload": "Optimal up-speed",
     "download": "Optimal down-speed",
     "recommendations": "Recommendations",
+    "optimal_values": "Optimal values",
     "change_provider": "Change provider",
     "password": "Change password",
     "cron": "Set frequency",
@@ -64,10 +65,18 @@
     "dark_mode": "Dark mode",
     "theme_switched_light": "Switched to light mode",
     "theme_switched_dark": "Switched to dark mode",
-    "info": "About the project",
     "provider": "About the provider",
     "integrations": "Integrations"
   },
+  "about": {
+    "title": "About MySpeed",
+    "description": "MySpeed is an open-source speedtest analysis software that records your internet speed for up to 30 days.",
+    "github": "GitHub",
+    "website": "Website",
+    "donate": "Donate",
+    "translate": "Translate",
+    "made_by": "Made with"
+  },
   "options": {
     "cron": {
       "continuous": "Continuous (every minute)",
@@ -122,6 +131,7 @@
     "paused": "Speedtests are currently paused. Please continue them if you want to do one.",
     "running": "A speedtest is already running. Please wait a moment.",
     "admin_login": "Admin Login",
+    "servers": "Servers",
     "beta": {
       "title": "Beta Version",
       "description": "This feature is still in beta. If you find any bugs, please report them <Link>here</Link>."
@@ -165,7 +175,6 @@
     "before": "before"
   },
   "info": {
-    "credits": "<MSpeed>MySpeed</MSpeed> is a open source project provided by GNMYT. Leave a star on <Github>GitHub</Github> or <Donate>donate</Donate> to support the project.",
     "recommendations_error": "You have to do at least 10 tests to get an average. It doesn't matter if the tests were done manually or automatically.",
     "recommendations_info": "Based on the last 10 tests, it was found that the optimal ping was <Bold>{{ping}} ms</Bold>, the download at <Bold>{{down}} Mbps</Bold> and the upload at <Bold>{{up}} Mbps</Bold>. It is best to orientate yourself on your internet contract and only adopt it if it matches that.",
     "update": "An update to version {{version}} is available. See <Changes>the changes</Changes> and <DLLink>download the update</DLLink>.",
@@ -217,11 +226,7 @@
       "automatic": "automatically"
     },
     "overview": {
-      "title": "Test overview of the last {{amount}}",
-      "1": "24 hours",
-      "2": "2 days",
-      "3": "7 days",
-      "4": "30 days"
+      "title_range": "Test overview from {{from}} to {{to}}"
     }
   },
   "errors": {
@@ -236,6 +241,7 @@
     "invalid_view": "Invalid view"
   },
   "statistics": {
+    "average": "Average",
     "overview": {
       "total_title": "Total tests",
       "total_description": "The number of executed tests",
@@ -268,8 +274,42 @@
       "avg": "Average",
       "down": "Download values",
       "up": "Upload values"
+    },
+    "hourly": {
+      "title": "Speed by Time of Day",
+      "sample_count": "Tests"
+    },
+    "consistency": {
+      "title": "Connection Stability",
+      "excellent": "Excellent",
+      "good": "Good",
+      "fair": "Fair",
+      "poor": "Poor",
+      "ping_variance": "Ping variance"
+    },
+    "aggregation": {
+      "daily": "Showing daily averages",
+      "weekly": "Showing weekly averages"
     }
   },
+  "calendar": {
+    "select_range": "Select date range",
+    "select_start": "Select start date",
+    "select_end": "Select end date",
+    "from": "From",
+    "to": "To",
+    "last_7_days": "Last 7 days",
+    "last_30_days": "Last 30 days",
+    "last_90_days": "Last 90 days",
+    "last_year": "Last year",
+    "mon": "Mon",
+    "tue": "Tue",
+    "wed": "Wed",
+    "thu": "Thu",
+    "fri": "Fri",
+    "sat": "Sat",
+    "sun": "Sun"
+  },
   "nodes": {
     "add": "Add server",
     "create": "Add",
@@ -392,5 +432,20 @@
   },
   "common": {
     "back_to_top": "Back to top"
+  },
+  "not_found": {
+    "title": "Page not found",
+    "description": "The page you're looking for doesn't exist or has been moved.",
+    "back_home": "Back to Home"
+  },
+  "route_error": {
+    "title": "Oops!",
+    "subtitle": "Something went wrong",
+    "description": "An unexpected error occurred. Please try again or go back to the home page.",
+    "reload": "Reload Page"
+  },
+  "optimal_values": {
+    "title": "Optimal Values",
+    "use_recommended": "Use recommended"
   }
 }
diff --git a/client/src/App.jsx b/client/src/App.jsx
index ef9e4e95..bc3f02b1 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -16,6 +16,7 @@ import {ThemeProvider} from "@/common/contexts/Theme";
 import i18n from './i18n';
 import Loading from "@/pages/Loading";
 import Error from "@/pages/Error";
+import RouteError from "@/pages/RouteError";
 import {ToastNotificationProvider} from "@/common/contexts/ToastNotification";
 import {NodeProvider} from "@/common/contexts/Node";
 import {library} from '@fortawesome/fontawesome-svg-core';
@@ -65,6 +66,7 @@ const App = () => {
                     <main><Outlet/></main>
                 </Providers>
             ),
+            errorElement: <RouteError />,
             children: [
                 {path: "/", element: <Home/>},
                 {path: "/nodes", element: <Nodes/>},
diff --git a/client/src/common/components/AboutDialog/AboutDialog.jsx b/client/src/common/components/AboutDialog/AboutDialog.jsx
new file mode 100644
index 00000000..05fdae74
--- /dev/null
+++ b/client/src/common/components/AboutDialog/AboutDialog.jsx
@@ -0,0 +1,77 @@
+import {DialogContext, DialogProvider} from "@/common/contexts/Dialog";
+import "./styles.sass";
+import React, {useContext, useEffect, useState} from "react";
+import {t} from "i18next";
+import {Trans} from "react-i18next";
+import {faClose, faGlobe, faHeart, faLanguage} from "@fortawesome/free-solid-svg-icons";
+import {faGithub} from "@fortawesome/free-brands-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {jsonRequest} from "@/common/utils/RequestUtil";
+import {PROJECT_URL, WEB_URL, DONATION_URL} from "@/index";
+
+const Dialog = ({version}) => {
+    const close = useContext(DialogContext);
+
+    const links = [
+        {icon: faGithub, label: t("about.github"), url: PROJECT_URL},
+        {icon: faGlobe, label: t("about.website"), url: WEB_URL},
+        {icon: faHeart, label: t("about.donate"), url: DONATION_URL, accent: true},
+        {icon: faLanguage, label: t("about.translate"), url: "https://crowdin.com/project/myspeed"}
+    ];
+
+    return (
+        <>
+            <div className="dialog-header">
+                <h4 className="dialog-text">{t("about.title")}</h4>
+                <FontAwesomeIcon icon={faClose} className="dialog-text dialog-icon" onClick={() => close()}/>
+            </div>
+
+            <div className="about-wrapper">
+                <div className="about-hero">
+                    <img src="/assets/img/logo192.png" alt="MySpeed Logo" className="about-logo"/>
+                    <div className="about-title-section">
+                        <h1 className="about-title">MySpeed</h1>
+                        <span className="about-version">v{version}</span>
+                    </div>
+                </div>
+
+                <p className="about-description">
+                    <Trans i18nKey="about.description">
+                        MySpeed is an open-source speedtest analysis software that records your internet speed for up to 30 days.
+                    </Trans>
+                </p>
+
+                <div className="about-links">
+                    {links.map((link, index) => (
+                        <a key={index} href={link.url} target="_blank" rel="noopener noreferrer"
+                           className={"about-link" + (link.accent ? " about-link-accent" : "")}>
+                            <FontAwesomeIcon icon={link.icon}/>
+                            <span>{link.label}</span>
+                        </a>
+                    ))}
+                </div>
+
+                <p className="about-footer">
+                    {t("about.made_by")} <FontAwesomeIcon icon={faHeart} className="about-heart"/> by <a href="https://github.com/gnmyt" target="_blank" rel="noopener noreferrer">GNMYT</a>
+                </p>
+            </div>
+        </>
+    );
+};
+
+export const AboutDialog = (props) => {
+    const [version, setVersion] = useState(null);
+
+    useEffect(() => {
+        jsonRequest("/info/version").then(data => setVersion(data.local));
+    }, []);
+
+    return (
+        <DialogProvider close={props.onClose} customClass={!version ? "dialog-loading" : "about-dialog"}>
+            {!version && (
+                <div className="lds-ellipsis"><div/><div/><div/><div/></div>
+            )}
+            {version && <Dialog version={version}/>}
+        </DialogProvider>
+    );
+};
diff --git a/client/src/common/components/AboutDialog/index.js b/client/src/common/components/AboutDialog/index.js
new file mode 100644
index 00000000..47de988d
--- /dev/null
+++ b/client/src/common/components/AboutDialog/index.js
@@ -0,0 +1 @@
+export {AboutDialog as default} from "./AboutDialog.jsx";
\ No newline at end of file
diff --git a/client/src/common/components/AboutDialog/styles.sass b/client/src/common/components/AboutDialog/styles.sass
new file mode 100644
index 00000000..351b7e62
--- /dev/null
+++ b/client/src/common/components/AboutDialog/styles.sass
@@ -0,0 +1,104 @@
+@use "@/common/styles/colors" as *
+
+.about-dialog
+  max-width: 26rem
+
+.about-wrapper
+  display: flex
+  flex-direction: column
+  gap: 1rem
+  margin-top: 1rem
+
+.about-hero
+  display: flex
+  align-items: center
+  gap: 1rem
+
+.about-logo
+  width: 56px
+  height: 56px
+
+.about-title-section
+  display: flex
+  flex-direction: column
+  gap: 0.15rem
+
+.about-title
+  margin: 0
+  font-size: 1.5rem
+  font-weight: 700
+  color: $white
+
+.about-version
+  font-size: 0.85rem
+  color: $accent-primary
+  font-weight: 600
+
+.about-description
+  margin: 0
+  font-size: 0.9rem
+  color: $subtext
+  line-height: 1.5
+
+.about-links
+  display: grid
+  grid-template-columns: 1fr 1fr
+  gap: 0.5rem
+
+.about-link
+  display: flex
+  align-items: center
+  gap: 0.6rem
+  padding: 0.6rem 0.85rem
+  border: 1px solid $light-gray
+  border-radius: 0.5rem
+  color: $white
+  text-decoration: none
+  font-size: 0.85rem
+  font-weight: 500
+  transition: all 0.2s ease
+
+  svg
+    color: $subtext
+    font-size: 1rem
+
+  &:hover
+    background: $darker-gray
+    
+    svg
+      color: $white
+
+.about-link-accent
+  svg
+    color: $accent-danger
+
+  &:hover    
+    svg
+      color: $accent-danger
+
+.about-footer
+  margin: 0
+  padding-top: 0.5rem
+  font-size: 0.8rem
+  color: $subtext
+  text-align: center
+  border-top: 1px solid $light-gray
+
+  a
+    color: $accent-primary
+    text-decoration: none
+
+    &:hover
+      text-decoration: underline
+
+.about-heart
+  color: $accent-danger
+  font-size: 0.7rem
+  margin: 0 0.1rem
+
+@media (max-width: 500px)
+  .about-dialog
+    max-width: 90vw
+
+  .about-links
+    grid-template-columns: 1fr
diff --git a/client/src/common/components/ChartModal/ChartModal.jsx b/client/src/common/components/ChartModal/ChartModal.jsx
new file mode 100644
index 00000000..027a8d67
--- /dev/null
+++ b/client/src/common/components/ChartModal/ChartModal.jsx
@@ -0,0 +1,44 @@
+import { useEffect, useCallback } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import "./styles.sass";
+
+export const ChartModal = ({ isOpen, onClose, isChart = false, children }) => {
+    const handleEscape = useCallback((e) => {
+        if (e.key === "Escape") {
+            onClose();
+        }
+    }, [onClose]);
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+            document.body.style.overflow = "hidden";
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+            document.body.style.overflow = "";
+        };
+    }, [isOpen, handleEscape]);
+
+    if (!isOpen) return null;
+
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+
+    return (
+        <div className="chart-modal-backdrop" onClick={handleBackdropClick}>
+            <div className={`chart-modal-content${isChart ? ' modal-chart' : ''}`}>
+                <button className="chart-modal-close" onClick={onClose}>
+                    <FontAwesomeIcon icon={faXmark} />
+                </button>
+                <div className={`chart-modal-body${isChart ? ' modal-body-chart' : ''}`}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/client/src/common/components/ChartModal/index.js b/client/src/common/components/ChartModal/index.js
new file mode 100644
index 00000000..5b5d1cbe
--- /dev/null
+++ b/client/src/common/components/ChartModal/index.js
@@ -0,0 +1 @@
+export { ChartModal as default } from "./ChartModal";
diff --git a/client/src/common/components/ChartModal/styles.sass b/client/src/common/components/ChartModal/styles.sass
new file mode 100644
index 00000000..cf6f0fdb
--- /dev/null
+++ b/client/src/common/components/ChartModal/styles.sass
@@ -0,0 +1,156 @@
+@use "@/common/styles/colors" as *
+
+.chart-modal-backdrop
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: rgba(0, 0, 0, 0.85)
+    display: flex
+    align-items: center
+    justify-content: center
+    z-index: 1000
+    padding: 2rem
+    animation: modalFadeIn 0.25s ease-out
+    backdrop-filter: blur(4px)
+
+.chart-modal-content
+    position: relative
+    width: fit-content
+    min-width: 400px
+    max-width: 1400px
+    max-height: 90vh
+    background-color: $dark-gray
+    backdrop-filter: blur(4px)
+    -webkit-backdrop-filter: blur(4px)
+    border: 1px solid $light-gray
+    border-radius: 1rem
+    overflow: hidden
+    animation: scaleIn 0.25s ease-out
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4)
+
+    &.modal-chart
+        width: 100%
+
+.chart-modal-close
+    position: absolute
+    top: 1rem
+    right: 1rem
+    background: $darker-gray
+    border: 1px solid $light-gray
+    border-radius: 0.5rem
+    color: $subtext
+    width: 2.5rem
+    height: 2.5rem
+    display: flex
+    align-items: center
+    justify-content: center
+    cursor: pointer
+    transition: all 0.2s ease
+    z-index: 10
+    font-size: 1.25rem
+
+    &:hover
+        background: $light-gray
+        color: $white
+        border-color: $accent-primary
+
+.chart-modal-body
+    padding: 1.5rem
+    padding-top: 3.5rem
+
+    .chart-container,
+    .stats-container
+        width: 100%
+        border: none
+        transform: none !important
+        cursor: default
+        box-shadow: none
+
+        &:hover
+            border: none
+            transform: none !important
+            box-shadow: none
+
+    &.modal-body-chart
+        .chart-container
+            min-height: 70vh
+            
+        .chart-body
+            min-height: 60vh
+
+    .stats-content
+        height: auto
+        min-height: auto
+
+    .consistency-container
+        gap: 2rem
+        
+        .consistency-item
+            svg
+                width: 3rem
+                height: 3rem
+            .consistency-info
+                h2
+                    font-size: 1.25rem
+                p
+                    font-size: 1.25rem
+                .consistency-detail
+                    font-size: 0.95rem
+
+    .overview-items
+        gap: 1.5rem
+        
+        .overview-item
+            .info-area
+                svg
+                    width: 3rem
+                    height: 3rem
+                .text-area
+                    h2
+                        font-size: 1.25rem
+                    p
+                        font-size: 0.9rem
+            h2
+                font-size: 1.75rem
+
+    .info-container
+        gap: 2rem
+        
+        .test-container
+            svg
+                width: 3rem
+                height: 3rem
+            .test-info
+                h2
+                    font-size: 1.25rem
+                p
+                    font-size: 1.1rem
+
+    .value-container
+        gap: 2rem
+        
+        .value-item
+            svg
+                width: 3rem
+                height: 3rem
+            .value-info
+                h2
+                    font-size: 1.25rem
+                p
+                    font-size: 1.1rem
+
+@keyframes modalFadeIn
+    from
+        opacity: 0
+    to
+        opacity: 1
+
+@keyframes scaleIn
+    from
+        opacity: 0
+        transform: scale(0.96)
+    to
+        opacity: 1
+        transform: scale(1)
diff --git a/client/src/common/components/DateRangePicker/DateRangePicker.jsx b/client/src/common/components/DateRangePicker/DateRangePicker.jsx
new file mode 100644
index 00000000..3807e0d8
--- /dev/null
+++ b/client/src/common/components/DateRangePicker/DateRangePicker.jsx
@@ -0,0 +1,249 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendar, faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { t } from "i18next";
+import "./styles.sass";
+
+export const DateRangePicker = ({ from, to, onChange, minDate, maxDate }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selecting, setSelecting] = useState("from");
+    const [tempFrom, setTempFrom] = useState(from);
+    const [tempTo, setTempTo] = useState(to);
+    const [hoverDate, setHoverDate] = useState(null);
+    const [currentMonth, setCurrentMonth] = useState(new Date(to || new Date()));
+    const popoverRef = useRef(null);
+    const triggerRef = useRef(null);
+
+    const today = new Date();
+    today.setHours(23, 59, 59, 999);
+    const effectiveMaxDate = maxDate || today;
+    const todayDateString = new Date().toDateString();
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (popoverRef.current && !popoverRef.current.contains(event.target) &&
+                triggerRef.current && !triggerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    useEffect(() => {
+        setTempFrom(from);
+        setTempTo(to);
+    }, [from, to]);
+
+    const formatDisplayDate = (date) => {
+        if (!date) return "";
+        return date.toLocaleDateString(undefined, { 
+            day: "2-digit", 
+            month: "short", 
+            year: "numeric" 
+        });
+    };
+
+    const getDaysInMonth = (year, month) => {
+        return new Date(year, month + 1, 0).getDate();
+    };
+
+    const getFirstDayOfMonth = (year, month) => {
+        const day = new Date(year, month, 1).getDay();
+        return day === 0 ? 6 : day - 1;
+    };
+
+    const calendarDays = useMemo(() => {
+        const year = currentMonth.getFullYear();
+        const month = currentMonth.getMonth();
+        const daysInMonth = getDaysInMonth(year, month);
+        const firstDay = getFirstDayOfMonth(year, month);
+        
+        const days = [];
+        
+        const prevMonth = month === 0 ? 11 : month - 1;
+        const prevYear = month === 0 ? year - 1 : year;
+        const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
+        
+        for (let i = firstDay - 1; i >= 0; i--) {
+            days.push({
+                day: daysInPrevMonth - i,
+                date: new Date(prevYear, prevMonth, daysInPrevMonth - i),
+                isCurrentMonth: false
+            });
+        }
+        
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push({
+                day: i,
+                date: new Date(year, month, i),
+                isCurrentMonth: true
+            });
+        }
+        
+        const nextMonth = month === 11 ? 0 : month + 1;
+        const nextYear = month === 11 ? year + 1 : year;
+        const remainingDays = 42 - days.length;
+        
+        for (let i = 1; i <= remainingDays; i++) {
+            days.push({
+                day: i,
+                date: new Date(nextYear, nextMonth, i),
+                isCurrentMonth: false
+            });
+        }
+        
+        return days;
+    }, [currentMonth]);
+
+    const handleDayClick = (date) => {
+        if (selecting === "from") {
+            setTempFrom(date);
+            setSelecting("to");
+            if (tempTo && date > tempTo) {
+                setTempTo(null);
+            }
+        } else {
+            if (tempFrom && date < tempFrom) {
+                setTempTo(tempFrom);
+                setTempFrom(date);
+            } else {
+                setTempTo(date);
+            }
+            const finalFrom = tempFrom && date < tempFrom ? date : tempFrom;
+            const finalTo = tempFrom && date < tempFrom ? tempFrom : date;
+            onChange(finalFrom, finalTo);
+            setSelecting("from");
+            setIsOpen(false);
+        }
+    };
+
+    const isInRange = (date) => {
+        if (!tempFrom) return false;
+        if (selecting === "to" && tempFrom && hoverDate) {
+            const endDate = hoverDate;
+            if (endDate < tempFrom) {
+                return date >= endDate && date <= tempFrom;
+            }
+            return date >= tempFrom && date <= endDate;
+        }
+        return tempFrom && tempTo && date >= tempFrom && date <= tempTo;
+    };
+
+    const isRangeStart = (date) => {
+        if (selecting === "to" && tempFrom && hoverDate && hoverDate < tempFrom) {
+            return date.toDateString() === hoverDate.toDateString();
+        }
+        return tempFrom && date.toDateString() === tempFrom.toDateString();
+    };
+
+    const isRangeEnd = (date) => {
+        if (selecting === "to" && tempFrom && hoverDate) {
+            if (hoverDate < tempFrom) {
+                return date.toDateString() === tempFrom.toDateString();
+            }
+            return date.toDateString() === hoverDate.toDateString();
+        }
+        return tempTo && date.toDateString() === tempTo.toDateString();
+    };
+
+    const isToday = (date) => {
+        return date.toDateString() === todayDateString;
+    };
+
+    const isSelected = (date) => {
+        return isRangeStart(date) || isRangeEnd(date);
+    };
+
+    const isDisabled = (date) => {
+        if (minDate && date < minDate) return true;
+        if (effectiveMaxDate && date > effectiveMaxDate) return true;
+        return false;
+    };
+
+    const prevMonth = () => {
+        setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
+    };
+
+    const nextMonth = () => {
+        setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
+    };
+
+    const isCurrentMonthView = () => {
+        const now = new Date();
+        return currentMonth.getMonth() === now.getMonth() && 
+               currentMonth.getFullYear() === now.getFullYear();
+    };
+
+    const weekDays = [
+        t("calendar.mon"),
+        t("calendar.tue"),
+        t("calendar.wed"),
+        t("calendar.thu"),
+        t("calendar.fri"),
+        t("calendar.sat"),
+        t("calendar.sun")
+    ];
+
+    return (
+        <div className="date-range-picker">
+            <div 
+                className="date-range-trigger" 
+                ref={triggerRef}
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                <FontAwesomeIcon icon={faCalendar} className="calendar-icon" />
+                <span className="date-range-text">
+                    {from && to ? (
+                        <>{formatDisplayDate(from)} - {formatDisplayDate(to)}</>
+                    ) : (
+                        t("calendar.select_range")
+                    )}
+                </span>
+            </div>
+
+            {isOpen && (
+                <div className="date-range-popover" ref={popoverRef}>
+                    <div className="calendar-nav">
+                        <button className="nav-btn" onClick={prevMonth}>
+                            <FontAwesomeIcon icon={faChevronLeft} />
+                        </button>
+                        <span className="current-month">
+                            {currentMonth.toLocaleDateString(undefined, { month: "long", year: "numeric" })}
+                        </span>
+                        <button 
+                            className="nav-btn" 
+                            onClick={nextMonth}
+                            disabled={isCurrentMonthView()}
+                        >
+                            <FontAwesomeIcon icon={faChevronRight} />
+                        </button>
+                    </div>
+
+                    <div className="calendar-grid">
+                        <div className="weekdays">
+                            {weekDays.map((day) => (
+                                <div key={day} className="weekday">{day}</div>
+                            ))}
+                        </div>
+                        <div className="days">
+                            {calendarDays.map((item, index) => (
+                                <button
+                                    key={index}
+                                    className={`day-btn ${!item.isCurrentMonth ? "other-month" : ""} ${isInRange(item.date) ? "in-range" : ""} ${isRangeStart(item.date) ? "range-start" : ""} ${isRangeEnd(item.date) ? "range-end" : ""} ${isSelected(item.date) ? "selected" : ""} ${isToday(item.date) ? "today" : ""} ${isDisabled(item.date) ? "disabled" : ""}`}
+                                    onClick={() => !isDisabled(item.date) && handleDayClick(item.date)}
+                                    onMouseEnter={() => selecting === "to" && !isDisabled(item.date) && setHoverDate(item.date)}
+                                    onMouseLeave={() => setHoverDate(null)}
+                                    disabled={isDisabled(item.date)}
+                                >
+                                    {item.day}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/client/src/common/components/DateRangePicker/index.js b/client/src/common/components/DateRangePicker/index.js
new file mode 100644
index 00000000..b3d47a22
--- /dev/null
+++ b/client/src/common/components/DateRangePicker/index.js
@@ -0,0 +1 @@
+export {DateRangePicker as default} from './DateRangePicker';
\ No newline at end of file
diff --git a/client/src/common/components/DateRangePicker/styles.sass b/client/src/common/components/DateRangePicker/styles.sass
new file mode 100644
index 00000000..802ca71f
--- /dev/null
+++ b/client/src/common/components/DateRangePicker/styles.sass
@@ -0,0 +1,181 @@
+@use "@/common/styles/colors" as *
+
+.date-range-picker
+  position: relative
+  display: inline-block
+
+.date-range-trigger
+  display: flex
+  align-items: center
+  gap: 0.5rem
+  padding: 0.5rem 0.875rem
+  background-color: $dark-gray
+  border: 1px solid $light-gray
+  border-radius: 0.5rem
+  cursor: pointer
+  transition: all 0.2s ease-in-out
+  
+  &:hover
+    border-color: $accent-primary
+
+.calendar-icon
+  color: $subtext
+  font-size: 0.875rem
+
+.date-range-text
+  color: $white
+  font-size: 0.8rem
+  font-weight: 600
+  white-space: nowrap
+
+.date-range-popover
+  position: absolute
+  top: calc(100% + 0.375rem)
+  left: 0
+  z-index: 1000
+  background-color: $dark-gray
+  border: 1px solid $light-gray
+  border-radius: 0.75rem
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)
+  overflow: hidden
+  padding: 1rem
+  animation: popoverFadeIn 0.2s ease-out
+
+@keyframes popoverFadeIn
+  from
+    opacity: 0
+    transform: translateY(-8px)
+  to
+    opacity: 1
+    transform: translateY(0)
+
+.calendar-nav
+  display: flex
+  align-items: center
+  justify-content: space-between
+  margin-bottom: 0.75rem
+
+.nav-btn
+  display: flex
+  align-items: center
+  justify-content: center
+  width: 1.75rem
+  height: 1.75rem
+  background: transparent
+  border: 1px solid $light-gray
+  border-radius: 0.375rem
+  color: $subtext
+  cursor: pointer
+  transition: all 0.15s ease
+  font-size: 0.75rem
+  
+  &:hover:not(:disabled)
+    border-color: $accent-primary
+    color: $white
+    background-color: $darker-gray
+  
+  &:disabled
+    opacity: 0.3
+    cursor: not-allowed
+
+.current-month
+  color: $white
+  font-size: 0.8rem
+  font-weight: 600
+
+.calendar-grid
+  min-width: 240px
+
+.weekdays
+  display: grid
+  grid-template-columns: repeat(7, 1fr)
+  margin-bottom: 0.375rem
+
+.weekday
+  text-align: center
+  color: $subtext
+  font-size: 0.625rem
+  font-weight: 600
+  text-transform: uppercase
+  padding: 0.375rem 0
+
+.days
+  display: grid
+  grid-template-columns: repeat(7, 1fr)
+
+.day-btn
+  display: flex
+  align-items: center
+  justify-content: center
+  width: 100%
+  height: 30px
+  background: transparent
+  border: none
+  color: $white
+  font-size: 0.75rem
+  font-weight: 600
+  cursor: pointer
+  transition: background-color 0.1s ease, color 0.1s ease
+  border-radius: 0
+  
+  &:hover:not(.disabled):not(.selected):not(.in-range)
+    background-color: $darker-gray
+    border-radius: 0.25rem
+  
+  &.other-month
+    color: $subtext
+    opacity: 0.4
+  
+  &.in-range
+    background-color: rgba(16, 185, 129, 0.2)
+  
+  &.range-start
+    background-color: $accent-primary
+    color: #fff
+    font-weight: 600
+    border-radius: 0.25rem 0 0 0.25rem
+    
+    &.range-end
+      border-radius: 0.25rem
+  
+  &.range-end
+    background-color: $accent-primary
+    color: #fff
+    font-weight: 600
+    border-radius: 0 0.25rem 0.25rem 0
+  
+  &.today:not(.selected)
+    position: relative
+    font-weight: 600
+    
+    &::after
+      content: ""
+      position: absolute
+      bottom: 3px
+      left: 50%
+      transform: translateX(-50%)
+      width: 3px
+      height: 3px
+      background-color: $accent-primary
+      border-radius: 50%
+  
+  &.disabled
+    opacity: 0.25
+    cursor: not-allowed
+
+@media screen and (max-width: 600px)
+  .date-range-popover
+    position: fixed
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+    max-width: calc(100vw - 2rem)
+    max-height: calc(100vh - 2rem)
+    overflow-y: auto
+
+  .calendar-grid
+    min-width: unset
+
+  .day-btn
+    height: 28px
+    font-size: 0.7rem
diff --git a/client/src/common/components/Dropdown/DropdownComponent.jsx b/client/src/common/components/Dropdown/DropdownComponent.jsx
index ae8668db..a278ce14 100644
--- a/client/src/common/components/Dropdown/DropdownComponent.jsx
+++ b/client/src/common/components/Dropdown/DropdownComponent.jsx
@@ -1,31 +1,27 @@
 import React, {useContext, useEffect, useRef, useState} from "react";
 import "./styles.sass";
 import {
-    faArrowDown,
-    faArrowUp,
     faCircleNodes,
     faClock,
     faGlobeEurope,
     faInfo,
     faKey,
     faPause,
-    faPingPongPaddleBall,
     faPlay,
-    faWandMagicSparkles,
     faCheck,
     faExclamationTriangle, 
     faSliders, 
     faHardDrive,
     faMoon,
-    faSun
+    faSun,
+    faGauge
 } from "@fortawesome/free-solid-svg-icons";
 import {ConfigContext} from "@/common/contexts/Config";
 import {StatusContext} from "@/common/contexts/Status";
 import {InputDialogContext} from "@/common/contexts/InputDialog";
 import {ThemeContext} from "@/common/contexts/Theme";
-import {baseRequest, jsonRequest, patchRequest, postRequest} from "@/common/utils/RequestUtil";
-import {creditsInfo, recommendationsInfo} from "@/common/components/Dropdown/utils/infos";
-import {levelOptions, selectOptions} from "@/common/components/Dropdown/utils/options";
+import {baseRequest, patchRequest, postRequest} from "@/common/utils/RequestUtil";
+ import {levelOptions, selectOptions} from "@/common/components/Dropdown/utils/options";
 import {parseCron, stringifyCron} from "@/common/components/Dropdown/utils/utils";
 import {t} from "i18next";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
@@ -35,6 +31,7 @@ import {IntegrationDialog} from "@/common/components/IntegrationDialog";
 import LanguageDialog from "@/common/components/LanguageDialog";
 import ProviderDialog from "@/common/components/ProviderDialog";
 import StorageDialog from "@/common/components/StorageDialog";
+import OptimalValuesDialog from "@/common/components/OptimalValuesDialog";
 
 const DropdownComponent = ({isOpen, switchDropdown}) => {
     const [config, reloadConfig] = useContext(ConfigContext);
@@ -49,6 +46,7 @@ const DropdownComponent = ({isOpen, switchDropdown}) => {
     const [showLanguageDialog, setShowLanguageDialog] = useState(false);
     const [showProviderDialog, setShowProviderDialog] = useState(false);
     const [showStorageDialog, setShowStorageDialog] = useState(false);
+    const [showOptimalValuesDialog, setShowOptimalValuesDialog] = useState(false);
     const ref = useRef();
 
     useEffect(() => {
@@ -86,36 +84,6 @@ const DropdownComponent = ({isOpen, switchDropdown}) => {
         }), 160);
     }
 
-    const updatePing = async () => patchDialog("ping", (value) => ({
-        title: t("update.ping_title"), placeholder: t("update.ping_placeholder"), value
-    }));
-
-    const updateUpload = async () => patchDialog("upload", (value) => ({
-        title: t("update.upload_title"), placeholder: t("update.upload_placeholder"), value
-    }));
-
-    const updateDownload = async () => patchDialog("download", (value) => ({
-        title: t("update.download_title"), placeholder: t("update.download_placeholder"), value
-    }));
-
-    const recommendedSettings = async () => {
-        const result = await jsonRequest("/recommendations");
-
-        if (!result.message) {
-            setDialog({
-                title: t("update.recommendations_set"),
-                description: recommendationsInfo(result.ping, result.download, result.upload),
-                buttonText: t("dialog.apply"),
-                onSuccess: async () => {
-                    await patchRequest("/config/ping", {value: result.ping});
-                    await patchRequest("/config/download", {value: result.download});
-                    await patchRequest("/config/upload", {value: result.upload});
-                    showFeedback();
-                }
-            });
-        } else setDialog({title: t("update.recommendations_title"), description: t("info.recommendations_error"), buttonText: t("dialog.okay")});
-    }
-
     const updatePassword = async () => {
         const passwordSet = currentNode !== 0 ? findNode(currentNode).password : localStorage.getItem("password") != null;
 
@@ -177,8 +145,6 @@ const DropdownComponent = ({isOpen, switchDropdown}) => {
         } else postRequest("/speedtests/continue").then(updateStatus);
     }
 
-    const showCredits = () => setDialog({title: "MySpeed", description: creditsInfo(), buttonText: t("dialog.close")});
-
     const showProviderDetails = () => setDialog({title: t("dropdown.provider"), description: config.previewMessage, buttonText: t("dialog.close")});
 
     const handleThemeToggle = () => {
@@ -187,10 +153,7 @@ const DropdownComponent = ({isOpen, switchDropdown}) => {
     };
 
     const options = [
-        {run: updatePing, icon: faPingPongPaddleBall, text: t("dropdown.ping")},
-        {run: updateUpload, icon: faArrowUp, text: t("dropdown.upload")},
-        {run: updateDownload, icon: faArrowDown, text: t("dropdown.download")},
-        {run: recommendedSettings, icon: faWandMagicSparkles, text: t("dropdown.recommendations")},
+        {run: () => setShowOptimalValuesDialog(true), icon: faGauge, text: t("dropdown.optimal_values")},
         {hr: true, key: 1},
         {run: () => setShowProviderDialog(true), icon: faSliders, text: t("dropdown.change_provider")},
         {run: () => setShowStorageDialog(true), icon: faHardDrive, text: t("dropdown.storage")},
@@ -201,7 +164,6 @@ const DropdownComponent = ({isOpen, switchDropdown}) => {
         {hr: true, key: 2},
         {run: handleThemeToggle, icon: isDarkMode ? faSun : faMoon, text: t(isDarkMode ? "dropdown.light_mode" : "dropdown.dark_mode"), allowView: true},
         {run: () => setShowLanguageDialog(true), icon: faGlobeEurope, text: t("dropdown.language"), allowView: true},
-        {run: showCredits, icon: faInfo, text: t("dropdown.info"), allowView: true, previewHidden: true},
         {run: showProviderDetails, icon: faInfo, text: t("dropdown.provider"), previewShown: true}
     ];
 
@@ -211,6 +173,7 @@ const DropdownComponent = ({isOpen, switchDropdown}) => {
             {showLanguageDialog && <LanguageDialog onClose={() => setShowLanguageDialog(false)}/>}
             {showProviderDialog && <ProviderDialog onClose={() => setShowProviderDialog(false)}/>}
             {showStorageDialog && <StorageDialog onClose={() => setShowStorageDialog(false)}/>}
+            {showOptimalValuesDialog && <OptimalValuesDialog onClose={() => setShowOptimalValuesDialog(false)}/>}
             <div className={`dropdown ${isOpen ? '' : 'dropdown-invisible'}`} ref={ref}>
                 <div className="dropdown-content">
                     <h2>{t("dropdown.settings")}</h2>
diff --git a/client/src/common/components/Dropdown/styles.sass b/client/src/common/components/Dropdown/styles.sass
index e954fbec..1d483634 100644
--- a/client/src/common/components/Dropdown/styles.sass
+++ b/client/src/common/components/Dropdown/styles.sass
@@ -15,12 +15,14 @@
   width: auto
   overflow: auto
   border-radius: 10px
-  box-shadow: 0 8px 16px 0 $dark-gray
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3)
   border: 1px solid $light-gray
   right: 0
-  z-index: 1
+  z-index: 200
   padding: 15px
   background-color: $dark-gray
+  backdrop-filter: blur(4px)
+  -webkit-backdrop-filter: blur(4px)
 
 .dropdown-invisible
   visibility: hidden
@@ -55,7 +57,7 @@
   font-weight: 500
 
 .dropdown-item:hover
-  color: $green
+  color: $accent-primary
 
 .dropdown-item svg
   width: 25px
diff --git a/client/src/common/components/Dropdown/utils/infos.jsx b/client/src/common/components/Dropdown/utils/infos.jsx
deleted file mode 100644
index 96d17079..00000000
--- a/client/src/common/components/Dropdown/utils/infos.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {DONATION_URL, PROJECT_URL, WEB_URL} from "@/index";
-import {Trans} from "react-i18next";
-
-
-export const creditsInfo = () => <Trans components={{MSpeed: <a href={WEB_URL} target="_blank" />,
-    Github: <a href={PROJECT_URL} target="_blank" />, Donate: <a href={DONATION_URL} target="_blank" />}}>info.credits</Trans>
-
-export const recommendationsInfo = (ping, down, up) => <Trans components={{Bold: <span className="dialog-value" />}}
-                                                              values={{ping, down, up}}>info.recommendations_info</Trans>
\ No newline at end of file
diff --git a/client/src/common/components/DropdownSelect/DropdownSelect.jsx b/client/src/common/components/DropdownSelect/DropdownSelect.jsx
new file mode 100644
index 00000000..94e86553
--- /dev/null
+++ b/client/src/common/components/DropdownSelect/DropdownSelect.jsx
@@ -0,0 +1,49 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faChevronDown, faPlus} from "@fortawesome/free-solid-svg-icons";
+import {useState, useRef} from "react";
+import "./styles.sass";
+
+export const DropdownSelect = ({
+    items,
+    onSelect,
+    buttonText,
+    buttonIcon = faPlus,
+    disabled = false
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+
+    const handleBlur = (event) => {
+        if (!containerRef.current?.contains(event.relatedTarget)) {
+            setIsOpen(false);
+        }
+    };
+
+    const handleSelect = (item) => {
+        onSelect(item);
+        setIsOpen(false);
+    };
+
+    if (disabled) return null;
+
+    return (
+        <div className="dropdown-select-container" ref={containerRef} onBlur={handleBlur} tabIndex={-1}>
+            <button className="dropdown-select-btn" onClick={() => setIsOpen(!isOpen)}>
+                <FontAwesomeIcon icon={buttonIcon}/>
+                <span>{buttonText}</span>
+                <FontAwesomeIcon icon={faChevronDown} className={`dropdown-select-chevron ${isOpen ? "rotated" : ""}`}/>
+            </button>
+
+            {isOpen && (
+                <div className="dropdown-select-menu">
+                    {items.map((item, index) => (
+                        <div key={item.key || index} className="dropdown-select-item" onClick={() => handleSelect(item)} tabIndex={0}>
+                            {item.icon && <FontAwesomeIcon icon={item.icon}/>}
+                            <span>{item.label}</span>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/client/src/common/components/DropdownSelect/index.js b/client/src/common/components/DropdownSelect/index.js
new file mode 100644
index 00000000..4c81cc84
--- /dev/null
+++ b/client/src/common/components/DropdownSelect/index.js
@@ -0,0 +1 @@
+export {DropdownSelect as default} from "./DropdownSelect";
diff --git a/client/src/common/components/DropdownSelect/styles.sass b/client/src/common/components/DropdownSelect/styles.sass
new file mode 100644
index 00000000..51a26638
--- /dev/null
+++ b/client/src/common/components/DropdownSelect/styles.sass
@@ -0,0 +1,68 @@
+@use "@/common/styles/colors" as *
+
+.dropdown-select-container
+  position: relative
+  display: flex
+  justify-content: flex-end
+  outline: none
+
+.dropdown-select-btn
+  display: flex
+  align-items: center
+  gap: 0.5rem
+  padding: 0.625rem 1rem
+  background-color: $darker-gray
+  border: 1px solid $light-gray
+  border-radius: 0.5rem
+  color: $subtext
+  font-size: 0.875rem
+  font-weight: 500
+  cursor: pointer
+  transition: all 0.15s ease
+
+  &:hover
+    border-color: $accent-primary
+    color: $accent-primary
+
+  svg
+    font-size: 0.8rem
+
+.dropdown-select-chevron
+  transition: transform 0.2s ease
+  margin-left: 0.25rem
+
+  &.rotated
+    transform: rotate(180deg)
+
+.dropdown-select-menu
+  position: absolute
+  top: auto
+  bottom: calc(100% + 0.5rem)
+  right: 0
+  min-width: 12rem
+  background-color: $darker-gray
+  border: 1px solid $light-gray
+  border-radius: 0.5rem
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
+  z-index: 1000
+  overflow: hidden
+
+.dropdown-select-item
+  display: flex
+  align-items: center
+  gap: 0.75rem
+  padding: 0.75rem 1rem
+  color: $subtext
+  cursor: pointer
+  transition: all 0.15s ease
+
+  &:hover
+    background-color: $light-gray
+    color: $white
+
+  svg
+    width: 1.1rem
+    font-size: 1rem
+
+  span
+    font-size: 0.9rem
diff --git a/client/src/common/components/ExpandableCard/ExpandableCard.jsx b/client/src/common/components/ExpandableCard/ExpandableCard.jsx
new file mode 100644
index 00000000..5e1b91c3
--- /dev/null
+++ b/client/src/common/components/ExpandableCard/ExpandableCard.jsx
@@ -0,0 +1,53 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faChevronDown, faChevronUp} from "@fortawesome/free-solid-svg-icons";
+import {useState} from "react";
+import "./styles.sass";
+
+export const ExpandableCard = ({
+    icon,
+    title,
+    subtitle,
+    statusDot,
+    actions,
+    children,
+    defaultExpanded = false,
+    error = false,
+    success = false
+}) => {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+
+    return (
+        <div className={`expandable-card ${error ? "card-error" : ""} ${success ? "card-success" : ""}`}>
+            <div className="expandable-card-header" onClick={() => setExpanded(!expanded)}>
+                <div className="expandable-card-info">
+                    {icon && (
+                        <div className="expandable-card-icon">
+                            <FontAwesomeIcon icon={icon}/>
+                        </div>
+                    )}
+                    <div className="expandable-card-details">
+                        <h3>{title}</h3>
+                        {(subtitle || statusDot) && (
+                            <div className="expandable-card-status">
+                                {statusDot && <span className={`status-dot ${statusDot}`}/>}
+                                {subtitle && <span className="status-text">{subtitle}</span>}
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div className="expandable-card-actions">
+                    {actions}
+                    <button className="card-action-btn expand-btn">
+                        <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown}/>
+                    </button>
+                </div>
+            </div>
+
+            {expanded && (
+                <div className="expandable-card-body">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/client/src/common/components/ExpandableCard/index.js b/client/src/common/components/ExpandableCard/index.js
new file mode 100644
index 00000000..5107fe6c
--- /dev/null
+++ b/client/src/common/components/ExpandableCard/index.js
@@ -0,0 +1 @@
+export {ExpandableCard as default} from "./ExpandableCard";
\ No newline at end of file
diff --git a/client/src/common/components/ExpandableCard/styles.sass b/client/src/common/components/ExpandableCard/styles.sass
new file mode 100644
index 00000000..b0be103d
--- /dev/null
+++ b/client/src/common/components/ExpandableCard/styles.sass
@@ -0,0 +1,131 @@
+@use "@/common/styles/colors" as *
+
+.expandable-card
+  background-color: $darker-gray
+  border: 1px solid $light-gray
+  border-radius: 0.75rem
+  transition: all 0.2s ease
+
+  &.card-error
+    border-color: $accent-danger
+
+  &.card-success
+    border-color: $accent-primary
+
+.expandable-card-header
+  display: flex
+  align-items: center
+  justify-content: space-between
+  padding: 0.875rem 1rem
+  cursor: pointer
+  user-select: none
+
+  &:hover
+    background-color: rgba(255, 255, 255, 0.02)
+    border-radius: 0.75rem
+
+.expandable-card-info
+  display: flex
+  align-items: center
+  gap: 0.75rem
+
+.expandable-card-icon
+  display: flex
+  align-items: center
+  justify-content: center
+  width: 2.5rem
+  height: 2.5rem
+  background-color: $light-gray
+  border-radius: 0.5rem
+  color: $white
+
+  svg
+    font-size: 1.1rem
+
+.expandable-card-details
+  h3
+    margin: 0
+    font-size: 0.95rem
+    font-weight: 600
+    color: $white
+    max-width: 12rem
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+
+.expandable-card-status
+  display: flex
+  align-items: center
+  gap: 0.35rem
+  margin-top: 0.2rem
+
+.status-dot
+  width: 0.45rem
+  height: 0.45rem
+  border-radius: 50%
+
+  &.status-active
+    background-color: $accent-primary
+
+  &.status-inactive
+    background-color: $light-gray
+
+  &.status-error
+    background-color: $accent-danger
+
+.status-text
+  font-size: 0.75rem
+  color: $subtext
+
+.expandable-card-actions
+  display: flex
+  align-items: center
+  gap: 0.25rem
+
+.card-action-btn
+  display: flex
+  align-items: center
+  justify-content: center
+  width: 2rem
+  height: 2rem
+  background: none
+  border: none
+  border-radius: 0.375rem
+  color: $subtext
+  cursor: pointer
+  transition: all 0.15s ease
+
+  &:hover
+    background-color: $light-gray
+
+  svg
+    font-size: 0.9rem
+
+.card-action-btn.save-btn:hover
+  color: $accent-primary
+
+.card-action-btn.delete-btn:hover
+  color: $accent-danger
+
+.card-action-btn.delete-btn.confirm
+  color: $accent-danger
+  background-color: rgba(239, 68, 68, 0.1)
+
+.card-action-btn.success-indicator
+  color: $accent-primary
+  cursor: default
+
+  &:hover
+    background: none
+
+.expandable-card-body
+  padding: 1rem
+  display: flex
+  flex-direction: column
+  gap: 0.75rem
+  border-top: 1px solid $light-gray
+  margin-top: 0.5rem
+
+@media (max-width: 600px)
+  .expandable-card-details h3
+    max-width: 8rem
diff --git a/client/src/common/components/FormField/FormField.jsx b/client/src/common/components/FormField/FormField.jsx
new file mode 100644
index 00000000..8af1c9e3
--- /dev/null
+++ b/client/src/common/components/FormField/FormField.jsx
@@ -0,0 +1,45 @@
+import ToggleSwitch from "@/common/components/ToggleSwitch";
+import "./styles.sass";
+
+export const FormField = ({
+    label,
+    type = "text",
+    value,
+    onChange,
+    placeholder,
+    error = false,
+    disabled = false
+}) => (
+    <div className="form-field">
+        <label className={error ? "form-field-error" : ""}>{label}</label>
+
+        {type === "text" && (
+            <input
+                type="text"
+                className={`form-field-input ${error ? "input-error" : ""}`}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={placeholder}
+                disabled={disabled}
+            />
+        )}
+
+        {type === "textarea" && (
+            <textarea
+                className={`form-field-input form-field-textarea ${error ? "input-error" : ""}`}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={placeholder}
+                disabled={disabled}
+            />
+        )}
+
+        {type === "boolean" && (
+            <ToggleSwitch
+                checked={value}
+                onChange={onChange}
+                disabled={disabled}
+            />
+        )}
+    </div>
+);
diff --git a/client/src/common/components/FormField/index.js b/client/src/common/components/FormField/index.js
new file mode 100644
index 00000000..3f08f006
--- /dev/null
+++ b/client/src/common/components/FormField/index.js
@@ -0,0 +1 @@
+export {FormField as default} from "./FormField";
\ No newline at end of file
diff --git a/client/src/common/components/FormField/styles.sass b/client/src/common/components/FormField/styles.sass
new file mode 100644
index 00000000..4c99c6c1
--- /dev/null
+++ b/client/src/common/components/FormField/styles.sass
@@ -0,0 +1,55 @@
+@use "@/common/styles/colors" as *
+
+.form-field
+  display: flex
+  align-items: center
+  justify-content: space-between
+  gap: 1rem
+
+  label:first-child
+    font-size: 0.85rem
+    color: $subtext
+    flex: 1
+
+.form-field-error
+  color: $accent-danger !important
+
+.form-field-input
+  width: 55%
+  flex-shrink: 0
+  background-color: $dark-gray
+  border: 1px solid $light-gray
+  border-radius: 0.5rem
+  padding: 0.5rem 0.75rem
+  font-size: 0.85rem
+  color: $white
+  font-family: inherit
+  transition: border-color 0.15s ease
+
+  &:focus
+    outline: none
+    border-color: $accent-primary
+
+  &.input-error
+    border-color: $accent-danger
+
+  &::placeholder
+    color: $subtext
+    opacity: 0.6
+
+  &:disabled
+    opacity: 0.5
+    cursor: not-allowed
+
+.form-field-textarea
+  min-height: 4rem
+  resize: vertical
+
+@media (max-width: 600px)
+  .form-field
+    flex-direction: column
+    align-items: flex-start
+    gap: 0.5rem
+
+    .form-field-input
+      width: 100%
diff --git a/client/src/common/components/Header/HeaderComponent.jsx b/client/src/common/components/Header/HeaderComponent.jsx
index 64b792c2..8feb84f0 100644
--- a/client/src/common/components/Header/HeaderComponent.jsx
+++ b/client/src/common/components/Header/HeaderComponent.jsx
@@ -5,8 +5,8 @@ import {
     faGaugeHigh,
     faGear,
     faLock,
-    faServer,
-    faClose
+    faClose,
+    faServer
 } from "@fortawesome/free-solid-svg-icons";
 import { useContext, useEffect, useState } from "react";
 import DropdownComponent from "../Dropdown/DropdownComponent";
@@ -17,12 +17,12 @@ import { jsonRequest, postRequest } from "@/common/utils/RequestUtil";
 import { updateInfo } from "@/common/components/Header/utils/infos";
 import { t } from "i18next";
 import { ConfigContext } from "@/common/contexts/Config";
-import { LoadingDialog } from "@/common/components/LoadingDialog";
 import { NodeContext } from "@/common/contexts/Node";
 import { WEB_URL } from "@/index";
 import { Trans } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import Pagination from "./components/Pagination";
+import AboutDialog from "@/common/components/AboutDialog";
 
 const HeaderComponent = () => {
     const findNode = useContext(NodeContext)[4];
@@ -32,12 +32,12 @@ const HeaderComponent = () => {
 
     const [setDialog] = useContext(InputDialogContext);
     const [icon, setIcon] = useState(faGear);
-    const [status, updateStatus] = useContext(StatusContext);
-    const [startedManually, setStartedManually] = useState(false);
+    const [status, updateStatus, setRunning] = useContext(StatusContext);
     const {updateTests} = useContext(SpeedtestContext);
     const [config, reloadConfig, checkConfig] = useContext(ConfigContext);
     const [updateAvailable, setUpdateAvailable] = useState("");
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [showAboutDialog, setShowAboutDialog] = useState(false);
 
     const switchDropdown = () => {
         setIsDropdownOpen(!isDropdownOpen);
@@ -74,15 +74,10 @@ const HeaderComponent = () => {
             buttonText: t("dialog.okay")
         });
 
-        if (status.running) return setDialog({
-            title: t("failed"),
-            description: t("header.running"),
-            buttonText: t("dialog.okay")
-        });
+        if (status.running) return;
 
-        setStartedManually(true);
-
-        postRequest("/speedtests/run").then(updateTests).then(updateStatus).then(() => setStartedManually(false));
+        setRunning(true);
+        postRequest("/speedtests/run").then(updateTests).then(updateStatus);
     }
 
     const openDownloadPage = () => window.open(WEB_URL + "/install", "_blank");
@@ -106,11 +101,11 @@ const HeaderComponent = () => {
 
     return (
         <header>
-            <LoadingDialog isOpen={startedManually} />
+            {showAboutDialog && <AboutDialog onClose={() => setShowAboutDialog(false)}/>}
             <div className="header-main">
                 <div className="header-left">
                     {config.viewMode && <h2>{t("header.title")}</h2>}
-                    {!config.viewMode && <h2 onClick={() => navigate("/nodes")} className="h2-click"><FontAwesomeIcon icon={faServer} /> {getNodeName()}</h2>}
+                    {!config.viewMode && <h2 className="header-about" onClick={() => setShowAboutDialog(true)}><img src="/assets/img/logo192.png" alt="MySpeed Logo" className="header-logo" /> {getNodeName()}</h2>}
 
                     {config.previewMode && <h2 className="demo-info" onClick={showDemoDialog}>{t("preview.info")}</h2>}
                 </div>
@@ -143,6 +138,11 @@ const HeaderComponent = () => {
                         <span className="tooltip">{t("header.download")}</span>
                     </div> : <></>)}
 
+                    {!config.viewMode && <div className="tooltip-element tooltip-bottom">
+                        <FontAwesomeIcon icon={faServer} className="header-icon" onClick={() => navigate("/nodes")} />
+                        <span className="tooltip">{t("header.servers")}</span>
+                    </div>}
+
                     <div className="tooltip-element tooltip-bottom" id="open-header">
                         <FontAwesomeIcon icon={icon} className="header-icon" onClick={switchDropdown} />
                         <span className="tooltip">{t("dropdown.settings")}</span>
diff --git a/client/src/common/components/Header/components/Pagination/Pagination.jsx b/client/src/common/components/Header/components/Pagination/Pagination.jsx
index 4bf138d3..c31641bd 100644
--- a/client/src/common/components/Header/components/Pagination/Pagination.jsx
+++ b/client/src/common/components/Header/components/Pagination/Pagination.jsx
@@ -2,7 +2,7 @@ import "./styles.sass";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChartArea, faListUl } from "@fortawesome/free-solid-svg-icons";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import {t} from "i18next";
 
 export const Pagination = () => {
@@ -10,26 +10,31 @@ export const Pagination = () => {
     const location = useLocation();
     const [activeIndex, setActiveIndex] = useState(location.pathname === "/" ? 0 : 1);
     const paginationRef = useRef(null);
-    const activeItemRef = useRef(null);
+    const itemRefs = useRef([]);
 
     useEffect(() => {
         const currentIndex = location.pathname === "/" ? 0 : 1;
         setActiveIndex(currentIndex);
     }, [location.pathname]);
 
-    useEffect(() => {
-        const updateActiveBackground = () => {
-            if (paginationRef.current && activeItemRef.current) {
-                const { offsetLeft, offsetWidth } = activeItemRef.current;
-                paginationRef.current.style.setProperty('--active-left', `${offsetLeft}px`);
-                paginationRef.current.style.setProperty('--active-width', `${offsetWidth}px`);
-            }
-        };
+    const updateActiveBackground = useCallback(() => {
+        if (paginationRef.current && itemRefs.current[activeIndex]) {
+            const { offsetLeft, offsetWidth } = itemRefs.current[activeIndex];
+            paginationRef.current.style.setProperty('--active-left', `${offsetLeft}px`);
+            paginationRef.current.style.setProperty('--active-width', `${offsetWidth}px`);
+        }
+    }, [activeIndex]);
 
+    useEffect(() => {
         updateActiveBackground();
+
+        if (document.fonts?.ready) {
+            document.fonts.ready.then(updateActiveBackground);
+        }
+        
         window.addEventListener('resize', updateActiveBackground);
         return () => window.removeEventListener('resize', updateActiveBackground);
-    }, [activeIndex]);
+    }, [updateActiveBackground]);
 
     return (
         <div className="pagination" ref={paginationRef}>
@@ -39,7 +44,7 @@ export const Pagination = () => {
                     navigate("/");
                     setActiveIndex(0);
                 }}
-                ref={activeIndex === 0 ? activeItemRef : null}
+                ref={el => itemRefs.current[0] = el}
             >
                 <FontAwesomeIcon icon={faListUl}/>
                 <p>{t("page.overview")}</p>
@@ -50,7 +55,7 @@ export const Pagination = () => {
                     navigate("/statistics");
                     setActiveIndex(1);
                 }}
-                ref={activeIndex === 1 ? activeItemRef : null}
+                ref={el => itemRefs.current[1] = el}
             >
                 <FontAwesomeIcon icon={faChartArea}/>
                 <p>{t("page.statistics")}</p>
diff --git a/client/src/common/components/Header/components/Pagination/styles.sass b/client/src/common/components/Header/components/Pagination/styles.sass
index c38bbedb..673a2682 100644
--- a/client/src/common/components/Header/components/Pagination/styles.sass
+++ b/client/src/common/components/Header/components/Pagination/styles.sass
@@ -3,7 +3,9 @@
 .pagination
   display: flex
   justify-content: center
-  background-color: $dark-gray
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
   border: 2px solid $light-gray
   padding: 0.7rem 0.8rem
   gap: 1rem
diff --git a/client/src/common/components/Header/styles.sass b/client/src/common/components/Header/styles.sass
index f1a2ab76..69902c3b 100644
--- a/client/src/common/components/Header/styles.sass
+++ b/client/src/common/components/Header/styles.sass
@@ -1,5 +1,9 @@
 @use "@/common/styles/colors" as *
 
+header
+  position: relative
+  z-index: 200
+
 .header-main
   margin-top: 3rem
   display: grid
@@ -33,60 +37,62 @@
   justify-content: center
   font-size: 14pt
   background-color: $dark-gray
-  color: $green
+  color: $accent-primary
   margin: 0
 
 .header-main h2
+  display: flex
+  align-items: center
+  gap: 1rem
   padding: 0.5rem 1rem
-  border-radius: 1rem
+  border-radius: 0.75rem
   margin: 0
 
-.header-main .h2-click
-  display: flex
-  gap: 1rem
-  align-items: center
-  cursor: pointer
+.header-logo
+  width: 32px
+  height: 32px
+  border-radius: 6px
+
+.header-about
+  cursor: help
   user-select: none
+  transition: color 0.2s ease
 
-  svg
-    margin-right: 0.3rem
-
-.header-main .h2-click:hover
-  color: $green
-  background-color: $dark-gray
+  &:hover
+    color: $accent-primary
 
 .header-icon
   cursor: pointer
   display: flex
-
-  transition: all 50ms ease-in-out
+  transition: all 0.15s ease-in-out
   width: 30px
   height: 30px
+  color: $subtext
 
 .header-icon:hover
   transform: scale(1.1)
-  color: $green
+  color: $accent-primary
 
 .test-running
   animation: pulse 2s infinite
   border-radius: 150px
-  color: $green
+  color: $accent-primary
 
 .update-icon
   animation: pulse-update 2s infinite
   border-radius: 150px
 
 .update-icon:hover
-  color: $orange
+  color: $accent-warning
   filter: brightness(1.2)
 
 @keyframes pulse-update
   0%
-    box-shadow: 0 0 0 0 $orange
+    box-shadow: 0 0 0 0 $accent-warning
   70%
-    box-shadow: 0 0 0 10px #CCA92C00
+    box-shadow: 0 0 0 10px transparent
   100%
-    box-shadow: 0 0 0 0 #CCA92C00
+    box-shadow: 0 0 0 0 transparent
 
 @media (max-width: 768px)
   .header-main
@@ -99,29 +105,16 @@
 @media (max-width: 530px)
   .header-left div
     margin-right: 0
-  .header-left .h2-click
-    margin-left: 0
-    font-size: 22pt
   .header-icon
     width: 25px
     height: 25px
 
 @media (max-width: 480px)
-  .header-left .h2-click
-    font-size: 14pt
-    text-overflow: ellipsis
-    overflow: hidden
-  .header-left svg
-    font-size: 14pt
   .header-icon
     width: 20px
     height: 20px
 
 @media screen and (max-width: 365px)
-  .header-main .h2-click
-    gap: 0
-  .header-left svg
-    margin-right: 0
   .demo-info
     font-size: 12pt
     padding: 0
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/IntegrationDialog.jsx b/client/src/common/components/IntegrationDialog/IntegrationDialog.jsx
index 405ad944..f330b711 100644
--- a/client/src/common/components/IntegrationDialog/IntegrationDialog.jsx
+++ b/client/src/common/components/IntegrationDialog/IntegrationDialog.jsx
@@ -2,25 +2,206 @@ import {DialogContext, DialogProvider} from "@/common/contexts/Dialog";
 import "./styles.sass";
 import React, {useContext, useEffect, useState} from "react";
 import {t} from "i18next";
-import {faClose, faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
+import i18n from "i18next";
+import {
+    faCheck,
+    faCircleNodes,
+    faClose,
+    faExclamationTriangle,
+    faFloppyDisk,
+    faTrash,
+    faTrashArrowUp
+} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {jsonRequest} from "@/common/utils/RequestUtil";
-import IntegrationItem from "@/common/components/IntegrationDialog/components/IntegrationItem";
+import {deleteRequest, jsonRequest, patchRequest, putRequest} from "@/common/utils/RequestUtil";
 import {v4 as uuid} from 'uuid';
-import AvailableIntegrations from "./components/AvailableIntegrations";
-import IntegrationAddButton from "@/common/components/IntegrationDialog/components/IntegrationAddButton";
-import NoIntegrationsTab from "@/common/components/IntegrationDialog/components/NoIntegrationsTab";
 import {ConfigContext} from "@/common/contexts/Config";
+import {generateRelativeTime} from "@/pages/Home/components/LatestTest/utils";
+import FormField from "@/common/components/FormField";
+import ExpandableCard from "@/common/components/ExpandableCard";
+import DropdownSelect from "@/common/components/DropdownSelect";
 
-export const Dialog = ({integrations, active, setActive}) => {
+const IntegrationCard = ({integration, integrationDef, onRemove, onUpdate}) => {
+    const [config] = useContext(ConfigContext);
+    const [displayName, setDisplayName] = useState(integration.displayName || t(`integrations.${integration.name}.title`));
+    const [fields, setFields] = useState(() => {
+        const initial = {};
+        integrationDef.fields.forEach(field => {
+            initial[field.name] = integration.data?.[field.name] ?? (field.type === "boolean" ? false : "");
+        });
+        return initial;
+    });
+    const [unsavedChanges, setUnsavedChanges] = useState(false);
+    const [saveConfirmed, setSaveConfirmed] = useState(false);
+    const [deleteConfirmed, setDeleteConfirmed] = useState(false);
+    const [error, setError] = useState(false);
+    const [lastActivity, setLastActivity] = useState(generateRelativeTime(integration.lastActivity));
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (integration.lastActivity) setLastActivity(generateRelativeTime(integration.lastActivity));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [integration.lastActivity]);
+
+    const updateField = (name, value) => {
+        setFields(prev => ({...prev, [name]: value}));
+        setUnsavedChanges(true);
+    };
+
+    const updateDisplayName = (value) => {
+        setDisplayName(value);
+        setUnsavedChanges(true);
+    };
+
+    const isValidInput = (field) => {
+        const value = fields[field.name];
+        if (field.required && !value) return false;
+        if (field.regex && value && !new RegExp(field.regex).test(value)) return false;
+        if (field.type === "text" && value && value.length > 255) return false;
+        if (field.type === "textarea" && value && value.length > 2000) return false;
+        return true;
+    };
+
+    const getPlaceholder = (fieldName) => {
+        const placeholderKey = `integrations.${integration.name}.fields.${fieldName}_placeholder`;
+        const baseKey = `integrations.${integration.name}.fields.${fieldName}`;
+        return i18n.exists(placeholderKey) ? t(placeholderKey) : t(baseKey);
+    };
+
+    const handleSave = async () => {
+        const data = {...fields, integration_name: displayName};
+
+        try {
+            if (!integration.id) {
+                const response = await putRequest(`/integrations/${integration.name}`, data);
+                if (!response.ok) throw new Error();
+                const result = await response.json();
+                onUpdate(integration.uuid, {id: result.id, isNew: false});
+            } else {
+                const response = await patchRequest(`/integrations/${integration.id}`, data);
+                if (!response.ok) throw new Error();
+            }
+            setUnsavedChanges(false);
+            setSaveConfirmed(true);
+            setError(false);
+            setTimeout(() => setSaveConfirmed(false), 1500);
+        } catch {
+            setError(true);
+        }
+    };
+
+    const handleDelete = async () => {
+        if (!deleteConfirmed) {
+            setDeleteConfirmed(true);
+            setTimeout(() => setDeleteConfirmed(false), 3000);
+            return;
+        }
+
+        if (!integration.id) {
+            onRemove(integration.uuid);
+            return;
+        }
+
+        await deleteRequest(`/integrations/${integration.id}`);
+        onRemove(integration.uuid);
+    };
+
+    const getStatusClass = () => {
+        if (integration.activityFailed) return "status-error";
+        if (!integration.lastActivity) return "status-inactive";
+        return "status-active";
+    };
+
+    const getStatusText = () => {
+        if (integration.activityFailed) return t("failed");
+        if (!integration.lastActivity) return t("integrations.activity.never_executed");
+        return t("integrations.activity.last_run") + lastActivity;
+    };
+
+    const cardActions = (
+        <>
+            {!config.previewMode && unsavedChanges && !saveConfirmed && (
+                <button className="card-action-btn save-btn" onClick={(e) => {e.stopPropagation(); handleSave();}}>
+                    <FontAwesomeIcon icon={faFloppyDisk}/>
+                </button>
+            )}
+            {saveConfirmed && (
+                <span className="card-action-btn success-indicator">
+                    <FontAwesomeIcon icon={faCheck}/>
+                </span>
+            )}
+            {!config.previewMode && (
+                <button className={`card-action-btn delete-btn ${deleteConfirmed ? "confirm" : ""}`}
+                        onClick={(e) => {e.stopPropagation(); handleDelete();}}>
+                    <FontAwesomeIcon icon={deleteConfirmed ? faTrashArrowUp : faTrash}/>
+                </button>
+            )}
+        </>
+    );
+
+    return (
+        <ExpandableCard
+            icon={integrationDef.icon}
+            title={displayName}
+            subtitle={getStatusText()}
+            statusDot={getStatusClass()}
+            actions={cardActions}
+            defaultExpanded={integration.isNew || false}
+            error={error}
+            success={saveConfirmed}
+        >
+            <FormField
+                label={t("integrations.display_name")}
+                type="text"
+                value={displayName}
+                onChange={updateDisplayName}
+                placeholder={t("integrations.display_name")}
+            />
+
+            {integrationDef.fields.map((field) => (
+                <FormField
+                    key={field.name}
+                    label={t(`integrations.${integration.name}.fields.${field.name}`)}
+                    type={field.type}
+                    value={fields[field.name]}
+                    onChange={(value) => updateField(field.name, value)}
+                    placeholder={getPlaceholder(field.name)}
+                    error={!isValidInput(field)}
+                />
+            ))}
+        </ExpandableCard>
+    );
+};
+
+const Dialog = ({integrations, active, setActive}) => {
     const close = useContext(DialogContext);
     const [config] = useContext(ConfigContext);
-    const [currentTab, setCurrentTab] = useState(integrations[Object.keys(integrations)[0]].name);
 
-    const addIntegration = () => setActive([...active, {uuid: uuid(), name: currentTab,
-        integration: integrations[currentTab], data: {}, open: true}]);
+    const addIntegration = (item) => {
+        setActive([...active, {
+            uuid: uuid(),
+            name: item.key,
+            data: {},
+            isNew: true
+        }]);
+    };
 
-    const deleteIntegration = (uuid) => setActive(active.filter((item) => item.uuid !== uuid));
+    const removeIntegration = (uuid) => {
+        setActive(active.filter(item => item.uuid !== uuid));
+    };
+
+    const updateIntegration = (uuid, updates) => {
+        setActive(active.map(item =>
+            item.uuid === uuid ? {...item, ...updates} : item
+        ));
+    };
+
+    const dropdownItems = Object.entries(integrations).map(([name, def]) => ({
+        key: name,
+        label: t(`integrations.${name}.title`),
+        icon: def.icon
+    }));
 
     return (
         <>
@@ -28,51 +209,71 @@ export const Dialog = ({integrations, active, setActive}) => {
                 <h4 className="dialog-text">{t("dropdown.integrations")}</h4>
                 <FontAwesomeIcon icon={faClose} className="dialog-text dialog-icon" onClick={() => close()}/>
             </div>
-            <div className="integration-dialog">
-                <AvailableIntegrations integrations={integrations} currentTab={currentTab}
-                                       setCurrentTab={setCurrentTab}/>
 
-                <div className="integrations-tab">
-                    {config.previewMode && active.filter(item => item.name === currentTab).length > 0
-                        && <div className="pr-integration-container">
-                            <FontAwesomeIcon icon={faExclamationTriangle} />
-                            <p>{t("integrations.preview_active")}</p>
-                    </div>}
+            <div className="integrations-wrapper">
+                {config.previewMode && active.length > 0 && (
+                    <div className="preview-warning">
+                        <FontAwesomeIcon icon={faExclamationTriangle}/>
+                        <span>{t("integrations.preview_active")}</span>
+                    </div>
+                )}
 
-                    {active.map((item) => (item.name !== currentTab ? undefined :
-                        <IntegrationItem integration={integrations[currentTab]}
-                                         remove={() => deleteIntegration(item.uuid)}
-                                         data={item} key={item.uuid} isOpen={item.open} />))}
-
-                    {active.filter(item => item.name === currentTab).length === 0
-                        && <NoIntegrationsTab onClick={addIntegration} integration={integrations[currentTab]}/>}
-
-                    {active.filter(item => item.name === currentTab).length > 0
-                        && <IntegrationAddButton onClick={addIntegration}/>}
-                </div>
+                {active.length === 0 ? (
+                    <div className="empty-state">
+                        <FontAwesomeIcon icon={faCircleNodes}/>
+                        <p>{t("integrations.none_active").replace("<br/>", " ").replace("<Bold>", "").replace("</Bold>", "")}</p>
+                        <DropdownSelect
+                            items={dropdownItems}
+                            onSelect={addIntegration}
+                            buttonText={t("integrations.create")}
+                            disabled={config.previewMode}
+                        />
+                    </div>
+                ) : (
+                    <>
+                        <div className="integrations-list">
+                            {active.map(item => (
+                                <IntegrationCard
+                                    key={item.uuid}
+                                    integration={item}
+                                    integrationDef={integrations[item.name]}
+                                    onRemove={removeIntegration}
+                                    onUpdate={updateIntegration}
+                                />
+                            ))}
+                        </div>
+                        <DropdownSelect
+                            items={dropdownItems}
+                            onSelect={addIntegration}
+                            buttonText={t("integrations.create")}
+                            disabled={config.previewMode}
+                        />
+                    </>
+                )}
             </div>
         </>
     );
-}
+};
 
 export const IntegrationDialog = (props) => {
     const [integrationData, setIntegrationData] = useState(undefined);
     const [activeData, setActiveData] = useState(undefined);
 
     useEffect(() => {
-        jsonRequest("/integrations")
-            .then(data => setIntegrationData(data));
-
-        jsonRequest("/integrations/active")
-            .then(data => setActiveData(data.map(item => ({...item, uuid: uuid()}))));
+        jsonRequest("/integrations").then(data => setIntegrationData(data));
+        jsonRequest("/integrations/active").then(data =>
+            setActiveData(data.map(item => ({...item, uuid: uuid()})))
+        );
     }, []);
 
     return (
-        <>
-            <DialogProvider close={props.onClose} customClass={(!integrationData || !activeData) ? "dialog-loading" : ""}>
-                {(!integrationData || !activeData) && <div className="lds-ellipsis"><div/><div/><div/><div/></div>}
-                {integrationData && activeData && <Dialog integrations={integrationData} active={activeData} setActive={setActiveData}/>}
-            </DialogProvider>
-        </>
-    )
-}
\ No newline at end of file
+        <DialogProvider close={props.onClose} customClass={(!integrationData || !activeData) ? "dialog-loading" : ""}>
+            {(!integrationData || !activeData) && (
+                <div className="lds-ellipsis"><div/><div/><div/><div/></div>
+            )}
+            {integrationData && activeData && (
+                <Dialog integrations={integrationData} active={activeData} setActive={setActiveData}/>
+            )}
+        </DialogProvider>
+    );
+};
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/AvailableIntegrations.jsx b/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/AvailableIntegrations.jsx
deleted file mode 100644
index 3110586d..00000000
--- a/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/AvailableIntegrations.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import React from "react";
-import {t} from "i18next";
-import "./styles.sass";
-
-export const AvailableIntegrations = ({integrations, currentTab, setCurrentTab}) => (
-    <div className="available-integrations">
-        {Object.keys(integrations).map((key) => <div
-            className={"integration-tab" + (key === currentTab ? " integration-active" : "")} key={key}
-            onClick={() => setCurrentTab(key)}>
-
-            <FontAwesomeIcon icon={integrations[key].icon} className="integration-icon"/>
-            <p className="integration-text">{t(`integrations.${key}.title`)}</p>
-        </div>)}
-    </div>
-)
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/index.js b/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/index.js
deleted file mode 100644
index 8233231a..00000000
--- a/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {AvailableIntegrations as default} from './AvailableIntegrations';
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/styles.sass b/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/styles.sass
deleted file mode 100644
index 32e24835..00000000
--- a/client/src/common/components/IntegrationDialog/components/AvailableIntegrations/styles.sass
+++ /dev/null
@@ -1,37 +0,0 @@
-@use "@/common/styles/colors" as *
-
-.available-integrations
-  display: flex
-  flex-direction: column
-  gap: 0.5rem
-  user-select: none
-  overflow-x: hidden
-  overflow-y: scroll
-
-.integration-tab
-  display: flex
-  align-items: center
-  gap: 0.5rem
-  color: $subtext
-  padding: 0.6rem 0.7rem
-  border: 2px solid transparent
-  border-radius: 1rem
-  cursor: pointer
-
-  svg
-    width: 1.3rem
-    height: 1.3rem
-  p
-    margin: 0
-    font-size: 14pt
-
-.integration-active
-  background-color: $light-gray
-  color: $white
-
-@media (max-width: 781px)
-  .available-integrations
-    flex-direction: row
-    overflow-x: scroll
-    overflow-y: hidden
-    gap: 0.5rem
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/IntegrationAddButton.jsx b/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/IntegrationAddButton.jsx
deleted file mode 100644
index 46b38b1a..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/IntegrationAddButton.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faAdd} from "@fortawesome/free-solid-svg-icons";
-import {t} from "i18next";
-import React from "react";
-import "./styles.sass";
-
-export const IntegrationAddButton = ({onClick}) => (
-    <div className="add-container">
-        <div className="add-integration" onClick={onClick}>
-            <FontAwesomeIcon icon={faAdd}/>
-            <p>{t("integrations.create")}</p>
-        </div>
-    </div>
-)
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/index.js b/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/index.js
deleted file mode 100644
index 48d92d1b..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {IntegrationAddButton as default} from "./IntegrationAddButton";
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/styles.sass b/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/styles.sass
deleted file mode 100644
index ce5f9c1a..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationAddButton/styles.sass
+++ /dev/null
@@ -1,23 +0,0 @@
-@use "@/common/styles/colors" as *
-
-.add-container
-  width: 100%
-  display: flex
-  justify-content: flex-end
-
-.add-integration
-  color: $subtext
-  cursor: pointer
-  border-radius: 0.8rem
-  display: flex
-  align-items: center
-  justify-content: center
-  gap: 0.5rem
-  padding: 0.7rem 0.8rem
-  user-select: none
-
-  p
-    margin: 0
-
-  &:hover
-    background-color: $light-gray
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationItem/IntegrationItem.jsx b/client/src/common/components/IntegrationDialog/components/IntegrationItem/IntegrationItem.jsx
deleted file mode 100644
index 70781f8b..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationItem/IntegrationItem.jsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import i18n, {t} from "i18next";
-import {useState} from "react";
-import {deleteRequest, patchRequest, putRequest} from "@/common/utils/RequestUtil";
-import IntegrationItemHeader from "./components/IntegrationItemHeader";
-import "./styles.sass";
-
-export const IntegrationItem = ({integration, data, remove, isOpen}) => {
-    const [open, setOpen] = useState(isOpen);
-    const [unsavedChanges, setUnsavedChanges] = useState(false);
-    const [deleteConfirmed, setDeleteConfirmed] = useState(false);
-    const [changesConfirmed, setChangesConfirmed] = useState(false);
-    const [displayName, setDisplayName] = useState(data.displayName || t(`integrations.${integration.name}.title`));
-    const [error, setError] = useState(false);
-
-    const [identifier, setIdentifier] = useState(data.id);
-
-    const states = integration.fields.map(field => {
-        return {name: field.name, value: useState(data.data[field.name] || (field.type === "boolean" ? false : ""))};
-    });
-
-    const updateDisplayName = (event) => {
-        setDisplayName(event.target.value);
-        setUnsavedChanges(true);
-    }
-
-    const updateState = (index, value) => {
-        setUnsavedChanges(true);
-        states[index].value[1](value);
-    }
-
-    const processConfirmed = () => {
-        setUnsavedChanges(false);
-        setChangesConfirmed(true);
-        setTimeout(() => setChangesConfirmed(false), 1000);
-    }
-
-    const saveIntegration = () => {
-        const updatedData = {};
-        states.forEach(state => updatedData[state.name] = state.value[0]);
-
-        updatedData["integration_name"] = displayName;
-
-        if (!identifier) {
-            putRequest(`/integrations/${integration.name}`, updatedData).then(data => {
-                if (!data.ok) throw new Error();
-                return data.json();
-            }).then(processed => {
-                setIdentifier(processed.id);
-                processConfirmed();
-                setError(false);
-            }).catch(() => setError(true));
-        } else {
-            patchRequest(`/integrations/${identifier}`, updatedData).then(data => {
-                if (!data.ok) throw new Error();
-            }).then(() => {
-                processConfirmed();
-                setError(false);
-            }).catch(() => setError(true));
-        }
-
-    }
-
-    const deleteIntegration = () => {
-        if (!deleteConfirmed) {
-            setDeleteConfirmed(true);
-            return;
-        }
-
-        if (!identifier) {
-            remove();
-            return;
-        }
-
-        deleteRequest(`/integrations/${identifier}`)
-            .then(() => remove());
-    }
-
-    const isValidInput = (field, index) => {
-        if (field.required && !getState(index)) return false;
-        if (field.regex && !new RegExp(field.regex).test(getState(index))) return false;
-        if (field.type === "text" && getState(index).length > 255) return false;
-
-        return !(field.type === "textarea" && getState(index).length > 2000);
-    }
-
-    const getState = (index) => states[index].value[0];
-
-    const getPlaceholder = (integration, field) => t(`integrations.${integration}.fields.${field}`
-            + (i18n.exists(`integrations.${integration}.fields.${field}_placeholder`) ? "_placeholder" : ""))
-
-    return (
-        <div className={"integration-item"+(error ? " item-error-border" : (changesConfirmed ? " green-border" : ""))}>
-            <IntegrationItemHeader open={open} setOpen={setOpen} displayName={displayName}
-                                   changesConfirmed={changesConfirmed} deleteConfirmed={deleteConfirmed}
-                                   deleteIntegration={deleteIntegration} saveIntegration={saveIntegration}
-                                   unsavedChanges={unsavedChanges} integration={integration} data={data}/>
-
-            {open && <div className="integration-body">
-                <div className="integration-field">
-                    <p className="integration-field-title">{t(`integrations.display_name`)}</p>
-                    <input className="integration-field-input" type="text" value={displayName}
-                           onChange={updateDisplayName} placeholder={t(`integrations.display_name`)}/>
-                </div>
-
-                {integration.fields.map((field, index) => <div className="integration-field" key={index}>
-                    <p className={"integration-field-title" + (!isValidInput(field, index)
-                        ? " error-item" : "")}>{t(`integrations.${integration.name}.fields.${field.name}`)}</p>
-
-                    {field.type === "text" && <input className={"integration-field-input" + (!isValidInput(field, index)
-                        ? " item-error-border" : "")} type="text" value={getState(index)}
-                                                     onChange={e => updateState(index, e.target.value)}
-                                                     placeholder={getPlaceholder(integration.name, field.name)}/>}
-
-                    {field.type === "textarea" && <textarea className={"integration-field-input text-area"
-                        + (!isValidInput(field, index) ? " item-error-border" : "")} value={getState(index)}
-                                                                onChange={e => updateState(index, e.target.value)}
-                                                                placeholder={getPlaceholder(integration.name, field.name)} />}
-
-                    {field.type === "boolean" && <input type="checkbox" checked={getState(index)}
-                                                        onChange={e => updateState(index, e.target.checked)}/>}
-                </div>)}
-            </div>}
-        </div>
-    )
-
-}
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/IntegrationItemHeader.jsx b/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/IntegrationItemHeader.jsx
deleted file mode 100644
index abb56e6c..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/IntegrationItemHeader.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {t} from "i18next";
-import {generateRelativeTime} from "@/pages/Home/components/LatestTest/utils";
-import {
-    faCheck,
-    faChevronDown,
-    faChevronUp,
-    faFloppyDisk,
-    faTrash,
-    faTrashArrowUp
-} from "@fortawesome/free-solid-svg-icons";
-import "./styles.sass";
-import {useContext, useEffect, useState} from "react";
-import {ConfigContext} from "@/common/contexts/Config";
-
-export const IntegrationItemHeader = ({integration, displayName, unsavedChanges, changesConfirmed, saveIntegration,
-                                          deleteConfirmed, deleteIntegration, open, setOpen, data}) => {
-    const [lastActivity, setLastActivity] = useState(generateRelativeTime(data.lastActivity));
-    const [config] = useContext(ConfigContext);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            if (data.lastActivity !== null) setLastActivity(generateRelativeTime(data.lastActivity));
-        }, 1000);
-
-        return () => clearInterval(interval);
-    });
-
-    return (
-    <div className="integration-item-header">
-        <div className="integration-item-left">
-            <FontAwesomeIcon icon={integration.icon} className="integration-item-icon"/>
-            <div className="integration-title-container">
-                <h3>{displayName}</h3>
-                <div className="integration-item-activity">
-                    <div className={"integration-item-activity-circle circle-" + (data.activityFailed ? "error"
-                        : (data.lastActivity === null || !data.lastActivity ? "inactive" : "active"))}/>
-
-                    <p>{data.activityFailed ? t("failed") : (data.lastActivity === null || !data.lastActivity
-                        ? t("integrations.activity.never_executed") : t("integrations.activity.last_run") + lastActivity)}</p>
-                </div>
-            </div>
-        </div>
-        <div className="integration-item-right">
-            {!config.previewMode && unsavedChanges && !changesConfirmed && <FontAwesomeIcon icon={faFloppyDisk} onClick={saveIntegration}
-                                                                     className="integration-green"/>}
-            {changesConfirmed && <FontAwesomeIcon icon={faCheck} className="icon-green"/>}
-
-            {!config.previewMode && !deleteConfirmed &&
-                <FontAwesomeIcon icon={faTrash} className="integration-red" onClick={deleteIntegration}/>}
-            {deleteConfirmed &&
-                <FontAwesomeIcon icon={faTrashArrowUp} className="integration-red" onClick={deleteIntegration}/>}
-
-            <FontAwesomeIcon icon={open ? faChevronUp : faChevronDown} onClick={() => setOpen(!open)}
-                             className="integration-green"/>
-        </div>
-    </div>
-)}
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/index.js b/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/index.js
deleted file mode 100644
index 59bd293a..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {IntegrationItemHeader as default} from "./IntegrationItemHeader";
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/styles.sass b/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/styles.sass
deleted file mode 100644
index 8172b273..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationItem/components/IntegrationItemHeader/styles.sass
+++ /dev/null
@@ -1,61 +0,0 @@
-@use "@/common/styles/colors" as *
-
-.integration-item-header
-  display: flex
-  justify-content: space-between
-
-.integration-item-left
-  display: flex
-  align-items: center
-  gap: 0.5rem
-
-  svg
-    width: 1.8rem
-    height: 1.8rem
-
-.integration-title-container h3
-  margin: 0
-  font-size: 17px
-  text-overflow: ellipsis
-  overflow: hidden
-  white-space: nowrap
-  max-width: 11rem
-
-.integration-item-activity
-  display: flex
-  align-items: center
-  gap: 0.3rem
-  .integration-item-activity-circle
-    width: 0.5rem
-    height: 0.5rem
-    border-radius: 5rem
-  p
-    margin: 0
-    font-size: 11pt
-    font-weight: 500
-
-.circle-error
-  background-color: $red
-
-.circle-inactive
-  background-color: $dark-gray
-
-.circle-active
-  background-color: $green
-
-.integration-item-right
-  display: flex
-  align-items: center
-  gap: 0.8rem
-
-.integration-item-right svg
-  width: 1.5rem
-  height: 3rem
-  cursor: pointer
-  font-weight: 1000
-
-.integration-green:hover
-  color: $green
-
-.integration-red:hover
-  color: $red
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationItem/index.js b/client/src/common/components/IntegrationDialog/components/IntegrationItem/index.js
deleted file mode 100644
index 9cdd4318..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationItem/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {IntegrationItem as default} from "./IntegrationItem";
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationItem/styles.sass b/client/src/common/components/IntegrationDialog/components/IntegrationItem/styles.sass
deleted file mode 100644
index acff9d33..00000000
--- a/client/src/common/components/IntegrationDialog/components/IntegrationItem/styles.sass
+++ /dev/null
@@ -1,75 +0,0 @@
-@use "@/common/styles/colors" as *
-
-.integration-item
-  border: 2px solid $light-gray
-  border-radius: 0.8rem
-  padding: 0.5rem 1.5rem
-  color: $subtext
-  transition: border-color 0.3s
-
-.green-border
-  border: 2px solid $green
-
-.error-border
-  border: 2px solid $red
-
-.integration-body
-  margin-left: 0.5rem
-  margin-right: 0.5rem
-
-.integration-field
-  display: flex
-  align-items: center
-  gap: 0.5rem
-  margin-top: 0.5rem
-  justify-content: space-between
-
-  p
-    margin: 0
-
-.error-item
-  color: $red
-
-.integration-field-input
-  background-color: $darker-gray
-  border: 1px solid $light-gray
-  border-radius: 0.5rem
-  padding: 0.1rem 0.8rem
-  color: $subtext
-  font-size: 12pt
-  height: 2rem
-  width: 50%
-
-.item-error-border
-  border: 1px solid $red
-
-.text-area
-  font-family: "Inter", sans-serif
-  height: 3.5rem
-  resize: none
-
-input[type="checkbox"]
-  appearance: none
-  border: 1px solid $light-gray
-  width: 2rem
-  height: 2rem
-  border-radius: 0.5rem
-  outline: none
-  transition: border-color 0.3s
-  background-color: $darker-gray
-  cursor: pointer
-
-  &:checked
-    content: "\2713"
-    color: $green
-    display: flex
-    justify-content: center
-    align-items: center
-    font-weight: 700
-    font-size: 18pt
-
-  &::before
-    color: $green
-
-  &:checked::before
-    content: "\2713"
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/NoIntegrationsTab.jsx b/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/NoIntegrationsTab.jsx
deleted file mode 100644
index 6b297125..00000000
--- a/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/NoIntegrationsTab.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {Trans} from "react-i18next";
-import React from "react";
-import "./styles.sass";
-
-export const NoIntegrationsTab = ({onClick, integration}) => (
-    <div className="no-integrations">
-        <FontAwesomeIcon icon={integration.icon}/>
-        <p className="dialog-text"><Trans
-            components={{Bold: <span className="integration-add" onClick={onClick}/>}}>
-            integrations.none_active</Trans></p>
-    </div>
-)
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/index.js b/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/index.js
deleted file mode 100644
index c7b23f92..00000000
--- a/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {NoIntegrationsTab as default} from "./NoIntegrationsTab";
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/styles.sass b/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/styles.sass
deleted file mode 100644
index 6a0302ac..00000000
--- a/client/src/common/components/IntegrationDialog/components/NoIntegrationsTab/styles.sass
+++ /dev/null
@@ -1,19 +0,0 @@
-@use "@/common/styles/colors" as *
-
-.no-integrations
-  display: flex
-  justify-content: center
-  align-items: center
-  flex-direction: column
-  gap: 1rem
-  height: 100%
-  text-align: center
-
-  svg
-    width: 3rem
-    height: 3rem
-    color: $subtext
-
-.integration-add
-  color: $green
-  cursor: pointer
\ No newline at end of file
diff --git a/client/src/common/components/IntegrationDialog/styles.sass b/client/src/common/components/IntegrationDialog/styles.sass
index 2f3bac7f..507242e4 100644
--- a/client/src/common/components/IntegrationDialog/styles.sass
+++ b/client/src/common/components/IntegrationDialog/styles.sass
@@ -1,46 +1,55 @@
 @use "@/common/styles/colors" as *
 
-.integration-dialog
-  display: flex
-  margin-left: 0.5rem
-  margin-right: 0.5rem
-  gap: 1rem
-  width: 45rem
-  margin-top: 1rem
-  height: 20rem
-
-.integrations-tab
+.integrations-wrapper
   display: flex
   flex-direction: column
+  gap: 1rem
+  margin-top: 1rem
+  width: 32rem
+
+.preview-warning
+  display: flex
+  align-items: center
   gap: 0.5rem
-  overflow-y: scroll
-  overflow-x: clip
-  width: 70%
+  padding: 0.75rem 1rem
+  background-color: rgba(239, 68, 68, 0.1)
+  border: 1px solid $accent-danger
+  border-radius: 0.5rem
+  color: $accent-danger
+  font-size: 0.9rem
+  font-weight: 500
 
-  .pr-integration-container
-    display: flex
-    gap: 0.5rem
-    align-items: center
-    justify-content: center
-    padding: 0.5rem
-    border-radius: 0.5rem
-    border: 2px solid $red
-    color: $red
-    font-size: 1.25rem
+  svg
+    flex-shrink: 0
 
-    p
-      margin: 0
-      font-weight: 500
+.empty-state
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  gap: 1rem
+  padding: 3rem 2rem
+  text-align: center
+  color: $subtext
 
-@media (max-width: 781px)
-  .integration-dialog
-    width: 90vw
-    margin-left: 0
-    height: 100%
-    margin-right: 0
-    margin-top: 0.5rem
-    flex-direction: column
+  svg
+    font-size: 3rem
+    opacity: 0.6
 
-  .integrations-tab
-    max-height: 15rem
-    width: 100%
\ No newline at end of file
+  p
+    margin: 0
+    font-size: 1rem
+
+.integrations-list
+  display: flex
+  flex-direction: column
+  gap: 0.75rem
+  max-height: 20rem
+  overflow-y: auto
+
+@media (max-width: 600px)
+  .integrations-wrapper
+    width: 85vw
+
+  .integrations-list
+    max-height: 50vh
\ No newline at end of file
diff --git a/client/src/common/components/LoadingDialog/LoadingDialog.jsx b/client/src/common/components/LoadingDialog/LoadingDialog.jsx
deleted file mode 100644
index cbd25b49..00000000
--- a/client/src/common/components/LoadingDialog/LoadingDialog.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {DialogProvider} from "@/common/contexts/Dialog";
-import "./styles.sass";
-
-export const LoadingDialog = (props) => {
-
-    return (
-        <>
-            {props.isOpen && <DialogProvider disableClosing={true} customClass="dialog-loading">
-                <div className="lds-ellipsis">
-                    <div/><div/><div/><div/>
-                </div>
-            </DialogProvider>}
-        </>
-    )
-}
\ No newline at end of file
diff --git a/client/src/common/components/LoadingDialog/index.js b/client/src/common/components/LoadingDialog/index.js
deleted file mode 100644
index eefeff97..00000000
--- a/client/src/common/components/LoadingDialog/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './LoadingDialog';
\ No newline at end of file
diff --git a/client/src/common/components/LoadingDialog/styles.sass b/client/src/common/components/LoadingDialog/styles.sass
deleted file mode 100644
index bb32753f..00000000
--- a/client/src/common/components/LoadingDialog/styles.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-@use "@/common/styles/colors" as *
-
-.dialog-loading
-  display: flex
-  justify-content: center
-  align-content: center
-  align-items: center
-  width: 70px
-  height: 70px
\ No newline at end of file
diff --git a/client/src/common/components/OptimalValuesDialog/OptimalValuesDialog.jsx b/client/src/common/components/OptimalValuesDialog/OptimalValuesDialog.jsx
new file mode 100644
index 00000000..f5abf997
--- /dev/null
+++ b/client/src/common/components/OptimalValuesDialog/OptimalValuesDialog.jsx
@@ -0,0 +1,116 @@
+import {DialogContext, DialogProvider} from "@/common/contexts/Dialog";
+import {t} from "i18next";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faArrowDown, faArrowUp, faCheck, faClose, faExclamationTriangle, faTableTennis, faWandMagicSparkles} from "@fortawesome/free-solid-svg-icons";
+import "./styles.sass";
+import React, {useContext, useEffect, useState} from "react";
+import {jsonRequest, patchRequest} from "@/common/utils/RequestUtil";
+import {ConfigContext} from "@/common/contexts/Config";
+import {ToastNotificationContext} from "@/common/contexts/ToastNotification";
+
+export const Dialog = () => {
+    const close = useContext(DialogContext);
+    const [config, reloadConfig] = useContext(ConfigContext);
+    const updateToast = useContext(ToastNotificationContext);
+
+    const [ping, setPing] = useState(config.ping || "");
+    const [download, setDownload] = useState(config.download || "");
+    const [upload, setUpload] = useState(config.upload || "");
+    const [recommendations, setRecommendations] = useState(null);
+
+    useEffect(() => {
+        jsonRequest("/recommendations").then((result) => {
+            if (!result.message) setRecommendations(result);
+        }).catch(() => {});
+    }, []);
+
+    const applyRecommendations = () => {
+        if (recommendations) {
+            setPing(recommendations.ping.toString());
+            setDownload(recommendations.download.toString());
+            setUpload(recommendations.upload.toString());
+        }
+    };
+
+    const update = async () => {
+        if ((ping && /[^0-9.]/.test(ping)) || (download && /[^0-9.]/.test(download)) || (upload && /[^0-9.]/.test(upload))) {
+            updateToast(t("dropdown.invalid"), "red", faExclamationTriangle);
+            return;
+        }
+
+        try {
+            if (ping !== config.ping) await patchRequest("/config/ping", {value: ping});
+            if (download !== config.download) await patchRequest("/config/download", {value: download});
+            if (upload !== config.upload) await patchRequest("/config/upload", {value: upload});
+
+            reloadConfig();
+            updateToast(t("dropdown.changes_applied"), "green", faCheck);
+            close();
+        } catch (e) {
+            updateToast(t("dropdown.changes_unsaved"), "red", faExclamationTriangle);
+        }
+    };
+
+    return (
+        <>
+            <div className="dialog-header">
+                <h4 className="dialog-text">{t("optimal_values.title")}</h4>
+                <FontAwesomeIcon icon={faClose} className="dialog-text dialog-icon" onClick={() => close()}/>
+            </div>
+            <div className="optimal-values-content">
+                <div className="optimal-values-speeds">
+                    <div className="optimal-values-speed">
+                        <div className="optimal-values-speed-header">
+                            <FontAwesomeIcon icon={faTableTennis}/>
+                            <div className="optimal-values-speed-text">
+                                <h2>{t("latest.ping")}</h2>
+                                <p>{t("welcome.ms")}</p>
+                            </div>
+                        </div>
+                        <input type="number" placeholder={recommendations?.ping || ""} className="dialog-input"
+                               value={ping} onChange={(e) => setPing(e.target.value)}/>
+                    </div>
+                    <div className="optimal-values-speed">
+                        <div className="optimal-values-speed-header">
+                            <FontAwesomeIcon icon={faArrowDown}/>
+                            <div className="optimal-values-speed-text">
+                                <h2>{t("latest.down")}</h2>
+                                <p>{t("welcome.mbps")}</p>
+                            </div>
+                        </div>
+                        <input type="number" placeholder={recommendations?.download || ""} className="dialog-input"
+                               value={download} onChange={(e) => setDownload(e.target.value)}/>
+                    </div>
+                    <div className="optimal-values-speed">
+                        <div className="optimal-values-speed-header">
+                            <FontAwesomeIcon icon={faArrowUp}/>
+                            <div className="optimal-values-speed-text">
+                                <h2>{t("latest.up")}</h2>
+                                <p>{t("welcome.mbps")}</p>
+                            </div>
+                        </div>
+                        <input type="number" placeholder={recommendations?.upload || ""} className="dialog-input"
+                               value={upload} onChange={(e) => setUpload(e.target.value)}/>
+                    </div>
+                </div>
+            </div>
+            <div className="dialog-buttons">
+                {recommendations && (
+                    <button className="dialog-btn" onClick={applyRecommendations}>
+                        <FontAwesomeIcon icon={faWandMagicSparkles}/>
+                        <span>{t("optimal_values.use_recommended")}</span>
+                    </button>
+                )}
+                <button className="dialog-btn" onClick={update}>{t("dialog.update")}</button>
+            </div>
+        </>
+    );
+};
+
+export const OptimalValuesDialog = (props) => {
+    return (
+        <DialogProvider close={props.onClose}>
+            <Dialog/>
+        </DialogProvider>
+    );
+};
diff --git a/client/src/common/components/OptimalValuesDialog/index.js b/client/src/common/components/OptimalValuesDialog/index.js
new file mode 100644
index 00000000..cb0836c4
--- /dev/null
+++ b/client/src/common/components/OptimalValuesDialog/index.js
@@ -0,0 +1 @@
+export {OptimalValuesDialog as default} from "./OptimalValuesDialog";
\ No newline at end of file
diff --git a/client/src/common/components/OptimalValuesDialog/styles.sass b/client/src/common/components/OptimalValuesDialog/styles.sass
new file mode 100644
index 00000000..d4165b7e
--- /dev/null
+++ b/client/src/common/components/OptimalValuesDialog/styles.sass
@@ -0,0 +1,53 @@
+@use "@/common/styles/colors" as *
+
+.optimal-values-content
+  user-select: none
+  margin: 0.5rem 0
+
+  .optimal-values-speeds
+    display: flex
+    justify-content: center
+    gap: 1.5rem
+
+    .optimal-values-speed
+      display: flex
+      flex-direction: column
+      align-items: center
+
+      input
+        box-sizing: border-box
+        width: 7rem
+        text-align: center
+
+      .optimal-values-speed-header
+        display: flex
+        align-items: center
+        margin-bottom: 0.5rem
+
+        svg
+          font-size: 1.5rem
+          margin-right: 0.4rem
+          color: $green
+
+        .optimal-values-speed-text h2
+          margin: 0
+          color: $subtext
+          font-size: 1rem
+
+        .optimal-values-speed-text p
+          margin: 0
+          color: $subtext
+          font-size: 0.85rem
+
+@media screen and (max-width: 600px)
+  .optimal-values-content .optimal-values-speeds
+    flex-direction: column
+    gap: 1rem
+
+    .optimal-values-speed
+      width: 100%
+      flex-direction: row
+      justify-content: space-between
+
+      input
+        width: 40%
diff --git a/client/src/common/components/ProviderDialog/styles.sass b/client/src/common/components/ProviderDialog/styles.sass
index ca10d4f6..5c552f7c 100644
--- a/client/src/common/components/ProviderDialog/styles.sass
+++ b/client/src/common/components/ProviderDialog/styles.sass
@@ -49,11 +49,12 @@
     justify-content: space-between
 
     .provider-input
-      width: 20rem
+      width: 16rem
       box-sizing: border-box
       margin-top: 0.5rem
       margin-bottom: 0.5rem
-      font-size: 1.3rem
+      font-size: 0.9rem
+      text-align: left
 
     h3
       color: $subtext
diff --git a/client/src/common/components/StorageDialog/styles.sass b/client/src/common/components/StorageDialog/styles.sass
index 055e9723..0c61f02b 100644
--- a/client/src/common/components/StorageDialog/styles.sass
+++ b/client/src/common/components/StorageDialog/styles.sass
@@ -63,6 +63,10 @@
     margin: 0
     color: $subtext
 
+  div
+    display: flex
+    gap: 0.5rem
+
   .dialog-btn
     padding: 0.4rem 1rem
 
diff --git a/client/src/common/components/ToggleSwitch/ToggleSwitch.jsx b/client/src/common/components/ToggleSwitch/ToggleSwitch.jsx
new file mode 100644
index 00000000..68101430
--- /dev/null
+++ b/client/src/common/components/ToggleSwitch/ToggleSwitch.jsx
@@ -0,0 +1,13 @@
+import "./styles.sass";
+
+export const ToggleSwitch = ({checked, onChange, disabled = false}) => (
+    <label className={`toggle-switch ${disabled ? "toggle-disabled" : ""}`}>
+        <input
+            type="checkbox"
+            checked={checked}
+            onChange={(e) => onChange(e.target.checked)}
+            disabled={disabled}
+        />
+        <span className="toggle-slider"/>
+    </label>
+);
diff --git a/client/src/common/components/ToggleSwitch/index.js b/client/src/common/components/ToggleSwitch/index.js
new file mode 100644
index 00000000..18823f74
--- /dev/null
+++ b/client/src/common/components/ToggleSwitch/index.js
@@ -0,0 +1 @@
+export {ToggleSwitch as default} from "./ToggleSwitch";
\ No newline at end of file
diff --git a/client/src/common/components/ToggleSwitch/styles.sass b/client/src/common/components/ToggleSwitch/styles.sass
new file mode 100644
index 00000000..a84a3e91
--- /dev/null
+++ b/client/src/common/components/ToggleSwitch/styles.sass
@@ -0,0 +1,47 @@
+@use "@/common/styles/colors" as *
+
+.toggle-switch
+  position: relative
+  display: inline-block
+  width: 2.5rem
+  height: 1.375rem
+  flex-shrink: 0
+
+  input
+    opacity: 0
+    width: 0
+    height: 0
+
+.toggle-slider
+  position: absolute
+  cursor: pointer
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-color: $light-gray
+  border-radius: 0.75rem
+  transition: background-color 0.2s ease
+
+  &::before
+    content: ""
+    position: absolute
+    height: 1rem
+    width: 1rem
+    left: 0.1875rem
+    top: 50%
+    transform: translateY(-50%)
+    background-color: $white
+    border-radius: 50%
+    transition: transform 0.2s ease
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
+
+.toggle-switch input:checked + .toggle-slider
+  background-color: $accent-primary
+
+.toggle-switch input:checked + .toggle-slider::before
+  transform: translateY(-50%) translateX(1.125rem)
+
+.toggle-disabled
+  opacity: 0.5
+  pointer-events: none
diff --git a/client/src/common/components/WelcomeDialog/styles.sass b/client/src/common/components/WelcomeDialog/styles.sass
index 54c65185..7da864c3 100644
--- a/client/src/common/components/WelcomeDialog/styles.sass
+++ b/client/src/common/components/WelcomeDialog/styles.sass
@@ -14,16 +14,17 @@
     display: flex
     justify-content: space-between
     align-items: center
-    margin-top: 1rem
+    margin-top: 1.25rem
 
     h3
       margin: 0
-      font-size: 14pt
+      font-size: 13pt
       color: $subtext
+      font-weight: 500
 
     .dialog-btn
-      padding: 0.4rem 1.3rem
-      border-radius: 0.6rem
+      padding: 0.5rem 1.5rem
+      border-radius: 0.5rem
 
   .slide-in
     animation: slide-in 0.5s forwards
@@ -31,7 +32,7 @@
 @keyframes slide-in
   from
     opacity: 0
-    transform: translateX(10%) rotate(10deg) scale(0.5)
+    transform: translateX(20px)
   to
     opacity: 1
     transform: translateX(0)
diff --git a/client/src/common/contexts/Dialog/styles.sass b/client/src/common/contexts/Dialog/styles.sass
index 03dab64e..d5e93fe6 100644
--- a/client/src/common/contexts/Dialog/styles.sass
+++ b/client/src/common/contexts/Dialog/styles.sass
@@ -8,12 +8,12 @@
   right: 0
   width: 100%
   height: 100%
-  background-color: rgba(0, 0, 0, 0.6)
+  background-color: rgba(0, 0, 0, 0.7)
   display: flex
   align-items: center
   z-index: 999
   justify-content: center
-  backdrop-filter: blur(2px)
+  backdrop-filter: blur(4px)
   transition: all 0.2s
   animation: opacity 0.3s
 
@@ -22,12 +22,15 @@
   animation: opacity 0.3s reverse
 
 .dialog
-  padding: 15px
+  padding: 1.25rem
   background-color: $dark-gray
+  backdrop-filter: blur(4px)
+  -webkit-backdrop-filter: blur(4px)
   border: 1px solid $light-gray
-  border-radius: 15px
+  border-radius: 1rem
   transition: all 0.2s
   animation: fadeIn 0.3s
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3)
 
 .dialog-hidden
   visibility: hidden
@@ -41,8 +44,12 @@
   user-select: none
 
 .dialog a
-  color: $green
+  color: $accent-primary
   cursor: pointer
+  transition: color 0.15s ease
+
+.dialog a:hover
+  color: $accent-secondary
 
 .dialog-main
   display: flex
@@ -52,50 +59,60 @@
 
 .dialog-buttons
   display: flex
-  margin-top: 5px
-  justify-content: right
+  margin-top: 1rem
+  justify-content: flex-end
+  gap: 0.5rem
 
 .dialog-text
-  font-size: 16pt
+  font-size: 15pt
   color: $subtext
   margin: 0
 
 .dialog-description
-  font-size: 16pt
-  margin: 10px 2px 2px
+  font-size: 15pt
+  margin: 12px 2px 2px
   color: $subtext
+  line-height: 1.5
 
 .dialog-description a
-  color: $green
+  color: $accent-primary
   text-decoration: underline
 
 .dialog-value
-  color: $green
+  color: $accent-primary
+  font-weight: 600
 
 .dialog-icon
   cursor: pointer
+  color: $subtext
+  transition: color 0.15s ease
 
 .dialog-icon:hover
-    color: $red
+  color: $accent-danger
 
 .dialog-btn
-  font-size: 16pt
-  padding: 8px 15px
-  border: none
-  font-weight: 700
-  border-radius: 5px
-  color: $dark-gray
-  background-color: $green
+  display: flex
+  align-items: center
+  justify-content: center
+  gap: 0.5rem
+  padding: 10px 16px
+  background-color: $darker-gray
+  border: 1px solid $light-gray
+  border-radius: 0.5rem
+  color: $white
+  font-size: 12pt
+  font-weight: 600
   cursor: pointer
-  margin-left: 5px
-  margin-right: 5px
-  transition: all 0.2s
+  transition: all 0.15s ease
 
-.dialog-btn:hover
-  filter: brightness(0.8)
+  &:hover
+    border-color: $accent-primary
+    color: $accent-primary
+
+  svg
+    font-size: 0.9rem
 
 .dialog-secondary
-  background-color: $red
-
-.dialog-secondary:hover
-    background-color: $red
\ No newline at end of file
+  &:hover
+    border-color: $accent-danger
+    color: $accent-danger
\ No newline at end of file
diff --git a/client/src/common/contexts/InputDialog/styles.sass b/client/src/common/contexts/InputDialog/styles.sass
index 4e1f5fec..f5967f03 100644
--- a/client/src/common/contexts/InputDialog/styles.sass
+++ b/client/src/common/contexts/InputDialog/styles.sass
@@ -1,24 +1,32 @@
 @use "@/common/styles/colors" as *
 
 .input-dialog
-  width: 480px
+  width: 400px
 
 .dialog-input
-  font-size: 18pt
-  padding: 15px
-  font-weight: 700
+  font-size: 0.9rem
+  padding: 0.6rem 0.875rem
+  font-weight: 500
   margin-top: 15px
   margin-bottom: 15px
+  width: 100%
   background-color: $darker-gray
-  color: $subtext
+  color: $white
   border: 1px solid $light-gray
-  border-radius: 15px
+  border-radius: 0.5rem
   text-align: center
   box-sizing: border-box
   outline: none
+  transition: all 0.15s ease
+
+.dialog-input::placeholder
+  color: $subtext
 
 .dialog-input:focus
-  border: 1px solid $green
+  border-color: $accent-primary
 
 .input-error
-  border: 1px solid $red
\ No newline at end of file
+  border-color: $accent-danger
+  
+.input-error:focus
+  border-color: $accent-danger
\ No newline at end of file
diff --git a/client/src/common/contexts/Status/StatusContext.jsx b/client/src/common/contexts/Status/StatusContext.jsx
index bd181422..ad472e07 100644
--- a/client/src/common/contexts/Status/StatusContext.jsx
+++ b/client/src/common/contexts/Status/StatusContext.jsx
@@ -9,6 +9,8 @@ export const StatusProvider = (props) => {
 
     const updateStatus = () => jsonRequest("/speedtests/status").then(status => setStatus(status));
 
+    const setRunning = (running) => setStatus(prev => ({...prev, running}));
+
     useEffect(() => {
         updateStatus();
         const interval = setInterval(() => updateStatus(), 5000);
@@ -16,7 +18,7 @@ export const StatusProvider = (props) => {
     }, []);
 
     return (
-        <StatusContext.Provider value={[status, updateStatus]}>
+        <StatusContext.Provider value={[status, updateStatus, setRunning]}>
             {props.children}
         </StatusContext.Provider>
     )
diff --git a/client/src/common/contexts/ToastNotification/styles.sass b/client/src/common/contexts/ToastNotification/styles.sass
index 0bebae14..0358466f 100644
--- a/client/src/common/contexts/ToastNotification/styles.sass
+++ b/client/src/common/contexts/ToastNotification/styles.sass
@@ -5,69 +5,77 @@
   bottom: 2rem
   right: 1rem
   z-index: 5
-  background-color: $darker-gray
-  box-shadow: 0 0 1rem $darker-gray
-  border: 2px solid $light-gray
-  border-radius: 0.5rem
-  animation: 0.5s moveIn
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)
+  border: 1px solid $light-gray
+  border-radius: 0.75rem
+  animation: 0.5s moveIn cubic-bezier(0.4, 0, 0.2, 1)
   cursor: pointer
+  transition: all 0.2s ease
 
 .toast-hidden
   visibility: hidden
   transition: all 0s 0.5s
-  animation: 0.5s moveOut
+  animation: 0.5s moveOut cubic-bezier(0.4, 0, 0.2, 1)
 
 .toast-green
-  transition: all 0.3s
+  border-left: 4px solid $accent-primary
 
   & .toast-content svg
-    color: $green
+    color: $accent-primary
 
 .toast-green:hover
-  border-color: $green
-  filter: brightness(0.9)
+  border-color: $light-gray
+  border-left-color: $accent-primary
+  transform: translateX(-4px)
 
 .toast-red
+  border-left: 4px solid $accent-danger
+
   & .toast-content svg
-    color: $red
+    color: $accent-danger
 
 .toast-red:hover
-  border-color: $red
-  filter: brightness(0.9)
+  border-color: $light-gray
+  border-left-color: $accent-danger
+  transform: translateX(-4px)
 
 .toast-content
   display: flex
   align-items: center
-  padding: 1rem 1rem
+  padding: 1rem 1.25rem
   color: $white
   font-size: 14px
   font-weight: 500
 
 .toast-content svg
   margin-right: 1rem
-  width: 2rem
-  height: 2rem
+  width: 1.75rem
+  height: 1.75rem
 
 .toast-content h2
   margin: 0
-  font-size: 1.4rem
+  font-size: 1.25rem
+  font-weight: 600
 
 
 @keyframes moveIn
   0%
     transform: translateX(100%)
-  60%
-    transform: translateX(-10%)
+    opacity: 0
   100%
     transform: translateX(0)
+    opacity: 1
 
 @keyframes moveOut
   0%
     transform: translateX(0)
-  60%
-    transform: translateX(-10%)
+    opacity: 1
   100%
     transform: translateX(100%)
+    opacity: 0
 
 
 @media screen and (max-width: 425px)
@@ -79,15 +87,15 @@
   @keyframes moveIn
     0%
       transform: translateY(100%)
-    60%
-      transform: translateY(-10%)
+      opacity: 0
     100%
       transform: translateY(0)
+      opacity: 1
 
   @keyframes moveOut
     0%
       transform: translateY(0)
-    60%
-      transform: translateY(-10%)
+      opacity: 1
     100%
-      transform: translateY(100%)
\ No newline at end of file
+      transform: translateY(100%)
+      opacity: 0
\ No newline at end of file
diff --git a/client/src/common/styles/_colors.sass b/client/src/common/styles/_colors.sass
index 04f21ea3..1cf96a61 100644
--- a/client/src/common/styles/_colors.sass
+++ b/client/src/common/styles/_colors.sass
@@ -1,21 +1,26 @@
-$dark-background: #232835
-$dark-light-gray: #353A47
-$dark-dark-gray: #1d2128
-$dark-darker-gray: #20252F
-$dark-white: #F1F1F1
-$dark-subtext: #C8C8C8
+$dark-background: #0f1419
+$dark-light-gray: #2a3441
+$dark-dark-gray: #1a2029
+$dark-darker-gray: #151b23
+$dark-white: #e7edf4
+$dark-subtext: #8b99ab
 
-$light-background: #F5F5F5
-$light-light-gray: #E0E0E0
-$light-dark-gray: #FFFFFF
-$light-darker-gray: #F0F0F0
-$light-white: #2C2C2C
-$light-subtext: #666666
+$light-background: #f8fafc
+$light-light-gray: #e2e8f0
+$light-dark-gray: #ffffff
+$light-darker-gray: #f1f5f9
+$light-white: #1e293b
+$light-subtext: #64748b
 
-$blue: #456AC6
-$orange: #E58A00
-$green: #45C65A
-$red: #C64545
+$blue: #3b82f6
+$orange: #f59e0b
+$green: #10b981
+$red: #ef4444
+
+$cyan: #06b6d4
+$purple: #8b5cf6
+$pink: #ec4899
+$amber: #f59e0b
 
 :root
   --background: #{$dark-background}
@@ -24,6 +29,23 @@ $red: #C64545
   --darker-gray: #{$dark-darker-gray}
   --white: #{$dark-white}
   --subtext: #{$dark-subtext}
+  --blue: #{$blue}
+
+  --accent-primary: #{$green}
+  --accent-secondary: #{$cyan}
+  --accent-tertiary: #{$purple}
+  --accent-warning: #{$orange}
+  --accent-danger: #{$red}
+
+  --glass-bg: rgba(26, 32, 41, 0.6)
+
+  --chart-download: #{$cyan}
+  --chart-upload: #{$purple}
+  --chart-ping: #{$amber}
+  --chart-average: #{$pink}
+  --chart-grid: rgba(42, 52, 65, 0.6)
+  --chart-tooltip-bg: #{$dark-darker-gray}
+  --chart-tooltip-border: #{$dark-light-gray}
 
 [data-theme="light"]
   --background: #{$light-background}
@@ -33,9 +55,21 @@ $red: #C64545
   --white: #{$light-white}
   --subtext: #{$light-subtext}
 
+  --glass-bg: rgba(255, 255, 255, 0.85)
+
+  --chart-grid: rgba(226, 232, 240, 0.8)
+  --chart-tooltip-bg: #{$light-dark-gray}
+  --chart-tooltip-border: #{$light-light-gray}
+
 $background: var(--background)
 $light-gray: var(--light-gray)
 $dark-gray: var(--dark-gray)
 $darker-gray: var(--darker-gray)
 $white: var(--white)
-$subtext: var(--subtext)
\ No newline at end of file
+$subtext: var(--subtext)
+
+$accent-primary: var(--accent-primary)
+$accent-secondary: var(--accent-secondary)
+$accent-tertiary: var(--accent-tertiary)
+$accent-warning: var(--accent-warning)
+$accent-danger: var(--accent-danger)
\ No newline at end of file
diff --git a/client/src/common/styles/default.sass b/client/src/common/styles/default.sass
index 4c742eb1..f04eeb5b 100644
--- a/client/src/common/styles/default.sass
+++ b/client/src/common/styles/default.sass
@@ -6,10 +6,27 @@ body, html
   overflow-x: hidden
   background-color: $background
   font-family: "Inter", sans-serif
-  font-weight: 700
+  font-weight: 600
+  position: relative
+
+body::before
+  content: ""
+  position: fixed
+  top: -30%
+  left: 50%
+  transform: translateX(-50%)
+  width: 150%
+  height: 80%
+  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.06) 0%, transparent 60%)
+  pointer-events: none
+  z-index: 0
+
+#root
+  position: relative
+  z-index: 1
 
 ::-webkit-scrollbar
-  width: 14px
+  width: 12px
   background: $background
 
 ::-webkit-scrollbar-track
@@ -20,15 +37,14 @@ body, html
 ::-webkit-scrollbar-thumb
   background: $light-gray
   border-radius: 10px
-  border: 2px solid $background
+  border: 3px solid $background
   min-height: 40px
 
 ::-webkit-scrollbar-thumb:hover
-  background: $white
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)
+  background: $subtext
 
 ::-webkit-scrollbar-thumb:active
-  background: $subtext
+  background: $white
 
 .speedtest-icon
   font-size: 26pt
@@ -45,17 +61,17 @@ body, html
   cursor: help
 
 .icon-red
-  color: $red
+  color: $accent-danger
 
 .icon-error
-  color: $red
-  filter: brightness(0.8)
+  color: $accent-danger
+  filter: brightness(0.9)
 
 .icon-green
-  color: $green
+  color: $accent-primary
 
 .icon-orange
-  color: $orange
+  color: $accent-warning
 
 .icon-blue
   color: $blue
@@ -76,20 +92,20 @@ main
 @keyframes fadeIn
   0%
     opacity: 0
-    transform: scale(0.8) translateY(3rem)
-    filter: blur(3px)
+    transform: scale(0.95)
+    filter: blur(2px)
   100%
     opacity: 1
-    transform: scale(1) translateY(0)
+    transform: scale(1)
 
 @keyframes fadeOut
   0%
     opacity: 1
-    transform: scale(1) translateY(0)
+    transform: scale(1)
   100%
     opacity: 0
-    transform: scale(0.4) translateY(4rem)
-    filter: blur(3px)
+    transform: scale(0.95)
+    filter: blur(2px)
 
 @media (max-width: 730px)
   ::-webkit-scrollbar
diff --git a/client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx b/client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx
index 29b715fa..ce9dcbbf 100644
--- a/client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx
+++ b/client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx
@@ -1,4 +1,4 @@
-import {useContext, useEffect, useState} from "react";
+import {useContext, useEffect, useState, useRef, useMemo} from "react";
 import {faArrowDown, faArrowUp, faClockRotateLeft, faPingPongPaddleBall} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {generateRelativeTime} from "./utils";
@@ -11,6 +11,52 @@ import {getIconBySpeed} from "@/common/utils/TestUtil";
 import {downloadInfo, latestTestInfo, pingInfo, uploadInfo} from "@/pages/Home/components/LatestTest/utils/dialogs";
 import {t} from "i18next";
 
+const BORDER_RADIUS = 14;
+const DASH_LENGTH = 200;
+const STROKE_WIDTH = 3;
+
+const BorderAnimation = () => {
+    const ref = useRef(null);
+    const [size, setSize] = useState({ w: 100, h: 100 });
+    
+    useEffect(() => {
+        const parent = ref.current?.parentElement;
+        if (!parent) return;
+        
+        const update = () => {
+            setSize({ w: parent.offsetWidth, h: parent.offsetHeight });
+        };
+        
+        update();
+        
+        const resizeObserver = new ResizeObserver(update);
+        resizeObserver.observe(parent);
+        
+        return () => resizeObserver.disconnect();
+    }, []);
+    
+    const perimeter = useMemo(() => {
+        const inner = { w: size.w - 2, h: size.h - 2 };
+        return 2 * (inner.w - 2 * BORDER_RADIUS) + 2 * (inner.h - 2 * BORDER_RADIUS) + 2 * Math.PI * BORDER_RADIUS;
+    }, [size]);
+    
+    return (
+        <svg ref={ref} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 10 }}>
+            <rect x={1} y={1} width={size.w - 2} height={size.h - 2} rx={BORDER_RADIUS} ry={BORDER_RADIUS}
+                  fill="none" stroke="var(--accent-primary)" strokeWidth={STROKE_WIDTH} strokeLinecap="round"
+                  strokeDasharray={`${DASH_LENGTH} ${perimeter}`}
+                  style={{ animation: `border-dash 3s linear infinite` }} />
+            <style>{`@keyframes border-dash { to { stroke-dashoffset: -${perimeter + DASH_LENGTH}; } }`}</style>
+        </svg>
+    );
+};
+
+const LoadingValue = ({ children }) => {
+    return (
+        <span className="loading-value">{children}</span>
+    );
+};
+
 const LatestTestComponent = () => {
     const status = useContext(StatusContext)[0];
     const [latest, setLatest] = useState(null);
@@ -32,9 +78,15 @@ const LatestTestComponent = () => {
     if (Object.entries(config).length === 0) return (<></>);
     if (latest === null) return (<></>);
 
+    const getAreaClass = () => {
+        if (status.running) return "analyse-area test-running";
+        if (status.paused) return "analyse-area tests-paused";
+        return "analyse-area pulse";
+    };
+
     return (
-        <div className={"analyse-area " + (status.paused ? "tests-paused" : "pulse")}>
-            {/* Ping */}
+        <div className={getAreaClass()}>
+            {status.running && <BorderAnimation />}
             <div className="inner-container">
                 <div className="container-header">
                     <FontAwesomeIcon onClick={() => setDialog(pingInfo())} icon={faPingPongPaddleBall}
@@ -43,11 +95,16 @@ const LatestTestComponent = () => {
                         className="container-subtext">{t("latest.ping_unit")}</span></h2>
                 </div>
                 <div className="container-main">
-                    <h2>{latest.ping === -1 ? "N/A" : latest.ping}</h2>
+                    <h2>
+                        {status.running ? (
+                            <LoadingValue>{latest.ping === -1 ? "N/A" : latest.ping}</LoadingValue>
+                        ) : (
+                            latest.ping === -1 ? "N/A" : latest.ping
+                        )}
+                    </h2>
                 </div>
             </div>
 
-            {/* Download */}
             <div className="inner-container">
                 <div className="container-header">
                     <FontAwesomeIcon onClick={() => setDialog(downloadInfo())} icon={faArrowDown}
@@ -56,13 +113,18 @@ const LatestTestComponent = () => {
                         className="container-subtext">{t("latest.speed_unit")}</span></h2>
                 </div>
                 <div className="container-main">
-                    <h2>{latest.download === -1 ? "N/A" : latest.download}</h2>
+                    <h2>
+                        {status.running ? (
+                            <LoadingValue>{latest.download === -1 ? "N/A" : latest.download}</LoadingValue>
+                        ) : (
+                            latest.download === -1 ? "N/A" : latest.download
+                        )}
+                    </h2>
                 </div>
             </div>
 
             <div className="mobile-break"></div>
 
-            {/* Upload */}
             <div className="inner-container">
                 <div className="container-header">
                     <FontAwesomeIcon onClick={() => setDialog(uploadInfo())} icon={faArrowUp}
@@ -71,11 +133,16 @@ const LatestTestComponent = () => {
                         className="container-subtext">{t("latest.speed_unit")}</span></h2>
                 </div>
                 <div className="container-main">
-                    <h2>{latest.upload === -1 ? "N/A" : latest.upload}</h2>
+                    <h2>
+                        {status.running ? (
+                            <LoadingValue>{latest.upload === -1 ? "N/A" : latest.upload}</LoadingValue>
+                        ) : (
+                            latest.upload === -1 ? "N/A" : latest.upload
+                        )}
+                    </h2>
                 </div>
             </div>
 
-            {/* Latest update */}
             <div className="inner-container">
                 <div className="container-header">
                     <FontAwesomeIcon onClick={() => setDialog(latestTestInfo(latest))} icon={faClockRotateLeft}
@@ -84,7 +151,13 @@ const LatestTestComponent = () => {
                         className="container-subtext">{t("latest.before")}</span></h2>
                 </div>
                 <div className="container-main">
-                    <h2>{latestTestTime}</h2>
+                    <h2>
+                        {status.running ? (
+                            <LoadingValue>{latestTestTime}</LoadingValue>
+                        ) : (
+                            latestTestTime
+                        )}
+                    </h2>
                 </div>
             </div>
         </div>
diff --git a/client/src/pages/Home/components/LatestTest/styles.sass b/client/src/pages/Home/components/LatestTest/styles.sass
index 26359a9a..3b2b4cde 100644
--- a/client/src/pages/Home/components/LatestTest/styles.sass
+++ b/client/src/pages/Home/components/LatestTest/styles.sass
@@ -1,55 +1,78 @@
 @use "@/common/styles/colors" as *
 
+$purple-primary: #8b5cf6
+$purple-secondary: #7c3aed
+$purple-glow: rgba(139, 92, 246, 0.4)
+
 .analyse-area
   margin-top: 2rem
   display: flex
   padding: 2.5rem 2rem
-  border: transparent 1px solid
-  background-color: $dark-gray
-  border-radius: 15px
+  border: 1px solid $light-gray
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
+  border-radius: 1rem
   width: 100%
-  transition: all 0.5s
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
   align-items: center
   justify-content: center
   margin-bottom: 2rem
   box-sizing: border-box
   user-select: none
+  position: relative
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
 
 .pulse
-  border: $green 2px solid
+  border-color: $accent-primary
   animation: pulse 2s infinite
 
 @keyframes pulse
   0%
-    box-shadow: 0 0 0 0 #14AB37FF
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6)
   70%
-    box-shadow: 0 0 0 10px #CCA92C00
+    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0)
   100%
-    box-shadow: 0 0 0 0 #CCA92C00
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
+
+.test-running
+  border: 1px solid $light-gray
+  animation: none
+  position: relative
+
+.loading-value
+  display: inline-block
+  animation: value-pulse 1.5s ease-in-out infinite
+
+@keyframes value-pulse
+  0%, 100%
+    opacity: 0.3
+  50%
+    opacity: 0.6
 
 .inner-container
   margin-left: 2rem
   margin-right: 2rem
-  transition: all 0.5s
-  animation: fadeIn 0.5s
+  transition: margin 0.5s
+  animation: fadeIn 0.5s ease-out
 
 .container-header
   display: flex
   align-items: center
 
 .tests-paused
-  border: $orange 2px solid
+  border-color: $accent-warning
 
 .container-text
   margin: 0 0 0 25px
   color: $white
-  font-weight: 700
+  font-weight: 600
   font-size: 24pt
   white-space: nowrap
 
 .container-subtext
   color: $subtext
-  font-size: 16pt
+  font-size: 15pt
   margin-left: 10px
   font-weight: 500
 
diff --git a/client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx b/client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx
index a5ff0de7..85a4ad63 100644
--- a/client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx
+++ b/client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx
@@ -1,4 +1,4 @@
-import React, {useContext, useRef} from "react";
+import React, {forwardRef, useContext, useRef, useImperativeHandle} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
     faArrowDown, faArrowUp, faClockRotateLeft, faClose,
@@ -14,7 +14,7 @@ import {t} from "i18next";
 import {ConfigContext} from "@/common/contexts/Config";
 import {ToastNotificationContext} from "@/common/contexts/ToastNotification";
 
-const SpeedtestComponent = (props) => {
+const SpeedtestComponent = forwardRef((props, forwardedRef) => {
     const [setDialog] = useContext(InputDialogContext);
     const updateToast = useContext(ToastNotificationContext);
     const [config] = useContext(ConfigContext);
@@ -22,6 +22,8 @@ const SpeedtestComponent = (props) => {
 
     const ref = useRef();
 
+    useImperativeHandle(forwardedRef, () => ref.current);
+
     let errorMessage = t("test.unknown_error") + " " + props.error;
 
     let isAverage = props.type === "average";
@@ -86,6 +88,6 @@ const SpeedtestComponent = (props) => {
             </div>
         </div>
     );
-}
+});
 
 export default SpeedtestComponent;
\ No newline at end of file
diff --git a/client/src/pages/Home/components/Speedtest/styles.sass b/client/src/pages/Home/components/Speedtest/styles.sass
index e5642b5b..4389fde3 100644
--- a/client/src/pages/Home/components/Speedtest/styles.sass
+++ b/client/src/pages/Home/components/Speedtest/styles.sass
@@ -4,20 +4,27 @@
   margin-bottom: 2rem
   display: flex
   padding: 1.5rem 2rem
-  border: $light-gray 2px solid
-  background-color: $dark-gray
-  border-radius: 15px
+  border: 1px solid $light-gray
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
+  border-radius: 1rem
   justify-content: space-between
   width: 100%
   flex-wrap: wrap
-  transition: all 0.5s
-  animation: fadeIn 0.5s
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
+  animation: fadeIn 0.5s ease-out
   cursor: pointer
   user-select: none
   box-sizing: border-box
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
+  position: relative
+  overflow: hidden
 
 .speedtest:hover
-  border: $green 2px solid
+  border-color: var(--accent-primary)
+  transform: translateY(-4px)
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(16, 185, 129, 0.1)
 
 .speedtest-hidden
   visibility: hidden
diff --git a/client/src/pages/Home/components/TestArea/TestAreaComponent.jsx b/client/src/pages/Home/components/TestArea/TestAreaComponent.jsx
index c862b693..e073a61e 100644
--- a/client/src/pages/Home/components/TestArea/TestAreaComponent.jsx
+++ b/client/src/pages/Home/components/TestArea/TestAreaComponent.jsx
@@ -146,24 +146,24 @@ const TestArea = () => {
                     const isLast = index === speedtests.length - 1;
 
                     return (
-                        <div key={test.id} ref={isLast ? lastElementRef : null}>
-                            <Speedtest
-                                time={date}
-                                ping={test.ping}
-                                pingLevel={getIconBySpeed(test.ping, config.ping, false)}
-                                down={test.download}
-                                downLevel={getIconBySpeed(test.download, config.download, true)}
-                                up={test.upload}
-                                upLevel={getIconBySpeed(test.upload, config.upload, true)}
-                                error={test.error}
-                                url={test.url}
-                                type={test.type}
-                                duration={test.time}
-                                amount={test.amount}
-                                resultId={test.resultId}
-                                id={test.id}
-                            />
-                        </div>
+                        <Speedtest
+                            key={test.id}
+                            ref={isLast ? lastElementRef : null}
+                            time={date}
+                            ping={test.ping}
+                            pingLevel={getIconBySpeed(test.ping, config.ping, false)}
+                            down={test.download}
+                            downLevel={getIconBySpeed(test.download, config.download, true)}
+                            up={test.upload}
+                            upLevel={getIconBySpeed(test.upload, config.upload, true)}
+                            error={test.error}
+                            url={test.url}
+                            type={test.type}
+                            duration={test.time}
+                            amount={test.amount}
+                            resultId={test.resultId}
+                            id={test.id}
+                        />
                     );
                 })}
 
diff --git a/client/src/pages/Home/components/TestArea/styles.sass b/client/src/pages/Home/components/TestArea/styles.sass
index 93ff9112..a5bf7583 100644
--- a/client/src/pages/Home/components/TestArea/styles.sass
+++ b/client/src/pages/Home/components/TestArea/styles.sass
@@ -57,7 +57,7 @@
 
   .back-to-top-button
     bottom: 20px
-    left: 20px
+    right: 20px
     width: 48px
     height: 48px
     
@@ -72,7 +72,7 @@
 .back-to-top-button
   position: fixed
   bottom: 30px
-  left: 30px
+  right: 30px
   z-index: 50
   width: 56px
   height: 56px
diff --git a/client/src/pages/Nodes/components/NodeContainer/styles.sass b/client/src/pages/Nodes/components/NodeContainer/styles.sass
index f439b0c8..df4cb3a0 100644
--- a/client/src/pages/Nodes/components/NodeContainer/styles.sass
+++ b/client/src/pages/Nodes/components/NodeContainer/styles.sass
@@ -2,7 +2,9 @@
 
 .node-item
   border: 2px solid $light-gray
-  background-color: $dark-gray
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
   border-radius: 15px
   display: flex
   width: 50rem
diff --git a/client/src/pages/Nodes/styles.sass b/client/src/pages/Nodes/styles.sass
index 8359fdc9..2d8c3862 100644
--- a/client/src/pages/Nodes/styles.sass
+++ b/client/src/pages/Nodes/styles.sass
@@ -26,7 +26,9 @@
   justify-content: center
   align-items: center
   border: 2px solid $light-gray
-  background-color: $dark-gray
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
   border-radius: 15px
   cursor: pointer
   user-select: none
@@ -51,6 +53,9 @@
 .node-disabled
   width: 53rem
   border: 2px dashed $light-gray
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
   border-radius: 15px
   cursor: not-allowed
   user-select: none
diff --git a/client/src/pages/NotFound/NotFound.jsx b/client/src/pages/NotFound/NotFound.jsx
new file mode 100644
index 00000000..454a77e7
--- /dev/null
+++ b/client/src/pages/NotFound/NotFound.jsx
@@ -0,0 +1,21 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faQuestion} from "@fortawesome/free-solid-svg-icons";
+import {useTranslation} from "react-i18next";
+import "./styles.sass";
+
+export const NotFound = () => {
+    const {t} = useTranslation();
+
+    return (
+        <div className="not-found-page">
+            <div className="not-found-content">
+                <div className="not-found-icon">
+                    <FontAwesomeIcon icon={faQuestion} size="4x"/>
+                </div>
+                <h1 className="not-found-title">404</h1>
+                <h2 className="not-found-subtitle">{t("not_found.title")}</h2>
+                <p className="not-found-description">{t("not_found.description")}</p>
+            </div>
+        </div>
+    );
+};
diff --git a/client/src/pages/NotFound/index.js b/client/src/pages/NotFound/index.js
new file mode 100644
index 00000000..1bb26f17
--- /dev/null
+++ b/client/src/pages/NotFound/index.js
@@ -0,0 +1 @@
+export {NotFound as default} from "./NotFound";
diff --git a/client/src/pages/NotFound/styles.sass b/client/src/pages/NotFound/styles.sass
new file mode 100644
index 00000000..d64e41bc
--- /dev/null
+++ b/client/src/pages/NotFound/styles.sass
@@ -0,0 +1,50 @@
+@use "@/common/styles/_colors" as *
+
+.not-found-page
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  min-height: calc(100vh - 5rem)
+  padding: 2rem
+  text-align: center
+  color: $white
+
+.not-found-content
+  display: flex
+  flex-direction: column
+  align-items: center
+  gap: 1rem
+  max-width: 400px
+
+.not-found-icon
+  width: 100px
+  height: 100px
+  border-radius: 50%
+  background: $dark-gray
+  display: flex
+  align-items: center
+  justify-content: center
+  margin-bottom: 1rem
+
+  svg
+    color: $orange
+
+.not-found-title
+  font-size: 5rem
+  font-weight: 700
+  margin: 0
+  color: $white
+  line-height: 1
+
+.not-found-subtitle
+  font-size: 1.5rem
+  font-weight: 600
+  margin: 0
+  color: $white
+
+.not-found-description
+  font-size: 1rem
+  color: $subtext
+  margin: 0
+  line-height: 1.5
diff --git a/client/src/pages/RouteError/RouteError.jsx b/client/src/pages/RouteError/RouteError.jsx
new file mode 100644
index 00000000..98587ee0
--- /dev/null
+++ b/client/src/pages/RouteError/RouteError.jsx
@@ -0,0 +1,45 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
+import {useNavigate, useRouteError, isRouteErrorResponse} from "react-router-dom";
+import {useTranslation} from "react-i18next";
+import "./styles.sass";
+
+export const RouteError = () => {
+    const error = useRouteError();
+    const navigate = useNavigate();
+    const {t} = useTranslation();
+
+    const is404 = isRouteErrorResponse(error) && error.status === 404;
+
+    return (
+        <div className="route-error-page">
+            <div className="route-error-content">
+                <div className="route-error-icon">
+                    <FontAwesomeIcon icon={faExclamationTriangle} size="4x"/>
+                </div>
+                <h1 className="route-error-title">
+                    {is404 ? "404" : t("route_error.title")}
+                </h1>
+                <h2 className="route-error-subtitle">
+                    {is404 ? t("not_found.title") : t("route_error.subtitle")}
+                </h2>
+                <p className="route-error-description">
+                    {is404 ? t("not_found.description") : t("route_error.description")}
+                </p>
+                {!is404 && error?.message && (
+                    <pre className="route-error-details">{error.message}</pre>
+                )}
+                <div className="route-error-actions">
+                    <button className="dialog-btn" onClick={() => navigate("/")}>
+                        {t("not_found.back_home")}
+                    </button>
+                    {!is404 && (
+                        <button className="dialog-btn dialog-secondary" onClick={() => window.location.reload()}>
+                            {t("route_error.reload")}
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/client/src/pages/RouteError/index.js b/client/src/pages/RouteError/index.js
new file mode 100644
index 00000000..6eec3b07
--- /dev/null
+++ b/client/src/pages/RouteError/index.js
@@ -0,0 +1 @@
+export {RouteError as default} from "./RouteError";
diff --git a/client/src/pages/RouteError/styles.sass b/client/src/pages/RouteError/styles.sass
new file mode 100644
index 00000000..484d6de3
--- /dev/null
+++ b/client/src/pages/RouteError/styles.sass
@@ -0,0 +1,70 @@
+@use "@/common/styles/_colors" as *
+@use "@/common/contexts/Dialog/styles"
+
+.route-error-page
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  min-height: calc(100vh - 5rem)
+  padding: 2rem
+  text-align: center
+  color: $white
+
+.route-error-content
+  display: flex
+  flex-direction: column
+  align-items: center
+  gap: 1rem
+  max-width: 500px
+
+.route-error-icon
+  width: 100px
+  height: 100px
+  border-radius: 50%
+  background: $dark-gray
+  display: flex
+  align-items: center
+  justify-content: center
+  margin-bottom: 1rem
+
+  svg
+    color: $red
+
+.route-error-title
+  font-size: 3rem
+  font-weight: 700
+  margin: 0
+  color: $white
+  line-height: 1
+
+.route-error-subtitle
+  font-size: 1.5rem
+  font-weight: 600
+  margin: 0
+  color: $white
+
+.route-error-description
+  font-size: 1rem
+  color: $subtext
+  margin: 0.5rem 0 1rem 0
+  line-height: 1.5
+
+.route-error-details
+  background: $darker-gray
+  border: 1px solid $light-gray
+  border-radius: 0.5rem
+  padding: 1rem
+  font-size: 0.875rem
+  color: $red
+  max-width: 100%
+  overflow-x: auto
+  margin: 0.5rem 0 1rem 0
+  white-space: pre-wrap
+  word-break: break-word
+
+.route-error-actions
+  display: flex
+  gap: 1rem
+  flex-wrap: wrap
+  justify-content: center
diff --git a/client/src/pages/Statistics/Statistics.jsx b/client/src/pages/Statistics/Statistics.jsx
index 2b847291..b1c0c1ab 100644
--- a/client/src/pages/Statistics/Statistics.jsx
+++ b/client/src/pages/Statistics/Statistics.jsx
@@ -8,36 +8,95 @@ import {
     PointElement,
     RadialLinearScale,
     Title,
-    Tooltip
+    Tooltip,
+    Filler
 } from "chart.js";
-import {useEffect, useState} from "react";
-import Failed from "@/pages/Statistics/charts/FailedChart";
+import {useEffect, useState, useCallback} from "react";
 import {jsonRequest} from "@/common/utils/RequestUtil";
+import DateRangePicker from "@/common/components/DateRangePicker";
+import ChartModal from "@/common/components/ChartModal";
 import SpeedChart from "@/pages/Statistics/charts/SpeedChart";
 import LatestTestChart from "@/pages/Statistics/charts/LatestTestChart";
 import PingChart from "@/pages/Statistics/charts/PingChart";
-import DurationChart from "@/pages/Statistics/charts/DurationChart";
 import OverviewChart from "@/pages/Statistics/charts/OverviewChart";
-import ManualChart from "@/pages/Statistics/charts/ManualChart";
 import AverageChart from "@/pages/Statistics/charts/AverageChart";
+import HourlyChart from "@/pages/Statistics/charts/HourlyChart.jsx";
+import ConsistencyChart from "@/pages/Statistics/charts/ConsistencyChart";
 import i18n, {t} from "i18next";
 import "./styles.sass";
 
-ChartJS.register(ArcElement, Tooltip, CategoryScale, LinearScale, PointElement, LineElement, Title, Legend, BarElement, RadialLinearScale);
-ChartJS.defaults.color = "#B0B0B0";
-ChartJS.defaults.font.color = "#B0B0B0";
+ChartJS.register(ArcElement, Tooltip, CategoryScale, LinearScale, PointElement, LineElement, Title, Legend, BarElement, RadialLinearScale, Filler);
+
+const crosshairPlugin = {
+    id: 'crosshair',
+    afterDraw: (chart) => {
+        if (chart.tooltip?._active?.length) {
+            const ctx = chart.ctx;
+            const activePoint = chart.tooltip._active[0];
+            const x = activePoint.element.x;
+            const topY = chart.scales.y.top;
+            const bottomY = chart.scales.y.bottom;
+
+            ctx.save();
+            ctx.beginPath();
+            ctx.setLineDash([5, 5]);
+            ctx.moveTo(x, topY);
+            ctx.lineTo(x, bottomY);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = 'hsla(215, 20%, 65%, 0.6)';
+            ctx.stroke();
+            ctx.restore();
+        }
+    }
+};
+
+ChartJS.register(crosshairPlugin);
+
+ChartJS.defaults.color = "hsl(215, 20%, 55%)";
+ChartJS.defaults.font.color = "hsl(215, 20%, 55%)";
 ChartJS.defaults.font.family = "Inter, sans-serif";
+ChartJS.defaults.font.weight = 500;
+ChartJS.defaults.font.size = 11;
+ChartJS.defaults.elements.line.tension = 0.35;
+ChartJS.defaults.elements.line.borderWidth = 2.5;
+ChartJS.defaults.elements.point.radius = 0;
+ChartJS.defaults.elements.point.hoverRadius = 5;
+ChartJS.defaults.elements.point.hoverBorderWidth = 2;
+ChartJS.defaults.elements.arc.borderWidth = 0;
+ChartJS.defaults.plugins.legend.labels.usePointStyle = true;
+ChartJS.defaults.plugins.legend.labels.pointStyle = 'circle';
+ChartJS.defaults.plugins.legend.labels.padding = 16;
+ChartJS.defaults.plugins.legend.labels.boxWidth = 8;
+ChartJS.defaults.plugins.legend.labels.boxHeight = 8;
 
 
 export const Statistics = () => {
     const [statistics, setStatistics] = useState(null);
     const [latestTest, setLatestTest] = useState(null);
     const [loading, setLoading] = useState(true);
+    const [expandedChart, setExpandedChart] = useState(null);
 
-    const updateStats = () => {
+    const [dateRange, setDateRange] = useState(() => {
+        const to = new Date();
+        const from = new Date();
+        from.setDate(from.getDate() - 7);
+        return { from, to };
+    });
+
+    const formatDateParam = (date) => {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    };
+
+    const updateStats = useCallback(() => {
         setLoading(true);
+        const fromParam = formatDateParam(dateRange.from);
+        const toParam = formatDateParam(dateRange.to);
+        
         return Promise.all([
-            jsonRequest("/speedtests/statistics/?days=7"),
+            jsonRequest(`/speedtests/statistics/?from=${fromParam}&to=${toParam}`),
             jsonRequest("/speedtests?limit=1")
         ])
         .then(([stats, tests]) => {
@@ -49,11 +108,15 @@ export const Statistics = () => {
             console.error("Failed to load statistics:", error);
             setLoading(false);
         });
+    }, [dateRange]);
+
+    const handleDateRangeChange = (from, to) => {
+        setDateRange({ from, to });
     };
 
     useEffect(() => {
         updateStats();
-    }, []);
+    }, [updateStats]);
 
     useEffect(() => {
         const callback = () => updateStats();
@@ -65,21 +128,66 @@ export const Statistics = () => {
     if (!statistics) return <></>;
     if (!statistics.tests || statistics.tests.length === 0) return <h2 className="error-text">{t("test.not_available")}</h2>;
 
+    const renderChart = (chartType) => {
+        switch (chartType) {
+            case 'overview':
+                return <OverviewChart tests={statistics.tests} time={statistics.time} dateRange={dateRange}/>;
+            case 'latest':
+                return <LatestTestChart test={latestTest}/>;
+            case 'consistency':
+                return <ConsistencyChart consistency={statistics.consistency}/>;
+            case 'download':
+                return <SpeedChart labels={statistics.labels} data={statistics.data} dataKey="download" titleKey="latest.down" color="hsl(187, 94%, 43%)" />;
+            case 'upload':
+                return <SpeedChart labels={statistics.labels} data={statistics.data} dataKey="upload" titleKey="latest.up" color="hsl(258, 90%, 66%)" />;
+            case 'ping':
+                return <PingChart labels={statistics.labels} data={statistics.data}/>;
+            case 'hourly':
+                return <HourlyChart hourlyAverages={statistics.hourlyAverages}/>;
+            case 'avgDownload':
+                return <AverageChart title={t("statistics.values.down")} data={statistics.download}/>;
+            case 'avgUpload':
+                return <AverageChart title={t("statistics.values.up")} data={statistics.upload}/>;
+            default:
+                return null;
+        }
+    };
+
     return (
         <div className="statistic-area">
-            <OverviewChart tests={statistics.tests} time={statistics.time}/>
-            <LatestTestChart test={latestTest}/>
-            <Failed tests={statistics.tests}/>
+            <div className="statistics-header">
+                <DateRangePicker 
+                    from={dateRange.from} 
+                    to={dateRange.to} 
+                    onChange={handleDateRangeChange}
+                />
+                {statistics.aggregated && (
+                    <span className="aggregation-info">
+                        {t(`statistics.aggregation.${statistics.aggregationType}`)}
+                    </span>
+                )}
+            </div>
 
-            <SpeedChart labels={statistics.labels} data={statistics.data}/>
+            <OverviewChart tests={statistics.tests} time={statistics.time} dateRange={dateRange} onClick={() => setExpandedChart('overview')}/>
+            <LatestTestChart test={latestTest} onClick={() => setExpandedChart('latest')}/>
+            <ConsistencyChart consistency={statistics.consistency} onClick={() => setExpandedChart('consistency')}/>
 
-            <ManualChart tests={statistics.tests}/>
+            <SpeedChart labels={statistics.labels} data={statistics.data} dataKey="download" titleKey="latest.down" color="hsl(187, 94%, 43%)" onClick={() => setExpandedChart('download')}/>
+            <SpeedChart labels={statistics.labels} data={statistics.data} dataKey="upload" titleKey="latest.up" color="hsl(258, 90%, 66%)" onClick={() => setExpandedChart('upload')}/>
+            <PingChart labels={statistics.labels} data={statistics.data} onClick={() => setExpandedChart('ping')}/>
 
-            <DurationChart time={statistics.data?.time}/>
-            <PingChart labels={statistics.labels} data={statistics.data}/>
+            <HourlyChart hourlyAverages={statistics.hourlyAverages} onClick={() => setExpandedChart('hourly')}/>
 
-            <AverageChart title={t("statistics.values.down")} data={statistics.download}/>
-            <AverageChart title={t("statistics.values.up")} data={statistics.upload}/>
+            <AverageChart title={t("statistics.values.down")} data={statistics.download} onClick={() => setExpandedChart('avgDownload')}/>
+            <AverageChart title={t("statistics.values.up")} data={statistics.upload} onClick={() => setExpandedChart('avgUpload')}/>
+
+            <ChartModal 
+                isOpen={!!expandedChart} 
+                onClose={() => setExpandedChart(null)}
+                isChart={['download', 'upload', 'ping', 'hourly'].includes(expandedChart)}
+            >
+                {expandedChart && renderChart(expandedChart)}
+            </ChartModal>
         </div>
     );
 }
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/AverageChart/AverageChart.jsx b/client/src/pages/Statistics/charts/AverageChart/AverageChart.jsx
index 4a4a29b3..c6e56d4b 100644
--- a/client/src/pages/Statistics/charts/AverageChart/AverageChart.jsx
+++ b/client/src/pages/Statistics/charts/AverageChart/AverageChart.jsx
@@ -7,7 +7,7 @@ import "./styles.sass";
 export const AverageChart = (props) => {
 
     return (
-        <StatisticContainer title={props.title} size="small" center={true}>
+        <StatisticContainer title={props.title} size="small" center={true} onClick={props.onClick}>
             <div className="value-container">
                 <div className="value-item">
                     <div className="value-info">
diff --git a/client/src/pages/Statistics/charts/AverageChart/styles.sass b/client/src/pages/Statistics/charts/AverageChart/styles.sass
index 8f14968a..869e9ea3 100644
--- a/client/src/pages/Statistics/charts/AverageChart/styles.sass
+++ b/client/src/pages/Statistics/charts/AverageChart/styles.sass
@@ -3,25 +3,28 @@
 .value-container
   display: flex
   flex-direction: column
-  gap: 2rem
+  gap: 1.75rem
   justify-content: center
   width: 100%
 
 .value-item
   display: flex
   justify-content: space-between
+  align-items: center
 
 .value-item svg
-  width: 2.5rem
-  height: 2.5rem
-  color: $green
+  width: 2.25rem
+  height: 2.25rem
+  color: $accent-primary
 
 .value-item .value-info h2
-  font-size: 16pt
+  font-size: 15pt
   color: $white
   margin: 0
+  font-weight: 600
 
 .value-item .value-info p
-  color: $green
+  color: $accent-primary
   margin: 0
-  font-weight: 600
\ No newline at end of file
+  font-weight: 600
+  font-size: 1.1rem
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/ConsistencyChart/ConsistencyChart.jsx b/client/src/pages/Statistics/charts/ConsistencyChart/ConsistencyChart.jsx
new file mode 100644
index 00000000..3b00725c
--- /dev/null
+++ b/client/src/pages/Statistics/charts/ConsistencyChart/ConsistencyChart.jsx
@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { t } from "i18next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowDown, faArrowUp, faPingPongPaddleBall } from "@fortawesome/free-solid-svg-icons";
+import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
+import "./styles.sass";
+
+export const ConsistencyChart = (props) => {
+    const data = useMemo(() => {
+        if (!props.consistency) return null;
+        return props.consistency;
+    }, [props.consistency]);
+
+    if (!data) return null;
+
+    const getConsistencyColor = (value) => {
+        if (value >= 90) return 'icon-green';
+        if (value >= 70) return 'icon-orange';
+        return 'icon-red';
+    };
+
+    return (
+        <StatisticContainer title={t("statistics.consistency.title")} onClick={props.onClick}>
+            <div className="consistency-container">
+                <div className="consistency-item">
+                    <div className="consistency-info">
+                        <h2>{t("latest.down")}</h2>
+                        <p className={getConsistencyColor(data.download.consistency)}>
+                            {data.download.consistency}%
+                        </p>
+                        <span className="consistency-detail">±{data.download.stdDev} {t("latest.speed_unit")}</span>
+                    </div>
+                    <FontAwesomeIcon icon={faArrowDown} className={getConsistencyColor(data.download.consistency)} />
+                </div>
+
+                <div className="consistency-item">
+                    <div className="consistency-info">
+                        <h2>{t("latest.up")}</h2>
+                        <p className={getConsistencyColor(data.upload.consistency)}>
+                            {data.upload.consistency}%
+                        </p>
+                        <span className="consistency-detail">±{data.upload.stdDev} {t("latest.speed_unit")}</span>
+                    </div>
+                    <FontAwesomeIcon icon={faArrowUp} className={getConsistencyColor(data.upload.consistency)} />
+                </div>
+
+                <div className="consistency-item">
+                    <div className="consistency-info">
+                        <h2>{t("latest.ping")}</h2>
+                        <p className="icon-orange">
+                            ±{data.ping.stdDev} {t("latest.ping_unit")}
+                        </p>
+                        <span className="consistency-detail">{t("statistics.consistency.ping_variance")}</span>
+                    </div>
+                    <FontAwesomeIcon icon={faPingPongPaddleBall} className="icon-orange" />
+                </div>
+            </div>
+        </StatisticContainer>
+    );
+};
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/ConsistencyChart/index.js b/client/src/pages/Statistics/charts/ConsistencyChart/index.js
new file mode 100644
index 00000000..2ec8e5c4
--- /dev/null
+++ b/client/src/pages/Statistics/charts/ConsistencyChart/index.js
@@ -0,0 +1 @@
+export { ConsistencyChart as default } from "./ConsistencyChart";
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/ConsistencyChart/styles.sass b/client/src/pages/Statistics/charts/ConsistencyChart/styles.sass
new file mode 100644
index 00000000..e92deef5
--- /dev/null
+++ b/client/src/pages/Statistics/charts/ConsistencyChart/styles.sass
@@ -0,0 +1,35 @@
+@use "@/common/styles/colors" as *
+
+.consistency-container
+  display: flex
+  flex-direction: column
+  gap: 1.75rem
+  justify-content: center
+  width: 100%
+
+.consistency-item
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.consistency-item svg
+  width: 2.25rem
+  height: 2.25rem
+
+.consistency-item .consistency-info h2
+  color: $white
+  margin: 0
+  font-size: 1rem
+  font-weight: 600
+
+.consistency-item .consistency-info p
+  margin: 0
+  font-weight: 600
+  font-size: 1.1rem
+
+.consistency-item .consistency-info .consistency-detail
+  color: $subtext
+  font-size: 0.8rem
+  font-weight: 500
+  display: block
+  margin-top: 0.125rem
diff --git a/client/src/pages/Statistics/charts/DurationChart.jsx b/client/src/pages/Statistics/charts/DurationChart.jsx
deleted file mode 100644
index 5d0d0600..00000000
--- a/client/src/pages/Statistics/charts/DurationChart.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
-import {Bar} from "react-chartjs-2";
-import {useEffect, useState} from "react";
-import {t} from "i18next";
-
-const chartOptions = {
-    plugins: {
-        legend: {
-            display: false
-        }
-    },
-    scales: {
-        x: {
-            ticks: {
-                color: "#B0B0B0",
-            }
-        },
-        y: {
-            ticks: {
-                color: "#B0B0B0",
-            },
-            beginAtZero: true,
-        }
-    }
-}
-
-const DurationChart = (props) => {
-
-    const chartData = {
-        labels: [],
-        datasets: [{
-            label: t("statistics.duration.label"),
-            data: [],
-            backgroundColor: ['#45C65A', '#456AC6', '#C64545', '#C6C645', '#C645C6'],
-            borderWidth: 0,
-        }],
-    };
-
-    const [data, setData] = useState({});
-
-    useEffect(() => {
-        if (!props.time) return;
-
-        const frequencies = {};
-        const tempData = {...chartData};
-        props.time.forEach(second => {
-            frequencies[second] ? frequencies[second]++ : frequencies[second] = 1;
-        });
-
-        for (let second in frequencies) {
-            tempData.labels.push(t("time.seconds", {replace: {seconds: second.toString()}}));
-            tempData.datasets[0].data.push(frequencies[second]);
-        }
-
-        setData(tempData);
-    }, [props.time]);
-
-    if (Object.keys(data).length === 0) return <></>;
-
-    return (
-        <StatisticContainer title={t("statistics.duration.title")} center={true}>
-            <Bar data={data} options={chartOptions}/>
-        </StatisticContainer>
-    );
-
-}
-
-export default DurationChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/FailedChart.jsx b/client/src/pages/Statistics/charts/FailedChart.jsx
deleted file mode 100644
index 93d815bd..00000000
--- a/client/src/pages/Statistics/charts/FailedChart.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Doughnut} from "react-chartjs-2";
-import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
-import {t} from "i18next";
-
-const chartOptions = {
-    plugins: {
-        legend: {
-            display: false
-        }
-    },
-    responsive: true,
-    cutout: 80
-};
-
-const FailedChart = (props) => {
-
-    const chartData = {
-        labels: [t("statistics.failed.success"), t("statistics.failed.failed")],
-        datasets: [{
-            label: t("statistics.failed.label"),
-            data: [props.tests.total - props.tests.failed, props.tests.failed],
-            backgroundColor: ['#456AC6', '#C64545'],
-            borderWidth: 0
-        }]
-    };
-
-    return (
-        <StatisticContainer title={t("statistics.failed.title")} center={true}>
-            <Doughnut data={chartData} options={chartOptions}/>
-        </StatisticContainer>
-    );
-}
-
-
-export default FailedChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/HourlyChart.jsx b/client/src/pages/Statistics/charts/HourlyChart.jsx
new file mode 100644
index 00000000..5b2b41cf
--- /dev/null
+++ b/client/src/pages/Statistics/charts/HourlyChart.jsx
@@ -0,0 +1,127 @@
+import { Bar } from "react-chartjs-2";
+import { useMemo, useContext } from "react";
+import { t } from "i18next";
+import { ThemeContext } from "@/common/contexts/Theme";
+import "./SpeedChart/styles.sass";
+
+const HourlyChart = (props) => {
+    const [isDarkMode] = useContext(ThemeContext);
+
+    const chartData = useMemo(() => {
+        if (!props.hourlyAverages) return { labels: [], datasets: [] };
+
+        const labels = props.hourlyAverages.map(h => {
+            const hour = h.hour;
+            return `${hour.toString().padStart(2, '0')}:00`;
+        });
+
+        return {
+            labels,
+            datasets: [
+                {
+                    label: t("latest.down"),
+                    data: props.hourlyAverages.map(h => h.download),
+                    backgroundColor: 'hsla(187, 94%, 43%, 0.75)',
+                    borderColor: 'hsl(187, 94%, 43%)',
+                    borderWidth: 1.5,
+                    borderRadius: 6
+                },
+                {
+                    label: t("latest.up"),
+                    data: props.hourlyAverages.map(h => h.upload),
+                    backgroundColor: 'hsla(258, 90%, 66%, 0.75)',
+                    borderColor: 'hsl(258, 90%, 66%)',
+                    borderWidth: 1.5,
+                    borderRadius: 6
+                }
+            ]
+        };
+    }, [props.hourlyAverages]);
+
+    const gridColor = isDarkMode ? 'rgba(42, 52, 65, 0.6)' : 'rgba(203, 213, 225, 0.8)';
+    const tickColor = isDarkMode ? 'hsl(215, 20%, 50%)' : 'hsl(215, 25%, 40%)';
+    const tooltipBg = isDarkMode ? 'hsl(215, 28%, 10%)' : 'hsl(0, 0%, 100%)';
+    const tooltipTitle = isDarkMode ? 'hsl(210, 40%, 96%)' : 'hsl(215, 25%, 20%)';
+    const tooltipBody = isDarkMode ? 'hsl(215, 20%, 65%)' : 'hsl(215, 15%, 40%)';
+    const tooltipBorder = isDarkMode ? 'hsl(215, 25%, 22%)' : 'hsl(215, 20%, 85%)';
+
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            tooltip: {
+                backgroundColor: tooltipBg,
+                titleColor: tooltipTitle,
+                bodyColor: tooltipBody,
+                borderColor: tooltipBorder,
+                borderWidth: 1,
+                padding: 14,
+                cornerRadius: 10,
+                displayColors: true,
+                boxPadding: 8,
+                callbacks: {
+                    label: (item) => `${item.dataset.label}: ${item.formattedValue} ${t("latest.speed_unit")}`,
+                    afterBody: (items) => {
+                        const hourIndex = items[0].dataIndex;
+                        const count = props.hourlyAverages[hourIndex]?.count || 0;
+                        return `\n${t("statistics.hourly.sample_count")}: ${count}`;
+                    }
+                }
+            },
+            legend: {
+                position: "bottom",
+                labels: {
+                    usePointStyle: true,
+                    pointStyle: 'rect',
+                    padding: 20,
+                    color: tickColor,
+                    font: {
+                        size: 12,
+                        weight: 500
+                    }
+                }
+            }
+        },
+        scales: {
+            x: {
+                grid: {
+                    color: gridColor,
+                    drawBorder: false
+                },
+                border: {
+                    display: false
+                },
+                ticks: {
+                    color: tickColor,
+                    maxRotation: 0
+                }
+            },
+            y: {
+                beginAtZero: true,
+                grid: {
+                    color: gridColor,
+                    drawBorder: false
+                },
+                border: {
+                    display: false
+                },
+                ticks: {
+                    color: tickColor
+                }
+            }
+        }
+    };
+
+    return (
+        <div className="chart-container" onClick={props.onClick}>
+            <div className="chart-header">
+                <h3 className="chart-title">{t("statistics.hourly.title")}</h3>
+            </div>
+            <div className="chart-body">
+                <Bar data={chartData} options={chartOptions} />
+            </div>
+        </div>
+    );
+};
+
+export default HourlyChart;
diff --git a/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx b/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
index 8b7c481b..fd7d955a 100644
--- a/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
+++ b/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
@@ -15,7 +15,7 @@ export const LatestTestChart = (props) => {
     if (config === null) return <></>;
 
     return (
-        <StatisticContainer title={t("latest.latest")}>
+        <StatisticContainer title={t("latest.latest")} onClick={props.onClick}>
             <div className="info-container">
                 <div className="test-container">
                     <div className="test-info">
diff --git a/client/src/pages/Statistics/charts/LatestTestChart/styles.sass b/client/src/pages/Statistics/charts/LatestTestChart/styles.sass
index 9ea47815..a71b9e21 100644
--- a/client/src/pages/Statistics/charts/LatestTestChart/styles.sass
+++ b/client/src/pages/Statistics/charts/LatestTestChart/styles.sass
@@ -3,22 +3,26 @@
 .info-container
   display: flex
   flex-direction: column
-  gap: 2rem
+  gap: 1.75rem
   justify-content: center
   width: 100%
 
 .test-container
   display: flex
   justify-content: space-between
+  align-items: center
 
 .test-container svg
-  width: 3rem
-  height: 3rem
+  width: 2.5rem
+  height: 2.5rem
 
 .test-container .test-info h2
   color: $white
   margin: 0
+  font-size: 1rem
+  font-weight: 600
 
 .test-container .test-info p
   margin: 0
-  font-weight: 600
\ No newline at end of file
+  font-weight: 600
+  font-size: 1.1rem
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/ManualChart.jsx b/client/src/pages/Statistics/charts/ManualChart.jsx
deleted file mode 100644
index 469a7beb..00000000
--- a/client/src/pages/Statistics/charts/ManualChart.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import {Doughnut} from "react-chartjs-2";
-import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
-import {t} from "i18next";
-
-const chartOptions = {
-    plugins: {
-        legend: {
-            display: false
-        }
-    },
-    cutout: 80
-};
-
-const ManuelChart = (props) => {
-
-    const chartData = {
-        labels: [t("statistics.manual.yes"), t("statistics.manual.no")],
-        datasets: [{
-            label: t("statistics.failed.label"),
-            data: [props.tests.custom, props.tests.total - props.tests.custom],
-            backgroundColor: ['#456AC6', '#45C65A'],
-            borderWidth: 0
-        }]
-    };
-
-    return (
-        <StatisticContainer title={t("statistics.manual.title")} center={true} size="small">
-            <Doughnut data={chartData} options={chartOptions}/>
-        </StatisticContainer>
-    );
-}
-
-
-export default ManuelChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/OverviewChart/OverviewChart.jsx b/client/src/pages/Statistics/charts/OverviewChart/OverviewChart.jsx
index 80e115a7..e975ce60 100644
--- a/client/src/pages/Statistics/charts/OverviewChart/OverviewChart.jsx
+++ b/client/src/pages/Statistics/charts/OverviewChart/OverviewChart.jsx
@@ -5,8 +5,14 @@ import {faCircleExclamation, faGaugeHigh, faStopwatch} from "@fortawesome/free-s
 import "./styles.sass";
 
 export const OverviewChart = (props) => {
+    const formatDateForTitle = (date) => {
+        return date.toLocaleDateString(undefined, { day: "2-digit", month: "short" });
+    };
 
-    const title = t("test.overview.title", {replace: {amount: t("test.overview." + (localStorage.getItem("testTime") || 1))}});
+    const title = t("test.overview.title_range", { 
+        from: formatDateForTitle(props.dateRange.from), 
+        to: formatDateForTitle(props.dateRange.to) 
+    });
 
     const items = [
         {
@@ -30,7 +36,7 @@ export const OverviewChart = (props) => {
     ];
 
     return (
-        <StatisticContainer title={title} size="large">
+        <StatisticContainer title={title} size="large" onClick={props.onClick}>
             <div className="overview-items">
                 {items.map((item, index) => (
                     <div className="overview-item" key={index}>
diff --git a/client/src/pages/Statistics/charts/OverviewChart/styles.sass b/client/src/pages/Statistics/charts/OverviewChart/styles.sass
index 250fb5ba..dcc50d13 100644
--- a/client/src/pages/Statistics/charts/OverviewChart/styles.sass
+++ b/client/src/pages/Statistics/charts/OverviewChart/styles.sass
@@ -19,21 +19,25 @@
   gap: 1rem
 
   & svg
-    width: 2.5rem
-    height: 2.5rem
-    color: $white
+    width: 2.25rem
+    height: 2.25rem
+    color: $subtext
 
 .overview-item .info-area .text-area
   & h2
     margin: 0
     color: $white
+    font-size: 1rem
+    font-weight: 600
   & p
     margin: 0
     font-weight: 500
     color: $subtext
+    font-size: 0.85rem
 
 .overview-item h2
-  color: $green
+  color: $accent-primary
+  font-weight: 700
 
 @media screen and (max-width: 1500px)
   .overview-item
diff --git a/client/src/pages/Statistics/charts/PingChart.jsx b/client/src/pages/Statistics/charts/PingChart.jsx
index 1ccc2773..36043f9e 100644
--- a/client/src/pages/Statistics/charts/PingChart.jsx
+++ b/client/src/pages/Statistics/charts/PingChart.jsx
@@ -1,42 +1,167 @@
-import {Line} from "react-chartjs-2";
-import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
-import {t} from "i18next";
+import { Line } from "react-chartjs-2";
+import { useMemo, useContext } from "react";
+import { t } from "i18next";
+import { ThemeContext } from "@/common/contexts/Theme";
+import "./SpeedChart/styles.sass";
 
-const chartOptions = {
-    plugins: {
-        tooltip: {
-            callbacks: {
-                label: (item) => item.dataset.label + ": " + item.formattedValue + " " + t("latest.ping_unit")
+const PingChart = (props) => {
+    const [isDarkMode] = useContext(ThemeContext);
+
+    const filteredData = useMemo(() => {
+        if (!props.data?.ping || !props.labels) return { labels: [], data: [], average: 0 };
+
+        const filtered = props.labels.map((label, index) => ({
+            label,
+            value: props.data.ping[index],
+            date: new Date(label)
+        })).filter(item => item.value !== null && item.value !== undefined);
+
+        const validValues = filtered.filter(item => item.value > 0).map(item => item.value);
+        const average = validValues.length > 0
+            ? Math.round((validValues.reduce((a, b) => a + b, 0) / validValues.length) * 100) / 100
+            : 0;
+
+        return {
+            labels: filtered.map(item => item.label),
+            data: filtered.map(item => item.value),
+            average
+        };
+    }, [props.labels, props.data]);
+
+    const gridColor = isDarkMode ? 'rgba(42, 52, 65, 0.6)' : 'rgba(203, 213, 225, 0.8)';
+    const tickColor = isDarkMode ? 'hsl(215, 20%, 50%)' : 'hsl(215, 25%, 40%)';
+    const tooltipBg = isDarkMode ? 'hsl(215, 28%, 10%)' : 'hsl(0, 0%, 100%)';
+    const tooltipTitle = isDarkMode ? 'hsl(210, 40%, 96%)' : 'hsl(215, 25%, 20%)';
+    const tooltipBody = isDarkMode ? 'hsl(215, 20%, 65%)' : 'hsl(215, 15%, 40%)';
+    const tooltipBorder = isDarkMode ? 'hsl(215, 25%, 22%)' : 'hsl(215, 20%, 85%)';
+
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            tooltip: {
+                backgroundColor: tooltipBg,
+                titleColor: tooltipTitle,
+                bodyColor: tooltipBody,
+                borderColor: tooltipBorder,
+                borderWidth: 1,
+                padding: 14,
+                cornerRadius: 10,
+                displayColors: true,
+                boxPadding: 8,
+                callbacks: {
+                    label: (item) => `${item.dataset.label}: ${item.formattedValue} ${t("latest.ping_unit")}`
+                }
+            },
+            legend: {
+                position: "bottom",
+                labels: {
+                    usePointStyle: true,
+                    pointStyle: 'circle',
+                    padding: 20,
+                    color: tickColor,
+                    font: {
+                        size: 12,
+                        weight: 500
+                    }
+                }
             }
         },
-        legend: {
-            display: false
+        scales: {
+            x: {
+                reverse: false,
+                grid: {
+                    color: gridColor,
+                    drawBorder: false
+                },
+                border: {
+                    display: false
+                },
+                ticks: {
+                    color: tickColor,
+                    maxTicksLimit: 5,
+                    callback: function(value, index) {
+                        const date = new Date(filteredData.labels[index]);
+                        return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + 
+                               date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+                    }
+                }
+            },
+            y: {
+                beginAtZero: true,
+                grid: {
+                    color: gridColor,
+                    drawBorder: false
+                },
+                border: {
+                    display: false
+                },
+                ticks: {
+                    color: tickColor
+                }
+            }
+        },
+        interaction: {
+            intersect: false,
+            mode: 'index'
+        },
+        elements: {
+            line: {
+                tension: 0.35,
+                borderWidth: 2.5
+            },
+            point: {
+                radius: 3,
+                hoverRadius: 6,
+                hoverBorderWidth: 2
+            }
         }
-    },
-    scales: {x: {reverse: true}},
-    responsive: true
-};
+    };
 
-const SpeedChart = (props) => {
-    const testTime = localStorage.getItem("testTime") || 1;
     const chartData = {
-        labels: testTime < 3 ? props.labels.map((label) => new Date(label).toLocaleTimeString([],
-            {hour: "2-digit", minute: "2-digit"})) : props.labels.slice(1).map((label) =>
-            new Date(label).toLocaleDateString()),
+        labels: filteredData.labels,
         datasets: [
             {
                 label: t("latest.ping"),
-                data: testTime < 3 ? props.data.ping : props.data.ping.slice(1),
-                borderColor: '#45C65A',
+                data: filteredData.data,
+                borderColor: 'hsl(38, 92%, 50%)',
+                backgroundColor: (context) => {
+                    const ctx = context.chart.ctx;
+                    const gradient = ctx.createLinearGradient(0, 0, 0, context.chart.height);
+                    gradient.addColorStop(0, 'hsla(38, 92%, 50%, 0.25)');
+                    gradient.addColorStop(1, 'hsla(38, 92%, 50%, 0.01)');
+                    return gradient;
+                },
+                fill: true,
+                pointBackgroundColor: 'hsl(38, 92%, 50%)',
+                pointBorderColor: 'hsl(38, 92%, 50%)',
+                order: 1
             },
+            {
+                label: t("statistics.average"),
+                data: filteredData.labels.map(() => filteredData.average),
+                borderColor: 'hsl(330, 80%, 60%)',
+                backgroundColor: 'transparent',
+                borderWidth: 2,
+                borderDash: [6, 4],
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                fill: false,
+                order: 2
+            }
         ],
     };
 
     return (
-        <StatisticContainer title={t("latest.ping")} size="normal" center={true}>
-            <Line data={chartData} options={chartOptions}/>
-        </StatisticContainer>
-    )
+        <div className="chart-container ping-chart" onClick={props.onClick}>
+            <div className="chart-header">
+                <h3 className="chart-title">{t("latest.ping")} ({t("latest.ping_unit")})</h3>
+            </div>
+            <div className="chart-body">
+                <Line data={chartData} options={chartOptions} />
+            </div>
+        </div>
+    );
+};
 
-}
-export default SpeedChart;
\ No newline at end of file
+export default PingChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/SpeedChart.jsx b/client/src/pages/Statistics/charts/SpeedChart.jsx
deleted file mode 100644
index a8ab984b..00000000
--- a/client/src/pages/Statistics/charts/SpeedChart.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Line} from "react-chartjs-2";
-import StatisticContainer from "@/pages/Statistics/components/StatisticContainer";
-import {t} from "i18next";
-
-const chartOptions = {
-    plugins: {
-        tooltip: {
-            callbacks: {
-                label: (item) => item.dataset.label + ": " + item.formattedValue + " " + t("latest.speed_unit")
-            }
-        },
-        legend: {
-            position: "bottom"
-        }
-    },
-    scales: {x: {reverse: true}}
-};
-
-const SpeedChart = (props) => {
-    const testTime = localStorage.getItem("testTime") || 1;
-    const chartData = {
-        labels: testTime < 3 ? props.labels.map((label) => new Date(label).toLocaleTimeString([],
-            {hour: "2-digit", minute: "2-digit"})) : props.labels.slice(1).map((label) =>
-            new Date(label).toLocaleDateString()),
-        datasets: [
-            {
-                label: t("latest.down"),
-                data: testTime < 3 ? props.data.download : props.data.download.slice(1),
-                borderColor: '#45C65A'
-            },
-            {
-                label: t("latest.up"),
-                data: testTime < 3 ? props.data.upload : props.data.upload.slice(1),
-                borderColor: '#456AC6'
-            },
-        ],
-    };
-
-    return (
-        <StatisticContainer title={t("statistics.speed.title")} size="normal" center={true}>
-            <Line data={chartData} options={chartOptions}/>
-        </StatisticContainer>
-    )
-
-}
-export default SpeedChart;
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/SpeedChart/SpeedChart.jsx b/client/src/pages/Statistics/charts/SpeedChart/SpeedChart.jsx
new file mode 100644
index 00000000..99cc3186
--- /dev/null
+++ b/client/src/pages/Statistics/charts/SpeedChart/SpeedChart.jsx
@@ -0,0 +1,166 @@
+import { Line } from "react-chartjs-2";
+import { useMemo, useContext } from "react";
+import { t } from "i18next";
+import { ThemeContext } from "@/common/contexts/Theme";
+import "./styles.sass";
+
+export const SpeedChart = ({ labels, data, dataKey, titleKey, color, onClick }) => {
+    const [isDarkMode] = useContext(ThemeContext);
+
+    const filteredData = useMemo(() => {
+        if (!data?.[dataKey] || !labels) return { labels: [], data: [], average: 0 };
+
+        const filtered = labels.map((label, index) => ({
+            label,
+            value: data[dataKey][index],
+            date: new Date(label)
+        })).filter(item => item.value !== null && item.value !== undefined);
+
+        const validValues = filtered.filter(item => item.value > 0).map(item => item.value);
+        const average = validValues.length > 0
+            ? Math.round((validValues.reduce((a, b) => a + b, 0) / validValues.length) * 100) / 100
+            : 0;
+
+        return {
+            labels: filtered.map(item => item.label),
+            data: filtered.map(item => item.value),
+            average
+        };
+    }, [labels, data, dataKey]);
+
+    const gridColor = isDarkMode ? 'rgba(42, 52, 65, 0.6)' : 'rgba(203, 213, 225, 0.8)';
+    const tickColor = isDarkMode ? 'hsl(215, 20%, 50%)' : 'hsl(215, 25%, 40%)';
+    const tooltipBg = isDarkMode ? 'hsl(215, 28%, 10%)' : 'hsl(0, 0%, 100%)';
+    const tooltipTitle = isDarkMode ? 'hsl(210, 40%, 96%)' : 'hsl(215, 25%, 20%)';
+    const tooltipBody = isDarkMode ? 'hsl(215, 20%, 65%)' : 'hsl(215, 15%, 40%)';
+    const tooltipBorder = isDarkMode ? 'hsl(215, 25%, 22%)' : 'hsl(215, 20%, 85%)';
+
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            tooltip: {
+                backgroundColor: tooltipBg,
+                titleColor: tooltipTitle,
+                bodyColor: tooltipBody,
+                borderColor: tooltipBorder,
+                borderWidth: 1,
+                padding: 14,
+                cornerRadius: 10,
+                displayColors: true,
+                boxPadding: 8,
+                callbacks: {
+                    label: (item) => `${item.dataset.label}: ${item.formattedValue} ${t("latest.speed_unit")}`
+                }
+            },
+            legend: {
+                position: "bottom",
+                labels: {
+                    usePointStyle: true,
+                    pointStyle: 'circle',
+                    padding: 20,
+                    color: tickColor,
+                    font: {
+                        size: 12,
+                        weight: 500
+                    }
+                }
+            }
+        },
+        scales: {
+            x: {
+                reverse: false,
+                grid: {
+                    color: gridColor,
+                    drawBorder: false
+                },
+                border: {
+                    display: false
+                },
+                ticks: {
+                    color: tickColor,
+                    maxTicksLimit: 5,
+                    callback: function(value, index) {
+                        const date = new Date(filteredData.labels[index]);
+                        return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + 
+                               date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+                    }
+                }
+            },
+            y: {
+                beginAtZero: true,
+                grid: {
+                    color: gridColor,
+                    drawBorder: false
+                },
+                border: {
+                    display: false
+                },
+                ticks: {
+                    color: tickColor,
+                    stepSize: 100
+                }
+            }
+        },
+        interaction: {
+            intersect: false,
+            mode: 'index'
+        },
+        elements: {
+            line: {
+                tension: 0.35,
+                borderWidth: 2.5
+            },
+            point: {
+                radius: 3,
+                hoverRadius: 6,
+                hoverBorderWidth: 2
+            }
+        }
+    };
+
+    const chartData = {
+        labels: filteredData.labels,
+        datasets: [
+            {
+                label: t(titleKey),
+                data: filteredData.data,
+                borderColor: color,
+                backgroundColor: (context) => {
+                    const ctx = context.chart.ctx;
+                    const gradient = ctx.createLinearGradient(0, 0, 0, context.chart.height);
+                    gradient.addColorStop(0, color.replace('hsl', 'hsla').replace(')', ', 0.25)'));
+                    gradient.addColorStop(1, color.replace('hsl', 'hsla').replace(')', ', 0.01)'));
+                    return gradient;
+                },
+                fill: true,
+                pointBackgroundColor: color,
+                pointBorderColor: color,
+                order: 1
+            },
+            {
+                label: t("statistics.average"),
+                data: filteredData.labels.map(() => filteredData.average),
+                borderColor: 'hsl(330, 80%, 60%)',
+                backgroundColor: 'transparent',
+                borderWidth: 2,
+                borderDash: [6, 4],
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                fill: false,
+                order: 2
+            }
+        ],
+    };
+
+    return (
+        <div className="chart-container" onClick={onClick}>
+            <div className="chart-header">
+                <h3 className="chart-title">{t(titleKey)} ({t("latest.speed_unit")})</h3>
+            </div>
+            <div className="chart-body">
+                <Line data={chartData} options={chartOptions} />
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/SpeedChart/index.js b/client/src/pages/Statistics/charts/SpeedChart/index.js
new file mode 100644
index 00000000..de0685c1
--- /dev/null
+++ b/client/src/pages/Statistics/charts/SpeedChart/index.js
@@ -0,0 +1 @@
+export { SpeedChart as default } from "./SpeedChart";
\ No newline at end of file
diff --git a/client/src/pages/Statistics/charts/SpeedChart/styles.sass b/client/src/pages/Statistics/charts/SpeedChart/styles.sass
new file mode 100644
index 00000000..aa574411
--- /dev/null
+++ b/client/src/pages/Statistics/charts/SpeedChart/styles.sass
@@ -0,0 +1,53 @@
+@use "@/common/styles/colors" as *
+
+.chart-container
+  display: flex
+  flex-direction: column
+  min-width: 16rem
+  border: 1px solid $light-gray
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
+  border-radius: 1rem
+  cursor: pointer
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
+  animation: 0.3s fadeIn ease-out
+  flex: 1 0 30%
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
+
+  &:hover
+    border-color: $accent-primary
+    transform: translateY(-4px)
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15)
+
+.chart-header
+  display: flex
+  justify-content: space-between
+  align-items: center
+  padding: 1rem 1.25rem 0.75rem 1.25rem
+
+.chart-title
+  color: $white
+  font-size: 15pt
+  font-weight: 600
+  margin: 0
+  letter-spacing: -0.01em
+
+.chart-body
+  flex: 1
+  min-height: 14rem
+  padding: 0 1.25rem 1.25rem 1.25rem
+  position: relative
+
+@media screen and (max-width: 900px)
+  .chart-container
+    min-width: 100%
+    flex: 1 0 100%
+
+@media screen and (max-width: 500px)
+  .chart-container
+    padding: 0.5rem
+    border-radius: 0.75rem
+
+  .chart-body
+    min-height: 180px
diff --git a/client/src/pages/Statistics/components/StatisticContainer/StatisticContainer.jsx b/client/src/pages/Statistics/components/StatisticContainer/StatisticContainer.jsx
index 5c42f1be..c1294c51 100644
--- a/client/src/pages/Statistics/components/StatisticContainer/StatisticContainer.jsx
+++ b/client/src/pages/Statistics/components/StatisticContainer/StatisticContainer.jsx
@@ -3,7 +3,7 @@ import "./styles.sass";
 export const StatisticContainer = (props) => {
 
     return (
-        <div className={"stats-container" + (props.size ? " container-" + props.size : "")}>
+        <div className={"stats-container" + (props.size ? " container-" + props.size : "")} onClick={props.onClick}>
             <div className="stats-header">
                 {props.title}
             </div>
diff --git a/client/src/pages/Statistics/components/StatisticContainer/styles.sass b/client/src/pages/Statistics/components/StatisticContainer/styles.sass
index 01337444..5c068fd6 100644
--- a/client/src/pages/Statistics/components/StatisticContainer/styles.sass
+++ b/client/src/pages/Statistics/components/StatisticContainer/styles.sass
@@ -4,27 +4,33 @@
   display: flex
   flex-direction: column
   min-width: 16rem
-  border: 2px solid $light-gray
-  background-color: $dark-gray
+  border: 1px solid $light-gray
+  background-color: var(--glass-bg)
+  backdrop-filter: blur(16px)
+  -webkit-backdrop-filter: blur(16px)
   border-radius: 1rem
   cursor: pointer
-  transition: all 0.2s ease-in-out
-  animation: 0.3s fadeIn
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
+  animation: 0.3s fadeIn ease-out
   flex: 1 0 15%
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
 
 .stats-container:hover
-  border: 2px solid $green
-  transform: scale(1.05)
+  border-color: $accent-primary
+  transform: translateY(-4px)
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15)
 
 .stats-header
   color: $white
-  font-size: 16pt
+  font-size: 15pt
+  font-weight: 600
+  letter-spacing: -0.01em
   border-radius: 1rem 1rem 0 0
-  padding: 0.75rem 0.5rem 0.5rem 1rem
+  padding: 1rem 0.75rem 0.75rem 1.25rem
 
 .stats-content
   display: flex
-  padding-bottom: 1rem
+  padding-bottom: 1.25rem
   padding-left: 1.5rem
   height: 14rem
   padding-right: 1.5rem
diff --git a/client/src/pages/Statistics/styles.sass b/client/src/pages/Statistics/styles.sass
index 984d2a20..39e44ad1 100644
--- a/client/src/pages/Statistics/styles.sass
+++ b/client/src/pages/Statistics/styles.sass
@@ -11,6 +11,21 @@
   flex-wrap: wrap
   transition: 1s all ease-in-out
 
+.statistics-header
+  width: 100%
+  display: flex
+  align-items: center
+  gap: 1rem
+  margin-bottom: 0.5rem
+
+.aggregation-info
+  color: $subtext
+  font-size: 0.8rem
+  background-color: $darker-gray
+  padding: 0.35rem 0.75rem
+  border-radius: 0.375rem
+  border: 1px solid $light-gray
+
 @media screen and (max-width: 1472px)
   .statistic-area
     margin-left: 10rem
diff --git a/server/controller/opengraph.js b/server/controller/opengraph.js
index a3c2718e..3451cadb 100644
--- a/server/controller/opengraph.js
+++ b/server/controller/opengraph.js
@@ -5,7 +5,12 @@ const tests = require("../controller/speedtests");
 const axios = require("axios");
 
 async function generateOpenGraphImage(req) {
-  const test = await tests.listStatistics(1);
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  
+  const formatDate = (d) => d.toISOString().split('T')[0];
+  const test = await tests.listStatistics(formatDate(yesterday), formatDate(today));
 
   if (!test.download.avg || !test.upload.avg || !test.ping.avg) {
     throw new Error("Error fetching OpenGraph data");
diff --git a/server/controller/speedtests.js b/server/controller/speedtests.js
index 1c1428fd..97bc7053 100644
--- a/server/controller/speedtests.js
+++ b/server/controller/speedtests.js
@@ -69,29 +69,165 @@ module.exports.importTests = async (data) => {
     return true;
 }
 
-module.exports.listStatistics = async (days) => {
-    let dbEntries = (await tests.findAll({order: [["created", "DESC"]]}))
-        .filter((entry) => new Date(entry.created) > new Date().getTime() - (days <= 30 ? days : 30 ) * 24 * 3600000);
+module.exports.listStatistics = async (fromDate, toDate) => {
+    const from = new Date(fromDate);
+    const to = new Date(toDate);
+    from.setHours(0, 0, 0, 0);
+    to.setHours(23, 59, 59, 999);
+    
+    const dbEntries = (await tests.findAll({order: [["created", "DESC"]]}))
+        .filter((entry) => {
+            const entryDate = new Date(entry.created);
+            return entryDate >= from && entryDate <= to;
+        });
 
     let notFailed = dbEntries.filter((entry) => entry.error === null);
 
+    const daysDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
+    const dataPointCount = notFailed.length;
+
+    const MAX_CHART_POINTS = 100;
+    
+    let aggregationType = 'none';
+    if (dataPointCount > MAX_CHART_POINTS) {
+        if (daysDiff > 180 || dataPointCount > MAX_CHART_POINTS * 10) {
+            aggregationType = 'weekly';
+        } else if (daysDiff > 7 || dataPointCount > MAX_CHART_POINTS * 3) {
+            aggregationType = 'daily';
+        } else {
+            aggregationType = 'hourly';
+        }
+    }
+
     let data = {};
     ["ping", "download", "upload", "time"].forEach(item => {
         data[item] = notFailed.map(entry => entry[item]);
     });
 
+    const hourlyData = {};
+    for (let i = 0; i < 24; i++) {
+        hourlyData[i] = { download: [], upload: [], ping: [] };
+    }
+    
+    notFailed.forEach(entry => {
+        const hour = new Date(entry.created).getHours();
+        hourlyData[hour].download.push(entry.download);
+        hourlyData[hour].upload.push(entry.upload);
+        hourlyData[hour].ping.push(entry.ping);
+    });
+
+    const hourlyAverages = Object.keys(hourlyData).map(hour => ({
+        hour: parseInt(hour),
+        download: hourlyData[hour].download.length > 0 
+            ? parseFloat((hourlyData[hour].download.reduce((a, b) => a + b, 0) / hourlyData[hour].download.length).toFixed(2))
+            : null,
+        upload: hourlyData[hour].upload.length > 0
+            ? parseFloat((hourlyData[hour].upload.reduce((a, b) => a + b, 0) / hourlyData[hour].upload.length).toFixed(2))
+            : null,
+        ping: hourlyData[hour].ping.length > 0
+            ? Math.round(hourlyData[hour].ping.reduce((a, b) => a + b, 0) / hourlyData[hour].ping.length)
+            : null,
+        count: hourlyData[hour].download.length
+    }));
+
+    const calcStdDev = (arr) => {
+        if (arr.length < 2) return 0;
+        const mean = arr.reduce((a, b) => a + b, 0) / arr.length;
+        const squaredDiffs = arr.map(val => Math.pow(val - mean, 2));
+        return Math.sqrt(squaredDiffs.reduce((a, b) => a + b, 0) / arr.length);
+    };
+
+    const downloadValues = notFailed.map(e => e.download);
+    const uploadValues = notFailed.map(e => e.upload);
+    const pingValues = notFailed.map(e => e.ping);
+
+    const downloadMean = downloadValues.length > 0 ? downloadValues.reduce((a, b) => a + b, 0) / downloadValues.length : 0;
+    const uploadMean = uploadValues.length > 0 ? uploadValues.reduce((a, b) => a + b, 0) / uploadValues.length : 0;
+
+    const consistency = {
+        download: {
+            stdDev: parseFloat(calcStdDev(downloadValues).toFixed(2)),
+            consistency: downloadMean > 0 ? parseFloat((100 - (calcStdDev(downloadValues) / downloadMean * 100)).toFixed(1)) : 100
+        },
+        upload: {
+            stdDev: parseFloat(calcStdDev(uploadValues).toFixed(2)),
+            consistency: uploadMean > 0 ? parseFloat((100 - (calcStdDev(uploadValues) / uploadMean * 100)).toFixed(1)) : 100
+        },
+        ping: {
+            stdDev: parseFloat(calcStdDev(pingValues).toFixed(2)),
+            jitter: parseFloat(calcStdDev(pingValues).toFixed(2))
+        }
+    };
+
+    let chartData = data;
+    let chartLabels = notFailed.map((entry) => new Date(entry.created).toISOString());
+    
+    if (aggregationType !== 'none' && notFailed.length > 0) {
+        const aggregated = {};
+        
+        notFailed.forEach(entry => {
+            const date = new Date(entry.created);
+            let key;
+            
+            if (aggregationType === 'weekly') {
+                const day = date.getDay();
+                const diff = date.getDate() - day + (day === 0 ? -6 : 1);
+                const weekStart = new Date(date);
+                weekStart.setDate(diff);
+                key = weekStart.toISOString().split('T')[0];
+            } else if (aggregationType === 'daily') {
+                key = date.toISOString().split('T')[0];
+            } else {
+                key = date.toISOString().substring(0, 13);
+            }
+            
+            if (!aggregated[key]) {
+                aggregated[key] = { ping: [], download: [], upload: [], time: [], count: 0 };
+            }
+            
+            aggregated[key].ping.push(entry.ping);
+            aggregated[key].download.push(entry.download);
+            aggregated[key].upload.push(entry.upload);
+            aggregated[key].time.push(entry.time);
+            aggregated[key].count++;
+        });
+
+        const sortedKeys = Object.keys(aggregated).sort((a, b) => new Date(a) - new Date(b));
+        
+        chartLabels = sortedKeys.map(key => {
+            if (aggregationType === 'hourly') {
+                return new Date(key + ':00:00.000Z').toISOString();
+            }
+            return new Date(key).toISOString();
+        });
+        chartData = {
+            ping: sortedKeys.map(key => Math.round(aggregated[key].ping.reduce((a, b) => a + b, 0) / aggregated[key].ping.length)),
+            download: sortedKeys.map(key => parseFloat((aggregated[key].download.reduce((a, b) => a + b, 0) / aggregated[key].download.length).toFixed(2))),
+            upload: sortedKeys.map(key => parseFloat((aggregated[key].upload.reduce((a, b) => a + b, 0) / aggregated[key].upload.length).toFixed(2))),
+            time: sortedKeys.map(key => Math.round(aggregated[key].time.reduce((a, b) => a + b, 0) / aggregated[key].time.length))
+        };
+    }
+
     return {
         tests: {
             total: dbEntries.length,
-            failed: dbEntries.length - notFailed.length,
-            custom: dbEntries.filter((entry) => entry.type === "custom").length
+            failed: dbEntries.length - notFailed.length
         },
         ping: mapRounded(notFailed, "ping"),
         download: mapFixed(notFailed, "download"),
         upload: mapFixed(notFailed, "upload"),
         time: mapRounded(notFailed, "time"),
-        data,
-        labels: notFailed.map((entry) => new Date(entry.created).toISOString())
+        data: chartData,
+        labels: chartLabels,
+        hourlyAverages,
+        consistency,
+        aggregated: aggregationType !== 'none',
+        aggregationType,
+        dateRange: {
+            from: fromDate,
+            to: toDate,
+            days: daysDiff
+        }
     };
 }
 
diff --git a/server/routes/speedtests.js b/server/routes/speedtests.js
index b53b4dcf..75ed22fa 100644
--- a/server/routes/speedtests.js
+++ b/server/routes/speedtests.js
@@ -16,7 +16,19 @@ app.get("/", password(true), async (req, res) => {
 });
 
 app.get("/statistics", password(true), async (req, res) => {
-    res.json(await tests.listStatistics(req.query.days || 1));
+    const { from, to } = req.query;
+
+    if (!from || !to) {
+        return res.status(400).json({ message: "Both 'from' and 'to' date parameters are required" });
+    }
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(from)) {
+        return res.status(400).json({ message: "Invalid 'from' date format. Use YYYY-MM-DD" });
+    }
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(to)) {
+        return res.status(400).json({ message: "Invalid 'to' date format. Use YYYY-MM-DD" });
+    }
+    
+    res.json(await tests.listStatistics(from, to));
 });
 
 app.post("/run", password(false), async (req, res) => {
diff --git a/web/index.html b/web/index.html
index de39e15d..680ea2e9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,20 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/assets/img/favicon.ico" />
     <meta property="og:image" content="/assets/img/logo.png" />
-    <meta name="description"
-          content="A speed test analysis software that shows your internet speed for up to 30 days"
-    />
-    <meta name="theme-color" content="#131A20" />
+    <meta property="og:title" content="MySpeed - Automated Speedtests" />
+    <meta property="og:description" content="Track your internet speed automatically with detailed analytics and history" />
+    <meta name="description" content="Track your internet speed automatically. MySpeed runs scheduled speed tests and provides detailed analytics and up to 30 days of history." />
+    <meta name="theme-color" content="#0a0e12" />
     <meta http-equiv="content-Type" content="text/html; utf-8" />
-    <meta http-equiv="Pragma" content="cache" />
     <meta name="robots" content="INDEX,FOLLOW" />
     <meta http-equiv="content-Language" content="en" />
-    <meta name="description" content="A speed test analysis software that shows your internet speed for up to 30 days" />
-    <meta name="keywords" content="myspeed, network, speedtest, gnmyt" />
+    <meta name="keywords" content="myspeed, network, speedtest, internet speed test, network monitoring" />
     <meta name="author" content="Mathias Wagner" />
-    <meta name="publisher" content="Mathias Wagner" />
-    <meta name="copyright" content="Mathias Wagner" />
-    <meta http-equiv="Reply-to" content="mathias@gnmyt.dev" />
     <title>MySpeed - Automated Speedtests</title>
   </head>
   <body>
diff --git a/web/src/common/components/Button/Button.jsx b/web/src/common/components/Button/Button.jsx
index aff97f90..66025d3a 100644
--- a/web/src/common/components/Button/Button.jsx
+++ b/web/src/common/components/Button/Button.jsx
@@ -1,11 +1,15 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import "./styles.sass";
 
-export const Button = ({color, text, icon, onClick, disabled}) => {
+export const Button = ({color = "primary", text, icon, onClick, disabled, size = "md", variant = "filled"}) => {
     return (
-        <button className={`btn btn-color-${color}`} onClick={onClick} disabled={disabled}>
-            <FontAwesomeIcon icon={icon}/>
-            <h1>{text}</h1>
+        <button
+            className={`btn btn-${variant} btn-${color} btn-${size}`}
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {icon && <FontAwesomeIcon icon={icon}/>}
+            {text && <span>{text}</span>}
         </button>
     );
 }
\ No newline at end of file
diff --git a/web/src/common/components/Button/styles.sass b/web/src/common/components/Button/styles.sass
index 741f67da..8ad9b6ee 100644
--- a/web/src/common/components/Button/styles.sass
+++ b/web/src/common/components/Button/styles.sass
@@ -1,40 +1,116 @@
 @use "@/common/styles/colors" as *
 
 .btn
-  padding: 0.5rem 1rem
-  border-radius: 0.8rem
-  border: 1px solid transparent
-  display: flex
+  display: inline-flex
   align-items: center
-  transition: all 0.2s ease-in-out
+  justify-content: center
+  gap: 0.5rem
+  font-family: inherit
+  font-weight: 600
+  border: none
+  border-radius: 8px
   cursor: pointer
+  transition: all 0.2s ease
+  white-space: nowrap
 
-.btn:hover
-  transform: translateY(-2px)
-  filter: brightness(1.2)
+  &:disabled
+    opacity: 0.5
+    cursor: not-allowed
 
-.btn:active
-  transform: translateY(0) scale(0.98)
+  svg
+    font-size: 1em
 
-.btn svg
-  margin-right: 10px
-  font-size: 18pt
+.btn-sm
+  padding: 0.5rem 1rem
+  font-size: 0.875rem
 
-.btn h1
-  margin: 0
-  font-weight: 900
+.btn-md
+  padding: 0.75rem 1.5rem
+  font-size: 0.9375rem
 
-.btn-color-red
-  background-color: rgba($red, 0.1)
-  color: $red
-  border: 1px solid $red
+.btn-lg
+  padding: 1rem 2rem
+  font-size: 1rem
 
-.btn-color-green
-    background-color: rgba($primary, 0.1)
-    color: $primary
+.btn-filled
+  &.btn-primary
+    background: $primary
+    color: $background
+
+    &:hover:not(:disabled)
+      background: $primary-light
+      transform: translateY(-1px)
+
+    &:active:not(:disabled)
+      transform: translateY(0)
+
+  &.btn-blue
+    background: $blue
+    color: white
+
+    &:hover:not(:disabled)
+      background: $blue-light
+      transform: translateY(-1px)
+
+  &.btn-red
+    background: $red
+    color: white
+
+    &:hover:not(:disabled)
+      background: $red-light
+      transform: translateY(-1px)
+
+  &.btn-green
+    background: $primary
+    color: $background
+
+    &:hover:not(:disabled)
+      background: $primary-light
+      transform: translateY(-1px)
+
+.btn-outline
+  background: transparent
+
+  &.btn-primary
     border: 1px solid $primary
+    color: $primary
 
-.btn-color-blue
-    background-color: rgba($blue, 0.1)
+    &:hover:not(:disabled)
+      background: rgba($primary, 0.1)
+
+  &.btn-blue
+    border: 1px solid $blue
     color: $blue
-    border: 1px solid $blue
\ No newline at end of file
+
+    &:hover:not(:disabled)
+      background: rgba($blue, 0.1)
+
+  &.btn-red
+    border: 1px solid $red
+    color: $red
+
+    &:hover:not(:disabled)
+      background: rgba($red, 0.1)
+
+  &.btn-green
+    border: 1px solid $primary
+    color: $primary
+
+    &:hover:not(:disabled)
+      background: rgba($primary, 0.1)
+
+.btn-ghost
+  background: transparent
+  border: none
+
+  &.btn-primary
+    color: $primary
+
+    &:hover:not(:disabled)
+      background: rgba($primary, 0.1)
+
+  &.btn-blue
+    color: $blue
+
+    &:hover:not(:disabled)
+      background: rgba($blue, 0.1)
\ No newline at end of file
diff --git a/web/src/common/components/Navigation/Navigation.jsx b/web/src/common/components/Navigation/Navigation.jsx
index c052b90a..2e6439da 100644
--- a/web/src/common/components/Navigation/Navigation.jsx
+++ b/web/src/common/components/Navigation/Navigation.jsx
@@ -1,76 +1,144 @@
 import "./styles.sass";
 import Logo from "@/common/assets/logo192.png";
-import Button from "@/common/components/Button";
-import {faBars, faBarsStaggered, faHeart} from "@fortawesome/free-solid-svg-icons";
-import {Link} from "react-router-dom";
+import {faXmark, faBars, faArrowUpRightFromSquare} from "@fortawesome/free-solid-svg-icons";
+import {faGithub} from "@fortawesome/free-brands-svg-icons";
+import {Link, useLocation} from "react-router-dom";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {useEffect, useState} from "react";
-import {DOCUMENTATION_BASE} from "@/main.jsx";
+import {useState, useEffect, useRef, useLayoutEffect} from "react";
+import {DOCUMENTATION_BASE} from "@/common/utils/constants";
 
-export const DONATION_LINK = "https://www.ko-fi.com/gnmyt";
+export const GITHUB_LINK = "https://github.com/gnmyt/myspeed";
+
+const NAV_ITEMS = [
+    {path: "/", label: "Home", isExternal: false},
+    {path: "/install", label: "Install", isExternal: false},
+    {path: "/tutorials", label: "Tutorials", isExternal: false},
+    {path: DOCUMENTATION_BASE, label: "Docs", isExternal: true},
+];
 
 export const Navigation = () => {
-    const [mobileOpen, setMobileOpen] = useState(true);
-    const [showScreen, setShowScreen] = useState(false);
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const [scrolled, setScrolled] = useState(false);
+    const location = useLocation();
+    const navCenterRef = useRef(null);
+    const linkRefs = useRef([]);
+    const [indicatorStyle, setIndicatorStyle] = useState({left: 0, width: 0});
 
     useEffect(() => {
-        const timeout = setTimeout(() => {
-            setMobileOpen(false);
-        }, 500);
-
-        return () => clearTimeout(timeout);
+        const handleScroll = () => {
+            setScrolled(window.scrollY > 20);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
     }, []);
 
-    const onAnimationEnd = (event) => {
-        if (event.animationName === "navClose") {
-            setShowScreen(false);
-        }
-    }
+    useEffect(() => {
+        setMobileOpen(false);
+    }, [location]);
 
-    const openMenu = () => {
-        setMobileOpen(true);
-        setShowScreen(true);
-    }
+    const isActive = (path) => location.pathname === path;
+
+    const getActiveIndex = () => {
+        return NAV_ITEMS.findIndex(item => !item.isExternal && isActive(item.path));
+    };
+
+    useLayoutEffect(() => {
+        const updateIndicator = () => {
+            const activeIndex = getActiveIndex();
+            if (activeIndex !== -1 && linkRefs.current[activeIndex] && navCenterRef.current) {
+                const linkEl = linkRefs.current[activeIndex];
+                const navEl = navCenterRef.current;
+                const linkRect = linkEl.getBoundingClientRect();
+                const navRect = navEl.getBoundingClientRect();
+                setIndicatorStyle({
+                    left: linkRect.left - navRect.left,
+                    width: linkRect.width,
+                });
+            } else {
+                setIndicatorStyle({left: 0, width: 0});
+            }
+        };
+
+        updateIndicator();
+        window.addEventListener("resize", updateIndicator);
+        return () => window.removeEventListener("resize", updateIndicator);
+    }, [location.pathname]);
 
     return (
         <>
-            <nav>
+            <nav className={scrolled ? "nav-scrolled" : ""}>
                 <Link className="logo-area" to="/">
-                    <img src={Logo} alt="Logo"/>
-                    <h1>MySpeed</h1>
+                    <img src={Logo} alt="MySpeed Logo"/>
+                    <span>MySpeed</span>
                 </Link>
-                <div className="nav-area">
-                    <ul>
-                        <li><Link to="/install">Install</Link></li>
-                        <li><Link to="/tutorials">Tutorials</Link></li>
-                        <li><Link to={DOCUMENTATION_BASE}>Documentation</Link></li>
-                    </ul>
-                    <Button icon={faHeart} text="Donate" color="red"
-                            onClick={() => window.open(DONATION_LINK, "_blank")}/>
-                </div>
-                <div className="mobile-toggle" onClick={openMenu}>
-                    <FontAwesomeIcon icon={mobileOpen ? faBarsStaggered : faBars}/>
+
+                <div className="nav-center" ref={navCenterRef}>
+                    {NAV_ITEMS.map((item, index) => (
+                        item.isExternal ? (
+                            <a
+                                key={item.path}
+                                href={item.path}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                ref={el => linkRefs.current[index] = el}
+                                className="external-link"
+                            >
+                                {item.label}
+                                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="external-icon" />
+                            </a>
+                        ) : (
+                            <Link
+                                key={item.path}
+                                to={item.path}
+                                ref={el => linkRefs.current[index] = el}
+                            >
+                                {item.label}
+                            </Link>
+                        )
+                    ))}
+                    <div
+                        className="nav-indicator"
+                        style={{
+                            left: indicatorStyle.left,
+                            width: indicatorStyle.width,
+                            opacity: indicatorStyle.width > 0 ? 1 : 0,
+                        }}
+                    />
                 </div>
+
+                <a href={GITHUB_LINK} target="_blank" rel="noopener noreferrer" className="github-link">
+                    <FontAwesomeIcon icon={faGithub}/>
+                </a>
+
+                <button className="mobile-toggle" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Toggle menu">
+                    <FontAwesomeIcon icon={mobileOpen ? faXmark : faBars}/>
+                </button>
             </nav>
 
-            <div className={`mobile-nav ${mobileOpen ? "" : "mobile-nav-closed"}`}
-                 onClick={() => setMobileOpen(false)} onAnimationEnd={onAnimationEnd}>
-                <Link className={`logo${showScreen ? "" : " logo-pulse"}`} to="/">
-                    <img src={Logo} alt="Logo"/>
-                    <h1>MySpeed</h1>
-                </Link>
-                {showScreen && <>
-                    <div className="mobile-links">
-                        <Link to={"/install"}>Install</Link>
-                        <Link to={"/tutorials"}>Tutorials</Link>
-                        <Link to={DOCUMENTATION_BASE}>Documentation</Link>
-                    </div>
-                    <Button icon={faHeart} text="Donate" color="red"
-                            onClick={() => window.open(DONATION_LINK, "_blank")}/>
-                </>
-                }
+            <div className={`mobile-nav ${mobileOpen ? "mobile-open" : ""}`}>
+                <div className="mobile-header">
+                    <Link to="/" className="mobile-logo">
+                        <img src={Logo} alt="MySpeed Logo"/>
+                        <span>MySpeed</span>
+                    </Link>
+                    <button className="mobile-close" onClick={() => setMobileOpen(false)}>
+                        <FontAwesomeIcon icon={faXmark}/>
+                    </button>
+                </div>
+                
+                <div className="mobile-links">
+                    <Link to="/" className={isActive("/") ? "active" : ""}>Home</Link>
+                    <Link to="/install" className={isActive("/install") ? "active" : ""}>Install</Link>
+                    <Link to="/tutorials" className={isActive("/tutorials") ? "active" : ""}>Tutorials</Link>
+                    <a href={DOCUMENTATION_BASE} target="_blank" rel="noopener noreferrer">
+                        Docs
+                        <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="external-icon" />
+                    </a>
+                    <a href={GITHUB_LINK} target="_blank" rel="noopener noreferrer">GitHub</a>
+                </div>
             </div>
 
+            {mobileOpen && <div className="mobile-overlay" onClick={() => setMobileOpen(false)}/>}
         </>
     );
 }
\ No newline at end of file
diff --git a/web/src/common/components/Navigation/styles.sass b/web/src/common/components/Navigation/styles.sass
index aa2489b6..99044b65 100644
--- a/web/src/common/components/Navigation/styles.sass
+++ b/web/src/common/components/Navigation/styles.sass
@@ -1,160 +1,208 @@
 @use "@/common/styles/colors" as *
 
 nav
-  display: flex
-  justify-content: space-between
-  padding: 0.5rem 2rem
-  background-color: rgba($background-lighter, 0.3)
-  backdrop-filter: blur(15px)
-  user-select: none
   position: fixed
   top: 0
   left: 0
   right: 0
-  height: 3rem
-  z-index: 10
-
-nav .logo-area
+  z-index: 100
   display: flex
   align-items: center
-  gap: 1rem
-  cursor: pointer
-  padding: 0.2rem 0.6rem
-  border: 2px solid transparent
-  border-radius: 1rem
-  transition: all 0.3s
+  justify-content: space-between
+  padding: 1.25rem 4rem
+  background: transparent
+  transition: all 0.3s ease
+
+nav.nav-scrolled
+  padding: 1rem 4rem
+  background: rgba($background, 0.9)
+  backdrop-filter: blur(20px)
+  border-bottom: 1px solid $border-color
+
+.logo-area
+  display: flex
+  align-items: center
+  gap: 0.625rem
   text-decoration: none
-  color: $text
-  -webkit-user-drag: none
+  transition: opacity 0.2s ease
+
+  &:hover
+    opacity: 0.8
 
   img
-    width: 2.5rem
-    height: 2.5rem
+    width: 1.75rem
+    height: 1.75rem
 
-  h1
-    margin: 0
+  span
+    font-size: 1.125rem
+    font-weight: 700
+    color: $text
 
-nav .logo-area:hover
-  border: 2px solid $text
-
-nav .logo-area:active
-  transform: scale(0.95)
-
-nav .nav-area
+.nav-center
+  position: absolute
+  left: 50%
+  transform: translateX(-50%)
   display: flex
   align-items: center
-  gap: 2rem
-
-  ul
-    display: flex
-    gap: 2rem
-    list-style: none
+  gap: 0.5rem
+  padding: 0.375rem
+  border-radius: 12px
 
   a
-    text-decoration: none
-    color: $text
-    font-size: 1.2rem
-    font-weight: 700
-    transition: color 0.3s
-    -webkit-user-drag: none
+    position: relative
+    display: flex
+    align-items: center
+    gap: 0.375rem
+    padding: 0.5rem 1rem
+    font-size: 0.875rem
+    font-weight: 500
+    color: $text-secondary
+    border-radius: 8px
+    transition: color 0.2s ease
+    z-index: 1
 
-  a:hover
-    color: $primary
+    &:hover
+      color: $text
 
-nav .mobile-toggle
-  display: none
+  .external-icon
+    font-size: 0.625rem
+    opacity: 0.7
+
+.nav-indicator
+  position: absolute
+  top: 0.375rem
+  height: calc(100% - 0.75rem)
+  background: $background-card
+  border-radius: 8px
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease
+  z-index: 0
+
+.github-link
+  display: flex
   align-items: center
   justify-content: center
-  cursor: pointer
+  width: 2.5rem
+  height: 2.5rem
+  background: transparent
+  border: 1px solid $border-color
+  border-radius: 10px
+  color: $text-secondary
+  transition: all 0.2s ease
 
-nav .mobile-toggle svg
-  font-size: 22pt
-  transition: all 0.3s
-  fill: $text
+  &:hover
+    background: $background-lighter
+    border-color: $border-hover
+    color: $text
+
+  svg
+    font-size: 1.125rem
+
+.mobile-toggle
+  display: none
+  background: none
+  border: none
+  color: $text
+  font-size: 1.25rem
+  cursor: pointer
+  padding: 0.5rem
 
 .mobile-nav
-  display: flex
   position: fixed
   top: 0
-  left: 0
-  width: 100vw
-  height: 100%
-  -webkit-backdrop-filter: blur(1rem)
-  backdrop-filter: blur(1rem)
-  background: #00000080
-  z-index: 10
-  flex-direction: column
-  align-items: center
-  justify-content: center
-  gap: 2rem
-  animation: navOpen .3s forwards ease-in-out
+  right: 0
+  width: 100%
+  max-width: 320px
+  height: 100vh
+  background: $background-lighter
+  z-index: 150
+  transform: translateX(100%)
+  transition: transform 0.3s ease
+  border-left: 1px solid $border-color
 
-.mobile-nav-closed
-  animation: navClose .3s forwards ease-in-out
+.mobile-nav.mobile-open
+  transform: translateX(0)
 
-.mobile-nav .logo
+.mobile-header
   display: flex
   align-items: center
+  justify-content: space-between
+  padding: 1.25rem 1.5rem
+  border-bottom: 1px solid $border-color
+
+.mobile-logo
+  display: flex
+  align-items: center
+  gap: 0.625rem
   text-decoration: none
-  gap: 1rem
 
   img
-    width: 3rem
-    height: 3rem
+    width: 1.75rem
+    height: 1.75rem
 
-  h1
-    margin: 0
-    font-size: 2rem
+  span
+    font-size: 1.125rem
+    font-weight: 700
     color: $text
 
+.mobile-close
+  display: flex
+  align-items: center
+  justify-content: center
+  width: 2.25rem
+  height: 2.25rem
+  background: $background-card
+  border: 1px solid $border-color
+  border-radius: 8px
+  color: $text-secondary
+  cursor: pointer
+  transition: all 0.2s ease
 
-.logo-pulse
-  animation: logoPulse 1s infinite
+  &:hover
+    color: $text
+    border-color: $border-hover
 
-.mobile-nav .mobile-links
-  text-align: center
+.mobile-links
   display: flex
   flex-direction: column
-  list-style: none
+  padding: 1rem
 
   a
-    text-decoration: none
-    color: $text
-    font-size: 1.7rem
-    font-weight: 700
-    transition: color 0.3s
-    -webkit-user-drag: none
+    display: flex
+    align-items: center
+    gap: 0.5rem
+    padding: 1rem 1rem
+    font-size: 1rem
+    font-weight: 500
+    color: $text-secondary
+    border-radius: 10px
+    transition: all 0.2s ease
 
-  a:hover
-    color: $primary
+    &:hover, &.active
+      background: $background-card
+      color: $text
 
+    .external-icon
+      font-size: 0.75rem
+      opacity: 0.7
 
-@keyframes navOpen
-  from
-    transform: translateY(100%)
-    visibility: hidden
-  to
-    transform: translateY(0)
-    visibility: visible
+.mobile-overlay
+  position: fixed
+  inset: 0
+  background: rgba(0, 0, 0, 0.6)
+  backdrop-filter: blur(4px)
+  z-index: 140
 
-@keyframes navClose
-  from
-    transform: translateY(0)
-    visibility: visible
-  to
-    transform: translateY(-100%)
-    visibility: hidden
+@media (max-width: 900px)
+  nav
+    padding: 1rem 1.5rem
 
-@keyframes logoPulse
-    0%
-        transform: scale(1)
-    50%
-        transform: scale(1.1)
-    100%
-        transform: scale(1)
+  nav.nav-scrolled
+    padding: 1rem 1.5rem
 
-@media (max-width: 814px)
-  nav .nav-area
+  .nav-center, .github-link
     display: none
-  nav .mobile-toggle
-    display: flex
\ No newline at end of file
+
+  .mobile-toggle
+    display: flex
+    align-items: center
+    justify-content: center
\ No newline at end of file
diff --git a/web/src/common/layouts/Root/Root.jsx b/web/src/common/layouts/Root/Root.jsx
index d59a7014..bba6892b 100644
--- a/web/src/common/layouts/Root/Root.jsx
+++ b/web/src/common/layouts/Root/Root.jsx
@@ -1,34 +1,14 @@
 import {Outlet} from "react-router-dom";
 import Navigation from "@/common/components/Navigation";
 import "./styles.sass";
-import {useEffect} from "react";
 
 export const Root = () => {
-
-    useEffect(() => {
-        const handleKeydown = (event) => {
-            if (event.ctrlKey && (event.key === "+" || event.key === "-")) event.preventDefault();
-        }
-
-        const handleWheel = (event) => {
-            if (event.ctrlKey) event.preventDefault();
-        }
-
-        document.addEventListener("keydown", handleKeydown);
-        document.addEventListener("wheel", handleWheel, {passive: false});
-
-        return () => {
-            document.removeEventListener("keydown", handleKeydown);
-            document.removeEventListener("wheel", handleWheel);
-        }
-    }, []);
-
     return (
-        <>
+        <div className="app-root">
             <Navigation />
-            <main>
+            <main className="main-content">
                 <Outlet/>
             </main>
-        </>
+        </div>
   );
 }
\ No newline at end of file
diff --git a/web/src/common/layouts/Root/styles.sass b/web/src/common/layouts/Root/styles.sass
index e5ec1328..484facd9 100644
--- a/web/src/common/layouts/Root/styles.sass
+++ b/web/src/common/layouts/Root/styles.sass
@@ -1,7 +1,26 @@
-main
-  padding: 1rem
-  height: calc(100vh - 7rem)
+@use "@/common/styles/colors" as *
 
-@media screen and (max-width: 1000px)
-  main
-    padding: 0.2rem
\ No newline at end of file
+.app-root
+  min-height: 100vh
+  display: flex
+  flex-direction: column
+  position: relative
+
+  &::before
+    content: ""
+    position: fixed
+    top: -30%
+    left: 50%
+    transform: translateX(-50%)
+    width: 150%
+    height: 80%
+    background: radial-gradient(ellipse at center, rgba($primary, 0.07) 0%, transparent 60%)
+    pointer-events: none
+    z-index: 0
+
+.main-content
+  flex: 1
+  display: flex
+  flex-direction: column
+  position: relative
+  z-index: 1
\ No newline at end of file
diff --git a/web/src/common/styles/_colors.sass b/web/src/common/styles/_colors.sass
index f382f3bf..28510817 100644
--- a/web/src/common/styles/_colors.sass
+++ b/web/src/common/styles/_colors.sass
@@ -1,6 +1,24 @@
-$background: #131A20
-$background-lighter: #1E222F
-$text: #E5E5E5
-$primary: #45C65A
-$blue: #456AC6
-$red: #EC5555
\ No newline at end of file
+$background: #0a0e12
+$background-lighter: #141a22
+$background-card: #1a222d
+$text: #f0f2f5
+$text-secondary: #8b95a5
+$text-muted: #5a6577
+
+$primary: #22c55e
+$primary-light: #4ade80
+$primary-dark: #16a34a
+
+$blue: #3b82f6
+$blue-light: #60a5fa
+$red: #ef4444
+$red-light: #f87171
+$orange: #f59e0b
+$purple: #8b5cf6
+
+$border-color: rgba(255, 255, 255, 0.08)
+$border-hover: rgba(255, 255, 255, 0.15)
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3)
+$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4)
+$shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5)
+$shadow-glow: 0 0 40px rgba($primary, 0.15)
\ No newline at end of file
diff --git a/web/src/common/styles/default.sass b/web/src/common/styles/default.sass
index 1be6d021..07c2b102 100644
--- a/web/src/common/styles/default.sass
+++ b/web/src/common/styles/default.sass
@@ -1,18 +1,47 @@
 @use "colors" as *
 
-body, html
+*
+  box-sizing: border-box
   margin: 0
+  padding: 0
+
+body, html
   background-color: $background
   color: $text
-  font-family: "Inter", sans-serif
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
+  font-weight: 400
+  line-height: 1.6
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  scroll-behavior: smooth
+  overflow-x: hidden
+
+h1, h2, h3, h4, h5, h6
   font-weight: 700
+  line-height: 1.2
+  color: $text
+
+p
+  color: $text-secondary
+
+a
+  color: inherit
+  text-decoration: none
+  transition: color 0.2s ease
+
+::selection
+  background: rgba($primary, 0.3)
+  color: $text
 
 ::-webkit-scrollbar
-  width: 13px
+  width: 8px
+
+::-webkit-scrollbar-track
+  background: $background
 
 ::-webkit-scrollbar-thumb
-  filter: brightness(0.7)
-  border-radius: 10px
+  background: $background-card
+  border-radius: 4px
 
 ::-webkit-scrollbar-thumb:hover
-  filter: brightness(0.8)
\ No newline at end of file
+  background: $text-muted
\ No newline at end of file
diff --git a/web/src/common/utils/constants.js b/web/src/common/utils/constants.js
new file mode 100644
index 00000000..8ce23f7b
--- /dev/null
+++ b/web/src/common/utils/constants.js
@@ -0,0 +1 @@
+export const DOCUMENTATION_BASE = "https://docs.myspeed.dev";
diff --git a/web/src/main.jsx b/web/src/main.jsx
index 884e71a4..63ff0da1 100644
--- a/web/src/main.jsx
+++ b/web/src/main.jsx
@@ -28,8 +28,6 @@ const router = createBrowserRouter([
     }
 ]);
 
-export const DOCUMENTATION_BASE = "https://docs.myspeed.dev";
-
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
         <RouterProvider router={router}/>
diff --git a/web/src/pages/Home/Home.jsx b/web/src/pages/Home/Home.jsx
index 01e5db99..08d67fa6 100644
--- a/web/src/pages/Home/Home.jsx
+++ b/web/src/pages/Home/Home.jsx
@@ -1,48 +1,63 @@
 import InterfaceImage from "@/common/assets/interface.png";
-import Logo from "@/common/assets/logo192.png";
 import "./styles.sass";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faArrowDown, faArrowUp} from "@fortawesome/free-solid-svg-icons";
+import {faArrowRight} from "@fortawesome/free-solid-svg-icons";
+import {faGithub} from "@fortawesome/free-brands-svg-icons";
 import Features from "@/pages/Home/components/Features";
 import FeatureGrid from "@/pages/Home/components/FeatureGrid";
 import GetStarted from "@/pages/Home/components/GetStarted";
 import Footer from "@/pages/Home/components/Footer";
+import Button from "@/common/components/Button";
+import {useNavigate} from "react-router-dom";
 
-
-const COLORS = ["#45C65A", "#E58A00", "#EC5555"];
-
-const chooseRandomColor = () => COLORS[Math.floor(Math.random() * COLORS.length)];
+const GITHUB_LINK = "https://github.com/gnmyt/myspeed";
 
 export const Home = () => {
+    const navigate = useNavigate();
+
     return (
         <div className="home-page">
+            <section className="hero">
+                <div className="hero-grid">
+                    <div className="hero-content">
+                        <h1 className="hero-title">
+                            Know Your <span className="highlight">True<svg className="underline-scribble" viewBox="0 0 120 20" preserveAspectRatio="none"><path d="M3,10 Q30,3 60,10 T117,8" /></svg></span> Speed
+                        </h1>
+                        <p className="hero-description">
+                            Monitor your internet connection 24/7 with automated speed tests.
+                            Track download, upload, and ping over time - self-hosted and open source.
+                        </p>
 
-            <div className="info-area">
-                <img src={Logo} alt="Logo" draggable={false}/>
-                <div className="title-area">
-                    <h1>MySpeed</h1>
-                    <h2>Speedtest automation made simple</h2>
+                        <div className="hero-actions">
+                            <Button
+                                text="Get Started"
+                                icon={faArrowRight}
+                                color="primary"
+                                size="lg"
+                                onClick={() => navigate("/install")}
+                            />
+                            <Button
+                                text="GitHub"
+                                icon={faGithub}
+                                color="primary"
+                                variant="outline"
+                                size="lg"
+                                onClick={() => window.open(GITHUB_LINK, "_blank")}
+                            />
+                        </div>
+                    </div>
+
+                    <div className="hero-visual">
+                        <div className="interface-preview">
+                            <img src={InterfaceImage} alt="MySpeed Interface" draggable={false}/>
+                        </div>
+                    </div>
                 </div>
-            </div>
+            </section>
 
-            {Array(5).fill(0).map((_, index) => (
-                <div className="flying-icons" key={index}>
-                    <FontAwesomeIcon icon={faArrowDown} style={{color: chooseRandomColor(),animationDelay: `${index * 0.5}s`}}/>
-                    <FontAwesomeIcon icon={faArrowUp} style={{color: chooseRandomColor(),animationDelay: `${index * 0.5}s`}}/>
-                </div>
-            ))}
-
-            <div className="interface-image">
-                <img src={InterfaceImage} alt="Interface" draggable={false}/>
-            </div>
-
-            <Features />
-
-            <FeatureGrid />
-
-            <GetStarted />
-
-            <Footer />
+            <Features/>
+            <FeatureGrid/>
+            <GetStarted/>
+            <Footer/>
         </div>
     )
 }
\ No newline at end of file
diff --git a/web/src/pages/Home/components/FeatureGrid/FeatureGrid.jsx b/web/src/pages/Home/components/FeatureGrid/FeatureGrid.jsx
index eff93ebd..79f74bda 100644
--- a/web/src/pages/Home/components/FeatureGrid/FeatureGrid.jsx
+++ b/web/src/pages/Home/components/FeatureGrid/FeatureGrid.jsx
@@ -1,39 +1,67 @@
 import "./styles.sass";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faGlobe, faLayerGroup, faBell, faClock, faShieldHalved, faChartLine} from "@fortawesome/free-solid-svg-icons";
 
-import LanguageFeature from "@/common/assets/feature/language.png";
-import ViewsFeature from "@/common/assets/feature/views.png";
-import IntegrationsFeature from "@/common/assets/feature/integrations.png";
-import CronFeature from "@/common/assets/feature/cron.png";
-
-export const TRANSLATIONS_LINK = "https://crowdin.com/project/myspeed";
+const features = [
+    {
+        icon: faGlobe,
+        title: "Multilingual",
+        description: "Available in multiple languages with community translations from around the world.",
+        color: "blue"
+    },
+    {
+        icon: faLayerGroup,
+        title: "Multiple Views",
+        description: "Choose from list, graph, or compact views to visualize your speed data.",
+        color: "purple"
+    },
+    {
+        icon: faBell,
+        title: "Integrations",
+        description: "Get notified via Discord, Telegram, Pushover, webhooks and more.",
+        color: "orange"
+    },
+    {
+        icon: faClock,
+        title: "Flexible Scheduling",
+        description: "Run tests at any interval - from every 5 minutes to every 5 hours.",
+        color: "green"
+    },
+    {
+        icon: faShieldHalved,
+        title: "Privacy First",
+        description: "Self-hosted solution. Your data stays on your server, always.",
+        color: "red"
+    },
+    {
+        icon: faChartLine,
+        title: "Detailed Analytics",
+        description: "Track trends over time and export your data whenever you need.",
+        color: "cyan"
+    }
+];
 
 export const FeatureGrid = () => {
     return (
-        <div className="feature-grid-section">
-            <div className="feature-grid-row">
-                <div className="feature-box">
-                    <img src={LanguageFeature} alt="Multilingual"/>
-                    <h1>Multilingual</h1>
-                    <p>MySpeed supports English, German and <a href={TRANSLATIONS_LINK} target="_blank">more languages</a>.</p>
-                </div>
-                <div className="feature-box">
-                    <img src={ViewsFeature} alt="Multiple Views"/>
-                    <h1>Multiple Views</h1>
-                    <p>Choose between different views to display your data.</p>
-                </div>
+        <section className="feature-grid-section">
+            <div className="feature-grid-header">
+                <span className="feature-grid-label">Why MySpeed?</span>
+                <h2>Everything you need to monitor your connection</h2>
+                <p>Powerful features packed into a lightweight, self-hosted application.</p>
             </div>
-            <div className="feature-grid-row">
-                <div className="feature-box">
-                    <img src={IntegrationsFeature} alt="Extensible"/>
-                    <h1>Extensible</h1>
-                    <p>You can integrate MySpeed in WhatsApp, Discord, HealthChecks or your own Webhook</p>
-                </div>
-                <div className="feature-box">
-                    <img src={CronFeature} alt="Cron Jobs"/>
-                    <h1>Choose your time</h1>
-                    <p>Whether you want to check every 5 minutes or every 5 hours, MySpeed has you covered.</p>
-                </div>
+            <div className="feature-grid">
+                {features.map((feature, index) => (
+                    <div key={index} className={`feature-card feature-card--${feature.color}`}>
+                        <div className="feature-icon">
+                            <FontAwesomeIcon icon={feature.icon}/>
+                        </div>
+                        <div className="feature-text">
+                            <h3>{feature.title}</h3>
+                            <p>{feature.description}</p>
+                        </div>
+                    </div>
+                ))}
             </div>
-        </div>
+        </section>
     )
 }
\ No newline at end of file
diff --git a/web/src/pages/Home/components/FeatureGrid/styles.sass b/web/src/pages/Home/components/FeatureGrid/styles.sass
index 9e90a97f..06175a23 100644
--- a/web/src/pages/Home/components/FeatureGrid/styles.sass
+++ b/web/src/pages/Home/components/FeatureGrid/styles.sass
@@ -1,36 +1,154 @@
 @use "@/common/styles/colors" as *
 
 .feature-grid-section
-  margin-top: 5rem
+  padding: 4rem 6rem 6rem
+  max-width: 1200px
+  margin: 0 auto
 
-.feature-grid-row
+.feature-grid-header
+  text-align: center
+  margin-bottom: 3rem
+  
+  h2
+    font-size: 2.25rem
+    font-weight: 700
+    color: $text
+    margin-bottom: 0.75rem
+    letter-spacing: -0.02em
+    
+  p
+    font-size: 1.0625rem
+    color: $text-secondary
+    max-width: 500px
+    margin: 0 auto
+
+.feature-grid-label
+  display: inline-block
+  font-size: 0.8125rem
+  font-weight: 600
+  color: $primary
+  text-transform: uppercase
+  letter-spacing: 0.08em
+  margin-bottom: 0.75rem
+
+.feature-grid
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  gap: 1.25rem
+
+.feature-card
+  position: relative
+  display: flex
+  flex-direction: column
+  gap: 1rem
+  padding: 1.75rem
+  background: $background-lighter
+  border: 1px solid $border-color
+  border-radius: 16px
+  transition: all 0.3s ease
+  overflow: hidden
+
+  &:hover
+    transform: translateY(-4px)
+    border-color: $border-hover
+    box-shadow: $shadow-md
+
+// Color variants
+.feature-card--blue
+  .feature-icon
+    background: rgba($blue, 0.1)
+    svg
+      color: $blue-light
+
+.feature-card--purple
+  .feature-icon
+    background: rgba($purple, 0.1)
+    svg
+      color: lighten($purple, 10%)
+
+.feature-card--orange
+  .feature-icon
+    background: rgba($orange, 0.1)
+    svg
+      color: lighten($orange, 10%)
+
+.feature-card--green
+  .feature-icon
+    background: rgba($primary, 0.1)
+    svg
+      color: $primary-light
+
+.feature-card--red
+  .feature-icon
+    background: rgba($red, 0.1)
+    svg
+      color: $red-light
+
+.feature-card--cyan
+  $cyan: #06b6d4
+  $cyan-light: #22d3ee
+  .feature-icon
+    background: rgba($cyan, 0.1)
+    svg
+      color: $cyan-light
+
+.feature-icon
+  width: 3rem
+  height: 3rem
   display: flex
   align-items: center
   justify-content: center
+  border-radius: 12px
+  transition: transform 0.3s ease
 
-  .feature-box
-    display: flex
-    flex-direction: column
-    align-items: center
-    width: 35rem
+  svg
+    font-size: 1.25rem
+    transition: transform 0.3s ease
 
-    img
-      width: 20rem
+.feature-card:hover .feature-icon svg
+  transform: scale(1.1)
 
-    h1
-      margin-top: 2rem
-      font-size: 2rem
+.feature-text
+  display: flex
+  flex-direction: column
+  gap: 0.5rem
 
+.feature-card h3
+  font-size: 1.0625rem
+  font-weight: 600
+  color: $text
+
+.feature-card p
+  font-size: 0.875rem
+  color: $text-secondary
+  line-height: 1.6
+
+@media (max-width: 1100px)
+  .feature-grid-section
+    padding: 3rem 2rem 4rem
+
+  .feature-grid
+    grid-template-columns: repeat(2, 1fr)
+    
+  .feature-grid-header h2
+    font-size: 1.875rem
+
+@media (max-width: 640px)
+  .feature-grid-section
+    padding: 2rem 1.5rem 3rem
+
+  .feature-grid
+    grid-template-columns: 1fr
+    gap: 1rem
+
+  .feature-card
+    padding: 1.5rem
+
+  .feature-grid-header
+    margin-bottom: 2rem
+    
+    h2
+      font-size: 1.5rem
+      
     p
-      margin-top: 1rem
-      font-size: 1.3rem
-      width: 25rem
-      text-align: center
-
-    a
-      color: $primary
-
-@media screen and (max-width: 800px)
-  .feature-grid-row
-    flex-direction: column
-    gap: 2rem
\ No newline at end of file
+      font-size: 1rem
\ No newline at end of file
diff --git a/web/src/pages/Home/components/Features/Features.jsx b/web/src/pages/Home/components/Features/Features.jsx
index 8ca9d6f7..46997c37 100644
--- a/web/src/pages/Home/components/Features/Features.jsx
+++ b/web/src/pages/Home/components/Features/Features.jsx
@@ -2,28 +2,36 @@ import "./styles.sass";
 import Screenshot1 from "@/common/assets/sc1.png";
 import Screenshot2 from "@/common/assets/sc2.png";
 
-
 export const Features = () => {
     return (
-        <div className="feature-area">
-            <div className="feature">
-                <img src={Screenshot1} alt="Screenshot - What is MySpeed?"/>
+        <section className="features-section">
+            <div className="feature-block">
                 <div className="feature-content">
-                    <h1>What is MySpeed?</h1>
-                    <p>MySpeed is a Software that helps you keeping track of your network speed. <br/><br/>It
-                        automatically creates speedtests based on your schedule and displays them in a list.</p>
+                    <span className="feature-label">Automated Testing</span>
+                    <h3>Set it and forget it</h3>
+                    <p>
+                        Configure your test schedule once and let MySpeed handle the rest. 
+                        Tests run automatically in the background with support for multiple providers.
+                    </p>
+                </div>
+                <div className="feature-image">
+                    <img src={Screenshot1} alt="Automated speed testing interface"/>
                 </div>
             </div>
 
-            <div className="feature feature-reverse">
-                <img src={Screenshot2} alt="Screenshot - Detailed statistics"/>
+            <div className="feature-block feature-reverse">
                 <div className="feature-content">
-                    <h1>Detailed statistics</h1>
-                    <p>MySpeed provides you with detailed statistics about your network speed. <br/><br/>This
-                        includes data about your download and upload speed, as well as your ping.</p>
+                    <span className="feature-label">Analytics</span>
+                    <h3>Track your performance</h3>
+                    <p>
+                        View your speed history with clear visualizations. Identify patterns, 
+                        detect issues, and keep your ISP accountable.
+                    </p>
+                </div>
+                <div className="feature-image">
+                    <img src={Screenshot2} alt="Speed test analytics dashboard"/>
                 </div>
             </div>
-
-        </div>
+        </section>
     )
 }
\ No newline at end of file
diff --git a/web/src/pages/Home/components/Features/styles.sass b/web/src/pages/Home/components/Features/styles.sass
index 05c75721..0b88f840 100644
--- a/web/src/pages/Home/components/Features/styles.sass
+++ b/web/src/pages/Home/components/Features/styles.sass
@@ -1,65 +1,82 @@
 @use "@/common/styles/colors" as *
 
-.feature-area
-  margin-top: 10vh
-  padding-left: 5rem
-  padding-right: 5rem
+.features-section
+  padding: 6rem
+  max-width: 1200px
+  margin: 0 auto
   display: flex
   flex-direction: column
-  gap: 3rem
+  gap: 8rem
 
-  .feature
-    display: flex
-    gap: 2rem
-    justify-content: space-around
-    align-items: center
+.feature-block
+  display: grid
+  grid-template-columns: 1fr 1.3fr
+  gap: 4rem
+  align-items: center
 
-    img
-      width: 40rem
-      border-radius: 1rem
-      transition: 0.3s
+.feature-block.feature-reverse
+  grid-template-columns: 1.3fr 1fr
 
-    img:hover
-      transform: scale(1.02) translateY(-0.5rem)
-      box-shadow: 0 0 1rem 0.5rem $background-lighter
+  .feature-content
+    order: 2
 
-    h1
-      font-size: 3rem
-      margin-bottom: 1rem
+  .feature-image
+    order: 1
 
-    p
-      font-size: 1.6rem
-      margin-bottom: 2rem
-      max-width: 40rem
+.feature-content
+  display: flex
+  flex-direction: column
+  gap: 1rem
 
-  .feature-reverse
-    flex-direction: row-reverse
+.feature-label
+  font-size: 0.8125rem
+  font-weight: 600
+  color: $primary
+  text-transform: uppercase
+  letter-spacing: 0.08em
 
-@media screen and (max-width: 1200px)
-  .feature-area .feature img
-    width: 30rem
-  .feature-area .feature h1
-    font-size: 2.5rem
-  .feature-area .feature p
-    font-size: 1.3rem
-    max-width: 30rem
+.feature-content h3
+  font-size: 2rem
+  font-weight: 700
+  line-height: 1.2
 
-@media screen and (max-width: 1000px)
-  .feature-area .feature img
-    width: 25rem
-  .feature-area .feature h1
-    font-size: 2rem
-  .feature-area .feature p
-    font-size: 1rem
-    max-width: 30rem
+.feature-content p
+  font-size: 1.0625rem
+  line-height: 1.7
+  color: $text-secondary
 
-@media screen and (max-width: 700px)
-  .feature-area .feature
+.feature-image
+  position: relative
+
+  img
     width: 100%
-  .feature-area .feature img
-    width: 70vw
-  .feature-area .feature
-    flex-direction: column
-  .feature-area .feature p
-    margin-bottom: 1rem
-    max-width: 100%
\ No newline at end of file
+    border-radius: 12px
+    border: 1px solid $border-color
+
+@media (max-width: 900px)
+  .features-section
+    padding: 4rem 2rem
+    gap: 5rem
+
+  .feature-block,
+  .feature-block.feature-reverse
+    grid-template-columns: 1fr
+    gap: 2rem
+
+    .feature-content,
+    .feature-image
+      order: unset
+
+  .feature-content h3
+    font-size: 1.75rem
+
+@media (max-width: 640px)
+  .features-section
+    padding: 3rem 1.5rem
+    gap: 4rem
+
+  .feature-content h3
+    font-size: 1.5rem
+
+  .feature-content p
+    font-size: 1rem
\ No newline at end of file
diff --git a/web/src/pages/Home/components/Footer/Footer.jsx b/web/src/pages/Home/components/Footer/Footer.jsx
index 7725cd83..3b8272d2 100644
--- a/web/src/pages/Home/components/Footer/Footer.jsx
+++ b/web/src/pages/Home/components/Footer/Footer.jsx
@@ -1,15 +1,33 @@
 import {Link} from "react-router-dom";
 import "./styles.sass";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faGithub} from "@fortawesome/free-brands-svg-icons";
+import {DOCUMENTATION_BASE} from "@/common/utils/constants";
+
+const GITHUB_LINK = "https://github.com/gnmyt/myspeed";
 
 export const Footer = () => {
     return (
-        <div className="footer">
-            <p>© {new Date().getFullYear()} Mathias Wagner</p>
+        <footer className="footer">
+            <div className="footer-content">
+                <div className="footer-left">
+                    <p>© {new Date().getFullYear()} Mathias Wagner</p>
+                </div>
+                
+                <div className="footer-links">
+                    <Link to="/install">Install</Link>
+                    <Link to="/tutorials">Tutorials</Link>
+                    <a href={DOCUMENTATION_BASE} target="_blank" rel="noopener noreferrer">Docs</a>
+                    <Link to="/imprint">Imprint</Link>
+                    <Link to="/privacy">Privacy</Link>
+                </div>
 
-            <div className="legal-nav">
-                <Link to="/imprint">Imprint</Link>
-                <Link to="/privacy">Privacy Policy (GER)</Link>
+                <div className="footer-right">
+                    <a href={GITHUB_LINK} target="_blank" rel="noopener noreferrer" className="github-link">
+                        <FontAwesomeIcon icon={faGithub}/>
+                    </a>
+                </div>
             </div>
-        </div>
+        </footer>
     )
 }
\ No newline at end of file
diff --git a/web/src/pages/Home/components/Footer/styles.sass b/web/src/pages/Home/components/Footer/styles.sass
index 117f68ff..30c6f2ed 100644
--- a/web/src/pages/Home/components/Footer/styles.sass
+++ b/web/src/pages/Home/components/Footer/styles.sass
@@ -1,27 +1,70 @@
 @use "@/common/styles/colors" as *
 
 .footer
-  background-color: $background-lighter
-  margin: 0 5rem 0 5rem
-  padding: 0 5rem
+  margin-top: 4rem
+  padding: 2rem 6rem
+  border-top: 1px solid $border-color
+
+.footer-content
   display: flex
   align-items: center
   justify-content: space-between
 
-.legal-nav
+.footer-left p
+  font-size: 0.875rem
+  color: $text-muted
+
+.footer-links
   display: flex
-  gap: 1rem
+  align-items: center
+  gap: 2rem
 
   a
+    font-size: 0.875rem
+    color: $text-secondary
+    transition: color 0.2s
+
+    &:hover
+      color: $text
+
+.footer-right .github-link
+  display: flex
+  align-items: center
+  justify-content: center
+  width: 2.25rem
+  height: 2.25rem
+  background: $background-lighter
+  border: 1px solid $border-color
+  border-radius: 8px
+  color: $text-secondary
+  transition: all 0.2s
+
+  &:hover
     color: $text
-    text-decoration: none
+    border-color: $border-hover
 
-  a:hover
-    text-decoration: underline
+  svg
+    font-size: 1rem
 
-
-@media screen and (max-width: 710px)
+@media (max-width: 900px)
   .footer
-    margin: 0 0 0 1rem
-    padding: 0 2rem
-    flex-direction: column
\ No newline at end of file
+    padding: 2rem
+
+  .footer-content
+    flex-direction: column
+    gap: 1.5rem
+
+  .footer-links
+    flex-wrap: wrap
+    justify-content: center
+    gap: 1.5rem
+
+@media (max-width: 640px)
+  .footer
+    padding: 1.5rem
+
+  .footer-links
+    gap: 1rem
+
+    a
+      font-size: 0.8125rem
\ No newline at end of file
diff --git a/web/src/pages/Home/components/GetStarted/GetStarted.jsx b/web/src/pages/Home/components/GetStarted/GetStarted.jsx
index 28688c58..e0e4a003 100644
--- a/web/src/pages/Home/components/GetStarted/GetStarted.jsx
+++ b/web/src/pages/Home/components/GetStarted/GetStarted.jsx
@@ -1,23 +1,32 @@
 import "./styles.sass";
-
-import DocsLogo from "@/common/assets/logo_docs.png";
 import Button from "@/common/components/Button/index.js";
-import {faPlay} from "@fortawesome/free-solid-svg-icons";
-import {Link, useNavigate} from "react-router-dom";
-import {DOCUMENTATION_BASE} from "@/main.jsx";
+import {faArrowRight} from "@fortawesome/free-solid-svg-icons";
+import {faGithub} from "@fortawesome/free-brands-svg-icons";
+import {useNavigate} from "react-router-dom";
+
+const GITHUB_LINK = "https://github.com/gnmyt/myspeed";
 
 export const GetStarted = () => {
     const navigate = useNavigate();
+    
     return (
-        <div className="get-started">
-            <div className="start-info">
-                <h1>Convinced?</h1>
-                <h2>Great! Press the button below to get started.</h2>
-                <Button text="Get Started" icon={faPlay} color="blue"
-                        onClick={() => navigate("/install")} />
+        <section className="cta-section">
+            <h2>Ready to get started?</h2>
+            <div className="cta-actions">
+                <Button 
+                    text="Install" 
+                    icon={faArrowRight} 
+                    color="primary"
+                    onClick={() => navigate("/install")} 
+                />
+                <Button 
+                    text="GitHub" 
+                    icon={faGithub} 
+                    color="primary"
+                    variant="outline"
+                    onClick={() => window.open(GITHUB_LINK, "_blank")} 
+                />
             </div>
-
-            <Link to={DOCUMENTATION_BASE}><img src={DocsLogo} alt="Docs Logo" /></Link>
-        </div>
+        </section>
     );
 }
\ No newline at end of file
diff --git a/web/src/pages/Home/components/GetStarted/styles.sass b/web/src/pages/Home/components/GetStarted/styles.sass
index 8ce2fc0c..4607205d 100644
--- a/web/src/pages/Home/components/GetStarted/styles.sass
+++ b/web/src/pages/Home/components/GetStarted/styles.sass
@@ -1,44 +1,37 @@
 @use "@/common/styles/colors" as *
 
-.get-started
+.cta-section
   display: flex
   align-items: center
   justify-content: space-between
-  background-color: $background-lighter
-  border-top-left-radius: 5rem
-  border-top-right-radius: 5rem
-  padding: 2rem 5rem 1rem 5rem
-  margin: 2rem 5rem 0 5rem
-
-
-  h1
-    font-size: 2.4rem
-    margin: 0
+  margin: 4rem 6rem 0
+  padding: 2rem 2.5rem
+  background: $background-lighter
+  border: 1px solid $border-color
+  border-radius: 12px
 
   h2
-    font-size: 1.5rem
-    margin: 1rem 0
+    font-size: 1.25rem
+    font-weight: 600
 
-  .btn
-    h1
-      font-size: 1.3rem
+.cta-actions
+  display: flex
+  gap: 0.75rem
 
-  img
-    width: 5rem
-
-@media screen and (max-width: 710px)
-  .get-started
-    padding: 2rem 2rem 1rem 2rem
-    margin: 2rem 0 0 1rem
-
-    h1
-     font-size: 2rem
+@media (max-width: 700px)
+  .cta-section
+    flex-direction: column
+    gap: 1.5rem
+    margin: 2rem 1.5rem 0
+    padding: 2rem
+    text-align: center
 
     h2
-      font-size: 1.3rem
+      font-size: 1.125rem
 
-    h1
-      font-size: 1.1rem
+  .cta-actions
+    width: 100%
 
-    img
-      display: none
\ No newline at end of file
+    .btn
+      flex: 1
+      justify-content: center
\ No newline at end of file
diff --git a/web/src/pages/Home/styles.sass b/web/src/pages/Home/styles.sass
index fb2372d1..b88c91af 100644
--- a/web/src/pages/Home/styles.sass
+++ b/web/src/pages/Home/styles.sass
@@ -1,131 +1,127 @@
 @use "@/common/styles/colors" as *
 
 .home-page
-  display: flex
-  flex-direction: column
-  height: 100vh
-  position: relative
   overflow-x: hidden
 
-  .info-area
-    user-select: none
-    pointer-events: none
-    display: flex
-    align-items: center
-    gap: 1rem
-    padding: 5rem
+.hero
+  min-height: 100vh
+  display: flex
+  align-items: center
+  padding: 120px 6rem 80px
+  position: relative
 
-    img
-      width: 5.5rem
-      height: 5.5rem
+.hero-grid
+  display: grid
+  grid-template-columns: 1fr 1.2fr
+  gap: 4rem
+  align-items: center
+  width: 100%
+  max-width: 1400px
+  margin: 0 auto
 
-    h1
-      font-size: 2.5rem
+.hero-content
+  display: flex
+  flex-direction: column
+  gap: 1.5rem
 
-    h2
-      font-size: 1.3rem
+.hero-title
+  font-size: 3.5rem
+  font-weight: 800
+  color: $text
+  line-height: 1.1
+  letter-spacing: -0.02em
 
-    h1, h2
-      margin: 0
+  .highlight
+    position: relative
+    display: inline-block
+    color: $primary
+    
+  .underline-scribble
+    position: absolute
+    bottom: -4px
+    left: -5%
+    width: 110%
+    height: 16px
+    overflow: visible
+    
+    path
+      fill: none
+      stroke: $primary
+      stroke-width: 3
+      stroke-linecap: round
+      stroke-dasharray: 200
+      stroke-dashoffset: 200
+      animation: draw-underline 1s ease-out 0.5s forwards
 
+@keyframes draw-underline
+  to
+    stroke-dashoffset: 0
 
-.interface-image
-  margin-left: 30vw
-  margin-top: 16vh
-  animation: fadeIn 1s ease-in-out
-  z-index: 0
+.hero-description
+  font-size: 1.125rem
+  color: $text-secondary
+  line-height: 1.7
+  max-width: 480px
 
-  img
-    width: 61vw
-    transform: rotate(12deg)
-    pointer-events: none
-    user-select: none
-
-.flying-icons
-  position: absolute
-  transform: rotate(-25deg)
+.hero-actions
   display: flex
   gap: 1rem
-  animation: spawn 1s ease-in-out
+  margin-top: 0.5rem
 
-  svg
-    font-size: 4vh
-    animation: flyAround 16s linear infinite
+.hero-visual
+  position: relative
+  display: flex
+  justify-content: center
+  align-items: center
+  perspective: 1000px
 
-.flying-icons:nth-child(2)
-  top: 70%
-  left: 10%
+.interface-preview
+  position: relative
+  z-index: 2
+  width: 100%
+  max-width: 650px
+  transform: rotateY(-8deg) rotateX(4deg)
+  transform-style: preserve-3d
 
-.flying-icons:nth-child(3)
-  top: 30%
-  right: 10%
+  img
+    width: 100%
+    border-radius: 12px
 
-.flying-icons:nth-child(4)
-  bottom: 50%
-  left: 12%
+@media (max-width: 1100px)
+  .hero
+    padding: 120px 3rem 60px
 
-.flying-icons:nth-child(5)
-  top: 25%
-  right: 25%
+  .hero-grid
+    grid-template-columns: 1fr
+    gap: 3rem
+    text-align: center
 
-.flying-icons:nth-child(6)
-  bottom: 30%
-  left: 20%
+  .hero-content
+    align-items: center
 
+  .hero-description
+    max-width: 600px
 
-@keyframes fadeIn
-  from
-    transform: translateY(10rem)
-    opacity: 0
-  to
-    transform: translateY(0)
-    opacity: 1
+  .hero-title
+    font-size: 3rem
 
-@keyframes spawn
-  from
-    transform: rotate(-25deg) scale(0.2)
-    opacity: 0
-  to
-    transform: rotate(-25deg)
-    opacity: 1
+  .hero-actions
+    justify-content: center
 
-@keyframes flyAround
-  0%, 100%
-    transform: translate(0, 0)
+@media (max-width: 640px)
+  .hero
+    padding: 100px 1.5rem 40px
 
-  25%
-    transform: translate(0.5rem, -0.5rem)
+  .hero-title
+    font-size: 2.25rem
 
-  50%
-    transform: translate(-0.5rem, 0.5rem)
+  .hero-description
+    font-size: 1rem
 
-  75%
-    transform: translate(-0.5rem, -0.5rem)
+  .hero-actions
+    flex-direction: column
+    width: 100%
 
-
-@media screen and (max-width: 1800px)
-  .flying-icons:nth-child(6)
-    display: none
-
-@media screen and (max-width: 1650px)
-  .flying-icons:nth-child(4)
-    display: none
-  .flying-icons:nth-child(2)
-    display: none
-
-@media screen and (max-width: 1250px)
-  .interface-image
-    margin-left: 20vw
-    margin-top: 10vh
-
-@media screen and (max-width: 1000px)
-  .flying-icons:nth-child(3)
-    display: none
-  .flying-icons:nth-child(5)
-    right: 10rem
-    top: 20rem
-
-@media screen and (max-width: 500px)
-  .flying-icons:nth-child(5)
-    right: 5rem
-    top: 15rem
\ No newline at end of file
+    .btn
+      width: 100%
+      justify-content: center
diff --git a/web/src/pages/Imprint/Imprint.jsx b/web/src/pages/Imprint/Imprint.jsx
index d0a00b39..28d7b31f 100644
--- a/web/src/pages/Imprint/Imprint.jsx
+++ b/web/src/pages/Imprint/Imprint.jsx
@@ -2,14 +2,25 @@ import "./styles.sass";
 
 export const Imprint = () => {
     return (
-        <div className="imprint-page">
-            <h1>Imprint</h1>
-            <h2>Information in accordance with § 5 DDG</h2>
+        <div className="legal-page">
+            <div className="legal-container">
+                <h1>Imprint</h1>
+                
+                <section className="legal-section">
+                    <h2>Information in accordance with § 5 DDG</h2>
+                    <address>
+                        Mathias Wagner<br/>
+                        c/o COCENTER<br/>
+                        Koppoldstr. 1<br/>
+                        86551 Aichach
+                    </address>
+                </section>
 
-            <p>Mathias Wagner<br/>c/o COCENTER<br/>Koppoldstr. 1<br/>86551 Aichach</p>
-
-            <h2>Contact</h2>
-            <p>E-Mail: mathias@gnm.dev</p>
+                <section className="legal-section">
+                    <h2>Contact</h2>
+                    <p>Email: <a href="mailto:mathias@gnm.dev">mathias@gnm.dev</a></p>
+                </section>
+            </div>
         </div>
     )
 }
\ No newline at end of file
diff --git a/web/src/pages/Imprint/styles.sass b/web/src/pages/Imprint/styles.sass
index 07959b6e..46f77969 100644
--- a/web/src/pages/Imprint/styles.sass
+++ b/web/src/pages/Imprint/styles.sass
@@ -1,15 +1,50 @@
 @use "@/common/styles/colors" as *
 
-.imprint-page
-  padding: 5rem
+.legal-page
+  min-height: 100vh
+  padding: 8rem 4rem 4rem
+  
+.legal-container
+  max-width: 800px
+  margin: 0 auto
 
-  h1
-    font-size: 3rem
-    margin: 0 0 2rem
-    color: $primary
+.legal-page h1
+  font-size: 2.5rem
+  font-weight: 700
+  margin-bottom: 2rem
+  padding-bottom: 1rem
+  border-bottom: 1px solid $border-color
 
+.legal-section
+  margin-bottom: 2.5rem
+  
   h2
-    font-size: 1.6rem
+    font-size: 1.25rem
+    font-weight: 600
+    color: $text
     margin-bottom: 1rem
+    
+  address
+    font-style: normal
+    font-size: 1rem
+    line-height: 1.8
+    color: $text-secondary
+    
+  p
+    font-size: 1rem
+    line-height: 1.8
+    color: $text-secondary
+    
+  a
     color: $primary
-    filter: brightness(0.9)
\ No newline at end of file
+    transition: opacity 0.2s
+    
+    &:hover
+      opacity: 0.8
+
+@media (max-width: 640px)
+  .legal-page
+    padding: 6rem 1.5rem 3rem
+    
+  .legal-page h1
+    font-size: 2rem
\ No newline at end of file
diff --git a/web/src/pages/Install/Install.jsx b/web/src/pages/Install/Install.jsx
index 61cbc149..d778f1f5 100644
--- a/web/src/pages/Install/Install.jsx
+++ b/web/src/pages/Install/Install.jsx
@@ -1,73 +1,84 @@
 import "./styles.sass";
-
-import BackgroundImage from "@/common/assets/background.png";
-import Button from "@/common/components/Button/index.js";
 import {faDocker, faLinux, faWindows} from "@fortawesome/free-brands-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {
-    faBook,
-    faBug,
-    faCheck,
-    faCopy,
-    faDownload,
-    faQuestionCircle,
-    faTerminal
-} from "@fortawesome/free-solid-svg-icons";
+import {faCheck, faCopy} from "@fortawesome/free-solid-svg-icons";
 import {useState} from "react";
-import {DOCUMENTATION_BASE} from "@/main.jsx";
+import {DOCUMENTATION_BASE} from "@/common/utils/constants";
 
 export const INSTALL_CMD = "bash <(curl -sSL https://install.myspeed.dev)";
 
 export const Install = () => {
-
     const [isCopied, setIsCopied] = useState(false);
 
     const copyToClipboard = () => {
         navigator.clipboard.writeText(INSTALL_CMD);
         setIsCopied(true);
-
-        setTimeout(() => setIsCopied(false), 1000);
+        setTimeout(() => setIsCopied(false), 2000);
     }
 
     const openDocs = (path) => window.open(DOCUMENTATION_BASE + path, "_blank");
 
     return (
         <div className="install-page">
-            <img className="bg-image" src={BackgroundImage} alt="Background" draggable={false}/>
-
             <div className="install-container">
-
-                <div className="install-info">
-
-                    <div className="install-header">
-                        <FontAwesomeIcon icon={faDownload}/>
-                        <h1>Downloads</h1>
-                    </div>
-
-                    <Button text="Download for Windows" onClick={() => openDocs("/setup/windows")} color="green" icon={faWindows}/>
-
-                    <Button text="Download for Linux" onClick={() => openDocs("/setup/linux")} color="green" icon={faLinux}/>
-
-                    <div className="install-header">
-                        <FontAwesomeIcon icon={faBook}/>
-                        <h1>Documentation</h1>
-                    </div>
-
-                    <Button text="Instructions for Docker" onClick={() => openDocs("/setup/linux/#installation-with-docker")}
-                            color="green" icon={faDocker}/>
-                    <Button text="Questions & Answers" onClick={() => openDocs("/faq")} color="blue" icon={faQuestionCircle}/>
-
-                    <Button text="Troubleshooting" onClick={() => openDocs("/troubleshooting")} color="red" icon={faBug}/>
-
+                <div className="install-header">
+                    <h1>Install MySpeed</h1>
+                    <p>Get up and running in minutes with our simple installation process</p>
                 </div>
 
-                <div className="install-cmd" onClick={copyToClipboard}>
-                    <FontAwesomeIcon icon={faTerminal}/>
-                    <code>{INSTALL_CMD}</code>
-                    <FontAwesomeIcon icon={isCopied ? faCheck : faCopy} className="copy-icon"/>
+                <div className="quick-install">
+                    <div className="quick-install-header">
+                        <h2>Quick Install</h2>
+                        <p>Run this single command on any Linux system</p>
+                    </div>
+                    <div className="command-row" onClick={copyToClipboard}>
+                        <code>{INSTALL_CMD}</code>
+                        <button className={`copy-btn ${isCopied ? "copied" : ""}`}>
+                            <FontAwesomeIcon icon={isCopied ? faCheck : faCopy}/>
+                            <span>{isCopied ? "Copied!" : "Copy"}</span>
+                        </button>
+                    </div>
                 </div>
 
+                <div className="divider">
+                    <span>or choose your platform</span>
+                </div>
+
+                <div className="install-options">
+                    <button className="install-option" onClick={() => openDocs("/setup/linux")}>
+                        <FontAwesomeIcon icon={faLinux}/>
+                        <div className="option-text">
+                            <strong>Linux</strong>
+                            <span>Manual installation guide</span>
+                        </div>
+                    </button>
+
+                    <button className="install-option" onClick={() => openDocs("/setup/windows")}>
+                        <FontAwesomeIcon icon={faWindows}/>
+                        <div className="option-text">
+                            <strong>Windows</strong>
+                            <span>Windows setup instructions</span>
+                        </div>
+                    </button>
+
+                    <button className="install-option" onClick={() => openDocs("/setup/linux/#installation-with-docker")}>
+                        <FontAwesomeIcon icon={faDocker}/>
+                        <div className="option-text">
+                            <strong>Docker</strong>
+                            <span>Container deployment</span>
+                        </div>
+                    </button>
+                </div>
+
+                <div className="help-section">
+                    <p>Need help getting started?</p>
+                    <div className="help-links">
+                        <a onClick={() => openDocs("/faq")}>FAQ</a>
+                        <a onClick={() => openDocs("/troubleshooting")}>Troubleshooting</a>
+                        <a onClick={() => openDocs("/")}>Documentation</a>
+                    </div>
+                </div>
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/web/src/pages/Install/styles.sass b/web/src/pages/Install/styles.sass
index 96a9891e..7101a5ec 100644
--- a/web/src/pages/Install/styles.sass
+++ b/web/src/pages/Install/styles.sass
@@ -1,104 +1,186 @@
 @use "@/common/styles/colors" as *
 
 .install-page
-  padding: 5rem
-  user-select: none
-
-  .bg-image
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    object-fit: cover
-    z-index: 2
-    -webkit-user-drag: none
+  min-height: 100vh
+  display: flex
+  align-items: center
+  justify-content: center
+  padding: 120px 24px 80px
 
 .install-container
-  z-index: 5
-  height: 80vh
-  display: flex
-  align-items: center
-  justify-content: space-around
-  animation: bounceIn 0.5s ease-in-out
-
-.install-info
-  display: flex
-  gap: 1rem
-  flex-direction: column
-
-  .btn
-    width: fit-content
-    font-size: 8pt
-    z-index: 5
+  width: 100%
+  max-width: 700px
 
 .install-header
-  display: flex
-  align-items: center
-  margin-top: 1rem
-  margin-bottom: 1rem
-
-  svg
-    font-size: 30pt
-    margin-right: 1rem
+  text-align: center
+  margin-bottom: 40px
 
   h1
-    font-size: 34pt
-    font-weight: 900
-    margin: 0
+    font-size: 2.5rem
+    font-weight: 700
+    margin-bottom: 8px
 
-.install-cmd
-  z-index: 5
-  cursor: pointer
-  align-items: center
+  p
+    font-size: 1.125rem
+    color: $text-secondary
+
+.quick-install
+  background: $background-lighter
+  border: 1px solid $border-color
+  border-radius: 12px
+  padding: 24px
+  margin-bottom: 32px
+
+.quick-install-header
+  text-align: center
+  margin-bottom: 16px
+
+  h2
+    font-size: 1.25rem
+    font-weight: 600
+    margin-bottom: 4px
+
+  p
+    font-size: 0.875rem
+    color: $text-secondary
+
+.command-row
   display: flex
-  gap: 1rem
-  font-size: 14pt
-  background-color: rgba($primary, 0.1)
-  color: $primary
-  border: 2px solid $primary
-  box-shadow: 0 0 15px 0 rgba($primary, 0.5)
-  padding: 1rem 1.5rem
-  border-radius: 0.8rem
+  align-items: center
+  background: $background
+  border: 1px solid $border-color
+  border-radius: 8px
+  padding: 14px 16px
+  cursor: pointer
+  transition: border-color 0.2s ease
 
-  .copy-icon
-    position: relative
-    font-size: 18pt
-    top: -2px
-    right: -2px
+  &:hover
+    border-color: $primary
 
+  code
+    flex: 1
+    font-family: "JetBrains Mono", "Fira Code", monospace
+    font-size: 0.875rem
+    color: $text
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
 
-@keyframes bounceIn
-    0%
-        transform: scale(0.1)
-        opacity: 0
-    60%
-        transform: scale(1.1)
-        opacity: 1
-    80%
-        transform: scale(0.9)
-    100%
-        transform: scale(1)
+.copy-btn
+  display: flex
+  align-items: center
+  gap: 6px
+  background: none
+  border: none
+  color: $text-muted
+  font-size: 0.8125rem
+  font-weight: 500
+  padding: 6px 12px
+  cursor: pointer
+  transition: color 0.2s ease
+  border-radius: 6px
 
-@media screen and (max-width: 1250px)
-  .install-container
+  &:hover
+    color: $primary
+    background: rgba($primary, 0.1)
+
+  &.copied
+    color: $primary
+
+.divider
+  display: flex
+  align-items: center
+  gap: 16px
+  margin-bottom: 24px
+
+  &::before, &::after
+    content: ""
+    flex: 1
+    height: 1px
+    background: $border-color
+
+  span
+    font-size: 0.8125rem
+    color: $text-muted
+
+.install-options
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  gap: 12px
+  margin-bottom: 40px
+
+.install-option
+  display: flex
+  align-items: center
+  gap: 14px
+  padding: 18px 20px
+  background: $background-lighter
+  border: 1px solid $border-color
+  border-radius: 10px
+  cursor: pointer
+  transition: all 0.2s ease
+  text-align: left
+
+  &:hover
+    border-color: $border-hover
+    background: lighten($background-lighter, 2%)
+
+  > svg
+    font-size: 1.75rem
+    color: $text-secondary
+    transition: color 0.2s ease
+
+  .option-text
+    display: flex
     flex-direction: column
+    gap: 2px
 
-  .install-info
-    align-items: center
-    text-align: center
+    strong
+      font-size: 0.9375rem
+      font-weight: 600
+      color: $text
 
-  .install-header
-    margin-top: 0.5rem
-    margin-bottom: 0.5rem
+    span
+      font-size: 0.75rem
+      color: $text-muted
 
-    svg
-      font-size: 20pt
-    h1
-      font-size: 24pt
+.help-section
+  text-align: center
+  padding-top: 24px
+  border-top: 1px solid $border-color
 
-@media screen and (max-width: 500px)
-  .install-cmd
-    display: none
-  .install-container
-    height: 55vh
\ No newline at end of file
+  > p
+    font-size: 0.875rem
+    color: $text-muted
+    margin-bottom: 12px
+
+.help-links
+  display: flex
+  justify-content: center
+  gap: 24px
+
+  a
+    color: $text-secondary
+    font-size: 0.875rem
+    font-weight: 500
+    cursor: pointer
+    transition: color 0.2s ease
+
+    &:hover
+      color: $primary
+
+@media (max-width: 640px)
+  .install-header h1
+    font-size: 2rem
+
+  .install-options
+    grid-template-columns: 1fr
+
+  .command-row
+    flex-direction: column
+    gap: 12px
+
+    code
+      width: 100%
+      text-align: center
+      font-size: 0.75rem
diff --git a/web/src/pages/NotFound/NotFound.jsx b/web/src/pages/NotFound/NotFound.jsx
index 536a6dc7..04fd3524 100644
--- a/web/src/pages/NotFound/NotFound.jsx
+++ b/web/src/pages/NotFound/NotFound.jsx
@@ -1,29 +1,53 @@
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import "./styles.sass";
-import NotFoundImage from "@/common/assets/not_found.svg";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
+import {faHome, faArrowLeft} from "@fortawesome/free-solid-svg-icons";
+import {useNavigate} from "react-router-dom";
+import Button from "@/common/components/Button";
 
 export const NotFound = () => {
+    const navigate = useNavigate();
+    const [countdown, setCountdown] = useState(5);
 
     useEffect(() => {
-        const timeout = setTimeout(() => {
-            window.location.href = "/";
-        }, 2000);
+        const timer = setInterval(() => {
+            setCountdown((prev) => {
+                if (prev <= 1) {
+                    clearInterval(timer);
+                    navigate("/");
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
 
-        return () => clearTimeout(timeout);
-    }, []);
+        return () => clearInterval(timer);
+    }, [navigate]);
 
     return (
-        <div className="page-404">
-            <div className="info-area">
-                <div className="logo-container">
-                    <FontAwesomeIcon icon={faQuestionCircle} size="3x" />
-                    <h1>Page not found</h1>
+        <div className="not-found-page">
+            <div className="not-found-content">
+                <div className="error-code">404</div>
+                <h1>Page Not Found</h1>
+                <p>The page you're looking for doesn't exist or has been moved.</p>
+                <p className="redirect-notice">Redirecting to home in {countdown} seconds...</p>
+                
+                <div className="not-found-actions">
+                    <Button 
+                        text="Go Home" 
+                        icon={faHome} 
+                        color="primary"
+                        onClick={() => navigate("/")}
+                    />
+                    <Button 
+                        text="Go Back" 
+                        icon={faArrowLeft} 
+                        color="primary"
+                        variant="outline"
+                        onClick={() => navigate(-1)}
+                    />
                 </div>
-                <p>You will be redirected to the home page in a few seconds.</p>
             </div>
-            <img src={NotFoundImage} alt="Interface" />
         </div>
     );
 }
\ No newline at end of file
diff --git a/web/src/pages/NotFound/styles.sass b/web/src/pages/NotFound/styles.sass
index a4779252..0c2e5452 100644
--- a/web/src/pages/NotFound/styles.sass
+++ b/web/src/pages/NotFound/styles.sass
@@ -1,24 +1,56 @@
-.page-404
+@use "@/common/styles/colors" as *
+
+.not-found-page
+  min-height: 100vh
   display: flex
-  height: 100vh
-  justify-content: space-around
   align-items: center
-  flex-wrap: wrap
+  justify-content: center
+  padding: 2rem
 
-  .logo-container
-    display: flex
-    align-items: center
+.not-found-content
+  text-align: center
+  max-width: 500px
 
-  h1
-    margin: 1rem
+.error-code
+  font-size: 8rem
+  font-weight: 800
+  line-height: 1
+  background: linear-gradient(135deg, $primary 0%, $blue 100%)
+  -webkit-background-clip: text
+  -webkit-text-fill-color: transparent
+  background-clip: text
+  margin-bottom: 1rem
 
-  img
-    width: 30rem
+.not-found-content h1
+  font-size: 2rem
+  font-weight: 700
+  margin-bottom: 0.75rem
 
-@media screen and (max-width: 768px)
-  .page-404
-    padding: 2rem
-    gap: 2rem
+.not-found-content p
+  font-size: 1.0625rem
+  color: $text-secondary
+  margin-bottom: 0.5rem
 
-  .page-404 img
-    width: 60vw
\ No newline at end of file
+.redirect-notice
+  font-size: 0.9375rem
+  color: $text-muted
+  margin-bottom: 2rem
+
+.not-found-actions
+  display: flex
+  gap: 1rem
+  justify-content: center
+
+@media (max-width: 640px)
+  .error-code
+    font-size: 5rem
+    
+  .not-found-content h1
+    font-size: 1.5rem
+    
+  .not-found-actions
+    flex-direction: column
+    
+    .btn
+      width: 100%
+      justify-content: center
\ No newline at end of file
diff --git a/web/src/pages/Privacy/Privacy.jsx b/web/src/pages/Privacy/Privacy.jsx
index c74dbbfb..78cda2cf 100644
--- a/web/src/pages/Privacy/Privacy.jsx
+++ b/web/src/pages/Privacy/Privacy.jsx
@@ -2,213 +2,254 @@ import "./styles.sass";
 
 export const Privacy = () => {
     return (
-        <div className="privacy-page">
+        <div className="legal-page privacy-page">
+            <div className="legal-container">
                 <h1>Datenschutzerklärung</h1>
 
-                <h2>1. Datenschutz auf einen Blick</h2>
-                <h3>Allgemeine Hinweise</h3> <p>Die folgenden Hinweise geben einen einfachen &Uuml;berblick
-                dar&uuml;ber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen.
-                Personenbezogene Daten sind alle Daten, mit denen Sie pers&ouml;nlich identifiziert werden k&ouml;nnen.
-                Ausf&uuml;hrliche Informationen zum Thema Datenschutz entnehmen Sie unserer unter diesem Text
-                aufgef&uuml;hrten Datenschutzerkl&auml;rung.</p>
-                <h3>Datenerfassung auf dieser Website</h3> <h4>Wer ist verantwortlich f&uuml;r die Datenerfassung auf
-                dieser Website?</h4> <p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber.
-                Dessen Kontaktdaten k&ouml;nnen Sie dem Abschnitt &bdquo;Hinweis zur Verantwortlichen Stelle&ldquo; in
-                dieser Datenschutzerkl&auml;rung entnehmen.</p> <h4>Wie erfassen wir Ihre Daten?</h4> <p>Ihre Daten
-                werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z.&nbsp;B. um Daten
-                handeln, die Sie in ein Kontaktformular eingeben.</p> <p>Andere Daten werden automatisch oder nach Ihrer
-                Einwilligung beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische
-                Daten (z.&nbsp;B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs). Die Erfassung dieser
-                Daten erfolgt automatisch, sobald Sie diese Website betreten.</p> <h4>Wof&uuml;r nutzen wir Ihre
-                Daten?</h4> <p>Ein Teil der Daten wird erhoben, um eine fehlerfreie Bereitstellung der Website zu
-                gew&auml;hrleisten. Andere Daten k&ouml;nnen zur Analyse Ihres Nutzerverhaltens verwendet werden.</p>
-                <h4>Welche Rechte haben Sie bez&uuml;glich Ihrer Daten?</h4> <p>Sie haben jederzeit das Recht,
-                unentgeltlich Auskunft &uuml;ber Herkunft, Empf&auml;nger und Zweck Ihrer gespeicherten
-                personenbezogenen Daten zu erhalten. Sie haben au&szlig;erdem ein Recht, die Berichtigung oder
-                L&ouml;schung dieser Daten zu verlangen. Wenn Sie eine Einwilligung zur Datenverarbeitung erteilt haben,
-                k&ouml;nnen Sie diese Einwilligung jederzeit f&uuml;r die Zukunft widerrufen. Au&szlig;erdem haben Sie
-                das Recht, unter bestimmten Umst&auml;nden die Einschr&auml;nkung der Verarbeitung Ihrer
-                personenbezogenen Daten zu verlangen. Des Weiteren steht Ihnen ein Beschwerderecht bei der
-                zust&auml;ndigen Aufsichtsbeh&ouml;rde zu.</p> <p>Hierzu sowie zu weiteren Fragen zum Thema Datenschutz
-                k&ouml;nnen Sie sich jederzeit an uns wenden.</p>
-                <h2>2. Allgemeine Hinweise und Pflicht&shy;informationen</h2>
-                <h3>Datenschutz</h3> <p>Die Betreiber dieser Seiten nehmen den Schutz Ihrer pers&ouml;nlichen Daten sehr
-                ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen
-                Datenschutzvorschriften sowie dieser Datenschutzerkl&auml;rung.</p> <p>Wenn Sie diese Website benutzen,
-                werden verschiedene personenbezogene Daten erhoben. Personenbezogene Daten sind Daten, mit denen Sie
-                pers&ouml;nlich identifiziert werden k&ouml;nnen. Die vorliegende Datenschutzerkl&auml;rung
-                erl&auml;utert, welche Daten wir erheben und wof&uuml;r wir sie nutzen. Sie erl&auml;utert auch, wie und
-                zu welchem Zweck das geschieht.</p> <p>Wir weisen darauf hin, dass die Daten&uuml;bertragung im Internet
-                (z.&nbsp;B. bei der Kommunikation per E-Mail) Sicherheitsl&uuml;cken aufweisen kann. Ein
-                l&uuml;ckenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht m&ouml;glich.</p>
-                <h3>Hinweis zur verantwortlichen Stelle</h3> <p>Die verantwortliche Stelle f&uuml;r die
-                Datenverarbeitung auf dieser Website ist:</p> <p>Mathias Wagner<br/>
-                c/o COCENTER<br/>
-                Koppoldstr. 1<br/>
-                86551 Aichach</p>
-                <p>
-                        E-Mail: mathias@gnm.dev</p>
-                <p>Verantwortliche Stelle ist die nat&uuml;rliche oder juristische Person, die allein oder gemeinsam mit
-                        anderen &uuml;ber die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten (z.&nbsp;B.
-                        Namen, E-Mail-Adressen o. &Auml;.) entscheidet.</p>
+                <section className="legal-section">
+                    <h2>1. Datenschutz auf einen Blick</h2>
+                    <h3>Allgemeine Hinweise</h3>
+                    <p>Die folgenden Hinweise geben einen einfachen &Uuml;berblick dar&uuml;ber, was mit Ihren
+                        personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind
+                        alle Daten, mit denen Sie pers&ouml;nlich identifiziert werden k&ouml;nnen. Ausf&uuml;hrliche
+                        Informationen zum Thema Datenschutz entnehmen Sie unserer unter diesem Text aufgef&uuml;hrten
+                        Datenschutzerkl&auml;rung.</p>
+                    <h3>Datenerfassung auf dieser Website</h3>
+                    <h4>Wer ist verantwortlich f&uuml;r die Datenerfassung auf dieser Website?</h4>
+                    <p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten
+                        k&ouml;nnen Sie dem Abschnitt &bdquo;Hinweis zur Verantwortlichen Stelle&ldquo; in dieser
+                        Datenschutzerkl&auml;rung entnehmen.</p>
+                    <h4>Wie erfassen wir Ihre Daten?</h4>
+                    <p>Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich
+                        z.&nbsp;B. um Daten handeln, die Sie in ein Kontaktformular eingeben.</p>
+                    <p>Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere
+                        IT-Systeme erfasst. Das sind vor allem technische Daten (z.&nbsp;B. Internetbrowser,
+                        Betriebssystem oder Uhrzeit des Seitenaufrufs). Die Erfassung dieser Daten erfolgt automatisch,
+                        sobald Sie diese Website betreten.</p>
+                    <h4>Wof&uuml;r nutzen wir Ihre Daten?</h4>
+                    <p>Ein Teil der Daten wird erhoben, um eine fehlerfreie Bereitstellung der Website zu
+                        gew&auml;hrleisten. Andere Daten k&ouml;nnen zur Analyse Ihres Nutzerverhaltens verwendet
+                        werden.</p>
+                    <h4>Welche Rechte haben Sie bez&uuml;glich Ihrer Daten?</h4>
+                    <p>Sie haben jederzeit das Recht, unentgeltlich Auskunft &uuml;ber Herkunft, Empf&auml;nger und
+                        Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben au&szlig;erdem ein
+                        Recht, die Berichtigung oder L&ouml;schung dieser Daten zu verlangen. Wenn Sie eine Einwilligung
+                        zur Datenverarbeitung erteilt haben, k&ouml;nnen Sie diese Einwilligung jederzeit f&uuml;r die
+                        Zukunft widerrufen. Au&szlig;erdem haben Sie das Recht, unter bestimmten Umst&auml;nden die
+                        Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen. Des Weiteren
+                        steht Ihnen ein Beschwerderecht bei der zust&auml;ndigen Aufsichtsbeh&ouml;rde zu.</p>
+                    <p>Hierzu sowie zu weiteren Fragen zum Thema Datenschutz k&ouml;nnen Sie sich jederzeit an uns
+                        wenden.</p>
+                </section>
 
-                <h3>Speicherdauer</h3> <p>Soweit innerhalb dieser Datenschutzerkl&auml;rung keine speziellere
-                Speicherdauer genannt wurde, verbleiben Ihre personenbezogenen Daten bei uns, bis der Zweck f&uuml;r die
-                Datenverarbeitung entf&auml;llt. Wenn Sie ein berechtigtes L&ouml;schersuchen geltend machen oder eine
-                Einwilligung zur Datenverarbeitung widerrufen, werden Ihre Daten gel&ouml;scht, sofern wir keine anderen
-                rechtlich zul&auml;ssigen Gr&uuml;nde f&uuml;r die Speicherung Ihrer personenbezogenen Daten haben
-                (z.&nbsp;B. steuer- oder handelsrechtliche Aufbewahrungsfristen); im letztgenannten Fall erfolgt die
-                L&ouml;schung nach Fortfall dieser Gr&uuml;nde.</p>
-                <h3>Allgemeine Hinweise zu den Rechtsgrundlagen der Datenverarbeitung auf dieser Website</h3> <p>Sofern
-                Sie in die Datenverarbeitung eingewilligt haben, verarbeiten wir Ihre personenbezogenen Daten auf
-                Grundlage von Art. 6 Abs. 1 lit. a DSGVO bzw. Art. 9 Abs. 2 lit. a DSGVO, sofern besondere
-                Datenkategorien nach Art. 9 Abs. 1 DSGVO verarbeitet werden. Im Falle einer ausdr&uuml;cklichen
-                Einwilligung in die &Uuml;bertragung personenbezogener Daten in Drittstaaten erfolgt die
-                Datenverarbeitung au&szlig;erdem auf Grundlage von Art. 49 Abs. 1 lit. a DSGVO. Sofern Sie in die
-                Speicherung von Cookies oder in den Zugriff auf Informationen in Ihr Endger&auml;t (z.&nbsp;B. via
-                Device-Fingerprinting) eingewilligt haben, erfolgt die Datenverarbeitung zus&auml;tzlich auf Grundlage
-                von &sect; 25 Abs. 1 TTDSG. Die Einwilligung ist jederzeit widerrufbar. Sind Ihre Daten zur
-                Vertragserf&uuml;llung oder zur Durchf&uuml;hrung vorvertraglicher Ma&szlig;nahmen erforderlich,
-                verarbeiten wir Ihre Daten auf Grundlage des Art. 6 Abs. 1 lit. b DSGVO. Des Weiteren verarbeiten wir
-                Ihre Daten, sofern diese zur Erf&uuml;llung einer rechtlichen Verpflichtung erforderlich sind auf
-                Grundlage von Art. 6 Abs. 1 lit. c DSGVO. Die Datenverarbeitung kann ferner auf Grundlage unseres
-                berechtigten Interesses nach Art. 6 Abs. 1 lit. f DSGVO erfolgen. &Uuml;ber die jeweils im Einzelfall
-                einschl&auml;gigen Rechtsgrundlagen wird in den folgenden Abs&auml;tzen dieser Datenschutzerkl&auml;rung
-                informiert.</p>
-                <h3>Empfänger von personenbezogenen Daten</h3> <p>Im Rahmen unserer Gesch&auml;ftst&auml;tigkeit
-                arbeiten wir mit verschiedenen externen Stellen zusammen. Dabei ist teilweise auch
-                eine &Uuml;bermittlung von personenbezogenen Daten an diese externen Stellen erforderlich. Wir geben
-                personenbezogene Daten nur dann an externe Stellen weiter, wenn dies im Rahmen einer
-                Vertragserf&uuml;llung erforderlich ist, wenn wir gesetzlich hierzu verpflichtet sind (z.&nbsp;B.
-                Weitergabe von Daten an Steuerbeh&ouml;rden), wenn wir ein berechtigtes Interesse nach Art. 6 Abs. 1
-                lit. f DSGVO an der Weitergabe haben oder wenn eine sonstige Rechtsgrundlage die Datenweitergabe
-                erlaubt. Beim Einsatz von Auftragsverarbeitern geben wir personenbezogene Daten unserer Kunden nur auf
-                Grundlage eines g&uuml;ltigen Vertrags &uuml;ber Auftragsverarbeitung weiter. Im Falle einer gemeinsamen
-                Verarbeitung wird ein Vertrag &uuml;ber gemeinsame Verarbeitung geschlossen.</p>
-
-                <h3>Widerruf Ihrer Einwilligung zur Datenverarbeitung</h3> <p>Viele Datenverarbeitungsvorg&auml;nge sind
-                nur mit Ihrer ausdr&uuml;cklichen Einwilligung m&ouml;glich. Sie k&ouml;nnen eine bereits erteilte
-                Einwilligung jederzeit widerrufen. Die Rechtm&auml;&szlig;igkeit der bis zum Widerruf erfolgten
-                Datenverarbeitung bleibt vom Widerruf unber&uuml;hrt.</p>
-                <h3>Widerspruchsrecht gegen die Datenerhebung in besonderen F&auml;llen sowie gegen Direktwerbung (Art.
-                        21 DSGVO)</h3> <p>WENN DIE DATENVERARBEITUNG AUF GRUNDLAGE VON ART. 6 ABS. 1 LIT. E ODER F DSGVO
-                ERFOLGT, HABEN SIE JEDERZEIT DAS RECHT, AUS GR&Uuml;NDEN, DIE SICH AUS IHRER BESONDEREN SITUATION
-                ERGEBEN, GEGEN DIE VERARBEITUNG IHRER PERSONENBEZOGENEN DATEN WIDERSPRUCH EINZULEGEN; DIES GILT AUCH
-                F&Uuml;R EIN AUF DIESE BESTIMMUNGEN GEST&Uuml;TZTES PROFILING. DIE JEWEILIGE RECHTSGRUNDLAGE, AUF DENEN
-                EINE VERARBEITUNG BERUHT, ENTNEHMEN SIE DIESER DATENSCHUTZERKL&Auml;RUNG. WENN SIE WIDERSPRUCH EINLEGEN,
-                WERDEN WIR IHRE BETROFFENEN PERSONENBEZOGENEN DATEN NICHT MEHR VERARBEITEN, ES SEI DENN, WIR K&Ouml;NNEN
-                ZWINGENDE SCHUTZW&Uuml;RDIGE GR&Uuml;NDE F&Uuml;R DIE VERARBEITUNG NACHWEISEN, DIE IHRE INTERESSEN,
-                RECHTE UND FREIHEITEN &Uuml;BERWIEGEN ODER DIE VERARBEITUNG DIENT DER GELTENDMACHUNG, AUS&Uuml;BUNG ODER
-                VERTEIDIGUNG VON RECHTSANSPR&Uuml;CHEN (WIDERSPRUCH NACH ART. 21 ABS. 1 DSGVO).</p> <p>WERDEN IHRE
-                PERSONENBEZOGENEN DATEN VERARBEITET, UM DIREKTWERBUNG ZU BETREIBEN, SO HABEN SIE DAS RECHT, JEDERZEIT
-                WIDERSPRUCH GEGEN DIE VERARBEITUNG SIE BETREFFENDER PERSONENBEZOGENER DATEN ZUM ZWECKE DERARTIGER
-                WERBUNG EINZULEGEN; DIES GILT AUCH F&Uuml;R DAS PROFILING, SOWEIT ES MIT SOLCHER DIREKTWERBUNG IN
-                VERBINDUNG STEHT. WENN SIE WIDERSPRECHEN, WERDEN IHRE PERSONENBEZOGENEN DATEN ANSCHLIESSEND NICHT MEHR
-                ZUM ZWECKE DER DIREKTWERBUNG VERWENDET (WIDERSPRUCH NACH ART. 21 ABS. 2 DSGVO).</p>
-                <h3>Beschwerde&shy;recht bei der zust&auml;ndigen Aufsichts&shy;beh&ouml;rde</h3> <p>Im Falle von
-                Verst&ouml;&szlig;en gegen die DSGVO steht den Betroffenen ein Beschwerderecht bei einer
-                Aufsichtsbeh&ouml;rde, insbesondere in dem Mitgliedstaat ihres gew&ouml;hnlichen Aufenthalts, ihres
-                Arbeitsplatzes oder des Orts des mutma&szlig;lichen Versto&szlig;es zu. Das Beschwerderecht besteht
-                unbeschadet anderweitiger verwaltungsrechtlicher oder gerichtlicher Rechtsbehelfe.</p>
-                <h3>Recht auf Daten&shy;&uuml;bertrag&shy;barkeit</h3> <p>Sie haben das Recht, Daten, die wir auf
-                Grundlage Ihrer Einwilligung oder in Erf&uuml;llung eines Vertrags automatisiert verarbeiten, an sich
-                oder an einen Dritten in einem g&auml;ngigen, maschinenlesbaren Format aush&auml;ndigen zu lassen.
-                Sofern Sie die direkte &Uuml;bertragung der Daten an einen anderen Verantwortlichen verlangen, erfolgt
-                dies nur, soweit es technisch machbar ist.</p>
-                <h3>Auskunft, Berichtigung und L&ouml;schung</h3> <p>Sie haben im Rahmen der geltenden gesetzlichen
-                Bestimmungen jederzeit das Recht auf unentgeltliche Auskunft &uuml;ber Ihre gespeicherten
-                personenbezogenen Daten, deren Herkunft und Empf&auml;nger und den Zweck der Datenverarbeitung und ggf.
-                ein Recht auf Berichtigung oder L&ouml;schung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema
-                personenbezogene Daten k&ouml;nnen Sie sich jederzeit an uns wenden.</p>
-                <h3>Recht auf Einschr&auml;nkung der Verarbeitung</h3> <p>Sie haben das Recht, die Einschr&auml;nkung
-                der Verarbeitung Ihrer personenbezogenen Daten zu verlangen. Hierzu k&ouml;nnen Sie sich jederzeit an
-                uns wenden. Das Recht auf Einschr&auml;nkung der Verarbeitung besteht in folgenden F&auml;llen:</p>
-                <ul>
+                <section className="legal-section">
+                    <h2>2. Allgemeine Hinweise und Pflicht&shy;informationen</h2>
+                    <h3>Datenschutz</h3>
+                    <p>Die Betreiber dieser Seiten nehmen den Schutz Ihrer pers&ouml;nlichen Daten sehr ernst. Wir
+                        behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen
+                        Datenschutzvorschriften sowie dieser Datenschutzerkl&auml;rung.</p>
+                    <p>Wenn Sie diese Website benutzen, werden verschiedene personenbezogene Daten erhoben.
+                        Personenbezogene Daten sind Daten, mit denen Sie pers&ouml;nlich identifiziert werden
+                        k&ouml;nnen. Die vorliegende Datenschutzerkl&auml;rung erl&auml;utert, welche Daten wir erheben
+                        und wof&uuml;r wir sie nutzen. Sie erl&auml;utert auch, wie und zu welchem Zweck das
+                        geschieht.</p>
+                    <p>Wir weisen darauf hin, dass die Daten&uuml;bertragung im Internet (z.&nbsp;B. bei der
+                        Kommunikation per E-Mail) Sicherheitsl&uuml;cken aufweisen kann. Ein l&uuml;ckenloser Schutz der
+                        Daten vor dem Zugriff durch Dritte ist nicht m&ouml;glich.</p>
+                    <h3>Hinweis zur verantwortlichen Stelle</h3>
+                    <p>Die verantwortliche Stelle f&uuml;r die Datenverarbeitung auf dieser Website ist:</p>
+                    <p>Mathias Wagner<br/>
+                        c/o COCENTER<br/>
+                        Koppoldstr. 1<br/>
+                        86551 Aichach</p>
+                    <p>E-Mail: mathias@gnm.dev</p>
+                    <p>Verantwortliche Stelle ist die nat&uuml;rliche oder juristische Person, die allein oder gemeinsam
+                        mit anderen &uuml;ber die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten
+                        (z.&nbsp;B. Namen, E-Mail-Adressen o. &Auml;.) entscheidet.</p>
+                    <h3>Speicherdauer</h3>
+                    <p>Soweit innerhalb dieser Datenschutzerkl&auml;rung keine speziellere Speicherdauer genannt wurde,
+                        verbleiben Ihre personenbezogenen Daten bei uns, bis der Zweck f&uuml;r die Datenverarbeitung
+                        entf&auml;llt. Wenn Sie ein berechtigtes L&ouml;schersuchen geltend machen oder eine
+                        Einwilligung zur Datenverarbeitung widerrufen, werden Ihre Daten gel&ouml;scht, sofern wir keine
+                        anderen rechtlich zul&auml;ssigen Gr&uuml;nde f&uuml;r die Speicherung Ihrer personenbezogenen
+                        Daten haben (z.&nbsp;B. steuer- oder handelsrechtliche Aufbewahrungsfristen); im letztgenannten
+                        Fall erfolgt die L&ouml;schung nach Fortfall dieser Gr&uuml;nde.</p>
+                    <h3>Allgemeine Hinweise zu den Rechtsgrundlagen der Datenverarbeitung auf dieser Website</h3>
+                    <p>Sofern Sie in die Datenverarbeitung eingewilligt haben, verarbeiten wir Ihre personenbezogenen
+                        Daten auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO bzw. Art. 9 Abs. 2 lit. a DSGVO, sofern
+                        besondere Datenkategorien nach Art. 9 Abs. 1 DSGVO verarbeitet werden. Im Falle einer
+                        ausdr&uuml;cklichen Einwilligung in die &Uuml;bertragung personenbezogener Daten in Drittstaaten
+                        erfolgt die Datenverarbeitung au&szlig;erdem auf Grundlage von Art. 49 Abs. 1 lit. a DSGVO.
+                        Sofern Sie in die Speicherung von Cookies oder in den Zugriff auf Informationen in Ihr
+                        Endger&auml;t (z.&nbsp;B. via Device-Fingerprinting) eingewilligt haben, erfolgt die
+                        Datenverarbeitung zus&auml;tzlich auf Grundlage von &sect; 25 Abs. 1 TTDSG. Die Einwilligung ist
+                        jederzeit widerrufbar. Sind Ihre Daten zur Vertragserf&uuml;llung oder zur Durchf&uuml;hrung
+                        vorvertraglicher Ma&szlig;nahmen erforderlich, verarbeiten wir Ihre Daten auf Grundlage des Art.
+                        6 Abs. 1 lit. b DSGVO. Des Weiteren verarbeiten wir Ihre Daten, sofern diese zur Erf&uuml;llung
+                        einer rechtlichen Verpflichtung erforderlich sind auf Grundlage von Art. 6 Abs. 1 lit. c DSGVO.
+                        Die Datenverarbeitung kann ferner auf Grundlage unseres berechtigten Interesses nach Art. 6 Abs.
+                        1 lit. f DSGVO erfolgen. &Uuml;ber die jeweils im Einzelfall einschl&auml;gigen Rechtsgrundlagen
+                        wird in den folgenden Abs&auml;tzen dieser Datenschutzerkl&auml;rung informiert.</p>
+                    <h3>Empfänger von personenbezogenen Daten</h3>
+                    <p>Im Rahmen unserer Gesch&auml;ftst&auml;tigkeit arbeiten wir mit verschiedenen externen Stellen
+                        zusammen. Dabei ist teilweise auch eine &Uuml;bermittlung von personenbezogenen Daten an diese
+                        externen Stellen erforderlich. Wir geben personenbezogene Daten nur dann an externe Stellen
+                        weiter, wenn dies im Rahmen einer Vertragserf&uuml;llung erforderlich ist, wenn wir gesetzlich
+                        hierzu verpflichtet sind (z.&nbsp;B. Weitergabe von Daten an Steuerbeh&ouml;rden), wenn wir ein
+                        berechtigtes Interesse nach Art. 6 Abs. 1 lit. f DSGVO an der Weitergabe haben oder wenn eine
+                        sonstige Rechtsgrundlage die Datenweitergabe erlaubt. Beim Einsatz von Auftragsverarbeitern
+                        geben wir personenbezogene Daten unserer Kunden nur auf Grundlage eines g&uuml;ltigen
+                        Vertrags &uuml;ber Auftragsverarbeitung weiter. Im Falle einer gemeinsamen Verarbeitung wird ein
+                        Vertrag &uuml;ber gemeinsame Verarbeitung geschlossen.</p>
+                    <h3>Widerruf Ihrer Einwilligung zur Datenverarbeitung</h3>
+                    <p>Viele Datenverarbeitungsvorg&auml;nge sind nur mit Ihrer ausdr&uuml;cklichen Einwilligung
+                        m&ouml;glich. Sie k&ouml;nnen eine bereits erteilte Einwilligung jederzeit widerrufen. Die
+                        Rechtm&auml;&szlig;igkeit der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf
+                        unber&uuml;hrt.</p>
+                    <h3>Widerspruchsrecht gegen die Datenerhebung in besonderen F&auml;llen sowie gegen Direktwerbung
+                        (Art. 21 DSGVO)</h3>
+                    <p>WENN DIE DATENVERARBEITUNG AUF GRUNDLAGE VON ART. 6 ABS. 1 LIT. E ODER F DSGVO ERFOLGT, HABEN SIE
+                        JEDERZEIT DAS RECHT, AUS GR&Uuml;NDEN, DIE SICH AUS IHRER BESONDEREN SITUATION ERGEBEN, GEGEN
+                        DIE VERARBEITUNG IHRER PERSONENBEZOGENEN DATEN WIDERSPRUCH EINZULEGEN; DIES GILT AUCH F&Uuml;R
+                        EIN AUF DIESE BESTIMMUNGEN GEST&Uuml;TZTES PROFILING. DIE JEWEILIGE RECHTSGRUNDLAGE, AUF DENEN
+                        EINE VERARBEITUNG BERUHT, ENTNEHMEN SIE DIESER DATENSCHUTZERKL&Auml;RUNG. WENN SIE WIDERSPRUCH
+                        EINLEGEN, WERDEN WIR IHRE BETROFFENEN PERSONENBEZOGENEN DATEN NICHT MEHR VERARBEITEN, ES SEI
+                        DENN, WIR K&Ouml;NNEN ZWINGENDE SCHUTZW&Uuml;RDIGE GR&Uuml;NDE F&Uuml;R DIE VERARBEITUNG
+                        NACHWEISEN, DIE IHRE INTERESSEN, RECHTE UND FREIHEITEN &Uuml;BERWIEGEN ODER DIE VERARBEITUNG
+                        DIENT DER GELTENDMACHUNG, AUS&Uuml;BUNG ODER VERTEIDIGUNG VON RECHTSANSPR&Uuml;CHEN (WIDERSPRUCH
+                        NACH ART. 21 ABS. 1 DSGVO).</p>
+                    <p>WERDEN IHRE PERSONENBEZOGENEN DATEN VERARBEITET, UM DIREKTWERBUNG ZU BETREIBEN, SO HABEN SIE DAS
+                        RECHT, JEDERZEIT WIDERSPRUCH GEGEN DIE VERARBEITUNG SIE BETREFFENDER PERSONENBEZOGENER DATEN ZUM
+                        ZWECKE DERARTIGER WERBUNG EINZULEGEN; DIES GILT AUCH F&Uuml;R DAS PROFILING, SOWEIT ES MIT
+                        SOLCHER DIREKTWERBUNG IN VERBINDUNG STEHT. WENN SIE WIDERSPRECHEN, WERDEN IHRE PERSONENBEZOGENEN
+                        DATEN ANSCHLIESSEND NICHT MEHR ZUM ZWECKE DER DIREKTWERBUNG VERWENDET (WIDERSPRUCH NACH ART. 21
+                        ABS. 2 DSGVO).</p>
+                    <h3>Beschwerde&shy;recht bei der zust&auml;ndigen Aufsichts&shy;beh&ouml;rde</h3>
+                    <p>Im Falle von Verst&ouml;&szlig;en gegen die DSGVO steht den Betroffenen ein Beschwerderecht bei
+                        einer Aufsichtsbeh&ouml;rde, insbesondere in dem Mitgliedstaat ihres gew&ouml;hnlichen
+                        Aufenthalts, ihres Arbeitsplatzes oder des Orts des mutma&szlig;lichen Versto&szlig;es zu. Das
+                        Beschwerderecht besteht unbeschadet anderweitiger verwaltungsrechtlicher oder gerichtlicher
+                        Rechtsbehelfe.</p>
+                    <h3>Recht auf Daten&shy;&uuml;bertrag&shy;barkeit</h3>
+                    <p>Sie haben das Recht, Daten, die wir auf Grundlage Ihrer Einwilligung oder in Erf&uuml;llung eines
+                        Vertrags automatisiert verarbeiten, an sich oder an einen Dritten in einem g&auml;ngigen,
+                        maschinenlesbaren Format aush&auml;ndigen zu lassen. Sofern Sie die direkte &Uuml;bertragung der
+                        Daten an einen anderen Verantwortlichen verlangen, erfolgt dies nur, soweit es technisch machbar
+                        ist.</p>
+                    <h3>Auskunft, Berichtigung und L&ouml;schung</h3>
+                    <p>Sie haben im Rahmen der geltenden gesetzlichen Bestimmungen jederzeit das Recht auf
+                        unentgeltliche Auskunft &uuml;ber Ihre gespeicherten personenbezogenen Daten, deren Herkunft und
+                        Empf&auml;nger und den Zweck der Datenverarbeitung und ggf. ein Recht auf Berichtigung oder
+                        L&ouml;schung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten
+                        k&ouml;nnen Sie sich jederzeit an uns wenden.</p>
+                    <h3>Recht auf Einschr&auml;nkung der Verarbeitung</h3>
+                    <p>Sie haben das Recht, die Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten zu
+                        verlangen. Hierzu k&ouml;nnen Sie sich jederzeit an uns wenden. Das Recht auf Einschr&auml;nkung
+                        der Verarbeitung besteht in folgenden F&auml;llen:</p>
+                    <ul>
                         <li>Wenn Sie die Richtigkeit Ihrer bei uns gespeicherten personenbezogenen Daten bestreiten,
-                                ben&ouml;tigen wir in der Regel Zeit, um dies zu &uuml;berpr&uuml;fen. F&uuml;r die
-                                Dauer der Pr&uuml;fung haben Sie das Recht, die Einschr&auml;nkung der Verarbeitung
-                                Ihrer personenbezogenen Daten zu verlangen.
+                            ben&ouml;tigen wir in der Regel Zeit, um dies zu &uuml;berpr&uuml;fen. F&uuml;r die Dauer
+                            der Pr&uuml;fung haben Sie das Recht, die Einschr&auml;nkung der Verarbeitung Ihrer
+                            personenbezogenen Daten zu verlangen.
                         </li>
                         <li>Wenn die Verarbeitung Ihrer personenbezogenen Daten unrechtm&auml;&szlig;ig
-                                geschah/geschieht, k&ouml;nnen Sie statt der L&ouml;schung die Einschr&auml;nkung der
-                                Datenverarbeitung verlangen.
+                            geschah/geschieht, k&ouml;nnen Sie statt der L&ouml;schung die Einschr&auml;nkung der
+                            Datenverarbeitung verlangen.
                         </li>
                         <li>Wenn wir Ihre personenbezogenen Daten nicht mehr ben&ouml;tigen, Sie sie jedoch zur
-                                Aus&uuml;bung, Verteidigung oder Geltendmachung von Rechtsanspr&uuml;chen
-                                ben&ouml;tigen, haben Sie das Recht, statt der L&ouml;schung die Einschr&auml;nkung der
-                                Verarbeitung Ihrer personenbezogenen Daten zu verlangen.
+                            Aus&uuml;bung, Verteidigung oder Geltendmachung von Rechtsanspr&uuml;chen ben&ouml;tigen,
+                            haben Sie das Recht, statt der L&ouml;schung die Einschr&auml;nkung der Verarbeitung Ihrer
+                            personenbezogenen Daten zu verlangen.
                         </li>
                         <li>Wenn Sie einen Widerspruch nach Art. 21 Abs. 1 DSGVO eingelegt haben, muss eine
-                                Abw&auml;gung zwischen Ihren und unseren Interessen vorgenommen werden. Solange noch
-                                nicht feststeht, wessen Interessen &uuml;berwiegen, haben Sie das Recht, die
-                                Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.
+                            Abw&auml;gung zwischen Ihren und unseren Interessen vorgenommen werden. Solange noch nicht
+                            feststeht, wessen Interessen &uuml;berwiegen, haben Sie das Recht, die Einschr&auml;nkung
+                            der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.
                         </li>
-                </ul>
-                <p>Wenn Sie die Verarbeitung Ihrer personenbezogenen Daten eingeschr&auml;nkt haben, d&uuml;rfen diese
-                        Daten &ndash; von ihrer Speicherung abgesehen &ndash; nur mit Ihrer Einwilligung oder zur
+                    </ul>
+                    <p>Wenn Sie die Verarbeitung Ihrer personenbezogenen Daten eingeschr&auml;nkt haben, d&uuml;rfen
+                        diese Daten &ndash; von ihrer Speicherung abgesehen &ndash; nur mit Ihrer Einwilligung oder zur
                         Geltendmachung, Aus&uuml;bung oder Verteidigung von Rechtsanspr&uuml;chen oder zum Schutz der
                         Rechte einer anderen nat&uuml;rlichen oder juristischen Person oder aus Gr&uuml;nden eines
                         wichtigen &ouml;ffentlichen Interesses der Europ&auml;ischen Union oder eines Mitgliedstaats
                         verarbeitet werden.</p>
-                <h3>SSL- bzw. TLS-Verschl&uuml;sselung</h3> <p>Diese Seite nutzt aus Sicherheitsgr&uuml;nden und zum
-                Schutz der &Uuml;bertragung vertraulicher Inhalte, wie zum Beispiel Bestellungen oder Anfragen, die Sie
-                an uns als Seitenbetreiber senden, eine SSL- bzw. TLS-Verschl&uuml;sselung. Eine verschl&uuml;sselte
-                Verbindung erkennen Sie daran, dass die Adresszeile des Browsers
-                von &bdquo;http://&ldquo; auf &bdquo;https://&ldquo; wechselt und an dem Schloss-Symbol in Ihrer
-                Browserzeile.</p> <p>Wenn die SSL- bzw. TLS-Verschl&uuml;sselung aktiviert ist, k&ouml;nnen die Daten,
-                die Sie an uns &uuml;bermitteln, nicht von Dritten mitgelesen werden.</p>
-                <h2>3. Datenerfassung auf dieser Website</h2>
-                <h3>Cookies</h3> <p>Unsere Internetseiten verwenden so genannte &bdquo;Cookies&ldquo;. Cookies sind
-                kleine Datenpakete und richten auf Ihrem Endger&auml;t keinen Schaden an. Sie werden entweder
-                vor&uuml;bergehend f&uuml;r die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente
-                Cookies) auf Ihrem Endger&auml;t gespeichert. Session-Cookies werden nach Ende Ihres Besuchs automatisch
-                gel&ouml;scht. Permanente Cookies bleiben auf Ihrem Endger&auml;t gespeichert, bis Sie diese selbst
-                l&ouml;schen oder eine automatische L&ouml;schung durch Ihren Webbrowser erfolgt.</p> <p>Cookies
-                k&ouml;nnen von uns (First-Party-Cookies) oder von Drittunternehmen stammen (sog. Third-Party-Cookies).
-                Third-Party-Cookies erm&ouml;glichen die Einbindung bestimmter Dienstleistungen von Drittunternehmen
-                innerhalb von Webseiten (z.&nbsp;B. Cookies zur Abwicklung von Zahlungsdienstleistungen).</p> <p>Cookies
-                haben verschiedene Funktionen. Zahlreiche Cookies sind technisch notwendig, da bestimmte
-                Webseitenfunktionen ohne diese nicht funktionieren w&uuml;rden (z.&nbsp;B. die Warenkorbfunktion oder
-                die Anzeige von Videos). Andere Cookies k&ouml;nnen zur Auswertung des Nutzerverhaltens oder zu
-                Werbezwecken verwendet werden.</p> <p>Cookies, die zur Durchf&uuml;hrung des elektronischen
-                Kommunikationsvorgangs, zur Bereitstellung bestimmter, von Ihnen erw&uuml;nschter Funktionen (z.&nbsp;B.
-                f&uuml;r die Warenkorbfunktion) oder zur Optimierung der Website (z.&nbsp;B. Cookies zur Messung des
-                Webpublikums) erforderlich sind (notwendige Cookies), werden auf Grundlage von Art. 6 Abs. 1 lit. f
-                DSGVO gespeichert, sofern keine andere Rechtsgrundlage angegeben wird. Der Websitebetreiber hat ein
-                berechtigtes Interesse an der Speicherung von notwendigen Cookies zur technisch fehlerfreien und
-                optimierten Bereitstellung seiner Dienste. Sofern eine Einwilligung zur Speicherung von Cookies und
-                vergleichbaren Wiedererkennungstechnologien abgefragt wurde, erfolgt die Verarbeitung
-                ausschlie&szlig;lich auf Grundlage dieser Einwilligung (Art. 6 Abs. 1 lit. a DSGVO und &sect; 25 Abs. 1
-                TTDSG); die Einwilligung ist jederzeit widerrufbar.</p> <p>Sie k&ouml;nnen Ihren Browser so einstellen,
-                dass Sie &uuml;ber das Setzen von Cookies informiert werden und Cookies nur im Einzelfall erlauben, die
-                Annahme von Cookies f&uuml;r bestimmte F&auml;lle oder generell ausschlie&szlig;en sowie das
-                automatische L&ouml;schen der Cookies beim Schlie&szlig;en des Browsers aktivieren. Bei der
-                Deaktivierung von Cookies kann die Funktionalit&auml;t dieser Website eingeschr&auml;nkt sein.</p>
-                <p>Welche Cookies und Dienste auf dieser Website eingesetzt werden, k&ouml;nnen Sie dieser
+                    <h3>SSL- bzw. TLS-Verschl&uuml;sselung</h3>
+                    <p>Diese Seite nutzt aus Sicherheitsgr&uuml;nden und zum Schutz der &Uuml;bertragung vertraulicher
+                        Inhalte, wie zum Beispiel Bestellungen oder Anfragen, die Sie an uns als Seitenbetreiber senden,
+                        eine SSL- bzw. TLS-Verschl&uuml;sselung. Eine verschl&uuml;sselte Verbindung erkennen Sie daran,
+                        dass die Adresszeile des Browsers von &bdquo;http://&ldquo; auf &bdquo;https://&ldquo; wechselt
+                        und an dem Schloss-Symbol in Ihrer Browserzeile.</p>
+                    <p>Wenn die SSL- bzw. TLS-Verschl&uuml;sselung aktiviert ist, k&ouml;nnen die Daten, die Sie an
+                        uns &uuml;bermitteln, nicht von Dritten mitgelesen werden.</p>
+                </section>
+
+                <section className="legal-section">
+                    <h2>3. Datenerfassung auf dieser Website</h2>
+                    <h3>Cookies</h3>
+                    <p>Unsere Internetseiten verwenden so genannte &bdquo;Cookies&ldquo;. Cookies sind kleine
+                        Datenpakete und richten auf Ihrem Endger&auml;t keinen Schaden an. Sie werden entweder
+                        vor&uuml;bergehend f&uuml;r die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente
+                        Cookies) auf Ihrem Endger&auml;t gespeichert. Session-Cookies werden nach Ende Ihres Besuchs
+                        automatisch gel&ouml;scht. Permanente Cookies bleiben auf Ihrem Endger&auml;t gespeichert, bis
+                        Sie diese selbst l&ouml;schen oder eine automatische L&ouml;schung durch Ihren Webbrowser
+                        erfolgt.</p>
+                    <p>Cookies k&ouml;nnen von uns (First-Party-Cookies) oder von Drittunternehmen stammen (sog.
+                        Third-Party-Cookies). Third-Party-Cookies erm&ouml;glichen die Einbindung bestimmter
+                        Dienstleistungen von Drittunternehmen innerhalb von Webseiten (z.&nbsp;B. Cookies zur Abwicklung
+                        von Zahlungsdienstleistungen).</p>
+                    <p>Cookies haben verschiedene Funktionen. Zahlreiche Cookies sind technisch notwendig, da bestimmte
+                        Webseitenfunktionen ohne diese nicht funktionieren w&uuml;rden (z.&nbsp;B. die Warenkorbfunktion
+                        oder die Anzeige von Videos). Andere Cookies k&ouml;nnen zur Auswertung des Nutzerverhaltens
+                        oder zu Werbezwecken verwendet werden.</p>
+                    <p>Cookies, die zur Durchf&uuml;hrung des elektronischen Kommunikationsvorgangs, zur Bereitstellung
+                        bestimmter, von Ihnen erw&uuml;nschter Funktionen (z.&nbsp;B. f&uuml;r die Warenkorbfunktion)
+                        oder zur Optimierung der Website (z.&nbsp;B. Cookies zur Messung des Webpublikums) erforderlich
+                        sind (notwendige Cookies), werden auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO gespeichert,
+                        sofern keine andere Rechtsgrundlage angegeben wird. Der Websitebetreiber hat ein berechtigtes
+                        Interesse an der Speicherung von notwendigen Cookies zur technisch fehlerfreien und optimierten
+                        Bereitstellung seiner Dienste. Sofern eine Einwilligung zur Speicherung von Cookies und
+                        vergleichbaren Wiedererkennungstechnologien abgefragt wurde, erfolgt die Verarbeitung
+                        ausschlie&szlig;lich auf Grundlage dieser Einwilligung (Art. 6 Abs. 1 lit. a DSGVO und &sect; 25
+                        Abs. 1 TTDSG); die Einwilligung ist jederzeit widerrufbar.</p>
+                    <p>Sie k&ouml;nnen Ihren Browser so einstellen, dass Sie &uuml;ber das Setzen von Cookies informiert
+                        werden und Cookies nur im Einzelfall erlauben, die Annahme von Cookies f&uuml;r bestimmte
+                        F&auml;lle oder generell ausschlie&szlig;en sowie das automatische L&ouml;schen der Cookies beim
+                        Schlie&szlig;en des Browsers aktivieren. Bei der Deaktivierung von Cookies kann die
+                        Funktionalit&auml;t dieser Website eingeschr&auml;nkt sein.</p>
+                    <p>Welche Cookies und Dienste auf dieser Website eingesetzt werden, k&ouml;nnen Sie dieser
                         Datenschutzerkl&auml;rung entnehmen.</p>
-                <h3>Cloudflare</h3> <p>Wir nutzen das Content Delivery Network (CDN) von Cloudflare Germany GmbH,
-                Rosental 7, c/o Mindspace, 80331 München Deutschland (Cloudflare), um die Sicherheit und die
-                Auslieferungsgeschwindigkeit unserer Website zu erhöhen. Dies entspricht unserem berechtigten Interesse
-                (Art. 6 Abs. 1 lit. f DSGVO). Ein CDN ist ein Netzwerk aus [weltweit] verteilten Servern, das in der
-                Lage ist, optimiert Inhalte an den Websitenutzer auszuliefern. Für diesen Zweck können personenbezogene
-                Daten in Server-Logfiles von Cloudflare verarbeitet werden. Bitte vergleichen Sie die Ausführungen unter
-                „Hosting“.</p><p>Cloudflare ist Empfänger Ihrer personenbezogenen Daten und als Auftragsverarbeiter für
-                uns tätig. Die entspricht unserem berechtigten Interesse im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO,
-                selbst kein Content Delivery Network zu betreiben. </p><p>Sie haben das Recht der Verarbeitung zu
-                widersprechen. Ob der Widerspruch erfolgreich ist, ist im Rahmen einer Interessenabwägung zu
-                ermitteln. </p><p>Die Verarbeitung der unter diesem Abschnitt angegebenen Daten ist weder gesetzlich
-                noch vertraglich vorgeschrieben. Die Funktionsfähigkeit der Website ist ohne die Verarbeitung nicht
-                gewährleistet.</p><p>Ihre personenbezogenen Daten werden von Cloudflare so lange gespeichert, wie es für
-                die beschriebenen Zwecke erforderlich ist.</p><p>Weitere Informationen zu Widerspruchs- und
-                Beseitigungsmöglichkeiten gegenüber Cloudflare finden Sie unter: <a
-                    href="https://www.cloudflare.com/de-de/cloudflare-customer-dpa/" target="_blank">Cloudflare DPA</a>
-        </p><p>Cloudflare hat Compliance-Maßnahmen für internationale Datenübermittlungen umgesetzt. Diese gelten für
-                alle weltweiten Aktivitäten, bei denen Cloudflare personenbezogene Daten von natürlichen Personen in der
-                EU verarbeitet. Diese Maßnahmen basieren auf den EU-Standardvertragsklauseln (SCCs). Weitere
-                Informationen finden Sie <a href="https://www.cloudflare.com/cloudflare_customer_SCCs-German.pdf"
-                                            target="_blank">hier</a>. </p>
-                <p>Quellen: <a href="https://www.e-recht24.de" target="_blank">eRecht24</a>, <a
+                    <h3>Cloudflare</h3>
+                    <p>Wir nutzen das Content Delivery Network (CDN) von Cloudflare Germany GmbH, Rosental 7, c/o
+                        Mindspace, 80331 München Deutschland (Cloudflare), um die Sicherheit und die
+                        Auslieferungsgeschwindigkeit unserer Website zu erhöhen. Dies entspricht unserem berechtigten
+                        Interesse (Art. 6 Abs. 1 lit. f DSGVO). Ein CDN ist ein Netzwerk aus [weltweit] verteilten
+                        Servern, das in der Lage ist, optimiert Inhalte an den Websitenutzer auszuliefern. Für diesen
+                        Zweck können personenbezogene Daten in Server-Logfiles von Cloudflare verarbeitet werden. Bitte
+                        vergleichen Sie die Ausführungen unter „Hosting".</p>
+                    <p>Cloudflare ist Empfänger Ihrer personenbezogenen Daten und als Auftragsverarbeiter für uns tätig.
+                        Die entspricht unserem berechtigten Interesse im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO,
+                        selbst kein Content Delivery Network zu betreiben.</p>
+                    <p>Sie haben das Recht der Verarbeitung zu widersprechen. Ob der Widerspruch erfolgreich ist, ist im
+                        Rahmen einer Interessenabwägung zu ermitteln.</p>
+                    <p>Die Verarbeitung der unter diesem Abschnitt angegebenen Daten ist weder gesetzlich noch
+                        vertraglich vorgeschrieben. Die Funktionsfähigkeit der Website ist ohne die Verarbeitung nicht
+                        gewährleistet.</p>
+                    <p>Ihre personenbezogenen Daten werden von Cloudflare so lange gespeichert, wie es für die
+                        beschriebenen Zwecke erforderlich ist.</p>
+                    <p>Weitere Informationen zu Widerspruchs- und Beseitigungsmöglichkeiten gegenüber Cloudflare finden
+                        Sie unter: <a href="https://www.cloudflare.com/de-de/cloudflare-customer-dpa/" target="_blank">Cloudflare
+                            DPA</a></p>
+                    <p>Cloudflare hat Compliance-Maßnahmen für internationale Datenübermittlungen umgesetzt. Diese
+                        gelten für alle weltweiten Aktivitäten, bei denen Cloudflare personenbezogene Daten von
+                        natürlichen Personen in der EU verarbeitet. Diese Maßnahmen basieren auf den
+                        EU-Standardvertragsklauseln (SCCs). Weitere Informationen finden Sie <a
+                            href="https://www.cloudflare.com/cloudflare_customer_SCCs-German.pdf"
+                            target="_blank">hier</a>.</p>
+                </section>
+
+                <p className="sources">Quellen: <a href="https://www.e-recht24.de" target="_blank">eRecht24</a>, <a
                     href="https://opr.vc/docs/cdn/cloudflare/" target="_blank">privacy.docs</a></p>
+            </div>
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/web/src/pages/Privacy/styles.sass b/web/src/pages/Privacy/styles.sass
index f7e5dbee..3ada1306 100644
--- a/web/src/pages/Privacy/styles.sass
+++ b/web/src/pages/Privacy/styles.sass
@@ -1,47 +1,36 @@
 @use "@/common/styles/colors" as *
-@use "sass:color"
 
 .privacy-page
-  padding: 5rem
-
-  h1
-    font-size: 3rem
-    margin: 0 0 2rem
-    color: $primary
-
-  h2
-    font-size: 1.6rem
-    margin-bottom: 1rem
-    color: $primary
-    filter: brightness(0.9)
-
   h3
-    font-size: 1.3rem
-    margin-bottom: 1rem
-    color: $primary
-    filter: brightness(0.8)
-
+    font-size: 1.125rem
+    font-weight: 600
+    color: $text
+    margin-top: 1.5rem
+    margin-bottom: 0.75rem
+    
   h4
-    font-size: 1.1rem
-    margin-bottom: 1rem
-
-  a
-    color: $primary
-    text-decoration: underline
-    transition: color 0.2s
-
-    &:hover
-      color: color.adjust($primary, $lightness: -10%)
-
-@media screen and (max-width: 1000px)
-  .privacy-page
-    padding: 5rem 1rem
-
-    h1
-      font-size: 2rem
-    h2
-      font-size: 1.4rem
-    h3
-      font-size: 1.1rem
-    h4
-      font-size: 1rem
\ No newline at end of file
+    font-size: 1rem
+    font-weight: 600
+    color: $text-secondary
+    margin-top: 1rem
+    margin-bottom: 0.5rem
+    
+  ul
+    margin: 1rem 0
+    padding-left: 1.5rem
+    
+    li
+      color: $text-secondary
+      line-height: 1.8
+      margin-bottom: 0.5rem
+      
+  strong
+    color: $text
+    font-weight: 600
+    
+  .sources
+    margin-top: 2rem
+    padding-top: 1rem
+    border-top: 1px solid $border-color
+    font-size: 0.875rem
+    color: $text-muted
\ No newline at end of file
diff --git a/web/src/pages/TutorialSubmission/TutorialSubmission.jsx b/web/src/pages/TutorialSubmission/TutorialSubmission.jsx
index 1d950834..5cd77366 100644
--- a/web/src/pages/TutorialSubmission/TutorialSubmission.jsx
+++ b/web/src/pages/TutorialSubmission/TutorialSubmission.jsx
@@ -1,12 +1,11 @@
 import "./styles.sass";
 import Button from "@/common/components/Button/index.js";
-import {faHome, faPaperPlane, faThumbtack} from "@fortawesome/free-solid-svg-icons";
+import {faHome, faPaperPlane, faCheckCircle, faInfoCircle} from "@fortawesome/free-solid-svg-icons";
 import {useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 export const TutorialSubmission = () => {
-
     const location = useLocation();
     const navigate = useNavigate();
 
@@ -17,6 +16,7 @@ export const TutorialSubmission = () => {
     const [contentUrl, setContentUrl] = useState("");
     const [message, setMessage] = useState("");
     const [success, setSuccess] = useState(false);
+    const [agreed, setAgreed] = useState(false);
 
     const postTutorial = async (ev) => {
         ev.preventDefault();
@@ -39,78 +39,120 @@ export const TutorialSubmission = () => {
         }
     }
 
+    if (success) {
+        return (
+            <div className="submission-page">
+                <div className="success-state">
+                    <div className="success-icon">
+                        <FontAwesomeIcon icon={faCheckCircle}/>
+                    </div>
+                    <h1>Submission Received</h1>
+                    <p>Thank you for your contribution! We'll review your {type} and get back to you soon.</p>
+                    <Button 
+                        icon={faHome} 
+                        text="Back to Home" 
+                        color="primary"
+                        onClick={() => navigate("/")}
+                    />
+                </div>
+            </div>
+        );
+    }
+
     return (
-        <form className="tutorial-submission-page" onSubmit={postTutorial}>
-            {success && <div className="submission-success">
-                <h2>Thank you for your submission!</h2>
-                <Button icon={faHome} text="Back to home" color="blue"
-                        onClick={() => navigate("/")}/>
-            </div>}
-            {!success && <div className="submission-area">
-                <h1>Submit a tutorial</h1>
-
-                <input type="hidden" name="honeypot" style={{display: "none !important"}}/>
-                <div className="input-group">
-                    <label htmlFor="type">Type *</label>
-                    <select id="type" value={type} onChange={(e) => setType(e.target.value)} name="type"
-                            required>
-                        <option value="video">Video</option>
-                        <option value="blog">Blog</option>
-                    </select>
+        <div className="submission-page">
+            <div className="submission-container">
+                <div className="submission-header">
+                    <h1>Submit a Tutorial</h1>
+                    <p>Share your MySpeed content with the community</p>
                 </div>
 
-                <div className="input-group">
-                    <label htmlFor="email">Email *</label>
-                    <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)}
-                           placeholder="Your email address" name="email" required/>
+                <div className="submission-content">
+                    <form className="submission-form" onSubmit={postTutorial}>
+                        <input type="hidden" name="honeypot" style={{display: "none"}}/>
+                        
+                        <div className="form-group">
+                            <label htmlFor="type">Content Type</label>
+                            <select 
+                                id="type" 
+                                value={type} 
+                                onChange={(e) => setType(e.target.value)}
+                            >
+                                <option value="video">Video</option>
+                                <option value="blog">Blog Post</option>
+                            </select>
+                        </div>
+
+                        <div className="form-group">
+                            <label htmlFor="email">Email Address</label>
+                            <input 
+                                type="email" 
+                                id="email" 
+                                value={email} 
+                                onChange={(e) => setEmail(e.target.value)}
+                                placeholder="your@email.com"
+                                required
+                            />
+                        </div>
+
+                        <div className="form-group">
+                            <label htmlFor="content-url">Content URL</label>
+                            <input 
+                                type="url" 
+                                id="content-url" 
+                                value={contentUrl}
+                                onChange={(e) => setContentUrl(e.target.value)}
+                                placeholder={type === "blog" ? "https://example.com/your-blog-post" : "https://youtube.com/watch?v=..."}
+                                required
+                            />
+                        </div>
+
+                        <div className="form-group">
+                            <label htmlFor="message">Additional Notes <span className="optional">(optional)</span></label>
+                            <textarea 
+                                id="message" 
+                                value={message} 
+                                onChange={(e) => setMessage(e.target.value)}
+                                placeholder="Anything you'd like us to know?"
+                                rows={4}
+                            />
+                        </div>
+
+                        <div className="form-checkbox">
+                            <input 
+                                type="checkbox" 
+                                id="terms" 
+                                checked={agreed}
+                                onChange={(e) => setAgreed(e.target.checked)}
+                                required
+                            />
+                            <label htmlFor="terms">I confirm this is my original content and follows the guidelines</label>
+                        </div>
+
+                        <Button 
+                            icon={faPaperPlane} 
+                            text="Submit Tutorial" 
+                            color="primary"
+                            size="lg"
+                            disabled={!agreed}
+                        />
+                    </form>
+
+                    <aside className="guidelines">
+                        <div className="guidelines-header">
+                            <FontAwesomeIcon icon={faInfoCircle}/>
+                            <h3>Submission Guidelines</h3>
+                        </div>
+                        
+                        <ul>
+                            <li>Provide a valid email address for follow-up communication</li>
+                            <li>Content must be publicly accessible</li>
+                            <li>Must be related to MySpeed (tutorial, review, guide, etc.)</li>
+                            <li>You must be the original creator of the content</li>
+                        </ul>
+                    </aside>
                 </div>
-
-                <div className="input-group">
-                    <label htmlFor="content-url">Content URL *</label>
-                    <input type="url" id="content-url" value={contentUrl}
-                           onChange={(e) => setContentUrl(e.target.value)}
-                           placeholder={"URL to your " + (type === "blog" ? "blog post" : "video") + " (e.g. " + (type === "blog" ? "https://example.com/blog-post" : "https://youtube.com/watch?v=example") + ")"}
-                           name="content-url" required/>
-                </div>
-
-                <div className="input-group">
-                    <label htmlFor="message">Message</label>
-                    <textarea id="message" value={message} onChange={(e) => setMessage(e.target.value)}
-                              placeholder="Anything you want to tell us?" name="message"/>
-                </div>
-
-                <Button icon={faPaperPlane} text="Submit tutorial" color="green"/>
-
-            </div>}
-
-            {!success && <div className="info-area">
-                <div className="info-title">
-                    <FontAwesomeIcon icon={faThumbtack}/>
-                    <h1>Submission guidelines</h1>
-                </div>
-
-                <ul>
-                    <li>You need to provide a valid email address so we can contact you if there are any issues with
-                        your submission.
-                    </li>
-                    <li>The content URL should be a direct link to your content. In your case, this would be a link to
-                        your {type === "blog" ? " blog post" : " video"}. This link should be publicly accessible.
-                    </li>
-                    <li>
-                        Your content needs to be related to MySpeed. This can be a tutorial on how to use MySpeed, a
-                        review, or anything else that is related to MySpeed.
-                    </li>
-                    <li>
-                        You need to be the creator of the content you are submitting. If you are submitting someone
-                        else's content, please ask them to submit it.
-                    </li>
-                </ul>
-
-                <input type="checkbox" id="terms_read" required/>
-                <label htmlFor="terms_read">I have read and understood the guidelines</label>
-
-            </div>}
-
-        </form>
+            </div>
+        </div>
     );
 }
diff --git a/web/src/pages/TutorialSubmission/styles.sass b/web/src/pages/TutorialSubmission/styles.sass
index f7032ce2..91014c28 100644
--- a/web/src/pages/TutorialSubmission/styles.sass
+++ b/web/src/pages/TutorialSubmission/styles.sass
@@ -1,110 +1,190 @@
 @use "@/common/styles/colors" as *
 
-.tutorial-submission-page
-  padding: 4rem
+.submission-page
+  min-height: 100vh
+  padding: 8rem 4rem 4rem
+  display: flex
+  justify-content: center
+
+.submission-container
+  width: 100%
+  max-width: 900px
+
+.submission-header
+  text-align: center
+  margin-bottom: 3rem
+  
+  h1
+    font-size: 2.5rem
+    font-weight: 700
+    margin-bottom: 0.75rem
+    
+  p
+    font-size: 1.125rem
+    color: $text-secondary
+
+.submission-content
+  display: grid
+  grid-template-columns: 1fr 320px
+  gap: 2rem
+  align-items: start
+
+.submission-form
+  background: $background-lighter
+  border: 1px solid $border-color
+  border-radius: 16px
+  padding: 2rem
+  display: flex
+  flex-direction: column
+  gap: 1.5rem
+
+.form-group
+  display: flex
+  flex-direction: column
+  gap: 0.5rem
+  
+  label
+    font-size: 0.9375rem
+    font-weight: 500
+    color: $text
+    
+    .optional
+      font-weight: 400
+      color: $text-muted
+      
+  input, select, textarea
+    padding: 0.875rem 1rem
+    background: $background
+    border: 1px solid $border-color
+    border-radius: 8px
+    color: $text
+    font-size: 1rem
+    font-family: inherit
+    transition: border-color 0.2s ease
+    
+    &::placeholder
+      color: $text-muted
+      
+    &:focus
+      outline: none
+      border-color: $primary
+      
+  select
+    cursor: pointer
+    
+  textarea
+    resize: vertical
+    min-height: 100px
+
+.form-checkbox
+  display: flex
+  align-items: flex-start
+  gap: 0.75rem
+  
+  input[type="checkbox"]
+    width: 18px
+    height: 18px
+    margin-top: 2px
+    accent-color: $primary
+    cursor: pointer
+    
+  label
+    font-size: 0.9375rem
+    color: $text-secondary
+    cursor: pointer
+    line-height: 1.5
+
+.guidelines
+  background: $background-lighter
+  border: 1px solid $border-color
+  border-radius: 16px
+  padding: 1.5rem
+  position: sticky
+  top: 6rem
+
+.guidelines-header
   display: flex
-  justify-content: space-between
   align-items: center
-  gap: 4rem
+  gap: 0.75rem
+  margin-bottom: 1rem
+  padding-bottom: 1rem
+  border-bottom: 1px solid $border-color
+  
+  svg
+    color: $blue
+    font-size: 1.125rem
+    
+  h3
+    font-size: 1rem
+    font-weight: 600
+    margin: 0
 
-  .submission-success
+.guidelines ul
+  list-style: none
+  display: flex
+  flex-direction: column
+  gap: 0.75rem
+  
+  li
+    font-size: 0.875rem
+    color: $text-secondary
+    line-height: 1.5
+    padding-left: 1.25rem
+    position: relative
+    
+    &::before
+      content: ""
+      position: absolute
+      left: 0
+      top: 8px
+      width: 5px
+      height: 5px
+      background: $primary
+      border-radius: 50%
+
+.success-state
+  text-align: center
+  display: flex
+  flex-direction: column
+  align-items: center
+  gap: 1.5rem
+  padding: 4rem 2rem
+  
+  .success-icon
+    width: 80px
+    height: 80px
+    background: rgba($primary, 0.1)
+    border-radius: 50%
     display: flex
-    width: 100%
-    height: 80vh
-    justify-content: center
-    flex-direction: column
     align-items: center
+    justify-content: center
+    
+    svg
+      font-size: 2.5rem
+      color: $primary
+      
+  h1
+    font-size: 2rem
+    font-weight: 700
+    
+  p
+    font-size: 1.125rem
+    color: $text-secondary
+    max-width: 400px
 
-  .submission-area
-    width: 40%
+@media (max-width: 900px)
+  .submission-content
+    grid-template-columns: 1fr
+    
+  .guidelines
+    position: static
 
-  .input-group
-    margin-bottom: 2rem
-
-    label
-      margin-bottom: 0.5rem
-      display: block
-      font-size: 1.5rem
-      color: $text
-      font-weight: 500
-
-    input, select, textarea
-      width: 100%
-      box-sizing: border-box
-      padding: 1rem
-      font-size: 1.6rem
-      border: 1px solid $primary
-      border-radius: 1rem
-      margin-bottom: 1rem
-      color: $text
-      background-color: $background
-      transition: border-color 0.3s
-      resize: none
-
-      &:focus
-        outline: none
-        border-color: $primary
-        box-shadow: 0 0 0 3px rgba($primary, 0.25)
-
-  .info-area
-    background-color: $background-lighter
-    height: auto
-
-    padding: 2rem
-    border-radius: 1rem
-    max-width: 40%
-
-    .info-title
-      display: flex
-      align-items: center
-      gap: 1rem
-      color: $red
-
-      svg
-        font-size: 22pt
-
-      h1
-        margin: 0
-        font-size: 24pt
-
-    ul
-      list-style: outside
-
-      li
-        font-size: 1.3rem
-        margin-bottom: 1rem
-        color: $text
-
-    input[type="checkbox"]
-      margin-right: 1rem
-      cursor: pointer
-      width: 1rem
-      height: 1rem
-      accent-color: $primary
-
-    label
-      cursor: pointer
-      font-size: 1.5rem
-      font-weight: 500
-
-@media screen and (max-width: 800px)
-  .tutorial-submission-page
-    flex-direction: column-reverse
-    gap: 2rem
-
-    .submission-area
-      width: 80%
-
-    .info-area
-      margin-top: 2rem
-      max-width: 80%
-
-@media screen and (max-width: 600px)
-  .tutorial-submission-page
-    padding: 2rem
-
-    .submission-area
-      width: 100%
-
-    .info-area
-      max-width: 100%
\ No newline at end of file
+@media (max-width: 640px)
+  .submission-page
+    padding: 6rem 1.5rem 3rem
+    
+  .submission-header h1
+    font-size: 2rem
+    
+  .submission-form
+    padding: 1.5rem
\ No newline at end of file
diff --git a/web/src/pages/Tutorials/Tutorials.jsx b/web/src/pages/Tutorials/Tutorials.jsx
index 58643a57..2eed3508 100644
--- a/web/src/pages/Tutorials/Tutorials.jsx
+++ b/web/src/pages/Tutorials/Tutorials.jsx
@@ -1,13 +1,6 @@
 import "./styles.sass";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {
-    faBookOpenReader,
-    faChalkboardTeacher,
-    faNewspaper,
-    faPaperPlane,
-    faPlay,
-    faVideo
-} from "@fortawesome/free-solid-svg-icons";
+import {faPlay, faBookOpen, faPlus} from "@fortawesome/free-solid-svg-icons";
 
 import Videos from "./sources/videos.jsx";
 import BlogPosts from "./sources/blog_posts.jsx";
@@ -17,49 +10,67 @@ export const Tutorials = () => {
     const navigate = useNavigate();
 
     return (
-        <div className="tutorial-page">
-            <div className="page-title">
-                <FontAwesomeIcon icon={faChalkboardTeacher}/>
+        <div className="tutorials-page">
+            <div className="tutorials-header">
                 <h1>Tutorials</h1>
+                <p>Learn how to use MySpeed with these community-created guides</p>
             </div>
 
-            <div className="tutorial-section">
-                <FontAwesomeIcon icon={faVideo}/>
-                <h2>Videos</h2>
-            </div>
+            <section className="tutorials-section">
+                <h2>Video Tutorials</h2>
 
-            <div className="tutorial-grid">
-                {Videos.map((video, index) => (
-                    <div key={index} className="tutorial-card"
-                         onClick={() => window.open(video.link, "_blank")}>
-                        <img src={video.thumb} alt={video.title} className="thumbnail"/>
-                        <img src={video.creator} alt={video.title} className="creator"/>
-                        <FontAwesomeIcon icon={faPlay} className="open_btn"/>
-                    </div>
-                ))}
-                <div className="content-card" onClick={() => navigate("/tutorials/submit?type=video")}>
-                    <FontAwesomeIcon icon={faPaperPlane} className="open_btn"/>
+                <div className="tutorials-grid">
+                    {Videos.map((video, index) => (
+                        <article 
+                            key={index} 
+                            className="tutorial-card"
+                            onClick={() => window.open(video.link, "_blank")}
+                        >
+                            <img src={video.thumb} alt={video.title} className="card-thumbnail"/>
+                            <img src={video.creator} alt="Creator" className="creator-avatar"/>
+                            <div className="card-overlay">
+                                <FontAwesomeIcon icon={faPlay}/>
+                            </div>
+                        </article>
+                    ))}
+                    
+                    <article 
+                        className="tutorial-card add-card"
+                        onClick={() => navigate("/tutorials/submit?type=video")}
+                    >
+                        <FontAwesomeIcon icon={faPlus}/>
+                        <span>Submit video</span>
+                    </article>
                 </div>
-            </div>
+            </section>
 
-            <div className="tutorial-section">
-                <FontAwesomeIcon icon={faNewspaper}/>
-                <h2>Blog-Posts</h2>
-            </div>
+            <section className="tutorials-section">
+                <h2>Blog Posts</h2>
 
-            <div className="tutorial-grid">
-                {BlogPosts.map((video, index) => (
-                    <div key={index} className="tutorial-card"
-                         onClick={() => window.open(video.link, "_blank")}>
-                        <img src={video.thumb} alt={video.title} className="thumbnail"/>
-                        <img src={video.creator} alt={video.title} className="creator"/>
-                        <FontAwesomeIcon icon={faBookOpenReader} className="open_btn"/>
-                    </div>
-                ))}
-                <div className="content-card" onClick={() => navigate("/tutorials/submit?type=blog")}>
-                    <FontAwesomeIcon icon={faPaperPlane} className="open_btn"/>
+                <div className="tutorials-grid">
+                    {BlogPosts.map((post, index) => (
+                        <article 
+                            key={index} 
+                            className="tutorial-card"
+                            onClick={() => window.open(post.link, "_blank")}
+                        >
+                            <img src={post.thumb} alt={post.title} className="card-thumbnail"/>
+                            <img src={post.creator} alt="Creator" className="creator-avatar"/>
+                            <div className="card-overlay">
+                                <FontAwesomeIcon icon={faBookOpen}/>
+                            </div>
+                        </article>
+                    ))}
+                    
+                    <article 
+                        className="tutorial-card add-card"
+                        onClick={() => navigate("/tutorials/submit?type=blog")}
+                    >
+                        <FontAwesomeIcon icon={faPlus}/>
+                        <span>Submit post</span>
+                    </article>
                 </div>
-            </div>
+            </section>
         </div>
     );
 }
\ No newline at end of file
diff --git a/web/src/pages/Tutorials/styles.sass b/web/src/pages/Tutorials/styles.sass
index 8c9d0379..38940683 100644
--- a/web/src/pages/Tutorials/styles.sass
+++ b/web/src/pages/Tutorials/styles.sass
@@ -1,130 +1,115 @@
 @use "@/common/styles/colors" as *
 
-.tutorial-page
-  padding: 5rem
+.tutorials-page
+  min-height: 100vh
+  padding: 120px 48px 80px
+  max-width: 1200px
+  margin: 0 auto
+
+.tutorials-header
+  text-align: center
+  margin-bottom: 48px
+  
+  h1
+    font-size: 2.5rem
+    font-weight: 700
+    margin-bottom: 8px
+    
+  p
+    font-size: 1.125rem
+    color: $text-secondary
+
+.tutorials-section
+  margin-bottom: 48px
+  
+  &:last-child
+    margin-bottom: 0
+
+  h2
+    font-size: 1.125rem
+    font-weight: 600
+    color: $text-secondary
+    margin-bottom: 16px
+
+.tutorials-grid
+  display: grid
+  grid-template-columns: repeat(4, 1fr)
+  gap: 12px
+
+.tutorial-card
+  position: relative
+  aspect-ratio: 16 / 9
+  border-radius: 10px
+  overflow: hidden
+  cursor: pointer
+  
+  &:hover
+    .card-overlay
+      opacity: 1
+      
+    .card-thumbnail
+      transform: scale(1.05)
+
+.card-thumbnail
+  width: 100%
+  height: 100%
+  object-fit: cover
+  transition: transform 0.3s ease
+
+.creator-avatar
+  position: absolute
+  bottom: 8px
+  left: 8px
+  width: 28px
+  height: 28px
+  border-radius: 50%
+  object-fit: cover
+  border: 2px solid rgba(255, 255, 255, 0.8)
+  z-index: 2
+
+.card-overlay
+  position: absolute
+  inset: 0
+  background: rgba(0, 0, 0, 0.4)
+  display: flex
+  align-items: center
+  justify-content: center
+  opacity: 0
+  transition: opacity 0.2s ease
+  
+  svg
+    font-size: 2rem
+    color: white
+
+.add-card
   display: flex
   flex-direction: column
-  gap: 2rem
+  align-items: center
+  justify-content: center
+  gap: 8px
+  background: $background-lighter
+  border: 1px dashed $border-color
+  color: $text-muted
+  transition: all 0.2s ease
+  
+  &:hover
+    border-color: $primary
+    color: $primary
+    background: rgba($primary, 0.05)
 
-  .page-title
-    display: flex
-    align-items: center
-    justify-content: center
-    gap: 1rem
+  svg
+    font-size: 1.5rem
+    
+  span
+    font-size: 0.875rem
+    font-weight: 500
 
-    svg
-      font-size: 24pt
+@media (max-width: 768px)
+  .tutorials-page
+    padding: 100px 24px 60px
+    
+  .tutorials-header h1
+    font-size: 2rem
 
-    h1
-      font-size: 28pt
-
-
-  .tutorial-section
-    margin-left: -8rem
-    padding: 1rem 3rem
-    border: 4px solid $red
-    border-radius: 1.5rem
-    display: flex
-    align-items: center
-    width: fit-content
-    animation: moveIn 0.3s ease-out
-
-    svg
-      font-size: 18pt
-      margin-right: 1rem
-
-    h2
-      font-size: 20pt
-      margin: 0
-
-  .tutorial-grid
-    display: flex
-    flex-wrap: wrap
-    justify-content: center
-    gap: 2rem
-
-  .content-card
-    border: 4px solid $red
-    width: 28rem
-    height: 16rem
-    display: flex
-    align-items: center
-    justify-content: center
-    border-radius: 2rem
-    cursor: pointer
-    transition: all 0.3s
-    animation: bounceIn 0.3s ease-out
-
-    svg
-      font-size: 34pt
-      color: $red
-
-  .content-card:hover
-    border: 4px solid $red
-    background-color: $red
-
-    svg
-      color: $background
-
-
-  .tutorial-card
-    transition: all 0.3s
-    border: 4px solid transparent
-    border-radius: 2rem
-
-    cursor: pointer
-    width: 28rem
-    height: 16rem
-
-    animation: bounceIn 0.3s ease-out
-
-    .thumbnail
-      border-radius: 1.5rem
-      width: 100%
-      height: 100%
-      object-fit: cover
-
-    .creator
-      position: relative
-      width: 4rem
-      height: 4rem
-      bottom: 28%
-      left: 1%
-      border-radius: 50%
-
-    .open_btn
-      position: relative
-      display: none
-      bottom: 75%
-      left: 50%
-      transform: translate(-50%, -50%)
-      color: $red
-      font-size: 28pt
-
-  .tutorial-card:hover
-    border: 4px solid $red
-
-    .open_btn
-      display: block
-
-    .thumbnail
-      filter: brightness(0.5)
-
-@keyframes moveIn
-  0%
-    transform: translateX(-30rem)
-  100%
-    transform: translateY(0)
-
-@media screen and (max-width: 750px)
-  .tutorial-page
-    padding: 2rem
-  .tutorial-page .tutorial-section
-    margin-left: -4rem
-  .tutorial-page .tutorial-card
-    height: 14rem
-    .creator
-      width: 3rem
-      height: 3rem
-      bottom: 25%
-      left: 1%
\ No newline at end of file
+  .tutorials-grid
+    grid-template-columns: repeat(2, 1fr)