From 356b666766b2e1482ccadf199175b860d1e63804 Mon Sep 17 00:00:00 2001
From: fiszh <61081555+Fiszh@users.noreply.github.com>
Date: Fri, 19 Jun 2026 23:50:35 +0200
Subject: [PATCH 01/13] Save

---
 app/src/components/Inputs/Button.svelte       |  63 +++++++++
 app/src/components/Inputs/Checkbox.svelte     |  41 ++++++
 app/src/components/Inputs/Color.svelte        |  54 ++++++++
 app/src/components/Inputs/Input.svelte        | 120 ++++++++++++++++++
 .../Inputs/Segmented-control.svelte           | 105 +++++++++++++++
 app/src/components/Inputs/Selector.svelte     |  85 +++++++++++++
 app/src/components/Inputs/Toggle.svelte       |  55 ++++++++
 app/src/routes/design/+page.svelte            |  84 ++++++++++++
 8 files changed, 607 insertions(+)
 create mode 100644 app/src/components/Inputs/Button.svelte
 create mode 100644 app/src/components/Inputs/Checkbox.svelte
 create mode 100644 app/src/components/Inputs/Color.svelte
 create mode 100644 app/src/components/Inputs/Input.svelte
 create mode 100644 app/src/components/Inputs/Segmented-control.svelte
 create mode 100644 app/src/components/Inputs/Selector.svelte
 create mode 100644 app/src/components/Inputs/Toggle.svelte
 create mode 100644 app/src/routes/design/+page.svelte

