diff --git a/documentation/src/assets/integration-icons/adminoff.tsx b/documentation/src/assets/integration-icons/adminoff.tsx
new file mode 100644
index 00000000..44ad66f6
--- /dev/null
+++ b/documentation/src/assets/integration-icons/adminoff.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgAdminOff = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M9 5h10a2 2 0 0 1 2 2v10m-2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2" />
+  <path d="M7 15v-4a2 2 0 0 1 2 -2m2 2v4" />
+  <path d="M7 13h4" />
+  <path d="M17 9v4" />
+  <path d="M16.115 12.131c.33 .149 .595 .412 .747 .74" />
+  <path d="M3 3l18 18" />
+</svg>
+);
+
+export default SvgAdminOff;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/box.tsx b/documentation/src/assets/integration-icons/box.tsx
new file mode 100644
index 00000000..44a9e355
--- /dev/null
+++ b/documentation/src/assets/integration-icons/box.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgBox = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
+  <path d="M12 12l8 -4.5" />
+  <path d="M12 12l0 9" />
+  <path d="M12 12l-8 -4.5" />
+</svg>
+);
+
+export default SvgBox;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/cpu.tsx b/documentation/src/assets/integration-icons/cpu.tsx
new file mode 100644
index 00000000..98b81482
--- /dev/null
+++ b/documentation/src/assets/integration-icons/cpu.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgCPU = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M5 5m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z" />
+  <path d="M9 9h6v6h-6z" />
+  <path d="M3 10h2" />
+  <path d="M3 14h2" />
+  <path d="M10 3v2" />
+  <path d="M14 3v2" />
+  <path d="M21 10h-2" />
+  <path d="M21 14h-2" />
+  <path d="M14 21v-2" />
+  <path d="M10 21v-2" />
+</svg>
+);
+
+export default SvgCPU;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/factor.tsx b/documentation/src/assets/integration-icons/factor.tsx
new file mode 100644
index 00000000..0fad03fc
--- /dev/null
+++ b/documentation/src/assets/integration-icons/factor.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgFactor = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3" />
+  <path d="M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6" />
+  <path d="M12 11v2a14 14 0 0 0 2.5 8" />
+  <path d="M8 15a18 18 0 0 0 1.8 6" />
+  <path d="M4.9 19a22 22 0 0 1 -.9 -7v-1a8 8 0 0 1 12 -6.95" />
+</svg>
+);
+
+export default SvgFactor;
diff --git a/documentation/src/assets/integration-icons/firewall.tsx b/documentation/src/assets/integration-icons/firewall.tsx
new file mode 100644
index 00000000..6c5d3ca4
--- /dev/null
+++ b/documentation/src/assets/integration-icons/firewall.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgFirewall = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+  <path d="M4 8h16" />
+  <path d="M20 12h-16" />
+  <path d="M4 16h16" />
+  <path d="M9 4v4" />
+  <path d="M14 8v4" />
+  <path d="M8 12v4" />
+  <path d="M16 12v4" />
+  <path d="M11 16v4" />
+</svg>
+);
+
+export default SvgFirewall;
diff --git a/documentation/src/assets/integration-icons/index.ts b/documentation/src/assets/integration-icons/index.ts
index 4ac74b05..1b784f3e 100644
--- a/documentation/src/assets/integration-icons/index.ts
+++ b/documentation/src/assets/integration-icons/index.ts
@@ -10,6 +10,17 @@ export { default as UserIP } from "./userip";
 export { default as UserLogin } from "./userlogin";
 export { default as Upgrade } from "./upgrade";
 export { default as Search } from "./search";
+export { default as Firewall } from "./firewall";
+export { default as SSL } from "./ssl";
+export { default as Factor } from "./factor";
+export { default as ModSec } from "./modsec";
+export { default as CPU } from "./cpu";
+export { default as Box } from "./box";
+export { default as IPblock } from "./ipblock";
+export { default as Terminal } from "./terminal";
+export { default as AdminOff } from "./adminoff";
+export { default as Separate } from "./separate";
+export { default as Ports } from "./ports";
 export { default as Ably } from "./ably";
 export { default as Airtable } from "./airtable";
 export { default as Antd } from "./antd";
