diff --git a/packages/assets/branding/illustrations/servers-background.svg b/packages/assets/branding/illustrations/servers-background.svg
new file mode 100644
index 000000000..3c9df79c7
--- /dev/null
+++ b/packages/assets/branding/illustrations/servers-background.svg
@@ -0,0 +1,56 @@
+<svg viewBox="0 0 592 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M0 3C0 1.34315 1.34315 0 3 0H93C94.6569 0 96 1.34315 96 3V93C96 94.6569 94.6569 96 93 96H3C1.34315 96 0 94.6569 0 93V3Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 18C120 16.8954 120.895 16 122 16H590C591.105 16 592 16.8954 592 18V38C592 39.1046 591.105 40 590 40H122C120.895 40 120 39.1046 120 38V18Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 62C120 60.8954 120.895 60 122 60H142C143.105 60 144 60.8954 144 62V82C144 83.1046 143.105 84 142 84H122C120.895 84 120 83.1046 120 82V62Z"
+        fill="#F3F4F6" />
+    <path
+        d="M160 62C160 60.8954 160.895 60 162 60H298C299.105 60 300 60.8954 300 62V82C300 83.1046 299.105 84 298 84H162C160.895 84 160 83.1046 160 82V62Z"
+        fill="#F3F4F6" />
+    <path
+        d="M324 62C324 60.8954 324.895 60 326 60H346C347.105 60 348 60.8954 348 62V82C348 83.1046 347.105 84 346 84H326C324.895 84 324 83.1046 324 82V62Z"
+        fill="#F3F4F6" />
+    <path
+        d="M364 62C364 60.8954 364.895 60 366 60H466C467.105 60 468 60.8954 468 62V82C468 83.1046 467.105 84 466 84H366C364.895 84 364 83.1046 364 82V62Z"
+        fill="#F3F4F6" />
+    <path
+        d="M0 147C0 145.343 1.34315 144 3 144H93C94.6569 144 96 145.343 96 147V237C96 238.657 94.6569 240 93 240H3C1.34315 240 0 238.657 0 237V147Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 162C120 160.895 120.895 160 122 160H590C591.105 160 592 160.895 592 162V182C592 183.105 591.105 184 590 184H122C120.895 184 120 183.105 120 182V162Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 206C120 204.895 120.895 204 122 204H142C143.105 204 144 204.895 144 206V226C144 227.105 143.105 228 142 228H122C120.895 228 120 227.105 120 226V206Z"
+        fill="#F3F4F6" />
+    <path
+        d="M160 206C160 204.895 160.895 204 162 204H298C299.105 204 300 204.895 300 206V226C300 227.105 299.105 228 298 228H162C160.895 228 160 227.105 160 226V206Z"
+        fill="#F3F4F6" />
+    <path
+        d="M324 206C324 204.895 324.895 204 326 204H346C347.105 204 348 204.895 348 206V226C348 227.105 347.105 228 346 228H326C324.895 228 324 227.105 324 226V206Z"
+        fill="#F3F4F6" />
+    <path
+        d="M364 206C364 204.895 364.895 204 366 204H466C467.105 204 468 204.895 468 206V226C468 227.105 467.105 228 466 228H366C364.895 228 364 227.105 364 226V206Z"
+        fill="#F3F4F6" />
+    <path
+        d="M0 291C0 289.343 1.34315 288 3 288H93C94.6569 288 96 289.343 96 291V381C96 382.657 94.6569 384 93 384H3C1.34315 384 0 382.657 0 381V291Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 306C120 304.895 120.895 304 122 304H590C591.105 304 592 304.895 592 306V326C592 327.105 591.105 328 590 328H122C120.895 328 120 327.105 120 326V306Z"
+        fill="#F3F4F6" />
+    <path
+        d="M120 350C120 348.895 120.895 348 122 348H142C143.105 348 144 348.895 144 350V370C144 371.105 143.105 372 142 372H122C120.895 372 120 371.105 120 370V350Z"
+        fill="#F3F4F6" />
+    <path
+        d="M160 350C160 348.895 160.895 348 162 348H298C299.105 348 300 348.895 300 350V370C300 371.105 299.105 372 298 372H162C160.895 372 160 371.105 160 370V350Z"
+        fill="#F3F4F6" />
+    <path
+        d="M324 350C324 348.895 324.895 348 326 348H346C347.105 348 348 348.895 348 350V370C348 371.105 347.105 372 346 372H326C324.895 372 324 371.105 324 370V350Z"
+        fill="#F3F4F6" />
+    <path
+        d="M364 350C364 348.895 364.895 348 366 348H466C467.105 348 468 348.895 468 350V370C468 371.105 467.105 372 466 372H366C364.895 372 364 371.105 364 370V350Z"
+        fill="#F3F4F6" />
+</svg>
\ No newline at end of file
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 2ff3fe768..537a862ae 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -12,6 +12,7 @@ import './omorphia.scss'
 import _ModrinthIcon from './branding/logo.svg?component'
 import _FourOhFourNotFound from './branding/404.svg?component'
 import _ModrinthPlusIcon from './branding/modrinth-plus.svg?component'