diff --git a/app/src/components/Inputs/Button.svelte b/app/src/components/Inputs/Button.svelte
new file mode 100644
index 0000000..4bd8d4f
--- /dev/null
+++ b/app/src/components/Inputs/Button.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type {
+        HTMLButtonAttributes,
+        HTMLAnchorAttributes,
+    } from "svelte/elements";
+
+    type Props = {
+        href?: string | null;
+        icon?: Snippet;
+        iconRight?: Snippet;
+        children?: Snippet;
+    } & HTMLButtonAttributes &
+        HTMLAnchorAttributes;
+
+    const { href, icon, iconRight, children, ...restProps }: Props = $props();
+</script>
+
+{#if href}
+    <a {href} {...restProps}>
+        {@render icon?.()}
+        {@render children?.()}
+        {@render iconRight?.()}
+    </a>
+{:else}
+    <button {...restProps}>
+        {@render icon?.()}
+        {@render children?.()}
+        {@render iconRight?.()}
+    </button>
+{/if}
+
+<style lang="scss">
+    a,
+    button {
+        background-color: #191919;
+        border: none;
+        color: white;
+        border-radius: 10px;
+        padding: 0.5rem;
+        cursor: pointer;
+        font-size: 1rem;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+
+        transition:
+            background-color 0.2s ease,
+            border-radius 0.2s ease;
+
+        &:active,
+        &:hover {
+            background-color: #1c1c1c;
+            border-radius: 5px;
+        }
+
+        &.active {
+            background-color: #252525;
+            border-radius: 3px;
+        }
+    }
+</style>
diff --git a/app/src/components/Inputs/Checkbox.svelte b/app/src/components/Inputs/Checkbox.svelte
new file mode 100644
index 0000000..ff68418
--- /dev/null
+++ b/app/src/components/Inputs/Checkbox.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    let { checked = $bindable(false), children } = $props();
+</script>
+
+<label>
+    <input type="checkbox" bind:checked />
+    {@render children()}
+</label>
+
+<style lang="scss">
+    label {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.05rem;
+        cursor: pointer;
+
+        & > * {
+            cursor: pointer;
+        }
+
+        &:hover input {
+            background-color: #5c5c5c;
+        }
+
+        input {
+            appearance: none;
+            width: 1rem;
+            aspect-ratio: 1;
+            background-color: #474747;
+
+            border: 0.15rem #535353 solid;
+            border-radius: 0.25rem;
+            transition: background-color 0.2s ease;
+
+            &:checked {
+                background-color: #7c5cfc;
+                border-color: #544b7b;
+            }
+        }
+    }
+</style>
diff --git a/app/src/components/Inputs/Color.svelte b/app/src/components/Inputs/Color.svelte
new file mode 100644
index 0000000..a32a402
--- /dev/null
+++ b/app/src/components/Inputs/Color.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    type Props = {
+        value?: string;
+        onChange?: (value: string) => void;
+    };
+
+    let { value = $bindable("#FFFFFF"), onChange }: Props = $props();
+
+    function handleChange(event: Event) {
+        const target = event.target as HTMLInputElement;
+        onChange?.(target.value);
+    }
+</script>
+
+<label>
+    <span style="background-color: {value};"></span>
+    <input type="color" bind:value onchange={handleChange} />
+    <span class="value">{value}</span>
+</label>
+
+<style lang="scss">
+    input {
+        width: 0rem;
+        height: 0rem;
+        opacity: 0;
+    }
+
+    label {
+        display: inline-flex;
+        align-items: center;
+        background-color: #1b1b1b;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+
+        cursor: pointer;
+
+        & > * {
+            cursor: pointer;
+        }
+    }
+
+    span {
+        height: 1rem;
+        aspect-ratio: 1;
+        border-radius: 0.25rem;
+    }
+
+    .value {
+        display: inline-block;
+        min-width: 7ch;
+        max-width: 12ch;
+        font-family: monospace;
+    }
+</style>
diff --git a/app/src/components/Inputs/Input.svelte b/app/src/components/Inputs/Input.svelte
new file mode 100644
index 0000000..8ed754e
--- /dev/null
+++ b/app/src/components/Inputs/Input.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { Snippet } from "svelte";
+    import type {
+        HTMLInputAttributes,
+        HTMLAnchorAttributes,
+    } from "svelte/elements";
+
+    type Props = {
+        icon?: Snippet;
+        iconRight?: Snippet;
+        children?: Snippet;
+        value?: string;
+        disabled?: boolean;
+        invalid?: boolean;
+    } & HTMLInputAttributes &
+        HTMLAnchorAttributes;
+
+    let {
+        icon,
+        iconRight,
+        value = $bindable(""),
+        disabled = false,
+        invalid = false,
+        ...restProps
+    }: Props = $props();
+
+    const clear = () => {
+        value = "";
+    };
+
+    import { X, Ban } from "lucide-svelte";
+</script>
+
+<label class:disabled class:invalid>
+    {#if !disabled}
+        {@render icon?.()}
+    {:else}
+        <Ban size="1rem" color="currentColor" />
+    {/if}
+    <input
+        {...restProps}
+        bind:value
+        {disabled}
+        placeholder={disabled ? "Disabled" : restProps.placeholder}
+    />
+    {#if !disabled && iconRight}
+        {#if !value.length}
+            {@render iconRight()}
+        {:else}
+            <button title="Clear" onclick={clear}><X size="1rem" /></button>
+        {/if}
+    {/if}
+</label>
+
+<style lang="scss">
+    label {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+
+        background-color: #1b1b1b;
+
+        border: 0.15rem #242424 solid;
+        border-radius: 0.25rem;
+        padding: 0.25rem;
+
+        cursor: text;
+
+        &:hover {
+            background-color: #282828;
+            border-color: #5c5c5c;
+        }
+
+        &:focus-within {
+            border-color: #cfcfcf;
+        }
+
+        &.invalid {
+            border-color: #e23636;
+        }
+
+        &.disabled {
+            background-color: #1d1d1d;
+            border-color: #151515;
+            color: #363636;
+
+            cursor: not-allowed;
+
+            &::placeholder {
+                color: #363636;
+            }
+        }
+
+        button {
+            background-color: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 0rem;
+            display: inline-flex;
+        }
+
+        input {
+            background-color: transparent;
+            border: none;
+            color: white;
+
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            cursor: inherit;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+</style>
diff --git a/app/src/components/Inputs/Segmented-control.svelte b/app/src/components/Inputs/Segmented-control.svelte
new file mode 100644
index 0000000..201be04
--- /dev/null
+++ b/app/src/components/Inputs/Segmented-control.svelte
@@ -0,0 +1,105 @@
+<!-- SOME PARTS ARE FROM https://github.com/SevenTV/SevenTV/blob/main/apps/website/src/components/input/segmented-control.svelte -->
+
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { Snippet } from "svelte";
+    import { crossfade } from "svelte/transition";
+    import { cubicInOut } from "svelte/easing";
+
+    interface Option {
+        id: string;
+        label?: string;
+        icon?: Snippet;
+    }
+
+    type Props = {
+        value?: string;
+        options: Option[];
+    };
+
+    const [send, receive] = crossfade({
+        duration: 200,
+        easing: cubicInOut,
+    });
+
+    let { value = "", options = [] }: Props = $props();
+
+    onMount(() => {
+        value = options[0]["id"];
+    });
+</script>
+
+<section>
+    {#each options as { id, label, icon }}
+        <button
+            data-id={id}
+            class:selected={value == id}
+            onclick={() => (value = id)}
+        >
+            {@render icon?.()}
+            {#if label}
+                <p>{label}</p>
+            {/if}
+            {#if value == id}
+                <div
+                    class="slider"
+                    in:receive={{ key: "slider" }}
+                    out:send={{ key: "slider" }}
+                ></div>
+            {/if}
+        </button>
+    {/each}
+</section>
+
+<style lang="scss">
+    section {
+        display: flex;
+        background-color: #1b1b1b;
+
+        gap: 0.25rem;
+        padding: 0.35rem;
+        border-radius: 0.5rem;
+
+        user-select: none;
+
+        button {
+            background: none;
+            border: none;
+            color: white;
+            position: relative;
+
+            font-weight: bold;
+
+            gap: 0.25rem;
+
+            opacity: 0.75;
+
+            &.selected {
+                opacity: 1;
+            }
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            padding: 0.5rem;
+            border-radius: 0.25rem;
+            z-index: 1;
+
+            cursor: pointer;
+
+            p {
+                margin: 0;
+            }
+        }
+    }
+
+    .slider {
+        position: absolute;
+        inset: 0;
+        background-color: #262626;
+        border-radius: 0.25rem;
+        z-index: -1;
+    }
+</style>
diff --git a/app/src/components/Inputs/Selector.svelte b/app/src/components/Inputs/Selector.svelte
new file mode 100644
index 0000000..5f05bc8
--- /dev/null
+++ b/app/src/components/Inputs/Selector.svelte
@@ -0,0 +1,85 @@
+<!-- SOME PARTS ARE FROM https://github.com/SevenTV/SevenTV/blob/main/apps/website/src/components/input/segmented-control.svelte -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { crossfade } from "svelte/transition";
+    import { cubicInOut } from "svelte/easing";
+
+    type Option = {
+        enabled: boolean;
+        label?: string;
+        icon?: Snippet;
+    };
+
+    type Props = {
+        options: Option[];
+    };
+
+    const [send, receive] = crossfade({
+        duration: 200,
+        easing: cubicInOut,
+    });
+
+    let { options = [] }: Props = $props();
+</script>
+
+<section>
+    {#each options as option}
+        <label class:enabled={option.enabled}>
+            <input type="checkbox" bind:checked={option.enabled} />
+            {@render option?.icon?.()}
+            {#if option.label}
+                <p>{option.label}</p>
+            {/if}
+        </label>
+    {/each}
+</section>
+
+<style lang="scss">
+    input {
+        display: none;
+    }
+
+    section {
+        display: flex;
+        background-color: #1b1b1b;
+
+        gap: 0.25rem;
+        padding: 0.35rem;
+        border-radius: 0.5rem;
+
+        user-select: none;
+
+        label {
+            border: none;
+            color: white;
+            position: relative;
+
+            gap: 0.25rem;
+
+            opacity: 0.5;
+            background-color: #262626;
+
+            &.enabled {
+                opacity: 1;
+            }
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            padding: 0.5rem;
+            border-radius: 0.25rem;
+            z-index: 1;
+
+            cursor: pointer;
+
+            transition: opacity 0.3s ease;
+
+            p {
+                margin: 0;
+            }
+        }
+    }
+</style>
diff --git a/app/src/components/Inputs/Toggle.svelte b/app/src/components/Inputs/Toggle.svelte
new file mode 100644
index 0000000..0cb83a3
--- /dev/null
+++ b/app/src/components/Inputs/Toggle.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    let { checked = $bindable(false), disabled = false } = $props();
+</script>
+
+<label>
+    <input type="checkbox" bind:checked {disabled} />
+</label>
+
+<style lang="scss">
+    input {
+        --size: 2rem;
+
+        appearance: none;
+        position: relative;
+        width: calc(var(--size) * 2);
+        height: var(--size);
+        background-color: #272727;
+        border-radius: 100rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+
+        &::after {
+            content: "";
+            position: absolute;
+            width: calc(var(--size) - 4px);
+            height: calc(var(--size) - 4px);
+            background: #737373;
+            border-radius: 50%;
+            top: 50%;
+            left: 2px;
+            transform: translateY(-50%);
+            transition:
+                left 0.2s ease,
+                background-color 0.25s ease;
+        }
+
+        &:checked {
+            background-color: #3d8445;
+
+            &::after {
+                background: white;
+                left: calc(100% - var(--size) + 2px);
+            }
+        }
+
+        &[disabled] {
+            cursor: not-allowed;
+            background-color: #1c1c1c;
+
+            &::after {
+                background-color: #414141;
+            }
+        }
+    }
+</style>
diff --git a/app/src/routes/design/+page.svelte b/app/src/routes/design/+page.svelte
new file mode 100644
index 0000000..babf0e8
--- /dev/null
+++ b/app/src/routes/design/+page.svelte
@@ -0,0 +1,84 @@
+<script>
+    import Button from "$components/Inputs/Button.svelte";
+    import Toggle from "$components/Inputs/Toggle.svelte";
+    import Checkbox from "$components/Inputs/Checkbox.svelte";
+    import Input from "$components/Inputs/Input.svelte";
+    import Color from "$components/Inputs/Color.svelte";
+    import SegmentedControl from "$components/Inputs/Segmented-control.svelte";
+    import Selector from "$components/Inputs/Selector.svelte";
+    import { House, ChevronRight, Search } from "lucide-svelte";
+
+    //FIXME MAKE SELECTOR WAY BETTER WITHOUT THE NEED OF THIS
+    let selectorOptions = $state([
+        { enabled: true, label: "Twitch" },
+        { enabled: true, label: "Kick" },
+        { enabled: true, label: "YouTube" },
+        { enabled: true, label: "TikTok" },
+    ]);
+</script>
+
+<main>
+    <h1>UChat Design Page</h1>
+
+    <p>Buttons</p>
+    {#snippet icon()}
+        <House size="1rem" />
+    {/snippet}
+    {#snippet iconRight()}
+        <ChevronRight size="1rem" />
+    {/snippet}
+    {#snippet iconSearch()}
+        <Search size="1rem" />
+    {/snippet}
+    <Button {icon}>Test Button</Button>
+    <Button {iconRight}>Test Button</Button>
+    <Button>Test Button</Button>
+
+    <p>Toggles</p>
+    <Toggle checked={true} />
+    <Toggle />
+    <Toggle disabled />
+
+    <p>Checkboxes</p>
+    <Checkbox checked={true}>Checked</Checkbox>
+    <Checkbox>Unchecked</Checkbox>
+
+    <p>Inputs</p>
+    <Input icon={iconSearch} {iconRight} placeholder="Search..." />
+    <Input disabled />
+    <Input placeholder="Invalid Input" invalid />
+
+    <p>Color</p>
+    <Color />
+
+    <p>Segment Control</p>
+    <SegmentedControl
+        options={[
+            { id: "twitch", label: "Twitch", icon },
+            { id: "kick", label: "Kick" },
+            { id: "yt", label: "YouTube" },
+            { id: "tt", label: "TikTok" },
+        ]}
+    />
+
+    <p>Selector</p>
+    <Selector options={selectorOptions} />
+</main>
+
+<style>
+    p,
+    h1 {
+        margin: 0;
+    }
+
+    main {
+        padding: 0.5rem 1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+
+        overflow-y: auto;
+    }
+</style>

From 98657ab7486db6b48173d238b63b347ca2738fbb Mon Sep 17 00:00:00 2001
From: fiszh <61081555+Fiszh@users.noreply.github.com>
Date: Fri, 19 Jun 2026 23:53:40 +0200
Subject: [PATCH 02/13] Better design page look

---
 app/src/routes/design/+page.svelte | 98 +++++++++++++++++++-----------
 1 file changed, 63 insertions(+), 35 deletions(-)

diff --git a/app/src/routes/design/+page.svelte b/app/src/routes/design/+page.svelte
index babf0e8..289bda6 100644
--- a/app/src/routes/design/+page.svelte
+++ b/app/src/routes/design/+page.svelte
@@ -20,7 +20,6 @@
 <main>
     <h1>UChat Design Page</h1>
 
-    <p>Buttons</p>
     {#snippet icon()}
         <House size="1rem" />
     {/snippet}
@@ -30,39 +29,55 @@
     {#snippet iconSearch()}
         <Search size="1rem" />
     {/snippet}
-    <Button {icon}>Test Button</Button>
-    <Button {iconRight}>Test Button</Button>
-    <Button>Test Button</Button>
-
-    <p>Toggles</p>
-    <Toggle checked={true} />
-    <Toggle />
-    <Toggle disabled />
-
-    <p>Checkboxes</p>
-    <Checkbox checked={true}>Checked</Checkbox>
-    <Checkbox>Unchecked</Checkbox>
-
-    <p>Inputs</p>
-    <Input icon={iconSearch} {iconRight} placeholder="Search..." />
-    <Input disabled />
-    <Input placeholder="Invalid Input" invalid />
-
-    <p>Color</p>
-    <Color />
-
-    <p>Segment Control</p>
-    <SegmentedControl
-        options={[
-            { id: "twitch", label: "Twitch", icon },
-            { id: "kick", label: "Kick" },
-            { id: "yt", label: "YouTube" },
-            { id: "tt", label: "TikTok" },
-        ]}
-    />
-
-    <p>Selector</p>
-    <Selector options={selectorOptions} />
+
+    <section>
+        <p>Buttons</p>
+        <Button {icon}>Test Button</Button>
+        <Button {iconRight}>Test Button</Button>
+        <Button>Test Button</Button>
+    </section>
+
+    <section>
+        <p>Toggles</p>
+        <Toggle checked={true} />
+        <Toggle />
+        <Toggle disabled />
+    </section>
+
+    <section>
+        <p>Checkboxes</p>
+        <Checkbox checked={true}>Checked</Checkbox>
+        <Checkbox>Unchecked</Checkbox>
+    </section>
+
+    <section>
+        <p>Inputs</p>
+        <Input icon={iconSearch} {iconRight} placeholder="Search..." />
+        <Input disabled />
+        <Input placeholder="Invalid Input" invalid />
+    </section>
+
+    <section>
+        <p>Color</p>
+        <Color />
+    </section>
+
+    <section>
+        <p>Segment Control</p>
+        <SegmentedControl
+            options={[
+                { id: "twitch", label: "Twitch", icon },
+                { id: "kick", label: "Kick" },
+                { id: "yt", label: "YouTube" },
+                { id: "tt", label: "TikTok" },
+            ]}
+        />
+    </section>
+
+    <section>
+        <p>Selector</p>
+        <Selector options={selectorOptions} />
+    </section>
 </main>
 
 <style>
@@ -71,14 +86,27 @@
         margin: 0;
     }
 
+    h1 {
+        width: 100%;
+    }
+
     main {
         padding: 0.5rem 1rem;
 
+        width: 100%;
+
         display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
         align-items: flex-start;
         gap: 1rem;
 
         overflow-y: auto;
+
+        section {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 1rem;
+        }
     }
 </style>

From 047fc24ef96d9d6cdbadbc2a19aa8bac52d5fc9f Mon Sep 17 00:00:00 2001
From: fiszh <61081555+Fiszh@users.noreply.github.com>
Date: Sat, 20 Jun 2026 00:01:24 +0200
Subject: [PATCH 03/13] add allowed hosts

---
 app/vite.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/vite.config.ts b/app/vite.config.ts
index 7c96716..c5f2646 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -14,6 +14,9 @@ export default defineConfig({
     preview: {
         allowedHosts: ["dev.unii.dev", "chat.unii.dev", "localhost"],
     },
+    server: {
+        allowedHosts: [".unii.dev", "unii.dev"],
+    },
     define: {
         __COMMIT_HASH: JSON.stringify(commitHash),
         __BUILD_DATE: JSON.stringify(new Date().toISOString()),

From 0a49314e29649accf50474cbfa6fe28c81a5704a Mon Sep 17 00:00:00 2001
From: fiszh <61081555+Fiszh@users.noreply.github.com>
Date: Sat, 20 Jun 2026 20:24:49 +0200
Subject: [PATCH 04/13] save

---
 app/src/app.scss                          |   1 +
 app/src/components/Inputs/Dropdown.svelte | 134 ++++++++++++++++++++++
 app/src/components/Inputs/Input.svelte    |  27 +++--
 app/src/routes/design/+page.svelte        |  40 +++++--
 4 files changed, 182 insertions(+), 20 deletions(-)
 create mode 100644 app/src/components/Inputs/Dropdown.svelte

diff --git a/app/src/app.scss b/app/src/app.scss
index 57b944f..98c5aed 100644
--- a/app/src/app.scss
+++ b/app/src/app.scss
@@ -19,6 +19,7 @@ body {
 * {
     scrollbar-width: var(--scrollbar-width, auto);
     scrollbar-color: var(--scrollbar-color, auto);
+    -webkit-tap-highlight-color: transparent;
 }
 
 *::-webkit-scrollbar {
diff --git a/app/src/components/Inputs/Dropdown.svelte b/app/src/components/Inputs/Dropdown.svelte
new file mode 100644
index 0000000..9e0d558
--- /dev/null
+++ b/app/src/components/Inputs/Dropdown.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import type { HTMLAttributes } from "svelte/elements";
+    import type { Snippet } from "svelte";
+    import { ChevronDown, ChevronUp } from "lucide-svelte";
+
+    type Props = {
+        dropdown?: Snippet;
+        children?: Snippet;
+        value?: string;
+        reversed?: boolean;
+    } & HTMLAttributes<HTMLDivElement>;
+
+    let expanded = $state(false);
+
+    let {
+        dropdown,
+        children,
+        value,
+        reversed = false,
+        ...restProps
+    }: Props = $props();
+
+    const toggle = () => (expanded = !expanded);
+
+    const handleMouseEnter = () => (expanded = true);
+
+    const close = () => (expanded = false);
+
+    const handleMouseLeave = close;
+</script>
+
+<div
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    class:expanded
+    class:reversed
+    {...restProps}
+    onclick={toggle}
+    role="none"
+>
+    <button id="top">
+        {@render children?.()}
+        {#if (!expanded && !reversed) || (expanded && reversed)}
+            <ChevronDown size="1rem" />
+        {:else}
+            <ChevronUp size="1rem" />
+        {/if}
+    </button>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <span id="dropdown" onclick={() => expanded && close}>
+        {@render dropdown?.()}
+    </span>
+</div>
+
+<style lang="scss">
+    div {
+        display: flex;
+        flex-direction: column;
+        background-color: #1b1b1b;
+        padding: 0.5rem;
+
+        border-radius: 10px;
+
+        position: relative;
+
+        cursor: pointer;
+
+        #dropdown {
+            display: flex;
+            flex-direction: column;
+
+            padding-inline: 0.5rem;
+            box-sizing: border-box;
+
+            z-index: 9999;
+
+            max-height: 0px;
+            overflow: hidden;
+
+            position: absolute;
+            left: 0;
+
+            border-radius: 0px 0px 10px 10px;
+
+            background-color: #1b1b1b;
+
+            width: 100%;
+        }
+
+        &:not(.reversed) #dropdown {
+            top: 100%;
+        }
+
+        &.reversed #dropdown {
+            bottom: 100%;
+        }
+
+        &.expanded {
+            &:not(.reversed) {
+                border-radius: 10px 10px 0px 0px;
+
+                #dropdown {
+                    border-top: #1f1f1f 2px solid;
+
+                    max-height: unset;
+                }
+            }
+
+            &.reversed {
+                border-radius: 0px 0px 10px 10px;
+
+                #dropdown {
+                    border-radius: 10px 10px 0px 0px;
+
+                    border-bottom: #1f1f1f 2px solid;
+
+                    max-height: unset;
+                }
+            }
+        }
+    }
+
+    #top {
+        background: none;
+        border: none;
+        color: white;
+        display: inline-flex;
+        align-items: center;
+        font-size: inherit;
+        cursor: inherit;
+        gap: 0.5rem;
+    }
+</style>
diff --git a/app/src/components/Inputs/Input.svelte b/app/src/components/Inputs/Input.svelte
index 8ed754e..ca8f9f5 100644
--- a/app/src/components/Inputs/Input.svelte
+++ b/app/src/components/Inputs/Input.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-    import { onMount } from "svelte";
     import type { Snippet } from "svelte";
     import type {
         HTMLInputAttributes,
         HTMLAnchorAttributes,
     } from "svelte/elements";
 
+    import { X, Ban } from "lucide-svelte";
+    import { fade } from "svelte/transition";
+
     type Props = {
         icon?: Snippet;
         iconRight?: Snippet;
@@ -27,9 +29,8 @@
 
     const clear = () => {
         value = "";
+        invalid = false;
     };
-
-    import { X, Ban } from "lucide-svelte";
 </script>
 
 <label class:disabled class:invalid>
@@ -44,12 +45,14 @@
         {disabled}
         placeholder={disabled ? "Disabled" : restProps.placeholder}
     />
-    {#if !disabled && iconRight}
-        {#if !value.length}
-            {@render iconRight()}
-        {:else}
-            <button title="Clear" onclick={clear}><X size="1rem" /></button>
-        {/if}
+    {#if !disabled}
+        <span id="rightIcon" transition:fade>
+            {#if iconRight && !value.length && !invalid}
+                {@render iconRight()}
+            {:else if value.length || invalid}
+                <button title="Clear" onclick={clear}><X size="1rem" /></button>
+            {/if}
+        </span>
     {/if}
 </label>
 
@@ -92,6 +95,7 @@
             }
         }
 
+        span,
         button {
             background-color: transparent;
             border: none;
@@ -101,6 +105,11 @@
             display: inline-flex;
         }
 
+        span {
+            height: 1rem;
+            aspect-ratio: 1;
+        }
+
         input {
             background-color: transparent;
             border: none;
diff --git a/app/src/routes/design/+page.svelte b/app/src/routes/design/+page.svelte
index 289bda6..55c5b36 100644
--- a/app/src/routes/design/+page.svelte
+++ b/app/src/routes/design/+page.svelte
@@ -6,14 +6,15 @@
     import Color from "$components/Inputs/Color.svelte";
     import SegmentedControl from "$components/Inputs/Segmented-control.svelte";
     import Selector from "$components/Inputs/Selector.svelte";
+    import Dropdown from "$components/Inputs/Dropdown.svelte";
     import { House, ChevronRight, Search } from "lucide-svelte";
 
     //FIXME MAKE SELECTOR WAY BETTER WITHOUT THE NEED OF THIS
     let selectorOptions = $state([
-        { enabled: true, label: "Twitch" },
-        { enabled: true, label: "Kick" },
-        { enabled: true, label: "YouTube" },
-        { enabled: true, label: "TikTok" },
+        { enabled: true, label: "Lorem" },
+        { enabled: true, label: "ipsum" },
+        { enabled: true, label: "dolor" },
+        { enabled: true, label: "sit" },
     ]);
 </script>
 
@@ -30,11 +31,27 @@
         <Search size="1rem" />
     {/snippet}
 
+    {#snippet dropdown()}
+        <Button>Lorem</Button>
+        <Button>ipsum</Button>
+        <Button>dolor</Button>
+    {/snippet}
+
     <section>
         <p>Buttons</p>
-        <Button {icon}>Test Button</Button>
-        <Button {iconRight}>Test Button</Button>
-        <Button>Test Button</Button>
+        <Button {icon}>Lorem ipsum</Button>
+        <Button {iconRight}>Lorem ipsum</Button>
+        <Button>Lorem ipsum</Button>
+    </section>
+
+    <section>
+        <p>Dropdown</p>
+        <Dropdown {dropdown}>Lorem</Dropdown>
+    </section>
+
+    <section>
+        <p>Dropdown Reversed</p>
+        <Dropdown {dropdown} reversed>Lorem</Dropdown>
     </section>
 
     <section>
@@ -54,6 +71,7 @@
         <p>Inputs</p>
         <Input icon={iconSearch} {iconRight} placeholder="Search..." />
         <Input disabled />
+        <Input />
         <Input placeholder="Invalid Input" invalid />
     </section>
 
@@ -66,10 +84,10 @@
         <p>Segment Control</p>
         <SegmentedControl
             options={[
-                { id: "twitch", label: "Twitch", icon },
-                { id: "kick", label: "Kick" },
-                { id: "yt", label: "YouTube" },
-                { id: "tt", label: "TikTok" },
+                { id: "1", label: "Lorem", icon },
+                { id: "2", label: "ipsum" },
+                { id: "3", label: "dolor" },
+                { id: "4", label: "sit" },
             ]}
         />
     </section>

From e4e246e246696a4f57dd35b70c02c0367fb663ca Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Mon, 22 Jun 2026 12:42:57 +0200
Subject: [PATCH 05/13] sync

---
 .github/FUNDING.yml                                 |   0
 .github/PULL_REQUEST_TEMPLATE.md                    |   0
 .github/dependabot.yml                              |   0
 .github/workflows/build-test.yml                    |   0
 .gitignore                                          |   0
 .vscode/extensions.json                             |   0
 .vscode/settings.json                               |   0
 CONTRIBUTING.md                                     |   0
 LICENSE                                             |   0
 README.md                                           |   0
 app/.gitignore                                      |   0
 app/.prettierignore                                 |   0
 app/.prettierrc                                     |   0
 app/bun.lock                                        |   0
 app/bunfig.toml                                     |   0
 app/package.json                                    |   0
 app/src/app.d.ts                                    |   0
 app/src/app.html                                    |   0
 app/src/app.scss                                    |   0
 app/src/components/Badge.svelte                     |   0
 app/src/components/Banner.svelte                    |   0
 app/src/components/ChatDisplay.svelte               |   0
 app/src/components/ChatMessage.svelte               |   0
 app/src/components/ChatOverlay.svelte               |   0
 app/src/components/Dialog.svelte                    |   0
 app/src/components/Inputs/Button.svelte             |   0
 app/src/components/Inputs/Checkbox.svelte           |   0
 app/src/components/Inputs/Color.svelte              |   0
 app/src/components/Inputs/Dropdown.svelte           |   0
 app/src/components/Inputs/Input.svelte              |   0
 app/src/components/Inputs/Segmented-control.svelte  |   0
 app/src/components/Inputs/Selector.svelte           |   0
 app/src/components/Inputs/Toggle.svelte             |   0
 app/src/components/Loading.svelte                   |   0
 app/src/components/LoginButton.svelte               |   0
 app/src/components/Main.svelte                      |   0
 app/src/components/Main/Chat/Display.svelte         |   0
 app/src/components/Main/Chat/Main.svelte            |   0
 app/src/components/Main/Chat/Settings.svelte        |   0
 .../components/Main/Chat/SettingsColorPicker.svelte |   0
 app/src/components/Main/GlobalSettings.svelte       |   0
 app/src/components/Main/Help/Main.svelte            |   0
 app/src/components/Main/MessageCreator/Main.svelte  |   0
 app/src/components/Main/Sidebar.svelte              |   0
 app/src/lib/assets/favicon.svg                      |   0
 app/src/lib/assets/loading.avif                     | Bin
 app/src/lib/badgeParser.ts                          |   0
 app/src/lib/badges.ts                               |   0
 app/src/lib/chat.ts                                 |   0
 app/src/lib/chatCommands.ts                         |   0
 app/src/lib/cookie.ts                               |   0
 app/src/lib/emoteParser.ts                          |   0
 app/src/lib/emotes.ts                               |   0
 app/src/lib/loadChat.ts                             |   0
 app/src/lib/overlayIndex.ts                         |   0
 app/src/lib/preview.ts                              |   0
 app/src/lib/services/7TV/GQL/cosmetics/multiple.gql |   0
 app/src/lib/services/7TV/GQL/cosmetics/single.gql   |   0
 app/src/lib/services/7TV/cosmetics.ts               |   0
 app/src/lib/services/7TV/main.ts                    |   0
 app/src/lib/services/7TV/websocket.ts               |   0
 app/src/lib/services/BTTV/main.ts                   |   0
 app/src/lib/services/BTTV/websocket.ts              |   0
 app/src/lib/services/FFZ/main.ts                    |   0
 app/src/lib/services/index.ts                       |   0
 app/src/lib/services/twitch.ts                      |   0
 app/src/routes/+error.svelte                        |   0
 app/src/routes/+layout.svelte                       |   0
 app/src/routes/+layout.ts                           |   0
 app/src/routes/+page.svelte                         |   0
 app/src/routes/auth/+page.svelte                    |   0
 app/src/routes/convert/+page.svelte                 |   0
 app/src/routes/design/+page.svelte                  |   0
 app/src/routes/teapot/+page.ts                      |   0
 app/src/routes/teapot/[...code]/+page.ts            |   0
 app/src/stores/convert/chatis.ts                    |   0
 app/src/stores/cosmetics.ts                         |   0
 app/src/stores/faq.ts                               |   0
 app/src/stores/global.ts                            |   0
 app/src/stores/previewMessages.ts                   |   0
 app/src/stores/settings.ts                          |   0
 app/src/types/converter.d.ts                        |   0
 app/static/fonts/Geist/Geist-Black.otf              | Bin
 app/static/fonts/Geist/Geist-Bold.otf               | Bin
 app/static/fonts/Geist/Geist-ExtraBold.otf          | Bin
 app/static/fonts/Geist/Geist-ExtraLight.otf         | Bin
 app/static/fonts/Geist/Geist-Light.otf              | Bin
 app/static/fonts/Geist/Geist-Medium.otf             | Bin
 app/static/fonts/Geist/Geist-Regular.otf            | Bin
 app/static/fonts/Geist/Geist-SemiBold.otf           | Bin
 app/static/fonts/Geist/Geist-Thin.otf               | Bin
 app/static/fonts/Just-Sans/JUST-Sans-ExBold.otf     | Bin
 app/static/fonts/Just-Sans/JUST-Sans-Regular.otf    | Bin
 app/static/fonts/Melody/BLMelody-Bold.otf           | Bin
 app/static/fonts/Melody/BLMelody-Book.otf           | Bin
 app/static/fonts/Melody/BLMelody-ExtraLight.otf     | Bin
 app/static/fonts/Melody/BLMelody-Light.otf          | Bin
 app/static/fonts/Melody/BLMelody-Medium.otf         | Bin
 app/static/fonts/Now/Now-Black.otf                  | Bin
 app/static/fonts/Now/Now-Bold.otf                   | Bin
 app/static/fonts/Now/Now-Light.otf                  | Bin
 app/static/fonts/Now/Now-Medium.otf                 | Bin
 app/static/fonts/Now/Now-Regular.otf                | Bin
 app/static/fonts/Now/Now-Thin.otf                   | Bin
 app/static/fonts/Satoshi/Satoshi-Black.otf          | Bin
 app/static/fonts/Satoshi/Satoshi-Bold.otf           | Bin
 app/static/fonts/Satoshi/Satoshi-Light.otf          | Bin
 app/static/fonts/Satoshi/Satoshi-Medium.otf         | Bin
 app/static/fonts/Satoshi/Satoshi-Regular.otf        | Bin
 app/static/images/banner.png                        | Bin
 app/static/images/favicon.ico                       | Bin
 app/static/images/logo.avif                         | Bin
 app/static/robots.txt                               |   0
 app/static/sitemap.xml                              |   0
 app/svelte.config.js                                |   0
 app/tsconfig.json                                   |   0
 app/vite.config.ts                                  |   0
 117 files changed, 0 insertions(+), 0 deletions(-)
 mode change 100644 => 100755 .github/FUNDING.yml
 mode change 100644 => 100755 .github/PULL_REQUEST_TEMPLATE.md
 mode change 100644 => 100755 .github/dependabot.yml
 mode change 100644 => 100755 .github/workflows/build-test.yml
 mode change 100644 => 100755 .gitignore
 mode change 100644 => 100755 .vscode/extensions.json
 mode change 100644 => 100755 .vscode/settings.json
 mode change 100644 => 100755 CONTRIBUTING.md
 mode change 100644 => 100755 LICENSE
 mode change 100644 => 100755 README.md
 mode change 100644 => 100755 app/.gitignore
 mode change 100644 => 100755 app/.prettierignore
 mode change 100644 => 100755 app/.prettierrc
 mode change 100644 => 100755 app/bun.lock
 mode change 100644 => 100755 app/bunfig.toml
 mode change 100644 => 100755 app/package.json
 mode change 100644 => 100755 app/src/app.d.ts
 mode change 100644 => 100755 app/src/app.html
 mode change 100644 => 100755 app/src/app.scss
 mode change 100644 => 100755 app/src/components/Badge.svelte
 mode change 100644 => 100755 app/src/components/Banner.svelte
 mode change 100644 => 100755 app/src/components/ChatDisplay.svelte
 mode change 100644 => 100755 app/src/components/ChatMessage.svelte
 mode change 100644 => 100755 app/src/components/ChatOverlay.svelte
 mode change 100644 => 100755 app/src/components/Dialog.svelte
 mode change 100644 => 100755 app/src/components/Inputs/Button.svelte
 mode change 100644 => 100755 app/src/components/Inputs/Checkbox.svelte
 mode change 100644 => 100755 app/src/components/Inputs/Color.svelte
 mode change 100644 => 100755 app/src/components/Inputs/Dropdown.svelte
 mode change 100644 => 100755 app/src/components/Inputs/Input.svelte
 mode change 100644 => 100755 app/src/components/Inputs/Segmented-control.svelte
 mode change 100644 => 100755 app/src/components/Inputs/Selector.svelte
 mode change 100644 => 100755 app/src/components/Inputs/Toggle.svelte
 mode change 100644 => 100755 app/src/components/Loading.svelte
 mode change 100644 => 100755 app/src/components/LoginButton.svelte
 mode change 100644 => 100755 app/src/components/Main.svelte
 mode change 100644 => 100755 app/src/components/Main/Chat/Display.svelte
 mode change 100644 => 100755 app/src/components/Main/Chat/Main.svelte
 mode change 100644 => 100755 app/src/components/Main/Chat/Settings.svelte
 mode change 100644 => 100755 app/src/components/Main/Chat/SettingsColorPicker.svelte
 mode change 100644 => 100755 app/src/components/Main/GlobalSettings.svelte
 mode change 100644 => 100755 app/src/components/Main/Help/Main.svelte
 mode change 100644 => 100755 app/src/components/Main/MessageCreator/Main.svelte
 mode change 100644 => 100755 app/src/components/Main/Sidebar.svelte
 mode change 100644 => 100755 app/src/lib/assets/favicon.svg
 mode change 100644 => 100755 app/src/lib/assets/loading.avif
 mode change 100644 => 100755 app/src/lib/badgeParser.ts
 mode change 100644 => 100755 app/src/lib/badges.ts
 mode change 100644 => 100755 app/src/lib/chat.ts
 mode change 100644 => 100755 app/src/lib/chatCommands.ts
 mode change 100644 => 100755 app/src/lib/cookie.ts
 mode change 100644 => 100755 app/src/lib/emoteParser.ts
 mode change 100644 => 100755 app/src/lib/emotes.ts
 mode change 100644 => 100755 app/src/lib/loadChat.ts
 mode change 100644 => 100755 app/src/lib/overlayIndex.ts
 mode change 100644 => 100755 app/src/lib/preview.ts
 mode change 100644 => 100755 app/src/lib/services/7TV/GQL/cosmetics/multiple.gql
 mode change 100644 => 100755 app/src/lib/services/7TV/GQL/cosmetics/single.gql
 mode change 100644 => 100755 app/src/lib/services/7TV/cosmetics.ts
 mode change 100644 => 100755 app/src/lib/services/7TV/main.ts
 mode change 100644 => 100755 app/src/lib/services/7TV/websocket.ts
 mode change 100644 => 100755 app/src/lib/services/BTTV/main.ts
 mode change 100644 => 100755 app/src/lib/services/BTTV/websocket.ts
 mode change 100644 => 100755 app/src/lib/services/FFZ/main.ts
 mode change 100644 => 100755 app/src/lib/services/index.ts
 mode change 100644 => 100755 app/src/lib/services/twitch.ts
 mode change 100644 => 100755 app/src/routes/+error.svelte
 mode change 100644 => 100755 app/src/routes/+layout.svelte
 mode change 100644 => 100755 app/src/routes/+layout.ts
 mode change 100644 => 100755 app/src/routes/+page.svelte
 mode change 100644 => 100755 app/src/routes/auth/+page.svelte
 mode change 100644 => 100755 app/src/routes/convert/+page.svelte
 mode change 100644 => 100755 app/src/routes/design/+page.svelte
 mode change 100644 => 100755 app/src/routes/teapot/+page.ts
 mode change 100644 => 100755 app/src/routes/teapot/[...code]/+page.ts
 mode change 100644 => 100755 app/src/stores/convert/chatis.ts
 mode change 100644 => 100755 app/src/stores/cosmetics.ts
 mode change 100644 => 100755 app/src/stores/faq.ts
 mode change 100644 => 100755 app/src/stores/global.ts
 mode change 100644 => 100755 app/src/stores/previewMessages.ts
 mode change 100644 => 100755 app/src/stores/settings.ts
 mode change 100644 => 100755 app/src/types/converter.d.ts
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-Black.otf
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-Bold.otf
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-ExtraBold.otf
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-ExtraLight.otf
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-Light.otf
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-Medium.otf
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-Regular.otf
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-SemiBold.otf
 mode change 100644 => 100755 app/static/fonts/Geist/Geist-Thin.otf
 mode change 100644 => 100755 app/static/fonts/Just-Sans/JUST-Sans-ExBold.otf
 mode change 100644 => 100755 app/static/fonts/Just-Sans/JUST-Sans-Regular.otf
 mode change 100644 => 100755 app/static/fonts/Melody/BLMelody-Bold.otf
 mode change 100644 => 100755 app/static/fonts/Melody/BLMelody-Book.otf
 mode change 100644 => 100755 app/static/fonts/Melody/BLMelody-ExtraLight.otf
 mode change 100644 => 100755 app/static/fonts/Melody/BLMelody-Light.otf
 mode change 100644 => 100755 app/static/fonts/Melody/BLMelody-Medium.otf
 mode change 100644 => 100755 app/static/fonts/Now/Now-Black.otf
 mode change 100644 => 100755 app/static/fonts/Now/Now-Bold.otf
 mode change 100644 => 100755 app/static/fonts/Now/Now-Light.otf
 mode change 100644 => 100755 app/static/fonts/Now/Now-Medium.otf
 mode change 100644 => 100755 app/static/fonts/Now/Now-Regular.otf
 mode change 100644 => 100755 app/static/fonts/Now/Now-Thin.otf
 mode change 100644 => 100755 app/static/fonts/Satoshi/Satoshi-Black.otf
 mode change 100644 => 100755 app/static/fonts/Satoshi/Satoshi-Bold.otf
 mode change 100644 => 100755 app/static/fonts/Satoshi/Satoshi-Light.otf
 mode change 100644 => 100755 app/static/fonts/Satoshi/Satoshi-Medium.otf
 mode change 100644 => 100755 app/static/fonts/Satoshi/Satoshi-Regular.otf
 mode change 100644 => 100755 app/static/images/banner.png
 mode change 100644 => 100755 app/static/images/favicon.ico
 mode change 100644 => 100755 app/static/images/logo.avif
 mode change 100644 => 100755 app/static/robots.txt
 mode change 100644 => 100755 app/static/sitemap.xml
 mode change 100644 => 100755 app/svelte.config.js
 mode change 100644 => 100755 app/tsconfig.json
 mode change 100644 => 100755 app/vite.config.ts

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
old mode 100644
new mode 100755
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
old mode 100644
new mode 100755
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
old mode 100644
new mode 100755
diff --git a/.github/workflows/build-test.yml b/.github/workflows/build-test.yml
old mode 100644
new mode 100755
diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
old mode 100644
new mode 100755
diff --git a/.vscode/settings.json b/.vscode/settings.json
old mode 100644
new mode 100755
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
old mode 100644
new mode 100755
diff --git a/LICENSE b/LICENSE
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/app/.gitignore b/app/.gitignore
old mode 100644
new mode 100755
diff --git a/app/.prettierignore b/app/.prettierignore
old mode 100644
new mode 100755
diff --git a/app/.prettierrc b/app/.prettierrc
old mode 100644
new mode 100755
diff --git a/app/bun.lock b/app/bun.lock
old mode 100644
new mode 100755
diff --git a/app/bunfig.toml b/app/bunfig.toml
old mode 100644
new mode 100755
diff --git a/app/package.json b/app/package.json
old mode 100644
new mode 100755
diff --git a/app/src/app.d.ts b/app/src/app.d.ts
old mode 100644
new mode 100755
diff --git a/app/src/app.html b/app/src/app.html
old mode 100644
new mode 100755
diff --git a/app/src/app.scss b/app/src/app.scss
old mode 100644
new mode 100755
diff --git a/app/src/components/Badge.svelte b/app/src/components/Badge.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Banner.svelte b/app/src/components/Banner.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/ChatDisplay.svelte b/app/src/components/ChatDisplay.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/ChatMessage.svelte b/app/src/components/ChatMessage.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/ChatOverlay.svelte b/app/src/components/ChatOverlay.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Dialog.svelte b/app/src/components/Dialog.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Inputs/Button.svelte b/app/src/components/Inputs/Button.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Inputs/Checkbox.svelte b/app/src/components/Inputs/Checkbox.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Inputs/Color.svelte b/app/src/components/Inputs/Color.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Inputs/Dropdown.svelte b/app/src/components/Inputs/Dropdown.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Inputs/Input.svelte b/app/src/components/Inputs/Input.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Inputs/Segmented-control.svelte b/app/src/components/Inputs/Segmented-control.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Inputs/Selector.svelte b/app/src/components/Inputs/Selector.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Inputs/Toggle.svelte b/app/src/components/Inputs/Toggle.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Loading.svelte b/app/src/components/Loading.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/LoginButton.svelte b/app/src/components/LoginButton.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main.svelte b/app/src/components/Main.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main/Chat/Display.svelte b/app/src/components/Main/Chat/Display.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main/Chat/Main.svelte b/app/src/components/Main/Chat/Main.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main/Chat/Settings.svelte b/app/src/components/Main/Chat/Settings.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main/Chat/SettingsColorPicker.svelte b/app/src/components/Main/Chat/SettingsColorPicker.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main/GlobalSettings.svelte b/app/src/components/Main/GlobalSettings.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main/Help/Main.svelte b/app/src/components/Main/Help/Main.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main/MessageCreator/Main.svelte b/app/src/components/Main/MessageCreator/Main.svelte
old mode 100644
new mode 100755
diff --git a/app/src/components/Main/Sidebar.svelte b/app/src/components/Main/Sidebar.svelte
old mode 100644
new mode 100755
diff --git a/app/src/lib/assets/favicon.svg b/app/src/lib/assets/favicon.svg
old mode 100644
new mode 100755
diff --git a/app/src/lib/assets/loading.avif b/app/src/lib/assets/loading.avif
old mode 100644
new mode 100755
diff --git a/app/src/lib/badgeParser.ts b/app/src/lib/badgeParser.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/badges.ts b/app/src/lib/badges.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/chat.ts b/app/src/lib/chat.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/chatCommands.ts b/app/src/lib/chatCommands.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/cookie.ts b/app/src/lib/cookie.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/emoteParser.ts b/app/src/lib/emoteParser.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/emotes.ts b/app/src/lib/emotes.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/loadChat.ts b/app/src/lib/loadChat.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/overlayIndex.ts b/app/src/lib/overlayIndex.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/preview.ts b/app/src/lib/preview.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/7TV/GQL/cosmetics/multiple.gql b/app/src/lib/services/7TV/GQL/cosmetics/multiple.gql
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/7TV/GQL/cosmetics/single.gql b/app/src/lib/services/7TV/GQL/cosmetics/single.gql
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/7TV/cosmetics.ts b/app/src/lib/services/7TV/cosmetics.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/7TV/main.ts b/app/src/lib/services/7TV/main.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/7TV/websocket.ts b/app/src/lib/services/7TV/websocket.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/BTTV/main.ts b/app/src/lib/services/BTTV/main.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/BTTV/websocket.ts b/app/src/lib/services/BTTV/websocket.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/FFZ/main.ts b/app/src/lib/services/FFZ/main.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/index.ts b/app/src/lib/services/index.ts
old mode 100644
new mode 100755
diff --git a/app/src/lib/services/twitch.ts b/app/src/lib/services/twitch.ts
old mode 100644
new mode 100755
diff --git a/app/src/routes/+error.svelte b/app/src/routes/+error.svelte
old mode 100644
new mode 100755
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
old mode 100644
new mode 100755
diff --git a/app/src/routes/+layout.ts b/app/src/routes/+layout.ts
old mode 100644
new mode 100755
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
old mode 100644
new mode 100755
diff --git a/app/src/routes/auth/+page.svelte b/app/src/routes/auth/+page.svelte
old mode 100644
new mode 100755
diff --git a/app/src/routes/convert/+page.svelte b/app/src/routes/convert/+page.svelte
old mode 100644
new mode 100755
diff --git a/app/src/routes/design/+page.svelte b/app/src/routes/design/+page.svelte
old mode 100644
new mode 100755
diff --git a/app/src/routes/teapot/+page.ts b/app/src/routes/teapot/+page.ts
old mode 100644
new mode 100755
diff --git a/app/src/routes/teapot/[...code]/+page.ts b/app/src/routes/teapot/[...code]/+page.ts
old mode 100644
new mode 100755
diff --git a/app/src/stores/convert/chatis.ts b/app/src/stores/convert/chatis.ts
old mode 100644
new mode 100755
diff --git a/app/src/stores/cosmetics.ts b/app/src/stores/cosmetics.ts
old mode 100644
new mode 100755
diff --git a/app/src/stores/faq.ts b/app/src/stores/faq.ts
old mode 100644
new mode 100755
diff --git a/app/src/stores/global.ts b/app/src/stores/global.ts
old mode 100644
new mode 100755
diff --git a/app/src/stores/previewMessages.ts b/app/src/stores/previewMessages.ts
old mode 100644
new mode 100755
diff --git a/app/src/stores/settings.ts b/app/src/stores/settings.ts
old mode 100644
new mode 100755
diff --git a/app/src/types/converter.d.ts b/app/src/types/converter.d.ts
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-Black.otf b/app/static/fonts/Geist/Geist-Black.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-Bold.otf b/app/static/fonts/Geist/Geist-Bold.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-ExtraBold.otf b/app/static/fonts/Geist/Geist-ExtraBold.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-ExtraLight.otf b/app/static/fonts/Geist/Geist-ExtraLight.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-Light.otf b/app/static/fonts/Geist/Geist-Light.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-Medium.otf b/app/static/fonts/Geist/Geist-Medium.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-Regular.otf b/app/static/fonts/Geist/Geist-Regular.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-SemiBold.otf b/app/static/fonts/Geist/Geist-SemiBold.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Geist/Geist-Thin.otf b/app/static/fonts/Geist/Geist-Thin.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Just-Sans/JUST-Sans-ExBold.otf b/app/static/fonts/Just-Sans/JUST-Sans-ExBold.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Just-Sans/JUST-Sans-Regular.otf b/app/static/fonts/Just-Sans/JUST-Sans-Regular.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Melody/BLMelody-Bold.otf b/app/static/fonts/Melody/BLMelody-Bold.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Melody/BLMelody-Book.otf b/app/static/fonts/Melody/BLMelody-Book.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Melody/BLMelody-ExtraLight.otf b/app/static/fonts/Melody/BLMelody-ExtraLight.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Melody/BLMelody-Light.otf b/app/static/fonts/Melody/BLMelody-Light.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Melody/BLMelody-Medium.otf b/app/static/fonts/Melody/BLMelody-Medium.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Now/Now-Black.otf b/app/static/fonts/Now/Now-Black.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Now/Now-Bold.otf b/app/static/fonts/Now/Now-Bold.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Now/Now-Light.otf b/app/static/fonts/Now/Now-Light.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Now/Now-Medium.otf b/app/static/fonts/Now/Now-Medium.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Now/Now-Regular.otf b/app/static/fonts/Now/Now-Regular.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Now/Now-Thin.otf b/app/static/fonts/Now/Now-Thin.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Satoshi/Satoshi-Black.otf b/app/static/fonts/Satoshi/Satoshi-Black.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Satoshi/Satoshi-Bold.otf b/app/static/fonts/Satoshi/Satoshi-Bold.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Satoshi/Satoshi-Light.otf b/app/static/fonts/Satoshi/Satoshi-Light.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Satoshi/Satoshi-Medium.otf b/app/static/fonts/Satoshi/Satoshi-Medium.otf
old mode 100644
new mode 100755
diff --git a/app/static/fonts/Satoshi/Satoshi-Regular.otf b/app/static/fonts/Satoshi/Satoshi-Regular.otf
old mode 100644
new mode 100755
diff --git a/app/static/images/banner.png b/app/static/images/banner.png
old mode 100644
new mode 100755
diff --git a/app/static/images/favicon.ico b/app/static/images/favicon.ico
old mode 100644
new mode 100755
diff --git a/app/static/images/logo.avif b/app/static/images/logo.avif
old mode 100644
new mode 100755
diff --git a/app/static/robots.txt b/app/static/robots.txt
old mode 100644
new mode 100755
diff --git a/app/static/sitemap.xml b/app/static/sitemap.xml
old mode 100644
new mode 100755
diff --git a/app/svelte.config.js b/app/svelte.config.js
old mode 100644
new mode 100755
diff --git a/app/tsconfig.json b/app/tsconfig.json
old mode 100644
new mode 100755
diff --git a/app/vite.config.ts b/app/vite.config.ts
old mode 100644
new mode 100755

From d01a314ebc3edb503dcec40a51f738bafce76d0d Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Mon, 22 Jun 2026 12:50:28 +0200
Subject: [PATCH 06/13] fix cursor

---
 app/src/components/Inputs/Input.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/components/Inputs/Input.svelte b/app/src/components/Inputs/Input.svelte
index ca8f9f5..4a650aa 100755
--- a/app/src/components/Inputs/Input.svelte
+++ b/app/src/components/Inputs/Input.svelte
@@ -108,6 +108,7 @@
         span {
             height: 1rem;
             aspect-ratio: 1;
+            cursor: unset;
         }
 
         input {

From 2b4972e27f5d94383e9f70b3965a30c92580a901 Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Mon, 22 Jun 2026 21:02:25 +0200
Subject: [PATCH 07/13] Save

1. Change lucide to not outdated  package
2. Add logos
3. Add more button types
4. Change everything to use variables
5. Added reset style
---
 app/bun.lock                                  |   6 +-
 app/package.json                              |   2 +-
 app/src/components/Banner.svelte              |   2 +-
 app/src/components/Dialog.svelte              |  75 +++++++----
 app/src/components/Inputs/Button.svelte       | 123 ++++++++++++++++--
 app/src/components/Inputs/Checkbox.svelte     |  12 +-
 app/src/components/Inputs/Color.svelte        |   3 +-
 app/src/components/Inputs/Dropdown.svelte     |  59 +++------
 app/src/components/Inputs/Input.svelte        |  30 ++---
 .../Inputs/Segmented-control.svelte           |  26 ++--
 app/src/components/Inputs/Selector.svelte     |   6 +-
 app/src/components/Inputs/Toggle.svelte       |  17 +--
 app/src/components/LoginButton.svelte         |   2 +-
 app/src/components/Main.svelte                |   5 +-
 app/src/components/Main/Chat/Display.svelte   |   2 +-
 app/src/components/Main/Chat/Main.svelte      |   2 +-
 app/src/components/Main/Chat/Settings.svelte  |   2 +-
 .../Main/Chat/SettingsColorPicker.svelte      |   2 +-
 app/src/components/Main/Help/Main.svelte      |   2 +-
 .../Main/MessageCreator/Main.svelte           |   2 +-
 app/src/components/Main/Sidebar.svelte        |  45 ++++---
 app/src/components/logos/github.svelte        |  18 +++
 app/src/components/logos/kick.svelte          |  18 +++
 app/src/components/logos/twitch.svelte        |  23 ++++
 app/src/components/logos/youtube.svelte       |  19 +++
 app/src/lib/fonts.ts                          |  35 +++++
 app/src/routes/+error.svelte                  |   2 +-
 app/src/routes/+layout.svelte                 |   6 +-
 app/src/routes/auth/+page.svelte              |   2 +-
 app/src/routes/design/+page.svelte            |  96 ++++++++++++--
 app/src/routes/design/fonts/+page.svelte      |  27 ++++
 app/src/{ => styles}/app.scss                 |  27 +++-
 app/src/styles/reset.css                      |  70 ++++++++++
 app/src/styles/variables.scss                 |  41 ++++++
 app/svelte.config.js                          |   2 +-
 35 files changed, 631 insertions(+), 180 deletions(-)
 mode change 100755 => 100644 app/bun.lock
 create mode 100644 app/src/components/logos/github.svelte
 create mode 100644 app/src/components/logos/kick.svelte
 create mode 100644 app/src/components/logos/twitch.svelte
 create mode 100644 app/src/components/logos/youtube.svelte
 create mode 100644 app/src/lib/fonts.ts
 create mode 100644 app/src/routes/design/fonts/+page.svelte
 rename app/src/{ => styles}/app.scss (92%)
 create mode 100644 app/src/styles/reset.css
 create mode 100644 app/src/styles/variables.scss

diff --git a/app/bun.lock b/app/bun.lock
old mode 100755
new mode 100644
index 4697429..55387b0
--- a/app/bun.lock
+++ b/app/bun.lock
@@ -5,8 +5,8 @@
     "": {
       "name": "uchat",
       "dependencies": {
+        "@lucide/svelte": "^1.18.0",
         "html-to-image": "^1.11.13",
-        "lucide-svelte": "^0.577.0",
         "svelte-awesome-color-picker": "^4.1.1",
         "tinycolor2": "^1.6.0",
         "twemoji": "^14.0.2",
@@ -48,6 +48,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@lucide/svelte": ["@lucide/svelte@1.18.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-S1cjiJflMLIirDZtZ8ou2Vy0xMrOqEQzYzDo29AUxoJiOjUfMHUeClvprJsGUEr60RYDJzEgkjSkWm1nlN9iyQ=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
 
     "@oxc-project/types": ["@oxc-project/types@0.128.0", "", {}, "sha512-huv1Y/LzBJkBVHt3OlC7u0zHBW9qXf1FdD7sGmc1rXc2P1mTwHssYv7jyGx5KAACSCH+9B3Bhn6Z9luHRvf7pQ=="],
@@ -216,8 +218,6 @@
 
     "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
 
-    "lucide-svelte": ["lucide-svelte@0.577.0", "", { "peerDependencies": { "svelte": "^3 || ^4 || ^5.0.0-next.42" } }, "sha512-0i88o57KsaHWnc80J57fY99CWzlZsSdtH5kKjLUJa7z8dum/9/AbINNLzJ7NiRFUdOgMnfAmJt8jFbW2zeC5qQ=="],
-
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "moment": ["moment@2.30.1", "", {}, "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="],
diff --git a/app/package.json b/app/package.json
index 2e1551a..123dd40 100755
--- a/app/package.json
+++ b/app/package.json
@@ -31,8 +31,8 @@
         "vite": "^8.0.0"
     },
     "dependencies": {
+        "@lucide/svelte": "^1.18.0",
         "html-to-image": "^1.11.13",
-        "lucide-svelte": "^0.577.0",
         "svelte-awesome-color-picker": "^4.1.1",
         "tinycolor2": "^1.6.0",
         "twemoji": "^14.0.2"
diff --git a/app/src/components/Banner.svelte b/app/src/components/Banner.svelte
index 0bd4793..782da6b 100755
--- a/app/src/components/Banner.svelte
+++ b/app/src/components/Banner.svelte
@@ -5,7 +5,7 @@
         CloudAlert,
         ServerOff,
         Wrench,
-    } from "lucide-svelte";
+    } from "@lucide/svelte";
 
     const {
         type = "fail",
diff --git a/app/src/components/Dialog.svelte b/app/src/components/Dialog.svelte
index 04780b8..5c10b9f 100755
--- a/app/src/components/Dialog.svelte
+++ b/app/src/components/Dialog.svelte
@@ -1,16 +1,32 @@
 <script lang="ts">
-    import { X } from "lucide-svelte";
+    import { X } from "@lucide/svelte";
+    import type { Snippet } from "svelte";
+    import Button from "./Inputs/Button.svelte";
 
-    let { name, show = $bindable(false), children } = $props();
+    type Props = {
+        name: string;
+        show: boolean;
+        buttons?: Snippet;
+        children: Snippet;
+    };
+
+    let { name, show = $bindable(false), buttons, children }: Props = $props();
 
     const close = () => (show = false);
 </script>
 
 {#if show}
     <section class="dialog">
-        <h3>{name} <button onclick={close}><X /></button></h3>
-
-        {@render children()}
+        <span id="header">
+            <p>{name}</p>
+            <Button ghost onclick={close}><X /></Button>
+        </span>
+        <hr />
+        <section id="content">{@render children()}</section>
+        {#if typeof buttons != "undefined"}
+            <hr />
+            <section id="buttons">{@render buttons()}</section>
+        {/if}
     </section>
     <section id="site-blackout"></section>
 {/if}
@@ -20,7 +36,7 @@
         position: absolute;
         width: 100%;
         height: 100%;
-        background-color: rgba(0, 0, 0, 0.25);
+        background-color: rgba(0, 0, 0, 0.5);
         z-index: 999;
     }
 
@@ -30,46 +46,53 @@
         left: 50%;
         transform: translate(-50%, -50%);
         z-index: 100000;
-        background-color: rgb(17, 17, 17);
+        background-color: #0a0a0a;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
+
+        // overflow: hidden;
 
         display: flex;
         flex-direction: column;
-
-        gap: 0.7rem;
-
         max-width: 30rem;
         max-height: 25rem;
 
-        padding: 0.4rem 0.7rem;
+        border-radius: 1rem;
 
-        border-radius: 0.5rem;
+        & > *:not(hr) {
+            padding: 0.75rem;
+            // outline: 1px red solid;
+        }
 
-        h3 {
+        #header {
             margin: 0;
-            display: flex;
+            display: inline-flex;
+            align-items: center;
             justify-content: space-between;
             user-select: none;
-            padding-bottom: 0.2rem;
-
-            border-bottom: 1px #242424 solid;
+        }
 
-            button {
-                background: none;
-                border: none;
-                cursor: pointer;
+        #buttons {
+            display: inline-flex;
+            justify-content: space-between;
 
-                color: white;
+            padding-block: 0.5rem;
 
-                &:hover {
-                    color: rgba(255, 255, 255, 0.75);
-                }
+            & > :global(*) {
+                display: inline-flex;
+                gap: 0.5rem;
             }
         }
     }
 
     @media (max-width: 768px) {
         .dialog {
-            width: 80%;
+            max-width: unset;
+            max-height: unset;
+
+            border-radius: unset;
+
+            width: 100%;
+            height: 100%;
         }
     }
 </style>
diff --git a/app/src/components/Inputs/Button.svelte b/app/src/components/Inputs/Button.svelte
index 4bd8d4f..be08447 100755
--- a/app/src/components/Inputs/Button.svelte
+++ b/app/src/components/Inputs/Button.svelte
@@ -9,21 +9,57 @@
         href?: string | null;
         icon?: Snippet;
         iconRight?: Snippet;
+        element?: HTMLElement;
+        disabled?: boolean;
+        secondary?: boolean;
+        ghost?: boolean;
+        danger?: boolean;
+        approve?: boolean;
         children?: Snippet;
     } & HTMLButtonAttributes &
         HTMLAnchorAttributes;
 
-    const { href, icon, iconRight, children, ...restProps }: Props = $props();
+    let {
+        href,
+        icon,
+        iconRight,
+        element = $bindable(),
+        disabled = false,
+        secondary = false,
+        ghost = false,
+        danger = false,
+        approve = false,
+        children,
+        ...restProps
+    }: Props = $props();
 </script>
 
 {#if href}
-    <a {href} {...restProps}>
+    <a
+        bind:this={element}
+        {href}
+        {...restProps}
+        class:secondary
+        class:ghost
+        class:danger
+        class:disabled
+        class:approve
+    >
         {@render icon?.()}
         {@render children?.()}
         {@render iconRight?.()}
     </a>
 {:else}
-    <button {...restProps}>
+    <button
+        bind:this={element}
+        {...restProps}
+        {disabled}
+        class:secondary
+        class:ghost
+        class:danger
+        class:disabled
+        class:approve
+    >
         {@render icon?.()}
         {@render children?.()}
         {@render iconRight?.()}
@@ -33,31 +69,96 @@
 <style lang="scss">
     a,
     button {
-        background-color: #191919;
-        border: none;
-        color: white;
+        background-color: var(--primary);
+        color: var(--primary-text);
+        border: var(--primary-border);
         border-radius: 10px;
         padding: 0.5rem;
         cursor: pointer;
         font-size: 1rem;
-        text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 0.25rem;
 
+        text-decoration: none !important;
+
         transition:
             background-color 0.2s ease,
             border-radius 0.2s ease;
 
         &:active,
         &:hover {
-            background-color: #1c1c1c;
-            border-radius: 5px;
+            background-color: var(--primary-hover);
+            border-radius: 7px;
         }
 
         &.active {
-            background-color: #252525;
-            border-radius: 3px;
+            background-color: var(--primary-active);
+            border-radius: 5px;
+        }
+
+        &.secondary {
+            background-color: var(--secondary);
+            color: var(--secondary-text);
+            border: var(--secondary-border);
+
+            &:active,
+            &:hover {
+                background-color: var(--secondary-hover);
+            }
+
+            &.active {
+                background-color: var(--secondary-active);
+            }
+        }
+
+        &.ghost {
+            background-color: var(--ghost);
+            color: var(--ghost-text);
+            border: var(--ghost-border);
+
+            &:active,
+            &:hover {
+                background-color: var(--ghost-hover);
+            }
+
+            &.active {
+                background-color: var(--ghost-active);
+            }
+        }
+
+        &.danger {
+            background-color: var(--danger);
+            color: var(--danger-text);
+            border: var(--danger-border);
+
+            &:active,
+            &:hover {
+                background-color: var(--danger-hover);
+                color: var(--danger-text-hover);
+            }
+
+            &.active {
+                background-color: var(--danger-active);
+                color: var(--danger-text-active);
+            }
+        }
+
+        &.approve {
+            background-color: var(--approve);
+            color: var(--approve-text);
+            border: var(--approve-border);
+
+            &:active,
+            &:hover {
+                background-color: var(--approve-hover);
+                color: var(--approve-text-hover);
+            }
+
+            &.active {
+                background-color: var(--approve-active);
+                color: var(--approve-text-active);
+            }
         }
     }
 </style>
diff --git a/app/src/components/Inputs/Checkbox.svelte b/app/src/components/Inputs/Checkbox.svelte
index ff68418..ca31461 100755
--- a/app/src/components/Inputs/Checkbox.svelte
+++ b/app/src/components/Inputs/Checkbox.svelte
@@ -11,7 +11,7 @@
     label {
         display: inline-flex;
         align-items: center;
-        gap: 0.05rem;
+        gap: 0.25rem;
         cursor: pointer;
 
         & > * {
@@ -19,22 +19,22 @@
         }
 
         &:hover input {
-            background-color: #5c5c5c;
+            background-color: var(--secondary-hover);
         }
 
         input {
             appearance: none;
             width: 1rem;
             aspect-ratio: 1;
-            background-color: #474747;
+            background-color: var(--secondary);
 
-            border: 0.15rem #535353 solid;
+            border: 0.15rem var(--secondary-active) solid;
             border-radius: 0.25rem;
             transition: background-color 0.2s ease;
 
             &:checked {
-                background-color: #7c5cfc;
-                border-color: #544b7b;
+                background-color: var(--accent);
+                border-color: var(--secondary-active);
             }
         }
     }
diff --git a/app/src/components/Inputs/Color.svelte b/app/src/components/Inputs/Color.svelte
index a32a402..9e5ba1c 100755
--- a/app/src/components/Inputs/Color.svelte
+++ b/app/src/components/Inputs/Color.svelte
@@ -28,7 +28,8 @@
     label {
         display: inline-flex;
         align-items: center;
-        background-color: #1b1b1b;
+        gap: 0.15rem;
+        background-color: var(--secondary);
         padding: 0.25rem 0.5rem;
         border-radius: 0.25rem;
 
diff --git a/app/src/components/Inputs/Dropdown.svelte b/app/src/components/Inputs/Dropdown.svelte
index 9e0d558..ba26e2f 100755
--- a/app/src/components/Inputs/Dropdown.svelte
+++ b/app/src/components/Inputs/Dropdown.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { HTMLAttributes } from "svelte/elements";
     import type { Snippet } from "svelte";
-    import { ChevronDown, ChevronUp } from "lucide-svelte";
+    import { ChevronDown, ChevronUp } from "@lucide/svelte";
 
     type Props = {
         dropdown?: Snippet;
@@ -40,15 +40,13 @@
 >
     <button id="top">
         {@render children?.()}
-        {#if (!expanded && !reversed) || (expanded && reversed)}
+        {#if !expanded}
             <ChevronDown size="1rem" />
         {:else}
             <ChevronUp size="1rem" />
         {/if}
     </button>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <span id="dropdown" onclick={() => expanded && close}>
+    <span id="dropdown">
         {@render dropdown?.()}
     </span>
 </div>
@@ -57,8 +55,7 @@
     div {
         display: flex;
         flex-direction: column;
-        background-color: #1b1b1b;
-        padding: 0.5rem;
+        background-color: var(--secondary);
 
         border-radius: 10px;
 
@@ -66,11 +63,12 @@
 
         cursor: pointer;
 
+        white-space: nowrap;
+
         #dropdown {
             display: flex;
             flex-direction: column;
 
-            padding-inline: 0.5rem;
             box-sizing: border-box;
 
             z-index: 9999;
@@ -78,45 +76,29 @@
             max-height: 0px;
             overflow: hidden;
 
-            position: absolute;
-            left: 0;
-
             border-radius: 0px 0px 10px 10px;
 
-            background-color: #1b1b1b;
+            position: relative;
 
-            width: 100%;
-        }
+            min-width: fit-content;
 
-        &:not(.reversed) #dropdown {
-            top: 100%;
-        }
+            background-color: var(--secondary);
+
+            width: 100%;
 
-        &.reversed #dropdown {
-            bottom: 100%;
+            overflow-y: auto;
+            overflow-x: hidden;
         }
 
         &.expanded {
-            &:not(.reversed) {
-                border-radius: 10px 10px 0px 0px;
-
-                #dropdown {
-                    border-top: #1f1f1f 2px solid;
+            #dropdown {
+                border-top: var(--secondary-active) 2px solid;
 
-                    max-height: unset;
-                }
+                max-height: 20vh;
+                max-height: 20dvh;
             }
-
-            &.reversed {
-                border-radius: 0px 0px 10px 10px;
-
-                #dropdown {
-                    border-radius: 10px 10px 0px 0px;
-
-                    border-bottom: #1f1f1f 2px solid;
-
-                    max-height: unset;
-                }
+            &.reversed #dropdown {
+                flex-direction: column-reverse;
             }
         }
     }
@@ -124,11 +106,12 @@
     #top {
         background: none;
         border: none;
-        color: white;
+        color: currentColor;
         display: inline-flex;
         align-items: center;
         font-size: inherit;
         cursor: inherit;
         gap: 0.5rem;
+        padding: 0.5rem;
     }
 </style>
diff --git a/app/src/components/Inputs/Input.svelte b/app/src/components/Inputs/Input.svelte
index 4a650aa..8dd5167 100755
--- a/app/src/components/Inputs/Input.svelte
+++ b/app/src/components/Inputs/Input.svelte
@@ -5,7 +5,7 @@
         HTMLAnchorAttributes,
     } from "svelte/elements";
 
-    import { X, Ban } from "lucide-svelte";
+    import { X, Ban } from "@lucide/svelte";
     import { fade } from "svelte/transition";
 
     type Props = {
@@ -62,44 +62,32 @@
         align-items: center;
         gap: 0.25rem;
 
-        background-color: #1b1b1b;
+        background-color: var(--secondary);
 
-        border: 0.15rem #242424 solid;
+        border: 0.15rem var(--secondary-active) solid;
         border-radius: 0.25rem;
         padding: 0.25rem;
 
         cursor: text;
 
         &:hover {
-            background-color: #282828;
-            border-color: #5c5c5c;
+            background-color: var(--secondary-active);
+            border-color: var(--text-light);
         }
 
         &:focus-within {
-            border-color: #cfcfcf;
+            border-color: var(--text-light);
         }
 
         &.invalid {
-            border-color: #e23636;
-        }
-
-        &.disabled {
-            background-color: #1d1d1d;
-            border-color: #151515;
-            color: #363636;
-
-            cursor: not-allowed;
-
-            &::placeholder {
-                color: #363636;
-            }
+            border-color: var(--danger-hover);
         }
 
         span,
         button {
             background-color: transparent;
             border: none;
-            color: white;
+            color: currentColor;
             cursor: pointer;
             padding: 0rem;
             display: inline-flex;
@@ -114,7 +102,7 @@
         input {
             background-color: transparent;
             border: none;
-            color: white;
+            color: currentColor;
 
             overflow: hidden;
             text-overflow: ellipsis;
diff --git a/app/src/components/Inputs/Segmented-control.svelte b/app/src/components/Inputs/Segmented-control.svelte
index 201be04..a26f74a 100755
--- a/app/src/components/Inputs/Segmented-control.svelte
+++ b/app/src/components/Inputs/Segmented-control.svelte
@@ -9,7 +9,8 @@
     interface Option {
         id: string;
         label?: string;
-        icon?: Snippet;
+        disabled?: boolean;
+        icon?: Snippet<[boolean]>;
     }
 
     type Props = {
@@ -30,13 +31,14 @@
 </script>
 
 <section>
-    {#each options as { id, label, icon }}
+    {#each options as { id, label, disabled, icon }}
         <button
             data-id={id}
             class:selected={value == id}
             onclick={() => (value = id)}
+            {disabled}
         >
-            {@render icon?.()}
+            {@render icon?.(value == id && !disabled)}
             {#if label}
                 <p>{label}</p>
             {/if}
@@ -54,7 +56,7 @@
 <style lang="scss">
     section {
         display: flex;
-        background-color: #1b1b1b;
+        background-color: var(--secondary);
 
         gap: 0.25rem;
         padding: 0.35rem;
@@ -65,9 +67,17 @@
         button {
             background: none;
             border: none;
-            color: white;
+            color: currentColor;
             position: relative;
 
+            &:hover {
+                background-color: var(--secondary-hover);
+            }
+
+            &[disabled] {
+                opacity: 0.1;
+            }
+
             font-weight: bold;
 
             gap: 0.25rem;
@@ -89,16 +99,14 @@
 
             cursor: pointer;
 
-            p {
-                margin: 0;
-            }
+            transition: background-color 0.3s ease;
         }
     }
 
     .slider {
         position: absolute;
         inset: 0;
-        background-color: #262626;
+        background-color: var(--secondary-active);
         border-radius: 0.25rem;
         z-index: -1;
     }
diff --git a/app/src/components/Inputs/Selector.svelte b/app/src/components/Inputs/Selector.svelte
index 5f05bc8..97b98fb 100755
--- a/app/src/components/Inputs/Selector.svelte
+++ b/app/src/components/Inputs/Selector.svelte
@@ -42,7 +42,7 @@
 
     section {
         display: flex;
-        background-color: #1b1b1b;
+        background-color: var(--secondary);
 
         gap: 0.25rem;
         padding: 0.35rem;
@@ -52,13 +52,13 @@
 
         label {
             border: none;
-            color: white;
+            color: currentColor;
             position: relative;
 
             gap: 0.25rem;
 
             opacity: 0.5;
-            background-color: #262626;
+            background-color: var(--secondary-active);
 
             &.enabled {
                 opacity: 1;
diff --git a/app/src/components/Inputs/Toggle.svelte b/app/src/components/Inputs/Toggle.svelte
index 0cb83a3..b0a4858 100755
--- a/app/src/components/Inputs/Toggle.svelte
+++ b/app/src/components/Inputs/Toggle.svelte
@@ -14,7 +14,7 @@
         position: relative;
         width: calc(var(--size) * 2);
         height: var(--size);
-        background-color: #272727;
+        background-color: var(--secondary-active);
         border-radius: 100rem;
         cursor: pointer;
         transition: background-color 0.2s ease;
@@ -24,7 +24,7 @@
             position: absolute;
             width: calc(var(--size) - 4px);
             height: calc(var(--size) - 4px);
-            background: #737373;
+            background: var(--text-light);
             border-radius: 50%;
             top: 50%;
             left: 2px;
@@ -35,21 +35,12 @@
         }
 
         &:checked {
-            background-color: #3d8445;
+            background-color: var(--approve-hover);
 
             &::after {
-                background: white;
+                background: var(--text);
                 left: calc(100% - var(--size) + 2px);
             }
         }
-
-        &[disabled] {
-            cursor: not-allowed;
-            background-color: #1c1c1c;
-
-            &::after {
-                background-color: #414141;
-            }
-        }
     }
 </style>
diff --git a/app/src/components/LoginButton.svelte b/app/src/components/LoginButton.svelte
index 5750252..bd6bab1 100755
--- a/app/src/components/LoginButton.svelte
+++ b/app/src/components/LoginButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
 
-    import { LogIn, LogOut } from "lucide-svelte";
+    import { LogIn, LogOut } from "@lucide/svelte";
 
     import { delCookie, getCookie, setCookie } from "$lib/cookie";
 
diff --git a/app/src/components/Main.svelte b/app/src/components/Main.svelte
index e20801c..f677e8a 100755
--- a/app/src/components/Main.svelte
+++ b/app/src/components/Main.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Coffee, Github, Home, Info } from "lucide-svelte";
+    import { Coffee, Home, Info } from "@lucide/svelte";
 
     import MainDisplay from "./Main/Chat/Main.svelte";
 
@@ -8,6 +8,7 @@
     import MessageCreatorMain from "./Main/MessageCreator/Main.svelte";
 
     import { icon_size, isMobile } from "$stores/global";
+    import Github from "./logos/github.svelte";
 
     let hash = window.location.hash;
 
@@ -40,7 +41,7 @@
             target="_blank"
             rel="noopener noreferrer"
         >
-            <Github size={$icon_size} /> GitHub
+            <Github /> GitHub
         </a>
         <a
             class="hide-on-small"
diff --git a/app/src/components/Main/Chat/Display.svelte b/app/src/components/Main/Chat/Display.svelte
index 240e9ac..67b4615 100755
--- a/app/src/components/Main/Chat/Display.svelte
+++ b/app/src/components/Main/Chat/Display.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { RotateCcw, Copy, Send } from "lucide-svelte";
+    import { RotateCcw, Copy, Send } from "@lucide/svelte";
     import ColorPicker, { ChromeVariant } from "svelte-awesome-color-picker";
 
     import { messages, sanitizeInput } from "$lib/chat";
diff --git a/app/src/components/Main/Chat/Main.svelte b/app/src/components/Main/Chat/Main.svelte
index 0653221..17ac72d 100755
--- a/app/src/components/Main/Chat/Main.svelte
+++ b/app/src/components/Main/Chat/Main.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { MessageSquare, Settings } from "lucide-svelte";
+    import { MessageSquare, Settings } from "@lucide/svelte";
 
     import SettingsDisplay from "./Settings.svelte";
     import ChatDisplay from "./Display.svelte";
diff --git a/app/src/components/Main/Chat/Settings.svelte b/app/src/components/Main/Chat/Settings.svelte
index d19effb..cdeac88 100755
--- a/app/src/components/Main/Chat/Settings.svelte
+++ b/app/src/components/Main/Chat/Settings.svelte
@@ -12,7 +12,7 @@
         settings,
         settingsParams,
     } from "$stores/settings";
-    import { CircleQuestionMark } from "lucide-svelte";
+    import { CircleQuestionMark } from "@lucide/svelte";
     import { isMobile } from "$stores/global";
 
     export let dispayChannelInput: boolean = true;
diff --git a/app/src/components/Main/Chat/SettingsColorPicker.svelte b/app/src/components/Main/Chat/SettingsColorPicker.svelte
index b95585f..6887d41 100755
--- a/app/src/components/Main/Chat/SettingsColorPicker.svelte
+++ b/app/src/components/Main/Chat/SettingsColorPicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import ColorPicker, { ChromeVariant } from "svelte-awesome-color-picker";
-    import { RotateCcw } from "lucide-svelte";
+    import { RotateCcw } from "@lucide/svelte";
 
     export let hex = "#FFFFFF";
     export let onChange: ((hex: string) => void) | null = null;
diff --git a/app/src/components/Main/Help/Main.svelte b/app/src/components/Main/Help/Main.svelte
index 386e94c..d647839 100755
--- a/app/src/components/Main/Help/Main.svelte
+++ b/app/src/components/Main/Help/Main.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
 
-    import { CircleQuestionMark, ShieldCheck } from "lucide-svelte";
+    import { CircleQuestionMark, ShieldCheck } from "@lucide/svelte";
 
     import { faqItems, privacyItems } from "$stores/faq";
 
diff --git a/app/src/components/Main/MessageCreator/Main.svelte b/app/src/components/Main/MessageCreator/Main.svelte
index 667e1df..e33afc8 100755
--- a/app/src/components/Main/MessageCreator/Main.svelte
+++ b/app/src/components/Main/MessageCreator/Main.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import ChatDisplay from "$components/ChatDisplay.svelte";
     import { messages } from "$lib/chat";
-    import { Download, RefreshCcw } from "lucide-svelte";
+    import { Download, RefreshCcw } from "@lucide/svelte";
     import Settings from "$components/Main/Chat/Settings.svelte";
 
     import { toPng } from "html-to-image";
diff --git a/app/src/components/Main/Sidebar.svelte b/app/src/components/Main/Sidebar.svelte
index f480bf2..1b91b31 100755
--- a/app/src/components/Main/Sidebar.svelte
+++ b/app/src/components/Main/Sidebar.svelte
@@ -2,11 +2,10 @@
     import {
         House,
         Info,
-        Github,
         Coffee,
         MessageSquareMore,
         ArrowLeftRight,
-    } from "lucide-svelte";
+    } from "@lucide/svelte";
 
     import moment from "moment/min/moment-with-locales";
 
@@ -18,6 +17,8 @@
 
     import { dev } from "$app/environment";
     import { page } from "$app/state";
+    import Github from "$components/logos/github.svelte";
+    import Button from "$components/Inputs/Button.svelte";
 
     let currentHash = window.location.hash || "#";
 
@@ -113,35 +114,47 @@
 
     <nav>
         {#if page.route.id == "/"}
-            <a href="/#" class="active" bind:this={navLinks["home"]["navLink"]}>
+            <Button
+                secondary
+                href="/#"
+                class="active"
+                bind:element={navLinks["home"]["navLink"]}
+            >
                 <House size="20" /> Home
-            </a>
-            <a
+            </Button>
+            <Button
+                secondary
                 href="#message-creator"
-                bind:this={navLinks["msgCreator"]["navLink"]}
+                bind:element={navLinks["msgCreator"]["navLink"]}
             >
                 <MessageSquareMore size="20" /> Message creator
-            </a>
-            <a href="/convert">
+            </Button>
+            <Button secondary href="/convert">
                 <ArrowLeftRight size="20" /> Convert
-            </a>
-            <a href="#help" bind:this={navLinks["help"]["navLink"]}>
+            </Button>
+            <Button
+                secondary
+                href="#help"
+                bind:element={navLinks["help"]["navLink"]}
+            >
                 <Info size="20" /> Info & Privacy
-            </a>
-            <a
+            </Button>
+            <Button
+                secondary
                 href="https://github.com/Fiszh/UChat"
                 target="_blank"
                 rel="noopener noreferrer"
             >
-                <Github size="20" /> GitHub
-            </a>
-            <a
+                <Github size={20} /> GitHub
+            </Button>
+            <Button
+                secondary
                 href="https://buymeacoffee.com/jzlnkf5qgo"
                 target="_blank"
                 rel="noopener noreferrer"
             >
                 <Coffee size="20" /> Support
-            </a>
+            </Button>
         {:else}
             <a href="/#">
                 <House size="20" /> Home
diff --git a/app/src/components/logos/github.svelte b/app/src/components/logos/github.svelte
new file mode 100644
index 0000000..6b4ea7c
--- /dev/null
+++ b/app/src/components/logos/github.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    let {
+        size = 1.2 * 16,
+        brandColor = false,
+    }: { size?: number; brandColor?: boolean } = $props();
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 98 96"
+    width={size}
+    height={size}
+>
+    <path
+        d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"
+        fill={brandColor ? "#00E701" : "currentColor"}
+    />
+</svg>
diff --git a/app/src/components/logos/kick.svelte b/app/src/components/logos/kick.svelte
new file mode 100644
index 0000000..420068c
--- /dev/null
+++ b/app/src/components/logos/kick.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    let {
+        size = 1.2 * 16,
+        brandColor = false,
+    }: { size?: number; brandColor?: boolean } = $props();
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 453.9 510.6"
+    width={size}
+    height={size}
+>
+    <path
+        d="M0,0h170.2v113.5h56.7v-56.7h56.7V0h170.2v170.2h-56.7v56.7h-56.7v56.7h56.7v56.7h56.7v170.2h-170.2v-56.7h-56.7v-56.7h-56.7v113.5H0V0Z"
+        fill={brandColor ? "#53fc18" : "currentColor"}
+    />
+</svg>
diff --git a/app/src/components/logos/twitch.svelte b/app/src/components/logos/twitch.svelte
new file mode 100644
index 0000000..799adf8
--- /dev/null
+++ b/app/src/components/logos/twitch.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    let {
+        size = 1.2 * 16,
+        brandColor = false,
+    }: { size?: number; brandColor?: boolean } = $props();
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2400 2800"
+    width={size}
+    height={size}
+>
+    <g fill={brandColor ? "#9146FF" : "currentColor"}>
+        <path
+            d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600V1300z"
+        />
+
+        <rect x="1700" y="550" width="200" height="600" />
+
+        <rect x="1150" y="550" width="200" height="600" />
+    </g>
+</svg>
diff --git a/app/src/components/logos/youtube.svelte b/app/src/components/logos/youtube.svelte
new file mode 100644
index 0000000..e9670a7
--- /dev/null
+++ b/app/src/components/logos/youtube.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    let {
+        size = 1.2 * 16,
+        brandColor = false,
+    }: { size?: number; brandColor?: boolean } = $props();
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 576 512"
+    width={size}
+    height={size}
+>
+    <path
+        d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3z"
+        fill={brandColor ? "#FF0033" : "#636363"}
+    />
+    <path d="M232.2 337.6V175.2l142.7 81.2-142.7 81.2z" fill="#ffffff" />
+</svg>
diff --git a/app/src/lib/fonts.ts b/app/src/lib/fonts.ts
new file mode 100644
index 0000000..4ad4338
--- /dev/null
+++ b/app/src/lib/fonts.ts
@@ -0,0 +1,35 @@
+export interface LocalFontData {
+    family: string;
+    fullName: string;
+    postscriptName: string;
+    style: string;
+}
+
+export async function queryLocalFonts(): Promise<LocalFontData[] | string> {
+    if (typeof window !== "undefined") {
+        try {
+            const status = await (navigator as any).permissions.query({
+                name: "local-fonts",
+            });
+
+            if (status.state === "denied") {
+                throw new Error("Permission to access local fonts was denied.");
+            }
+
+            if (status.state === "granted" || status.state === "prompt") {
+                if ("queryLocalFonts" in window) {
+                    return await (window as any).queryLocalFonts();
+                } else {
+                    throw new Error(
+                        "Your browser does not support the Local Font Access API.",
+                    );
+                }
+            }
+        } catch (err: any) {
+            console.error("Failed to fetch local fonts:", err);
+            alert(err.message);
+            return err.message;
+        }
+    }
+    return [];
+}
diff --git a/app/src/routes/+error.svelte b/app/src/routes/+error.svelte
index 651d43c..f4efcbb 100755
--- a/app/src/routes/+error.svelte
+++ b/app/src/routes/+error.svelte
@@ -6,7 +6,7 @@
 
     import SevenTV_main from "$lib/services/7TV/main";
     import { page } from "$app/state";
-    import { Dot, DotIcon } from "lucide-svelte";
+    import { Dot, DotIcon } from "@lucide/svelte";
 
     let loaded = $state(false);
     let isAbleToGoBack = $state(true);
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 50bce61..7df4434 100755
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -3,7 +3,9 @@
 
     import Sidebar from "$components/Main/Sidebar.svelte";
 
-    import "app.scss";
+    import "$styles/variables.scss";
+    import "$styles/reset.css";
+    import "$styles/app.scss";
 
     import { page } from "$app/state";
     import Banner from "$components/Banner.svelte";
@@ -57,7 +59,7 @@
 
         overflow: hidden;
 
-        background: linear-gradient(#080808, #000000);
+        background: #0a0a0a;
     }
 
     @media (max-width: 768px) {
diff --git a/app/src/routes/auth/+page.svelte b/app/src/routes/auth/+page.svelte
index 12f7bf5..16a5c27 100755
--- a/app/src/routes/auth/+page.svelte
+++ b/app/src/routes/auth/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
 
-    import "app.scss";
+    import "$styles/app.scss";
 
     onMount(() => {
         const hash = new URLSearchParams(window.location.hash.slice(1));
diff --git a/app/src/routes/design/+page.svelte b/app/src/routes/design/+page.svelte
index 55c5b36..9447513 100755
--- a/app/src/routes/design/+page.svelte
+++ b/app/src/routes/design/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import Button from "$components/Inputs/Button.svelte";
     import Toggle from "$components/Inputs/Toggle.svelte";
     import Checkbox from "$components/Inputs/Checkbox.svelte";
@@ -7,7 +7,11 @@
     import SegmentedControl from "$components/Inputs/Segmented-control.svelte";
     import Selector from "$components/Inputs/Selector.svelte";
     import Dropdown from "$components/Inputs/Dropdown.svelte";
-    import { House, ChevronRight, Search } from "lucide-svelte";
+    import { House, ChevronRight, Search } from "@lucide/svelte";
+    import Twitch from "$components/logos/twitch.svelte";
+    import Kick from "$components/logos/kick.svelte";
+    import Youtube from "$components/logos/youtube.svelte";
+    import Dialog from "$components/Dialog.svelte";
 
     //FIXME MAKE SELECTOR WAY BETTER WITHOUT THE NEED OF THIS
     let selectorOptions = $state([
@@ -16,8 +20,28 @@
         { enabled: true, label: "dolor" },
         { enabled: true, label: "sit" },
     ]);
+
+    let showTestDialog = $state(false);
 </script>
 
+{#snippet buttons()}
+    <Button danger>Lorem</Button>
+    <section>
+        <Button>Ipsum</Button>
+        <Button secondary>Dolor</Button>
+    </section>
+{/snippet}
+
+<Dialog bind:show={showTestDialog} name="Lorem" {buttons}>
+    <section id="layout">
+        <h2>Lorem ipsum</h2>
+        <small>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore
+        </small>
+    </section>
+</Dialog>
+
 <main>
     <h1>UChat Design Page</h1>
 
@@ -31,17 +55,60 @@
         <Search size="1rem" />
     {/snippet}
 
+    {#snippet logoTwitch(chosen: boolean)}
+        <Twitch brandColor={chosen} />
+    {/snippet}
+    {#snippet logoKick(chosen: boolean)}
+        <Kick brandColor={chosen} />
+    {/snippet}
+    {#snippet logoYouTube(chosen: boolean)}
+        <Youtube brandColor={chosen} />
+    {/snippet}
+
     {#snippet dropdown()}
-        <Button>Lorem</Button>
-        <Button>ipsum</Button>
-        <Button>dolor</Button>
+        <Button secondary>Lorem</Button>
+        <Button secondary>ipsum</Button>
+        <Button secondary>dolor</Button>
     {/snippet}
 
     <section>
-        <p>Buttons</p>
+        <p>Buttons Primary</p>
         <Button {icon}>Lorem ipsum</Button>
         <Button {iconRight}>Lorem ipsum</Button>
         <Button>Lorem ipsum</Button>
+        <Button disabled>Lorem ipsum</Button>
+    </section>
+
+    <section>
+        <p>Buttons Secondary</p>
+        <Button secondary {icon}>Lorem ipsum</Button>
+        <Button secondary {iconRight}>Lorem ipsum</Button>
+        <Button secondary>Lorem ipsum</Button>
+        <Button secondary disabled>Lorem ipsum</Button>
+    </section>
+
+    <section>
+        <p>Buttons Ghost</p>
+        <Button ghost {icon}>Lorem ipsum</Button>
+        <Button ghost {iconRight}>Lorem ipsum</Button>
+        <Button ghost>Lorem ipsum</Button>
+        <Button ghost disabled>Lorem ipsum</Button>
+    </section>
+
+    <section>
+        <p>Buttons Danger</p>
+        <Button danger {icon}>Lorem ipsum</Button>
+        <Button danger {iconRight}>Lorem ipsum</Button>
+        <Button danger>Lorem ipsum</Button>
+        <Button danger disabled>Lorem ipsum</Button>
+    </section>
+
+    <section>
+        <p>Buttons Approve</p>
+        <Button approve {icon}>Lorem ipsum</Button>
+        <Button approve {iconRight}>Lorem ipsum</Button>
+        <Button approve>Lorem ipsum</Button>
+        <Button approve disabled>Lorem ipsum</Button>
     </section>
 
     <section>
@@ -84,10 +151,14 @@
         <p>Segment Control</p>
         <SegmentedControl
             options={[
-                { id: "1", label: "Lorem", icon },
-                { id: "2", label: "ipsum" },
-                { id: "3", label: "dolor" },
-                { id: "4", label: "sit" },
+                { id: "1", label: "Twitch", icon: logoTwitch },
+                { id: "2", label: "Kick", icon: logoKick },
+                {
+                    id: "3",
+                    label: "YouTube",
+                    disabled: true,
+                    icon: logoYouTube,
+                },
             ]}
         />
     </section>
@@ -96,6 +167,11 @@
         <p>Selector</p>
         <Selector options={selectorOptions} />
     </section>
+
+    <section>
+        <p>Dialog</p>
+        <Button onclick={() => (showTestDialog = true)}>Show Dialog</Button>
+    </section>
 </main>
 
 <style>
diff --git a/app/src/routes/design/fonts/+page.svelte b/app/src/routes/design/fonts/+page.svelte
new file mode 100644
index 0000000..6fdcb39
--- /dev/null
+++ b/app/src/routes/design/fonts/+page.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import Button from "$components/Inputs/Button.svelte";
+    import Dropdown from "$components/Inputs/Dropdown.svelte";
+    import { queryLocalFonts, type LocalFontData } from "$lib/fonts";
+
+    let fonts: LocalFontData[] = [];
+
+    async function loadFonts() {
+        const fontData = await queryLocalFonts();
+
+        if (Array.isArray(fontData)) fonts = fontData;
+    }
+</script>
+
+<main>
+    <button on:click={loadFonts}> Load My Local Fonts </button>
+
+    {#if Array.isArray(fonts) && fonts.length}
+        {#snippet dropdown()}
+            {#each fonts as font}
+                <Button>{font.fullName} ({font.family})</Button>
+            {/each}
+        {/snippet}
+
+        <Dropdown {dropdown} />
+    {/if}
+</main>
diff --git a/app/src/app.scss b/app/src/styles/app.scss
similarity index 92%
rename from app/src/app.scss
rename to app/src/styles/app.scss
index 98c5aed..bef8472 100755
--- a/app/src/app.scss
+++ b/app/src/styles/app.scss
@@ -3,7 +3,7 @@ body {
     flex-direction: column;
     overflow: hidden;
     font-family: "Geist", system-ui, sans-serif;
-    color: white;
+    color: var(--text);
     margin: 0;
     padding: 0;
 
@@ -13,7 +13,7 @@ body {
     width: 100dvw;
     height: 100dvh;
 
-    background: rgb(17, 17, 17);
+    background: #0a0a0a;
 }
 
 * {
@@ -42,6 +42,12 @@ body {
     font-variant-ligatures: none;
 }
 
+*.disabled,
+*[disabled] {
+    cursor: not-allowed !important;
+    opacity: 0.5;
+}
+
 .bg-grid {
     background-color: #1e1e1e;
     background-image:
@@ -62,6 +68,13 @@ body {
     user-select: all;
 }
 
+hr {
+    width: 100%;
+    border: 1px solid #191919;
+    margin: 0;
+    padding: 0;
+}
+
 a {
     all: unset;
     display: block;
@@ -71,12 +84,12 @@ a {
     &:hover {
         text-decoration: underline;
     }
-}
 
-a[href="#help-notice"] {
-    margin-bottom: 5px;
-    text-align: center;
-    display: block;
+    &[href="#help-notice"] {
+        margin-bottom: 5px;
+        text-align: center;
+        display: block;
+    }
 }
 
 @font-face {
diff --git a/app/src/styles/reset.css b/app/src/styles/reset.css
new file mode 100644
index 0000000..5369c19
--- /dev/null
+++ b/app/src/styles/reset.css
@@ -0,0 +1,70 @@
+/* Modern CSS Reset */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    height: 100%;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+body {
+    min-height: 100vh;
+    font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Ubuntu,
+        Cantarell,
+        "Noto Sans",
+        sans-serif;
+    background: #fff;
+    color: #000;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+button {
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/app/src/styles/variables.scss b/app/src/styles/variables.scss
new file mode 100644
index 0000000..81a4430
--- /dev/null
+++ b/app/src/styles/variables.scss
@@ -0,0 +1,41 @@
+:root {
+    --accent: #7c5cfc;
+
+    --text: #ffffff;
+    --text-light: #9c9c9c;
+
+    // BUTTONS
+    --primary: white;
+    --primary-text: black;
+    --primary-hover: #cccccc;
+    --primary-active: #d4d4d4;
+    --primary-border: transparent;
+
+    --secondary: #191919;
+    --secondary-text: #ffffff;
+    --secondary-hover: #1c1c1c;
+    --secondary-active: #252525;
+    --secondary-border: transparent;
+
+    --ghost: transparent;
+    --ghost-text: #ffffff;
+    --ghost-hover: #1a1a1a;
+    --ghost-active: #262626;
+    --ghost-border: transparent;
+
+    --danger: transparent;
+    --danger-text: #ff4545;
+    --danger-hover: #b23131;
+    --danger-text-hover: #ffffff;
+    --danger-active: #ae4747;
+    --danger-text-active: #ffffff;
+    --danger-border: transparent;
+
+    --approve: transparent;
+    --approve-text: #70d46d;
+    --approve-hover: #40b231;
+    --approve-text-hover: #ffffff;
+    --approve-active: #63c756;
+    --approve-text-active: #ffffff;
+    --approve-border: transparent;
+}
diff --git a/app/svelte.config.js b/app/svelte.config.js
index 7609069..e7b16fd 100755
--- a/app/svelte.config.js
+++ b/app/svelte.config.js
@@ -17,7 +17,7 @@ const config = {
             $components: path.resolve("./src/components"),
             $types: path.resolve("./src/types"),
             $lib: path.resolve("./src/lib"),
-            "app.scss": path.resolve("./src/app.scss"),
+            $styles: path.resolve("./src/styles/"),
         },
     },
     // compilerOptions: {

From 203c015ebb20ec1f4bf2d3b465904099b80a13b0 Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Mon, 22 Jun 2026 21:18:57 +0200
Subject: [PATCH 08/13] Change default button to ghost

---
 app/src/components/Dialog.svelte         |  2 +-
 app/src/components/Inputs/Button.svelte  | 46 ++++++++++++------------
 app/src/routes/design/+page.svelte       | 14 ++++----
 app/src/routes/design/fonts/+page.svelte |  4 +--
 4 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/app/src/components/Dialog.svelte b/app/src/components/Dialog.svelte
index 5c10b9f..9bed5c8 100755
--- a/app/src/components/Dialog.svelte
+++ b/app/src/components/Dialog.svelte
@@ -19,7 +19,7 @@
     <section class="dialog">
         <span id="header">
             <p>{name}</p>
-            <Button ghost onclick={close}><X /></Button>
+            <Button onclick={close}><X /></Button>
         </span>
         <hr />
         <section id="content">{@render children()}</section>
diff --git a/app/src/components/Inputs/Button.svelte b/app/src/components/Inputs/Button.svelte
index be08447..1ce65b9 100755
--- a/app/src/components/Inputs/Button.svelte
+++ b/app/src/components/Inputs/Button.svelte
@@ -11,8 +11,8 @@
         iconRight?: Snippet;
         element?: HTMLElement;
         disabled?: boolean;
+        primary?: boolean;
         secondary?: boolean;
-        ghost?: boolean;
         danger?: boolean;
         approve?: boolean;
         children?: Snippet;
@@ -25,8 +25,8 @@
         iconRight,
         element = $bindable(),
         disabled = false,
+        primary = false,
         secondary = false,
-        ghost = false,
         danger = false,
         approve = false,
         children,
@@ -39,8 +39,8 @@
         bind:this={element}
         {href}
         {...restProps}
+        class:primary
         class:secondary
-        class:ghost
         class:danger
         class:disabled
         class:approve
@@ -55,7 +55,7 @@
         {...restProps}
         {disabled}
         class:secondary
-        class:ghost
+        class:primary
         class:danger
         class:disabled
         class:approve
@@ -69,9 +69,9 @@
 <style lang="scss">
     a,
     button {
-        background-color: var(--primary);
-        color: var(--primary-text);
-        border: var(--primary-border);
+        background-color: var(--ghost);
+        color: var(--ghost-text);
+        border: var(--ghost-border);
         border-radius: 10px;
         padding: 0.5rem;
         cursor: pointer;
@@ -83,47 +83,47 @@
         text-decoration: none !important;
 
         transition:
-            background-color 0.2s ease,
-            border-radius 0.2s ease;
+            background-color 0.3s ease,
+            border-radius 0.3s ease;
 
         &:active,
         &:hover {
-            background-color: var(--primary-hover);
+            background-color: var(--ghost-hover);
             border-radius: 7px;
         }
 
         &.active {
-            background-color: var(--primary-active);
             border-radius: 5px;
+            background-color: var(--ghost-active);
         }
 
-        &.secondary {
-            background-color: var(--secondary);
-            color: var(--secondary-text);
-            border: var(--secondary-border);
+        &.primary {
+            background-color: var(--primary);
+            color: var(--primary-text);
+            border: var(--primary-border);
 
             &:active,
             &:hover {
-                background-color: var(--secondary-hover);
+                background-color: var(--primary-hover);
             }
 
             &.active {
-                background-color: var(--secondary-active);
+                background-color: var(--primary-active);
             }
         }
 
-        &.ghost {
-            background-color: var(--ghost);
-            color: var(--ghost-text);
-            border: var(--ghost-border);
+        &.secondary {
+            background-color: var(--secondary);
+            color: var(--secondary-text);
+            border: var(--secondary-border);
 
             &:active,
             &:hover {
-                background-color: var(--ghost-hover);
+                background-color: var(--secondary-hover);
             }
 
             &.active {
-                background-color: var(--ghost-active);
+                background-color: var(--secondary-active);
             }
         }
 
diff --git a/app/src/routes/design/+page.svelte b/app/src/routes/design/+page.svelte
index 9447513..f774a5b 100755
--- a/app/src/routes/design/+page.svelte
+++ b/app/src/routes/design/+page.svelte
@@ -66,17 +66,17 @@
     {/snippet}
 
     {#snippet dropdown()}
-        <Button secondary>Lorem</Button>
-        <Button secondary>ipsum</Button>
-        <Button secondary>dolor</Button>
+        <Button>Lorem</Button>
+        <Button>ipsum</Button>
+        <Button>dolor</Button>
     {/snippet}
 
     <section>
         <p>Buttons Primary</p>
-        <Button {icon}>Lorem ipsum</Button>
-        <Button {iconRight}>Lorem ipsum</Button>
-        <Button>Lorem ipsum</Button>
-        <Button disabled>Lorem ipsum</Button>
+        <Button primary {icon}>Lorem ipsum</Button>
+        <Button primary {iconRight}>Lorem ipsum</Button>
+        <Button primary>Lorem ipsum</Button>
+        <Button primary disabled>Lorem ipsum</Button>
     </section>
 
     <section>
diff --git a/app/src/routes/design/fonts/+page.svelte b/app/src/routes/design/fonts/+page.svelte
index 6fdcb39..c910b1b 100644
--- a/app/src/routes/design/fonts/+page.svelte
+++ b/app/src/routes/design/fonts/+page.svelte
@@ -3,7 +3,7 @@
     import Dropdown from "$components/Inputs/Dropdown.svelte";
     import { queryLocalFonts, type LocalFontData } from "$lib/fonts";
 
-    let fonts: LocalFontData[] = [];
+    let fonts: LocalFontData[] = $state([]);
 
     async function loadFonts() {
         const fontData = await queryLocalFonts();
@@ -13,7 +13,7 @@
 </script>
 
 <main>
-    <button on:click={loadFonts}> Load My Local Fonts </button>
+    <Button onclick={loadFonts}>Load My Local Fonts</Button>
 
     {#if Array.isArray(fonts) && fonts.length}
         {#snippet dropdown()}

From b30ef169b8a78a32c304a0a63f6333042ea29bb2 Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Tue, 23 Jun 2026 02:28:24 +0200
Subject: [PATCH 09/13] Save

---
 app/src/components/Inputs/Button.svelte       |  31 ++-
 app/src/components/Inputs/Color.svelte        |  19 +-
 app/src/components/Inputs/Input.svelte        |  36 ++-
 app/src/components/Inputs/Toggle.svelte       |  14 +-
 app/src/components/LoginButton.svelte         |  68 ++----
 app/src/components/Main/Chat/Display.svelte   | 218 +++++++-----------
 app/src/components/Main/Chat/Settings.svelte  |  89 ++++---
 app/src/components/Main/GlobalSettings.svelte |  87 ++-----
 .../Main/MessageCreator/Main.svelte           |  77 ++-----
 app/src/components/Main/Sidebar.svelte        |  57 +++--
 .../components/settings/Settings-color.svelte |  21 ++
 .../components/settings/Settings-text.svelte  |  24 ++
 .../settings/Settings-toggle.svelte           |  24 ++
 .../settings/Settings-wrapper.svelte          |  45 ++++
 app/src/routes/design/+page.svelte            |   8 +-
 15 files changed, 422 insertions(+), 396 deletions(-)
 create mode 100644 app/src/components/settings/Settings-color.svelte
 create mode 100644 app/src/components/settings/Settings-text.svelte
 create mode 100644 app/src/components/settings/Settings-toggle.svelte
 create mode 100644 app/src/components/settings/Settings-wrapper.svelte

diff --git a/app/src/components/Inputs/Button.svelte b/app/src/components/Inputs/Button.svelte
index 1ce65b9..c1855e9 100755
--- a/app/src/components/Inputs/Button.svelte
+++ b/app/src/components/Inputs/Button.svelte
@@ -11,6 +11,8 @@
         iconRight?: Snippet;
         element?: HTMLElement;
         disabled?: boolean;
+        wide?: boolean;
+        center?: boolean;
         primary?: boolean;
         secondary?: boolean;
         danger?: boolean;
@@ -25,6 +27,8 @@
         iconRight,
         element = $bindable(),
         disabled = false,
+        wide = false,
+        center = false,
         primary = false,
         secondary = false,
         danger = false,
@@ -39,14 +43,16 @@
         bind:this={element}
         {href}
         {...restProps}
+        class:disabled
+        class:wide
+        class:center
         class:primary
         class:secondary
         class:danger
-        class:disabled
         class:approve
     >
         {@render icon?.()}
-        {@render children?.()}
+        <span>{@render children?.()}</span>
         {@render iconRight?.()}
     </a>
 {:else}
@@ -54,14 +60,16 @@
         bind:this={element}
         {...restProps}
         {disabled}
+        class:disabled
+        class:wide
+        class:center
         class:secondary
         class:primary
         class:danger
-        class:disabled
         class:approve
     >
         {@render icon?.()}
-        {@render children?.()}
+        <span>{@render children?.()}</span>
         {@render iconRight?.()}
     </button>
 {/if}
@@ -78,7 +86,12 @@
         font-size: 1rem;
         display: inline-flex;
         align-items: center;
-        gap: 0.25rem;
+        text-align: center;
+        gap: 0.5rem;
+
+        white-space: nowrap;
+        user-select: none;
+        flex-wrap: nowrap;
 
         text-decoration: none !important;
 
@@ -86,6 +99,14 @@
             background-color 0.3s ease,
             border-radius 0.3s ease;
 
+        &.center {
+            justify-content: center;
+        }
+
+        &.wide {
+            width: 100%;
+        }
+
         &:active,
         &:hover {
             background-color: var(--ghost-hover);
diff --git a/app/src/components/Inputs/Color.svelte b/app/src/components/Inputs/Color.svelte
index 9e5ba1c..755409f 100755
--- a/app/src/components/Inputs/Color.svelte
+++ b/app/src/components/Inputs/Color.svelte
@@ -6,15 +6,28 @@
 
     let { value = $bindable("#FFFFFF"), onChange }: Props = $props();
 
+    const timeoutMS = 25;
+
+    let timeout: ReturnType<typeof setTimeout> | undefined = $state();
+
     function handleChange(event: Event) {
-        const target = event.target as HTMLInputElement;
-        onChange?.(target.value);
+        if (timeout) clearTimeout(timeout);
+
+        timeout = setTimeout(() => {
+            const target = event.target as HTMLInputElement;
+            onChange?.(target.value);
+        }, timeoutMS);
     }
 </script>
 
 <label>
     <span style="background-color: {value};"></span>
-    <input type="color" bind:value onchange={handleChange} />
+    <input
+        type="color"
+        bind:value
+        oninput={handleChange}
+        onchange={handleChange}
+    />
     <span class="value">{value}</span>
 </label>
 
diff --git a/app/src/components/Inputs/Input.svelte b/app/src/components/Inputs/Input.svelte
index 8dd5167..361ffbf 100755
--- a/app/src/components/Inputs/Input.svelte
+++ b/app/src/components/Inputs/Input.svelte
@@ -12,9 +12,12 @@
         icon?: Snippet;
         iconRight?: Snippet;
         children?: Snippet;
-        value?: string;
+        value?: string | number;
         disabled?: boolean;
+        wide?: boolean;
         invalid?: boolean;
+        readonly?: boolean;
+        onChange?: (e: Event) => void;
     } & HTMLInputAttributes &
         HTMLAnchorAttributes;
 
@@ -23,7 +26,10 @@
         iconRight,
         value = $bindable(""),
         disabled = false,
+        wide = false,
         invalid = false,
+        readonly = false,
+        onChange,
         ...restProps
     }: Props = $props();
 
@@ -33,23 +39,25 @@
     };
 </script>
 
-<label class:disabled class:invalid>
+<label class:disabled class:wide class:invalid class:readonly>
     {#if !disabled}
         {@render icon?.()}
     {:else}
         <Ban size="1rem" color="currentColor" />
     {/if}
     <input
-        {...restProps}
         bind:value
         {disabled}
+        {readonly}
+        oninput={onChange}
+        {...restProps}
         placeholder={disabled ? "Disabled" : restProps.placeholder}
     />
     {#if !disabled}
         <span id="rightIcon" transition:fade>
             {#if iconRight && !value.length && !invalid}
                 {@render iconRight()}
-            {:else if value.length || invalid}
+            {:else if (value.length || invalid) && !readonly}
                 <button title="Clear" onclick={clear}><X size="1rem" /></button>
             {/if}
         </span>
@@ -70,13 +78,23 @@
 
         cursor: text;
 
-        &:hover {
-            background-color: var(--secondary-active);
-            border-color: var(--text-light);
+        &.wide {
+            width: 100%;
+
+            input {
+                width: 100%;
+            }
         }
 
-        &:focus-within {
-            border-color: var(--text-light);
+        &:not(.readonly) {
+            &:hover {
+                background-color: var(--secondary-active);
+                border-color: var(--text-light);
+            }
+
+            &:focus-within {
+                border-color: var(--text-light);
+            }
         }
 
         &.invalid {
diff --git a/app/src/components/Inputs/Toggle.svelte b/app/src/components/Inputs/Toggle.svelte
index b0a4858..1a9876f 100755
--- a/app/src/components/Inputs/Toggle.svelte
+++ b/app/src/components/Inputs/Toggle.svelte
@@ -1,9 +1,19 @@
 <script lang="ts">
-    let { checked = $bindable(false), disabled = false } = $props();
+    type Props = {
+        checked?: boolean;
+        onChange?: (e: Event) => void;
+        disabled?: boolean;
+    };
+
+    let {
+        checked = $bindable(false),
+        onChange,
+        disabled = false,
+    }: Props = $props();
 </script>
 
 <label>
-    <input type="checkbox" bind:checked {disabled} />
+    <input type="checkbox" bind:checked {disabled} onchange={onChange} />
 </label>
 
 <style lang="scss">
diff --git a/app/src/components/LoginButton.svelte b/app/src/components/LoginButton.svelte
index bd6bab1..a8da7b2 100755
--- a/app/src/components/LoginButton.svelte
+++ b/app/src/components/LoginButton.svelte
@@ -4,11 +4,13 @@
     import { LogIn, LogOut } from "@lucide/svelte";
 
     import { delCookie, getCookie, setCookie } from "$lib/cookie";
+    import Button from "./Inputs/Button.svelte";
 
-    export let onToken: (token: string) => void;
-    export let onLogOut: () => void;
+    type Props = { onToken: (token: string) => void; onLogOut: () => void };
 
-    $: hasToken = getCookie("twitchToken");
+    const { onToken, onLogOut }: Props = $props();
+
+    let hasToken = $derived(getCookie("twitchToken"));
 
     const clientId = "11pghkhf9gq7dke49sw1pmumjcthma";
     const redirectUri = `${window.location.origin}/auth`;
@@ -18,8 +20,7 @@
         if (hasToken) {
             hasToken = "";
             delCookie("twitchToken");
-            onLogOut();
-            return;
+            return onLogOut();
         }
 
         const oauthUrl = `https://id.twitch.tv/oauth2/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=token&scope=${encodeURIComponent(scope)}`;
@@ -50,45 +51,24 @@
     });
 </script>
 
-<button id="login-button" aria-label="Login" on:click={openTwitchPopup}
-    >{#if hasToken}
-        <LogOut size="17" />
+{#snippet LogInIcon()}
+    <LogIn size="17" />
+{/snippet}
+{#snippet LogOutIcon()}
+    <LogOut size="17" />
+{/snippet}
+
+<Button
+    icon={hasToken ? LogOutIcon : LogInIcon}
+    secondary
+    wide
+    center
+    aria-label="Login"
+    onclick={openTwitchPopup}
+>
+    {#if hasToken}
         Logout
     {:else}
-        <LogIn size="17" />
         Login
-    {/if}</button
->
-
-<style lang="scss">
-    @use "sass:color";
-
-    button {
-        $background: #141414;
-        $border: #242424;
-
-        all: unset;
-        cursor: pointer;
-        width: 95%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.3rem;
-        padding: 0.6rem 0.7rem;
-        box-sizing: border-box;
-        background-color: $background;
-        transition: all 0.1s ease-in-out;
-        border-radius: 0.7rem;
-        border: 1px solid $border;
-
-        &:hover {
-            background-color: color.adjust($background, $lightness: 5%);
-            border-radius: 0.5rem;
-        }
-
-        &:hover:not(.settingsButton) {
-            width: 100%;
-            border-color: color.adjust($border, $lightness: 5%);
-        }
-    }
-</style>
+    {/if}
+</Button>
diff --git a/app/src/components/Main/Chat/Display.svelte b/app/src/components/Main/Chat/Display.svelte
index 67b4615..d62a56b 100755
--- a/app/src/components/Main/Chat/Display.svelte
+++ b/app/src/components/Main/Chat/Display.svelte
@@ -14,20 +14,29 @@
         settingsParams,
     } from "$stores/settings";
 
-    import { icon_size } from "$stores/global";
     import { previewMessages } from "$stores/previewMessages";
     import { sendFakeMessage } from "$lib/preview";
+    import Button from "$components/Inputs/Button.svelte";
+    import Input from "$components/Inputs/Input.svelte";
+    import Color from "$components/Inputs/Color.svelte";
+
+    let hex = $state("#191919");
+    let customMessageValue = $state("");
+
+    const params = $derived(
+        new URLSearchParams(
+            Object.entries($settingsParams).map(([k, v]) => [
+                k,
+                String(typeof v == "boolean" ? Number(v) : v),
+            ]),
+        ),
+    );
 
-    let hex = "#191919";
-    let urlResults: HTMLElement | undefined = undefined;
-
-    let customMessageInput: HTMLInputElement;
-
-    $: params = new URLSearchParams(
-        Object.entries($settingsParams).map(([k, v]) => [
-            k,
-            String(typeof v == "boolean" ? Number(v) : v),
-        ]),
+    let urlResults: string = $derived(
+        window.location.origin +
+            "/" +
+            (params.toString().length ? "?" : "") +
+            params,
     );
 
     const resetSettings = () => {
@@ -45,10 +54,10 @@
     };
 
     function copyUrl() {
-        if (urlResults && urlResults.textContent) {
+        if (urlResults) {
             if ($settingsParams["channel"] || $settingsParams["id"]) {
                 navigator.clipboard
-                    .writeText(urlResults.textContent)
+                    .writeText(urlResults)
                     .then(() => {
                         alert("Overlay URL has been copied!");
                     })
@@ -62,9 +71,9 @@
     }
 
     function addMessage() {
-        if (!customMessageInput) return;
+        if (!customMessageValue.trim().length) return;
 
-        const message = sanitizeInput(customMessageInput.value);
+        const message = sanitizeInput(customMessageValue);
 
         if (!message.length) return;
 
@@ -73,62 +82,63 @@
 </script>
 
 <div id="chat-preview" style="--chat-background: {hex}">
-    <p>
-        <span>Chat Preview</span>
+    <section id="top">
+        <h4>Chat Preview</h4>
         <small>Live preview of your settings</small>
-    </p>
+    </section>
     <section id="chat-display" class="bg-grid">
         <ChatDisplay />
     </section>
     <section id="bottom">
-        <div class="header">
-            Chat Preview Settings <button
-                on:click={() => resetSettings()}
-                title="Reset Settings"><RotateCcw size={$icon_size} /></button
-            >
-        </div>
-        <div id="color-picker">
+        <span class="header">
+            {#snippet icon()}
+                <RotateCcw size="20" />
+            {/snippet}
+
+            <p>Chat Preview Settings</p>
+
+            <Button
+                {icon}
+                onclick={() => resetSettings()}
+                title="Reset Settings"
+            ></Button>
+        </span>
+        <section id="color-picker">
             <small class="title">Chat Background</small>
+
             <div class="display">
-                <ColorPicker
-                    bind:hex
-                    components={ChromeVariant}
-                    label=""
-                    sliderDirection="horizontal"
-                    isTextInput={false}
-                />
-                <p class="bottom-input">{hex}</p>
+                <Color bind:value={hex} />
             </div>
-        </div>
-        <div id="custom-message">
+        </section>
+        <section>
             <small class="title">Custom Message</small>
 
             <div class="display">
-                <input
-                    id="message-input"
-                    class="bottom-input"
-                    bind:this={customMessageInput}
+                {#snippet icon()}
+                    <Send size="2rem" />
+                {/snippet}
+
+                <Input
+                    wide
+                    bind:value={customMessageValue}
                     placeholder="Message to display..."
                 />
-                <button id="send" class="bottom-button" on:click={addMessage}
-                    ><Send size={$icon_size} /> Send</button
-                >
+
+                <Button secondary onclick={addMessage} {icon}>Send</Button>
             </div>
-        </div>
-        <div id="overlay-url">
+        </section>
+        <section id="overlay-url">
             <small class="title">Overlay URL</small>
 
             <div class="display">
-                <p id="url-results" class="bottom-input" bind:this={urlResults}>
-                    {window.location.origin}/{params.toString().length
-                        ? "?"
-                        : ""}{params}
-                </p>
-                <button id="copy" class="bottom-button" on:click={copyUrl}
-                    ><Copy size={$icon_size} /> Copy</button
-                >
+                {#snippet icon()}
+                    <Copy size="2rem" />
+                {/snippet}
+
+                <Input wide readonly bind:value={urlResults} />
+                <Button primary onclick={copyUrl} {icon}>Copy</Button>
             </div>
-        </div>
+        </section>
     </section>
     <span class="note">
         We log IP addresses for abuse prevention.
@@ -171,7 +181,7 @@
             background-color: var(--chat-background);
         }
 
-        & > p {
+        #top {
             background-color: rgba(0, 0, 0, 0.5);
 
             border-bottom: #242424 1px solid;
@@ -181,112 +191,44 @@
 
             padding: 1rem;
             box-sizing: border-box;
-
-            span {
-                font-weight: bold;
-            }
         }
 
         .note {
             text-align: center;
-            gap: 0.3rem;
         }
 
         #bottom {
-            padding: 0.7rem 1rem;
-            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
 
             border-top: #242424 1px solid;
 
             bottom: 0;
 
             & > * {
-                border-bottom: 1px solid;
-                border-image: linear-gradient(
-                        to right,
-                        #33333300 2.5%,
-                        #161616 10%,
-                        #161616 90%,
-                        #33333300 97.5%
-                    )
-                    1;
-            }
-
-            & > *:last-child {
-                border-bottom: 0;
-            }
-
-            .header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding-bottom: 0.7rem;
+                padding: 0.7rem 1rem;
                 box-sizing: border-box;
-
-                button {
-                    all: unset;
-                    cursor: pointer;
-                    transition: all 0.2s ease-in-out;
-                    display: flex;
-                    align-items: center;
-
-                    &:hover {
-                        transform: rotate(-30deg);
-                    }
-                }
-            }
-
-            small {
-                color: rgb(156, 156, 156);
             }
 
-            .display {
+            section {
                 display: flex;
-                align-items: center;
-                gap: 0.5rem;
-
-                padding-bottom: 1rem;
-                padding-top: 0.4rem;
-                box-sizing: border-box;
+                flex-direction: column;
+                gap: 0.25rem;
+                width: 100%;
 
-                .bottom-input {
-                    margin: 0;
-                    background-color: rgba(255, 255, 255, 0.075);
-                    border: #333 1px solid;
+                .display {
+                    display: inline-flex;
+                    gap: 0.25rem;
                     width: 100%;
-                    padding: 0.5rem 0.7rem;
-                    box-sizing: border-box;
-                    border-radius: 0.5rem;
-                    gap: 1px;
-                    font-size: 1.15rem;
-                    color: white;
-                }
-            }
-
-            #overlay-url {
-                #url-results {
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
                 }
             }
 
-            .bottom-button {
-                $border: #333;
-
-                all: unset;
-                align-items: center;
+            .header {
                 display: flex;
-                gap: 0.3rem;
-                border: $border 1px solid;
-                padding: 0.5rem 0.7rem;
+                justify-content: space-between;
+                align-items: center;
+                padding-bottom: 0.7rem;
                 box-sizing: border-box;
-                border-radius: 0.7rem;
-                cursor: pointer;
-
-                &:hover {
-                    border-color: color.adjust($border, $lightness: 15%);
-                }
             }
         }
     }
@@ -302,10 +244,6 @@
 
             height: 100%;
             width: 100dvw;
-
-            #bottom .display .bottom-input {
-                font-size: 0.7rem;
-            }
         }
     }
 </style>
diff --git a/app/src/components/Main/Chat/Settings.svelte b/app/src/components/Main/Chat/Settings.svelte
index cdeac88..dded322 100755
--- a/app/src/components/Main/Chat/Settings.svelte
+++ b/app/src/components/Main/Chat/Settings.svelte
@@ -14,6 +14,10 @@
     } from "$stores/settings";
     import { CircleQuestionMark } from "@lucide/svelte";
     import { isMobile } from "$stores/global";
+    import Button from "$components/Inputs/Button.svelte";
+    import SettingsToggle from "$components/settings/Settings-toggle.svelte";
+    import SettingsText from "$components/settings/Settings-text.svelte";
+    import SettingsColor from "$components/settings/Settings-color.svelte";
 
     export let dispayChannelInput: boolean = true;
 
@@ -160,57 +164,50 @@
     <section id="config">
         {#each $settings as setting, i (i)}
             {#if !setting.hide || (setting.hide && showHidden)}
-                <div class="setting-display" class:hidden={setting.hide}>
-                    {#if typeof setting["previewReact"] != "undefined" && !setting["previewReact"] && $isMobile}
-                        <p id="preview-warning">
-                            This setting does not effect the chat preview.
-                        </p>
-                    {/if}
-                    <p class="setting-name">
-                        {#if setting.hide}
-                            (Hidden)
-                        {/if}
-                        {@html setting.name}
-
-                        {#if typeof setting["previewReact"] != "undefined" && !setting["previewReact"] && !$isMobile}
-                            <span
-                                class="warning"
-                                title="This setting does not effect the chat preview."
-                            >
-                                <CircleQuestionMark size="1rem" />
-                            </span>
-                        {/if}
-                    </p>
-
-                    {#if setting.type == "boolean"}
-                        {@render booleanSetting(
-                            setting.param,
-                            setting.default as boolean,
-                            setting.value as boolean,
-                        )}
-                    {:else if setting.type == "number" || setting.type == "text"}
-                        {@render textSetting(
-                            setting.param,
-                            setting.default as number,
-                            setting.value as number,
-                        )}
-                    {:else if setting.type == "color-picker"}
-                        {@render colorPickerSetting(
-                            setting.param,
-                            setting.value,
-                        )}
-                    {:else}
-                        <strong>{(setting as any).type}</strong>
-                        {@html "is a unknown type"}
-                    {/if}
-                </div>
+                {#if setting.type == "boolean"}
+                    <SettingsToggle
+                        name={setting.name}
+                        value={setting.value}
+                        onChange={(checked) =>
+                            handleInput(setting.param, checked)}
+                    />
+                {:else if setting.type == "text" || setting.type == "number"}
+                    <SettingsText
+                        name={setting.name}
+                        value={setting["default"] != setting.value
+                            ? setting.value
+                            : ""}
+                        onChange={(value) =>
+                            handleInput(
+                                setting.param,
+                                value,
+                                typeof setting["default"],
+                            )}
+                    />
+                {:else if setting.type == "color-picker"}
+                    <SettingsColor
+                        name={setting.name}
+                        value={setting["default"] != setting.value
+                            ? setting.value
+                            : setting["default"]}
+                        onChange={(value) =>
+                            handleInput(setting.param, value, "color-picker")}
+                    />
+                {/if}
+
+                <hr />
             {/if}
         {/each}
 
         {#if !showHidden}
-            <button id="hidden-settings" onclick={showHiddenSettings}
-                >Show hidden settings</button
+            <Button
+                id="hidden-settings"
+                center
+                danger
+                onclick={showHiddenSettings}
             >
+                Show hidden settings
+            </Button>
         {/if}
     </section>
     {#if dispayChannelInput}
diff --git a/app/src/components/Main/GlobalSettings.svelte b/app/src/components/Main/GlobalSettings.svelte
index da39d0d..e16caeb 100755
--- a/app/src/components/Main/GlobalSettings.svelte
+++ b/app/src/components/Main/GlobalSettings.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
+    import Button from "$components/Inputs/Button.svelte";
     import { parseSavedSettings } from "$lib/overlayIndex";
     import { savedSettings, settings } from "$stores/settings";
     import { slide } from "svelte/transition";
 
-    export let user: {
+    type Props = {
         name: string;
         token: string;
         user_id: string;
     };
 
+    let { name, token, user_id }: Props = $props();
+
     async function getSettings() {
         const response = await fetch(
-            `https://api.unii.dev/settings/${user.user_id}`,
+            `https://api.unii.dev/settings/${user_id}`,
         );
 
         if (response.ok) {
@@ -25,15 +28,12 @@
         }
     }
 
-    $: if (user.user_id) {
-        getSettings();
-    }
+    $effect(() => {
+        if (user_id) getSettings();
+    });
 
     async function save() {
-        if (!user.token) {
-            alert("You are not logged in");
-            return;
-        }
+        if (!token) return alert("You are not logged in");
 
         const mappedSettings = Object.fromEntries(
             $settings
@@ -56,10 +56,8 @@
                 }),
         );
 
-        if (!Object.keys(mappedSettings).length) {
-            alert("No settings changed");
-            return;
-        }
+        if (!Object.keys(mappedSettings).length)
+            return alert("No settings changed");
 
         const saveSettings_response = await fetch(
             "https://api.unii.dev/settings",
@@ -67,7 +65,7 @@
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
-                    "x-auth-token": `Bearer ${user.token}`,
+                    "x-auth-token": `Bearer ${token}`,
                 },
                 body: JSON.stringify(mappedSettings),
             },
@@ -89,17 +87,14 @@
     }
 
     async function deleteSettings() {
-        if (!user.token) {
-            alert("You are not logged in");
-            return;
-        }
+        if (!token) return alert("You are not logged in");
 
         const deleteSettings_response = await fetch(
             "https://api.unii.dev/settings",
             {
                 method: "DELETE",
                 headers: {
-                    "x-auth-token": `Bearer ${user.token}`,
+                    "x-auth-token": `Bearer ${token}`,
                 },
             },
         );
@@ -121,60 +116,16 @@
     }
 </script>
 
-<p id="settings_text" transition:slide>{user.name} Settings</p>
+<p id="settings_text" transition:slide>{name} Settings</p>
 <div id="settingsButtons" transition:slide>
-    <button id="save" class="settingsButton" on:click={save}>Save</button>
-    <button id="delete" class="settingsButton" on:click={deleteSettings}
-        >Delete</button
-    >
+    <Button approve wide onclick={save}>Save</Button>
+    <Button danger wide onclick={deleteSettings}>Delete</Button>
 </div>
 
-<style lang="scss">
-    @use "sass:color";
-
+<style>
     #settingsButtons {
         display: flex;
-        width: 100%;
         gap: 0.5rem;
-
-        button {
-            all: unset;
-            cursor: pointer;
-            width: 95%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.3rem;
-            padding: 0.6rem 0.7rem;
-            box-sizing: border-box;
-            transition: all 0.1s ease-in-out;
-            border-radius: 0.7rem;
-        }
-
-        #save {
-            $background: #4caf50;
-            $border: #2e6e3a;
-
-            background-color: $background;
-            border: 1px solid $border;
-
-            &:hover {
-                background-color: color.adjust($background, $lightness: 5%);
-                border-radius: 0.6rem;
-            }
-        }
-
-        #delete {
-            $background: #e53935;
-            $border: #7a2b2b;
-
-            background-color: $background;
-            border: 1px solid $border;
-
-            &:hover {
-                background-color: color.adjust($background, $lightness: 5%);
-                border-radius: 0.6rem;
-            }
-        }
+        width: 100%;
     }
 </style>
diff --git a/app/src/components/Main/MessageCreator/Main.svelte b/app/src/components/Main/MessageCreator/Main.svelte
index e33afc8..27afb3e 100755
--- a/app/src/components/Main/MessageCreator/Main.svelte
+++ b/app/src/components/Main/MessageCreator/Main.svelte
@@ -13,6 +13,8 @@
     import { getBadges } from "$lib/preview";
 
     import SevenTV_main from "$lib/services/7TV/main";
+    import Button from "$components/Inputs/Button.svelte";
+    import Input from "$components/Inputs/Input.svelte";
 
     let messageDisplay: HTMLElement;
 
@@ -106,7 +108,7 @@
 
 <Settings dispayChannelInput={false} />
 <main>
-    <h2>UChat Message Creator</h2>
+    <h1>UChat Message Creator</h1>
     <section id="message" class="bg-grid" bind:this={messageDisplay}>
         <ChatDisplay />
     </section>
@@ -115,45 +117,49 @@
     <section id="inputs">
         <label>
             <p>Username:</p>
-            <input
+            <Input
                 type="text"
                 placeholder="Username"
                 bind:value={message["tags"]["display-name"]}
-            /></label
-        >
+            />
+        </label>
         <label>
             <p>Message:</p>
-            <input
+            <Input
                 type="text"
                 placeholder="Message"
                 bind:value={message["message"]}
-            /></label
-        >
+            />
+        </label>
         <label>
             <p>Channel:</p>
-            <input
+            <Input
                 type="text"
                 placeholder="Channel"
                 bind:value={channel["name"]}
-            /></label
-        >
+            />
+        </label>
     </section>
 
-    <button onclick={() => loadChatInfo()}
-        ><RefreshCcw /> Fetch Channel & User</button
+    {#snippet LoadIcon()}
+        <RefreshCcw />
+    {/snippet}
+    {#snippet DownloadIcon()}
+        <Download />
+    {/snippet}
+
+    <Button secondary icon={LoadIcon} onclick={loadChatInfo}>
+        Fetch Channel & User
+    </Button>
+    <Button primary icon={DownloadIcon} onclick={downloadImage}
+        >Download image</Button
     >
-    <button onclick={() => downloadImage()}><Download /> Download image</button>
 </main>
 
 <style lang="scss">
     @use "sass:color";
 
-    h2 {
-        font-size: 2rem;
-    }
-
     p {
-        margin: 0;
         user-select: none;
     }
 
@@ -163,7 +169,6 @@
         align-items: center;
         width: 100%;
         gap: 1rem;
-        font-weight: bold;
     }
 
     #message {
@@ -185,39 +190,5 @@
 
     label {
         font-size: 1.3rem;
-
-        input {
-            all: unset;
-            font-size: 1.2rem;
-            color: #c0c0c0;
-            background-color: rgba(255, 255, 255, 0.05);
-            padding: 0.5rem 1rem;
-            box-sizing: border-box;
-            cursor: text;
-            border: 1px #242424 solid;
-        }
-    }
-
-    button {
-        $background: #141414;
-        $border: #242424;
-
-        all: unset;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.3rem;
-        padding: 0.6rem 0.7rem;
-        box-sizing: border-box;
-        background-color: $background;
-        transition: all 0.1s ease-in-out;
-        border-radius: 0.7rem;
-        border: 1px solid $border;
-
-        &:hover {
-            background-color: color.adjust($background, $lightness: 5%);
-            border-radius: 0.5rem;
-        }
     }
 </style>
diff --git a/app/src/components/Main/Sidebar.svelte b/app/src/components/Main/Sidebar.svelte
index 1b91b31..565a633 100755
--- a/app/src/components/Main/Sidebar.svelte
+++ b/app/src/components/Main/Sidebar.svelte
@@ -96,6 +96,25 @@
     moment.locale(navigator.language);
 </script>
 
+{#snippet HouseIcon()}
+    <House size="20" />
+{/snippet}
+{#snippet MessageSquareMoreIcon()}
+    <MessageSquareMore size="20" />
+{/snippet}
+{#snippet ArrowLeftRightIcon()}
+    <ArrowLeftRight size="20" />
+{/snippet}
+{#snippet InfoIcon()}
+    <Info size="20" />
+{/snippet}
+{#snippet GithubIcon()}
+    <Github size={20} />
+{/snippet}
+{#snippet CoffeeIcon()}
+    <Coffee size="20" />
+{/snippet}
+
 <aside>
     <header id="topbar">
         <img
@@ -115,50 +134,46 @@
     <nav>
         {#if page.route.id == "/"}
             <Button
-                secondary
                 href="/#"
                 class="active"
                 bind:element={navLinks["home"]["navLink"]}
+                icon={HouseIcon}
             >
-                <House size="20" /> Home
+                Home
             </Button>
             <Button
-                secondary
                 href="#message-creator"
                 bind:element={navLinks["msgCreator"]["navLink"]}
+                icon={MessageSquareMoreIcon}
             >
-                <MessageSquareMore size="20" /> Message creator
-            </Button>
-            <Button secondary href="/convert">
-                <ArrowLeftRight size="20" /> Convert
+                Message creator
             </Button>
+            <Button href="/convert" icon={ArrowLeftRightIcon}>Convert</Button>
             <Button
-                secondary
                 href="#help"
                 bind:element={navLinks["help"]["navLink"]}
+                icon={InfoIcon}
             >
-                <Info size="20" /> Info & Privacy
+                Info & Privacy
             </Button>
             <Button
-                secondary
                 href="https://github.com/Fiszh/UChat"
                 target="_blank"
                 rel="noopener noreferrer"
+                icon={GithubIcon}
             >
-                <Github size={20} /> GitHub
+                GitHub
             </Button>
             <Button
-                secondary
                 href="https://buymeacoffee.com/jzlnkf5qgo"
                 target="_blank"
                 rel="noopener noreferrer"
+                icon={CoffeeIcon}
             >
-                <Coffee size="20" /> Support
+                Support
             </Button>
         {:else}
-            <a href="/#">
-                <House size="20" /> Home
-            </a>
+            <Button href="/#" icon={HouseIcon}>Home</Button>
         {/if}
     </nav>
 
@@ -172,13 +187,11 @@
             </p>
 
             <a href="#help-notice">[Learn more]</a>
-            {#if username}
+            {#if username && twitchToken && twitchID}
                 <GlobalSettings
-                    user={{
-                        name: username || "",
-                        token: twitchToken || "",
-                        user_id: twitchID || "",
-                    }}
+                    name={username}
+                    token={twitchToken}
+                    user_id={twitchID}
                 />
             {/if}
 
diff --git a/app/src/components/settings/Settings-color.svelte b/app/src/components/settings/Settings-color.svelte
new file mode 100644
index 0000000..2984c88
--- /dev/null
+++ b/app/src/components/settings/Settings-color.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import SettingsWrapper from "./Settings-wrapper.svelte";
+    import Color from "$components/Inputs/Color.svelte";
+
+    type Props = {
+        name: string;
+        onChange: (hex: string) => void;
+        description?: string;
+        value: string;
+    };
+
+    const handleChange = (hex: string) => {
+        if (typeof onChange != "undefined") return onChange(hex);
+    };
+
+    let { name, onChange, description, value }: Props = $props();
+</script>
+
+<SettingsWrapper {name} {description}>
+    <Color onChange={handleChange} bind:value />
+</SettingsWrapper>
diff --git a/app/src/components/settings/Settings-text.svelte b/app/src/components/settings/Settings-text.svelte
new file mode 100644
index 0000000..2a8c697
--- /dev/null
+++ b/app/src/components/settings/Settings-text.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import SettingsWrapper from "./Settings-wrapper.svelte";
+    import Input from "$components/Inputs/Input.svelte";
+
+    type Props = {
+        name: string;
+        onChange: (value: string) => void;
+        description?: string;
+        value: string | number;
+    };
+
+    function handleChange(e: Event) {
+        if (typeof onChange == "undefined") return;
+
+        if (e.currentTarget instanceof HTMLInputElement)
+            onChange(e.currentTarget.value);
+    }
+
+    let { name, onChange, description, value }: Props = $props();
+</script>
+
+<SettingsWrapper {name} {description}>
+    <Input onChange={handleChange} bind:value />
+</SettingsWrapper>
diff --git a/app/src/components/settings/Settings-toggle.svelte b/app/src/components/settings/Settings-toggle.svelte
new file mode 100644
index 0000000..76dcd63
--- /dev/null
+++ b/app/src/components/settings/Settings-toggle.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import SettingsWrapper from "./Settings-wrapper.svelte";
+    import Toggle from "$components/Inputs/Toggle.svelte";
+
+    type Props = {
+        name: string;
+        onChange: (value: boolean) => void;
+        description?: string;
+        value: boolean;
+    };
+
+    function handleChange(e: Event) {
+        if (typeof onChange == "undefined") return;
+
+        if (e.currentTarget instanceof HTMLInputElement)
+            onChange(e.currentTarget.checked);
+    }
+
+    let { name, onChange, description, value }: Props = $props();
+</script>
+
+<SettingsWrapper {name} {description}>
+    <Toggle onChange={handleChange} bind:checked={value} />
+</SettingsWrapper>
diff --git a/app/src/components/settings/Settings-wrapper.svelte b/app/src/components/settings/Settings-wrapper.svelte
new file mode 100644
index 0000000..d81e415
--- /dev/null
+++ b/app/src/components/settings/Settings-wrapper.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { Setting } from "$stores/settings";
+    import type { Snippet } from "svelte";
+
+    type Props = {
+        name: string;
+        description?: string;
+        settingsDefault?: Setting["default"];
+        children: Snippet;
+    };
+
+    const { name, description, settingsDefault, children }: Props = $props();
+</script>
+
+<div>
+    <aside>
+        <p>{@html name}</p>
+        {#if description?.trim()?.length}
+            <small>{@html description}</small>
+        {/if}
+    </aside>
+
+    {@render children()}
+</div>
+
+<style lang="scss">
+    div {
+        display: inline-flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 0.5rem;
+        box-sizing: border-box;
+
+        aside {
+            display: flex;
+            flex-direction: column;
+
+            small {
+                font-size: 0.75rem;
+                color: var(--text-light);
+            }
+        }
+    }
+</style>
diff --git a/app/src/routes/design/+page.svelte b/app/src/routes/design/+page.svelte
index f774a5b..e965bc5 100755
--- a/app/src/routes/design/+page.svelte
+++ b/app/src/routes/design/+page.svelte
@@ -89,10 +89,10 @@
 
     <section>
         <p>Buttons Ghost</p>
-        <Button ghost {icon}>Lorem ipsum</Button>
-        <Button ghost {iconRight}>Lorem ipsum</Button>
-        <Button ghost>Lorem ipsum</Button>
-        <Button ghost disabled>Lorem ipsum</Button>
+        <Button {icon}>Lorem ipsum</Button>
+        <Button {iconRight}>Lorem ipsum</Button>
+        <Button>Lorem ipsum</Button>
+        <Button disabled>Lorem ipsum</Button>
     </section>
 
     <section>

From 0b2aa41dfebf57d12b7466fb15aad96d23c03316 Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Tue, 23 Jun 2026 17:04:29 +0200
Subject: [PATCH 10/13] sync

---
 app/src/components/Inputs/Color.svelte        |   6 +-
 app/src/components/Inputs/Toggle.svelte       |   4 +
 app/src/components/Main/Chat/Display.svelte   |   7 +-
 app/src/components/Main/Chat/Settings.svelte  | 216 ++----------------
 app/src/components/Main/GlobalSettings.svelte |   4 +-
 app/src/components/Main/Help/Main.svelte      |  81 ++-----
 app/src/components/Main/Sidebar.svelte        |  12 +
 .../components/settings/Settings-color.svelte |   5 +-
 .../components/settings/Settings-text.svelte  |  15 +-
 .../settings/Settings-toggle.svelte           |   6 +-
 .../settings/Settings-wrapper.svelte          |  45 +++-
 app/src/routes/+error.svelte                  |  52 ++---
 app/src/routes/auth/+page.svelte              |   2 +-
 app/src/routes/convert/+page.svelte           |  58 +----
 app/src/stores/settings.ts                    |  59 ++++-
 app/src/styles/app.scss                       |  11 +-
 app/src/styles/variables.scss                 |   2 +-
 17 files changed, 218 insertions(+), 367 deletions(-)

diff --git a/app/src/components/Inputs/Color.svelte b/app/src/components/Inputs/Color.svelte
index 755409f..6da871f 100755
--- a/app/src/components/Inputs/Color.svelte
+++ b/app/src/components/Inputs/Color.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <label>
-    <span style="background-color: {value};"></span>
+    <span id="display" style="background-color: {value};"></span>
     <input
         type="color"
         bind:value
@@ -48,6 +48,10 @@
 
         cursor: pointer;
 
+        #display {
+            border: #ffffff2c 1px solid;
+        }
+
         & > * {
             cursor: pointer;
         }
diff --git a/app/src/components/Inputs/Toggle.svelte b/app/src/components/Inputs/Toggle.svelte
index 1a9876f..731d8eb 100755
--- a/app/src/components/Inputs/Toggle.svelte
+++ b/app/src/components/Inputs/Toggle.svelte
@@ -17,6 +17,10 @@
 </label>
 
 <style lang="scss">
+    label {
+        display: contents;
+    }
+
     input {
         --size: 2rem;
 
diff --git a/app/src/components/Main/Chat/Display.svelte b/app/src/components/Main/Chat/Display.svelte
index d62a56b..4abc442 100755
--- a/app/src/components/Main/Chat/Display.svelte
+++ b/app/src/components/Main/Chat/Display.svelte
@@ -103,6 +103,7 @@
                 title="Reset Settings"
             ></Button>
         </span>
+        <hr />
         <section id="color-picker">
             <small class="title">Chat Background</small>
 
@@ -110,6 +111,7 @@
                 <Color bind:value={hex} />
             </div>
         </section>
+        <hr />
         <section>
             <small class="title">Custom Message</small>
 
@@ -127,6 +129,7 @@
                 <Button secondary onclick={addMessage} {icon}>Send</Button>
             </div>
         </section>
+        <hr />
         <section id="overlay-url">
             <small class="title">Overlay URL</small>
 
@@ -164,7 +167,7 @@
 
         user-select: none;
 
-        background-color: rgba(255, 255, 255, 0.048);
+        background-color: rgba(255, 255, 255, 0.01);
 
         #chat-display {
             display: flex;
@@ -182,8 +185,6 @@
         }
 
         #top {
-            background-color: rgba(0, 0, 0, 0.5);
-
             border-bottom: #242424 1px solid;
             display: flex;
             flex-direction: column;
diff --git a/app/src/components/Main/Chat/Settings.svelte b/app/src/components/Main/Chat/Settings.svelte
index dded322..7515f14 100755
--- a/app/src/components/Main/Chat/Settings.svelte
+++ b/app/src/components/Main/Chat/Settings.svelte
@@ -18,6 +18,8 @@
     import SettingsToggle from "$components/settings/Settings-toggle.svelte";
     import SettingsText from "$components/settings/Settings-text.svelte";
     import SettingsColor from "$components/settings/Settings-color.svelte";
+    import Input from "$components/Inputs/Input.svelte";
+    import Checkbox from "$components/Inputs/Checkbox.svelte";
 
     export let dispayChannelInput: boolean = true;
 
@@ -167,6 +169,8 @@
                 {#if setting.type == "boolean"}
                     <SettingsToggle
                         name={setting.name}
+                        description={setting.description}
+                        hidden={setting.hide}
                         value={setting.value}
                         onChange={(checked) =>
                             handleInput(setting.param, checked)}
@@ -174,6 +178,9 @@
                 {:else if setting.type == "text" || setting.type == "number"}
                     <SettingsText
                         name={setting.name}
+                        description={setting.description}
+                        hidden={setting.hide}
+                        defaultValue={setting["default"] || ""}
                         value={setting["default"] != setting.value
                             ? setting.value
                             : ""}
@@ -187,6 +194,8 @@
                 {:else if setting.type == "color-picker"}
                     <SettingsColor
                         name={setting.name}
+                        description={setting.description}
+                        hidden={setting.hide}
                         value={setting["default"] != setting.value
                             ? setting.value
                             : setting["default"]}
@@ -213,31 +222,29 @@
     {#if dispayChannelInput}
         <p>↓ Channel Info ↓</p>
         <section id="channel">
-            <label>
-                <input
-                    type="checkbox"
-                    id="channel-id-check"
-                    bind:checked={usingID}
-                /> Use Channel ID
-            </label>
+            <span>
+                <Checkbox bind:checked={usingID}>Use Channel ID</Checkbox>
+            </span>
 
             {#if usingID}
-                <input
+                <Input
                     placeholder="Channel ID"
+                    wide
                     bind:value={localChannelID}
                     oninput={(e) =>
                         (localChannelID = validateInput(
-                            e.currentTarget.value,
+                            (e.currentTarget as HTMLInputElement).value,
                             "number",
                         ))}
                 />
             {:else}
-                <input
+                <Input
                     placeholder="Channel Name"
+                    wide
                     bind:value={localChannelName}
-                    oninput={(e) =>
+                    onChange={(e) =>
                         (localChannelName = validateInput(
-                            e.currentTarget.value,
+                            (e.currentTarget as HTMLInputElement).value,
                             "twitch_name",
                         ))}
                 />
@@ -268,7 +275,6 @@
             overflow-y: auto;
             overflow-x: hidden;
 
-            padding: 0.5rem 0.7rem;
             box-sizing: border-box;
 
             gap: 0.3rem;
@@ -276,11 +282,10 @@
 
         & > p {
             margin: 0;
-            padding: 0.5rem 0rem;
+            padding-block: 0.25rem;
             box-sizing: border-box;
 
             text-align: center;
-            font-weight: bold;
 
             border-top: #242424 1px solid;
             background-color: rgba(255, 255, 255, 0.05);
@@ -290,198 +295,23 @@
             width: 100%;
             font-size: 2rem;
             font-weight: bold;
-            padding: 1rem 0.7rem;
             box-sizing: border-box;
             position: relative;
             background-color: rgba(255, 255, 255, 0.014);
             border-top: #242424 1px solid;
 
-            label {
+            span {
                 user-select: none;
                 font-size: 1rem;
                 top: 0;
                 right: 0;
                 position: absolute;
-                background-color: #0e0e0e;
-                padding: 0.3rem 0.2rem;
+                background-color: #0e0e0e33;
+                padding: 0.25rem 0.5rem;
                 box-sizing: border-box;
                 border-bottom: 1px solid #202020;
                 border-left: 1px solid #202020;
             }
-
-            & > input {
-                all: unset;
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-
-    .setting-display {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0rem 0.7rem;
-        box-sizing: border-box;
-
-        border-bottom: 1px solid;
-        border-image: linear-gradient(
-                to right,
-                #33333300 5%,
-                #161616 20%,
-                #161616 80%,
-                #33333300 95%
-            )
-            1;
-
-        &.hidden {
-            color: rgb(255, 118, 118);
-        }
-
-        &:last-child {
-            border: none;
-        }
-
-        .setting-name {
-            gap: 0.3rem;
-            display: inline-flex;
-
-            .warning {
-                cursor: pointer;
-            }
-        }
-
-        input[type="text"] {
-            color: white;
-            width: 25%;
-            border-radius: 0.5rem;
-            border: none;
-            background-color: rgba(255, 255, 255, 0.05);
-            font-size: 1.7rem;
-            text-align: center;
-
-            outline: transparent 1px solid;
-            transition: outline-color 0.3s ease;
-
-            &:hover,
-            &:active,
-            &:focus-within {
-                outline-color: #242424;
-            }
-        }
-
-        input[type="checkbox"] {
-            --size: 2rem;
-
-            appearance: none;
-            position: relative;
-            width: calc(var(--size) * 2);
-            height: var(--size);
-            background-color: rgba(255, 255, 255, 0.1);
-            border-radius: 999px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-
-            &::after {
-                content: "";
-                position: absolute;
-                width: calc(var(--size) - 4px);
-                height: calc(var(--size) - 4px);
-                background: rgb(212, 212, 212);
-                border-radius: 50%;
-                top: 50%;
-                left: 2px;
-                transform: translateY(-50%);
-                transition: left 0.2s;
-            }
-
-            &.active {
-                background-color: #4a994d;
-
-                &::after {
-                    background: white;
-                    left: calc(100% - var(--size) + 2px);
-                }
-            }
-        }
-    }
-
-    #hidden-settings {
-        background: none;
-        border: none;
-        color: white;
-        font-size: 1rem;
-        padding-block: 0.5rem;
-        cursor: pointer;
-
-        &:hover {
-            color: rgba(255, 255, 255, 0.85);
-        }
-    }
-
-    @media (max-width: 768px) {
-        .setting-display:has(input[type="text"]) {
-            flex-direction: column;
-            padding-bottom: 0.5rem;
-            box-sizing: border-box;
-
-            .setting-name {
-                width: 100%;
-            }
-
-            input {
-                width: 100%;
-            }
         }
-
-        .setting-display {
-            .setting-name {
-                font-size: 0.7rem;
-            }
-
-            input[type="text"] {
-                font-size: 1rem;
-            }
-
-            input[type="checkbox"] {
-                --after-size: 15px;
-
-                min-width: 30px;
-                aspect-ratio: 2/1;
-
-                &::after {
-                    border-radius: 50%;
-                }
-            }
-        }
-
-        #settings {
-            & > p {
-                font-size: 0.8rem;
-            }
-
-            #channel {
-                font-size: 0.8rem;
-
-                label {
-                    font-size: 0.7rem;
-                    padding: 0.1rem 0.05rem;
-                    align-items: center;
-                    display: flex;
-
-                    input {
-                        width: 0.7rem;
-                        height: 0.7rem;
-                    }
-                }
-            }
-        }
-    }
-
-    #preview-warning {
-        margin: 0;
-        font-size: 0.5rem;
-        text-align: center;
-        color: rgb(255, 215, 215);
     }
 </style>
diff --git a/app/src/components/Main/GlobalSettings.svelte b/app/src/components/Main/GlobalSettings.svelte
index e16caeb..c61145a 100755
--- a/app/src/components/Main/GlobalSettings.svelte
+++ b/app/src/components/Main/GlobalSettings.svelte
@@ -118,8 +118,8 @@
 
 <p id="settings_text" transition:slide>{name} Settings</p>
 <div id="settingsButtons" transition:slide>
-    <Button approve wide onclick={save}>Save</Button>
-    <Button danger wide onclick={deleteSettings}>Delete</Button>
+    <Button approve wide center onclick={save}>Save</Button>
+    <Button danger wide center onclick={deleteSettings}>Delete</Button>
 </div>
 
 <style>
diff --git a/app/src/components/Main/Help/Main.svelte b/app/src/components/Main/Help/Main.svelte
index d647839..24dfd2f 100755
--- a/app/src/components/Main/Help/Main.svelte
+++ b/app/src/components/Main/Help/Main.svelte
@@ -38,15 +38,17 @@
 </script>
 
 <div id="faq-container">
-    <h2>Info & Privacy</h2>
-    <h3>All the info you need to get started with UChat</h3>
+    <section>
+        <h2>Info & Privacy</h2>
+        <h3>All the info you need to get started with UChat</h3>
+    </section>
 
     <h5>
         <CircleQuestionMark size="2rem" /> FAQ
     </h5>
 
     <section id="help-items" class="faq-items">
-        {#each faqItems as faqItem}
+        {#each faqItems as faqItem, i}
             <div class="faq-item">
                 <h4>{faqItem.question}</h4>
                 <p>
@@ -71,6 +73,9 @@
                     </ul>
                 {/if}
             </div>
+            {#if i < faqItems.length - 1}
+                <hr />
+            {/if}
         {/each}
     </section>
 
@@ -92,26 +97,21 @@
 <style lang="scss">
     #faq-container {
         overflow-y: auto;
-        box-sizing: border-box;
-        padding: 0.3rem 10rem 2.5rem 10rem;
+
+        padding-inline: 5rem;
+        padding-block: 1rem 2.5rem;
         box-sizing: border-box;
 
         width: 100%;
         height: 100%;
 
-        justify-content: center;
+        align-items: center;
         text-align: center;
 
-        h2 {
-            font-size: 2.5rem;
-            line-height: 0;
-            text-align: center;
-        }
+        display: flex;
+        flex-direction: column;
 
-        h3 {
-            font-size: 1rem;
-            text-align: center;
-        }
+        gap: 1.5rem;
 
         h5 {
             display: flex;
@@ -124,55 +124,17 @@
         }
 
         #help-items {
-            padding: 0.3rem 2rem;
-            box-sizing: border-box;
-
             border: #161616 1px solid;
-
             background-color: rgba(255, 255, 255, 0.014);
-
-            .faq-item {
-                padding-bottom: 1rem;
-            }
         }
 
         #help-notice {
-            background-color: #001307;
-            border: 1px solid #006b22;
-            padding: 1rem 2rem;
-
-            & > *:first-child {
-                padding-top: 0rem;
-            }
-
-            & > * {
-                padding-top: 0.5rem;
-                padding-bottom: 0.5rem;
-            }
-
-            & > *:last-child {
-                padding-bottom: 0rem;
-            }
+            border: 1px solid var(--approve-hover);
+            background-color: rgba(255, 255, 255, 0.025);
         }
 
         .faq-items {
             border-radius: 1rem;
-
-            & > * {
-                border-bottom: 1px solid;
-                border-image: linear-gradient(
-                        to right,
-                        #33333300 2.5%,
-                        #161616 10%,
-                        #161616 90%,
-                        #33333300 97.5%
-                    )
-                    1;
-            }
-
-            & > *:last-child {
-                border-bottom: 0;
-            }
         }
 
         .faq-item {
@@ -181,12 +143,11 @@
             display: flex;
             flex-direction: column;
 
-            p {
-                margin: 0;
+            padding: 1rem 2.5rem;
+            box-sizing: border-box;
 
-                :global(a) {
-                    display: inline;
-                }
+            :global(a) {
+                display: inline;
             }
 
             .commands {
diff --git a/app/src/components/Main/Sidebar.svelte b/app/src/components/Main/Sidebar.svelte
index 565a633..95bc1c1 100755
--- a/app/src/components/Main/Sidebar.svelte
+++ b/app/src/components/Main/Sidebar.svelte
@@ -5,6 +5,7 @@
         Coffee,
         MessageSquareMore,
         ArrowLeftRight,
+        Lightbulb,
     } from "@lucide/svelte";
 
     import moment from "moment/min/moment-with-locales";
@@ -108,6 +109,9 @@
 {#snippet InfoIcon()}
     <Info size="20" />
 {/snippet}
+{#snippet SuggetsionsIcon()}
+    <Lightbulb size={20} />
+{/snippet}
 {#snippet GithubIcon()}
     <Github size={20} />
 {/snippet}
@@ -156,6 +160,14 @@
             >
                 Info & Privacy
             </Button>
+            <Button
+                href="https://github.com/Fiszh/UChat/issues/new"
+                target="_blank"
+                rel="noopener noreferrer"
+                icon={SuggetsionsIcon}
+            >
+                Suggestions
+            </Button>
             <Button
                 href="https://github.com/Fiszh/UChat"
                 target="_blank"
diff --git a/app/src/components/settings/Settings-color.svelte b/app/src/components/settings/Settings-color.svelte
index 2984c88..4e03433 100644
--- a/app/src/components/settings/Settings-color.svelte
+++ b/app/src/components/settings/Settings-color.svelte
@@ -6,6 +6,7 @@
         name: string;
         onChange: (hex: string) => void;
         description?: string;
+        hidden?: boolean;
         value: string;
     };
 
@@ -13,9 +14,9 @@
         if (typeof onChange != "undefined") return onChange(hex);
     };
 
-    let { name, onChange, description, value }: Props = $props();
+    let { name, onChange, description, hidden, value }: Props = $props();
 </script>
 
-<SettingsWrapper {name} {description}>
+<SettingsWrapper {name} {description} {hidden}>
     <Color onChange={handleChange} bind:value />
 </SettingsWrapper>
diff --git a/app/src/components/settings/Settings-text.svelte b/app/src/components/settings/Settings-text.svelte
index 2a8c697..2a28181 100644
--- a/app/src/components/settings/Settings-text.svelte
+++ b/app/src/components/settings/Settings-text.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
     import SettingsWrapper from "./Settings-wrapper.svelte";
     import Input from "$components/Inputs/Input.svelte";
+    import { isMobile } from "$stores/global";
 
     type Props = {
         name: string;
         onChange: (value: string) => void;
         description?: string;
+        hidden?: boolean;
         value: string | number;
+        defaultValue: string | number;
     };
 
     function handleChange(e: Event) {
@@ -16,9 +19,15 @@
             onChange(e.currentTarget.value);
     }
 
-    let { name, onChange, description, value }: Props = $props();
+    let { name, onChange, description, value, hidden, defaultValue }: Props =
+        $props();
 </script>
 
-<SettingsWrapper {name} {description}>
-    <Input onChange={handleChange} bind:value />
+<SettingsWrapper {name} {description} {hidden} column={$isMobile}>
+    <Input
+        onChange={handleChange}
+        bind:value
+        wide={$isMobile}
+        placeholder={String(defaultValue)}
+    />
 </SettingsWrapper>
diff --git a/app/src/components/settings/Settings-toggle.svelte b/app/src/components/settings/Settings-toggle.svelte
index 76dcd63..7ba1cee 100644
--- a/app/src/components/settings/Settings-toggle.svelte
+++ b/app/src/components/settings/Settings-toggle.svelte
@@ -6,6 +6,8 @@
         name: string;
         onChange: (value: boolean) => void;
         description?: string;
+
+        hidden?: boolean;
         value: boolean;
     };
 
@@ -16,9 +18,9 @@
             onChange(e.currentTarget.checked);
     }
 
-    let { name, onChange, description, value }: Props = $props();
+    let { name, onChange, description, hidden, value }: Props = $props();
 </script>
 
-<SettingsWrapper {name} {description}>
+<SettingsWrapper {name} {description} {hidden}>
     <Toggle onChange={handleChange} bind:checked={value} />
 </SettingsWrapper>
diff --git a/app/src/components/settings/Settings-wrapper.svelte b/app/src/components/settings/Settings-wrapper.svelte
index d81e415..8cccbe6 100644
--- a/app/src/components/settings/Settings-wrapper.svelte
+++ b/app/src/components/settings/Settings-wrapper.svelte
@@ -6,13 +6,22 @@
         name: string;
         description?: string;
         settingsDefault?: Setting["default"];
+        column?: boolean;
+        hidden?: boolean;
         children: Snippet;
     };
 
-    const { name, description, settingsDefault, children }: Props = $props();
+    const {
+        name,
+        description,
+        settingsDefault,
+        column,
+        hidden,
+        children,
+    }: Props = $props();
 </script>
 
-<div>
+<div class:column class:hidden>
     <aside>
         <p>{@html name}</p>
         {#if description?.trim()?.length}
@@ -28,14 +37,44 @@
         display: inline-flex;
         justify-content: space-between;
         align-items: center;
+        position: relative;
 
-        padding: 0.5rem;
+        padding: 0.75rem 1rem;
         box-sizing: border-box;
 
+        gap: 0.5rem;
+
+        &.column {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        &.hidden {
+            border: 1px solid red;
+
+            &::after {
+                content: "hidden";
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                z-index: 1000000;
+                padding-inline: 0.25rem;
+                border-radius: 0.25rem 0 0 0;
+
+                font-size: 0.75rem;
+
+                border-top: 1px solid red;
+                border-left: 1px solid red;
+                background-color: rgba(255, 0, 0, 0.151);
+            }
+        }
+
         aside {
             display: flex;
             flex-direction: column;
 
+            max-width: 75%;
+
             small {
                 font-size: 0.75rem;
                 color: var(--text-light);
diff --git a/app/src/routes/+error.svelte b/app/src/routes/+error.svelte
index f4efcbb..d57ca12 100755
--- a/app/src/routes/+error.svelte
+++ b/app/src/routes/+error.svelte
@@ -7,6 +7,7 @@
     import SevenTV_main from "$lib/services/7TV/main";
     import { page } from "$app/state";
     import { Dot, DotIcon } from "@lucide/svelte";
+    import Button from "$components/Inputs/Button.svelte";
 
     let loaded = $state(false);
     let isAbleToGoBack = $state(true);
@@ -117,9 +118,11 @@
         </p>
         <div id="buttons">
             {#if isAbleToGoBack}
-                <button onclick={goBack}>Go back a page</button>
+                <Button secondary onclick={goBack}>Go back a page</Button>
             {/if}
-            <a href="/" data-sveltekit-preload-data="off">Go back homepage</a>
+            <Button primary href="/" data-sveltekit-preload-data="off"
+                >Go back homepage</Button
+            >
         </div>
     </div>
 
@@ -158,6 +161,13 @@
         align-items: center;
     }
 
+    #buttons {
+        display: flex;
+        flex-wrap: wrap;
+
+        gap: 0.75rem;
+    }
+
     #message {
         p {
             margin: 0;
@@ -250,30 +260,6 @@
         }
     }
 
-    #buttons {
-        display: flex;
-        gap: 25px;
-
-        & > * {
-            all: unset;
-            transition: all 0.3s;
-            padding: 0.75rem 2rem;
-            background: rgba(255 255 255 / 0.1);
-            border: 1px solid #555;
-            border-radius: 12px;
-            color: #eee;
-            cursor: pointer;
-            text-decoration: none;
-            font-size: 1rem;
-
-            &:hover {
-                background-color: rgba(255, 255, 255, 0.068);
-                border-radius: 10px;
-                border: 1px white solid;
-            }
-        }
-    }
-
     @media (max-width: 768px) {
         main {
             padding: 5rem 1.5rem;
@@ -285,6 +271,11 @@
             text-align: center;
         }
 
+        #buttons,
+        #additional-info {
+            justify-content: center;
+        }
+
         #chat-display {
             width: 95%;
             text-align: left;
@@ -299,13 +290,8 @@
             width: 100%;
         }
 
-        #buttons {
-            justify-content: center;
-            & > * {
-                font-size: 1rem;
-                padding: 0.5rem 1rem;
-                border-radius: 7px;
-            }
+        pre {
+            font-size: 1rem;
         }
     }
 </style>
diff --git a/app/src/routes/auth/+page.svelte b/app/src/routes/auth/+page.svelte
index 16a5c27..ba078e4 100755
--- a/app/src/routes/auth/+page.svelte
+++ b/app/src/routes/auth/+page.svelte
@@ -16,4 +16,4 @@
     });
 </script>
 
-<p>Logging in...</p>
+<p style="color: white;">Logging in...</p>
diff --git a/app/src/routes/convert/+page.svelte b/app/src/routes/convert/+page.svelte
index 5043c7c..276a7cd 100755
--- a/app/src/routes/convert/+page.svelte
+++ b/app/src/routes/convert/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Button from "$components/Inputs/Button.svelte";
+    import Input from "$components/Inputs/Input.svelte";
     import chatis from "$stores/convert/chatis";
     import { config } from "$stores/settings";
     import type { Converter } from "$types/converter";
@@ -152,9 +154,9 @@
 
     <section id="url-input">
         <h2>Chat Overlay URL:</h2>
-        <input type="text" bind:value={input} />
+        <Input type="text" bind:value={input} />
 
-        <button onclick={convertURL}>Convert & Copy</button>
+        <Button primary onclick={convertURL}>Convert & Copy</Button>
     </section>
 </section>
 
@@ -167,12 +169,6 @@
 
         padding-block: 2.5rem;
 
-        p,
-        h2,
-        h1 {
-            margin: 0;
-        }
-
         #url-input {
             display: flex;
             flex-direction: column;
@@ -180,52 +176,6 @@
             gap: 0.5rem;
         }
 
-        input[type="text"] {
-            color: white;
-            width: 25rem;
-            height: 3rem;
-            border-radius: 0.5rem;
-            border: none;
-            background-color: rgba(255, 255, 255, 0.05);
-            font-size: 1.7rem;
-            text-align: center;
-
-            outline: transparent 1px solid;
-            transition: outline-color 0.3s ease;
-
-            &:hover,
-            &:active,
-            &:focus-within {
-                outline-color: #242424;
-            }
-        }
-
-        button {
-            $background: #141414;
-            $border: #242424;
-
-            all: unset;
-            cursor: pointer;
-            width: 95%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.3rem;
-            padding: 0.6rem 0.7rem;
-            box-sizing: border-box;
-            background-color: $background;
-            transition: all 0.1s ease-in-out;
-            border-radius: 0.7rem;
-            border: 1px solid $border;
-
-            &:hover {
-                background-color: color.adjust($background, $lightness: 5%);
-                border-radius: 0.5rem;
-                width: 100%;
-                border-color: color.adjust($border, $lightness: 5%);
-            }
-        }
-
         text-align: center;
 
         display: flex;
diff --git a/app/src/stores/settings.ts b/app/src/stores/settings.ts
index 2611942..f6c724f 100755
--- a/app/src/stores/settings.ts
+++ b/app/src/stores/settings.ts
@@ -3,6 +3,7 @@ import { writable } from "svelte/store";
 export interface DefaultSetting {
     name: string;
     param: string;
+    description?: string;
     hide?: boolean;
     previewReact?: boolean;
 }
@@ -48,30 +49,36 @@ export const configs: Setting[] = [
         type: "boolean",
         value: true,
         param: "msgBold",
+        description: "Make messages bold",
     },
     {
         name: "Message are in UPPERCASE",
         type: "boolean",
         value: false,
         param: "msgCaps",
+        description: "Convert all chat message text to uppercase",
     },
     {
         name: "Smooth message scroll",
         type: "boolean",
         param: "smoothScroll",
         value: true,
+        description:
+            "Animate scrolling for new messages when possible, may jump if messages arrive rapidly",
     },
     {
         name: "Custom chat font",
         type: "text",
         value: "Geist",
         param: "font",
+        description: "Change the chat message font",
     },
     {
         name: "Chat font color (hex)",
         type: "color-picker",
         value: "#FFFFFF",
         param: "fontColor",
+        description: "Change the chat text color",
     },
     {
         name: "Font & Badge size (px)",
@@ -79,18 +86,23 @@ export const configs: Setting[] = [
         param: "fontSize",
         value: 20,
         previewReact: false,
+        description:
+            "Set the size of message text and badges in pixels, changing this will also automatically scale emotes",
     },
     {
         name: "Font stroke",
         type: "boolean",
         value: false,
         param: "fontStroke",
+        description:
+            "Enable an outline stroke around chat text for readability (note: outline does not apply to 7TV paints)",
     },
     {
         name: "Message shadow (0-10)",
         type: "number",
         param: "fontShadow",
         value: 10,
+        description: "Add a shadow behind message",
     },
     {
         name: "Emote size (px)",
@@ -98,6 +110,8 @@ export const configs: Setting[] = [
         param: "emoteSize",
         value: defaultEmoteSize,
         previewReact: false,
+        description:
+            "Set the display size of emotes in pixels, scales with font size setting if not set",
     },
     {
         name: "Text fade out (seconds)",
@@ -105,30 +119,39 @@ export const configs: Setting[] = [
         param: "fadeOut",
         value: 0,
         previewReact: false,
+        description:
+            "Automatically fade out messages after the specified number of seconds",
     },
     {
         name: "Display badges",
         type: "boolean",
         value: true,
         param: "badges",
+        description: "Show or hide user badges (moderator, subscriber, etc.)",
     },
     {
         name: "Display only Twitch badges",
         type: "boolean",
         value: false,
+        hide: true,
         param: "badgesTTV",
+        description: "When enabled, only Twitch badges will be displayed",
     },
     {
-        name: "Display channel points redeem, sub messages, annoucements... (Redeems & USERNOTICES)",
+        name: "Display Redeems & Usernotices",
         type: "boolean",
         value: true,
         param: "redeem",
+        description:
+            "Show channel points redeems, subscriptions, and announcements in chat",
     },
     {
-        name: "Display bots in chat (Based on FFZ & Twitch bot badges)",
+        name: "Hide bot messages",
         type: "boolean",
         value: true,
         param: "bots",
+        description:
+            "Hide messages from chat bots, detected using Twitch & FFZ bot badges",
     },
     {
         name: "Custom user blacklist (separate using spaces)",
@@ -136,6 +159,7 @@ export const configs: Setting[] = [
         value: "",
         param: "userBL",
         list: true,
+        description: "Space-separated list of usernames to hide from chat",
     },
     {
         name: "Custom prefix blacklist (separate using spaces)",
@@ -143,37 +167,47 @@ export const configs: Setting[] = [
         value: "",
         param: "prefixBL",
         list: true,
+        description:
+            "Space-separated list of message prefixes to hide (e.g. !commands)",
     },
     {
-        name: "Moderation actions effect displayed chat messages (message deletion)",
+        name: "Moderation actions",
         type: "boolean",
         value: true,
         param: "modAction",
+        description:
+            "Moderation actions like deletions, timeouts, bans, and clears affect chat messages",
     },
     {
         name: 'Mentions are <div id="rainbow-text">Colored</div>',
         type: "boolean",
         value: false,
         param: "mentionColor",
+        description:
+            "Highlight user mentions (users must have typed in chat before)",
     },
     {
-        name: "Display 7TV Paints",
+        name: "7TV Paints",
         type: "boolean",
         value: true,
         param: "paints",
+        description: "Enable rendering of 7TV Paints in chat",
     },
     {
-        name: "Display 7TV Paint Shadows (may cause drops in performance)",
+        name: "7TV Paint Shadows",
         type: "boolean",
         value: true,
         param: "paintShadows",
+        description:
+            "Toggle shadows on 7TV Paints, may cause drops in performance",
     },
     {
-        name: "Loads in last chat messages",
+        name: "Load in latest chat messages",
         type: "boolean",
         value: false,
         hide: true,
         param: "lastMsg",
+        description: "Load a history of recent chat messages on connect",
     },
     {
         name: "Clear chat when going live (OBS ONLY)",
@@ -196,3 +230,16 @@ export const channelName = writable<string>("");
 export const channelID = writable<string>("");
 
 export const settingsParams = writable<Record<string, Setting["value"]>>({});
+
+// Initialize emote size store from default and keep it in sync with settings
+setEmoteSize.set(
+    (configs.find((c) => c.param === "emoteSize") as NumberSetting)?.value ??
+        defaultEmoteSize,
+);
+
+settings.subscribe((list) => {
+    const em = list.find((c) => c.param === "emoteSize") as
+        | NumberSetting
+        | undefined;
+    if (em && typeof em.value === "number") setEmoteSize.set(em.value);
+});
diff --git a/app/src/styles/app.scss b/app/src/styles/app.scss
index bef8472..a061912 100755
--- a/app/src/styles/app.scss
+++ b/app/src/styles/app.scss
@@ -70,9 +70,10 @@ body {
 
 hr {
     width: 100%;
-    border: 1px solid #191919;
-    margin: 0;
-    padding: 0;
+    border: 1px solid #ffffff07;
+    margin: 0 !important;
+    padding: 0 !important;
+    max-height: 1px !important;
 }
 
 a {
@@ -92,6 +93,10 @@ a {
     }
 }
 
+img {
+    display: unset;
+}
+
 @font-face {
     font-family: "Just Sans";
     src: url("/fonts/Just-Sans/JUST-Sans-Regular.otf") format("opentype");
diff --git a/app/src/styles/variables.scss b/app/src/styles/variables.scss
index 81a4430..9eec6b4 100644
--- a/app/src/styles/variables.scss
+++ b/app/src/styles/variables.scss
@@ -33,7 +33,7 @@
 
     --approve: transparent;
     --approve-text: #70d46d;
-    --approve-hover: #40b231;
+    --approve-hover: #3f9944;
     --approve-text-hover: #ffffff;
     --approve-active: #63c756;
     --approve-text-active: #ffffff;

From bfe07dc90754e1bef6760fb36271b079edb40900 Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Wed, 24 Jun 2026 23:50:30 +0200
Subject: [PATCH 11/13] sync

---
 app/src/stores/settings.ts | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/app/src/stores/settings.ts b/app/src/stores/settings.ts
index f6c724f..98f8504 100755
--- a/app/src/stores/settings.ts
+++ b/app/src/stores/settings.ts
@@ -230,16 +230,3 @@ export const channelName = writable<string>("");
 export const channelID = writable<string>("");
 
 export const settingsParams = writable<Record<string, Setting["value"]>>({});
-
-// Initialize emote size store from default and keep it in sync with settings
-setEmoteSize.set(
-    (configs.find((c) => c.param === "emoteSize") as NumberSetting)?.value ??
-        defaultEmoteSize,
-);
-
-settings.subscribe((list) => {
-    const em = list.find((c) => c.param === "emoteSize") as
-        | NumberSetting
-        | undefined;
-    if (em && typeof em.value === "number") setEmoteSize.set(em.value);
-});

From 1233315e0a0b34afe249200b2a0fbaa3a584f8f5 Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Wed, 24 Jun 2026 23:52:34 +0200
Subject: [PATCH 12/13] fix checks

---
 app/src/components/Main/Sidebar.svelte | 32 --------------------------
 1 file changed, 32 deletions(-)

diff --git a/app/src/components/Main/Sidebar.svelte b/app/src/components/Main/Sidebar.svelte
index 95bc1c1..9ba0beb 100755
--- a/app/src/components/Main/Sidebar.svelte
+++ b/app/src/components/Main/Sidebar.svelte
@@ -268,38 +268,6 @@
             box-sizing: border-box;
 
             overflow-y: auto;
-
-            a {
-                all: unset;
-                font-weight: bold;
-                font-size: 1.3rem;
-                cursor: pointer;
-
-                width: 100%;
-                display: flex;
-                line-height: normal;
-                align-items: center;
-
-                gap: 0.5rem;
-                padding: 0.6rem 0.7rem;
-                box-sizing: border-box;
-                transition: all 0.1s ease-in-out;
-
-                border-radius: 0.7rem;
-
-                border: transparent 1px solid;
-
-                &:hover {
-                    transform: scale(1.05);
-                    background-color: rgb(20, 20, 20);
-                }
-
-                &.active {
-                    transform: scale(1.05);
-                    background-color: rgb(24, 24, 24);
-                    border-color: #2c2c2c;
-                }
-            }
         }
 
         #account {

From 22766401eb000fb407673d1e8cfa3877e501e938 Mon Sep 17 00:00:00 2001
From: Killer Fish <61081555+Fiszh@users.noreply.github.com>
Date: Thu, 25 Jun 2026 00:53:07 +0200
Subject: [PATCH 13/13] Sync

---
 app/src/components/Dialog.svelte              |  3 +-
 app/src/components/Inputs/Button.svelte       | 10 ++-
 app/src/components/Main.svelte                | 56 ---------------
 app/src/components/Main/Chat/Settings.svelte  |  5 +-
 app/src/components/Main/Help/Main.svelte      | 16 ++---
 app/src/components/Main/Sidebar.svelte        | 68 +++++++++++++++----
 .../settings/Settings-wrapper.svelte          | 13 ++--
 app/src/routes/+layout.svelte                 |  2 +-
 app/src/stores/settings.ts                    |  1 +
 9 files changed, 80 insertions(+), 94 deletions(-)

diff --git a/app/src/components/Dialog.svelte b/app/src/components/Dialog.svelte
index 9bed5c8..cebe795 100755
--- a/app/src/components/Dialog.svelte
+++ b/app/src/components/Dialog.svelte
@@ -59,7 +59,8 @@
         border-radius: 1rem;
 
         & > *:not(hr) {
-            padding: 0.75rem;
+            padding: 0.5rem 1rem;
+            box-sizing: border-box;
             // outline: 1px red solid;
         }
 
diff --git a/app/src/components/Inputs/Button.svelte b/app/src/components/Inputs/Button.svelte
index c1855e9..c3dfcef 100755
--- a/app/src/components/Inputs/Button.svelte
+++ b/app/src/components/Inputs/Button.svelte
@@ -17,6 +17,7 @@
         secondary?: boolean;
         danger?: boolean;
         approve?: boolean;
+        layout?: "row" | "column";
         children?: Snippet;
     } & HTMLButtonAttributes &
         HTMLAnchorAttributes;
@@ -33,6 +34,7 @@
         secondary = false,
         danger = false,
         approve = false,
+        layout = "row",
         children,
         ...restProps
     }: Props = $props();
@@ -50,6 +52,7 @@
         class:secondary
         class:danger
         class:approve
+        class:column={layout == "column"}
     >
         {@render icon?.()}
         <span>{@render children?.()}</span>
@@ -67,6 +70,7 @@
         class:primary
         class:danger
         class:approve
+        class:column={layout == "column"}
     >
         {@render icon?.()}
         <span>{@render children?.()}</span>
@@ -83,7 +87,7 @@
         border-radius: 10px;
         padding: 0.5rem;
         cursor: pointer;
-        font-size: 1rem;
+        font-size: inherit;
         display: inline-flex;
         align-items: center;
         text-align: center;
@@ -93,6 +97,10 @@
         user-select: none;
         flex-wrap: nowrap;
 
+        &.column {
+            flex-direction: column;
+        }
+
         text-decoration: none !important;
 
         transition:
diff --git a/app/src/components/Main.svelte b/app/src/components/Main.svelte
index f677e8a..55f180a 100755
--- a/app/src/components/Main.svelte
+++ b/app/src/components/Main.svelte
@@ -26,59 +26,3 @@
 {:else}
     <MainDisplay />
 {/if}
-
-{#if $isMobile}
-    <footer>
-        <a href="/#">
-            <Home size={$icon_size} /> Home
-        </a>
-        <a href="#help">
-            <Info size={$icon_size} /> About
-        </a>
-        <a
-            class="hide-on-small"
-            href="https://github.com/Fiszh/UChat"
-            target="_blank"
-            rel="noopener noreferrer"
-        >
-            <Github /> GitHub
-        </a>
-        <a
-            class="hide-on-small"
-            href="https://buymeacoffee.com/jzlnkf5qgo"
-            target="_blank"
-            rel="noopener noreferrer"
-        >
-            <Coffee size={$icon_size} /> Support
-        </a>
-    </footer>
-{/if}
-
-<style lang="scss">
-    @media (max-width: 768px) {
-        footer {
-            border-top: 1px #161616 solid;
-            padding: 0.5rem 2rem;
-            box-sizing: border-box;
-            width: 100%;
-            display: flex;
-            justify-content: space-evenly;
-
-            font-size: 0.6rem;
-
-            a {
-                all: unset;
-                pointer-events: auto;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            }
-        }
-    }
-    @media (max-width: 320px) {
-        footer .hide-on-small {
-            display: none;
-        }
-    }
-</style>
diff --git a/app/src/components/Main/Chat/Settings.svelte b/app/src/components/Main/Chat/Settings.svelte
index 7515f14..c8fcea7 100755
--- a/app/src/components/Main/Chat/Settings.svelte
+++ b/app/src/components/Main/Chat/Settings.svelte
@@ -129,9 +129,10 @@
         : removeParam("id");
 </script>
 
-<Dialog name="Warming" bind:show={hiddenWarning}>
+<Dialog name="Warning" bind:show={hiddenWarning}>
     Hidden settings are not meant to be used regularly, please keep that in mind
-    when enabling them.
+    when enabling them. They can go away any day and may be hidden because they
+    are old features or are being replaced.
 </Dialog>
 
 {#snippet booleanSetting(param: string, defaultValue: boolean, value: boolean)}
diff --git a/app/src/components/Main/Help/Main.svelte b/app/src/components/Main/Help/Main.svelte
index 24dfd2f..37d6665 100755
--- a/app/src/components/Main/Help/Main.svelte
+++ b/app/src/components/Main/Help/Main.svelte
@@ -123,18 +123,11 @@
             line-height: 0;
         }
 
-        #help-items {
-            border: #161616 1px solid;
-            background-color: rgba(255, 255, 255, 0.014);
-        }
-
-        #help-notice {
-            border: 1px solid var(--approve-hover);
-            background-color: rgba(255, 255, 255, 0.025);
-        }
-
         .faq-items {
             border-radius: 1rem;
+            border: #161616 1px solid;
+            background-color: rgba(255, 255, 255, 0.014);
+            width: 100%;
         }
 
         .faq-item {
@@ -142,8 +135,9 @@
 
             display: flex;
             flex-direction: column;
+            gap: 0.5rem;
 
-            padding: 1rem 2.5rem;
+            padding: 1rem 1.25rem;
             box-sizing: border-box;
 
             :global(a) {
diff --git a/app/src/components/Main/Sidebar.svelte b/app/src/components/Main/Sidebar.svelte
index 9ba0beb..c24b868 100755
--- a/app/src/components/Main/Sidebar.svelte
+++ b/app/src/components/Main/Sidebar.svelte
@@ -20,6 +20,7 @@
     import { page } from "$app/state";
     import Github from "$components/logos/github.svelte";
     import Button from "$components/Inputs/Button.svelte";
+    import { isMobile } from "$stores/global";
 
     let currentHash = window.location.hash || "#";
 
@@ -98,25 +99,25 @@
 </script>
 
 {#snippet HouseIcon()}
-    <House size="20" />
+    <House size={$isMobile ? "15" : "20"} />
 {/snippet}
 {#snippet MessageSquareMoreIcon()}
-    <MessageSquareMore size="20" />
+    <MessageSquareMore size={$isMobile ? "15" : "20"} />
 {/snippet}
 {#snippet ArrowLeftRightIcon()}
-    <ArrowLeftRight size="20" />
+    <ArrowLeftRight size={$isMobile ? "15" : "20"} />
 {/snippet}
 {#snippet InfoIcon()}
-    <Info size="20" />
+    <Info size={$isMobile ? "15" : "20"} />
 {/snippet}
 {#snippet SuggetsionsIcon()}
-    <Lightbulb size={20} />
+    <Lightbulb size={$isMobile ? "15" : "20"} />
 {/snippet}
 {#snippet GithubIcon()}
-    <Github size={20} />
+    <Github size={$isMobile ? 15 : 20} />
 {/snippet}
 {#snippet CoffeeIcon()}
-    <Coffee size="20" />
+    <Coffee size={$isMobile ? "15" : "20"} />
 {/snippet}
 
 <aside>
@@ -142,6 +143,7 @@
                 class="active"
                 bind:element={navLinks["home"]["navLink"]}
                 icon={HouseIcon}
+                layout={$isMobile ? "column" : "row"}
             >
                 Home
             </Button>
@@ -149,30 +151,40 @@
                 href="#message-creator"
                 bind:element={navLinks["msgCreator"]["navLink"]}
                 icon={MessageSquareMoreIcon}
+                layout={$isMobile ? "column" : "row"}
             >
-                Message creator
+                {$isMobile ? "Create" : "Message creator"}
+            </Button>
+            <Button
+                href="/convert"
+                icon={ArrowLeftRightIcon}
+                layout={$isMobile ? "column" : "row"}
+            >
+                Convert
             </Button>
-            <Button href="/convert" icon={ArrowLeftRightIcon}>Convert</Button>
             <Button
                 href="#help"
                 bind:element={navLinks["help"]["navLink"]}
                 icon={InfoIcon}
+                layout={$isMobile ? "column" : "row"}
             >
-                Info & Privacy
+                {$isMobile ? "Info" : "Info & Privacy"}
             </Button>
             <Button
                 href="https://github.com/Fiszh/UChat/issues/new"
                 target="_blank"
                 rel="noopener noreferrer"
                 icon={SuggetsionsIcon}
+                layout={$isMobile ? "column" : "row"}
             >
-                Suggestions
+                {$isMobile ? "Ideas" : "Suggestions"}
             </Button>
             <Button
                 href="https://github.com/Fiszh/UChat"
                 target="_blank"
                 rel="noopener noreferrer"
                 icon={GithubIcon}
+                layout={$isMobile ? "column" : "row"}
             >
                 GitHub
             </Button>
@@ -181,11 +193,18 @@
                 target="_blank"
                 rel="noopener noreferrer"
                 icon={CoffeeIcon}
+                layout={$isMobile ? "column" : "row"}
             >
                 Support
             </Button>
         {:else}
-            <Button href="/#" icon={HouseIcon}>Home</Button>
+            <Button
+                href="/#"
+                icon={HouseIcon}
+                layout={$isMobile ? "column" : "row"}
+            >
+                Home
+            </Button>
         {/if}
     </nav>
 
@@ -256,6 +275,12 @@
             small {
                 font-size: 0.7rem;
             }
+
+            #name {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+            }
         }
 
         nav {
@@ -291,9 +316,24 @@
     }
 
     @media (max-width: 768px) {
-        aside {
-            position: absolute;
+        aside > *:not(nav) {
             display: none;
         }
+
+        aside {
+            width: 100vw;
+            width: 100dvw;
+            max-width: unset;
+            height: unset;
+
+            min-height: fit-content;
+
+            nav {
+                flex-direction: row;
+                font-size: 0.75rem;
+                gap: unset;
+                justify-content: center;
+            }
+        }
     }
 </style>
diff --git a/app/src/components/settings/Settings-wrapper.svelte b/app/src/components/settings/Settings-wrapper.svelte
index 8cccbe6..dc0b44c 100644
--- a/app/src/components/settings/Settings-wrapper.svelte
+++ b/app/src/components/settings/Settings-wrapper.svelte
@@ -52,19 +52,16 @@
         &.hidden {
             border: 1px solid red;
 
-            &::after {
+            aside p::before {
                 content: "hidden";
-                position: absolute;
-                right: 0;
-                bottom: 0;
-                z-index: 1000000;
                 padding-inline: 0.25rem;
-                border-radius: 0.25rem 0 0 0;
+                border-radius: 0.25rem;
+
+                margin-right: 0.25rem;
 
                 font-size: 0.75rem;
 
-                border-top: 1px solid red;
-                border-left: 1px solid red;
+                border: 1px solid red;
                 background-color: rgba(255, 0, 0, 0.151);
             }
         }
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 7df4434..092a2d0 100755
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -64,7 +64,7 @@
 
     @media (max-width: 768px) {
         main {
-            flex-direction: column;
+            flex-direction: column-reverse;
             overflow: hidden;
         }
     }
diff --git a/app/src/stores/settings.ts b/app/src/stores/settings.ts
index 98f8504..7c69021 100755
--- a/app/src/stores/settings.ts
+++ b/app/src/stores/settings.ts
@@ -215,6 +215,7 @@ export const configs: Setting[] = [
         value: false,
         hide: true,
         param: "clearLive",
+        description: "Clear the chat automatically when the channel goes live",
     },
 ];