diff --git a/.gitignore b/.gitignore
index 5d6102ec..534af9ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,15 @@
 venv/
 .DS_Store
 .cache/
+
+#Sphinx Data
+docs/Documentation/API_Release/
+Sphinx/source/engine3d_website_test/
+
+#doxygen
+doxygen_output/
+
+#Website Output
+site/
+html/
+latex/
diff --git a/Doxyfile_api b/Doxyfile_api
new file mode 100644
index 00000000..89c6a3a0
--- /dev/null
+++ b/Doxyfile_api
@@ -0,0 +1,21 @@
+PROJECT_NAME = "Engine3D"
+INPUT = {{INPUT_PATH}}
+FILE_PATTERNS = *.h*
+EXTRACT_STATIC = YES
+EXCLUDE_PATTERNS = */third_party/*
+HAVE_DOT = YES
+OUTPUT_DIRECTORY = ./doxygen_output
+XML_OUTPUT = xml
+GENERATE_LATEX = NO
+GENERATE_MAN = NO
+GENERATE_RTF = NO
+CASE_SENSE_NAMES = NO
+GENERATE_HTML = NO
+GENERATE_XML = YES
+RECURSIVE = YES
+QUIET = YES
+PREDEFINED = IN_DOXYGEN
+EXCLUDE_SYMBOLS = detail
+GENERATE_TREEVIEW = YES
+SOURCE_BROWSER = YES
+WARN_IF_UNDOCUMENTED = YES
\ No newline at end of file
diff --git a/README.md b/README.md
index 391badf0..c02e0e89 100644
--- a/README.md
+++ b/README.md
@@ -13,3 +13,28 @@ Check https://sfsu-dev.github.io/engine3d.github.io to learn mode.
 ## Pip Install
 * Installing the dependencies for this project.
 `pip install -r requirements.txt`
+
+## Doxygen
+* running on linux for github to deploy `sudo apt install doxygen`
+
+# Doxygen-Breath-Sphinx
+* cd into Sphinx/source folder `cd Sphinx\source`
+* run `python generate_sphinx_dyn.py`
+* run `sphinx-build -b html ./ ../../docs/Documentation/API_Release`
+* go back to top folder `cd ../..`
+
+# Shortcuts
+
+## Windows
+* Run `build_docs.ps1`
+
+> ⚠️ **Note**: The `build_docs.ps1` script must be executed using PowerShell.  
+> Attempting to run it in Command Prompt or other shells may result in errors. To execute the script:
+> 1. Open PowerShell.
+> 2. Navigate to the project directory.
+> 3. Run the command: `.\build_docs.ps1`
+> 4. the path depends on what your trying to do but it should be absolute
+
+
+# Run mkdocs
+* run `mkdocs serve`
\ No newline at end of file
diff --git a/Sphinx/Makefile b/Sphinx/Makefile
new file mode 100644
index 00000000..d0c3cbf1
--- /dev/null
+++ b/Sphinx/Makefile
@@ -0,0 +1,20 @@
+# Minimal makefile for Sphinx documentation
+#
+
+# You can set these variables from the command line, and also
+# from the environment for the first two.
+SPHINXOPTS    ?=
+SPHINXBUILD   ?= sphinx-build
+SOURCEDIR     = source
+BUILDDIR      = build
+
+# Put it first so that "make" without argument is like "make help".
+help:
+	@$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
+
+.PHONY: help Makefile
+
+# Catch-all target: route all unknown targets to Sphinx using the new
+# "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
+%: Makefile
+	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
diff --git a/Sphinx/make.bat b/Sphinx/make.bat
new file mode 100644
index 00000000..dc1312ab
--- /dev/null
+++ b/Sphinx/make.bat
@@ -0,0 +1,35 @@
+@ECHO OFF
+
+pushd %~dp0
+
+REM Command file for Sphinx documentation
+
+if "%SPHINXBUILD%" == "" (
+	set SPHINXBUILD=sphinx-build
+)
+set SOURCEDIR=source
+set BUILDDIR=build
+
+%SPHINXBUILD% >NUL 2>NUL
+if errorlevel 9009 (
+	echo.
+	echo.The 'sphinx-build' command was not found. Make sure you have Sphinx
+	echo.installed, then set the SPHINXBUILD environment variable to point
+	echo.to the full path of the 'sphinx-build' executable. Alternatively you
+	echo.may add the Sphinx directory to PATH.
+	echo.
+	echo.If you don't have Sphinx installed, grab it from
+	echo.https://www.sphinx-doc.org/
+	exit /b 1
+)
+
+if "%1" == "" goto help
+
+%SPHINXBUILD% -M %1 %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O%
+goto end
+
+:help
+%SPHINXBUILD% -M help %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O%
+
+:end
+popd
diff --git a/Sphinx/source/conf.py b/Sphinx/source/conf.py
new file mode 100644
index 00000000..15167e3e
--- /dev/null
+++ b/Sphinx/source/conf.py
@@ -0,0 +1,35 @@
+import os
+# Configuration file for the Sphinx documentation builder.
+#
+# For the full list of built-in configuration values, see the documentation:
+# https://www.sphinx-doc.org/en/master/usage/configuration.html
+
+# -- General configuration ---------------------------------------------------
+# https://www.sphinx-doc.org/en/master/usage/configuration.html#general-configuration
+
+extensions = ['breathe']
+
+templates_path = ['_templates']
+exclude_patterns = []
+
+language = 'en'
+
+# -- Options for HTML output -------------------------------------------------
+# https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
+
+html_theme = 'sphinx_rtd_theme'
+html_static_path = ['_static']
+
+# Configure Breathe for Doxygen
+
+breathe_projects = {
+    "Engine3D": os.path.abspath("../../doxygen_output/xml")
+}
+breathe_default_project = "Engine3D"
+
+# -- Project information -----------------------------------------------------
+# https://www.sphinx-doc.org/en/master/usage/configuration.html#project-information
+
+copyright = '2025, Apache 2.0'
+author = 'Engine3D Developers'
+release = '0.0.1a'
diff --git a/Sphinx/source/generate_sphinx_dyn.py b/Sphinx/source/generate_sphinx_dyn.py
new file mode 100644
index 00000000..6987ef85
--- /dev/null
+++ b/Sphinx/source/generate_sphinx_dyn.py
@@ -0,0 +1,107 @@
+import os
+import xml.etree.ElementTree as ET
+from collections import defaultdict
+
+
+def parse_doxygen_xml_folder(xml_folder, output_dir):
+    # Build a global hierarchy dictionary
+    global_hierarchy = defaultdict(dict)
+
+    # Iterate over all files in the XML folder that match *_8h.xml or *_8hpp.xml
+    for xml_file in os.listdir(xml_folder):
+        if xml_file.endswith("_8h.xml") or xml_file.endswith("_8hpp.xml"):
+            xml_path = os.path.join(xml_folder, xml_file)
+            parse_doxygen_xml(xml_path, global_hierarchy)
+
+    # Generate the .rst files after processing all files
+    generate_rst(global_hierarchy, output_dir)
+
+    # Generate the root index.rst file
+    generate_root_index(global_hierarchy, output_dir)
+
+
+def parse_doxygen_xml(xml_path, global_hierarchy):
+    # Parse the Doxygen XML
+    tree = ET.parse(xml_path)
+    root = tree.getroot()
+
+    # Look specifically for the node with id="1"
+    node = root.find(".//node[@id='1']")
+    if node is None:
+        print(f"No node with id=1 found in {xml_path}")
+        return
+
+    # Find the label in the node
+    label = node.find("label")
+    if label is None or not label.text:
+        print(f"No <label> found in node with id=1 in {xml_path}")
+        return
+
+    # Build the hierarchy for the current label
+    path = label.text
+    parts = path.split("/")
+    current = global_hierarchy
+    for part in parts[:-1]:  # Add all parts except the last (the .h or .hpp file)
+        current = current.setdefault(part, {})
+    # Add the .h or .hpp file as a leaf node
+    current[parts[-1]] = None  # Leaf node for .h or .hpp file
+
+
+def generate_rst(hierarchy, current_path):
+    # Recursively write .rst files for the entire hierarchy
+    for name, sub_hierarchy in hierarchy.items():
+        if name.endswith(".h") or name.endswith(".hpp"):  # Treat .h or .hpp files as leaf nodes
+            # Create the directory structure
+            file_rst_path = os.path.join(current_path, f"{name}.rst")
+
+            # Create the file .rst
+            with open(file_rst_path, "w") as f:
+                f.write(f"{name}\n")
+                f.write("=" * len(name) + "\n\n")
+                f.write(f".. doxygenfile:: {name}\n")  # Keep the full file name with extension
+                f.write("   :project: Engine3D\n")
+
+        else:  # Treat as a folder
+            # Create the directory structure
+            dir_path = os.path.join(current_path, name)
+            os.makedirs(dir_path, exist_ok=True)
+
+            # Name the .rst file after the folder
+            rst_file_path = os.path.join(dir_path, f"{name}.rst")
+
+            # Create the folder .rst file
+            with open(rst_file_path, "w") as f:
+                f.write(f"{name.capitalize()}\n")
+                f.write("=" * len(name) + "\n\n")
+                f.write(".. toctree::\n")
+                f.write("   :maxdepth: 2\n\n")
+                for sub_name in sub_hierarchy:
+                    if sub_name.endswith(".h") or sub_name.endswith(".hpp"):
+                        f.write(f"   {sub_name}.rst\n")  # Reference file's .rst
+                    else:
+                        f.write(f"   {sub_name}/{sub_name}.rst\n")
+
+            # Recurse into subdirectories
+            generate_rst(sub_hierarchy, dir_path)
+
+
+def generate_root_index(hierarchy, output_dir):
+    # Create the root index.rst file
+    root_index_path = os.path.join(output_dir, "index.rst")
+    with open(root_index_path, "w") as f:
+        f.write("Root Index\n")
+        f.write("==========\n\n")
+        f.write(".. toctree::\n")
+        f.write("   :maxdepth: 2\n\n")
+        for top_level_dir in hierarchy:
+            if top_level_dir.endswith(".h") or top_level_dir.endswith(".hpp"):
+                f.write(f"   {top_level_dir}.rst\n")  # Reference file's .rst
+            else:
+                f.write(f"   {top_level_dir}/{top_level_dir}.rst\n")
+    print(f"Root index.rst created at {root_index_path}")
+
+
+# Usage
+doxygen_xml_folder = "../../doxygen_output/xml"  # Replace with the folder containing your Doxygen XML files
+output_directory = "./"  # Replace with your Sphinx source directory
+parse_doxygen_xml_folder(doxygen_xml_folder, output_directory)
\ No newline at end of file
diff --git a/Sphinx/source/index.rst b/Sphinx/source/index.rst
new file mode 100644
index 00000000..1e67bc2e
--- /dev/null
+++ b/Sphinx/source/index.rst
@@ -0,0 +1,7 @@
+Root Index
+==========
+
+.. toctree::
+   :maxdepth: 2
+
+   engine3d_website_test/engine3d_website_test.rst
diff --git a/assets/extra.css b/assets/extra.css
deleted file mode 100644
index bcb353c5..00000000
--- a/assets/extra.css
+++ /dev/null
@@ -1,38 +0,0 @@
-h1 {
-    color: orange;
-    font-size: 2em;
-}
-
-.md-typeset h2 {
-    font-size: 1.5em;
-}
-
-a code {
-    color: #2980B9;
-}
-
-a:hover code {
-    color: #3091d1;
-}
-
-a:visited code {
-    color: #9B59B6;
-}
-
-.md-header__topic {
-    font-size: 1.6em;
-    font-weight: 100 !important;
-}
-
-.md-logo {
-    margin: 0px !important;
-    padding: 0px !important;
-}
-
-.md-logo img {
-    height: 2.2rem !important;
-}
-
-.md-tabs__link {
-    font-size: .8rem !important;
-}
diff --git a/build_docs.ps1 b/build_docs.ps1
new file mode 100644
index 00000000..9d70aa15
--- /dev/null
+++ b/build_docs.ps1
@@ -0,0 +1,46 @@
+param (
+    [Parameter(Mandatory=$true)]
+    [string]$UserGivenPath
+)
+
+# Extract the final folder name
+$FinalFolderName = Split-Path $UserGivenPath -Leaf
+
+# 1. Remove folder docs/Documentation/API_Release if it exists
+if (Test-Path "./docs/Documentation/API_Release") {
+    Write-Host "Removing folder docs/Documentation/API_Release..."
+    Remove-Item -Recurse -Force "docs/Documentation/API_Release"
+}
+# 2. Remove folder doxygen_output if it exists
+if (Test-Path "./doxygen_output") {
+    Write-Host "Removing folder doxygen_output..."
+    Remove-Item -Recurse -Force "./doxygen_output"
+}
+
+# 3. Run Doxygen with the User Given Path
+Write-Host "Running Doxygen with input path: $UserGivenPath..."
+$DoxyfileTemp = "ProcessedDoxyfile_api"
+(Get-Content Doxyfile_api | Where-Object {$_ -notmatch "^INPUT ="} ) | Set-Content $DoxyfileTemp
+Add-Content $DoxyfileTemp "INPUT = $UserGivenPath"
+& doxygen $DoxyfileTemp
+Remove-Item $DoxyfileTemp
+
+# 4. Change directory to Sphinx/source
+Set-Location "Sphinx/source"
+
+# 5. Remove folder matching the final folder name
+if (Test-Path $FinalFolderName) {
+    Write-Host "Removing folder $FinalFolderName..."
+    Remove-Item -Recurse -Force $FinalFolderName
+}
+
+# 6. Run the Python script
+Write-Host "Running Python script generate_sphinx_dyn.py..."
+python generate_sphinx_dyn.py
+
+# 7. Build Sphinx documentation
+Write-Host "Building Sphinx documentation..."
+sphinx-build -b html . ../../docs/Documentation/API_Release
+
+# 8. Return to the root directory
+Set-Location "../.."
\ No newline at end of file
diff --git a/build_docs.sh b/build_docs.sh
new file mode 100644
index 00000000..0d6e8f04
--- /dev/null
+++ b/build_docs.sh
@@ -0,0 +1,53 @@
+#!/bin/bash
+
+# Exit immediately if a command exits with a non-zero status
+set -e
+
+# Check if the user provided an argument
+if [ -z "$1" ]; then
+    echo "Usage: $0 <User Given Path>"
+    exit 1
+fi
+
+USER_GIVEN_PATH=$1
+FINAL_FOLDER_NAME=$(basename "$USER_GIVEN_PATH")
+
+# 1. Remove folder docs/Documentation/API_Release if it exists
+if [ -d "docs/Documentation/API_Release" ]; then
+    echo "Removing folder docs/Documentation/API_Release..."
+    rm -rf docs/Documentation/API_Release
+fi
+
+# 2. Remove folder doxygen_output if it exists
+if [ -d "doxygen_output" ]; then
+    echo "Removing folder doxygen_output..."
+    rm -rf doxygen_output
+fi
+
+# 3. Run doxygen Doxyfile_api with the user-given path
+echo "Running Doxygen with input path: $USER_GIVEN_PATH..."
+sed "s|{{INPUT_PATH}}|$USER_GIVEN_PATH|" Doxyfile_api > ProcessedDoxyfile_api
+doxygen ProcessedDoxyfile_api
+rm ProcessedDoxyfile_api
+
+# 4. Change directory to Sphinx/source
+echo "Changing directory to Sphinx/source..."
+cd Sphinx/source
+
+# 5. Remove folder matching the final folder name
+if [ -d "$FINAL_FOLDER_NAME" ]; then
+    echo "Removing folder $FINAL_FOLDER_NAME..."
+    rm -rf "$FINAL_FOLDER_NAME"
+fi
+
+# 6. Run the Python script to generate dynamic Sphinx content
+echo "Running Python script generate_sphinx_dyn.py..."
+python generate_sphinx_dyn.py
+
+# 7. Build Sphinx documentation
+echo "Building Sphinx documentation..."
+sphinx-build -b html ./ ../../docs/Documentation/API_Release
+
+# 8. Return to the root directory
+echo "Returning to the root directory..."
+cd ../..
diff --git a/docs/Documentation/docs_home.md b/docs/Documentation/docs_home.md
new file mode 100644
index 00000000..7b102f1a
--- /dev/null
+++ b/docs/Documentation/docs_home.md
@@ -0,0 +1,8 @@
+# 📗 Overview
+!!! note "Engine3D API Documentation"
+    [**<h2>Explore the Engine3D API Documentation</h2>**](engine3d_api_docs.md)
+    
+    The API documentation will provide a detailed outline of all of the lastest Classes, Functions, and Systems from the most recently <u>released</u> version of engine3D.
+!!! tip "Other Help"
+    For examples in older verions feel free to check out the link provided:
+        [**Older Engine3D Documentation List**](engine3d_older_doc_list.md)
diff --git a/docs/Documentation/engine3d_api_docs.md b/docs/Documentation/engine3d_api_docs.md
new file mode 100644
index 00000000..666a6562
--- /dev/null
+++ b/docs/Documentation/engine3d_api_docs.md
@@ -0,0 +1,5 @@
+# 📖 Engine3D API
+
+<div class='api_engine3d_loader'>
+
+</div>
\ No newline at end of file
diff --git a/docs/Documentation/engine3d_older_doc_list.md b/docs/Documentation/engine3d_older_doc_list.md
new file mode 100644
index 00000000..afa5c76c
--- /dev/null
+++ b/docs/Documentation/engine3d_older_doc_list.md
@@ -0,0 +1 @@
+# **List Of Older Versions**
\ No newline at end of file
diff --git a/docs/about.md b/docs/about.md
index a5091424..6d4cfb77 100644
--- a/docs/about.md
+++ b/docs/about.md
@@ -4,7 +4,7 @@ Engine3D is an interactive 3D cross-platform application - otherwise a game engi
 
 Engine3D-Dev is the organization that helps maintain the Engine3D project, working to build engine3d to enable users to make commercialized games, artwork for assets, animations, and other forms of engine capabilities. Aaron created Engine3D for students who are passionate about both making games and interested in being part of a community in developing a game engine. Where you can make commercialized games using our internal toolings that Engine3D would provide.
 
-## Why make a Game Engine? What started this project?
+## Why make a Game Engine?
 
 To describe simply: because of having a passion for engine development and the curiosity to get better at designing APIs architecturally, thinking outside the box.
 
diff --git a/docs/assets/CSS/extra_style.css b/docs/assets/CSS/extra_style.css
new file mode 100644
index 00000000..f27378a6
--- /dev/null
+++ b/docs/assets/CSS/extra_style.css
@@ -0,0 +1,160 @@
+h1 {
+    color: orange;
+    font-size: 2em;
+}
+
+.md-content__inner{
+    width: 40vw ;
+    min-width: 450px;
+}
+
+.md-typeset h2 {
+    font-size: 1.5em;
+}
+
+a code {
+    color: #2980B9;
+}
+
+a:hover code {
+    color: #3091d1 ;
+}
+
+a:visited code {
+    color: #9B59B6;
+}
+
+.md-header__topic {
+    font-size: 1.6em;
+    font-weight: 100 !important;
+}
+
+.md-logo {
+    margin: 0px !important;
+    padding: 0px !important;
+}
+
+.md-logo img {
+    height: 2.2rem !important;
+}
+
+.md-tabs__link {
+    font-size: .8rem !important;
+}
+
+.md-nav__icon {
+    margin-left: 0px !important;
+    transform: translateX(20px) !important;
+}
+
+
+@media (min-width: 1601px) {
+    .md-sidebar__scrollwrap {
+        position: static !important;
+        top: 10vh !important;
+        left: 6vw !important;
+        margin-left: 0 !important;
+        transform: none !important;
+        border-right: 3px dashed #38484f !important;
+        box-sizing: 100px;
+    }
+}
+
+@media (min-width: 1601px) {
+    .md-nav__link{
+        height: 2vh !important;
+        margin-left: 0 !important; 
+        transform: none !important; 
+    }
+}
+
+:root {
+    --custom-sidebar-bg: #f5f5f5;
+}
+
+
+
+.custome-sidebar__extra {
+    position: fixed;
+    top: 0;
+    height: 100%;
+    left:auto;
+    right:auto;
+    width: 15vw; 
+    box-shadow: 
+        0px 0px 40px 20px rgba(0, 0, 0, .4),
+        inset 10px 0px 20px rgba(0, 0, 0, 0.5);
+    background-color: rgba(59, 119, 114, 0.00);
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s ease-in-out, background-color 0.3s ease, color 0.3s ease, opacity 0.5s ease-out;
+    z-index: 1000;
+    filter: brightness(1.2);
+    pointer-events: none;
+}
+.custome-sidebar__extra.show-left {
+    background-color: rgba(59, 119, 114, 0.05);
+    opacity: 1;
+    transform: translateX(0);
+    left: 0;
+    right: auto;
+}
+
+.custome-sidebar__extra.show-right {
+    background-color: rgba(59, 119, 114, 0.05);
+    opacity: 1;
+    transform: translateX(0); 
+    left: auto;
+    right: 0; 
+}
+
+
+
+.custome-sidebar__header{
+    position: relative;
+    background-color: #485d66 !important;
+    font-size: 32px;
+    line-height: 40px;
+    font-family: Verdana, sans-serif;
+    top: 0;
+    margin: 0 auto;
+    height: 110px;
+    width: 100%;
+    text-align: center;
+    color:#f5f5f5;
+    z-index: 1002;
+    pointer-events: visible;
+    box-shadow: 
+        inset 25px 10px 20px 0px rgba(0, 0, 0, 0.3);
+}
+
+.custome-sidebar__title
+{
+    transform: translateY(15px);
+}
+
+.custome-sidebar__subtitle{
+    transform: translate(50px, 15px);
+    overflow-x: visible;
+    text-wrap-mode:nowrap;
+    font-size: 52px;
+}
+
+.custome-sidebar__nav
+{
+    pointer-events: visible;
+    background-color: rgba(113, 119, 122, 0.15);
+    height: 60%;
+    transform: translateY(-20px);
+    overflow: auto;
+    scrollbar-width: thin;
+
+}
+
+.clickable-box
+{
+    position: relative;
+    width: 100%;
+    height: 40%;
+    background-color: rgba(0, 0, 0, 0);
+}
diff --git a/docs/assets/CSS/sphinx_api.css b/docs/assets/CSS/sphinx_api.css
new file mode 100644
index 00000000..d35f3741
--- /dev/null
+++ b/docs/assets/CSS/sphinx_api.css
@@ -0,0 +1,115 @@
+@media (min-width: 1601px) {
+    [itemprop="articleBody"] {     
+        margin: 0 auto;      
+    }
+}
+
+.simple:not(.field-list) {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: rgba(100, 150, 100, 0.05);
+}
+
+.simple:not(.field-list) dt,
+.simple:not(.field-list) dd {
+    display: inline-block;
+    margin: 0;
+}
+
+.simple:not(.field-list) dt {
+    font-weight: bold;
+    font-size: 12px;
+    text-align: right;
+}
+
+.simple:not(.field-list) dd {
+    flex-grow: 1;
+    transform: translate(-10px);
+    font-size: 10px;
+    text-align: left;
+}
+
+.field-odd
+{
+    font-size: 14px !important;
+}
+
+.field-even
+{
+    max-width: 400px;
+    font-size: 14px !important;
+}
+
+.cpp
+{
+    font-size: 32px;
+}
+
+.cpp.pre__inside
+{
+    font-size: 16px;
+}
+
+.breathe-sectiondef-title
+{
+    font-size: 28px;
+}
+
+.reference.internal
+{
+    font-size: 16px;
+}
+
+
+/* Mapping of sidebar */
+.custom-navigation ul {
+    list-style: none; /* Remove bullet points */
+    margin-left: 3px; /* Slightly indent nested levels */
+    padding-left: 10px; /* Optional: Adjust padding for consistent spacing */
+    font-size: 16px;
+}
+
+/* Style for individual list items */
+.custom-navigation li {
+    margin: 4px 0; /* Vertical spacing between items */
+    color: initial; /* Reset color for normal state */
+}
+
+/* Hover effect for the specific item being hovered */
+.custom-navigation li:hover {
+    color: #2f8341; /* Greenish color for the hovered item */
+    font-size: 18px; /* Optional: Increase font size */
+    background-color: rgba(75, 158, 161, 0.055); /* Optional: Subtle background highlight */
+    font-family:Georgia, Times, 'Times New Roman', serif;
+    
+}
+
+/* Ensure child elements (like nested ul or a tags) do not inherit the hover color */
+.custom-navigation li a {
+    color: inherit; /* Keep link color consistent with parent li */
+    text-decoration: none; /* Optional: Remove underline for links */
+}
+
+.custom-navigation li a:hover {
+    color: #568608ef; /* Apply hover effect only to the link itself */
+    font-size: 20px !important;
+}
+
+.custom-navigation ul ul {
+    margin-left: 3px; /* Indent sub-levels slightly more */
+    padding-left: 0; /* Prevent excessive indentation */
+}
+
+.highlight-default
+{
+    font-size: .65vw;
+}
+
+@media (max-width: 1200px)
+{
+    .highlight-default
+    {
+        font-size: 7px;
+    }
+}
+
diff --git a/docs/assets/JS/custome-nav.js b/docs/assets/JS/custome-nav.js
new file mode 100644
index 00000000..0f841a63
--- /dev/null
+++ b/docs/assets/JS/custome-nav.js
@@ -0,0 +1,176 @@
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Document loaded. Starting script.');
+
+    const customNavigation = document.querySelector('.custom-navigation');
+    const contentContainer = document.querySelector('.api_engine3d_loader'); // Target container for dynamic content
+
+    if (!customNavigation) {
+        console.error('Missing element: .custom-navigation');
+        return;
+    }
+
+    if (!contentContainer) {
+        console.error('Missing element: .api_engine3d_loader');
+        return;
+    }
+
+    console.log('Both .custom-navigation and .api_engine3d_loader elements are present.');
+
+    // Base path to Sphinx output
+    const globalBasePath = `${window.location.origin}/Documentation/API_Release/`;
+
+    const fetchAndBuildHierarchy = (url, callback) => {
+        fetch(url)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch: ${url} (Status: ${response.status})`);
+                }
+                return response.text();
+            })
+            .then(html => {
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(html, 'text/html');
+
+                // Locate the `.toctree-wrapper`
+                const navTree = doc.querySelector('.toctree-wrapper');
+                if (!navTree) {
+                    console.log(`No .toctree-wrapper found at ${url}`);
+                    callback([]);
+                    return;
+                }
+
+                // Parse the navigation tree
+                const items = [];
+                navTree.querySelectorAll(':scope > ul > li').forEach(item => {
+                    const link = item.querySelector('a');
+                    const subTree = item.querySelector('ul');
+                    const href = link ? link.getAttribute('href') : null;
+
+                    if (href) {
+                        const absoluteHref = new URL(href, url).href; // Resolve the global URL
+                        const isLeaf = href.endsWith('.h.html') || href.endsWith('.hpp.html');
+                        items.push({
+                            name: link.textContent.trim(),
+                            href: absoluteHref,
+                            isLeaf: isLeaf,
+                            subTree: subTree ? absoluteHref : null,
+                        });
+                    }
+                });
+
+                callback(items);
+            })
+            .catch(err => {
+                console.error(`Error fetching ${url}:`, err);
+                callback([]);
+            });
+    };
+
+    const buildHierarchy = (url, parentElement) => {
+        fetchAndBuildHierarchy(url, (items) => {
+            const list = document.createElement('ul');
+
+            items.forEach(({ name, href, isLeaf, subTree }) => {
+                const listItem = document.createElement('li');
+                listItem.style.display = 'block'; // Ensure clickable area
+                listItem.style.margin = '5px 0'; // Add spacing between items
+
+                if (isLeaf) {
+                    // Add links for leaf nodes
+                    const anchor = document.createElement('a');
+                    anchor.textContent = name;
+                    anchor.href = href;
+                    anchor.style.cursor = 'pointer';
+                    anchor.style.display = 'block'; // Make entire row clickable
+                    anchor.style.padding = '5px'; // Add padding for better click area
+
+                    anchor.addEventListener('click', (event) => {
+                        event.preventDefault();
+                        console.log(`Fetching content from: ${href}`);
+
+                        fetch(href)
+                            .then(response => {
+                                if (!response.ok) {
+                                    throw new Error(`Failed to fetch page content. Status: ${response.status}`);
+                                }
+                                return response.text();
+                            })
+                            .then(pageHtml => {
+                                const parser = new DOMParser();
+                                const pageDoc = parser.parseFromString(pageHtml, 'text/html');
+
+                                const possibleSelectors = ['#content', '.body', '.document'];
+                                let pageContent = null;
+                                for (const selector of possibleSelectors) {
+                                    pageContent = pageDoc.querySelector(selector);
+                                    if (pageContent) break;
+                                }
+
+                                if (!pageContent) {
+                                    console.error(`Failed to locate content in the fetched page for: ${href}`);
+                                    contentContainer.innerHTML = '<p>Error: Unable to locate content.</p>';
+                                    return;
+                                }
+
+                                //Restarting Content
+                                contentContainer.innerHTML = ''; 
+                                contentContainer.appendChild(pageContent);
+
+                                const apiLoadedEvent = new CustomEvent('api_loaded', {
+                                    detail: {
+                                        url: href,
+                                        timestamp: new Date(),
+                                    },
+                                });
+                                document.dispatchEvent(apiLoadedEvent);
+                                console.log(`'api_loaded' event dispatched for ${href}`);
+                            })
+                            .catch(err => console.error(`Error loading page content for ${href}:`, err));
+                    });
+
+                    listItem.appendChild(anchor);
+                } else {
+                    // Create a toggleable folder
+                    const folderContainer = document.createElement('div');
+                    folderContainer.style.cursor = 'pointer';
+                    folderContainer.style.display = 'flex';
+                    folderContainer.style.alignItems = 'center';
+                    folderContainer.style.padding = '5px';
+
+                    const toggle = document.createElement('span');
+                    toggle.textContent = '+';
+                    toggle.style.marginRight = '5px';
+
+                    const folderName = document.createElement('span');
+                    folderName.textContent = name;
+
+                    folderContainer.appendChild(toggle);
+                    folderContainer.appendChild(folderName);
+                    listItem.appendChild(folderContainer);
+
+                    const childList = document.createElement('ul');
+                    childList.style.display = 'none';
+                    listItem.appendChild(childList);
+
+                    // Add toggle functionality
+                    folderContainer.addEventListener('click', () => {
+                        const isVisible = childList.style.display === 'block';
+                        childList.style.display = isVisible ? 'none' : 'block';
+                        toggle.textContent = isVisible ? '+' : '-';
+                    });
+
+                    // Recursively build the subtree
+                    buildHierarchy(subTree, childList);
+                }
+
+                list.appendChild(listItem);
+            });
+
+            parentElement.appendChild(list);
+        });
+    };
+
+    // Start building the hierarchy from the global base path
+    buildHierarchy(`${globalBasePath}index.html`, customNavigation);
+});
+
diff --git a/docs/assets/JS/dynamic-sidebar.js b/docs/assets/JS/dynamic-sidebar.js
new file mode 100644
index 00000000..5a7d552f
--- /dev/null
+++ b/docs/assets/JS/dynamic-sidebar.js
@@ -0,0 +1,225 @@
+/**
+ * Custom Side bar
+ */
+window.addEventListener('resize', () => {
+    const width = window.innerWidth;
+
+    // Creating a dynamic width for the sidebar that shrinks faster than vw or %
+    let sidebarWidthPercentage;
+    let sidebarWidth;
+    sidebarWidthPercentage = Math.max(12, 15 - ((1920 - width) / 50));
+    if (width >= 1780)
+        sidebarWidth = Math.max(200, width * (sidebarWidthPercentage / 100));
+    else
+        sidebarWidth = Math.max(250, width * (sidebarWidthPercentage / 100));
+    let extraSidebar = document.querySelector('.custome-sidebar__extra');
+
+    // Building the custom side bar
+    if (!extraSidebar) {
+
+        extraSidebar = document.createElement('div');
+        extraSidebar.className = 'custome-sidebar custome-sidebar__extra';
+        document.body.appendChild(extraSidebar);
+
+        // Building sidebar header
+        extraSidebar.innerHTML = `
+             <header class="custome-sidebar__header">
+                <div class="custome-sidebar__title">
+                <span> <i>Engine3D&emsp;</i> </span>
+                </div>
+                <div class="custome-sidebar__subtitle">
+                <span> &emsp;<i>API</i>&emsp;</span>
+                </div>
+            </header>
+            <div class="custome-sidebar__nav">
+            <p>-----------------------------------</p>
+            <div class="custom-navigation"></div>
+                <div id="content">
+                </div>
+            </div>
+            <div class="clickable-box">
+            </div>`;
+        extraSidebar.classList.add('show'); // Show tells the api to start visible
+    }
+
+    // Setting the custom width
+    extraSidebar.style.width = `${sidebarWidth}px`;
+
+    // Determines what side of the page to animate on
+    // Small bug when show is off and resizing passed 1780, then showing
+    if (window.location.pathname.includes('/Documentation/engine3d_api_docs/')) {
+        if (extraSidebar.classList.contains('show')) {
+            if (width >= 1780) {
+                extraSidebar.style.right = 'auto';
+                extraSidebar.style.left = '0';
+                void extraSidebar.offsetWidth;
+                extraSidebar.classList.add('show-left');
+            } else if (width < 1780) {
+                extraSidebar.style.left = 'auto';
+                extraSidebar.style.right = '0';
+                void extraSidebar.offsetWidth;
+                extraSidebar.classList.add('show-right');
+            }
+        }
+        else {
+            if (width >= 1780) {
+                extraSidebar.style.transform = `translateX(${-100}%)`;
+                extraSidebar.style.right = 'auto';
+                extraSidebar.style.left = '0';
+                void extraSidebar.offsetWidth;
+                extraSidebar.classList.remove('show-left');
+            } else if (width < 1780) {
+                extraSidebar.style.transform = `translateX(${100}%)`;
+                extraSidebar.style.left = 'auto';
+                extraSidebar.style.right = '0';
+                void extraSidebar.offsetWidth;
+                extraSidebar.classList.remove('show-right');
+            }
+        }
+    }
+});
+
+/**
+ * Custom Sidebar Button
+ */
+document.addEventListener('DOMContentLoaded', () => {
+    const header = document.querySelector('.md-header__inner');
+    const api_path = '/Documentation/engine3d_api_docs/';
+
+    if (header && window.location.pathname.includes(api_path)) {
+
+        // This create the "API" button on engine page
+        const button = document.createElement('button');
+        button.id = 'custom-sidebar-toggle';
+        button.className = 'md-header__button';
+        button.textContent = 'API';
+        button.style.fontSize = '20px'
+        header.insertBefore(button, header.children[3]);
+
+        button.addEventListener('click', () => {
+            toggleCustomSidebar(
+                api_path,
+                button
+            )
+        });
+    }
+    else {
+        // Custom side bar show only exsist in "Engine3D_API sub_folder"
+        const customSidebar = document.querySelector('.custome-sidebar__extra');
+        if (customSidebar) {
+            customSidebar.remove();
+        }
+        return;
+    }
+
+    const sidebar = document.querySelector('.custome-sidebar__extra');
+    const apiPath = '/Documentation/engine3d_api_docs/';
+    if (sidebar) {
+
+        // This button is the "-" on the sidebar
+        const sidebarButton = document.createElement('button');
+        sidebarButton.id = 'custom-sidebar-inner-toggle';
+        sidebarButton.className = 'custome-sidebar__button';
+        sidebarButton.style.position = 'absolute';
+        sidebarButton.textContent = '-';
+        sidebarButton.style.fontSize = '35px';
+        sidebarButton.style.width = '12px';
+        sidebarButton.style.backgroundColor = 'rgba(0,0,0,0)';
+        sidebarButton.style.transform = "TranslateY(-10px)";
+        sidebarButton.style.pointerEvents = "visible";
+
+        // To match the remove page button with current version (left apple, everything else right)
+        const userAgent = window.navigator.userAgent;
+        const platform = window.navigator.userAgentData.platform || "NA";
+        let button_loc = '5%';
+        if (platform != "NA" && (platform.includes('macOS') || /iPhone|iPad|iPod/i.test(userAgent))) {
+            button_loc = '90%';
+        }
+
+        sidebarButton.addEventListener('mouseenter', () => {
+            sidebarButton.style.color = '#ff4d4d'; 
+            sidebarButton.style.fontSize = '40px';
+            sidebarButton.style.transition = 'background-color 0.3s ease, font-size 0.3s ease'; 
+        });
+
+        sidebarButton.addEventListener('mouseleave', () => {
+            sidebarButton.style.color = '#ffffff';
+            sidebarButton.style.fontSize = '35px'; 
+        });
+
+        sidebarButton.style.right = button_loc;
+        sidebarButton.style.zIndex = '1003'; // Passed the sidebar header by 1
+
+        sidebar.insertBefore(sidebarButton, sidebar.children[0]);
+
+        sidebarButton.addEventListener('click', () => {
+            toggleCustomSidebar(
+                apiPath,
+                sidebarButton
+            )
+        });
+    }
+});
+
+// Button body for toggling on and off the side bar
+function toggleCustomSidebar(apiPath, button) {
+    const header = document.querySelector('.md-header__inner');
+    const sidebarSelector = '.custome-sidebar__extra';
+    const navSelector = '.custome-sidebar__nav';
+    const headerNavSelector = '.custome-sidebar__header'
+    if (header && window.location.pathname.includes(apiPath)) {
+
+            const width = window.innerWidth;
+
+            if (window.location.pathname.includes(apiPath)) {
+                const extraSidebar = document.querySelector(sidebarSelector);
+                const extraNav = document.querySelector(navSelector);
+                const extraNav2 = document.querySelector(headerNavSelector);
+
+                if (!extraSidebar || !extraNav || !extraNav2) {
+                    console.error('Some sidebar elements are not found.');
+                    return;
+                }
+
+                if (width >= 1780 && !extraSidebar.classList.contains('show-left') && !extraSidebar.classList.contains('show')) {
+                    // Right Side
+                    extraSidebar.classList.remove('show-right');
+                    extraSidebar.style.transform = `translateX(0%)`;
+                    void extraSidebar.offsetWidth;
+                    extraSidebar.style.opacity = '1';
+                    extraNav.style.pointerEvents = 'visible';
+                    extraNav2.style.pointerEvents = 'visible';
+                    extraSidebar.classList.add('show-left', 'show');
+                } else if (width < 1780 && !extraSidebar.classList.contains('show-right') && !extraSidebar.classList.contains('show')) {
+                    // Left Side
+                    extraSidebar.classList.remove('show-left');
+                    extraSidebar.style.transform = `translateX(0%)`;
+                    void extraSidebar.offsetWidth;
+                    extraSidebar.style.opacity = '1';
+                    extraNav.style.pointerEvents = 'visible';
+                    extraNav2.style.pointerEvents = 'visible';
+                    extraSidebar.classList.add('show-right', 'show');
+                } else {
+                    //Turn off
+                    extraSidebar.style.opacity = '0';
+                    extraNav.style.pointerEvents = 'none';
+                    extraNav2.style.pointerEvents = 'none';
+
+                    if (!extraSidebar.classList.contains('show-left')) {
+                        extraSidebar.style.transform = `translateX(100%)`;
+                        extraSidebar.style.right = '0';
+                        extraSidebar.style.left = 'auto';
+                    } else if (!extraSidebar.classList.contains('show-right')) {
+                        extraSidebar.style.transform = `translateX(-100%)`;
+                        extraSidebar.style.left = '0';
+                        extraSidebar.style.right = 'auto';
+                    }
+
+                    void extraSidebar.offsetWidth;
+                    extraSidebar.classList.remove('show-left', 'show-right', 'show');
+                }
+            }
+    }
+}
+
+window.dispatchEvent(new Event('resize'));
\ No newline at end of file
diff --git a/docs/assets/JS/sphinx-mkdocs-converter.js b/docs/assets/JS/sphinx-mkdocs-converter.js
new file mode 100644
index 00000000..0f148cd2
--- /dev/null
+++ b/docs/assets/JS/sphinx-mkdocs-converter.js
@@ -0,0 +1,101 @@
+document.addEventListener('api_loaded', (event) => {
+    console.log('Processing started...');
+
+    // Select the container with `itemprop="articleBody"`
+    const articleBody = document.querySelector('[itemprop="articleBody"]');
+    if (!articleBody) {
+        console.error('No container found with itemprop="articleBody".');
+        return;
+    }
+
+    const paragraphs = articleBody.querySelectorAll('p');
+    const cppElements = articleBody.querySelectorAll('.cpp');
+    const emElements = articleBody.querySelectorAll('em');
+
+    paragraphs.forEach((paragraph) => {
+        if (!paragraph.textContent.trim()) return; // Skip empty
+        if (paragraph.classList.length > 0) return; // Skip with class
+        if (paragraph.closest('.field-odd, .field-even')) return; // Skip in field-odd/field-even
+        const parent = paragraph.parentElement;
+        const grandparent = parent?.parentElement;
+        if (grandparent?.matches('dl.simple')) return; // Skip grandchild of dl.simple
+
+        // Check if parent is <dd> and its first child contains "BUG"
+        if (parent?.matches('dd')) {
+            const firstChild = grandparent.firstElementChild;
+            const grandchild = firstChild.firstElementChild;
+            const firstChildText = grandchild?.textContent || '';
+            if (/bug/i.test(firstChildText)) { // Case-insensitive check for "bug"
+                // Remove the <dt> element (first child of <dd>)
+
+                firstChild.remove();
+                
+
+                // Transform <dd> into a <dt>
+                const newDt = document.createElement('dt');
+                newDt.classList.add('admonition', 'bug');
+
+                const bugTitle = document.createElement('p');
+                bugTitle.classList.add('admonition-title');
+                bugTitle.textContent = 'Bug';
+                newDt.appendChild(bugTitle);
+                newDt.appendChild(paragraph.cloneNode(true));
+
+                parent.replaceWith(newDt); // Replace <dd> with the new <dt>
+                return;
+            }
+        }
+
+        // This is here as bug works differently in sphinx than everything else
+        if (parent?.matches('div'))
+        {
+            const firstChild = parent.firstElementChild;
+            const parentText = firstChild?.textContent;
+            if(/warning/i.test(parentText))
+            {
+                return;
+            }
+            else if(/remark/i.test(parentText))
+            {
+                return;
+            }
+        }
+
+        // Turn into a "Note" when <p> with no class
+        const noteDiv = document.createElement('div');
+        noteDiv.classList.add('admonition', 'note');
+
+        const noteTitle = document.createElement('p');
+        noteTitle.classList.add('admonition-title');
+        noteTitle.textContent = 'Explanation';
+        noteDiv.appendChild(noteTitle);
+        noteDiv.appendChild(paragraph.cloneNode(true));
+        paragraph.replaceWith(noteDiv);
+    });
+
+    const examples = articleBody.querySelectorAll('.highlight-default');
+
+    examples.forEach((example) => {
+        const parent = example.parentElement;
+        const firstChild = parent.firstElementChild;
+
+        if(/note/i.test(firstChild?.textContent))
+        {
+            parent.classList.replace('note', 'example');
+            firstChild.textContent = 'EXAMPLE USAGE:';
+        }
+    });
+
+    cppElements.forEach((cpp, index) => {
+        if (index < 2) return;
+        cpp.classList.add('pre__inside');
+    });
+
+    emElements.forEach((em, index) => {
+        em.classList.add('highlighted-em');
+        em.style.fontSize = '24px';
+        em.style.fontStyle = 'italic';
+    });
+
+    console.log('Processing completed.');
+});
\ No newline at end of file
diff --git a/assets/logos/engine3DHighResLogo.png b/docs/assets/logos/engine3DHighResLogo.png
similarity index 100%
rename from assets/logos/engine3DHighResLogo.png
rename to docs/assets/logos/engine3DHighResLogo.png
diff --git a/assets/logos/engine3dTransparentLogo.png b/docs/assets/logos/engine3dTransparentLogo.png
similarity index 100%
rename from assets/logos/engine3dTransparentLogo.png
rename to docs/assets/logos/engine3dTransparentLogo.png
diff --git a/docs/getting_started.md b/docs/getting_started.md
index b364a66c..63332e06 100644
--- a/docs/getting_started.md
+++ b/docs/getting_started.md
@@ -211,7 +211,7 @@ Setting up a conan profile for your specific platforms.
 
 ---
 
-## Extracting engine3d conan packages
+## Extracting conan packages
 
 Add the engine3d-conan repository to your system. This repository holds all of the engine3d packages.
 
diff --git a/docs/tabs.md b/docs/tabs.md
index c368a20e..c88a7241 100644
--- a/docs/tabs.md
+++ b/docs/tabs.md
@@ -2,4 +2,4 @@
 - [About](about.md)
 - [Getting Started](getting_started.md)
 - [Used Guide](user_guide.md)
-- [API]
+- [Docs](Documentation/docs_home.md)
diff --git a/engine3d_website_test/Test1_folder/example2_folder/camera.hpp b/engine3d_website_test/Test1_folder/example2_folder/camera.hpp
new file mode 100644
index 00000000..00628fe6
--- /dev/null
+++ b/engine3d_website_test/Test1_folder/example2_folder/camera.hpp
@@ -0,0 +1,87 @@
+/**
+ * @file camera.hpp
+ * @author Generated by Chatgpt
+ * @brief This is the last folder test
+ * @version 0.0.01a
+ * @date 2025-01-11
+ * 
+ * @copyright Apache 2.0 2025
+ * 
+ */
+#pragma once
+
+#include <string>
+
+/**
+ * @brief A simple Camera class for managing position, rotation, and projection.
+ * 
+ * This class simulates a basic 3D camera system with utility methods to manage
+ * its position and orientation.
+ */
+class Camera {
+private:
+    float position[3];   ///< Camera position in 3D space (x, y, z).
+    float rotation[3];   ///< Camera rotation (pitch, yaw, roll).
+
+public:
+    /**
+     * @brief Default constructor initializing camera at the origin with no rotation.
+     */
+    Camera() {
+        position[0] = position[1] = position[2] = 0.0f;
+        rotation[0] = rotation[1] = rotation[2] = 0.0f;
+    }
+
+    /**
+     * @brief Sets the position of the camera.
+     * 
+     * @param x The x-coordinate of the position.
+     * @param y The y-coordinate of the position.
+     * @param z The z-coordinate of the position.
+     */
+    void setPosition(float x, float y, float z);
+
+    /**
+     * @brief Sets the rotation of the camera.
+     * 
+     * @param pitch Rotation around the x-axis.
+     * @param yaw Rotation around the y-axis.
+     * @param roll Rotation around the z-axis.
+     */
+    void setRotation(float pitch, float yaw, float roll);
+
+    /**
+     * @brief Moves the camera along a direction vector.
+     * 
+     * @param dx Movement along the x-axis.
+     * @param dy Movement along the y-axis.
+     * @param dz Movement along the z-axis.
+     */
+    void move(float dx, float dy, float dz);
+    /**
+     * @brief Prints the current position and rotation of the camera.
+     */
+    void printStatus() const;
+
+    /**
+     * @brief Checks if the camera is at the origin (0, 0, 0).
+     * 
+     * @return `true` if the camera is at the origin, otherwise `false`.
+     */
+    bool isAtOrigin() const;
+    /**
+     * @brief Returns the camera's position as a formatted string.
+     * 
+     * @return A string in the format "(x, y, z)".
+     */
+    std::string getPositionString() const;
+
+    /**
+     * @brief Rotates the camera around the yaw axis by a given degree.
+     * 
+     * @param degrees The angle to rotate.
+     * 
+     * @warning Rotation is additive and does not clamp values between 0 and 360 degrees.
+     */
+    void rotateYaw(float degrees);
+};
diff --git a/engine3d_website_test/Test1_folder/math_utils.hpp b/engine3d_website_test/Test1_folder/math_utils.hpp
new file mode 100644
index 00000000..700437c3
--- /dev/null
+++ b/engine3d_website_test/Test1_folder/math_utils.hpp
@@ -0,0 +1,73 @@
+/**
+ * @file math_utils.hpp
+ * @author Generated by chatGPT
+ * @brief This is a test!
+ * @version 0.0.01a
+ * @date 2025-01-11
+ * 
+ * @copyright Apache 2.0 2025
+ * 
+ */
+
+#pragma once
+
+#include<string>
+
+/**
+ * @brief Class
+ * 
+ */
+class math_utils {
+public:
+
+    /**
+    * @brief Calculates the factorial of a number.
+    * 
+    * @param n The number to calculate the factorial for.
+    * @return The factorial of the number.
+    * 
+    * @warning Throws `std::invalid_argument` if the number is negative.
+    * 
+    * @note 
+    * @code
+    * #include <iostream>
+    * 
+    * int main() 
+    * {
+    *     int number = 5; // Starting Number
+    *     long long result = factorial(number); // Produces 5*4*3*2*1
+    * 
+    *     std::cout << "Factorial of " << number << " is: " << result << std::endl;
+    * 
+    *     return 0;
+    * }
+    * @endcode
+    */
+    static long long factorial(int n);
+
+    /**
+    * @brief Computes the greatest common divisor (GCD) of two numbers.
+    * 
+    * @param a The first number.
+    * @param b The second number.
+    * @return The GCD of the two numbers.
+    * 
+    * @remark Uses the Euclidean algorithm.
+    */
+    static int gcd(int a, int b);
+
+    /**
+    * @brief Finds the nth Fibonacci number.
+    * 
+    * @bug May cause stack overflow for large values of n.
+    *
+    * 
+    * @param n The position in the Fibonacci sequence.
+    * @return The nth Fibonacci number.
+    * 
+    *
+    * @remark Uses a recursive implementation. Consider using a dynamic approach for large n.
+    * 
+    */
+    static int fibonacci(int n);
+};
\ No newline at end of file
diff --git a/engine3d_website_test/string_utils.h b/engine3d_website_test/string_utils.h
new file mode 100644
index 00000000..76a3f7f3
--- /dev/null
+++ b/engine3d_website_test/string_utils.h
@@ -0,0 +1,50 @@
+/**
+ * @file string_utils.h
+ * @author Generated by ChatGTP
+ * @brief This is a test!
+ * @version 0.0.01a
+ * @date 2025-01-11
+ * 
+ * @copyright Apache 2.0 2025
+ * 
+ */
+
+#pragma once
+
+#include <string>
+#include <vector>
+
+/**
+ * @brief String class
+ * 
+ */
+class string_utils {
+public:
+    /**
+     * @brief Counts the number of vowels in a string.
+     * 
+     * @param input The string to analyze.
+     * @return The number of vowels in the string.
+     * 
+     * @warning Assumes ASCII input. Non-ASCII characters are ignored.
+     */
+    static int countVowels(const std::string& input);
+
+    /**
+     * @brief Checks if a string is a palindrome.
+     * 
+     * @param input The string to check.
+     * @return `true` if the string is a palindrome, otherwise `false`.
+     * 
+     * @remark Ignores case and non-alphanumeric characters.
+     */
+    static bool isPalindrome(const std::string& input);
+
+    /**
+     * @brief Trims whitespace from both ends of a string.
+     * 
+     * @param input The string to trim.
+     * @return A trimmed version of the input string.
+     */
+    static std::string trim(const std::string& input);
+};
diff --git a/mkdocs.yml b/mkdocs.yml
index c8ea0eea..0350664c 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -44,9 +44,14 @@ extra:
     - icon: fontawesome/brands/github-alt
       link: https://github.com/engine3d-dev/Engine3D
       
-extra_css:
-  - assets/extra.css
+extra_css: 
+  - assets/CSS/extra_style.css
+  - assets/CSS/sphinx_api.css
 
+extra_javascript:
+  - assets/js/dynamic-sidebar.js
+  - assets/JS/sphinx-mkdocs-converter.js
+  - assets/JS/custome-nav.js
 # docs_dir: docs
 
 # plugins:
@@ -76,5 +81,17 @@ markdown_extensions:
   #     emoji_index: !!python/name:material.extensions.emoji.twemoji
   #     emoji_generator: !!python/name:material.extensions.emoji.to_svg
 
+
+nav:
+  - Home: index.md
+  - About: about.md
+  - Getting Started: getting_started.md
+  - Documentation:
+    - Overview: Documentation/docs_home.md
+    - Engine3D API: Documentation/engine3d_api_docs.md
+    - Older Versions:
+      - Older Versions List: Documentation/engine3d_older_doc_list.md
+      - Test: Documentation/API_Release/index.html
+
 copyright: |
   &copy; 2024 <a href="https://github.com/sfsu-dev" target="_blank" rel="noopener">Aaron</a>
diff --git a/requirements.txt b/requirements.txt
index 21d89c0b..bf00769d 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -10,6 +10,8 @@ Markdown==3.6
 MarkupSafe==2.1.5
 mergedeep==1.3.4
 mkdocs==1.6.0
+breathe==4.35.0
+sphinx==7.1.2
 mkdocs-get-deps==0.2.0
 mkdocs-material==9.5.25
 mkdocs-material-extensions==1.3.1
@@ -27,3 +29,4 @@ requests==2.32.3
 six==1.16.0
 urllib3==2.2.1
 watchdog==4.0.1
+sphinx-rtd-theme==1.2.0
\ No newline at end of file