diff --git a/app/package.json b/app/package.json
index 74fa3264..2c7f9b75 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.62.2",
+  "version": "1.62.3",
   "main": "module/module.js",
   "license": "MIT",
   "scripts": {
diff --git a/app/public/images/roadmap.png b/app/public/images/roadmap.png
new file mode 100644
index 00000000..83cebf5f
Binary files /dev/null and b/app/public/images/roadmap.png differ
diff --git a/app/src/pages/Roadmap.tsx b/app/src/pages/Roadmap.tsx
index 3477affa..c902a851 100644
--- a/app/src/pages/Roadmap.tsx
+++ b/app/src/pages/Roadmap.tsx
@@ -4,9 +4,15 @@ import { useQuery } from "react-query";
 
 import { InfoHeader } from "../components/InfoHeader";
 import { Page } from "../ui/Shared";
-import { SectionTitle } from "../ui/Typography";
 import { Helmet } from "react-helmet";
 
+const img = `<img
+          src="/images/roadmap.png"
+          alt="Roadmap"
+          style="width: 100%;"
+          class="md:!max-w-[360px] rounded-2xl md:float-right md:!ml-6 md:!translate-y-11 md:rotate-2"
+        />`;
+
 export default function Roadmap() {
   const { data } = useQuery("roadmap", getRoadmap, {
     staleTime: Infinity,
@@ -24,11 +30,10 @@ export default function Roadmap() {
       <Page>
         <InfoHeader title={t`Roadmap`} />
         <section className="grid gap-5">
-          <SectionTitle>Areas of Research</SectionTitle>
           {data && (
             <div
               className="issues post-content"
-              dangerouslySetInnerHTML={{ __html: data.areasOfResearch }}
+              dangerouslySetInnerHTML={{ __html: img + data.areasOfResearch }}
             />
           )}
         </section>