diff --git a/src/react/View.tsx b/src/react/View.tsx
index 8221f3d..b60e50e 100644
--- a/src/react/View.tsx
+++ b/src/react/View.tsx
@@ -53,7 +53,7 @@ export function View({ selectedResult, sendTextMessage, onUpdateResult }: ViewPr
     if (isSelected) {
       return "border-blue-500 bg-blue-500/20";
     }
-    return "border-[#4b4b6b] hover:border-[#6b6b8b] hover:bg-[#6b6b8b]/20";
+    return "border-slate-600 hover:border-slate-500 hover:bg-slate-500/20";
   };
 
   const handleSubmit = () => {
@@ -79,11 +79,11 @@ export function View({ selectedResult, sendTextMessage, onUpdateResult }: ViewPr
   }
 
   return (
-    <div className="w-full min-h-[400px] overflow-y-auto p-8 bg-[#1a1a2e] rounded-lg">
+    <div className="w-full min-h-96 overflow-y-auto p-8 bg-slate-900 rounded-lg">
       <div className="max-w-3xl mx-auto">
         {/* Quiz Title */}
         {quizData.title && (
-          <h2 className="text-[#f0f0f0] text-3xl font-bold mb-8 text-center">
+          <h2 className="text-gray-100 text-3xl font-bold mb-8 text-center">
             {quizData.title}
           </h2>
         )}
@@ -93,7 +93,7 @@ export function View({ selectedResult, sendTextMessage, onUpdateResult }: ViewPr
           {quizData.questions.map((question, qIndex) => (
             <div
               key={qIndex}
-              className="bg-[#2d2d44] rounded-lg p-6 border-2 border-[#3d3d5c]"
+              className="bg-slate-800 rounded-lg p-6 border-2 border-slate-700"
             >
               {/* Question Text */}
               <div className="text-white text-lg font-semibold mb-4">
diff --git a/src/vue/View.vue b/src/vue/View.vue
index 4ee52ab..64abb36 100644
--- a/src/vue/View.vue
+++ b/src/vue/View.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="size-full overflow-y-auto p-8 bg-[#1a1a2e]">
+  <div class="size-full overflow-y-auto p-8 bg-slate-900">
     <div v-if="quizData" class="max-w-3xl w-full mx-auto">
       <!-- Quiz Title -->
-      <h2 v-if="quizData.title" class="text-[#f0f0f0] text-3xl font-bold mb-8 text-center">
+      <h2 v-if="quizData.title" class="text-gray-100 text-3xl font-bold mb-8 text-center">
         {{ quizData.title }}
       </h2>
 
@@ -11,7 +11,7 @@
         <div
           v-for="(question, qIndex) in quizData.questions"
           :key="qIndex"
-          class="bg-[#2d2d44] rounded-lg p-6 border-2 border-[#3d3d5c]"
+          class="bg-slate-800 rounded-lg p-6 border-2 border-slate-700"
         >
           <!-- Question Text -->
           <div class="text-white text-lg font-semibold mb-4">
@@ -127,7 +127,7 @@ function getChoiceClass(qIndex: number, cIndex: number): string {
   if (isSelected) {
     return "border-blue-500 bg-blue-500/20";
   }
-  return "border-[#4b4b6b] hover:border-[#6b6b8b] hover:bg-[#6b6b8b]/20";
+  return "border-slate-600 hover:border-slate-500 hover:bg-slate-500/20";
 }
 
 function handleSubmit(): void {