+import _ServersManageIllustration from './branding/illustrations/servers-background.svg?component'
 import _AngryRinthbot from './branding/rinthbot/angry.webp'
 import _AnnoyedRinthbot from './branding/rinthbot/annoyed.webp'
 import _ConfusedRinthbot from './branding/rinthbot/confused.webp'
@@ -50,6 +51,7 @@ import _YouTubeIcon from './external/youtube.svg?component'
 export const ModrinthIcon = _ModrinthIcon
 export const FourOhFourNotFound = _FourOhFourNotFound
 export const ModrinthPlusIcon = _ModrinthPlusIcon
+export const ServersManageIllustration = _ServersManageIllustration
 export const AngryRinthbot = _AngryRinthbot
 export const AnnoyedRinthbot = _AnnoyedRinthbot
 export const ConfusedRinthbot = _ConfusedRinthbot
diff --git a/packages/ui/src/servers/pages/manage.vue b/packages/ui/src/servers/pages/manage.vue
index a58c43eb8..2d1ecc0ed 100644
--- a/packages/ui/src/servers/pages/manage.vue
+++ b/packages/ui/src/servers/pages/manage.vue
@@ -1,7 +1,19 @@
 <template>
-  <div class="flex flex-col sm:flex-row gap-4 sm:gap-0 my-4">
+  <div v-if="servers.length + sharedServers.length === 0" class="text-center py-24 relative">
+    <ServersManageIllustration class="servers-manage-illustration" />
+    <ServerIcon class="size-24 mx-auto text-contrast mb-4" />
+    <h3 class="text-3xl font-medium text-contrast mb-2">No servers found</h3>
+    <p class="text-gray-500 mb-6 px-4">Get started by creating your first server</p>
+    <ButtonStyled color="green" size="large" type="outlined">
+      <button class="flex items-center justify-center gap-2 mx-auto">
+        <PlusIcon class="size-4" /> New server
+      </button>
+    </ButtonStyled>
+  </div>
+
+  <div v-else class="flex flex-col sm:flex-row gap-4 sm:gap-0 my-4">
     <div class="flex flex-col gap-2">
-      <span class="text-2xl sm:text-3xl text-contrast font-bold">Servers</span>
+      <span class="text-3xl text-contrast font-bold">Servers</span>
       <span class="text-sm sm:text-base text-secondary">View and manage all your servers</span>
     </div>
     <div class="sm:ml-auto">
@@ -14,63 +26,67 @@
     </div>
   </div>
 
