diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 00864994533dbb322b755aa144a3d5f6c795d029..1b5e6e0f6249a84728567d9e6125a09d97235afb 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -8,7 +8,8 @@ import {
     Info,
     Pair,
     PanelSplit,
-    Section
+    Section,
+    Title
 } from "./components";
 
 import "./app.css";
@@ -19,7 +20,13 @@ export const App = () => {
     const onClick = () => setCount(count + 1);
     return (
         <>
-            <PanelSplit>
+            <PanelSplit left={<div>This is the left panel</div>}>
+                <Title
+                    text="Boytacean"
+                    version="0.3.0"
+                    versionUrl="https://gitlab.stage.hive.pt/joamag/boytacean/-/blob/master/CHANGELOG.md"
+                    iconSrc={require("../res/thunder.png")}
+                ></Title>
                 <Section>
                     <Button text={getText()} onClick={onClick} />
                     <Button
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index ce050ee2b75590fc70e1b933447c51ce2288db77..e9f2875bcb0bfb3f3703448d75d6f9b60acc44d6 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -2,6 +2,8 @@ export * from "./button/button";
 export * from "./button-increment/button-increment";
 export * from "./button-switch/button-switch";
 export * from "./info/info";
+export * from "./link/link";
 export * from "./pair/pair";
 export * from "./panel-split/panel-split";
 export * from "./section/section";
+export * from "./title/title";
diff --git a/examples/web/react/components/link/link.css b/examples/web/react/components/link/link.css
new file mode 100644
index 0000000000000000000000000000000000000000..f04c472e5ad124f21555b1d948ad0350d697573a
--- /dev/null
+++ b/examples/web/react/components/link/link.css
@@ -0,0 +1,5 @@
+.link {
+    border-bottom: 2px dotted #ffffff;
+    color: #ffffff;
+    text-decoration: none;
+}
diff --git a/examples/web/react/components/link/link.tsx b/examples/web/react/components/link/link.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e316285b1d47440ce0dacf6e6831df1941c9095f
--- /dev/null
+++ b/examples/web/react/components/link/link.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from "react";
+
+import "./link.css";
+
+type LinkProps = {
+    text: string;
+    href?: string;
+    target?: string;
+    style?: string[];
+};
+
+export const Link: FC<LinkProps> = ({ text, href, target, style = [] }) => {
+    const classes = () => ["link", ...style].join(" ");
+    return (
+        <a className={classes()} href={href} target={target}>
+            {text}
+        </a>
+    );
+};
+
+export default Link;
diff --git a/examples/web/react/components/title/title.css b/examples/web/react/components/title/title.css
new file mode 100644
index 0000000000000000000000000000000000000000..b10f9b68cd6195975c92f801645d7c0e937e8448
--- /dev/null
+++ b/examples/web/react/components/title/title.css
@@ -0,0 +1,9 @@
+.title > .link {
+    margin-left: 14px;
+}
+
+.title > .icon {
+    margin-left: 14px;
+    vertical-align: middle;
+    width: 32px;
+}
diff --git a/examples/web/react/components/title/title.tsx b/examples/web/react/components/title/title.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..445e94bb695cc5116d4820b5b3761dd1b0c1fa9a
--- /dev/null
+++ b/examples/web/react/components/title/title.tsx
@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import { Link } from "../link/link";
+
+import "./title.css";
+
+type TitleProps = {
+    text: string;
+    version?: string;
+    versionUrl?: string;
+    iconSrc?: string;
+    style?: string[];
+};
+
+export const Title: FC<TitleProps> = ({
+    text,
+    version,
+    versionUrl,
+    iconSrc,
+    style = []
+}) => {
+    const classes = () => ["title", ...style].join(" ");
+    return (
+        <h1 className={classes()}>
+            {text}
+            {version && (
+                <Link text={version} href={versionUrl} target="_blank"></Link>
+            )}
+            {iconSrc && <img className="icon" src={iconSrc} alt="icon" />}
+        </h1>
+    );
+};
+
+export default Title;