diff --git a/docs/generatedocs.sh b/docs/generatedocs.sh
index 5e7fc70c9c..0718ea10df 100644
--- a/docs/generatedocs.sh
+++ b/docs/generatedocs.sh
@@ -14,17 +14,11 @@ main() {
     )
 
     # The template for the list
-    item_html_template='
-    <li class="packages__list__item">
-        <a target="_blank" href="package_path_placeholder">
-            <span class="package__name"> {{name_placeholder}} </span>
-            <span class="package__description"> {{description_placeholder}} </span>
-        </a>
-    </li>
-    '
+    item_html_template=$(cat ./templates/item.hbs)
 
     # The filled template
     package_list_html=''
+    package_version=$(grep -oP '^version\s*=\s*"\K[^"]+' "../Cargo.toml")
 
     for current_dir in ${projects_dirs[@]}; do
         # Obtain the Cargo.toml file to the current_directory in the integration
@@ -33,9 +27,10 @@ main() {
         # Use grep and sed to extract the value of the name, description and version of the package
         package_name=$(grep -oP '^name\s*=\s*"\K[^"]+' "$manifest_path")
         package_description=$(grep -oP '^description\s*=\s*"\K[^"]+' "$manifest_path")
-        package_version=$(grep -oP '^version\s*=\s*"\K[^"]+' "../Cargo.toml")
 
         package_name_and_version="$package_name-$package_version"
+
+        # Replace all hyphens with underscores i/e pkg-1 => pkg_2
         underscore_package_name=${package_name//-/_}
 
         # Obtain the target_directory where the docs will be saved based on the package name
@@ -43,10 +38,10 @@ main() {
 
         # Run the command to generate the docs
         cargo doc --manifest-path "$manifest_path" --target-dir "$target_dir"
-        path_to_docs=("packages/$package_name/doc/$underscore_package_name/index.html")
+        path_to_docs=("./packages/$package_name/doc/$underscore_package_name/index.html")
 
         # Delete the build file because it takes space and is unnecessary to the docs
-        path_to_build=("packages/$package_name/debug")
+        path_to_build=("./packages/$package_name/debug")
         rm -rf $path_to_build
 
         # Replace name and description placeholders in the template
@@ -56,18 +51,21 @@ main() {
         package_list_html+="$processed_html"
     done
 
-    input_file_path="./base.html"
+    input_file_path="./templates/base.hbs"
     output_file_path="./index.html"
 
+    # Read the input file into a variable
     input_file=$(cat $input_file_path)
 
-    # Split the content into parts using 'packages_list' as the delimiter
+    # Split the content into parts using '{{packages_list}}' as the delimiter
     before_placeholder=${input_file%%"{{packages_list}}"*}
     after_placeholder=${input_file#*"{{packages_list}}"}
 
+    # Create the full html content by putting the html content in the middle of the htmltemplate
+    # ! have to do this instead of a direct replace because the replace command fails due to special characters present in an html template
     full_html="$before_placeholder $package_list_html $after_placeholder"
 
-    # echo "Replaced 'packages_list' with the content of 'list_items' in $input_file_path."
+    # Write the processed HTML to the output file path
     echo "$full_html" > $output_file_path
 }
 
diff --git a/docs/base.html b/docs/templates/base.hbs
similarity index 100%
rename from docs/base.html
rename to docs/templates/base.hbs
diff --git a/docs/templates/item.hbs b/docs/templates/item.hbs
new file mode 100644
index 0000000000..cb092b8618
--- /dev/null
+++ b/docs/templates/item.hbs
@@ -0,0 +1,6 @@
+<li class="packages__list__item">
+    <a target="_blank" href="package_path_placeholder">
+        <span class="package__name"> {{name_placeholder}} </span>
+        <span class="package__description"> {{description_placeholder}} </span>
+    </a>
+</li>
\ No newline at end of file