diff --git a/main/lp/learnpath.class.php b/main/lp/learnpath.class.php
index 22394047c0..dcd452d042 100755
--- a/main/lp/learnpath.class.php
+++ b/main/lp/learnpath.class.php
@@ -3111,12 +3111,11 @@ class learnpath
             'dir'
         );
     }
-
     /**
      * Uses the table generated by get_toc() and returns an HTML-formatted string ready to display
      * @return	string	HTML TOC ready to display
      */
-    public function get_html_toc($toc_list = null)
+    public function getListArrayToc($toc_list = null)
     {
         if ($this->debug > 0) {
             error_log('In learnpath::get_html_toc()', 0);
@@ -3124,81 +3123,75 @@ class learnpath
         if (empty($toc_list)) {
             $toc_list = $this->get_toc();
         }
-        $html = '<div class="scorm-body">';
-        $html .= '<div id="inner_lp_toc" class="inner_lp_toc scrollbar-light">';
-
         // Temporary variables.
         $mycurrentitemid = $this->get_current_item_id();
-        $color_counter = 0;
-        $i = 0;
-
-        foreach ($toc_list as $item) {
-            // Style Status
-            $class_name = [
-                'not attempted' => 'scorm_not_attempted',
-                'incomplete' => 'scorm_not_attempted',
-                'failed' => 'scorm_failed',
-                'completed' => 'scorm_completed',
-                'passed' => 'scorm_completed',
-                'succeeded' => 'scorm_completed',
-                'browsed' => 'scorm_completed',
+        $list = [];
+        $arrayList = [];
+        $classStatus = [
+            'not attempted' => 'scorm_not_attempted',
+            'incomplete' => 'scorm_not_attempted',
+            'failed' => 'scorm_failed',
+            'completed' => 'scorm_completed',
+            'passed' => 'scorm_completed',
+            'succeeded' => 'scorm_completed',
+            'browsed' => 'scorm_completed',
             ];
+        foreach ($toc_list as $item) {
 
-            $rowColor = ' ';
+            $list['id'] = $item['id'];
+            $list['status'] = $item['status'];
+            $cssStatus = null;
+            
+            if (isset($classStatus[$item['status']])) {
+                $cssStatus = $classStatus[$item['status']];
+            }
+            
+            $classStyle = ' ';
             $dirTypes = self::getChapterTypes();
 
             if (in_array($item['type'], $dirTypes)) {
-                $rowColor ='scorm_item_section ';
+                $classStyle = 'scorm_item_section ';
             }
             if ($item['id'] == $this->current) {
-                $rowColor = 'scorm_item_normal '.$rowColor.' scorm_highlight';
+                $classStyle = 'scorm_item_normal '.$classStyle.'scorm_highlight';
             } elseif (!in_array($item['type'], $dirTypes)) {
-                $rowColor = 'scorm_item_normal '.$rowColor.' ';
+                $classStyle = 'scorm_item_normal '.$classStyle.' ';
             }
-
-            $html .= '<div id="toc_' . $item['id'] . '" class="' . $rowColor . ' ' . $class_name[$item['status']] . '">';
-
-            // Learning path title
             $title = $item['title'];
-            if (empty ($title)) {
+            if (empty($title)) {
                 $title = self::rl_get_resource_name(api_get_course_id(), $this->get_id(), $item['id']);
             }
-            $title = Security::remove_XSS($title);
-
-            // Learning path personalization
-            // build the LP tree
-            // The anchor atoc_ will let us center the TOC on the currently viewed item &^D
-            $description = $item['description'];
-            if (empty($description)) {
-                $description = $title;
-            }
-            if (in_array($item['type'], $dirTypes)) {
-                // Chapters
-                $html .= '<div class="section level_'.$item['level'].'" title="'.$description.'" >';
+            $title = Security::remove_XSS($item['title']);
+            
+            if (empty($item['description'])) {
+                $list['description'] = $title;
             } else {
-                $html .= '<div class="item level_'.$item['level'].' scorm_type_'.self::format_scorm_type_item($item['type']).'" title="'.$description.'" >';
-                $html .= '<a name="atoc_'.$item['id'].'"></a>';
+                $list['description'] = $item['description'];
             }
+            
+            $list['class'] =  $classStyle.' '.$cssStatus;
+            $list['level'] = $item['level'];
+            $list['type'] = $item['type'];
 
             if (in_array($item['type'], $dirTypes)) {
-                // Chapter
-                // if you want to put an image before, you should use css
-                $html .= stripslashes($title);
+                $list['css_level'] = 'level_'.$item['level'];
             } else {
-                $this->get_link('http', $item['id'], $toc_list);
-                $html .= '<a class="items-list" href="#" onclick="switch_item(' .$mycurrentitemid . ',' .$item['id'] . ');' .'return false;" >' . stripslashes($title) . '</a>';
+                $list['css_level'] = 'level_'.$item['level']
+                    .' scorm_type_'
+                    .learnpath::format_scorm_type_item($item['type']);
             }
-            $html .= "</div>";
 
-            if ($rowColor != '') {
-                $html .= '</div>';
+            if (in_array($item['type'], $dirTypes)) {
+                $list['title'] = stripslashes($title);
+            } else {
+                $list['title'] = stripslashes($title);
+                $list['url'] = $this->get_link('http', $item['id'], $toc_list);
+                $list['current_id'] = $mycurrentitemid;
             }
-
-            $color_counter++;
+            $arrayList[] = $list;
         }
-        $html .= "</div>";
-        $html .= "</div>";
-        return $html;
+        
+        return $arrayList;
     }
 
     /**
diff --git a/main/lp/lp_view.php b/main/lp/lp_view.php
index 901e1285a2..d29bda333f 100755
--- a/main/lp/lp_view.php
+++ b/main/lp/lp_view.php
@@ -540,10 +540,7 @@ $template->assign(
 $template->assign('lp_author', $_SESSION['oLP']->get_author());
 $template->assign('lp_mode', $_SESSION['oLP']->mode);
 $template->assign('lp_title_scorm', $_SESSION['oLP']->name);
-$template->assign(
-    'lp_html_toc',
-    $_SESSION['oLP']->get_html_toc($get_toc_list)
-);
+$template->assign('data_list', $_SESSION['oLP']->getListArrayToc($get_toc_list));
 $template->assign('lp_id', $_SESSION['oLP']->lp_id);
 $template->assign('lp_current_item_id', $_SESSION['oLP']->get_current_item_id());
 
diff --git a/main/template/default/learnpath/scorm_list.tpl b/main/template/default/learnpath/scorm_list.tpl
new file mode 100644
index 0000000000..2e0bc046cd
--- /dev/null
+++ b/main/template/default/learnpath/scorm_list.tpl
@@ -0,0 +1,26 @@
+{% if data_list is not empty %}
+<div id="learning_path_toc" class="scorm-list">
+    <div class="scorm-body">
+        <h1 class="scorm-title">{{ lp_title_scorm }}</h1>
+        <div id="inner_lp_toc" class="inner_lp_toc scrollbar-light">
+            {% for item in data_list %}
+                <div id="toc_{{ item.id }}" class="{{ item.class }}">
+                    {% if item.type == 'dir' %}
+                        <div class="section {{ item.css_level }}" title="{{ item.description }}">
+                            {{ item.title }}
+                        </div>
+                    {% else %}
+                        <div class="item {{ item.css_level }}" title="{{ item.description }}">
+                            <a name="atoc_{{ item.id }}"></a>
+                            <a class="items-list" href="#" onclick="switch_item('{{ item.current_id }}','{{ item.id }}'); return false;" >
+                                {{ item.title }}
+                            </a>
+                        </div>
+                    {% endif %}
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endif %}
+{{ accorden_toc }}
\ No newline at end of file
diff --git a/main/template/default/learnpath/view.tpl b/main/template/default/learnpath/view.tpl
index 63733b2a91..f92cfc70f0 100644
--- a/main/template/default/learnpath/view.tpl
+++ b/main/template/default/learnpath/view.tpl
@@ -65,11 +65,8 @@
                 </div>
             {# TOC layout #}
             <div id="toc_id" class="scorm-body" name="toc_name">
-                <div id="learning_path_toc" class="scorm-list">
-                    <h1 class="scorm-title">{{ lp_title_scorm }}</h1>
-                    {{ lp_html_toc }}
+                    {% include template ~ '/learnpath/scorm_list.tpl' %}
                 </div>
-            </div>
             {# end TOC layout #}
             </div>
         </div>