diff --git a/documentation/src/assets/integration-icons/ipblock.tsx b/documentation/src/assets/integration-icons/ipblock.tsx
new file mode 100644
index 00000000..9ceb8109
--- /dev/null
+++ b/documentation/src/assets/integration-icons/ipblock.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgIPblock = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M3 3l18 18" />
+  <path d="M8 13.5v-5.5m.44 -3.562a1.5 1.5 0 0 1 2.56 1.062v1.5m0 4.008v.992m0 -6.5v-2a1.5 1.5 0 1 1 3 0v6.5m0 -4.5a1.5 1.5 0 0 1 3 0v6.5m0 -4.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2c-2.114 -.292 -3.956 -1.397 -5 -3l-2.7 -5.25a1.7 1.7 0 0 1 2.75 -2l.9 1.75" />
+</svg>
+);
+
+export default SvgIPblock;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/keyboard.tsx b/documentation/src/assets/integration-icons/keyboard.tsx
index a20bb9a6..786dd7b5 100644
--- a/documentation/src/assets/integration-icons/keyboard.tsx
+++ b/documentation/src/assets/integration-icons/keyboard.tsx
@@ -13,10 +13,14 @@ const SvgKeyboard = (props: SVGProps<SVGSVGElement>) => (
         xmlns="http://www.w3.org/2000/svg"
         {...props}
     >
-  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-  <path d="M20 11v-2a2 2 0 0 0 -2 -2h-12a2 2 0 0 0 -2 2v5a2 2 0 0 0 2 2h5" />
-  <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-  <path d="M20.2 20.2l1.8 1.8" />
+  <path d="M2 6m0 2a2 2 0 0 1 2 -2h16a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-16a2 2 0 0 1 -2 -2z" />
+  <path d="M6 10l0 .01" />
+  <path d="M10 10l0 .01" />
+  <path d="M14 10l0 .01" />
+  <path d="M18 10l0 .01" />
+  <path d="M6 14l0 .01" />
+  <path d="M18 14l0 .01" />
+  <path d="M10 14l4 .01" />
 </svg>
 );
 