-  <span class="text-md sm:text-lg text-contrast font-bold mb-4 flex flex-row gap-2">
-    Your servers
-  </span>
+  <template v-if="servers.length > 0">
+    <span class="text-xl text-contrast font-bold mb-4 flex flex-row gap-2"> Your servers </span>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 gap-y-2">
+      <ServerCard
+        v-for="server in servers"
+        :id="server.id"
+        :key="server.id"
+        :server_name="server.server_name"
+        :server_created="server.server_created"
+        :server_plan="server.server_plan"
+        :server_status="server.server_status"
+        :players_online="server.players_online"
+        :max_players_online="server.max_players_online"
+        :world_name="server.world_name"
+        :ip="server.ip"
+      />
+    </div>
+  </template>
 
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-    <ServerCard
-      v-for="server in servers"
-      :key="server.id"
-      :server_name="server.server_name"
-      :server_created="server.server_created"
-      :server_plan="server.server_plan"
-      :server_status="server.server_status"
-      :players_online="server.players_online"
-      :max_players_online="server.max_players_online"
-      :world_name="server.world_name"
-      :ip="server.ip"
-      :id="server.id"
-    />
-  </div>
-
-  <span class="text-md sm:text-lg text-contrast font-bold mb-4 flex flex-row gap-2">
-    Servers shared with you
-  </span>
-
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-    <ServerCard
-      v-for="server in servers"
-      :key="server.id"
-      :server_name="server.server_name"
-      :server_created="server.server_created"
-      :server_plan="server.server_plan"
-      :server_status="server.server_status"
-      :players_online="server.players_online"
-      :max_players_online="server.max_players_online"
-      :world_name="server.world_name"
-      :ip="server.ip"
-      :id="server.id"
-    />
-  </div>
-
-  <div v-if="servers.length === 0" class="text-center py-12">
-    <ServerIcon class="size-12 mx-auto text-gray-400 mb-4" />
-    <h3 class="text-lg font-medium text-gray-900 mb-2">No servers found</h3>
-    <p class="text-gray-500 mb-6 px-4">Get started by creating your first server</p>
-    <ButtonStyled color="green" class="w-full sm:w-auto">
-      <button class="flex items-center justify-center gap-2">
-        <PlusIcon class="size-4" /> Create your first server
-      </button>
-    </ButtonStyled>
-  </div>
+  <template v-if="sharedServers.length > 0">
+    <span class="text-xl text-contrast font-bold mb-4 flex flex-row gap-2"> Shared servers </span>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 gap-y-2">
+      <ServerCard
+        v-for="server in sharedServers"
+        :id="server.id"
+        :key="server.id"
+        :server_name="server.server_name"
+        :server_created="server.server_created"
+        :server_plan="server.server_plan"
+        :server_status="server.server_status"
+        :players_online="server.players_online"
+        :max_players_online="server.max_players_online"
+        :world_name="server.world_name"
+        :ip="server.ip"
+      />
+    </div>
+  </template>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { ButtonStyled, RaisedBadge } from '@modrinth/ui'
+import { ref } from 'vue'
+import { ButtonStyled } from '@modrinth/ui'
 import ServerCard from '../components/management/ServerCard.vue'
-import { PlusIcon, ServerIcon } from '@modrinth/assets'
+import { PlusIcon, ServerIcon, ServersManageIllustration } from '@modrinth/assets'
+
+const sharedServers = ref([
+  {
+    id: 'server-1',
+    server_name: 'Rinth SMP',
+    server_created: new Date('2023-10-01T12:00:00Z'),
+    server_plan: 'Large',
+    server_status: 'online',
+    players_online: 5,
+    max_players_online: 20,
+    world_name: 'Example World',
+    ip: 'valiant-apple.modrinth.gg',
+  },
+])
+
+// const sharedServers = ref([])
+// const servers = ref([])
 
 const servers = ref([
   {
@@ -95,27 +111,20 @@ const servers = ref([
     world_name: 'Example World',
     ip: 'valiant-apple.modrinth.gg',
   },
-  {
-    id: 'server-1',
-    server_name: 'Rinth SMP',
-    server_created: new Date('2023-10-01T12:00:00Z'),
-    server_plan: 'Large',
-    server_status: 'online',
-    players_online: 5,
-    max_players_online: 20,
-    world_name: 'Example World',
-    ip: 'valiant-apple.modrinth.gg',
-  },
-  {
-    id: 'server-1',
-    server_name: 'Rinth SMP',
-    server_created: new Date('2023-10-01T12:00:00Z'),
-    server_plan: 'Large',
-    server_status: 'online',
-    players_online: 5,
-    max_players_online: 20,
-    world_name: 'Example World',
-    ip: 'valiant-apple.modrinth.gg',
-  },
 ])
 </script>
+
+<style scoped lang="scss">
+.servers-manage-illustration {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  width: 500px;
+  height: 500px;
+  opacity: 0.05;
+  mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+}
+</style>