diff --git a/src/roles/user/material/hooks/useMaterials.jsx b/src/roles/user/material/hooks/useMaterials.jsx
index ac8c466..20110d0 100644
--- a/src/roles/user/material/hooks/useMaterials.jsx
+++ b/src/roles/user/material/hooks/useMaterials.jsx
@@ -6,12 +6,21 @@ const useMaterials = (section, topic, level) => {
   const [materials, setMaterial] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const { topicSlugMap } = useSlugContext();
+  const { sectionSlugMap, topicSlugMap, groupSlugMap } = useSlugContext();
 
   useEffect(() => {
     const fetchData = async () => {
         try {
-            const data = await materialService.fetchMaterials(topicSlugMap[topic], level);
+            const secId = sectionSlugMap[section]; 
+            const findTopic = groupSlugMap[secId].find(
+              (item) => item.nametopic === topic
+            );
+
+            // console.log('slug', topicSlugMap[topic]);
+            // console.log('find', findTopic.idtopic);
+
+            // const data = await materialService.fetchMaterials(topicSlugMap[topic], level);
+            const data = await materialService.fetchMaterials(findTopic.idtopic, level);
             setMaterial(data[0]);
         } catch (err) {
             setError(err);
diff --git a/src/utils/SlugContext.jsx b/src/utils/SlugContext.jsx
index 0038747..7c0ecd5 100644
--- a/src/utils/SlugContext.jsx
+++ b/src/utils/SlugContext.jsx
@@ -15,8 +15,12 @@ const config = {
 export const SlugProvider = ({ children, logout }) => {
     const [sectionSlugMap, setSectionSlugMap] = useState({});
     const [topicSlugMap, setTopicSlugMap] = useState({});
+    const [groupSlugMap, setGroupSlugMap] = useState({});
     const [loading, setLoading] = useState(true);
 
+    const [sectionSuccess, setSectionSuccess] = useState(false);
+    const [topicSuccess, setTopicSuccess] = useState(false);
+
     const fetchData = async () => {
       try {
           const sectionMapping = {};
@@ -27,6 +31,7 @@ export const SlugProvider = ({ children, logout }) => {
               sectionMapping[slug] = section.ID_SECTION;
           });
           setSectionSlugMap(sectionMapping);
+          setSectionSuccess(true);
       } catch (error) {
         if (error.status === 403 || error.status === 401) {
           logout();
@@ -34,15 +39,39 @@ export const SlugProvider = ({ children, logout }) => {
           console.error('Error fetching section', error);
         }
       } finally{
+        try{
+            const topicMapping = {};
+            // const topicResponse = await axios.get(`${API_URL}/topic`, config);
+            const topicResponse = await axiosInstance.get(`/topic`);
+            topicResponse.data.payload.forEach((topic) => {
+                const slug = slugify(topic.NAME_TOPIC);
+                topicMapping[slug] = topic.ID_TOPIC;
+            });
+            setTopicSlugMap(topicMapping);
+            setTopicSuccess(true);
+        } catch (error) {
+          if (error.status === 403 || error.status === 401) {
+            logout();
+          }else{
+            console.error('Error fetching section', error);
+            setLoading(false);
+          }
+        } finally{
           try{
-              const topicMapping = {};
-              // const topicResponse = await axios.get(`${API_URL}/topic`, config);
+              const groupMapping = {};
               const topicResponse = await axiosInstance.get(`/topic`);
               topicResponse.data.payload.forEach((topic) => {
-                  const slug = slugify(topic.NAME_TOPIC);
-                  topicMapping[slug] = topic.ID_TOPIC;
+                  // const slug = slugify(topic.NAME_TOPIC);
+                  // groupMapping[slug] = topic.ID_TOPIC;
+
+                  if (!groupMapping[topic.ID_SECTION]) {
+                    groupMapping[topic.ID_SECTION] = [];
+                  }
+                  const idtopic = topic.ID_TOPIC;
+                  const nametopic = slugify(topic.NAME_TOPIC);
+                  groupMapping[topic.ID_SECTION].push({ idtopic, nametopic });
               });
-              setTopicSlugMap(topicMapping);
+              setGroupSlugMap(groupMapping);
           } catch (error) {
             if (error.status === 403 || error.status === 401) {
               logout();
@@ -53,6 +82,7 @@ export const SlugProvider = ({ children, logout }) => {
           } finally{
               setLoading(false);
           }
+        }
       }
     };
 
@@ -65,7 +95,7 @@ export const SlugProvider = ({ children, logout }) => {
   }
 
   return (
-    <SlugContext.Provider value={{ sectionSlugMap, topicSlugMap }}>
+    <SlugContext.Provider value={{ sectionSlugMap, topicSlugMap, groupSlugMap }}>
       {children}
     </SlugContext.Provider>
   );