diff --git a/documentation/src/assets/integration-icons/modsec.tsx b/documentation/src/assets/integration-icons/modsec.tsx
new file mode 100644
index 00000000..60c3be1f
--- /dev/null
+++ b/documentation/src/assets/integration-icons/modsec.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgModSec = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" />
+  <path d="M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+  <path d="M12 12l0 2.5" />
+</svg>
+);
+
+export default SvgModSec;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/ports.tsx b/documentation/src/assets/integration-icons/ports.tsx
new file mode 100644
index 00000000..07532c40
--- /dev/null
+++ b/documentation/src/assets/integration-icons/ports.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgPorts = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M8 10v-7l-2 2" />
+  <path d="M6 16a2 2 0 1 1 4 0c0 .591 -.601 1.46 -1 2l-3 3h4" />
+  <path d="M15 14a2 2 0 1 0 2 -2a2 2 0 1 0 -2 -2" />
+  <path d="M6.5 10h3" />
+</svg>
+);
+
+export default SvgPorts;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/separate.tsx b/documentation/src/assets/integration-icons/separate.tsx
new file mode 100644
index 00000000..f94cc87d
--- /dev/null
+++ b/documentation/src/assets/integration-icons/separate.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgSeparate = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M4 4h16" />
+  <path d="M4 20h16" />
+</svg>
+);
+
+export default SvgSeparate;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/ssl.tsx b/documentation/src/assets/integration-icons/ssl.tsx
new file mode 100644
index 00000000..6a772fe6
--- /dev/null
+++ b/documentation/src/assets/integration-icons/ssl.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgSSL = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z" />
+  <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
+  <path d="M8 11v-4a4 4 0 1 1 8 0v4" />
+</svg>
+);
+
+export default SvgSSL;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/terminal.tsx b/documentation/src/assets/integration-icons/terminal.tsx
new file mode 100644
index 00000000..af69f69d
--- /dev/null
+++ b/documentation/src/assets/integration-icons/terminal.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgTerminal = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+  <path d="M8 9l3 3l-3 3" />
+  <path d="M13 15l3 0" />
+  <path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+</svg>
+);
+
+export default SvgTerminal;
\ No newline at end of file
diff --git a/documentation/src/assets/integrations.ts b/documentation/src/assets/integrations.ts
index ce9a0554..fa7d258b 100644
--- a/documentation/src/assets/integrations.ts
+++ b/documentation/src/assets/integrations.ts
@@ -12,6 +12,17 @@ import {
     UserServer,
     UserIP,
     UserLogin,
+    Firewall,
+    SSL,
+    ModSec,
+    Factor,
+    CPU,
+    Box,
+    IPblock,
+    Terminal,
+    AdminOff,
+    Ports,
+    Separate,
     Airtable,
     Antd,
     Ably,
@@ -131,7 +142,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "SSH and Web Terminal",
-            icon: Strapi,
+            icon: Terminal,
             description:
                 "Access the terminal remotely through SSH or log in automatically to the Web Terminal. Comes with preinstalled WPCLI and NPM for added convenience!",
             url: "/docs/panel/advanced/ssh/",
@@ -360,7 +371,7 @@ export const integrations: IntegrationsType = {
     "live-providers": [
         {
             name: "User containerisation",
-            icon: Ably,
+            icon: Box,
             description:
                 "Every user account is containerised. Containers have no access to other users or server files.",
             url: "/docs/panel/intro/",
@@ -368,7 +379,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Resource limiting",
-            icon: Ably,
+            icon: CPU,
             description:
                 "Administrators have the ability to set specific limits per plan, including port speed, disk usage, inodes, the number of websites, MySQL databases, and domains.",
             url: "/docs/admin/plans/hosting_plans/#create-a-plan",
@@ -376,7 +387,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "SSL / TLS",
-            icon: Ably,
+            icon: SSL,
             description:
                 "Automatically provision Let's Encrypt certificates. Users can generate new certificates and seamlessly redirect all website traffic to HTTPS.",
             url: "/docs/panel/domains/SSL/",
@@ -384,7 +395,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "ModSecurity",
-            icon: Ably,
+            icon: ModSec,
             description:
                 "Administrators can activate ModSecurity with a single click and configure the OWASP ruleset. Additionally, individual users have the flexibility to enable or disable ModSecurity per domain.",
             url: "/docs/admin/settings/waf/",
@@ -392,7 +403,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Firewall",
-            icon: Ably,
+            icon: Firewall,
             description:
                 "Administrators can manage (UFW) firewall rules directly from the admin interface. Only needed ports are open for users, and administrators have full control over them.",
             url: "/docs/admin/settings/firewall/",
@@ -400,7 +411,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Two-Factor Authentication",
-            icon: Ably,
+            icon: Factor,
             description:
                 "Users can enhance security by enabling Two-Factor Authentication for their OpenPanel account. Administrators have the flexibility to enforce or disable 2FA for any user.",
             url: "/docs/panel/account/2fa/",
@@ -408,7 +419,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Limited shell access",
-            icon: Ably,
+            icon: Terminal,
             description:
                 "End users are restricted from root-level access to their container. Additionally, to increase security, all services within a user's container operate under distinct user accounts.",
             url: "/docs/panel/advanced/ssh/",
@@ -416,7 +427,7 @@ export const integrations: IntegrationsType = {
         }, 
         {
             name: "IP blocking",
-            icon: Ably,
+            icon: IPblock,
             description:
                 "Each user has the capability to configure a domain-specific IP block list, providing a personalized means to restrict access to websites by blocking specific IP addresses.",
             url: "",
@@ -424,7 +435,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Disable admin panel",
-            icon: Ably,
+            icon: AdminOff,
             description:
                 "Administrators can effortlessly disable the OpenAdmin interface with a single click, while preserving the core functionality of OpenPanel.",
             url: "/docs/admin/settings/adminpanel/#enable-features",
@@ -432,7 +443,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Separate services",
-            icon: Ably,
+            icon: Separate,
             description:
                 "Both OpenAdmin and OpenPanel employ separate databases and webservers, maintaining full independence from user websites.",
             url: "",
@@ -440,7 +451,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Custom ports",
-            icon: Ably,
+            icon: Ports,
             description:
                 "Administrators have the flexibility to customize the default port (e.g., change from 2083) and alter the directory path (e.g., from /openpanel) to cater to specific preferences.",
             url: "/docs/admin/settings/openpanel/",