diff --git a/app/Http/Controllers/ProfileUserController.php b/app/Http/Controllers/ProfileUserController.php
index 7a06f489..55c4b11c 100644
--- a/app/Http/Controllers/ProfileUserController.php
+++ b/app/Http/Controllers/ProfileUserController.php
@@ -5,6 +5,7 @@
 namespace App\Http\Controllers;
 
 use App\Http\Requests\Auth\ProfileUserPasswordResetRequest;
+use App\Http\Requests\Auth\ThemeChangeRequest;
 use App\Http\Resources\UserResource;
 use Illuminate\Contracts\Hashing\Hasher;
 use Illuminate\Http\RedirectResponse;
@@ -37,4 +38,16 @@ public function update(ProfileUserPasswordResetRequest $request, Hasher $hasher)
         return redirect()->back()
             ->with("status", "Zaktualizowano hasło");
     }
+
+    public function updateTheme(ThemeChangeRequest $request): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        $user = $request->user();
+        $user->theme = $validated["theme"];
+        $user->save();
+
+        return redirect()->back()
+            ->with("status", "Zaktualizowano motyw");
+    }
 }
diff --git a/app/Http/Requests/Auth/ThemeChangeRequest.php b/app/Http/Requests/Auth/ThemeChangeRequest.php
new file mode 100644
index 00000000..cbfa323b
--- /dev/null
+++ b/app/Http/Requests/Auth/ThemeChangeRequest.php
@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Requests\Auth;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class ThemeChangeRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            "theme" => "required|string|max:255",
+        ];
+    }
+}
diff --git a/app/Http/Requests/UserRequest.php b/app/Http/Requests/UserRequest.php
index b97c3d16..3c7223d1 100644
--- a/app/Http/Requests/UserRequest.php
+++ b/app/Http/Requests/UserRequest.php
@@ -20,6 +20,7 @@ public function rules(): array
             "name" => ["required", "string", "max:255"],
             "surname" => ["required", "string", "max:255"],
             "school_id" => ["required", "integer", "exists:schools,id"],
+            "theme" => "nullable|string|max:255",
         ];
     }
 }
diff --git a/app/Http/Resources/UserResource.php b/app/Http/Resources/UserResource.php
index 941162c2..a1becf75 100644
--- a/app/Http/Resources/UserResource.php
+++ b/app/Http/Resources/UserResource.php
@@ -23,6 +23,7 @@ public function toArray(Request $request): array
             "isAnonymized" => $this->is_anonymized,
             "isAdmin" => $this->hasRole("admin"),
             "isSuperAdmin" => $this->hasRole("super_admin"),
+            "theme" => $this->theme,
         ];
     }
 }
diff --git a/database/migrations/2024_11_25_214101_add_theme_to_users_table.php b/database/migrations/2024_11_25_214101_add_theme_to_users_table.php
new file mode 100644
index 00000000..6abdc641
--- /dev/null
+++ b/database/migrations/2024_11_25_214101_add_theme_to_users_table.php
@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::table("users", function (Blueprint $table): void {
+            $table->string("theme")->default("theme-witelon")->after("email");
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table("users", function (Blueprint $table): void {
+            $table->dropColumn("theme");
+        });
+    }
+};
diff --git a/resources/css/app.css b/resources/css/app.css
index 0a3647ec..77274f23 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,6 +7,18 @@
   font-family: 'Poppins', sans-serif;
 }
 
