diff --git a/src/frontend/src/components/render/InstanceFromUrl.tsx b/src/frontend/src/components/render/InstanceFromUrl.tsx
new file mode 100644
index 0000000000..2e0d7877f0
--- /dev/null
+++ b/src/frontend/src/components/render/InstanceFromUrl.tsx
@@ -0,0 +1,33 @@
+import { Loader } from '@mantine/core';
+import { useMemo, useState } from 'react';
+
+import { api } from '../../App';
+import { ModelType } from '../../enums/ModelType';
+import { RenderInstance } from './Instance';
+
+/**
+ * Render a model instance from a URL
+ * @param model Model type
+ * @param url URL to fetch instance from
+ * @returns JSX Element
+ */
+export function InstanceFromUrl({
+  model,
+  url
+}: {
+  model: ModelType;
+  url: string;
+}) {
+  const [data, setData] = useState<any>(null);
+  useMemo(
+    () =>
+      api.get(url).then((res) => {
+        setData(res.data);
+      }),
+    [model, url]
+  );
+
+  if (!data) return <Loader />;
+
+  return <RenderInstance instance={data} model={model} />;
+}