diff --git a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
index 0b0a14e..e4bdc5a 100644
--- a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
@@ -14,6 +14,7 @@ import {
   CardDescription,
   CardHeader,
 } from "@/shadcn/components/ui/card";
+import { Button } from "@/shadcn/components/ui/button";
 import { Textarea } from "@/shadcn/components/ui/textarea";
 import { Label } from "@/shadcn/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group";
@@ -697,10 +698,10 @@ export default function AssessmentPage() {
                               {question.options.map((option: any) => (
                                 <div
                                   key={option.optionId}
-                                  className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border rounded-lg p-3 text-sm ${
+                                  className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border-4 rounded-lg p-3 text-sm ${
                                     answers[question.questionId] === option.optionId
-                                      ? "bg-blue-500 text-white"
-                                      : "bg-gray-200 text-black"
+                                      ? "bg-[--primary-color] text-white border-[--primary-color]"
+                                      : "bg-gray-200 text-black border-gray-200"
                                   }`}
                                   onClick={() => handleAnswerChange(question.questionId, option.optionId)}
                                 >
@@ -708,7 +709,7 @@ export default function AssessmentPage() {
                                     value={option.optionId}
                                     id={option.optionId}
                                     checked={answers[question.questionId] === option.optionId}
-                                    className="bg-white checked:bg-white checked:border-blue-500 pointer-events-none rounded-full"
+                                    className="bg-white checked:bg-white checked:border-[--primary-color] pointer-events-none rounded-full"
                                   />
                                   <Label
                                     htmlFor={option.optionId}
@@ -830,7 +831,7 @@ export default function AssessmentPage() {
                       <button
                         className={`w-9 h-9 border rounded-sm flex items-center justify-center relative text-md
                           ${answers[questionId] && flaggedQuestions[questionId] ? "bg-white text-black" : ""}
-                          ${answers[questionId] && !flaggedQuestions[questionId] ? "bg-blue-500 text-white" : ""}
+                          ${answers[questionId] && !flaggedQuestions[questionId] ? "bg-[--primary-color] text-white" : ""}
                           ${!answers[questionId] && !flaggedQuestions[questionId] ? "bg-transparent text-black" : ""}
                           ${flaggedQuestions[questionId] ? "border-gray-50" : ""}`}
                         onClick={() => scrollToQuestion(questionId)}
@@ -864,7 +865,7 @@ export default function AssessmentPage() {
               <div className="mt-4">
                 <Card>
                   <CardHeader>
-                    <Text className="font-extrabold text-center">Nilai Sementara</Text>
+                    <Text className="text-lg font-extrabold text-center">Nilai Sementara</Text>
                   </CardHeader>
 
                   <CardContent>
@@ -876,9 +877,9 @@ export default function AssessmentPage() {
 
                           return (
                             <div key={aspect.aspectId} className="flex justify-between items-center">
-                              <Text className="text-base text-gray-400">{aspect.aspectName}</Text>
+                              <Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
                               <Text
-                                className={`text-base font-bold ${
+                                className={`text-lg font-bold ${
                                   aspectScoreValue >= 4.01
                                     ? "text-green-700"
                                     : aspectScoreValue >= 3.01
@@ -896,7 +897,7 @@ export default function AssessmentPage() {
                           );
                         })
                       ) : (
-                        <Text className="text-base text-gray-400">Data aspek ini kosong</Text>
+                        <Text className="text-base text-gray-700">Data aspek ini kosong</Text>
                       )}
                     </CardDescription>
 
@@ -910,8 +911,8 @@ export default function AssessmentPage() {
                         const subAspectScoreValue = parseFloat(subAspectScore);
 
                         return (
-                          <div key={subAspect.subAspectId} className="flex justify-between items-center">
-                            <Text className="text-sm text-gray-400">{subAspect.subAspectName}</Text>
+                          <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
+                            <Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text>
                             <Text
                               className={`text-sm font-bold ${
                                 subAspectScoreValue >= 4.01
@@ -931,19 +932,19 @@ export default function AssessmentPage() {
                         );
                       })
                     ) : (
-                      <Text className="text-sm text-gray-400">Data sub-aspek ini kosong</Text>
+                      <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
                     )}
-                  </CardContent>
 
-                  {/* Tombol Selesai */}
-                  <div className="mt-4 mb-4 ml-4 mr-4">
-                    <button
-                      onClick={handleFinishClick}
-                      className="bg-blue-500 text-white font-bold rounded-md py-2 w-full text-sm"
-                    >
-                      Selesai
-                    </button>
-                  </div>
+                    {/* Tombol Selesai */}
+                    <div className="pt-4">
+                      <Button
+                        onClick={handleFinishClick}
+                        className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
+                      >
+                        Selesai
+                      </Button>
+                    </div>
+                  </CardContent>
 
                   {/* Modal untuk konfirmasi selesai asesmen */}
                   <FinishAssessmentModal