diff --git a/package-lock.json b/package-lock.json
index 17e8e3c86..30a62c9dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "rc-tooltip": "^5.2.2",
         "react": "^18.2.0",
         "react-chartjs-2": "^4.3.1",
+        "react-circular-progressbar": "^2.1.0",
         "react-device-detect": "^2.2.2",
         "react-dom": "^18.2.0",
         "react-draggable": "^4.4.5",
@@ -24921,6 +24922,14 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-circular-progressbar": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
+      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-device-detect": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.2.tgz",
diff --git a/package.json b/package.json
index 6c923b23d..500a79afa 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "rc-tooltip": "^5.2.2",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.3.1",
+    "react-circular-progressbar": "^2.1.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
diff --git a/src/components/Atoms/CircularProgress.tsx b/src/components/Atoms/CircularProgress.tsx
new file mode 100644
index 000000000..3792f6896
--- /dev/null
+++ b/src/components/Atoms/CircularProgress.tsx
@@ -0,0 +1,19 @@
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
+
+export default function CircularProgress({
+  progress_percent = 0,
+}: {
+  progress_percent?: number;
+}) {
+  return (
+    <CircularProgressbar
+      value={progress_percent * 100}
+      styles={buildStyles({
+        pathColor: '#59B2F3',
+        trailColor: 'rgba(209, 209, 218, 0.1)',
+      })}
+      strokeWidth={15}
+    />
+  );
+}
diff --git a/src/components/DashboardLayout/InstanceList.tsx b/src/components/DashboardLayout/InstanceList.tsx
index 4091d7df5..1a796f387 100644
--- a/src/components/DashboardLayout/InstanceList.tsx
+++ b/src/components/DashboardLayout/InstanceList.tsx
@@ -1,7 +1,8 @@
 import { faServer } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RadioGroup } from '@headlessui/react';
-import InstanceLoadingCard from 'components/InstanceLoadingCard';
+import InstanceLoadingPill from 'components/InstanceLoadingPill';
+import InstanceLoadingCard from 'components/InstanceLoadingPill';
 import InstancePill from 'components/InstancePill';
 import { InstanceContext } from 'data/InstanceContext';
 import { NotificationContext } from 'data/NotificationContext';
@@ -76,28 +77,14 @@ export default function InstanceList({
               notification.start_value,
               otherwise(
                 {
-                  InstanceCreation: ({
-                    instance_uuid,
-                    instance_name,
-                    port,
-                    flavour,
-                    game_type,
-                  }) => (
-                    <InstanceLoadingCard
+                  InstanceCreation: ({ instance_uuid }) => (
+                    <InstanceLoadingPill
                       key={instance_uuid}
-                      uuid={instance_uuid}
-                      name={instance_name}
-                      port={port}
-                      flavour={flavour}
-                      game_type={game_type}
-                      level={notification.level}
-                      state={notification.state}
                       progress_percent={
                         notification.total
                           ? notification.progress / notification.total
                           : undefined
                       }
-                      progress_title={'Setting up...'}
                     />
                   ),
                 },
diff --git a/src/components/InstanceLoadingPill.stories.tsx b/src/components/InstanceLoadingPill.stories.tsx
new file mode 100644
index 000000000..f5c15d15f
--- /dev/null
+++ b/src/components/InstanceLoadingPill.stories.tsx
@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import InstanceLoadingPill from './InstanceLoadingPill';
+
+export default {
+  title: 'library/InstanceLoadingPill',
+  component: InstanceLoadingPill,
+} as ComponentMeta<typeof InstanceLoadingPill>;
+
+const Template: ComponentStory<typeof InstanceLoadingPill> = (args) => (
+  <div className="flex w-60 flex-col child:w-full">
+    <InstanceLoadingPill {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  progress_percent: 0.5,
+};
diff --git a/src/components/InstanceLoadingPill.tsx b/src/components/InstanceLoadingPill.tsx
new file mode 100644
index 000000000..4e101645d
--- /dev/null
+++ b/src/components/InstanceLoadingPill.tsx
@@ -0,0 +1,40 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { stateToColor } from 'utils/util';
+import CircularProgress from './Atoms/CircularProgress';
+
+export default function InstanceLoadingPill({
+  progress_percent = 0,
+}: {
+  progress_percent?: number;
+}) {
+  const stateColor = stateToColor['Starting'];
+
+  return (
+    <button
+      className={clsx(
+        'flex flex-row items-center gap-x-1.5',
+        'rounded-md py-1 px-2',
+        'text-medium font-bold leading-5 tracking-medium',
+        'text-white/50 ui-checked:text-gray-300',
+        'ui-checked:bg-gray-800 ui-checked:outline ui-checked:outline-1 ui-checked:outline-fade-700 ui-not-checked:hover:bg-gray-800',
+        'focus-visible:outline-none enabled:focus-visible:ring-4 enabled:focus-visible:ring-blue-faded/50'
+      )}
+    >
+      <div className="h-4 w-4">
+        <CircularProgress
+          progress_percent={progress_percent}
+        ></CircularProgress>
+      </div>
+
+      <p className="grow truncate text-left italic">
+        Setting up... ({Math.round(progress_percent * 100)}%)
+      </p>
+      <FontAwesomeIcon
+        icon={faCircle}
+        className={`select-none ${stateColor} text-[8px]`}
+      />
+    </button>
+  );
+}