+.theme-witelon {
+  --color-primary: 38 44 137;
+  --color-primary-bright: 37 43 174;
+  --color-primary-dark: 20 22 71;
+}
+
+.theme-tauron {
+  --color-primary: 228 0 125;
+  --color-primary-bright: 245 13 147;
+  --color-primary-dark: 176 4 96;
+}
+
 .v-enter-active,
 .v-leave-active {
   transition: opacity 0.3s ease;
diff --git a/resources/js/Layouts/BaseLayout.vue b/resources/js/Layouts/BaseLayout.vue
index 96abd0eb..2352857f 100644
--- a/resources/js/Layouts/BaseLayout.vue
+++ b/resources/js/Layouts/BaseLayout.vue
@@ -3,12 +3,19 @@ import Header from '@/components/Common/Header.vue'
 import Footer from '@/components/Common/Footer.vue'
 import BackgroundEffect from '@/components/Common/BackgroundEffect.vue'
 import Banner from '@/components/Common/Banner.vue'
-import {ref, watch} from 'vue'
+import {onMounted, ref, watch} from 'vue'
 import {type PageProps} from '@/Types/PageProps'
 
 const props = defineProps<{ pages: Page[] } & PageProps>()
 const status = ref<string | undefined>(props.flash.status)
 
+onMounted(()=>{
+  const themeClass = props.user?.theme
+  if (themeClass) {
+    document.documentElement.classList.add(themeClass)
+  }
+})
+
 watch(() => props.flash, flash => {
   status.value = flash.status
 }, { immediate: true })
@@ -20,7 +27,7 @@ watch(() => props.flash, flash => {
 
   <div class="flex flex-col items-center h-full min-h-screen">
     <Banner v-model="status" />
-    <Header :pages :user="props.user" :app-name="props.appName" />
+    <Header :pages="props.pages" :user="props.user" :app-name="props.appName" />
     <slot />
     <Footer />
   </div>
diff --git a/resources/js/Pages/Admin/QuizDemo.vue b/resources/js/Pages/Admin/QuizDemo.vue
index 0a3f0043..b9dd7252 100644
--- a/resources/js/Pages/Admin/QuizDemo.vue
+++ b/resources/js/Pages/Admin/QuizDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import QuizLayout from '@/Layouts/QuizLayout.vue'
+import QuizLayout from '@/components/UserQuiz/QuizLayout.vue'
 import { converter } from '@/Helpers/Converter'
 
 const props = defineProps<{ quiz: Quiz }>()
diff --git a/resources/js/Pages/Guest/VerifyEmail.vue b/resources/js/Pages/Guest/VerifyEmail.vue
index ef2c4c1c..f235ba0f 100644
--- a/resources/js/Pages/Guest/VerifyEmail.vue
+++ b/resources/js/Pages/Guest/VerifyEmail.vue
@@ -10,7 +10,7 @@ onMounted(()=>{
     titleRef.value = 'Zweryfikuj e-mail'
 })
 
-function sent() {
+function send() {
   form.post('/email/verification-notification')
 }
 
@@ -26,7 +26,7 @@ function sent() {
       <p>Kliknij w link aktywacyjny, aby dokończyć proces rejestracji.</p>
     </div>
     <div class="p-6 gap-6 flex flex-col size-full sm:max-w-lg sm:h-fit">
-      <button :disabled="form.processing" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70" @click="sent">
+      <button :disabled="form.processing" class="bg-primary text-white font-bold py-3 px-4 rounded-lg disabled:bg-primary/70" @click="send">
         Wyślij ponownie link weryfikacyjny
       </button>
     </div>
diff --git a/resources/js/Pages/User/Quiz.vue b/resources/js/Pages/User/Quiz.vue
index 2251b882..a1b5a4b3 100644
--- a/resources/js/Pages/User/Quiz.vue
+++ b/resources/js/Pages/User/Quiz.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import QuizLayout from '@/Layouts/QuizLayout.vue'
+import QuizLayout from '@/components/UserQuiz/QuizLayout.vue'
 import axios from 'axios'
 import { ref } from 'vue'
 import Button from '@/components/Common/Button.vue'
diff --git a/resources/js/Types/PageProps.d.ts b/resources/js/Types/PageProps.d.ts
index 6aa51bd5..6ac07958 100644
--- a/resources/js/Types/PageProps.d.ts
+++ b/resources/js/Types/PageProps.d.ts
@@ -1,4 +1,6 @@
-export interface PageProps {
+import { type PageProps as InertiaPageProps } from '@inertiajs/core'
+
+export interface PageProps extends InertiaPageProps {
   appName: string
   flash: {
     status?: string
diff --git a/resources/js/Types/User.d.ts b/resources/js/Types/User.d.ts
index 5e5bef13..d9ec14eb 100644
--- a/resources/js/Types/User.d.ts
+++ b/resources/js/Types/User.d.ts
@@ -7,4 +7,5 @@ interface User {
   isAnonymized: boolean
   isAdmin: boolean
   isSuperAdmin: boolean
+  theme?: 'theme-witelon' | 'theme-tauron'
 }
diff --git a/resources/js/components/Common/BackgroundEffect.vue b/resources/js/components/Common/BackgroundEffect.vue
index e3193403..13186a8d 100644
--- a/resources/js/components/Common/BackgroundEffect.vue
+++ b/resources/js/components/Common/BackgroundEffect.vue
@@ -19,7 +19,7 @@ onUnmounted(() => window.removeEventListener('scroll', setBannerVisibility))
       size-full
       bg-gradient-to-r
       from-[#ff80b5]
-      to-primary-600
+      to-[#373ff4]
       opacity-30
     " style="
       clip-path: polygon(
diff --git a/resources/js/components/Common/ButtonFrame.vue b/resources/js/components/Common/ButtonFrame.vue
index fbe5e43e..3e0d90a0 100644
--- a/resources/js/components/Common/ButtonFrame.vue
+++ b/resources/js/components/Common/ButtonFrame.vue
@@ -12,8 +12,8 @@ defineProps<ButtonFrameProps>()
       'rounded text-xs px-2': extraSmall,
       'rounded-xl': !small && !extraSmall,
       'py-3 max-w-96 w-full': large,
-      'focus:rounded-sm text-black hover:text-primary-800 p-0 font-semibold': text,
-      'px-4 bg-primary text-white hover:bg-primary-950 py-2.5 font-bold': !text,
+      'focus:rounded-sm text-black hover:text-primary-bright p-0 font-semibold': text,
+      'px-4 bg-primary text-white hover:bg-primary-dark py-2.5 font-bold': !text,
       'opacity-50 pointer-events-none': disabled,
     }"
   >
diff --git a/resources/js/components/Common/CustomDatepicker.vue b/resources/js/components/Common/CustomDatepicker.vue
index 121ffb5d..29197947 100644
--- a/resources/js/components/Common/CustomDatepicker.vue
+++ b/resources/js/components/Common/CustomDatepicker.vue
@@ -34,7 +34,7 @@ const datepickerRef = ref<InstanceType<typeof Datepicker>>()
         <div class="flex gap-4">
           <button class="text-sm font-semibold rounded-md" @click="() => datepickerRef?.toggleMenu()">Anuluj</button>
           <button
-            class="bg-primary text-white text-sm font-bold py-2 px-3 rounded-md duration-200 hover:bg-primary-950"
+            class="bg-primary text-white text-sm font-bold py-2 px-3 rounded-md duration-200 hover:bg-primary-dark"
             @click="() => datepickerRef?.selectDate()"
           >
             Wybierz
@@ -83,7 +83,7 @@ const datepickerRef = ref<InstanceType<typeof Datepicker>>()
 }
 
 .dp__btn:hover {
-  @apply fill-primary-950 text-primary-950 stroke-primary-950
+  @apply fill-primary-dark text-primary-dark stroke-primary-dark
 }
 
 .dp__overlay {
diff --git a/resources/js/components/Common/CustomInput.vue b/resources/js/components/Common/CustomInput.vue
index c9d5986e..acc84dcb 100644
--- a/resources/js/components/Common/CustomInput.vue
+++ b/resources/js/components/Common/CustomInput.vue
@@ -44,7 +44,7 @@ const model = defineModel<string>()
         @blur="isFocused=false"
       >
 
-      <div v-if="slots.default" class="flex flex-1 items-center justify-center stroke-primary/100">
+      <div v-if="slots.default" class="flex flex-1 items-center justify-center text-primary">
         <slot />
       </div>
     </div>
diff --git a/resources/js/components/Common/Header.vue b/resources/js/components/Common/Header.vue
index 6ffab634..83eed327 100644
--- a/resources/js/components/Common/Header.vue
+++ b/resources/js/components/Common/Header.vue
@@ -25,7 +25,7 @@ const isSelected = (page: Page) => page.href === window.location.pathname
             v-for="item in pages"
             :key="item.title"
             :href="item.href"
-            class="hidden sm:block font-semibold leading-6 text-gray-900 transition-colors duration-200 hover:text-primary-800"
+            class="hidden sm:block font-semibold leading-6 text-gray-900 transition-colors duration-200 hover:text-primary-bright"
             :class="{ 'text-primary': isSelected(item) }"
           >
             {{ item.title }}
diff --git a/resources/js/components/Common/Searchbar.vue b/resources/js/components/Common/Searchbar.vue
index 2e15541a..c21cefc8 100644
--- a/resources/js/components/Common/Searchbar.vue
+++ b/resources/js/components/Common/Searchbar.vue
@@ -43,7 +43,7 @@ function onOptionClick(option:T) {
         :class="{ 'ring-inset ring-2 ring-[#7e76b8]' : isFocused, 'ring-red' : error }"
       >
         <div class="h-full items-center justify-center px-3">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 stroke-primary/30" :class="{'!stroke-primary/60': isFocused}">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-primary/30" :class="{'!text-primary/60': isFocused}">
             <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
           </svg>
         </div>
diff --git a/resources/js/components/Common/ThemeSwitch.vue b/resources/js/components/Common/ThemeSwitch.vue
new file mode 100644
index 00000000..b3891e05
--- /dev/null
+++ b/resources/js/components/Common/ThemeSwitch.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { router } from '@inertiajs/vue3'
+
+const props = defineProps<{ theme: 'theme-witelon' | 'theme-tauron' }>()
+const isThemeTauron = computed(() => props.theme === 'theme-tauron')
+
+function toggleTheme(checked?:boolean) {
+  document.documentElement.classList.remove(checked ? 'theme-witelon' : 'theme-tauron')
+  document.documentElement.classList.add(checked ? 'theme-tauron' : 'theme-witelon')
+  router.patch('/profile/theme', { theme: checked ? 'theme-tauron' : 'theme-witelon' })
+}
+</script>
+
+<template>
+  <label class="inline-flex items-center cursor-pointer">
+    <input type="checkbox" class="sr-only peer" :checked="isThemeTauron" @click="(event: any) => toggleTheme(event.currentTarget.checked)">
+    <div class="
+      relative
+      w-11
+      h-6
+      bg-primary
+      peer-focus:outline-none
+      peer-focus:ring-2
+      rounded-full
+      
+      after:bg-white
+      after:content-['']
+      after:start-0.5
+      after:absolute after:top-0.5
+      after:border
+      after:rounded-full
+      after:size-5
+      peer-checked:after:translate-x-full
+      rtl:peer-checked:after:-translate-x-full
+      after:transition-all
+      "
+    />
+    <span class="ms-3 text-sm font-medium text-gray-500">Zmień skórkę</span>
+  </label>
+</template>
diff --git a/resources/js/components/Home/AuthBanner.vue b/resources/js/components/Home/AuthBanner.vue
index 3bd1e561..ac5bc996 100644
--- a/resources/js/components/Home/AuthBanner.vue
+++ b/resources/js/components/Home/AuthBanner.vue
@@ -49,7 +49,7 @@ function gotoLoginSection() {
       <div class="flex justify-end flex-1 gap-6 items-center">
         <b><button class="text-sm text-primary" @click="gotoLoginSection">Logowanie</button></b>
         <button
-          class="flex-none rounded-lg bg-primary px-3.5 py-3 text-sm font-bold text-white shadow-sm hover:bg-primary-950 duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+          class="flex-none rounded-lg bg-primary px-3.5 py-3 text-sm font-bold text-white shadow-sm hover:bg-primary-dark duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
           @click="gotoRegisterSection"
         >
           Rejestracja
diff --git a/resources/js/components/Home/GeneralSection.vue b/resources/js/components/Home/GeneralSection.vue
index 87beaaf9..02379cde 100644
--- a/resources/js/components/Home/GeneralSection.vue
+++ b/resources/js/components/Home/GeneralSection.vue
@@ -3,21 +3,17 @@ import InformationButton from '@/components/Home/InformationButton.vue'
 </script>
 
 <template>
-  <section class="w-full flex flex-col overflow-hidden">
-    <div data-name="left" class="flex flex-col justify-center w-full gap-10 p-10 pb-16">
-      <img class="h-40 object-contain" src="@/../assets/header-logo.png" alt="logo nagłówka">
-      <InformationButton />
-    </div>
+  <section class="w-full flex flex-col items-center gap-10 p-10">
+    <img class="h-40 object-contain" src="@/../assets/header-logo.png" alt="logo nagłówka">
 
-    <div data-name="right" class="p-16 flex flex-col size-full">
-      <h1 class="text-center text-[1.5rem] font-bold">SPONSORZY</h1>
-      <div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:grid-cols-6">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg" alt="Transistor" width="158" height="48">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/reform-logo-gray-900.svg" alt="Reform" width="158" height="48">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/tuple-logo-gray-900.svg" alt="Tuple" width="158" height="48">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain sm:col-start-2" src="https://tailwindui.com/img/logos/158x48/savvycal-logo-gray-900.svg" alt="SavvyCal" width="158" height="48">
-        <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto" src="https://tailwindui.com/img/logos/158x48/statamic-logo-gray-900.svg" alt="Statamic" width="158" height="48">
-      </div>
-    </div>
+    <InformationButton />
+
+    <h1 class="text-center text-[1.5rem] font-bold mt-20">SPONSOR</h1>
+
+    <img
+      class="w-fit rounded cursor-pointer duration-200 hover:scale-110 object-contain max-h-48"
+      src="https://www.tauron.pl/-/media/layout/logo_tlo.ashx"
+      alt="Tauron"
+    >
   </section>
 </template>
diff --git a/resources/js/components/Home/InformationButton.vue b/resources/js/components/Home/InformationButton.vue
index c42f9c4f..700dbaf7 100644
--- a/resources/js/components/Home/InformationButton.vue
+++ b/resources/js/components/Home/InformationButton.vue
@@ -7,7 +7,7 @@ const isInformationVisible = ref(false)
 
 <template>
   <div class="flex h-12 justify-center items-center">
-    <button class="text-primary text-2xl font-bold duration-200 hover:text-primary-800 hover:scale-105" @click="isInformationVisible = true">
+    <button class="text-primary text-2xl font-bold duration-200 hover:text-primary-bright hover:scale-105" @click="isInformationVisible = true">
       INFORMACJE O KONKURSIE
     </button>
   </div>
diff --git a/resources/js/components/Home/LoginForm.vue b/resources/js/components/Home/LoginForm.vue
index 120fde43..a85aee29 100644
--- a/resources/js/components/Home/LoginForm.vue
+++ b/resources/js/components/Home/LoginForm.vue
@@ -20,7 +20,7 @@ function submit() {
 
     <div class="flex flex-col gap-2">
       <CustomInput v-model="form.password" label="Hasło" :error="errors.password" name="password" type="password" />
-      <a href="/auth/forgot-password" class="duration-200 font-semibold leading-6 text-primary hover:text-primary-950 text-sm">Nie pamiętam hasła</a>
+      <a href="/auth/forgot-password" class="duration-200 font-semibold leading-6 text-primary hover:text-primary-dark text-sm">Nie pamiętam hasła</a>
     </div>
 
     <div>
@@ -28,7 +28,7 @@ function submit() {
         :disabled="form.processing"
         type="submit"
         class="rounded-lg text-md flex w-full justify-center bg-primary p-3 font-bold text-white
-        transition hover:bg-primary-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
         disabled:opacity-70"
       >
         Zaloguj się
diff --git a/resources/js/components/Home/RegisterForm.vue b/resources/js/components/Home/RegisterForm.vue
index 4cd8f1ab..2067e2e3 100644
--- a/resources/js/components/Home/RegisterForm.vue
+++ b/resources/js/components/Home/RegisterForm.vue
@@ -61,7 +61,7 @@ function submit() {
         :disabled="form.processing"
         type="submit"
         class="rounded-lg text-md flex w-full justify-center bg-primary p-3 font-bold text-white
-        transition hover:bg-primary-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
         disabled:opacity-70"
       >
         Zarejestruj się
diff --git a/resources/js/components/Profile/UserDataSection.vue b/resources/js/components/Profile/UserDataSection.vue
index 574854c1..a17b26d4 100644
--- a/resources/js/components/Profile/UserDataSection.vue
+++ b/resources/js/components/Profile/UserDataSection.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ThemeSwitch from '@/components/Common/ThemeSwitch.vue'
+
 defineProps<{ user: User }>()
 </script>
 
@@ -23,5 +25,6 @@ defineProps<{ user: User }>()
         <p class="p-4 text-[1.1rem] border-2 border-t-0 h-full rounded-b-lg border-primary/30">{{ user.school.name }}</p>
       </div>
     </div>
+    <ThemeSwitch class="mt-4 mx-2" :theme="user.theme" />
   </div>
 </template>
diff --git a/resources/js/components/QuizzesPanel/QuestionComponent.vue b/resources/js/components/QuizzesPanel/QuestionComponent.vue
index 767ae42b..7d79200f 100644
--- a/resources/js/components/QuizzesPanel/QuestionComponent.vue
+++ b/resources/js/components/QuizzesPanel/QuestionComponent.vue
@@ -59,7 +59,7 @@ function setCorrectAnswer(currentAnswer: Answer) {
       
     <button
       v-if="hasAnswers"
-      class="flex gap-1.5 font-bold text-primary hover:text-primary-800 items-center text-percentage-105"
+      class="flex gap-1.5 font-bold text-primary hover:text-primary-bright items-center text-percentage-105"
       @click="answersPaneExpanded = !answersPaneExpanded"
     >
       Odpowiedzi
diff --git a/resources/js/components/QuizzesPanel/QuizNavbar.vue b/resources/js/components/QuizzesPanel/QuizNavbar.vue
index d4cccd11..2780264c 100644
--- a/resources/js/components/QuizzesPanel/QuizNavbar.vue
+++ b/resources/js/components/QuizzesPanel/QuizNavbar.vue
@@ -174,7 +174,7 @@ function sanitizeData() {
         class="w-7.5 h-7.5 text-primary stroke-2"
         :class="{
           'opacity-50': !publishValidation.validated,
-          'hover:text-primary-800 slide-up-animation': publishValidation.validated
+          'hover:text-primary-bright slide-up-animation': publishValidation.validated
         }"
       />
     </RequestWrapper>
diff --git a/resources/js/Layouts/QuizLayout.vue b/resources/js/components/UserQuiz/QuizLayout.vue
similarity index 100%
rename from resources/js/Layouts/QuizLayout.vue
rename to resources/js/components/UserQuiz/QuizLayout.vue
diff --git a/resources/views/emails/auth/reset-password.blade.php b/resources/views/emails/auth/reset-password.blade.php
index f9aeb8a8..7e533bef 100644
--- a/resources/views/emails/auth/reset-password.blade.php
+++ b/resources/views/emails/auth/reset-password.blade.php
@@ -1,3 +1,8 @@
+@php
+  $theme = $user->theme ?? 'theme-witelon';
+  $color = $theme === 'theme-tauron' ? '#E4007D' : '#262C89';
+@endphp
+
 <!DOCTYPE html>
 <html lang="pl">
 <style>
@@ -5,7 +10,7 @@
     a { text-decoration: none; }
     p { margin: 48px 0; line-height: 24px; }
     table { width: 100%; border-spacing: 0; }
-    .button { background-color: #262C89; color: white; padding: 16px 80px; border-radius: 12px; }
+    .button { background-color: {{ $color }}; color: white; padding: 16px 80px; border-radius: 12px; }
 </style>
 
 <div style="font-family: sans-serif; color: #3D4852; padding: 0 48px;">
@@ -22,7 +27,7 @@
             <b><a class="button" href="{{ $url }}">Zresetuj hasło</a></b>
         </td></tr></table>
 
-        <p style="margin-top: 16px; ">Pozdrawiamy,<br><span style="color: #262C89;">{{ config('app.name') }}</span></p>
+        <p style="margin-top: 16px; ">Pozdrawiamy,<br><span style="color: {{ $color }};">{{ config('app.name') }}</span></p>
 
         <hr style="border: 1px solid #e8ebf1">
         
diff --git a/resources/views/emails/auth/verify.blade.php b/resources/views/emails/auth/verify.blade.php
index 9fd5011a..8a9d9771 100644
--- a/resources/views/emails/auth/verify.blade.php
+++ b/resources/views/emails/auth/verify.blade.php
@@ -1,3 +1,8 @@
+@php
+  $theme = $user->theme ?? 'theme-witelon';
+  $color = $theme === 'theme-tauron' ? '#E4007D' : '#262C89';
+@endphp
+
 <!DOCTYPE html>
 <html lang="pl">
 <style>
@@ -5,7 +10,7 @@
     a { text-decoration: none; }
     p { margin: 48px 0; line-height: 24px; }
     table { width: 100%; border-spacing: 0; }
-    .button { background-color: #262C89; color: white; padding: 16px 80px; border-radius: 12px; }
+    .button { background-color: {{ $color }}; color: white; padding: 16px 80px; border-radius: 12px; }
 </style>
 
 <div style="font-family: sans-serif; color: #3D4852; padding: 0 48px;">
@@ -24,7 +29,7 @@
 
         <p>Jeśli prośba nie została zainicjonowana przez Ciebie, możesz zignorować tę wiadomość.</p>
 
-        <p style="margin-top: 16px; ">Pozdrawiamy,<br><span style="color: #262C89;">{{ config('app.name') }}</span></p>
+        <p style="margin-top: 16px; ">Pozdrawiamy,<br><span style="color: {{ $color }};">{{ config('app.name') }}</span></p>
 
         <hr style="border: 1px solid #e8ebf1">
         
diff --git a/resources/views/errors/minimal.blade.php b/resources/views/errors/minimal.blade.php
index f42b185c..2bcb4c03 100644
--- a/resources/views/errors/minimal.blade.php
+++ b/resources/views/errors/minimal.blade.php
@@ -1,5 +1,5 @@
 @php
-  $code = $code ?? 'Błąd';
+  $code = $code ?? '';
   $message = $message ?? 'Błąd';
   $description = $description ?? 'Wystąpił nieoczekiwany błąd. Prosimy spróbować ponownie później.';
 @endphp
diff --git a/routes/web.php b/routes/web.php
index 619cf0b8..f52a2e49 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -99,4 +99,5 @@
     Route::get("/dashboard", [ContestController::class, "create"])->name("dashboard");
     Route::get("/profile", [ProfileUserController::class, "create"])->name("profile");
     Route::patch("/profile/password", [ProfileUserController::class, "update"])->name("profile.password.update");
+    Route::patch("/profile/theme", [ProfileUserController::class, "updateTheme"])->name("profile.theme.update");
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index 9650311f..8ffacc82 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -49,91 +49,40 @@ module.exports = {
             },
             colors: {
                 'primary': {
-                    'DEFAULT': '#262c89',
-                    '50': '#ecf3ff',
-                    '100': '#dde8ff',
-                    '200': '#c2d5ff',
-                    '300': '#9db9ff',
-                    '400': '#7691ff',
-                    '500': '#556aff',
-                    '600': '#373ff4',
-                    '700': '#2a2fd8',
-                    '800': '#252bae',
-                    '900': '#262c89',
-                    '950': '#141647',
-                },
-                'secondary': {
-                    'DEFAULT': '#c9cefc',
-                    '50': '#eff0fe',
-                    '100': '#e1e5fe',
-                    '200': '#c9cefc',
-                    '300': '#a8aef9',
-                    '400': '#8585f4',
-                    '500': '#7268ec',
-                    '600': '#634cdf',
-                    '700': '#563dc5',
-                    '800': '#46349f',
-                    '900': '#363765',
-                    '950': '#241d49',
-                },
-                'accent': {
-                    'DEFAULT': '#6566C2',
-                    '50': '#f2f5fb',
-                    '100': '#e7ecf8',
-                    '200': '#d3dbf2',
-                    '300': '#b8c3e9',
-                    '400': '#9aa6df',
-                    '500': '#8189d3',
-                    '600': '#6566c2',
-                    '700': '#5757ab',
-                    '800': '#48488b',
-                    '900': '#40426f',
-                    '950': '#252541',
-                },
-                'rose': {
-                    'DEFAULT': '#f70279',
-                    '50': '#fff0f9',
-                    '100': '#ffe3f5',
-                    '200': '#ffc7eb',
-                    '300': '#ff99d9',
-                    '400': '#ff59be',
-                    '500': '#ff29a2',
-                    '600': '#f70279',
-                    '700': '#dd0061',
-                    '800': '#b60050',
-                    '900': '#970445',
-                    '950': '#5e0025',
+                    'DEFAULT': 'rgb(var(--color-primary))',
+                    'bright': 'rgb(var(--color-primary-bright))',
+                    'dark': 'rgb(var(--color-primary-dark))',
                 },
                 'red': {
                     'DEFAULT': '#ff0000',
-                    '50': '#fff0f0',
-                    '100': '#ffdddd',
-                    '200': '#ffc0c0',
-                    '300': '#ff9494',
-                    '400': '#ff5757',
                     '500': '#ff2323',
-                    '600': '#ff0000',
-                    '700': '#d70000',
-                    '800': '#b10303',
-                    '900': '#920a0a',
-                    '950': '#500000',
                 },
-                "gradient":{"start":"#9198e5", "end":"#1f0843"},
+                "gradient": {
+                    "start":"#9198e5",
+                    "end":"#1f0843"
+                },
             }
         },
     },
     plugins: [
-        plugin(function ({ addComponents, addVariant }) {
+        plugin(function ({ addComponents, addVariant, addBase }) {
             addVariant('hover-focus', ['&:hover', '&:focus']);
+            addBase({
+              ':root': {
+                '--color-primary': '38 44 137',
+                '--color-primary-bright': '37 43 174',
+                '--color-primary-dark': '20 22 71',
+              },
+            });
             addComponents({
                 '.icon': {
-                  '@apply size-6 stroke-2 text-primary hover:text-primary-800 transition-colors duration-200':{},
+                  '@apply size-6 stroke-2 text-primary hover:text-primary-bright transition-colors duration-200':{},
                 },
                 '.slide-up-animation' : {
                     '@apply hover:-translate-y-1 h-full transition-transform ease-in duration-150':{},
                 },
                 '.icon-button': {
-                  '@apply flex gap-2 w-fit font-bold text-primary hover:text-primary-800 text-percentage-105':{},
+                  '@apply flex gap-2 w-fit font-bold text-primary hover:text-primary-bright text-percentage-105':{},
                 }
             })
         }),