diff --git a/frontend/src/App.css b/frontend/src/App.css
index dd9cce1..61c1448 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -5,6 +5,7 @@
     --header-height: 70px;
     --default-color: #333333;
     --primary-color: #6200ea;
+    --error-color: red;
 }
 
 body {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 789e5c3..f9304b9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import RestaurantsPage from "./pages/RestaurantsPage.tsx";
+import RestaurantsPage from "./pages/RestaurantsPage/RestaurantsPage.tsx";
 import RestaurantDetailsPage from "./pages/RestaurantDetailsPage.tsx";
 import {Route, Routes} from "react-router-dom";
 import AddRestaurantsPage from "./pages/AddRestaurantsPage.tsx";
diff --git a/frontend/src/components/CreateDataInvitation/CreateDataInvitation.styled.ts b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.styled.ts
new file mode 100644
index 0000000..188a045
--- /dev/null
+++ b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.styled.ts
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const StyledParagraph = styled.p`
+    margin-bottom: 1rem;
+`;
\ No newline at end of file
diff --git a/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx
new file mode 100644
index 0000000..123f209
--- /dev/null
+++ b/frontend/src/components/CreateDataInvitation/CreateDataInvitation.tsx
@@ -0,0 +1,11 @@
+import Button from "../Button/Button.tsx";
+import {StyledParagraph} from "./CreateDataInvitation.styled.ts";
+
+export default function CreateDataInvitation() {
+    return (
+        <>
+            <StyledParagraph>Create your first restaurant! All your restaurants will be displayed here.</StyledParagraph>
+            <Button href="/restaurants/add">Add restaurant</Button>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/pages/RestaurantsPage.tsx b/frontend/src/pages/RestaurantsPage.tsx
deleted file mode 100644
index e952cfd..0000000
--- a/frontend/src/pages/RestaurantsPage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import RestaurantCardList from "../components/RestaurantCardList/RestaurantCardList.tsx";
-import DefaultPageTemplate from "./templates/DefaultPageTemplate/DefaultPageTemplate.tsx";
-import axios from "axios";
-import {useEffect, useState} from "react";
-import {RestaurantType} from "../model/Restaurant.ts";
-
-
-export default function RestaurantsPage() {
-    const [restaurants, setRestaurants] = useState<RestaurantType[]>([]);
-
-    useEffect(() => {
-        axios.get("/api/restaurants")
-            .then((response) => setRestaurants(response.data))
-            .catch((error => {
-                console.error(error.message);
-            }))
-
-    }, []);
-
-    return (
-        <DefaultPageTemplate pageTitle="Restaurants">
-            <RestaurantCardList restaurants={restaurants}/>
-        </DefaultPageTemplate>
-    )
-}
\ No newline at end of file
diff --git a/frontend/src/pages/RestaurantsPage/RestaurantsPage.styled.ts b/frontend/src/pages/RestaurantsPage/RestaurantsPage.styled.ts
new file mode 100644
index 0000000..c46fe73
--- /dev/null
+++ b/frontend/src/pages/RestaurantsPage/RestaurantsPage.styled.ts
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const StyledErrorParagraph = styled.p`
+    font-size: .8rem;
+    color: var(--error-color);
+    margin-top: 1rem;
+`;
\ No newline at end of file
diff --git a/frontend/src/pages/RestaurantsPage/RestaurantsPage.tsx b/frontend/src/pages/RestaurantsPage/RestaurantsPage.tsx
new file mode 100644
index 0000000..ec73c8c
--- /dev/null
+++ b/frontend/src/pages/RestaurantsPage/RestaurantsPage.tsx
@@ -0,0 +1,41 @@
+import RestaurantCardList from "../../components/RestaurantCardList/RestaurantCardList.tsx";
+import DefaultPageTemplate from "../templates/DefaultPageTemplate/DefaultPageTemplate.tsx";
+import axios, {AxiosError} from "axios";
+import {useEffect, useState} from "react";
+import {RestaurantType} from "../../model/Restaurant.ts";
+import CreateDataInvitation from "../../components/CreateDataInvitation/CreateDataInvitation.tsx";
+import {StyledErrorParagraph} from "./RestaurantsPage.styled.ts";
+
+
+export default function RestaurantsPage() {
+    const [restaurants, setRestaurants] = useState<RestaurantType[]>([]);
+    const [error, setError] = useState<AxiosError>();
+
+    useEffect(() => {
+        axios.get("/api/restaurants")
+            .then((response) => setRestaurants(response.data))
+            .catch((error => {
+                setError(error)
+                console.error(error.message);
+            }))
+
+    }, []);
+
+    if (error) {
+        return (
+            <DefaultPageTemplate pageTitle="Restaurants">
+                <p>Sorry, we encountered an error loading the restaurants. Please try again later.</p>
+                <StyledErrorParagraph>{error.message}</StyledErrorParagraph>
+            </DefaultPageTemplate>
+        )
+    }
+
+    return (
+        <DefaultPageTemplate pageTitle="Restaurants">
+            {restaurants.length === 0 ?
+                <CreateDataInvitation/> :
+                <RestaurantCardList restaurants={restaurants}/>
+            }
+        </DefaultPageTemplate>
+    )
+}
\ No newline at end of file