diff --git a/docs/docs/guides/installation/docker.mdx b/docs/docs/guides/installation/docker.mdx
index 1f9cecbe69..86d9e7de2e 100644
--- a/docs/docs/guides/installation/docker.mdx
+++ b/docs/docs/guides/installation/docker.mdx
@@ -1,5 +1,5 @@
 ---
-title: Install on Docker
+title: Install with Docker
 sidebar_position: 4
 slug: /guides/install/server
 hide_table_of_contents: true
diff --git a/docs/src/theme/DocCard/assets/changelog.png b/docs/src/theme/DocCard/assets/changelog.png
new file mode 100644
index 0000000000..c26dde775b
Binary files /dev/null and b/docs/src/theme/DocCard/assets/changelog.png differ
diff --git a/docs/src/theme/DocCard/assets/claude.png b/docs/src/theme/DocCard/assets/claude.png
new file mode 100644
index 0000000000..04921a5b94
Binary files /dev/null and b/docs/src/theme/DocCard/assets/claude.png differ
diff --git a/docs/src/theme/DocCard/assets/docker.png b/docs/src/theme/DocCard/assets/docker.png
new file mode 100644
index 0000000000..ac7df0ef7d
Binary files /dev/null and b/docs/src/theme/DocCard/assets/docker.png differ
diff --git a/docs/src/theme/DocCard/assets/groq.png b/docs/src/theme/DocCard/assets/groq.png
new file mode 100644
index 0000000000..7860e5416a
Binary files /dev/null and b/docs/src/theme/DocCard/assets/groq.png differ
diff --git a/docs/src/theme/DocCard/assets/linux.png b/docs/src/theme/DocCard/assets/linux.png
new file mode 100644
index 0000000000..8af73f9c7b
Binary files /dev/null and b/docs/src/theme/DocCard/assets/linux.png differ
diff --git a/docs/src/theme/DocCard/assets/llama.png b/docs/src/theme/DocCard/assets/llama.png
new file mode 100644
index 0000000000..5424073852
Binary files /dev/null and b/docs/src/theme/DocCard/assets/llama.png differ
diff --git a/docs/src/theme/DocCard/assets/mac.png b/docs/src/theme/DocCard/assets/mac.png
new file mode 100644
index 0000000000..97469aa790
Binary files /dev/null and b/docs/src/theme/DocCard/assets/mac.png differ
diff --git a/docs/src/theme/DocCard/assets/tensorrt.png b/docs/src/theme/DocCard/assets/tensorrt.png
new file mode 100644
index 0000000000..d3ca04d135
Binary files /dev/null and b/docs/src/theme/DocCard/assets/tensorrt.png differ
diff --git a/docs/src/theme/DocCard/assets/windows.png b/docs/src/theme/DocCard/assets/windows.png
new file mode 100644
index 0000000000..b3e2ccac6d
Binary files /dev/null and b/docs/src/theme/DocCard/assets/windows.png differ
diff --git a/docs/src/theme/DocCard/index.js b/docs/src/theme/DocCard/index.js
index d80331d2ce..e7a1966ba8 100644
--- a/docs/src/theme/DocCard/index.js
+++ b/docs/src/theme/DocCard/index.js
@@ -12,25 +12,7 @@ import styles from './styles.module.css';
 import engine from './assets/engine.png';
 import remote from './assets/remote.png';
 import manual from './assets/manual.png';
-import v0410 from './assets/v0.4.10.png';
-import v049 from './assets/v0.4.9.png';
-import v048 from './assets/v0.4.8.png';
-import v047 from './assets/v0.4.7.png';
-import v046 from './assets/v0.4.6.png';
-import v045 from './assets/v0.4.5.png';
-import v044 from './assets/v0.4.4.png';
-import v043 from './assets/v0.4.3.png';
-import v042 from './assets/v0.4.2.png';
-import v041 from './assets/v0.4.1.png';
-import v040 from './assets/v0.4.0.png';
-import v033 from './assets/v0.3.3.png';
-import v032 from './assets/v0.3.2.png';
-import v031 from './assets/v0.3.1.png';
-import v030 from './assets/v0.3.0.png';
-import v023 from './assets/v0.2.3.png';
-import v022 from './assets/v0.2.2.png';
-import v021 from './assets/v0.2.1.png';
-import v020 from './assets/v0.2.0.png';
+import changelog from './assets/changelog.png';
 import setup from './assets/setup.png';
 import importex from './assets/import.png';
 import continueint from './assets/continueint.png';
@@ -48,6 +30,14 @@ import gpu from './assets/gpu.png';
 import mistral from './assets/mistral.png';
 import lm from './assets/lm.png';
 import ollama from './assets/ollama.png';
+import claude from './assets/claude.png';
+import windows from './assets/windows.png';
+import mac from './assets/mac.png';
+import linux from './assets/linux.png';
+import llama from './assets/llama.png';
+import docker from './assets/docker.png';
+import tensorrt from './assets/tensorrt.png';
+import groq from './assets/groq.png';
 
 function CardContainer({href, children}) {
   return (
@@ -112,37 +102,37 @@ function CardLink({item}) {
   ) : (item.label === "Manual Import") ? (
     <img src={manual} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.7") ? (
-    <img src={v047} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.6") ? (
-    <img src={v046} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.5") ? (
-    <img src={v045} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.4") ? (
-    <img src={v044} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.3") ? (
-    <img src={v043} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.2") ? (
-    <img src={v042} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.1") ? (
-    <img src={v041} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.0") ? (
-    <img src={v040} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.3.3") ? (
-    <img src={v033} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.3.2") ? (
-    <img src={v032} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.3.1") ? (
-    <img src={v031} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.3.0") ? (
-    <img src={v030} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.2.3") ? (
-    <img src={v023} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.2.2") ? (
-    <img src={v022} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.2.1") ? (
-    <img src={v021} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.2.0") ? (
-    <img src={v020} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "Extension Setup") ? (
     <img src={setup} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "Import Extensions") ? (
@@ -178,11 +168,27 @@ function CardLink({item}) {
   ) : (item.label === "Ollama") ? (
     <img src={ollama} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.8") ? (
-    <img src={v048} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.9") ? (
-    <img src={v049} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (item.label === "v0.4.10") ? (
-    <img src={v0410} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+    <img src={changelog} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+  ) : (item.label === "Install with Docker") ? (
+    <img src={docker} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+  ) : (item.label === "Install on Linux") ? (
+    <img src={linux} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+  ) : (item.label === "Install on Mac") ? (
+    <img src={mac} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+  ) : (item.label === "Install on Windows") ? (
+    <img src={windows} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+  ) : (item.label === "Claude") ? (
+    <img src={claude} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+  ) : (item.label === "LlamaCPP Extension") ? (
+    <img src={llama} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+  ) : (item.label === "TensorRT-LLM Extension") ? (
+    <img src={tensorrt} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
+  ) : (item.label === "Groq") ? (
+    <img src={groq} alt="Logo" width={'20px'} height={'20px'} style={{marginRight: '5px'}} />
   ) : (
     // If not "Customize Engine Settings", use default icon
     '📄️'