diff --git a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
index e4bdc5a..0685511 100644
--- a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
@@ -12,12 +12,12 @@ import {
   Card,
   CardContent,
   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";
+import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
 import {
   Pagination,
 } from "@/shadcn/components/ui/pagination-assessment";
@@ -864,102 +864,102 @@ export default function AssessmentPage() {
               {/* Skor Aspek dan Sub-Aspek */}
               <div className="mt-4">
                 <Card>
-                  <CardHeader>
-                    <Text className="text-lg font-extrabold text-center">Nilai Sementara</Text>
-                  </CardHeader>
+                  <Text className="text-lg font-extrabold text-center mt-4 mb-2">
+                    Nilai Sementara
+                  </Text>
+                    <CardContent className="max-h-full overflow-hidden">
+                      <ScrollArea className="h-[200px] w-full rounded-md p-2">
+                        <CardDescription>
+                          {filteredAspects.length > 0 ? (
+                            filteredAspects.map((aspect) => {
+                              const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
+                              const aspectScoreValue = parseFloat(aspectScore);
 
-                  <CardContent>
-                    <CardDescription>
-                      {filteredAspects.length > 0 ? (
-                        filteredAspects.map((aspect) => {
-                          const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
-                          const aspectScoreValue = parseFloat(aspectScore);
+                              return (
+                                <div key={aspect.aspectId} className="flex justify-between items-center">
+                                  <Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
+                                  <Text
+                                    className={`text-lg font-bold ${
+                                      aspectScoreValue >= 4.5
+                                        ? "text-green-700"
+                                        : aspectScoreValue >= 3.5
+                                        ? "text-green-400"
+                                        : aspectScoreValue >= 2.5
+                                        ? "text-yellow-400"
+                                        : aspectScoreValue >= 1.5
+                                        ? "text-orange-500"
+                                        : "text-red-500"
+                                    }`}
+                                  >
+                                    {aspectScore}
+                                  </Text>
+                                </div>
+                              );
+                            })
+                          ) : (
+                            <Text className="text-base text-gray-700">Data aspek ini kosong</Text>
+                          )}
+                        </CardDescription>
 
-                          return (
-                            <div key={aspect.aspectId} className="flex justify-between items-center">
-                              <Text className="text-lg text-gray-700">{aspect.aspectName}</Text>
-                              <Text
-                                className={`text-lg font-bold ${
-                                  aspectScoreValue >= 4.01
-                                    ? "text-green-700"
-                                    : aspectScoreValue >= 3.01
-                                    ? "text-green-400"
-                                    : aspectScoreValue >= 2.01
-                                    ? "text-yellow-400"
-                                    : aspectScoreValue >= 1.01
-                                    ? "text-orange-500"
-                                    : "text-red-500"
-                                }`}
-                              >
-                                {aspectScore}
-                              </Text>
-                            </div>
-                          );
-                        })
-                      ) : (
-                        <Text className="text-base text-gray-700">Data aspek ini kosong</Text>
-                      )}
-                    </CardDescription>
+                        {/* Garis pembatas */}
+                        <div className="border-t-2 border-gray-300 my-4" />
 
-                    {/* Garis pembatas */}
-                    <div className="border-t-2 border-gray-300 my-4" />
+                        {/* Skor Sub-Aspek */}
+                        {filteredSubAspects.length > 0 ? (
+                          filteredSubAspects.map((subAspect) => {
+                            const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
+                            const subAspectScoreValue = parseFloat(subAspectScore);
 
-                    {/* Skor Sub-Aspek */}
-                    {filteredSubAspects.length > 0 ? (
-                      filteredSubAspects.map((subAspect) => {
-                        const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
-                        const subAspectScoreValue = parseFloat(subAspectScore);
+                            return (
+                              <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.5
+                                      ? "text-green-700"
+                                      : subAspectScoreValue >= 3.5
+                                      ? "text-green-400"
+                                      : subAspectScoreValue >= 2.5
+                                      ? "text-yellow-400"
+                                      : subAspectScoreValue >= 1.5
+                                      ? "text-orange-500"
+                                      : "text-red-500"
+                                  }`}
+                                >
+                                  {subAspectScore}
+                                </Text>
+                              </div>
+                            );
+                          })
+                        ) : (
+                          <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
+                        )}
+                      </ScrollArea>
+                      {/* Tombol Selesai */}
+                      <div>
+                          <Button
+                            onClick={handleFinishClick}
+                            className="bg-[--primary-color] text-white font-bold rounded-md w-full text-sm"
+                          >
+                            Selesai
+                          </Button>
+                      </div>
+                    </CardContent>
 
-                        return (
-                          <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
-                                  ? "text-green-700"
-                                  : subAspectScoreValue >= 3.01
-                                  ? "text-green-400"
-                                  : subAspectScoreValue >= 2.01
-                                  ? "text-yellow-400"
-                                  : subAspectScoreValue >= 1.01
-                                  ? "text-orange-500"
-                                  : "text-red-500"
-                              }`}
-                            >
-                              {subAspectScore}
-                            </Text>
-                          </div>
-                        );
-                      })
-                    ) : (
-                      <Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text>
-                    )}
+                    {/* Modal untuk konfirmasi selesai asesmen */}
+                    <FinishAssessmentModal
+                      opened={modalOpen}
+                      onClose={() => setModalOpen(false)}
+                      onConfirm={handleConfirmFinish}
+                      assessmentId={assessmentId}
+                    />
 
-                    {/* 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
-                    opened={modalOpen}
-                    onClose={() => setModalOpen(false)}
-                    onConfirm={handleConfirmFinish}
-                    assessmentId={assessmentId}
-                  />
-
-                  {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
-                  <ValidationModal
-                    opened={validationModalOpen}
-                    onClose={() => setValidationModalOpen(false)}
-                    unansweredQuestions={unansweredQuestions}
-                  />
+                    {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
+                    <ValidationModal
+                      opened={validationModalOpen}
+                      onClose={() => setValidationModalOpen(false)}
+                      unansweredQuestions={unansweredQuestions}
+                    />
                 </Card>
               </div>
             </Flex>