diff --git a/public/favicon.png b/public/favicon.png
index c92ba5cc..f458cb32 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
index 385cb539..6dd12379 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,4 +1,4 @@
 <svg class="size-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.02484 14.3074C6.60832 14.3074 6.3744 13.828 6.63076 13.4997L15.3851 2.28913C15.7308 1.84642 16.4312 2.22227 16.2534 2.75511L13.6884 10.4434C13.6668 10.5082 13.715 10.575 13.7832 10.575H16.4951C16.9018 10.575 17.1384 11.0347 16.902 11.3656L9.30015 22.0091C8.96935 22.4723 8.24533 22.1111 8.41638 21.5683L10.6633 14.4375C10.6836 14.373 10.6355 14.3074 10.5679 14.3074H7.02484Z" fill="#262C89"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2545 17.8224V6.2803L15.3847 2.28313C15.731 1.84101 16.4307 2.21751 16.2525 2.75005L13.6885 10.4136C13.6668 10.4784 13.715 10.5453 13.7834 10.5453H16.4935C16.9005 10.5453 17.137 11.0056 16.9 11.3365L12.2545 17.8224Z" fill="#6566C2"/>
+  <path d="M7.02484 14.3074C6.60832 14.3074 6.3744 13.828 6.63076 13.4997L15.3851 2.28913C15.7308 1.84642 16.4312 2.22227 16.2534 2.75511L13.6884 10.4434C13.6668 10.5082 13.715 10.575 13.7832 10.575H16.4951C16.9018 10.575 17.1384 11.0347 16.902 11.3656L9.30015 22.0091C8.96935 22.4723 8.24533 22.1111 8.41638 21.5683L10.6633 14.4375C10.6836 14.373 10.6355 14.3074 10.5679 14.3074H7.02484Z" fill="#E4007D"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2545 17.8224V6.2803L15.3847 2.28313C15.731 1.84101 16.4307 2.21751 16.2525 2.75005L13.6885 10.4136C13.6668 10.4784 13.715 10.5453 13.7834 10.5453H16.4935C16.9005 10.5453 17.137 11.0056 16.9 11.3365L12.2545 17.8224Z" fill="#FF17A1"/>
 </svg>
