diff --git a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
index de300ee9e..43d92435f 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
@@ -4,7 +4,9 @@
import { app } from '$lib/stores/app';
import { Heading } from '$lib/components';
import EmptyLight from './empty-sites-light.svg';
+ import EmptyLightMobile from './empty-sites-light-mobile.svg';
import EmptyDark from './empty-sites-dark.svg';
+ import EmptyDarkMobile from './empty-sites-dark-mobile.svg';
import { isOnWaitlistSites, joinWaitlistSites } from '$lib/helpers/waitlist';
import { addNotification } from '$lib/stores/notifications';
@@ -16,9 +18,26 @@
{#if $app.themeInUse === 'dark'}
-

+

+

{:else}
-

+

+

{/if}
@@ -65,4 +84,20 @@
article {
margin-top: -100px;
}
+
+ .mobile {
+ display: block;
+
+ @media (min-width: 768px) {
+ display: none;
+ }
+ }
+
+ .desktop {
+ display: none;
+
+ @media (min-width: 768px) {
+ display: block;
+ }
+ }
diff --git a/src/routes/(console)/project-[region]-[project]/sites/empty-sites-dark-mobile.svg b/src/routes/(console)/project-[region]-[project]/sites/empty-sites-dark-mobile.svg
new file mode 100644
index 000000000..39c7917cf
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/empty-sites-dark-mobile.svg
@@ -0,0 +1,119 @@
+
diff --git a/src/routes/(console)/project-[region]-[project]/sites/empty-sites-light-mobile.svg b/src/routes/(console)/project-[region]-[project]/sites/empty-sites-light-mobile.svg
new file mode 100644
index 000000000..8bd4b239e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/sites/empty-sites-light-mobile.svg
@@ -0,0 +1,157 @@
+