diff --git a/lstDocs/src/components/HomepageFeatures/index.tsx b/lstDocs/src/components/HomepageFeatures/index.tsx
index e56b0f8..36598f8 100644
--- a/lstDocs/src/components/HomepageFeatures/index.tsx
+++ b/lstDocs/src/components/HomepageFeatures/index.tsx
@@ -12,7 +12,7 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
     {
         title: "Install / Update",
-        Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
+        Svg: require("@site/static/img/install_update.svg").default,
         description: (
             <>
                 Installation of LST onto your server, including how to setup
@@ -22,7 +22,7 @@ const FeatureList: FeatureItem[] = [
     },
     {
         title: "One Click Print",
-        Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
+        Svg: require("@site/static/img/one_click_print.svg").default,
         description: (
             <>
                 Full process on how the One click print flow and bussiness logic
@@ -32,7 +32,7 @@ const FeatureList: FeatureItem[] = [
     },
     {
         title: "Logistics",
-        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+        Svg: require("@site/static/img/logistics.svg").default,
         description: (
             <>
                 All Logistcs topics sucks as "Fake Edi", LST-Datamart (items
@@ -43,12 +43,12 @@ const FeatureList: FeatureItem[] = [
     },
     {
         title: "TMS intergration",
-        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+        Svg: require("@site/static/img/transport.svg").default,
         description: <>The TMS intergration, how to setup and how to manage.</>,
     },
     {
         title: "Notification System",
-        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+        Svg: require("@site/static/img/notification_system.svg").default,
         description: (
             <>
                 These are a set of notifications/alerts that have been defined
@@ -59,7 +59,7 @@ const FeatureList: FeatureItem[] = [
     },
     {
         title: "Scanner app",
-        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+        Svg: require("@site/static/img/scanner_app.svg").default,
         description: (
             <>
                 The scanner app will be the same app with more limited features
@@ -73,9 +73,9 @@ const FeatureList: FeatureItem[] = [
 function Feature({ title, Svg, description }: FeatureItem) {
     return (
         <div className={clsx("col col--4")}>
-            {/* <div className="text--center">
+            <div className="text--center">
                 <Svg className={styles.featureSvg} role="img" />
-            </div> */}
+            </div>
             <div className="text--center padding-horiz--md">
                 <Heading as="h3">{title}</Heading>
                 <p>{description}</p>
diff --git a/lstDocs/static/img/install_update.svg b/lstDocs/static/img/install_update.svg
new file mode 100644
index 0000000..42f0215
--- /dev/null
+++ b/lstDocs/static/img/install_update.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="220" 
+  height="180" 
+  viewBox="0 0 220 180" 
+  fill="none">
+
+  <!-- Server box -->
+  <rect x="20" y="40" width="180" height="90" rx="8" fill="#4F46E5"/>
+  <rect x="20" y="40" width="180" height="90" rx="8" stroke="#312E81" stroke-width="3"/>
+
+  <!-- Server indicator lights -->
+  <circle cx="40" cy="65" r="6" fill="#22C55E"/>
+  <circle cx="65" cy="65" r="6" fill="#FACC15"/>
+  <circle cx="90" cy="65" r="6" fill="#EF4444"/>
+
+  <!-- Text-like bars to represent config lines -->
+  <rect x="40" y="90" width="140" height="8" rx="2" fill="white" opacity="0.8"/>
+  <rect x="40" y="105" width="100" height="8" rx="2" fill="white" opacity="0.6"/>
+  
+  <!-- Update arrow (circular) -->
+  <path d="M110 25a35 35 0 1 1 -24.75 10.25" stroke="#4F46E5" stroke-width="4" fill="none"/>
+  <path d="M85 35 L100 40 L95 25 Z" fill="#4F46E5"/>
+</svg>
\ No newline at end of file
diff --git a/lstDocs/static/img/logistics.svg b/lstDocs/static/img/logistics.svg
new file mode 100644
index 0000000..785b149
--- /dev/null
+++ b/lstDocs/static/img/logistics.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="220"
+  height="180"
+  viewBox="0 0 220 180"
+  fill="none">
+
+  <!-- Box / Container -->
+  <rect x="60" y="60" width="100" height="70" rx="6" fill="#FACC15" stroke="#CA8A04" stroke-width="3"/>
+  <line x1="60" y1="95" x2="160" y2="95" stroke="#CA8A04" stroke-width="2"/>
+  <line x1="110" y1="60" x2="110" y2="130" stroke="#CA8A04" stroke-width="2"/>
+  
+  <!-- Up arrow (inbound) -->
+  <path d="M50 80 L30 70 L30 90 Z" fill="#22C55E"/>
+  <rect x="30" y="70" width="10" height="20" fill="#22C55E"/>
+
+  <!-- Down arrow (outbound) -->
+  <path d="M190 100 L210 110 L210 90 Z" fill="#3B82F6"/>
+  <rect x="200" y="90" width="10" height="20" fill="#3B82F6"/>
+
+  <!-- Data lines under box (datamart metaphor) -->
+  <rect x="70" y="140" width="80" height="6" rx="2" fill="#4F46E5" opacity="0.8"/>
+  <rect x="85" y="150" width="50" height="6" rx="2" fill="#4F46E5" opacity="0.6"/>
+
+</svg>
\ No newline at end of file
diff --git a/lstDocs/static/img/notification_system.svg b/lstDocs/static/img/notification_system.svg
new file mode 100644
index 0000000..acab2f4
--- /dev/null
+++ b/lstDocs/static/img/notification_system.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="220"
+  height="180"
+  viewBox="0 0 220 180"
+  fill="none">
+
+  <!-- Bell body -->
+  <path d="M110 40 
+           C90 40, 80 60, 80 80 
+           V110 
+           H140 
+           V80 
+           C140 60, 130 40, 110 40
+           Z"
+        fill="#4F46E5"
+        stroke="#312E81"
+        stroke-width="3"/>
+
+  <!-- Bell clapper -->
+  <circle cx="110" cy="115" r="8" fill="#FACC15" stroke="#CA8A04" stroke-width="2"/>
+
+  <!-- Notification alert bubble -->
+  <circle cx="145" cy="55" r="14" fill="#EF4444" stroke="#991B1B" stroke-width="3"/>
+  <text x="145" y="60" text-anchor="middle" font-size="12" font-family="Arial" fill="white">!</text>
+
+  <!-- Waves to show alert signal -->
+  <path d="M70 80 C60 70, 60 110, 70 100" 
+        stroke="#4F46E5" stroke-width="3" fill="none" opacity="0.6"/>
+  <path d="M150 80 C160 70, 160 110, 150 100" 
+        stroke="#4F46E5" stroke-width="3" fill="none" opacity="0.6"/>
+
+</svg>
\ No newline at end of file
diff --git a/lstDocs/static/img/one_click_print.svg b/lstDocs/static/img/one_click_print.svg
new file mode 100644
index 0000000..d737e9f
--- /dev/null
+++ b/lstDocs/static/img/one_click_print.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="220" 
+  height="180" 
+  viewBox="0 0 220 180" 
+  fill="none">
+
+  <!-- Printer body -->
+  <rect x="40" y="50" width="140" height="80" rx="8" fill="#4F46E5"/>
+  <rect x="40" y="50" width="140" height="80" rx="8" stroke="#312E81" stroke-width="3"/>
+
+  <!-- Paper slot -->
+  <rect x="60" y="40" width="100" height="20" rx="3" fill="white" stroke="#312E81" stroke-width="2"/>
+
+  <!-- Paper coming out -->
+  <rect x="70" y="110" width="80" height="40" rx="3" fill="white" stroke="#312E81" stroke-width="2"/>
+  
+  <!-- "Label lines" on paper -->
+  <rect x="80" y="120" width="60" height="6" rx="2" fill="#4F46E5" opacity="0.8"/>
+  <rect x="80" y="132" width="40" height="6" rx="2" fill="#4F46E5" opacity="0.6"/>
+
+  <!-- Click circle -->
+  <circle cx="180" cy="40" r="16" fill="#22C55E" stroke="#065F46" stroke-width="3"/>
+  <path d="M176 35 L186 40 L176 45 Z" fill="white"/> <!-- "play"/click icon -->
+
+</svg>
\ No newline at end of file
diff --git a/lstDocs/static/img/scanner_app.svg b/lstDocs/static/img/scanner_app.svg
new file mode 100644
index 0000000..b8aaaa0
--- /dev/null
+++ b/lstDocs/static/img/scanner_app.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="220"
+  height="180"
+  viewBox="0 0 220 180"
+  fill="none">
+
+  <!-- Mobile device frame -->
+  <rect x="70" y="30" width="80" height="120" rx="12" fill="white" stroke="#312E81" stroke-width="3"/>
+  <rect x="70" y="30" width="80" height="120" rx="12" fill="#F3F4F6" opacity="0.5"/>
+
+  <!-- Screen inside -->
+  <rect x="78" y="45" width="64" height="90" rx="6" fill="white" stroke="#4F46E5" stroke-width="2"/>
+
+  <!-- Barcode lines -->
+  <rect x="86" y="65" width="4" height="50" fill="#4F46E5"/>
+  <rect x="94" y="65" width="2" height="50" fill="#4F46E5" opacity="0.6"/>
+  <rect x="102" y="65" width="6" height="50" fill="#4F46E5"/>
+  <rect x="112" y="65" width="3" height="50" fill="#4F46E5" opacity="0.8"/>
+  <rect x="120" y="65" width="5" height="50" fill="#4F46E5"/>
+  <rect x="130" y="65" width="2" height="50" fill="#4F46E5" opacity="0.6"/>
+  <rect x="136" y="65" width="4" height="50" fill="#4F46E5"/>
+
+  <!-- Scan highlight frame -->
+  <rect x="82" y="60" width="56" height="60" rx="4" stroke="#22C55E" stroke-width="3" stroke-dasharray="6 4"/>
+
+  <!-- App indicator light at bottom -->
+  <circle cx="110" cy="140" r="4" fill="#9CA3AF"/>
+</svg>
\ No newline at end of file
diff --git a/lstDocs/static/img/transport.svg b/lstDocs/static/img/transport.svg
new file mode 100644
index 0000000..3dd71ea
--- /dev/null
+++ b/lstDocs/static/img/transport.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="260"
+  height="180"
+  viewBox="0 0 260 180"
+  fill="none">
+
+  <!-- Server box on left -->
+  <rect x="20" y="60" width="70" height="60" rx="6" fill="#4F46E5" stroke="#312E81" stroke-width="3"/>
+  <circle cx="40" cy="75" r="5" fill="#22C55E"/>
+  <circle cx="55" cy="75" r="5" fill="#FACC15"/>
+  <circle cx="70" cy="75" r="5" fill="#EF4444"/>
+
+  <!-- Connection line -->
+  <line x1="90" y1="90" x2="140" y2="90" stroke="#4F46E5" stroke-width="3" stroke-dasharray="6 4"/>
+
+  <!-- Truck body -->
+  <rect x="140" y="70" width="80" height="40" rx="4" fill="#F97316" stroke="#9A3412" stroke-width="3"/>
+
+  <!-- Truck cabin -->
+  <rect x="220" y="80" width="40" height="30" rx="3" fill="#FACC15" stroke="#CA8A04" stroke-width="3"/>
+
+  <!-- Truck wheels -->
+  <circle cx="160" cy="115" r="8" fill="#374151"/>
+  <circle cx="200" cy="115" r="8" fill="#374151"/>
+  <circle cx="235" cy="115" r="8" fill="#374151"/>
+
+  <!-- Integration arrows -->
+  <path d="M115 75 L125 90 L115 105" fill="none" stroke="#22C55E" stroke-width="3"/>
+</svg>
\ No newline at end of file