diff --git a/components/image/index.tsx b/components/image/index.tsx
index 61aeb1a..8b19fce 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -1,7 +1,13 @@
-export default function Image({ src, alt, ...props }) {
+export default function Image({ src, alt, width, height, short, ...props }) {
   return (
-    <div className="shadow-sm shadow-slate-100 rounded-xl overflow-hidden border border-slate-200">
-      <img alt={alt} src={src} />
+    <div
+      className={`${
+        !short
+          ? 'shadow-sm shadow-slate-100 rounded-xl overflow-hidden border border-slate-200'
+          : 'opacity-70'
+      }`}
+    >
+      <img alt={alt} src={src} width={width} height={height} />
     </div>
   );
 }
diff --git a/pages/index.mdx b/pages/index.mdx
index 35eec9a..586dc73 100644
--- a/pages/index.mdx
+++ b/pages/index.mdx
@@ -1,10 +1,10 @@
-import Image from "components/image";
-import { Card, Cards } from "components/card";
+import Image from 'components/image';
+import { Card, Cards } from 'components/card';
 import {
   CommandLineIcon,
   SparklesIcon,
   PuzzlePieceIcon,
-} from "@heroicons/react/24/outline";
+} from '@heroicons/react/24/outline';
 
 # Craftable PRO
 
@@ -17,19 +17,21 @@ If you have any questions, feel free to contact us on [Github](https://github.co
 Dive into the documention using the following cards, or choose the topic of your choice from the sidebar.
 
 <Cards>
-  <Card
-    icon={<CommandLineIcon />}
-    title="Getting Started"
-    href="/getting-started"
-  />
+  <Card icon={<CommandLineIcon />} title="Getting Started" href="/getting-started" />
   <Card icon={<SparklesIcon />} title="Frontend Assets" href="/frontend" />
-  <Card
-    icon={<PuzzlePieceIcon />}
-    title="Basic Features"
-    href="/basic-features"
-  />
+  <Card icon={<PuzzlePieceIcon />} title="Basic Features" href="/basic-features" />
 </Cards>
 
+<br />
+<br />
+<div className="flex items-center justify-evenly gap-x-4">
+  <Image alt="typescript" src="/images/vuejs.svg" width={80} height={80} short />
+  <Image alt="typescript" src="/images/laravel.svg" width={75} height={75} short />
+  <Image alt="typescript" src="/images/typescript.svg" width={70} height={70} short />
+  <Image alt="typescript" src="/images/inertia.svg" width={85} height={85} short />
+  <Image alt="typescript" src="/images/tailwindcss.svg" width={80} height={80} short />
+</div>
+
 ## Demo
 
 If you want to get the hands-on experience, you can play around in our [demo](https://demo.craftable.pro/).
diff --git a/public/images/inertia.svg b/public/images/inertia.svg
new file mode 100644
index 0000000..f83e88a
--- /dev/null
+++ b/public/images/inertia.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Inertia</title><path d="M6.901 5.331H0L6.669 12 0 18.669h6.901L13.571 12 6.9 5.331zm10.43 0H10.43L17.099 12l-6.67 6.669h6.902L24 12l-6.669-6.669z"/></svg>
\ No newline at end of file
diff --git a/public/images/laravel.svg b/public/images/laravel.svg
new file mode 100644
index 0000000..b9b725d
--- /dev/null
+++ b/public/images/laravel.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Laravel</title><path d="M23.642 5.43a.364.364 0 01.014.1v5.149c0 .135-.073.26-.189.326l-4.323 2.49v4.934a.378.378 0 01-.188.326L9.93 23.949a.316.316 0 01-.066.027c-.008.002-.016.008-.024.01a.348.348 0 01-.192 0c-.011-.002-.02-.008-.03-.012-.02-.008-.042-.014-.062-.025L.533 18.755a.376.376 0 01-.189-.326V2.974c0-.033.005-.066.014-.098.003-.012.01-.02.014-.032a.369.369 0 01.023-.058c.004-.013.015-.022.023-.033l.033-.045c.012-.01.025-.018.037-.027.014-.012.027-.024.041-.034H.53L5.043.05a.375.375 0 01.375 0L9.93 2.647h.002c.015.01.027.021.04.033l.038.027c.013.014.02.03.033.045.008.011.02.021.025.033.01.02.017.038.024.058.003.011.01.021.013.032.01.031.014.064.014.098v9.652l3.76-2.164V5.527c0-.033.004-.066.013-.098.003-.01.01-.02.013-.032a.487.487 0 01.024-.059c.007-.012.018-.02.025-.033.012-.015.021-.03.033-.043.012-.012.025-.02.037-.028.014-.01.026-.023.041-.032h.001l4.513-2.598a.375.375 0 01.375 0l4.513 2.598c.016.01.027.021.042.031.012.01.025.018.036.028.013.014.022.03.034.044.008.012.019.021.024.033.011.02.018.04.024.06.006.01.012.021.015.032zm-.74 5.032V6.179l-1.578.908-2.182 1.256v4.283zm-4.51 7.75v-4.287l-2.147 1.225-6.126 3.498v4.325zM1.093 3.624v14.588l8.273 4.761v-4.325l-4.322-2.445-.002-.003H5.04c-.014-.01-.025-.021-.04-.031-.011-.01-.024-.018-.035-.027l-.001-.002c-.013-.012-.021-.025-.031-.04-.01-.011-.021-.022-.028-.036h-.002c-.008-.014-.013-.031-.02-.047-.006-.016-.014-.027-.018-.043a.49.49 0 01-.008-.057c-.002-.014-.006-.027-.006-.041V5.789l-2.18-1.257zM5.23.81L1.47 2.974l3.76 2.164 3.758-2.164zm1.956 13.505l2.182-1.256V3.624l-1.58.91-2.182 1.255v9.435zm11.581-10.95l-3.76 2.163 3.76 2.163 3.759-2.164zm-.376 4.978L16.21 7.087 14.63 6.18v4.283l2.182 1.256 1.58.908zm-8.65 9.654l5.514-3.148 2.756-1.572-3.757-2.163-4.323 2.489-3.941 2.27z"/></svg>
\ No newline at end of file
diff --git a/public/images/tailwindcss.svg b/public/images/tailwindcss.svg
new file mode 100644
index 0000000..38b493f
--- /dev/null
+++ b/public/images/tailwindcss.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Tailwind CSS</title><path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"/></svg>
\ No newline at end of file
diff --git a/public/images/typescript.svg b/public/images/typescript.svg
new file mode 100644
index 0000000..e8beb74
--- /dev/null
+++ b/public/images/typescript.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TypeScript</title><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"/></svg>
\ No newline at end of file
diff --git a/public/images/vuejs.svg b/public/images/vuejs.svg
new file mode 100644
index 0000000..46110dc
--- /dev/null
+++ b/public/images/vuejs.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Vue.js</title><path d="M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z"/></svg>
\ No newline at end of file