diff --git a/app/components/JenkinsJobs.tsx b/app/components/JenkinsJobs.tsx
new file mode 100644
index 0000000..9934f21
--- /dev/null
+++ b/app/components/JenkinsJobs.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { IfcWallDisplayJob, IfcWallDisplayResponse } from "@/app/types";
+
+const successColour = "[#90EE90]";
+const failureColour = "[#F08080]";
+const abortedColour = "gray-400";
+
+const jenkinsColourToWebDashColour = new Map<string, string>([
+  ["red", `bg-${failureColour}`], // build broken
+  ["blue", `bg-${successColour}`], // build success
+  ["aborted", `bg-${abortedColour}`], // build aborted
+  [
+    "red_anime",
+    `bg-[repeating-linear-gradient(45deg,#F08080_0px,#F08080_20px,#99a1af_20px,#99a1af_40px)]`,
+  ], // build running but was broken
+  [
+    "blue_anime",
+    "bg-[repeating-linear-gradient(45deg,#90EE90_0px,#90EE90_20px,#99a1af_20px,#99a1af_40px)]",
+  ], // build running but was successful
+]);
+
+export default function JenkinsJobIframe() {
+  const [data, setData] = useState<Array<IfcWallDisplayJob>>([]);
+
+  useEffect(() => {
+    async function fetchPosts() {
+      const res = await fetch(
+        "https://epics-jenkins.isis.rl.ac.uk/view/WallDisplay/api/json",
+      );
+      const resData: IfcWallDisplayResponse = await res.json();
+      const jobs: Array<IfcWallDisplayJob> = resData["jobs"].filter(
+        (job) => job["color"] != "disabled",
+      );
+      setData(jobs);
+    }
+    fetchPosts();
+  }, []);
+
+  if (data.length === 0) {
+    return (
+      <div>
+        <h1 className={"dark:text-white"}>
+          Loading jenkins jobs. If this takes a while, check you are connected
+          to the ISIS network.
+        </h1>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={
+        "grid md:grid-rows-8 md:grid-flow-col  md:grid-cols-3 items-center gap-1.5 grid-cols-1"
+      }
+    >
+      {data.map((job) => (
+        <a
+          key={job["name"]}
+          href={job["url"] + "#:~:text=Builds"} // link to text fragment for "builds"
+          className={
+            "text-black h-10 font-bold text-xl capitalize rounded-lg text-center border-2 border-black hover:border-white " +
+            jenkinsColourToWebDashColour.get(job["color"])
+          }
+          target={"_blank"}
+        >
+          {job["name"]}
+        </a>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/JenkinsJobsIframe.tsx b/app/components/JenkinsJobsIframe.tsx
deleted file mode 100644
index e623d00..0000000
--- a/app/components/JenkinsJobsIframe.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-export default function JenkinsJobIframe() {
-  return (
-    <div className="flex flex-col justify-center items-center">
-      <h1 className="w-full text-left text-black dark:text-white font-semibold text-2xl   ">
-        Jenkins Jobs:
-      </h1>{" "}
-      <p className="text-md text-left w-full text-black dark:text-white">
-        Tip: Open the jobs by clicking on the individual job, then clicking the
-        job name into a <span className="font-bold underline">new tab</span>{" "}
-        only. If you cannot see this, you probably aren&apos;t connected to the
-        ISIS network.
-      </p>
-      <iframe
-        className="w-full h-[300px] mt-4 border-2 border-gray-100 dark:border-black rounded-lg shadow-sm hover:shadow-lg hover:border-black dark:hover:border-white transition-all duration-200"
-        src="https://epics-jenkins.isis.rl.ac.uk/plugin/jenkinswalldisplay/walldisplay.html?viewName=WallDisplay&amp;jenkinsUrl=https%3A%2F%2Fepics-jenkins.isis.rl.ac.uk%2F"
-      ></iframe>
-    </div>
-  );
-}
diff --git a/app/types.ts b/app/types.ts
index 2090a45..eaa1a98 100644
--- a/app/types.ts
+++ b/app/types.ts
@@ -162,3 +162,19 @@ export interface instListEntry {
 }
 
 export type instList = Array<instListEntry>;
+
+export interface IfcWallDisplayJob {
+  _class: string;
+  color: string;
+  name: string;
+  url: string;
+}
+
+export interface IfcWallDisplayResponse {
+  _class: string;
+  description?: string;
+  name: string;
+  property: Array<string>;
+  url: string;
+  jobs: Array<IfcWallDisplayJob>;
+}
diff --git a/app/wall/page.tsx b/app/wall/page.tsx
index 8735db8..8fc0143 100644
--- a/app/wall/page.tsx
+++ b/app/wall/page.tsx
@@ -1,5 +1,5 @@
 import ShowHideBeamInfo from "../components/ShowHideBeamInfo";
-import JenkinsJobIframe from "../components/JenkinsJobsIframe";
+import JenkinsJobIframe from "../components/JenkinsJobs";
 import InstrumentsDisplay from "@/app/components/InstrumentsDisplay";
 
 export default function WallDisplay() {
@@ -22,6 +22,9 @@ export default function WallDisplay() {
             </div>
           </div>
           <hr className="h-[2px] rounded my-4 bg-gray-200 border-0 dark:bg-gray-600" />
+          <h1 className="w-full text-left text-black dark:text-white font-semibold text-2xl pb-2 ">
+            Jenkins jobs:
+          </h1>
           <JenkinsJobIframe />
         </div>
       </section>
diff --git a/jest.config.ts b/jest.config.ts
index b544bb9..96bf702 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -16,7 +16,7 @@ const config: Config = {
     "app/**/*.{ts,tsx}",
     "!**/*layout.tsx",
     "!app/_app.tsx",
-    "!app/components/JenkinsJobsIframe.tsx", // relies on an external image
+    "!app/components/JenkinsJobs.tsx", // relies on an external fetch
     "!app/components/ShowHideBeamInfo.tsx", // relies on an external image
     "!app/components/InstrumentData.tsx", // relies on websocket
   ],