diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro
index 1edbc27cb..2992d5013 100644
--- a/src/html/components/dashboard/_sidenav.astro
+++ b/src/html/components/dashboard/_sidenav.astro
@@ -397,6 +397,24 @@ const htmlPath = convertPathToHtml(path);
             <p>Browser Support</p>
           </a>
         </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/how-to-contribute.html"}
+            class:list={["nav-link", page === "how-to-contribute" && "active"]}
+          >
+            <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
+            <p>How To Contribute</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/faq.html"}
+            class:list={["nav-link", page === "faq" && "active"]}
+          >
+            <i class="nav-icon bi bi-question-circle-fill"></i>
+            <p>FAQ</p>
+          </a>
+        </li>
         <li class="nav-item">
           <a
             href={htmlPath + "/docs/license.html"}
diff --git a/src/html/components/docs/faq.mdx b/src/html/components/docs/faq.mdx
new file mode 100644
index 000000000..9bbc75832
--- /dev/null
+++ b/src/html/components/docs/faq.mdx
@@ -0,0 +1,11 @@
+#### Can AdminLTE be used with WordPress?
+
+AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
+
+#### Is there an integration guide for PHP frameworks such as Yii or Symfony?
+
+Short answer, no. However, there are forks and tutorials around the web that provide info on how to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
+
+#### How do I get notified of new AdminLTE versions?
+
+You may watch the [releases on GitHub](https://github.com/ColorlibHQ/AdminLTE).
diff --git a/src/html/components/docs/how-to-contribute.mdx b/src/html/components/docs/how-to-contribute.mdx
new file mode 100644
index 000000000..f5a5ef239
--- /dev/null
+++ b/src/html/components/docs/how-to-contribute.mdx
@@ -0,0 +1,34 @@
+# Contributing to AdminLTE
+
+Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4)
+
+1. Contribution Requirements :
+    * When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate.
+    * If you use content provided by another party, it must be appropriately licensed using an [open source](https://opensource.org/licenses) license.
+    * Contributions are only accepted through GitHub pull requests.
+    * Finally, contributed code must work in all supported browsers (see above for browser support).
+2. Installation :
+    * Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
+    * Clone to your machine
+
+    ```bash
+    git clone https://github.com/YOUR_USERNAME/AdminLTE.git
+    ```
+    * Create a new branch from `v4-dev`
+3. Compile dist files (Development) :
+    * To compile the dist files you need Node.js 18 or higher/npm (node package manager)
+    * `npm install` (install npm deps)
+    * `npm run dev` (developer mode, autocompile with browsersync support for live demo)
+    * Make your changes only in `./src` Folder OR `package.json` in any files which are necessary for contribution
+    * Do not make changes in `./dist/**` Because it contains compiled files and do not include in PR (Pull Request)
+    * `npm run production` (compile css/js files and test all pages are perfectly working fine, before creating a pull request)
+4. Create a pull request to `v4-dev` branch
+
+## Online one-click setup for contributing
+
+You can use [Codespace](https://docs.github.com/en/codespaces) an online IDE which is free for Open Source for working on issues or making PRs (Pull Requests). With a single click it will launch a workspace and automatically:
+
+- clone the `AdminLTE` repo.
+- Open with [Codespace](https://docs.github.com/en/codespaces)
+- install the dependencies.
+- run `npm run dev` to start the server.
diff --git a/src/html/pages/docs/faq.astro b/src/html/pages/docs/faq.astro
new file mode 100644
index 000000000..8a8f58399
--- /dev/null
+++ b/src/html/pages/docs/faq.astro
@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Faq from "@components/docs/faq.mdx";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "FAQ | AdminLTE 4";
+const path = "../../../dist";
+const mainPage = "docs";
+const page = "faq";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">FAQ</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    FAQ
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <Faq />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>
diff --git a/src/html/pages/docs/how-to-contribute.astro b/src/html/pages/docs/how-to-contribute.astro
new file mode 100644
index 000000000..8cb8dc488
--- /dev/null
+++ b/src/html/pages/docs/how-to-contribute.astro
@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import HowToContribute from "@components/docs/how-to-contribute.mdx";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "How To Contribute | AdminLTE 4";
+const path = "../../../dist";
+const mainPage = "docs";
+const page = "how-to-contribute";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">How To Contribute</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    How To Contribute
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <HowToContribute />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>