diff --git a/components/hero.tsx b/components/hero.tsx
index 5a3da9a2..1648d388 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -14,10 +14,10 @@ const Hero: FunctionComponent<{
 }> = function ({
   title,
   subtitle,
-  cta,
+  cta = null,
   ctaContent,
-  mainPicture,
-  mainPictureAlt,
+  mainPicture = null,
+  mainPictureAlt = null,
   mainPictureWidth,
   mainPictureHeight,
   mainPictureSkewed,
@@ -118,6 +118,4 @@ const Hero: FunctionComponent<{
   );
 };
 
-Hero.defaultProps = { cta: null, mainPicture: null, mainPictureAlt: null };
-
 export default Hero;
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
index e48145b3..fb4e986c 100644
--- a/pages/tools/index.tsx
+++ b/pages/tools/index.tsx
@@ -176,6 +176,17 @@ const tools = [
       }
     ],
     imageSrc: '/images/illustrations/mx-lookup.svg'
+  },
+  {
+    title: 'UUID generator',
+    description: 'Generate unique UUIDs online',
+    links: [
+      {
+        src: '/tools/uuid-generator/',
+        text: 'Generate'
+      }
+    ],
+    imageSrc: '/images/illustrations/uuid-generator.svg'
   }
 ];
 
diff --git a/pages/tools/uuid-generator.tsx b/pages/tools/uuid-generator.tsx
new file mode 100644
index 00000000..ec5fdaff
--- /dev/null
+++ b/pages/tools/uuid-generator.tsx
@@ -0,0 +1,93 @@
+import { FunctionComponent, useEffect, useState } from 'react';
+import CodeBlock from '../../components/code-block';
+import Hero from '../../components/hero';
+import Meta from '../../components/meta';
+import ToolsCta from '../../components/tools-cta';
+import Layout from '../../layout/layout';
+
+const UuidGenerator: FunctionComponent = function () {
+  const generateUuid = () => {
+    return crypto.randomUUID();
+  };
+  const [uuid, setUuid] = useState(null);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setUuid(generateUuid());
+    }
+  }, []);
+
+  return (
+    <Layout footerBanner='download'>
+      <Meta
+        title={'UUIDs v4 generator'}
+        description='Generate unique UUIDs v4 with this free online tool: UUIDs are unique identifiers that are used in software development to identify resources.'
+      />
+      <Hero
+        title='<span class="text-primary">UUIDs</span> generator'
+        subtitle='Generate unique UUIDs v4 with this free online tool'
+      />
+      <section className='pb-5 pb-lg-10'>
+        <div className='container'>
+          <CodeBlock code={uuid} lineBreak language='text' />
+          <button
+            className='btn btn-primary mt-3'
+            onClick={() => {
+              setUuid(generateUuid());
+            }}
+          >
+            Generate
+          </button>
+        </div>
+      </section>
+
+      <section className='pb-5 pb-lg-10'>
+        <div className='container'>
+          <ToolsCta />
+        </div>
+      </section>
+
+      <section className='pb-5 pb-lg-10'>
+        <div className='container'>
+          <div className='row'>
+            <div className='col-12'>
+              <h3 className='mt-6 fw-medium'>About this tool</h3>
+              <p>
+                This tool generates unique UUIDs v4. Click on the "Generate"
+                button to get a new UUID.
+              </p>
+              <h3 className='mt-6 fw-medium'>About UUIDs</h3>
+              <p>
+                UUIDs are unique identifiers that are used in software
+                development to identify resources. UUIDs are 128-bit numbers
+                represented as 32 hexadecimal digits separated by hyphens. Their
+                uniqueness and low probability of duplication make them ideal
+                for use in distributed systems.
+              </p>
+              <p>
+                UUIDs are commonly used in databases, APIs, and other systems to
+                uniquely identify resources. They are also used in various
+                programming languages and frameworks to generate unique
+                identifiers.
+              </p>
+              <h3 className='mt-6 fw-medium'>About UUID v4</h3>
+              <p>
+                UUID v4 is one of the four versions of UUIDs defined in RFC
+                4122. It is a randomly generated UUID that is based on random
+                numbers. UUID v4 is the most commonly used version of UUIDs and
+                is suitable for most use cases.
+              </p>
+              <p>
+                UUIDs v4 are not guaranteed to be unique, but the probability of
+                generating duplicate UUIDs is extremely low and can usually be
+                ignored.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </Layout>
+  );
+};
+
+export default UuidGenerator;
diff --git a/public/images/illustrations/uuid-generator.svg b/public/images/illustrations/uuid-generator.svg
new file mode 100644
index 00000000..66fb8463
--- /dev/null
+++ b/public/images/illustrations/uuid-generator.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-46157.4,-63135.9)">
+        <g id="Sponsors">
+        </g>
+        <g id="uuid-gen" serif:id="uuid gen" transform="matrix(1.05024,0,0,1,2304.38,-11.2142)">
+            <rect x="41755.4" y="63147.1" width="1904.33" height="2000" style="fill:none;"/>
+            <g transform="matrix(11.5743,0,0,12.1558,-499615,-713214)">
+                <path d="M46876.1,63983.6C46871.5,63984.9 46866.3,63985.5 46860.7,63985.5L46840.4,63985.5L46847.9,63914.2L46870.4,63914.2C46882,63914.2 46890.7,63917.2 46896.5,63923.4C46902.3,63929.5 46904.7,63938.1 46903.5,63949.2C46902.9,63954.5 46901.8,63959.2 46900,63963.4C46898.5,63963 46897,63962.8 46895.5,63962.8C46884.7,63962.8 46876,63971.5 46876,63982.3C46876,63982.7 46876,63983.2 46876.1,63983.6ZM46887.7,63949.6C46889.3,63934.2 46883.4,63926.6 46869.8,63926.6L46861.8,63926.6L46856.9,63973L46863.4,63973C46878,63973 46886.1,63965.2 46887.7,63949.6ZM46807.3,63985.5L46814.8,63914.2L46830,63914.2L46822.5,63985.5L46807.3,63985.5Z" style="fill:rgb(51,94,234);"/>
+            </g>
+            <g id="auto_fix_high_24dp_E8EAED.svg" transform="matrix(16.375,0,0,17.1976,43183.9,64528)">
+                <g transform="matrix(1,0,0,1,-12,-12)">
+                    <rect x="0" y="0" width="24" height="24" style="fill:none;fill-rule:nonzero;"/>
+                    <path d="M7.5,5.6L10,7L8.6,4.5L10,2L7.5,3.4L5,2L6.4,4.5L5,7L7.5,5.6ZM19.5,15.4L17,14L18.4,16.5L17,19L19.5,17.6L22,19L20.6,16.5L22,14L19.5,15.4ZM22,2L19.5,3.4L17,2L18.4,4.5L17,7L19.5,5.6L22,7L20.6,4.5L22,2ZM14.37,7.29C13.98,6.9 13.35,6.9 12.96,7.29L1.29,18.96C0.9,19.35 0.9,19.98 1.29,20.37L3.63,22.71C4.02,23.1 4.65,23.1 5.04,22.71L16.7,11.05C17.09,10.66 17.09,10.03 16.7,9.64L14.37,7.29ZM13.34,12.78L11.22,10.66L13.66,8.22L15.78,10.34L13.34,12.78Z" style="fill:rgb(55,184,135);fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>