diff --git a/documentation/src/assets/integration-icons/branding.tsx b/documentation/src/assets/integration-icons/branding.tsx
new file mode 100644
index 0000000..4337a39
--- /dev/null
+++ b/documentation/src/assets/integration-icons/branding.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgBranding = (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="M19.5 15.5m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0" />
+  <path d="M9.5 7a1.5 1.5 0 0 1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749 -1.305 .749a1.5 1.5 0 0 1 -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365 -.876z" />
+  <path d="M16.5 7a1.5 1.5 0 0 1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749 -1.305 .749a1.5 1.5 0 0 1 -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365 -.876z" />
+</svg>
+);
+
+export default SvgBranding;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/index.ts b/documentation/src/assets/integration-icons/index.ts
index dde99d0..f91016d 100644
--- a/documentation/src/assets/integration-icons/index.ts
+++ b/documentation/src/assets/integration-icons/index.ts
@@ -1,5 +1,10 @@
 export { default as Languages } from "./languages";
 export { default as Dark } from "./dark";
+export { default as ServerInfo } from "./serverinfo";
+export { default as Keyboard } from "./keyboard";
+export { default as Responsive } from "./responsive";
+export { default as Branding } from "./branding";
+export { default as Search } from "./search";
 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/keyboard.tsx b/documentation/src/assets/integration-icons/keyboard.tsx
new file mode 100644
index 0000000..a20bb9a
--- /dev/null
+++ b/documentation/src/assets/integration-icons/keyboard.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgKeyboard = (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 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" />
+</svg>
+);
+
+export default SvgKeyboard;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/responsive.tsx b/documentation/src/assets/integration-icons/responsive.tsx
new file mode 100644
index 0000000..1042b86
--- /dev/null
+++ b/documentation/src/assets/integration-icons/responsive.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgResponsive = (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 stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z" />
+  <path d="M11 4h2" />
+  <path d="M12 17v.01" />
+</svg>
+);
+
+export default SvgResponsive;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/search.tsx b/documentation/src/assets/integration-icons/search.tsx
new file mode 100644
index 0000000..695a7a0
--- /dev/null
+++ b/documentation/src/assets/integration-icons/search.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgSearch = (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 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" />
+</svg>
+);
+
+export default SvgSearch;
\ No newline at end of file
diff --git a/documentation/src/assets/integration-icons/serverinfo.tsx b/documentation/src/assets/integration-icons/serverinfo.tsx
new file mode 100644
index 0000000..1256976
--- /dev/null
+++ b/documentation/src/assets/integration-icons/serverinfo.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SvgServerInfo = (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 stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M12 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+  <path d="M12 13l-1.707 -1.707a1 1 0 0 0 -.707 -.293h-2.586a2 2 0 0 1 -2 -2v-3a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2.586a1 1 0 0 0 -.707 .293l-1.707 1.707z" />
+</svg>
+);
+
+export default SvgServerInfo;
\ No newline at end of file
diff --git a/documentation/src/assets/integrations.ts b/documentation/src/assets/integrations.ts
index 901e8df..27e9e5f 100644
--- a/documentation/src/assets/integrations.ts
+++ b/documentation/src/assets/integrations.ts
@@ -1,8 +1,12 @@
 import { IntegrationsType } from "../types/integrations";
 import {
-    Ably,
+    Search,
     Languages,
+    Keyboard,
     Dark,
+    ServerInfo,
+    Responsive,
+    Branding
     Airtable,
     Antd,
     Appwrite,
@@ -252,14 +256,14 @@ export const integrations: IntegrationsType = {
     frameworks: [
         {
             name: "Branding",
-            icon: Airtable,
+            icon: Branding,
             description: "Fully customise the OpenPanel with colours, logos, fonts and more that mirror the look and feel of your hosting company.",
             url: "/docs/admin/settings/openpanel/#branding",
             status: "stable",
         },
         {
             name: "Fully responsive",
-            icon: Medusa,
+            icon: Responsive,
             description:
                 "Access OpenPanel on desktop, tablet and mobile without any feature limitations.",
             url: "",
@@ -275,7 +279,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Server Info",
-            icon: NestQuery,
+            icon: ServerInfo,
             description:
                 "View real-time usage data, IP address, nameservers, and other important server information directly within the OpenPanel interface.",
             url: "/docs/panel/dashboard",
@@ -283,7 +287,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Advanced Search",
-            icon: NestQuery,
+            icon: Search,
             description:
                 "Quickly and easily find what you are looking for with a powerful search functionality.",
             url: "/docs/panel/dashboard",
@@ -299,7 +303,7 @@ export const integrations: IntegrationsType = {
         },
         {
             name: "Keyboard Shortcuts",
-            icon: Appwrite,
+            icon: Keyboard,
             description:
                 "OpenPanel was designed with a focus on advanced users, offering over 20 keyboard shortcuts to enhance your navigation speed through the interface.",
             url: "/docs/panel/dashboard/#keyboard-shortcuts",