diff --git a/.gitignore b/.gitignore
index 2e1f4a9..a349f38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,5 @@ output_doc.html
 output.html
 src/testdoc/html/templates/jinja_template_02.html
 image.png
+output_doc_robot.html
+devel.html
diff --git a/README.md b/README.md
index a482892..ef002b6 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,37 @@ For using this config file, just call the following command:
 testdoc -c path/to/config.toml tests/ TestDocumentation.html
 ```
 
+## HTML Template Selection
+
+You can choose between multiple HTML template for the design of your test documentation.    
+These template can be configured via ``cli arguments`` or within a ``.toml configuration file`` with the parameter ``html_template (-ht / --html-template)``.
+
+### Default Design
+
+- v2
+
+### Available HTML Templates
+
+You can choose one of the following designs:
+- v1
+- v2
+
+### Version 1
+
+#### Visit Tests
+
+![alt text](docs/html_v1_common.png)
+
+### Version 2
+
+#### Visit Tests on Root Suite Level
+
+![alt text](docs/html_v2_root.png)
+
+#### Visit Tests on Suite File Level
+
+![alt text](docs/html_v2_suitefile.png)
+
 ## Theme Selection / Color Configuration
 
 You can select between several themes (color configurations) for your HTML document to create!
diff --git a/docs/html_v1_common.png b/docs/html_v1_common.png
new file mode 100644
index 0000000..b0f1af9
Binary files /dev/null and b/docs/html_v1_common.png differ
diff --git a/docs/html_v2_root.png b/docs/html_v2_root.png
new file mode 100644
index 0000000..7c85f01
Binary files /dev/null and b/docs/html_v2_root.png differ
diff --git a/docs/html_v2_suitefile.png b/docs/html_v2_suitefile.png
new file mode 100644
index 0000000..1f2abd3
Binary files /dev/null and b/docs/html_v2_suitefile.png differ
diff --git a/pyproject.toml b/pyproject.toml
index bd2165f..651b3ed 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,11 +4,13 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "robotframework-testdoc"
-version = "0.1.8"
+version = "0.2.0"
 description = "A CLI Tool to generate a Test Documentation for your RobotFramework Test Scripts."
 readme = "README.md"
 requires-python = ">=3.7"
-authors = [{ name = "Marvin Klerx", email = "marvinklerx20@gmail.com" }]
+authors = [
+    { name = "Marvin Klerx", email = "marvinklerx20@gmail.com" }
+]
 license = { text = "MIT" }
 
 dependencies = [
@@ -21,6 +23,16 @@ dependencies = [
 [project.scripts]
 testdoc = "testdoc.cli:main"
 
+[tool.setuptools]
+include-package-data = true
+
+[tool.setuptools.package-data]
+"testdoc" = [
+    "html/images/*.svg",
+    "html/templates/**/*.html",
+    "default.toml"
+]
+
 [tool.ruff]
 line-length = 150
 lint.select = ["E", "F"]  # Pyflakes & pycodestyle
diff --git a/src/testdoc/cli.py b/src/testdoc/cli.py
index 213b326..adc1be1 100644
--- a/src/testdoc/cli.py
+++ b/src/testdoc/cli.py
@@ -4,7 +4,8 @@
 from .testdoc import TestDoc
 from .helper.cliargs import CommandLineArguments
 
-@click.command()
+CONTEXT_SETTINGS = dict(help_option_names=['-h', '--help'])
+@click.command(context_settings=CONTEXT_SETTINGS)
 @click.option("-t","--title",       required=False, help="Modify the title of the test documentation page")
 @click.option("-n","--name",        required=False, help="Modify the name of the root suite element")
 @click.option("-d","--doc",         required=False, help="Modify the documentation of the root suite element")
@@ -20,8 +21,10 @@
 @click.option("--hide-source",      is_flag=True, required=False, help="If given, test suite/ test case source is hidden")
 @click.option("--hide-keywords",    is_flag=True, required=False, help="If given, keyword calls in test cases are hidden")
 @click.option("-S", "--style", required=False, help="Choose a predefined default style theme - 'default', 'robot', 'dark' or 'blue' ")
+@click.option("-ht","--html-template", required=False, help="Select the HTML template - possible values: 'v1', 'v2'")
 @click.option("-c", "--configfile", required=False, help="Optional .toml configuration file (includes all cmd-args)")
 @click.option("-v", "--verbose",    is_flag=True, required=False, help="More precise debugging into shell")
+@click.version_option(package_name='robotframework-testdoc')
 @click.argument("PATH")
 @click.argument("OUTPUT")
 def main(
@@ -38,6 +41,7 @@ def main(
         hide_source,
         hide_keywords,
         style,
+        html_template,
         configfile,
         verbose,
         path,
@@ -81,6 +85,7 @@ def main(
         "hide_keywords": hide_keywords or None,
         "verbose_mode": verbose or None,
         "style": style or None,
+        "html_template": html_template or None,
         "config_file": configfile or None,
     }
     args.suite_file = path
diff --git a/src/testdoc/helper/cliargs.py b/src/testdoc/helper/cliargs.py
index af7f092..2c0fcc4 100644
--- a/src/testdoc/helper/cliargs.py
+++ b/src/testdoc/helper/cliargs.py
@@ -1,6 +1,6 @@
 from dataclasses import dataclass, field
 from typing import Any, List
-import tomli
+from .toml_reader import TOMLReader
 import os
 
 @dataclass
@@ -21,6 +21,7 @@ class CommandLineArgumentsData:
     verbose_mode: bool = False
     suite_file: str = None
     style: str = None
+    html_template: str = "v2"
     output_file: str = None
     colors: dict = None
 
@@ -37,9 +38,7 @@ def __new__(cls):
     ### Load configuration file
     ###
     def load_from_config_file(self, file_path: str):
-        with open(file_path, "rb") as f:
-            config = tomli.load(f)
-
+        config = TOMLReader()._read_toml(file_path)
         _is_pyproject = self._is_pyproject_config(file_path)
         if _is_pyproject:
             self._handle_pyproject_config(config)
diff --git a/src/testdoc/helper/toml_reader.py b/src/testdoc/helper/toml_reader.py
new file mode 100644
index 0000000..0a2f5ac
--- /dev/null
+++ b/src/testdoc/helper/toml_reader.py
@@ -0,0 +1,11 @@
+import tomli
+
+class TOMLReader():
+
+    def _read_toml(self, file_path:str):
+        try:
+            with open(file_path, "rb") as f:
+                config = tomli.load(f)
+                return config
+        except Exception as e:
+            raise ImportError(f"Cannot read toml file in: {file_path} with error: \n{e}")
\ No newline at end of file
diff --git a/src/testdoc/html/templates/jinja_template_01.html b/src/testdoc/html/templates/v1/jinja_template_01.html
similarity index 98%
rename from src/testdoc/html/templates/jinja_template_01.html
rename to src/testdoc/html/templates/v1/jinja_template_01.html
index 957276b..b1d433f 100644
--- a/src/testdoc/html/templates/jinja_template_01.html
+++ b/src/testdoc/html/templates/v1/jinja_template_01.html
@@ -121,7 +121,9 @@ <h2 class="accordion-header" id="headingTest{{ index }}-{{ loop.index }}">
                                                 <tr>
                                                     <td style="width: 10%; font-weight: bold;">🏷 Tags:</td>
                                                     <td style="text-align: left;">
-                                                        {% if test.tags %}
+                                                        {% if test.tags and test.tags is string %}
+                                                            {{ test.tags }}
+                                                        {% else %}
                                                             {{ test.tags | join(', ') }}
                                                         {% endif %}
                                                     </td>
@@ -132,7 +134,7 @@ <h2 class="accordion-header" id="headingTest{{ index }}-{{ loop.index }}">
                                                     <td style="width: 10%; font-weight: bold; vertical-align: top;">🔑 Keywords:</td>
                                                     <td style="text-align: left;">
                                                         {% if test.keywords %}
-                                                            - {{ test.keywords | join('<br>- ') }}
+                                                            <pre>- {{ test.keywords | join('\n- ') }}</pre>
                                                         {% endif %}
                                                     </td>
                                                 </tr>
diff --git a/src/testdoc/html/templates/v1/jinja_template_02.html b/src/testdoc/html/templates/v1/jinja_template_02.html
new file mode 100644
index 0000000..202ace1
--- /dev/null
+++ b/src/testdoc/html/templates/v1/jinja_template_02.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Robot Framework - Test Documentation</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <style>
+        html, body, .container-fluid {
+            background-color: {{ colors.background }};
+            color: {{ colors.text_color }};
+            font-size: 14px;
+        }
+        a {
+            color: {{ colors.text_color }};
+        }
+        a:hover {
+            color: {{ colors.robot_icon }};
+        }
+        .sidebar {
+            min-width: 250px;
+            max-width: 250px;
+            background-color: {{ colors.inner_color }};
+            border-right: 1px solid {{ colors.border_color }};
+            height: 100vh;
+            overflow-y: auto;
+        }
+        .content {
+            padding: 20px;
+            flex-grow: 1;
+        }
+        .suite-item {
+            padding: 8px 16px;
+            cursor: pointer;
+        }
+        .suite-item:hover {
+            background-color: {{ colors.button_hover_color }};
+        }
+        .accordion-item, .accordion-body {
+            background-color: {{ colors.inner_color }};
+            border-color: {{ colors.border_color }};
+            color: {{ colors.text_color }};
+        }
+        .accordion-button {
+            background-color: {{ colors.inner_color }};
+            color: {{ colors.text_color }};
+        }
+        .accordion-button:hover {
+            background-color: {{ colors.button_hover_color }} !important;
+        }
+        .accordion-button:not(.collapsed),
+        .accordion-button:focus,
+        .accordion-button:active {
+            background-color: {{ colors.button_active_color }} !important;
+            box-shadow: none !important;
+            color: {{ colors.text_color }};
+        }
+        .generated_at {
+            color: {{ colors.title_color }};
+        }
+    </style>
+</head>
+<body class="d-flex flex-column min-vh-100">
+    <div class="d-flex flex-grow-1">
+        <div class="sidebar">
+            <h5 class="text-center mt-3">📁 Suites</h5>
+            <ul class="list-unstyled">
+                {% for suite in suites %}
+                    <li class="suite-item" onclick="showSuite('{{ loop.index0 }}')">{{ suite.name }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="content">
+            {% for suite in suites %}
+                <div id="suite-{{ loop.index0 }}" class="suite-view" style="display: {% if loop.first %}block{% else %}none{% endif %};">
+                    <h4>{{ suite.name }}</h4>
+                    {% if suite.doc %}<p><strong>📝 Docs:</strong> {{ suite.doc }}</p>{% endif %}
+                    {% if suite.source %}<p><strong>🔗 Source:</strong> <a href="{{ suite.source }}" target="_blank">{{ suite.source }}</a></p>{% endif %}
+                    <p><strong>📊 Number of Tests:</strong> {{ suite.num_tests }}</p>
+
+                    {% for test in suite.tests %}
+                        <div class="accordion mb-3">
+                            <div class="accordion-item">
+                                <h2 class="accordion-header">
+                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#test-{{ loop.index0 }}-{{ loop.index }}">
+                                        🔍 {{ test.name }}
+                                    </button>
+                                </h2>
+                                <div id="test-{{ loop.index0 }}-{{ loop.index }}" class="accordion-collapse collapse">
+                                    <div class="accordion-body">
+                                        {% if test.doc %}<p><strong>📝 Docs:</strong><br>{{ test.doc }}</p>{% endif %}
+                                        {% if test.source %}<p><strong>🔗 Source:</strong> <a href="{{ test.source }}" target="_blank">{{ test.source }}</a></p>{% endif %}
+                                        {% if test.tags %}<p><strong>🏷 Tags:</strong> {{ test.tags | join(', ') }}</p>{% endif %}
+                                        {% if test.keywords %}<p><strong>🔑 Keywords:</strong><br>- {{ test.keywords | join('<br>- ') }}</p>{% endif %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+    <p class="text-center generated_at py-1 border-top">
+        Generated at: {{ generated_at }}<br>robotframework-testdoc by Marvin Klerx
+    </p>
+    <script>
+        function showSuite(index) {
+            const views = document.querySelectorAll('.suite-view');
+            views.forEach(view => view.style.display = 'none');
+            document.getElementById('suite-' + index).style.display = 'block';
+        }
+    </script>
+</body>
+</html>
diff --git a/src/testdoc/html/templates/v2/jinja_template_03.html b/src/testdoc/html/templates/v2/jinja_template_03.html
new file mode 100644
index 0000000..86fc5f1
--- /dev/null
+++ b/src/testdoc/html/templates/v2/jinja_template_03.html
@@ -0,0 +1,316 @@
+<!-- Jinja Macro for recursive suite tree (sidebar) -->
+{% macro render_suite_tree(suite, parent_id='root') %}
+    <li>
+        <a href="#" class="suite-link" data-suite-id="{{ suite.id }}">{{ suite.filename }}</a>
+        {% if suite.sub_suites %}
+            <ul>
+                {% for sub_suite in suite.sub_suites %}
+                    {{ render_suite_tree(sub_suite, sub_suite.id) }}
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </li>
+{% endmacro %}
+
+<!-- Jinja Macro for test case cards (main area) -->
+{% macro render_test_cases(suite) %}
+    {% if suite.tests %}
+        <div class="suite-header mb-3 p-3" data-suite-id="{{ suite.id }}" style="border: 1px solid {{ colors.border_color }}; border-radius: .375rem; background: {{ colors.inner_color }};">
+            <div><strong>Generic Suite Details:</strong></div>
+            <table style="width: 100%; border-collapse: collapse;">
+                <tr>
+                    <td style="width: 10%; font-weight: bold;">📁 Suite Name:</td>
+                    <td style="text-align: left;">{{ suite.name }}</td>
+                </tr>
+                {% if not suite.is_folder %}
+                    <tr>
+                        <td style="width: 10%; font-weight: bold;">📄 File Name:</td>
+                        <td style="text-align: left;">{{ suite.filename }}</td>
+                    </tr>
+                {% endif %}
+                <tr>
+                    <td style="width: 10%; font-weight: bold;">📊 Number of Tests:</td>
+                    <td style="text-align: left;">{{ suite.num_tests }}</td>
+                </tr>
+                {% if suite.doc is not none %}
+                <tr>
+                    <td style="width: 10%; font-weight: bold; vertical-align: top;">📝 Docs:</td>
+                    <td style="text-align: left;">{{ suite.doc }}</td>
+                </tr>
+                {% endif %}
+                {% if suite.metadata is not none %}
+                <tr>
+                    <td style="width: 10%; font-weight: bold; vertical-align: top;">⚙️ Metadata:</td>
+                    <td style="text-align: left;">{{ suite.metadata }}</td>
+                </tr>
+                {% endif %}
+            </table>
+        </div>
+        {% for test in suite.tests %}
+            <div class="card mb-3 test-card" data-suite-id="{{ suite.id }}">
+                <div class="card-header" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#collapse-{{ suite.id }}-{{ loop.index }}" aria-expanded="false" aria-controls="collapse-{{ suite.id }}-{{ loop.index }}">
+                    <svg class="svg-icon" width="20" height="20" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <title>Robot Framework</title>
+                        <path d="M4.9565 10.2246c0-1.8766 1.5257-3.4023 3.4-3.4023 1.8766 0 3.4024 1.5257 3.4024 3.4023 0 .6838-.5526 1.2364-1.2341 1.2364-.6818 0-1.2344-.5526-1.2344-1.2364 0-.513-.4185-.9296-.9338-.9296-.5129 0-.9317.4165-.9317.9296 0 .6838-.5523 1.2364-1.234 1.2364-.6818 0-1.2344-.5526-1.2344-1.2364m14.0868 5.717c0 .6842-.5524 1.2363-1.2341 1.2363H6.3575c-.6818 0-1.2344-.552-1.2344-1.2363 0-.6837.5526-1.2363 1.2344-1.2363h11.4517c.6817 0 1.234 5526 1.234 1.2363m-5.351-5.0244c-.3814-.5657-.2323-1.3328.3334-1.7143l2.8628-1.9334c.5613-.3902 1.3329-.2324 1.7144.3289.3815.5654.2323 1.3329-.3334 1.7144l-2.8628 1.9333c-.5442.3831-1.3348.2379-1.7144-.3289zm7.8393 7.6018a.8815.8815 0 0 1-.258.6227l-2.1277 2.1277a.8822.8822 0 0 1-.623.258H5.4772a.8822.8822 0 0 1-.623-.258l-2.1277-2.1277a.8815.8815 0 0 1-.258-.6227V5.4818a.8797.8797 0 0 1 .258-.6228l2.1277-2.1282a.8816.8816 0 0 1 .623-.2578h13.0456a.8816.8816 0 0 1 .623.2578l2.1277 2.1282a.8797.8797 0 0 1 .258.6228V18.519zm1.811-15.0835L20.5644.6577A2.2454 2.2454 0 0 0 18.9775 0H5.0207A2.2445 2.2445 0 0 0 3.433.658L.657 3.4359A2.2449 2.2449 0 0 0 0 5.0228v13.9547c0 .5953.2366 1.1667.6575 1.5872l2.778 2.7779c.421.421.9918.6573 1.5871.6573h13.9548a2.2448 2.2448 0 0 0 1.5872-.6573l2.7779-2.7779A2.2436 2.2436 0 0 0 24 18.9775V5.023a2.2451 2.2451 0 0 0-.6575-1.5875z"/>
+                    </svg>
+                    &nbsp;Test Case: <strong>{{ test.name }}</strong>
+                </div>
+                <div id="collapse-{{ suite.id }}-{{ loop.index }}" class="collapse">
+                    <div class="card-body">
+                        <table style="width: 100%; border-collapse: collapse;">
+                            {% set has_info = test.doc is not none or test.source is not none or test.tags is not none or test.keywords is not none %}
+                            {% if test.doc is not none %}
+                                <tr>
+                                    <td style="width: 10%; font-weight: bold; vertical-align: top;">📝 Docs:</td>
+                                    <td style="text-align: left;">{{ test.doc }}</td>
+                                </tr>
+                            {% endif %}
+                            {% if test.source is not none %}
+                                <tr>
+                                    <td style="width: 10%; font-weight: bold; vertical-align: top;">🔗 Source:</td>
+                                    <td style="text-align: left;">
+                                        <a href="{{ test.source }}" target="_blank">{{ test.source }}</a>
+                                    </td>
+                                </tr>
+                            {% endif %}
+                            {% if test.tags is not none %}
+                                <tr>
+                                    <td style="width: 10%; font-weight: bold;">🏷 Tags:</td>
+                                    <td style="text-align: left;">
+                                        {% if test.tags and test.tags is string %}
+                                            {{ test.tags }}
+                                        {% else %}
+                                            {{ test.tags | join(', ') }}
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            {% endif %}
+                            {% if test.keywords is not none %}
+                                <tr>
+                                    <td style="width: 10%; font-weight: bold; vertical-align: top;">🔑 Keywords:</td>
+                                    <td style="text-align: left;">
+                                        {% if test.keywords %}
+                                            <pre>- {{ test.keywords | join('\n- ') }}</pre>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            {% endif %}
+                            {% if not has_info %}
+                                <tr>
+                                    <td class="info-msg" style="width: 10%; vertical-align: top; text-align: center;">
+                                        No Details Available / Enabled !
+                                    </td>
+                                </tr>
+                            {% endif %}
+                        </table>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    {% endif %}
+    {% if suite.sub_suites %}
+        <div class="suite-header mb-3 p-3" data-suite-id="{{ suite.id }}" style="border: 1px solid {{ colors.border_color }}; border-radius: .375rem; background: {{ colors.inner_color }};">
+            <div><strong>Generic Parent Suite Details:</strong></div>
+            <table style="width: 100%; border-collapse: collapse;">
+                <tr>
+                    <td style="width: 10%; font-weight: bold;">📁 Suite Name:</td>
+                    <td style="text-align: left;">{{ suite.name }}</td>
+                </tr>
+                <tr>
+                    <td style="width: 10%; font-weight: bold;">📊 Number of Tests:</td>
+                    <td style="text-align: left;">{{ suite.total_tests }}</td>
+                </tr>
+                {% if suite.doc is not none %}
+                <tr>
+                    <td style="width: 10%; font-weight: bold; vertical-align: top;">📝 Docs:</td>
+                    <td style="text-align: left;">{{ suite.doc }}</td>
+                </tr>
+                {% endif %}
+                {% if suite.metadata is not none %}
+                <tr>
+                    <td style="width: 10%; font-weight: bold; vertical-align: top;">⚙️ Metadata:</td>
+                    <td style="text-align: left;">{{ suite.metadata }}</td>
+                </tr>
+                {% endif %}
+            </table>
+        </div>
+        {% for sub_suite in suite.sub_suites %}
+            {{ render_test_cases(sub_suite) }}
+        {% endfor %}
+    {% endif %}
+{% endmacro %}
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Robot Framework - Test Documentation</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <style>
+        html, body, .container-fluid {
+            background-color: {{ colors.background }};
+            color: {{ colors.text_color }};
+            font-size: 14px;
+        }
+        a { color: {{ colors.text_color }}; }
+        a:hover { color: {{ colors.robot_icon }}; }
+        .svg-icon { fill: {{ colors.robot_icon }}; }
+        h1 { color: {{ colors.title_color }}; font-size: 30px; }
+        .info-msg { color: {{ colors.title_color }}; }
+        .generated_at { color: {{ colors.title_color }}; }
+        .sidebar {
+            background: {{ colors.inner_color }};
+            border-right: 1px solid {{ colors.border_color }};
+            min-width: 260px;
+            max-width: 320px;
+            height: 100vh;
+            overflow-y: auto;
+            padding: 20px 10px 10px 10px;
+        }
+        .suite-tree ul {
+            list-style-type: none;
+            padding-left: 18px;
+        }
+        .suite-tree li {
+            margin-bottom: 4px;
+        }
+        .suite-link {
+            color: {{ colors.text_color }};
+            text-decoration: none;
+            cursor: pointer;
+        }
+        .suite-link.active {
+            font-weight: bold;
+            color: {{ colors.robot_icon }};
+        }
+        .main-content {
+            padding: 30px 20px 20px 20px;
+            background: {{ colors.background }};
+            min-height: 100vh;
+        }
+        .test-card {
+            border: 1px solid {{ colors.border_color }};
+            background: {{ colors.inner_color }};
+        }
+        .test-card .card-header {
+            background: {{ colors.button_active_color }};
+            color: {{ colors.text_color }};
+            font-size: 16px;
+        }
+        .test-card .card-body {
+            font-size: 14px;
+        }
+        table {
+            font-size: 13px;
+            color: {{ colors.text_color }};
+        }
+        td {
+            padding: 1px 1px;
+        }
+        @media (max-width: 900px) {
+            .sidebar { min-width: 120px; max-width: 180px; }
+            .main-content { padding: 10px; }
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1 class="text-center mt-4">{{ title }}</h1>
+        <hr style="border-top: 1px solid {{ colors.border_color }}; margin: 0 0 20px 0;">
+        <div class="row" style="min-height: 80vh;">
+            <nav class="col-md-3 sidebar suite-tree">
+                <h5 style="color: {{ colors.title_color }};">Directory Structure: </h5>
+                <ul>
+                    {% for suite in suites %}
+                        {{ render_suite_tree(suite) }}
+                    {% endfor %}
+                </ul>
+            </nav>
+            <main class="col-md-9 main-content">
+                <div id="test-cases-list">
+                    {% for suite in suites %}
+                        {{ render_test_cases(suite) }}
+                    {% endfor %}
+                </div>
+            </main>
+        </div>
+        <p class="text-center generated_at py-1 border-top" style="color: {{ colors.text_color }};">
+            This test case documentation was generated at: {{ generated_at }}
+            <br>
+            <a href="mailto:{{ contact_mail }}?subject=Support Request - robotframework-testdoc" target="_blank">Contact the Developer</a> | 
+            <a href="https://github.com/MarvKler/robotframework-testdoc?tab=readme-ov-file#robot-framework-testdoc" target="_blank">Visit Project on GitHub</a> | 
+            <a href="https://github.com/MarvKler/robotframework-testdoc/issues/new" target="_blank">Report Issue</a>
+        </p>
+    </div>
+    <script>
+        // Assign unique IDs to suites for filtering (should be done in Python, but fallback here)
+        document.querySelectorAll('.suite-link').forEach(function(link, idx) {
+            if (!link.dataset.suiteId) link.dataset.suiteId = 'suite-' + idx;
+        });
+        document.querySelectorAll('.test-card').forEach(function(card, idx) {
+            if (!card.dataset.suiteId) card.dataset.suiteId = 'suite-' + idx;
+        });
+
+        // Build suite hierarchy for filtering
+        function buildSuiteTree() {
+            const tree = {};
+            document.querySelectorAll('.suite-link').forEach(function(link) {
+                const suiteId = link.dataset.suiteId;
+                const parentLi = link.closest('li');
+                const subLinks = parentLi ? parentLi.querySelectorAll(':scope > ul > li > .suite-link') : [];
+                tree[suiteId] = Array.from(subLinks).map(l => l.dataset.suiteId);
+            });
+            return tree;
+        }
+
+        // Get all descendant suite ids (recursive)
+        function getAllDescendantSuites(tree, suiteId) {
+            let ids = [suiteId];
+            if (tree[suiteId]) {
+                tree[suiteId].forEach(function(childId) {
+                    ids = ids.concat(getAllDescendantSuites(tree, childId));
+                });
+            }
+            return ids;
+        }
+
+        const suiteTree = buildSuiteTree();
+
+        // Filtering logic: show test cases for selected suite and all its sub-suites
+        document.querySelectorAll('.suite-link').forEach(function(link) {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+                var suiteId = this.dataset.suiteId;
+                document.querySelectorAll('.suite-link').forEach(function(l) { l.classList.remove('active'); });
+                this.classList.add('active');
+                // Get all descendant suite ids
+                var ids = getAllDescendantSuites(suiteTree, suiteId);
+
+                // Hide all test cards and suite headers
+                document.querySelectorAll('.test-card').forEach(function(card) {
+                    card.style.display = 'none';
+                });
+                document.querySelectorAll('.suite-header').forEach(function(header) {
+                    header.style.display = 'none';
+                });
+
+                // Show only test cards and suite headers for this suite and its descendants
+                ids.forEach(function(id) {
+                    document.querySelectorAll('.test-card[data-suite-id="' + id + '"]').forEach(function(card) {
+                        card.style.display = '';
+                    });
+                    document.querySelectorAll('.suite-header[data-suite-id="' + id + '"]').forEach(function(header) {
+                        header.style.display = '';
+                    });
+                });
+            });
+        });
+
+        // Show all test cases and suite headers by default
+        document.querySelectorAll('.test-card').forEach(function(card) { card.style.display = ''; });
+        document.querySelectorAll('.suite-header').forEach(function(header) { header.style.display = ''; });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/testdoc/html_rendering/render.py b/src/testdoc/html_rendering/render.py
index b04eaba..13502ab 100644
--- a/src/testdoc/html_rendering/render.py
+++ b/src/testdoc/html_rendering/render.py
@@ -8,23 +8,36 @@
 
 class TestDocHtmlRendering():
 
-    TEMPLATE_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "..", "html", "templates")
-    
     def __init__(self):
         self.args = CommandLineArguments().data
+        self._html_templ_selection()
+
+    def _html_templ_selection(self):
+        """ Check which HTML template should selected - custom specific configuration """
+        if self.args.html_template == "v1":
+            self.HTML_TEMPLATE_VERSION = self.args.html_template
+            self.HTML_TEMPLATE_NAME = "jinja_template_01.html"
+            self.TEMPLATE_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "..", "html", "templates", self.HTML_TEMPLATE_VERSION)
+        elif self.args.html_template == "v2":
+            self.HTML_TEMPLATE_VERSION = self.args.html_template
+            self.HTML_TEMPLATE_NAME = "jinja_template_03.html"
+            self.TEMPLATE_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "..", "html", "templates", self.HTML_TEMPLATE_VERSION)
+        else:
+            raise ValueError(f"CLI Argument 'html_template' got value '{self.args.html_template}' - value not known!")         
 
     def render_testdoc(self,
             suites,
             output_file
         ):
         env = Environment(loader=FileSystemLoader(self.TEMPLATE_DIR))
-        template = env.get_template("jinja_template_01.html")
+        template = env.get_template(self.HTML_TEMPLATE_NAME)
 
         rendered_html = template.render(
             suites=suites,
             generated_at=DateTimeConverter().get_generated_datetime(),
             title=self.args.title,
-            colors=ThemeConfig().theme()
+            colors=ThemeConfig().theme(),
+            contact_mail = "marvinklerx20@gmail.com"
         )
         with open(output_file, "w", encoding="utf-8") as f:
             f.write(rendered_html)
diff --git a/src/testdoc/parser/testcaseparser.py b/src/testdoc/parser/testcaseparser.py
index 870019d..54a266e 100644
--- a/src/testdoc/parser/testcaseparser.py
+++ b/src/testdoc/parser/testcaseparser.py
@@ -1,6 +1,8 @@
 from robot.api import TestSuite
+from robot.running.model import Keyword, Body
 from robot.errors import DataError
 from ..helper.cliargs import CommandLineArguments
+import textwrap
 
 class TestCaseParser():
 
@@ -19,7 +21,7 @@ def parse_test(self,
                                    if line.strip()) if test.doc else "No Test Case Documentation Available", 
                 "tags": test.tags if test.tags else "No Tags Configured",
                 "source": str(test.source),
-                "keywords": [kw.name for kw in test.body if hasattr(kw, 'name')] or "No Keyword Calls in Test"
+                "keywords": self._keyword_parser(test.body)
             }
             suite_info["tests"].append(test_info)
         return suite_info
@@ -33,4 +35,133 @@ def consider_tags(self, suite: TestSuite) -> TestSuite:
                 suite.configure(exclude_tags=self.args.exclude)
             return suite
         except DataError as e:
-            raise DataError(e.message)
\ No newline at end of file
+            raise DataError(e.message)
+        
+    def _keyword_parser(self, test_body: Body):
+        """ Parse keywords and their child-items """
+        _keyword_object = []
+        for kw in test_body:
+            _keyword_object.extend(self._handle_keyword_types(kw))
+
+        _keyword_object = self._kw_post_processing(_keyword_object)
+
+        # Fallback in case of no keywords
+        if len(_keyword_object) == 0:
+            return "No Keyword Calls in Test"
+        return _keyword_object
+        
+    def _handle_keyword_types(self, kw: Keyword, indent: int = 0):
+        """ Handle different keyword types """
+        result = []
+        kw_type = getattr(kw, 'type', None)
+
+        _sd = "    " # classic rfw delimiter with 4 spaces
+        _indent = _sd * indent
+
+        # Classic keyword
+        if kw_type == "KEYWORD" and getattr(kw, 'name', None):
+            args = _sd.join(kw.args) if getattr(kw, 'args', None) else ""
+            entry =  _indent + kw.name
+            if args:
+                entry += _sd + args
+            wrapped = textwrap.wrap(entry, width=150, subsequent_indent=_indent + "..." + _sd)
+            result.extend(wrapped)
+
+        # VAR syntax
+        elif kw_type == "VAR" and getattr(kw, 'name', None):
+            value = _sd.join(kw.value) if getattr(kw, 'value', None) else ""
+            result.append(f"{_indent}VAR    {kw.name} =    {value}")
+
+        # IF/ELSE/ELSE IF
+        elif kw_type == "IF/ELSE ROOT":
+            for branch in getattr(kw, 'body', []):
+                branch_type = getattr(branch, 'type', None)
+                if branch_type == "IF":
+                    header = f"{_indent}IF{_sd}{getattr(branch, 'condition', '')}".rstrip()
+                elif branch_type == "ELSE IF":
+                    header = f"{_indent}ELSE IF{_sd}{getattr(branch, 'condition', '')}".rstrip()
+                elif branch_type == "ELSE":
+                    header = f"{_indent}ELSE"
+                else:
+                    header = f"{_indent}{branch_type or ''}"
+                if header:
+                    result.append(header)
+                for subkw in getattr(branch, 'body', []):
+                    result.extend(self._handle_keyword_types(subkw, indent=indent+1))
+            result.append(f"{_indent}END")
+
+        # FOR loop
+        elif kw_type == "FOR":
+            header = f"{_indent}FOR"
+            if hasattr(kw, 'assign') and kw.assign:
+                header += f"    {'    '.join(kw.assign)}"
+            if hasattr(kw, 'flavor') and kw.flavor:
+                header += f"    {kw.flavor}"
+            if hasattr(kw, 'values') and kw.values:
+                header += f"    IN    {'    '.join(kw.values)}"
+            result.append(header)
+            if hasattr(kw, 'body'):
+                for subkw in kw.body:
+                    result.extend(self._handle_keyword_types(subkw, indent=indent+1))
+            result.append(f"{_indent}END")
+
+        # WHILE loop
+        elif kw_type == "WHILE":
+            header = f"{_indent}WHILE"
+            if hasattr(kw, 'condition') and kw.condition:
+                header += f"    {kw.condition}"
+            result.append(header)
+            if hasattr(kw, 'body'):
+                for subkw in kw.body:
+                    result.extend(self._handle_keyword_types(subkw, indent=indent+1))
+            result.append(f"{_indent}END")
+
+        # TRY/EXCEPT/FINALLY
+        elif kw_type in ("TRY", "EXCEPT", "FINALLY"):
+            header = f"{_indent}{kw_type}"
+            if hasattr(kw, 'patterns') and kw.patterns:
+                header += f"    {'    '.join(kw.patterns)}"
+            if hasattr(kw, 'condition') and kw.condition:
+                header += f"    {kw.condition}"
+            result.append(header)
+            if hasattr(kw, 'body'):
+                for subkw in kw.body:
+                    result.extend(self._handle_keyword_types(subkw, indent=indent+1))
+            if kw_type in ("EXCEPT", "FINALLY"):
+                result.append(f"{_indent}END")            
+
+        # BREAK, CONTINUE, RETURN, ERROR
+        elif kw_type in ("BREAK", "CONTINUE", "RETURN", "ERROR"):
+            entry = f"{_indent}{kw_type}"
+            if hasattr(kw, 'values') and kw.values:
+                entry += f"    {'    '.join(kw.values)}"
+            result.append(entry)
+
+        # Other types
+        elif kw_type in ("COMMENT", "EMPTY"):
+            pass
+
+        # Unknown types
+        elif hasattr(kw, 'body'):
+            for subkw in kw.body:
+                result.extend(self._handle_keyword_types(subkw))
+
+        return result
+    
+    def _kw_post_processing(self, kw: list):
+        """ Post-processing of generated keyword list to handle special cases """
+        # TRY/EXCEPT/FINALLY 
+        # post-process list for specific handling 
+        for i in range(len(kw) - 1):
+            _cur = str(kw[i]).replace(" ", "")
+            _next = str(kw[i + 1]).replace(" ", "")
+            if _cur == "END" and _next == "FINALLY":
+                kw.pop(i)
+                break
+        return kw
+
+
+
+
+
+
diff --git a/src/testdoc/parser/testsuiteparser.py b/src/testdoc/parser/testsuiteparser.py
index 606ca5a..fe2c24c 100644
--- a/src/testdoc/parser/testsuiteparser.py
+++ b/src/testdoc/parser/testsuiteparser.py
@@ -1,4 +1,5 @@
 import os
+from pathlib import Path
 
 from robot.api import SuiteVisitor, TestSuite
 from .testcaseparser import TestCaseParser
@@ -6,6 +7,7 @@
 
 class RobotSuiteParser(SuiteVisitor):
     def __init__(self):
+        self.suite_counter = 0
         self.suites = []
         self.tests = []
 
@@ -16,6 +18,8 @@ def visit_suite(self, suite):
 
         # Test Suite Parser
         suite_info = {
+            "id": str(suite.longname).lower().replace(".", "_").replace(" ", "_"),
+            "filename": str(Path(suite.source).name),
             "name": suite.name,
             "doc": "<br>".join(line.replace("\\n","") for line in suite.doc.splitlines() if line.strip()) if suite.doc else None,
             "is_folder": self._is_directory(suite),