diff --git a/frontend/src/assets/styles.scss b/frontend/src/assets/styles.scss
index 99b57b8..2fba93c 100644
--- a/frontend/src/assets/styles.scss
+++ b/frontend/src/assets/styles.scss
@@ -1,8 +1,8 @@
 :root {
   /* Moderne Farbpalette für bessere Lesbarkeit */
-  --color-primary-orange: #FF8C5A;      /* Helleres, freundliches Orange */
-  --color-primary-orange-hover: #FFA366; /* Noch helleres Orange für Hover */
-  --color-primary-orange-light: #FFF4F0; /* Sehr helles Orange für Hover-Hintergründe */
+  --color-primary-orange: #FFB84D;      /* Gelbliches, sanftes Orange */
+  --color-primary-orange-hover: #FFC966; /* Noch helleres gelbliches Orange für Hover */
+  --color-primary-orange-light: #FFF8E1; /* Sehr helles gelbliches Orange für Hover-Hintergründe */
   --color-primary-green: #4ADE80;       /* Helles, freundliches Grün - passt zum Orange */
   --color-primary-green-hover: #6EE7B7; /* Noch helleres Grün für Hover */
   --color-text-primary: #1F2937;        /* Dunkles Grau für Haupttext (bessere Lesbarkeit) */
diff --git a/frontend/src/components/DialogWidget.vue b/frontend/src/components/DialogWidget.vue
index 1440388..2e46f84 100644
--- a/frontend/src/components/DialogWidget.vue
+++ b/frontend/src/components/DialogWidget.vue
@@ -216,7 +216,7 @@ export default {
   justify-content: space-between;
   padding: 5px 5px;
   border-bottom: 1px solid #ddd;
-  background-color: #FF6B35;
+  background-color: var(--color-primary-orange);
   cursor: move;
 }
 
@@ -258,7 +258,7 @@ dialog-footer {
   margin-left: 10px;
   padding: 5px 10px;
   cursor: pointer;
-  background: #FF6B35;
+  background: var(--color-primary-orange);
   color: #000000;
   border: none;
   border-radius: 4px;
diff --git a/frontend/src/components/MessageboxWidget.vue b/frontend/src/components/MessageboxWidget.vue
index ee78b48..7b3f0ef 100644
--- a/frontend/src/components/MessageboxWidget.vue
+++ b/frontend/src/components/MessageboxWidget.vue
@@ -133,7 +133,7 @@ export default {
     justify-content: space-between;
     padding: 10px 20px;
     border-bottom: 1px solid #ddd;
-    background-color: #FF6B35;
+    background-color: var(--color-primary-orange);
 }
 
 .dialog-icon {
diff --git a/frontend/src/components/SettingsWidget.vue b/frontend/src/components/SettingsWidget.vue
index 04d456a..5224ebb 100644
--- a/frontend/src/components/SettingsWidget.vue
+++ b/frontend/src/components/SettingsWidget.vue
@@ -253,9 +253,9 @@ export default {
         margin-left: 10px;
         padding: 5px 12px;
         cursor: pointer;
-        background: #FF6B35;
+        background: var(--color-primary-orange);
         color: #000000;
-        border: 1px solid #FF6B35;
+        border: 1px solid var(--color-primary-orange);
         border-radius: 4px;
         transition: background 0.05s;
         border: 1px solid transparent;
@@ -263,8 +263,8 @@ export default {
     }
     
     .contact-button:hover {
-        background: #FFF4F0;
-        color: #5D4037;
-        border: 1px solid #5D4037;
+        background: var(--color-primary-orange-light);
+        color: var(--color-text-secondary);
+        border: 1px solid var(--color-text-secondary);
     }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/SimpleTabs.vue b/frontend/src/components/SimpleTabs.vue
index 1b07ac3..d93d16d 100644
--- a/frontend/src/components/SimpleTabs.vue
+++ b/frontend/src/components/SimpleTabs.vue
@@ -57,7 +57,7 @@ export default {
 }
 
 .simple-tab.active {
-  background: #FF6B35;
+  background: var(--color-primary-orange);
   color: #000;
 }
 </style>
diff --git a/frontend/src/components/falukant/MessagesDialog.vue b/frontend/src/components/falukant/MessagesDialog.vue
index a629cce..7a35681 100644
--- a/frontend/src/components/falukant/MessagesDialog.vue
+++ b/frontend/src/components/falukant/MessagesDialog.vue
@@ -821,7 +821,7 @@ export default {
 }
 
 .messages > li .footer {
-  color: #FF6B35;
+  color: var(--color-primary-orange);
   font-size: 0.8em;
   margin-top: 0.3em;
   display: flex;
diff --git a/frontend/src/components/falukant/RevenueSection.vue b/frontend/src/components/falukant/RevenueSection.vue
index 3799e8e..e85832a 100644
--- a/frontend/src/components/falukant/RevenueSection.vue
+++ b/frontend/src/components/falukant/RevenueSection.vue
@@ -222,7 +222,7 @@
     color: #000;
   }
   .city-price-orange {
-    background-color: #FF6B35;
+    background-color: var(--color-primary-orange);
     color: #000;
   }
   .city-price-red {
diff --git a/frontend/src/components/falukant/SaleSection.vue b/frontend/src/components/falukant/SaleSection.vue
index f44e84d..7ab6103 100644
--- a/frontend/src/components/falukant/SaleSection.vue
+++ b/frontend/src/components/falukant/SaleSection.vue
@@ -631,7 +631,7 @@
     color: #000;
   }
   .city-price-orange {
-    background-color: #FF6B35;
+    background-color: var(--color-primary-orange);
     color: #000;
   }
   .city-price-red {
diff --git a/frontend/src/views/home/NoLoginView.vue b/frontend/src/views/home/NoLoginView.vue
index a3252cf..399e158 100644
--- a/frontend/src/views/home/NoLoginView.vue
+++ b/frontend/src/views/home/NoLoginView.vue
@@ -185,7 +185,7 @@ export default {
 }
 
 .actions>div>h2 {
-    color: #FF6B35;
+    color: var(--color-primary-orange);
 }
 
 .seo-content {
diff --git a/frontend/src/views/social/VocabCourseView.vue b/frontend/src/views/social/VocabCourseView.vue
index ba68374..713fba7 100644
--- a/frontend/src/views/social/VocabCourseView.vue
+++ b/frontend/src/views/social/VocabCourseView.vue
@@ -321,9 +321,9 @@ export default {
 
 .btn-current-lesson {
   padding: 12px 24px;
-  background: #FF6B35;
+  background: var(--color-primary-orange);
   color: #000000;
-  border: 1px solid #FF6B35;
+  border: 1px solid var(--color-primary-orange);
   border-radius: 4px;
   cursor: pointer;
   font-size: 1em;
@@ -491,9 +491,9 @@ export default {
 
 .btn-start {
   padding: 8px 16px;
-  background: #FF6B35;
+  background: var(--color-primary-orange);
   color: #000000;
-  border: 1px solid #FF6B35;
+  border: 1px solid var(--color-primary-orange);
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.9em;
@@ -517,9 +517,9 @@ export default {
 
 .btn-edit {
   padding: 6px 12px;
-  background: #FF6B35;
+  background: var(--color-primary-orange);
   color: #000000;
-  border: 1px solid #FF6B35;
+  border: 1px solid var(--color-primary-orange);
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.85em;
diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index 644844f..8b0b46b 100644
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -1801,9 +1801,9 @@ export default {
 
 .btn-switch-mode {
   padding: 8px 16px;
-  background: #FF6B35;
+  background: var(--color-primary-orange);
   color: #000000;
-  border: 1px solid #FF6B35;
+  border: 1px solid var(--color-primary-orange);
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.9em;
@@ -1812,9 +1812,9 @@ export default {
 }
 
 .btn-switch-mode:hover {
-  background: #FFF4F0;
-  color: #5D4037;
-  border: 1px solid #5D4037;
+  background: var(--color-primary-orange-light);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-text-secondary);
 }
 
 .vocab-answer-area.multiple-choice {
@@ -2114,7 +2114,7 @@ export default {
   justify-content: space-between;
   padding: 10px 20px;
   border-bottom: 1px solid #ddd;
-  background-color: #FF6B35;
+  background-color: var(--color-primary-orange);
 }
 
 .dialog-title {