diff --git a/src/App.vue b/src/App.vue
index d4ee28e..2c216ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,13 @@
+<script setup>
+import { inject } from "vue";
+
+const GStore = inject("GStore");
+</script>
 <template>
   <div id="app">
+    <div id="flashMessage" v-if="GStore?.flashMessage">
+      {{ GStore.flashMessage }}
+    </div>
     <div id="nav">
       <router-link :to="{ name: 'EventList' }">Events</router-link> |
       <router-link :to="{ name: 'About' }">About</router-link>
@@ -9,28 +17,28 @@
 </template>
 
 <style>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-  #nav {
-    padding: 30px;
-  }
+#nav {
+  padding: 30px;
+}
 
-  #nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
 
-  #nav a.router-link-exact-active {
-    color: #42b983;
-  }
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
 
-  h4 {
-    font-size: 20px;
-  }
+h4 {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
index 6147543..60137d4 100644
--- a/src/components/EventCard.vue
+++ b/src/components/EventCard.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { defineProps } from "vue";
+
 defineProps({
   event: {
     type: Object,
@@ -13,6 +15,7 @@ defineProps({
     :to="{ name: 'EventDetails', params: { id: event.id } }"
   >
     <div class="event-card">
+      <h2>{{ event.title }}</h2>
       <h2>{{ event.title }}</h2>
       <span>@{{ event.time }} on {{ event.date }}</span>
     </div>
@@ -27,12 +30,27 @@ defineProps({
   border: 1px solid #39495c;
   margin-bottom: 18px;
 }
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
 
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
 .event-card:hover {
   transform: scale(1.01);
   box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
 }
 
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
 .event-link {
   color: #2c3e50;
   text-decoration: none;
diff --git a/src/main.js b/src/main.js
index 9c06e03..73b281e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
-import { createApp } from "vue";
+import { createApp, reactive } from "vue";
 import App from "./App.vue";
 import router from "./router";
+const GStore = reactive({ flashMessage: "" });
 
 const app = createApp(App);
 
-app.use(router);
+app.use(router).provide("GStore", GStore);
 
 app.mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
index c78d41a..f49d524 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,25 +1,74 @@
 import { createRouter, createWebHistory } from "vue-router";
 import EventList from "@/views/EventList.vue";
-import EventDetails from "@/views/EventDetails.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
 import About from "@/views/About.vue";
+import NotFound from "@/views/NotFound.vue";
+import NetworkError from "@/views/NetworkError.vue";
 
 const routes = [
   {
     path: "/",
     name: "EventList",
     component: EventList,
+    props: (route) => ({ page: parseInt(route.query.page) || 1 }),
   },
   {
-    path: "/event/:id",
-    name: "EventDetails",
+    path: "/events/:id",
+    name: "EventLayout",
     props: true,
-    component: EventDetails,
+    component: EventLayout,
+    children: [
+      {
+        path: "",
+        name: "EventDetails",
+        component: EventDetails,
+      },
+      {
+        path: "register",
+        name: "EventRegister",
+        component: EventRegister,
+      },
+      {
+        path: "edit",
+        name: "EventEdit",
+        component: EventEdit,
+      },
+    ],
+  },
+  {
+    path: "/event/:afterEvent(.*)",
+    redirect: (to) => {
+      return { path: "/events/" + to.params.afterEvent };
+    },
   },
   {
     path: "/about",
     name: "About",
     component: About,
   },
+  {
+    path: "/:catchAll(.*)",
+    name: "NotFound",
+    component: NotFound,
+  },
+  {
+    path: "/404/:resource",
+    name: "404Resource",
+    component: NotFound,
+    props: true,
+  },
+  {
+    path: "/network-error",
+    name: "NetworkError",
+    component: NetworkError,
+  },
 ];
 
 const router = createRouter({
diff --git a/src/services/EventService.js b/src/services/EventService.js
index d4621b8..f84dc90 100644
--- a/src/services/EventService.js
+++ b/src/services/EventService.js
@@ -1,19 +1,19 @@
-import axios from 'axios'
+import axios from "axios";
 
 const apiClient = axios.create({
-  baseURL: 'https://my-json-server.typicode.com/Code-Pop/Touring-Vue-Router',
+  baseURL: "https://my-json-server.typicode.com/Code-Pop/Touring-Vue-Router",
   withCredentials: false,
   headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json'
-  }
-})
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  },
+});
 
 export default {
-  getEvents() {
-    return apiClient.get('/events')
+  getEvents(perPage, page) {
+    return apiClient.get("/events?_limit=" + perPage + "&_page=" + page);
   },
   getEvent(id) {
-    return apiClient.get('/events/' + id)
-  }
-}
+    return apiClient.get("/events/" + id);
+  },
+};
diff --git a/src/views/EventDetails.vue b/src/views/EventDetails.vue
index 38dbf88..d460e7d 100644
--- a/src/views/EventDetails.vue
+++ b/src/views/EventDetails.vue
@@ -24,3 +24,4 @@ onMounted(() => {
     <p>{{ event.description }}</p>
   </div>
 </template>
+
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index d8471e2..3f1fdd7 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,25 +1,69 @@
 <script setup>
-  import EventCard from "@/components/EventCard.vue";
-  import EventService from "@/services/EventService.js";
-  import { onMounted, ref } from "vue";
+import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
+import EventCard from "@/components/EventCard.vue";
+import EventService from "@/services/EventService.js";
+import { useRouter } from "vue-router";
 
-  const events = ref("");
+const props = defineProps(["page"]);
 
-  onMounted(() => {
-    EventService.getEvents()
+const router = useRouter();
+
+const events = ref(null);
+const totalEvents = ref(0);
+const events = ref(null);
+const totalEvents = ref(0);
+
+const page = computed(() => props.page);
+const page = computed(() => props.page);
+
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
+
+onMounted(() => {
+  watchEffect(() => {
+    events.value = null;
+    EventService.getEvents(2, page.value)
       .then((response) => {
         events.value = response.data;
+        totalEvents.value = response.headers["x-total-count"];
       })
-      .catch((error) => {
-        console.log(error);
+      .catch(() => {
+        router.push({ name: "NetworkError" });
       });
   });
+});
 </script>
 
 <template>
+  <div>
   <h1>Events for Good</h1>
   <div class="events">
     <EventCard v-for="event in events" :key="event.id" :event="event" />
+
+    <div class="pagination">
+      <router-link
+        id="page-prev"
+        :to="{ name: 'EventList', query: { page: page - 1 } }"
+        rel="prev"
+        v-if="page != 1"
+        >&#60; Previous</router-link
+      >
+
+      <router-link
+        id="page-next"
+        :to="{ name: 'EventList', query: { page: page + 1 } }"
+        rel="next"
+        v-if="hasNextPage"
+        >Next &#62;</router-link
+      >
+    </div>
+    </div>
   </div>
 </template>
 
@@ -29,4 +73,41 @@
   flex-direction: column;
   align-items: center;
 }
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
+
+#page-prev {
+  text-align: left;
+}
+#page-prev {
+  text-align: left;
+}
+
+#page-next {
+  text-align: right;
+}
+#page-next {
+  text-align: right;
+}
 </style>
diff --git a/src/views/NetworkError.vue b/src/views/NetworkError.vue
new file mode 100644
index 0000000..4de255f
--- /dev/null
+++ b/src/views/NetworkError.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="networkError">
+    <h1>Uh-Oh!</h1>
+
+    <h3>
+      It looks like you're experiencing some network issues, please take a
+      breath and <a href="#" @click="$router.go(-1)">click here</a> to try
+      again.
+    </h3>
+  </div>
+</template>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..ec1edb6
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  resource: {
+    type: String,
+    required: true,
+    default: "page",
+  },
+});
+</script>
+<template>
+  <h1>Oops!</h1>
+  <h3>The {{ resource }} you're looking for is not here.</h3>
+  <router-link :to="{ name: 'EventList' }">Back to the home page</router-link>
+</template>
diff --git a/src/views/event/Details.vue b/src/views/event/Details.vue
new file mode 100644
index 0000000..fa12e88
--- /dev/null
+++ b/src/views/event/Details.vue
@@ -0,0 +1,12 @@
+<script setup>
+import { defineProps } from "vue";
+
+defineProps(["event"]);
+</script>
+
+<template>
+   <div>
+  <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
+   <p>{{ event.description }}</p>
+</div>
+</template>
diff --git a/src/views/event/Edit.vue b/src/views/event/Edit.vue
new file mode 100644
index 0000000..ca77bbc
--- /dev/null
+++ b/src/views/event/Edit.vue
@@ -0,0 +1,8 @@
+<script setup>
+import { defineProps } from "vue";
+  
+defineProps(["event"]);
+</script>
+<template>
+  <p>Edit the event here</p>
+</template>
diff --git a/src/views/event/Layout.vue b/src/views/event/Layout.vue
new file mode 100644
index 0000000..2d0d07b
--- /dev/null
+++ b/src/views/event/Layout.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { onMounted, ref, defineProps, computed } from "vue";
+import EventService from "@/services/EventService.js";
+
+const props = defineProps(["id"]);
+
+const id = computed(() => props.id);
+
+const event = ref(null);
+onMounted(() => {
+  EventService.getEvent(id.value)
+    .then((response) => {
+      event.value = response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+});
+</script>
+
+<template>
+  <div v-if="event">
+    <h1>{{ event.title }}</h1>
+    <div id="nav">
+      <router-link :to="{ name: 'EventDetails' }">Details</router-link>
+      |
+      <router-link :to="{ name: 'EventRegister' }">Register</router-link>
+      |
+      <router-link :to="{ name: 'EventEdit' }">Edit</router-link>
+    </div>
+    <router-view :event="event" />
+  </div>
+</template>
diff --git a/src/views/event/Register.vue b/src/views/event/Register.vue
new file mode 100644
index 0000000..f52a910
--- /dev/null
+++ b/src/views/event/Register.vue
@@ -0,0 +1,21 @@
+<script setup>
+  import { useRouter } from "vue-router";
+  import { defineProps } from "vue";
+
+  defineProps(["event"]);
+  const router = useRouter();
+
+  const register = () => {
+    // Call to API
+    // If registered then redirect to event details
+    router.push({
+      name: "EventDetails",
+    });
+  };
+</script>
+<template>
+  <div>
+  <p>Register for the event here</p>
+  <button @click="register">Register Me</button>
+  </div>
+</template>