diff --git a/.eleventy.js b/.eleventy.js
index 151eaec4cf..6d6155509a 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -26,6 +26,7 @@ const { EleventyEdgePlugin } = require("@11ty/eleventy");
 
 // Skip slow optimizations when developing i.e. serve/watch or Netlify deploy preview
 const DEV_MODE = process.env.ELEVENTY_RUN_MODE !== "build" || process.env.CONTEXT === "deploy-preview" || process.env.SKIP_IMAGES === 'true'
+const DEPLOY_PREVIEW = process.env.CONTEXT === "deploy-preview";
 
 module.exports = function(eleventyConfig) {
     eleventyConfig.addDataExtension("yaml", contents => yaml.load(contents)); // Add support for YAML data files
@@ -104,6 +105,7 @@ module.exports = function(eleventyConfig) {
     // make global accessible in src/_includes/layouts/base.njk for loading of PH scripts
     eleventyConfig.addGlobalData('POSTHOG_APIKEY', () => process.env.POSTHOG_APIKEY || '' )
     eleventyConfig.addGlobalData('DEV_MODE', () => DEV_MODE || DEV_MODE_POSTS)
+    eleventyConfig.addGlobalData('deployPreview', DEPLOY_PREVIEW)
 
     // Custom Tooltip "Component"
     eleventyConfig.addPairedShortcode("tooltip", function (content, text) {
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index f4d3d6468a..2c5fa4a2ab 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -218,10 +218,11 @@ eleventyComputed:
                         </ul>
                         {% endnavoption %}
                         {% navoption "Solutions", null, 0 %}
-                            <ul>
+                            <ul class="sm:grid sm:grid-flow-col sm:grid-rows-3 sm:grid-cols-1 sm:pr-9 align-left">
                                 {% navoption "IT/OT middleware", "/solutions/it-ot-middleware/", 1, "cog" %}{% endnavoption %}
                                 {% navoption "Unified Namespace", "/solutions/uns/", 1, "uns" %}{% endnavoption %}
                                 {% navoption "SCADA", "/solutions/scada/", 1, "adjustments-horizontal" %}{% endnavoption %}
+                                {% navoption "MES", "/solutions/mes/", 1, "chart" %}{% endnavoption %}
                                 {% navoption "Device management", "/solutions/device-management/", 1, "chip" %}{% endnavoption %}
                                 {% navoption "Data integration", "/solutions/data-integration/", 1, "db" %}{% endnavoption %}
                             </ul>
diff --git a/src/images/solutions/mes-hero.png b/src/images/solutions/mes-hero.png
new file mode 100644
index 0000000000..495db3c107
Binary files /dev/null and b/src/images/solutions/mes-hero.png differ
diff --git a/src/images/solutions/oee-dashboard--1.png b/src/images/solutions/oee-dashboard--1.png
new file mode 100644
index 0000000000..441e5710ee
Binary files /dev/null and b/src/images/solutions/oee-dashboard--1.png differ
diff --git a/src/solutions/mes.njk b/src/solutions/mes.njk
new file mode 100644
index 0000000000..08a2be18be
--- /dev/null
+++ b/src/solutions/mes.njk
@@ -0,0 +1,145 @@
+---
+layout: page
+nohero: true
+heroSection:
+    title: "FlowFuse for <span class='text-indigo-600 inline-block'>your own MES</span>"
+    image: images/solutions/mes-hero.png
+    imgAlt: "MES with FlowFuse"
+bannerSection:
+    title: "MES for Modern Industry"
+    content: "MES systems evolved to manage and monitor manufacturing operations on the shop floor, serving to bridge the gap between enterprise resource planning (ERP) systems and production process management like a SCADA system. Complete, monolithic MES systems are no longer needed. FlowFuse provides the resources that allow you to build and augment the components for the MES system you need, securely and at scale."
+howSection:
+    title: "How it Works"
+    p1:
+        - "Monolithic MES systems - think Siemens OpCenter Execution or Rockwell Automation’s Plex - offer MES products that are comprehensive and sophisticated, but also expensive and complex. In contrast, FlowFuse allows you to use <a href='/node-red/'>Node-RED</a>, popular industry protocols, <a href='/integrations/'>integrations</a>, and our resource library to design and deploy applications for a flexible MES solution you want for your business - and nothing more."
+        - "Here is an example. An MES system is essentially a collection of management functions, like production tracking, resource management, data collection and analysis, and scheduling and dispatching. With FlowFuse, you can build the MES features you want by using Node-RED to create applications for the functions that you need, and none that you don’t."
+    p2: "Collect data from the shop floor or the lab by using <a href='/integrations/'>FlowFuse Certified Nodes</a> to connect with local machines using any protocol: MQTT, OPC-UA, Modbus, Sparkplug B, and any other protocol that exists now or in the future."
+    image1: images/home/connect_graphic.png
+    imageAlt1: "Icons of communication protocols"
+    image2: images/solutions/oee-dashboard--1.png
+    imageAlt2: "OEE dashboard"
+    p3:
+        - "Create applications in Node-RED to transform your data for analysis and create visualizations that enable your team to make data-driven decisions about your business. Our ever-expanding <a href='/blueprints/'>Blueprints library</a> helps you get started quickly."
+        - "Because FlowFuse provides management of all of your Node-RED instances in a central place, you can easily monitor your applications whether you're running a dozen instances in a factory or thousands at sites across the globe."
+industrySection: 
+    title: "MES for Your Industry"
+    p1:
+        - "The MES needs for an automotive plant, a pharmaceutical manufacturer, and an airline are all very distinct - and yet all can (and do) rely on FlowFuse. With the infinite flexibility of Node-RED and the security and scalability of FlowFuse, every kind of industrial operation can operate the MES they need."
+        - "And with the FlowFuse open source advantage, you can build and implement any Node-RED nodes you need at any time, and securely manage the instances that you create along the way."
+whySection:
+    title: "The FlowFuse <span class='text-red-600'>Advantage</span>"
+    reasons:
+        - title: "Built-in adaptation layer"
+          description: "Leverage the power of Node-RED to design exactly the MES your organization needs."
+        - title: "End-to-end insight and control"
+          description: "Everything you need to connect, manage, visualize and analyze your data in one place."
+        - title: "Limitless connections"
+          description: "Robust and growing open-source library provides connections for all protocols, all machines, and all devices."
+        - title: "Rapid implementation"
+          description: "Get up and running quickly on FlowFuse Cloud."
+        - title: "Open-source"
+          description: "Avoid vendor lock-in."
+        - title: "Low-Code"
+          description: "Empowering your teams to build custom solutions with ease."
+ctaSection:
+    title: "Ready to build the MES your business needs?"
+    primaryUrl: "/book-demo/"
+    primaryCta: "Contact us for Demo"
+    secondaryUrl: "https://app.flowfuse.com/account/create"
+    secondaryCta: "Try FlowFuse Now"
+meta:
+    title: "FlowFuse for your own MES"
+    description: "FlowFuse provides everything you need to build the robust Manufacturing Execution System (MES) you want, providing everything from production tracking to data analysis, with the components you need and the flexibility to customize as you see fit. Powered by Node-RED."
+    keywords: "FlowFuse, manufacturing, MES, Industry 4.0, Siemens S7, PLC, Sentron"
+---
+<div class="nohero w-full px-6">
+    <!--Hero Content-->
+    <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
+        <div class="md:flex md:my-16 items-center md:flex-row md:justify-between container mx-auto text-center md:text-left md:max-w-screen-lg gap-8">
+            <div class="my-auto max-md:mx-auto md:w-1/2 lg:w-5/12 max-w-lg">
+                <h1 class="w-full mt-0 md:px-0 m-auto font-medium">
+                    {{ heroSection.title | safe }}
+                </h1>
+                <p class="mb-10 flex-grow">
+                    {{ meta.description }}
+                </p>
+                <div class="flex md:hidden justify-center m-auto max-w-[400px] mb-10"> 
+                    {% set image = ["./", heroSection.image ] | join %}
+                    {% set imageAlt = heroSection.imgAlt %}
+                    {% image image, imageAlt, [400] %}
+                </div>
+                <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
+                    <a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'mes'})">TALK TO AN EXPERT</a>
+                    <a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="https://app.flowfuse.com/account/create" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'mes'})">GET STARTED</a>
+                </div>
+            </div>
+            <div class="flex max-md:hidden justify-center m-auto max-w-[550px]">
+                {% set image = ["./", heroSection.image ] | join %}
+                {% set imageAlt = heroSection.imgAlt %}
+                {% image image, imageAlt, [550] %}
+            </div>
+        </div>   
+    </div>
+    <div class="w-full">
+        <div class="max-w-screen-lg mx-auto">
+            <!-- Banner - SCADA meets Industry 4.0 -->  
+            <div class="flex md:flex-row flex-col w-full bg-white border-2 border-indigo-200 px-6 py-2 drop-shadow-lg md:gap-6 rounded-lg">
+                <h2 class="w-full max-sm:mx-auto my-6 text-indigo-400">{{ bannerSection.title | safe }}</span></h2>
+                <p class="md:max-w-[680px] max-sm:mx-auto">{{ bannerSection.content | safe }}</p>
+            </div>
+            <!--How it works-->    
+            <h2 class="mt-16">{{ howSection.title | safe }}</h2>
+            {% for p in howSection.p1 %}
+            <p class="w-full max-sm:mx-auto mt-6">{{ p | safe }}</p>
+            {% endfor %}
+            <p class="w-full max-sm:mx-auto mt-4">{{ howSection.p2 | safe }}</p>
+            <div class="mx-auto max-w-[550px] my-12">
+                    {% set image = ["./", howSection.image1 ] | join %}
+                    {% set imageAlt = howSection.imageAlt1 %}
+                    {% image image, imageAlt, [550] %}
+            </div>
+            <div class="max-md:order-first">
+                    {% for p in howSection.p3 %}
+                    <p class="w-full max-sm:mx-auto mt-4">{{ p | safe }}</p>
+                    {% endfor %}
+            </div>
+                <div class="mx-auto ff-image-rounded p-1 max-md:max-w-[500px] max-md:my-12 md:mt-4 max-md:order-last">
+                    {% if howSection.image2 %}
+                        {% set image = ["./", howSection.image2 ] | join %}
+                        {% set imageAlt = howSection.imageAlt2 %}
+                        {% image image, imageAlt, [1024] %}
+                    {% endif %}
+                </div>
+            <!--How it works-->    
+            <h2 class="mt-16">{{ industrySection.title | safe }}</h2>
+            {% for p in industrySection.p1 %}
+            <p class="w-full max-sm:mx-auto mt-6">{{ p | safe }}</p>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+<!--Why FlowFuse-->    
+<div class="w-full bg-indigo-50/50 py-12 mt-20 px-6">
+    <div class="max-w-screen-lg mx-auto">
+        <h2 class="font-bold m-auto w-full text-center sm:text-left mb-12">{{ whySection.title | safe }}</h2>
+        <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
+            {% for reason in whySection.reasons %}
+            <div class="w-full mt-4 md:mt-0 flex flex-col">
+                <h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ reason.title }}</h4>
+                <p class="text-center sm:text-left font-light mt-6 max-sm:max-w-md max-sm:mx-auto">{{ reason.description }}
+                </p>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+<div class="max-md:max-w-xl md:max-w-screen-lg mx-auto max-sm:text-center pt-16 pb-10 px-6 text-lg flex-col flex-row items-center justify-center gap-1 hover:no-underline flex-wrap mb-12">
+    <!--CTA-->
+    <div class="ff-blue-card max-sm:max-w-none">
+        <h4 class="mb-6 w-full text-center">{{ ctaSection.title }}</h4>
+        <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
+            <a class="ff-btn ff-btn--primary min-h-[40px] uppercase" href="{{ ctaSection.primaryUrl }}" onclick="capture('cta-contact-us-for-demo', {'position': 'secondary'}, {'page': 'mes'})">{{ ctaSection.primaryCta }}</a>
+            <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{{ ctaSection.secondaryUrl }}" onclick="capture('cta-try-flowfuse-now', {'position': 'secondary'}, {'page': 'mes'})">{{ ctaSection.secondaryCta }}</a>
+        </div>
+    </div>
+</div>
diff --git a/src/solutions/scada.njk b/src/solutions/scada.njk
index 87424041f3..9503672b8d 100644
--- a/src/solutions/scada.njk
+++ b/src/solutions/scada.njk
@@ -63,8 +63,8 @@ meta:
                     {% image image, imageAlt, [400] %}
                 </div>
                 <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                    <a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'uns'})">TALK TO AN EXPERT</a>
-                    <a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="https://app.flowfuse.com/account/create" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'uns'})">GET STARTED</a>
+                    <a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'scada'})">TALK TO AN EXPERT</a>
+                    <a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="https://app.flowfuse.com/account/create" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'scada'})">GET STARTED</a>
                 </div>
             </div>
             <div class="flex max-md:hidden justify-center m-auto max-w-[450px]">