diff --git a/README.md b/README.md
index b467512..e9497bb 100644
--- a/README.md
+++ b/README.md
@@ -13,11 +13,17 @@ The frontend tries to retrieve a configuration file named `config.json` from the
 | Parameter                | Description                                                                                                                                                                                                                                                              | Default                 |
 |:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------|
 | `title`                  | Title of the page. Both in the tab and next to the logo.                                                                                                                                                                                                                 | `Infrastructure Status` |
-| `gatusBaseUrl`           | Alternative base URL (without trailing slash) of the Gatus instance, if the API is not available relative to the frontend.                                                                                                                                               | `none`                    |
+| `gatusBaseUrl`           | Alternative base URL (without trailing slash) of the Gatus instance, if the API is not available relative to the frontend.                                                                                                                                               | `none`                  |
 | `hiddenGroups`           | Array containing names of groups that should be hidden. These groups are still visible in the API response!                                                                                                                                                              | `[]`                    |
 | `hiddenEndpoints`        | Array containing names of endpoints that should be hidden. These endpoints are still visible in the API response!                                                                                                                                                        | `[]`                    |
 | `groupOrder`             | Array containing names of groups. The groups are sorted in the frontend according to the order in the array (different from alphabetical sorting by default). If groups are not included in the array, they will be added alphabetically sorted below the sorted groups. | `[]`                    |
 | `defaultRefreshInterval` | Interval in seconds after which the API data is refreshed in the background by default. Can be changed by the user by selecting a value in the lower left corner of the page. Possible values: `10`, `30`, `60`, `120`, `300`, `600`                                     | `60`                    |
+| `notice`                 | Optional configuration for a notice on the page. It can be used to provide information about a current problem, for example.                                                                                                                                             | `{}`                    |
+| `notice.type`            | Type of the notice. This determines the background color of the card. Possible values: `info`, `primary`, `warning`, `danger`, `""` (empty / white)                                                                                                                      | `""`                    |
+| `notice.title`           | Title of the notice card.                                                                                                                                                                                                                                                | `""`                    |
+| `notice.content`         | Content text of the notice card.                                                                                                                                                                                                                                         | `""`                    |
+| `notice.createdAt`       | Date and time the notice was created at. For example, use the format `yyyy-MM-dd hh:mm`                                                                                                                                                                                  | `""`                    |
+| `notice.updatedAt`       | Date and time the notice was last updated at. For example, use the format `yyyy-MM-dd hh:mm`                                                                                                                                                                             | `""`                    |
 
 ## Deployment
 
diff --git a/package.json b/package.json
index 9f852b7..736c497 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fancy-gatus",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/App.vue b/src/App.vue
index ffac8ad..9a5fc8d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@
     </div>
     <div v-if="!$data.loading" class="flex flex-column jc-center content-wrapper">
       <Header :title="this.config.title" />
+      <Notice class="mtop-2" v-if="this.config.notice" :notice="this.config.notice" />
       <OverallStatus class="mtop-2" :failedEndpoints="failedEndpoints" />
       <EndpointGroup class="mtop-2" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
     </div>
@@ -18,6 +19,7 @@
 <script>
 import Loader from '@/components/Loader.vue';
 import Header from '@/components/Header.vue';
+import Notice from '@/components/Notice.vue';
 import OverallStatus from '@/components/OverallStatus.vue';
 import EndpointGroup from '@/components/EndpointGroup.vue';
 import RefreshSettings from '@/components/RefreshSettings.vue';
@@ -30,6 +32,7 @@ export default {
   components: {
     Loader,
     Header,
+    Notice,
     OverallStatus,
     EndpointGroup,
     RefreshSettings,
@@ -150,7 +153,20 @@ export default {
   margin-top: 1rem;
   margin-bottom: 3rem;
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1200px) {
+  .content-wrapper {
+    width: 80%;
+  }
+}
+@media screen and (max-width: 820px) {
+  .content-wrapper {
+    width: 90%;
+  }
+  .refresh-settings {
+    display: none;
+  }
+}
+@media screen and (max-width: 767px) {
   .main {
     padding-left: 15px;
     padding-right: 15px;
@@ -158,9 +174,6 @@ export default {
   .content-wrapper {
     width: 100%;
   }
-  .refresh-settings {
-    display: none;
-  }
 }
 </style>
 
diff --git a/src/components/Notice.vue b/src/components/Notice.vue
new file mode 100644
index 0000000..e0cf008
--- /dev/null
+++ b/src/components/Notice.vue
@@ -0,0 +1,57 @@
+<template>
+    <div :class="{
+        notice: true, 'shadow-box': true,
+        primary: this.notice.type === 'primary',
+        warning: this.notice.type === 'warning',
+        danger: this.notice.type === 'danger',
+        info: this.notice.type === 'info'
+    }">
+        <h4>{{ this.notice.title }}</h4>
+        <p>{{ this.notice.content }}</p>
+        <div class="flex flex-column time">
+            Created at: {{ this.notice.createdAt }}
+            <br>
+            <span v-if="this.notice.updatedAt">Last updated: {{ this.notice.updatedAt }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Notice',
+    props: {
+        notice: {
+            type: Object,
+            required: true
+        }
+    },
+}
+</script>
+
+<style scoped>
+.notice {
+    padding: 1.35rem;
+}
+.notice > h4 {
+    margin: 0;
+    font-size: calc(1rem + 0.3vw);
+}
+.time {
+    font-size: calc(0.7rem + 0.1vw);
+}
+.time > span {
+    margin-top: 0.2rem;
+}
+.primary {
+    background-color: #5cdd8b;
+}
+.warning {
+    background-color: #ffc107;
+}
+.danger {
+    background-color: #ff5252;
+}
+.info {
+    background-color: #5ae4ff;
+}
+</style>
\ No newline at end of file