diff --git a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
index 2efc965..7641703 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
@@ -60,6 +60,7 @@ export default function AssessmentPage() {
   }>({});
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [modalOpen, setModalOpen] = useState(false);
+  const [selectedAspectId, setSelectedAspectId] = useState<string | null>(null);
   const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
   const [assessmentId, setAssessmentId] = useState<string | null>(null);
   const [answers, setAnswers] = useState<{ [key: string]: string }>({});
@@ -83,28 +84,50 @@ export default function AssessmentPage() {
 
   useEffect(() => {
     const id = getQueryParam("id");
-
+  
     if (!id) {
-      // Handle if no ID found
       setAssessmentId(null);
     } else {
       setAssessmentId(id);
     }
-
-    // Check if aspectsQuery.data and aspectsQuery.data.data are defined
+  
+    // Check if aspectsQuery.data is defined
     if (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0) {
       // If no sub-aspect is selected, find a suitable default
       if (selectedSubAspectId === null) {
         const firstMatchingSubAspect = aspectsQuery.data.data
-          .flatMap(aspect => aspect.subAspects) // Get all sub-aspects
-          .find(subAspect => data?.data.some(question => question.subAspectId === subAspect.id)); // Filter based on available questions
-
+          .flatMap((aspect) => aspect.subAspects) // Get all sub-aspects
+          .find((subAspect) =>
+            data?.data.some((question) => question.subAspectId === subAspect.id)
+          );
+  
         if (firstMatchingSubAspect) {
           setSelectedSubAspectId(firstMatchingSubAspect.id);
+  
+          // Find the parent aspect and set its id as the selectedAspectId
+          const parentAspect = aspectsQuery.data.data.find(aspect =>
+            aspect.subAspects.some(sub => sub.id === firstMatchingSubAspect.id)
+          );
+  
+          if (parentAspect) {
+            setSelectedAspectId(parentAspect.id); // Use `id` from the parent aspect
+          }
+        }
+      } else {
+        // Update the aspectId based on the selected sub-aspect
+        const matchingAspect = aspectsQuery.data.data.find((aspect) =>
+          aspect.subAspects.some((subAspect) => subAspect.id === selectedSubAspectId)
+        );
+  
+        if (matchingAspect) {
+          setSelectedAspectId(matchingAspect.id); // Use `id` from the matching aspect
+        } else {
+          console.warn("No matching aspect found for selected sub-aspect.");
+          setSelectedAspectId(null);
         }
       }
     }
-  }, [aspectsQuery.data, selectedSubAspectId, data?.data])
+  }, [aspectsQuery.data, selectedSubAspectId, data?.data]);
 
   const handleConfirmFinish = () => {
     if (assessmentId) {
@@ -128,11 +151,16 @@ export default function AssessmentPage() {
 
   // Fetch average scores by aspect
   const averageScoreQuery = useQuery(getAverageScoreQueryOptions(assessmentId || ""));
+  const aspects = averageScoreQuery.data?.aspects || [];
 
-  // Filter average score aspect berdasarkan sub-aspect yang dipilih
-  const filteredAverageScores = averageScoreQuery.data?.aspects?.filter(aspect =>
-    aspect.subAspects.some(subAspect => subAspect.subAspectId === selectedSubAspectId)
-  );
+  // Filter aspects by selected aspectId
+  const filteredAspects = selectedAspectId
+  ? aspects.filter((aspect) => aspect.aspectId === selectedAspectId) // Use 'id' instead of 'aspectId'
+  : aspects;
+
+  // Get the currently selected aspect to show all related sub-aspects
+  const currentAspect = aspects.find(aspect => aspect.aspectId === selectedAspectId);
+  const filteredSubAspects = currentAspect ? currentAspect.subAspects : [];
 
   // Mutation function to toggle flag
   const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
@@ -671,24 +699,19 @@ export default function AssessmentPage() {
                 <Stack>
                   {/* Skor Aspek */}
                   <div>
-                    {filteredAverageScores && filteredAverageScores.length > 0 ? (
-                      filteredAverageScores.map((aspect) => (
-                        <div key={aspect.aspectId}>
-                          {/* Aspect Rendering */}
-                          <div className="flex justify-between items-center">
-                            <Text className="text-xl text-gray-400">
-                              {aspect.aspectName}
-                            </Text>
-                            <Text className="text-xl font-bold">
-                              {parseFloat(aspect.averageScore).toFixed(2)}
-                            </Text>
-                          </div>
+                    {filteredAspects.length > 0 ? (
+                      filteredAspects.map((aspect) => (
+                        <div key={aspect.aspectId} className="flex justify-between items-center">
+                          <Text className="text-xl text-gray-400">{aspect.aspectName}</Text>
+                          <Text className="text-xl font-bold">
+                            {parseFloat(aspect.averageScore).toFixed(2)}
+                          </Text>
                         </div>
                       ))
                     ) : (
                       <Text className="text-lg text-gray-400">Data aspek kosong</Text>
                     )}
-                </div>
+                  </div>
 
                   {/* Garis pembatas */}
                   <div>
@@ -697,25 +720,17 @@ export default function AssessmentPage() {
 
                   {/* Skor Sub-Aspek */}
                   <div>
-                {filteredAverageScores && filteredAverageScores.length > 0 ? (
-                      filteredAverageScores.flatMap((aspect) => 
-                        aspect.subAspects && aspect.subAspects.length > 0 ? (
-                          aspect.subAspects.map((subAspect) => (
-                            <div key={subAspect.subAspectId} className="flex justify-between items-center">
-                              <Text className="text-lg text-gray-400">
-                                {subAspect.subAspectName}
-                              </Text>
-                              <Text className="text-lg font-bold">
-                                {parseFloat(subAspect.averageScore).toFixed(2)}
-                              </Text>
-                            </div>
-                          ))
-                        ) : (
-                          <Text className="text-lg text-gray-400">Tidak ada sub-aspek</Text>
-                        )
-                      )
+                    {filteredSubAspects.length > 0 ? (
+                      filteredSubAspects.map((subAspect) => (
+                        <div key={subAspect.subAspectId} className="flex justify-between items-center"> {/* Change key to 'id' */}
+                          <Text className="text-lg text-gray-400">{subAspect.subAspectName}</Text> {/* Change to 'name' */}
+                          <Text className="text-lg font-bold">
+                            {parseFloat(subAspect.averageScore).toFixed(2)}
+                          </Text>
+                        </div>
+                      ))
                     ) : (
-                      <Text className="text-lg text-gray-400">Data sub aspek kosong</Text>
+                      <Text className="text-lg text-gray-400">Data sub-aspek kosong</Text>
                     )}
                   </div>
                 </Stack>