diff --git a/public/logo.png b/public/logo.png
index 4b93f66c..2f8a1ba3 100644
Binary files a/public/logo.png and b/public/logo.png differ
diff --git a/resources/css/app.css b/resources/css/app.css
index 0a3647ec..5ab975a0 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;
@@ -27,7 +39,7 @@
 }
  
 ::-webkit-scrollbar-thumb {
-  background: #262c8926;
+  background: #E4007D26;
   border-radius: 1rem;
   border: 2px solid transparent;
   background-clip: content-box;
@@ -35,7 +47,7 @@
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #262c894c;
+  background: #E4007D4c;
   border: 2px solid transparent;
   background-clip: content-box;
   position: fixed;
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 5629b9a6..89883ccb 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -13,6 +13,9 @@ dayjs.locale('pl')
 
 const appName = import.meta.env.VITE_APP_NAME
 
+const themeClass = localStorage.getItem('theme')
+themeClass && document.documentElement.classList.add(themeClass)
+
 createInertiaApp({
   title: (title) => `${title} - ${appName}`,
   resolve: async (name) => {
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..6ce80978 100644
--- a/resources/js/components/Common/Header.vue
+++ b/resources/js/components/Common/Header.vue
@@ -3,6 +3,7 @@ import FormButton from '@/components/Common/FormButton.vue'
 import { TransitionRoot, Dialog, TransitionChild, DialogPanel, DialogTitle } from '@headlessui/vue'
 import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { ref } from 'vue'
+import LogoIcon from '@/components/Icons/LogoIcon.vue'
 
 defineProps<{ pages: Page[], user?: User, appName: string, title?: string }>()
 const open = ref<boolean>(false)
@@ -14,10 +15,7 @@ const isSelected = (page: Page) => page.href === window.location.pathname
     <nav class="flex w-full items-center justify-between p-4">
       <div class="flex gap-x-6 items-center">
         <a href="/">
-          <svg class="size-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M7.02484 14.3074C6.60832 14.3074 6.3744 13.828 6.63076 13.4997L15.3851 2.28913C15.7308 1.84642 16.4312 2.22227 16.2534 2.75511L13.6884 10.4434C13.6668 10.5082 13.715 10.575 13.7832 10.575H16.4951C16.9018 10.575 17.1384 11.0347 16.902 11.3656L9.30015 22.0091C8.96935 22.4723 8.24533 22.1111 8.41638 21.5683L10.6633 14.4375C10.6836 14.373 10.6355 14.3074 10.5679 14.3074H7.02484Z" fill="#262C89" />
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2545 17.8224V6.2803L15.3847 2.28313C15.731 1.84101 16.4307 2.21751 16.2525 2.75005L13.6885 10.4136C13.6668 10.4784 13.715 10.5453 13.7834 10.5453H16.4935C16.9005 10.5453 17.137 11.0056 16.9 11.3365L12.2545 17.8224Z" fill="#6566C2" />
-          </svg>
+          <LogoIcon />
         </a>
         <span v-if="pages.length <= 0" class="font-semibold leading-6 text-gray-900">{{ title }}</span>
         <div v-else class="flex gap-6">
@@ -25,7 +23,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..27e7fd2c
--- /dev/null
+++ b/resources/js/components/Common/ThemeSwitch.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const isThemeTauron = computed(() => localStorage.getItem('theme') !== 'theme-witelon')
+
+function toggleTheme(checked?:boolean) {
+  document.documentElement.classList.remove(checked ? 'theme-witelon' : 'theme-tauron')
+  document.documentElement.classList.add(checked ? 'theme-tauron' : 'theme-witelon')
+  localStorage.setItem('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..c800ada3 100644
--- a/resources/js/components/Home/AuthBanner.vue
+++ b/resources/js/components/Home/AuthBanner.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import LogoIcon from '@/components/Icons/LogoIcon.vue'
 
 const isHidden = ref(false)
 const props = defineProps<{isLogin?:boolean}>()
@@ -31,7 +32,6 @@ function gotoLoginSection() {
   isLoginRef.value = true
   gotoAuthSection()
 }
-
 </script>
 
 <template>
@@ -42,14 +42,12 @@ function gotoLoginSection() {
     >
       <div class="justify-center flex-1 hidden lg:flex" />
       <div class="hidden lg:justify-center flex-1 xs:flex">
-        <svg class="size-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M7.02484 14.3074C6.60832 14.3074 6.3744 13.828 6.63076 13.4997L15.3851 2.28913C15.7308 1.84642 16.4312 2.22227 16.2534 2.75511L13.6884 10.4434C13.6668 10.5082 13.715 10.575 13.7832 10.575H16.4951C16.9018 10.575 17.1384 11.0347 16.902 11.3656L9.30015 22.0091C8.96935 22.4723 8.24533 22.1111 8.41638 21.5683L10.6633 14.4375C10.6836 14.373 10.6355 14.3074 10.5679 14.3074H7.02484Z" fill="#262C89" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12.2545 17.8224V6.2803L15.3847 2.28313C15.731 1.84101 16.4307 2.21751 16.2525 2.75005L13.6885 10.4136C13.6668 10.4784 13.715 10.5453 13.7834 10.5453H16.4935C16.9005 10.5453 17.137 11.0056 16.9 11.3365L12.2545 17.8224Z" fill="#6566C2" />
-        </svg>
+        <LogoIcon />
       </div>
       <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/Icons/LogoIcon.vue b/resources/js/components/Icons/LogoIcon.vue
new file mode 100644
index 00000000..3861a5ad
--- /dev/null
+++ b/resources/js/components/Icons/LogoIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <svg class="size-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.02484 14.3074C6.60832 14.3074 6.3744 13.828 6.63076 13.4997L15.3851 2.28913C15.7308 1.84642 16.4312 2.22227 16.2534 2.75511L13.6884 10.4434C13.6668 10.5082 13.715 10.575 13.7832 10.575H16.4951C16.9018 10.575 17.1384 11.0347 16.902 11.3656L9.30015 22.0091C8.96935 22.4723 8.24533 22.1111 8.41638 21.5683L10.6633 14.4375C10.6836 14.373 10.6355 14.3074 10.5679 14.3074H7.02484Z" fill="#E4007D" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2545 17.8224V6.2803L15.3847 2.28313C15.731 1.84101 16.4307 2.21751 16.2525 2.75005L13.6885 10.4136C13.6668 10.4784 13.715 10.5453 13.7834 10.5453H16.4935C16.9005 10.5453 17.137 11.0056 16.9 11.3365L12.2545 17.8224Z" fill="#FF17A1" />
+    </svg>
+  </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/views/emails/auth/reset-password.blade.php b/resources/views/emails/auth/reset-password.blade.php
index f9aeb8a8..25a9cc43 100644
--- a/resources/views/emails/auth/reset-password.blade.php
+++ b/resources/views/emails/auth/reset-password.blade.php
@@ -5,7 +5,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: #E4007D; color: white; padding: 16px 80px; border-radius: 12px; }
 </style>
 
 <div style="font-family: sans-serif; color: #3D4852; padding: 0 48px;">
@@ -22,7 +22,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: #E4007D;">{{ 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..f4b8fb56 100644
--- a/resources/views/emails/auth/verify.blade.php
+++ b/resources/views/emails/auth/verify.blade.php
@@ -5,7 +5,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: #E4007D; color: white; padding: 16px 80px; border-radius: 12px; }
 </style>
 
 <div style="font-family: sans-serif; color: #3D4852; padding: 0 48px;">
@@ -24,7 +24,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: #E4007D;">{{ 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..b5392f29 100644
--- a/resources/views/errors/minimal.blade.php
+++ b/resources/views/errors/minimal.blade.php
@@ -16,10 +16,10 @@
     * { margin: 0; padding: 0; }
     html, body { height: 100%; }
     body { display: flex; justify-content: center; align-items: center; font-family: 'Poppins', sans-serif; color: #333; position: relative;  max-width: 48rem; margin:auto }
-    h1 { font-size: 3rem; margin-bottom: 1rem; color: #262c89; }
+    h1 { font-size: 3rem; margin-bottom: 1rem; color: #E4007D; }
     p { font-size: 1rem; margin-bottom: 2rem }
     b { font-size: 1.2rem; margin-bottom: 2rem; font-weight: bold }
-    a { text-decoration: none; background-color: #262c89; color: white; font-size: rem; font-weight: 600; padding: .6rem 1rem; border-radius: .8rem; }
+    a { text-decoration: none; background-color: #E4007D; color: white; font-size: rem; font-weight: 600; padding: .6rem 1rem; border-radius: .8rem; }
     .container { display: flex; flex-direction: column; align-items: center; text-align: center }
     .bg-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.6); z-index: -10 }
     .blur-background { position: fixed; width: 58.33%; height: 100%; opacity: 0.7; filter: blur(48px); z-index: -10 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 9650311f..05a7e2da 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': '228 0 125',
+                '--color-primary-bright': '245 13 147',
+                '--color-primary-dark': '176 4 96',
+              },
+            });
             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':{},
                 }
             })
         }),