diff --git a/src/app/app.component.html b/src/app/app.component.html
index 97faf63..2259c81 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -145,6 +145,7 @@
   </div>
 </nav>
 <main>
+  <st-alerts></st-alerts>
   <router-outlet></router-outlet>
   <st-cookie-acceptance></st-cookie-acceptance>
 </main>
@@ -173,6 +174,7 @@ <h1>Network</h1>
       <div>
         <h1>Useful Links</h1>
         <ul>
+          <li><a routerLink="/changed">What's Changed?</a></li>
           <li><a routerLink="/cookies">Cookie Policy</a></li>
           <li><a routerLink="/privacy">Privacy Policy</a></li>
           <li><a routerLink="/settings">Settings</a></li>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index dbbf829..b0fcb7f 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,6 +4,7 @@ nav {
   box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .1);
   padding: 0 2rem;
   position: relative;
+  z-index: 999;
 
   input {
     display: none;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 870120b..baf2b04 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -33,11 +33,12 @@ import { SiteWideSearchComponent } from './shared/components/site-wide-search/si
 import { environment } from '../environments/environment';
 import { PopupService } from './shared/components/popup/popup.service';
 import { SearchComponent } from './shared/components/search/search.component';
-import { StateService } from './shared/services/state.service';
 import { map, Subscription } from 'rxjs';
 import { CookieAcceptanceComponent } from './pages/cookies/shared/cookie-acceptance-popup/cookie-acceptance.component';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { PlatformService } from './shared/services/platform.service';
+import { SafeStorageService } from './shared/services/safe-storage.service';
+import { AlertsComponent } from './shared/components/site-wide-alert/alerts.component';
 
 @Component({
   selector: 'app-root',
@@ -50,7 +51,8 @@ import { PlatformService } from './shared/services/platform.service';
     NgOptimizedImage,
     SearchComponent,
     CookieAcceptanceComponent,
-    NgClass
+    NgClass,
+    AlertsComponent
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
@@ -84,24 +86,29 @@ export class AppComponent implements OnDestroy {
   protected enableDarkModeSwitch: WritableSignal<boolean> = signal(false);
 
   /**
-   * State service subscription.
+   * Subscription used for storage changes.
    * @protected
    */
-  protected state$: Subscription | undefined;
+  protected storageSubscription: Subscription | undefined;
 
   /**
    * Constructor.
+   * @param document
+   * @param renderer
+   * @param popupService
+   * @param safeStorageService
+   * @param platformService
    */
   constructor(
     @Inject(DOCUMENT) protected document: Document,
     protected renderer: Renderer2,
     protected popupService: PopupService,
-    protected stateService: StateService,
+    protected safeStorageService: SafeStorageService,
     protected platformService: PlatformService,
   ) {
     if (this.platformService.isClient()) {
-      this.darkModeEnabled = toSignal(this.stateService.getObservable().pipe(
-        map((state) => state.darkModeEnabled),
+      this.darkModeEnabled = toSignal(this.safeStorageService.observe().pipe(
+        map((state) => state['st-dark-mode-enabled']),
       ), { initialValue: false });
 
       effect(() => {
@@ -112,10 +119,10 @@ export class AppComponent implements OnDestroy {
         }
       });
 
-      this.state$ = this.stateService.getObservable().subscribe((state) => {
+      this.storageSubscription = this.safeStorageService.observe().subscribe((state) => {
         const fathomTrackers = this.document.documentElement.getElementsByClassName('fathom-tracking-script');
 
-        if (state.enableTracking && fathomTrackers.length === 0) {
+        if (state['st-enable-tracking'] && fathomTrackers.length === 0) {
           // Add fathom Analytics
           const fathom = document.createElement('script');
           fathom.setAttribute('class', 'fathom-tracking-script');
@@ -126,16 +133,16 @@ export class AppComponent implements OnDestroy {
 
           // Add to dom
           this.document.head.appendChild(fathom);
-        } else if (!state.enableTracking && fathomTrackers.length > 0) {
+        } else if (!state['st-enable-tracking'] && fathomTrackers.length > 0) {
           fathomTrackers[0].remove();
         }
 
-        this.enableDarkModeSwitch.set(state.cookiesAccepted ? state.cookiesAccepted : false);
+        this.enableDarkModeSwitch.set(this.safeStorageService.allowed());
       });
     }
 
-    this.darkModeEnabled = toSignal(this.stateService.getObservable().pipe(
-      map((state) => state.darkModeEnabled)
+    this.darkModeEnabled = toSignal(this.safeStorageService.observe().pipe(
+      map((state) => state['st-dark-mode-enabled'])
     ), { initialValue: false });
 
     effect(() => {
@@ -151,7 +158,7 @@ export class AppComponent implements OnDestroy {
    * @inheritDoc
    */
   ngOnDestroy() {
-    this.state$?.unsubscribe();
+    this.storageSubscription?.unsubscribe();
   }
 
   /**
@@ -163,7 +170,7 @@ export class AppComponent implements OnDestroy {
       return ;
     }
 
-    this.stateService.setDarkMode(!this.darkModeEnabled());
+    this.safeStorageService.save('st-dark-mode-enabled', !this.darkModeEnabled());
   }
 
   /**
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 30f3228..c8869e6 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -32,6 +32,7 @@ import { TitleCasePipe } from '@angular/common';
 import { httpCacheInterceptor } from './http-cache.interceptor';
 import { appLegacyRoutes } from './app.legacy-routes';
 import { provideMarkdown } from 'ngx-markdown';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 const scrollConfig: InMemoryScrollingOptions = {
   scrollPositionRestoration: 'top',
@@ -88,5 +89,6 @@ export const appConfig: ApplicationConfig = {
     ),
     TitleCasePipe,
     provideMarkdown(),
+    provideAnimations()
   ]
 };
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index f5c2a8d..2f7b16c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -36,6 +36,7 @@ import { CookiesComponent } from './pages/cookies/cookies.component';
 import { PrivacyComponent } from './pages/privacy/privacy.component';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { Error404Component } from './pages/404/error-404.component';
+import { ChangedComponent } from './pages/changed/changed.component';
 
 export const routes: Routes = [
   {
@@ -47,6 +48,10 @@ export const routes: Routes = [
     path: 'playground',
     component: PlaygroundComponent
   },
+  {
+    path: 'changed',
+    component: ChangedComponent
+  },
   {
     path: 'getting-started',
     component: GettingStartedComponent
diff --git a/src/app/pages/changed/change-start-date-popup/change-start-date.component.html b/src/app/pages/changed/change-start-date-popup/change-start-date.component.html
new file mode 100644
index 0000000..2225e6f
--- /dev/null
+++ b/src/app/pages/changed/change-start-date-popup/change-start-date.component.html
@@ -0,0 +1,30 @@
+<header>
+  <div>
+    <span class="material-symbols-outlined popup-icon">event</span>
+    <h1>Set Start Date</h1>
+
+    @if (noLastVisit()) {
+      <h2>You've not been here before.</h2>
+    }
+
+    <h2>Please set a start date that we can use to determine what has changed.</h2>
+  </div>
+</header>
+
+<main>
+  <article>
+    <div>
+      <input type="date"
+             value="{{ startDate() | date: 'yyyy-MM-dd' }}"
+             (change)="onDateChanged($event)" />
+    </div>
+    @if (errorMessage(); as message) {
+      <div class="error" [innerHTML]="message"></div>
+    }
+  </article>
+  <footer>
+    <a class="button centered cancel" (click)="onClose()">
+      <span class="material-symbols-outlined">close</span> Close
+    </a>
+  </footer>
+</main>
diff --git a/src/app/pages/changed/change-start-date-popup/change-start-date.component.scss b/src/app/pages/changed/change-start-date-popup/change-start-date.component.scss
new file mode 100644
index 0000000..7b21e42
--- /dev/null
+++ b/src/app/pages/changed/change-start-date-popup/change-start-date.component.scss
@@ -0,0 +1,37 @@
+:host {
+  @media screen and (min-width: 800px) {
+    width: 100vw !important;
+  }
+
+  header {
+    h2 {
+      font-weight: normal;
+      opacity: .7;
+    }
+
+    div {
+      text-align: center;
+    }
+  }
+
+  input {
+    display: block;
+    width: 100%;
+    padding: 1.5rem;
+    border: var(--border-default);
+    border-radius: var(--border-radius);
+    background-color: transparent;
+    color: var(--text-color);
+    font-family: inherit;
+    font-size: 1.2rem;
+  }
+
+  .error {
+    background-color: #ffd2d2;
+    padding: 2rem;
+    text-align: center;
+    color: red;
+    margin-top: 1rem;
+    border-radius: var(--border-radius);
+  }
+}
\ No newline at end of file
diff --git a/src/app/pages/changed/change-start-date-popup/change-start-date.component.ts b/src/app/pages/changed/change-start-date-popup/change-start-date.component.ts
new file mode 100644
index 0000000..20b6da6
--- /dev/null
+++ b/src/app/pages/changed/change-start-date-popup/change-start-date.component.ts
@@ -0,0 +1,106 @@
+/*---------------------------------------------------------------------------------------------
+ *
+ *  Copyright (C) Codeplay Software Ltd.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *--------------------------------------------------------------------------------------------*/
+
+import { ChangeDetectionStrategy, Component, Inject, signal, Signal, WritableSignal } from '@angular/core';
+import { DatePipe, NgOptimizedImage } from '@angular/common';
+import { PopupReference } from '../../../shared/components/popup/popup.service';
+
+@Component({
+  selector: 'st-change-start-date',
+  standalone: true,
+  templateUrl: './change-start-date.component.html',
+  imports: [
+    NgOptimizedImage,
+    DatePipe
+  ],
+  styleUrls: [
+    '../../../shared/components/popup/layouts/large-top-header.scss',
+    './change-start-date.component.scss'
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChangeStartDateComponent {
+  protected readonly noLastVisit: Signal<boolean>;
+  protected readonly errorMessage: WritableSignal<string> = signal('');
+  protected readonly startDate: Signal<Date>;
+
+  /**
+   * Constructor.
+   * @param popupReference
+   */
+  constructor(
+    @Inject('POPUP_DATA') protected popupReference: PopupReference,
+  ) {
+    if (this.popupReference.data) {
+      this.noLastVisit = signal(false);
+      this.startDate = signal(new Date(this.popupReference.data));
+    } else {
+      this.noLastVisit = signal(true);
+
+      const dateDateTime = new Date();
+      dateDateTime.setMonth(dateDateTime.getMonth() - 5);
+      dateDateTime.setDate(1);
+
+      // Set a default date, just in case we can't load one successfully
+      this.startDate = signal(dateDateTime);
+    }
+  }
+
+  /**
+   * Called when the date selector changes.
+   * @param event
+   */
+  onDateChanged(event: any) {
+    const selectedDate: any = new Date(event.target.value);
+    const currentDate = new Date();
+
+    if (isNaN(selectedDate)) {
+      this.errorMessage.set('Please ensure that the date is in a correct format.');
+      return;
+    }
+
+    if (ChangeStartDateComponent.monthDifference(selectedDate, currentDate) > 6) {
+      this.errorMessage.set('You cannot pick a date that is more than six months from the current date.');
+      return;
+    }
+
+    if (selectedDate > currentDate) {
+      this.errorMessage.set('You cannot set a date that is in the future, please choose an earlier date.');
+      return;
+    }
+
+    this.popupReference.close(selectedDate);
+  }
+
+  /**
+   * Called when the user clicks on the cancel button.
+   */
+  onClose() {
+    this.popupReference.close(this.startDate());
+  }
+
+  /**
+   * Calculate the month difference between two dates.
+   * @param dateFrom
+   * @param dateTo
+   */
+  public static monthDifference(dateFrom: Date, dateTo: Date): number {
+    return dateTo.getMonth() - dateFrom.getMonth() +
+      (12 * (dateTo.getFullYear() - dateFrom.getFullYear()))
+  }
+}
diff --git a/src/app/pages/changed/changed.component.html b/src/app/pages/changed/changed.component.html
new file mode 100644
index 0000000..7fd89af
--- /dev/null
+++ b/src/app/pages/changed/changed.component.html
@@ -0,0 +1,159 @@
+<section id="intro">
+  <div class="wrapper panel fancy intro">
+    <div>
+      <header>
+        <h1>What's Changed?</h1>
+        <h2>Quickly see what content has been added since your last visit.</h2>
+
+        <!-- Allow users to change the date range -->
+        <div class="date-range">
+          <div class="date selectable" (click)="onDateSelectorClicked()">
+            <h2>My Last Visit</h2>
+            <h3>{{ startDate() | date: 'mediumDate' }}</h3>
+          </div>
+          <div class="sep">
+            <span class="material-symbols-outlined panel-icon">arrow_circle_right</span>
+          </div>
+          <div class="date">
+            <h2>Today</h2>
+            <h3>{{ currentDate() | date: 'mediumDate' }}</h3>
+          </div>
+        </div>
+
+        <!-- Quick links for quick jumping to sections -->
+        <st-quick-links [links]="this.quickLinks()"></st-quick-links>
+      </header>
+    </div>
+    <div>
+      <span class="material-symbols-outlined panel-icon">update</span>
+    </div>
+  </div>
+</section>
+
+@if (newsLoadingState() != LoadingState.NOT_STARTED) {
+  <!-- Section: News -->
+  <section id="news">
+    <div class="wrapper panel content">
+      @if (newsLoadingState() == LoadingState.LOAD_SUCCESS) {
+        <header>
+          <div>
+            <div>
+              <h1>News &amp; Updates</h1>
+              <h2>We have had {{ updatedNews().length }} new additions since
+                {{ startDate() | date: 'mediumDate' }}</h2>
+            </div>
+          </div>
+          <div>
+            @if (updatedNews().length > 0) {
+              <a class="button" routerLink="./news">
+                <span class="material-symbols-outlined">newspaper</span>View All</a>
+            }
+          </div>
+        </header>
+        <div class="list">
+          @for (item of updatedNews(); track item.id) {
+            <st-news-widget [news]="item" [layout]="NewsWidgetLayout.ROW"></st-news-widget>
+          }
+        </div>
+      } @else if(newsLoadingState() == LoadingState.LOADING) {
+        <st-loading></st-loading>
+      }
+    </div>
+  </section>
+}
+
+@if (projectsLoadingState() != LoadingState.NOT_STARTED) {
+  <!-- Section: Projects -->
+  <section id="projects">
+    <div class="wrapper panel content">
+      @if (projectsLoadingState() == LoadingState.LOAD_SUCCESS) {
+        <header>
+          <div>
+            <div>
+              <h1>Projects</h1>
+              <h2>We have had {{ updatedProjects().length }} new additions since
+                {{ startDate() | date: 'mediumDate' }}</h2>
+            </div>
+          </div>
+          <div>
+            @if (updatedProjects().length > 0) {
+              <a class="button" routerLink="../ecosystem/projects">
+                <span class="material-symbols-outlined">genetics</span>View All</a>
+            }
+          </div>
+        </header>
+        <div class="list">
+          @for (item of updatedProjects(); track item.id) {
+            <st-project-widget [project]="item" [layout]="ProjectWidgetLayout.ROW"></st-project-widget>
+          }
+        </div>
+      } @else if(projectsLoadingState() == LoadingState.LOADING) {
+        <st-loading></st-loading>
+      }
+    </div>
+  </section>
+}
+
+@if (videoLoadingState() != LoadingState.NOT_STARTED) {
+  <!-- Section: Videos -->
+  <section id="videos">
+    <div class="wrapper panel content">
+      @if (videoLoadingState() == LoadingState.LOAD_SUCCESS) {
+        <header>
+          <div>
+            <div>
+              <h1>Videos</h1>
+              <h2>We have had {{ updatedVideos().length }} new additions since
+                {{ startDate() | date: 'mediumDate' }}</h2>
+            </div>
+          </div>
+          <div>
+            @if (updatedVideos().length > 0) {
+              <a class="button" routerLink="../ecosystem/presentations">
+                <span class="material-symbols-outlined">slideshow</span>View All</a>
+            }
+          </div>
+        </header>
+        <div class="list">
+          @for (item of updatedVideos(); track item.id) {
+            <st-video-widget [video]="item"></st-video-widget>
+          }
+        </div>
+      } @else if(videoLoadingState() == LoadingState.LOADING) {
+        <st-loading></st-loading>
+      }
+    </div>
+  </section>
+}
+
+@if (researchLoadingState() != LoadingState.NOT_STARTED) {
+  <!-- Section: Research -->
+  <section id="research">
+    <div class="wrapper panel content">
+      @if (researchLoadingState() == LoadingState.LOAD_SUCCESS) {
+        <header>
+          <div>
+            <div>
+              <h1>Research Papers</h1>
+              <h2>We have had {{ updatedResearch().length }} new additions since
+                {{ startDate() | date: 'mediumDate' }}</h2>
+            </div>
+          </div>
+          <div>
+            @if (updatedResearch().length > 0) {
+              <a class="button" routerLink="../ecosystem/research">
+                <span class="material-symbols-outlined">biotech</span>View All</a>
+            }
+          </div>
+        </header>
+        <div class="list">
+          @for (item of updatedResearch(); track item.id) {
+            <st-research-widget [research]="item" [layout]="ResearchWidgetLayout.WIDGET"></st-research-widget>
+          }
+        </div>
+      } @else if(researchLoadingState() == LoadingState.LOADING) {
+        <st-loading></st-loading>
+      }
+    </div>
+  </section>
+}
diff --git a/src/app/pages/changed/changed.component.scss b/src/app/pages/changed/changed.component.scss
new file mode 100644
index 0000000..b98c23c
--- /dev/null
+++ b/src/app/pages/changed/changed.component.scss
@@ -0,0 +1,137 @@
+/**
+ * Styling for all sections other than intro.
+ */
+section:not(#intro) {
+  header {
+    padding-bottom: 0;
+
+    h1 {
+      margin-bottom: .5rem;
+    }
+
+    h2 {
+      font-size: 1.2rem;
+      margin: 0;
+      opacity: .7;
+    }
+  }
+
+  .list {
+    padding-top: 1rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 1rem;
+
+    @media screen and (min-width: 1000px) {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
+
+/**
+ * Styling for the introduction panel.
+ */
+section#intro {
+  .panel {
+    background: linear-gradient(90deg, rgb(0 0 33) 35%, rgb(255 61 0) 100%);
+  }
+
+  header h1 {
+    margin-bottom: 0;
+  }
+
+  .date-range {
+    font-size: 1.5rem;
+    display: flex;
+    border: rgba(255, 255, 255, 0.26) 1px solid;
+    border-radius: var(--border-radius);
+
+    & > div {
+      border-right: rgba(255, 255, 255, 0.26) 1px solid;
+      padding: .8rem 1rem;
+      cursor: default;
+
+      &:last-of-type {
+        border-right: 0;
+      }
+
+      &.date {
+        transition: var(--transition-fast);
+        display: block;
+
+        &.selectable {
+          cursor: pointer;
+
+          &:hover {
+            background-color: rgba(255, 255, 255, .1);
+          }
+        }
+
+        h2 {
+          font-size: 1.4rem;
+          opacity: .9;
+          margin: 0;
+        }
+
+        h3 {
+          display: block;
+          font-size: 1rem;
+          opacity: .6;
+          font-weight: normal;
+          margin: .2rem 0 0 0;
+        }
+      }
+
+      &.sep {
+        display: flex;
+        align-items: center;
+
+        span {
+          font-size: 30px;
+        }
+      }
+    }
+  }
+
+  st-quick-links {
+    margin-top: 1rem;
+  }
+}
+
+/**
+ * Styling for the projects update section.
+ */
+section#projects {
+  st-project-widget {
+    border: var(--border-default);
+    border-radius: var(--border-radius);
+  }
+}
+
+/**
+ * Styling for the video update section.
+ */
+section#videos {
+  st-video-widget {
+    border: var(--border-default);
+    border-radius: var(--border-radius);
+  }
+}
+
+/**
+ * Styling for the research update section.
+ */
+section#research {
+  st-research-widget {
+    border: var(--border-default);
+    border-radius: var(--border-radius);
+  }
+
+  .list {
+    grid-template-columns: 1fr;
+
+    @media screen and (min-width: 1100px) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/pages/changed/changed.component.ts b/src/app/pages/changed/changed.component.ts
new file mode 100644
index 0000000..506deaa
--- /dev/null
+++ b/src/app/pages/changed/changed.component.ts
@@ -0,0 +1,240 @@
+/*---------------------------------------------------------------------------------------------
+ *
+ *  Copyright (C) Codeplay Software Ltd.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *--------------------------------------------------------------------------------------------*/
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  OnInit,
+  Signal,
+  signal,
+  WritableSignal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Title } from '@angular/platform-browser';
+import { NewsService } from '../../shared/services/models/news.service';
+import { NewsModel } from '../../shared/models/news.model';
+import { NewsWidgetComponent, NewsWidgetLayout } from '../news/shared/news-widget/news-widget.component';
+import { RouterLink } from '@angular/router';
+import { ProjectModel } from '../../shared/models/project.model';
+import { ProjectService } from '../../shared/services/models/project.service';
+import { VideosService } from '../../shared/services/models/videos.service';
+import { ResearchService } from '../../shared/services/models/research.service';
+import { ResearchModel } from '../../shared/models/research.model';
+import { VideoModel } from '../../shared/models/video.model';
+import {
+  ProjectWidgetComponent,
+  ProjectWidgetLayout
+} from '../ecosystem/projects/shared/project-widget/project-widget.component';
+import { VideoWidgetComponent } from '../ecosystem/videos/video-widget/video-widget.component';
+import {
+  ResearchWidgetComponent,
+  ResearchWidgetLayout
+} from '../ecosystem/research/shared/research-widget/research-widget.component';
+import {
+  QuickLink,
+  QuickLinksComponent,
+  QuickLinkType
+} from '../../shared/components/quick-links/quick-links.component';
+import { PopupService } from '../../shared/components/popup/popup.service';
+import { ChangeStartDateComponent } from './change-start-date-popup/change-start-date.component';
+import { catchError, firstValueFrom, of, tap } from 'rxjs';
+import { LoadingState } from '../../shared/LoadingState';
+import { LoadingComponent } from '../../shared/components/loading/loading.component';
+import { PlatformService } from '../../shared/services/platform.service';
+import { ChangedService } from '../../shared/services/changed.service';
+
+@Component({
+  selector: 'st-changed',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterLink,
+    NewsWidgetComponent,
+    ProjectWidgetComponent,
+    VideoWidgetComponent,
+    ResearchWidgetComponent,
+    QuickLinksComponent,
+    LoadingComponent
+  ],
+  templateUrl: './changed.component.html',
+  styleUrl: './changed.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChangedComponent implements OnInit {
+  protected readonly startDate: WritableSignal<Date | undefined> = signal(undefined);
+  protected readonly currentDate: WritableSignal<Date> = signal(new Date());
+  protected readonly quickLinks: Signal<QuickLink[]>;
+
+  protected readonly newsLoadingState: WritableSignal<LoadingState> = signal(LoadingState.NOT_STARTED);
+  protected readonly projectsLoadingState: WritableSignal<LoadingState> = signal(LoadingState.NOT_STARTED);
+  protected readonly videoLoadingState: WritableSignal<LoadingState> = signal(LoadingState.NOT_STARTED);
+  protected readonly researchLoadingState: WritableSignal<LoadingState> = signal(LoadingState.NOT_STARTED);
+
+  protected readonly updatedNews: WritableSignal<NewsModel[]> = signal([]);
+  protected readonly updatedProjects: WritableSignal<ProjectModel[]> = signal([]);
+  protected readonly updatedVideos: WritableSignal<VideoModel[]> = signal([]);
+  protected readonly updatedResearch: WritableSignal<ResearchModel[]> = signal([]);
+
+  protected readonly NewsWidgetLayout = NewsWidgetLayout;
+  protected readonly ProjectWidgetLayout = ProjectWidgetLayout;
+  protected readonly ResearchWidgetLayout = ResearchWidgetLayout;
+  protected readonly LoadingState = LoadingState;
+
+  /**
+   * Constructor.
+   * @param title
+   * @param changedService
+   * @param platformService
+   * @param popupService
+   * @param projectService
+   * @param newsService
+   * @param researchService
+   * @param videosService
+   */
+  constructor(
+    protected title: Title,
+    protected changedService: ChangedService,
+    protected platformService: PlatformService,
+    protected popupService: PopupService,
+    protected projectService: ProjectService,
+    protected newsService: NewsService,
+    protected researchService : ResearchService,
+    protected videosService: VideosService,
+  ) {
+    this.title.setTitle('Digest - SYCL.tech');
+
+    // Compute the quick links signal
+    this.quickLinks = computed(() => {
+      // Escape early if we haven't started loading yet
+      if (this.newsLoadingState() == LoadingState.NOT_STARTED) {
+        return [];
+      }
+
+      return [
+        {
+          name: `News (${this.updatedNews().length})`,
+          url: 'news',
+          type: QuickLinkType.FRAGMENT
+        },
+        {
+          name: `Projects (${this.updatedProjects().length})`,
+          url: 'projects',
+          type: QuickLinkType.FRAGMENT
+        },
+        {
+          name: `Videos (${this.updatedVideos().length})`,
+          url: 'videos',
+          type: QuickLinkType.FRAGMENT
+        },
+        {
+          name: `Research Papers (${this.updatedResearch().length})`,
+          url: 'research',
+          type: QuickLinkType.FRAGMENT
+        }
+      ];
+    });
+  }
+
+  /**
+   * @inheritdoc
+   */
+  ngOnInit() {
+    if (this.platformService.isClient()) {
+      let lastVisitDate = this.changedService.lastVisitDate();
+
+      if (lastVisitDate) {
+        this.startDate.set(lastVisitDate);
+        this.reload();
+      } else {
+        lastVisitDate = new Date();
+        lastVisitDate.setDate(lastVisitDate.getDate() - 14);
+
+        this.startDate.set(lastVisitDate);
+        this.onDateSelectorClicked();
+      }
+    }
+  }
+
+  /**
+   * Reload all the content.
+   */
+  reload() {
+    const startDate = this.startDate();
+
+    if (!startDate) {
+      // Escape early if no start date is set
+      return;
+    }
+
+    ChangedComponent.populate(
+      this.projectService, this.projectsLoadingState, this.updatedProjects, startDate);
+
+    ChangedComponent.populate(
+      this.newsService, this.newsLoadingState, this.updatedNews, startDate);
+
+    ChangedComponent.populate(
+      this.researchService, this.researchLoadingState, this.updatedResearch, startDate);
+
+    ChangedComponent.populate(
+      this.videosService, this.videoLoadingState, this.updatedVideos, startDate);
+
+    // Update the last visit time
+    this.changedService.saveLastVisitDate();
+  }
+
+  /**
+   * Called when a user clicks on the start date, if they want to change the date.
+   */
+  onDateSelectorClicked() {
+    firstValueFrom(this.popupService.create(ChangeStartDateComponent, this.startDate(), true).onChanged)
+      .then(
+        (date) => {
+          if (date) {
+            this.startDate.set(date);
+            this.reload();
+          }
+        }
+      );
+  }
+
+  /**
+   * Populate results from the provided services, updating loading states etc.
+   * @param service
+   * @param loadingState
+   * @param resultSignal
+   * @param startDate
+   */
+  static populate(
+    service: any,
+    loadingState: WritableSignal<LoadingState>,
+    resultSignal: WritableSignal<any>,
+    startDate: Date
+  ) {
+    firstValueFrom(
+      service.afterDate(startDate)
+        .pipe(
+          tap(() => loadingState.set(LoadingState.LOAD_SUCCESS)),
+          catchError((error) => {
+            loadingState.set(LoadingState.LOAD_FAILURE);
+            return of(error)
+          })
+        )
+    ).then((items) => resultSignal.set(items))
+  }
+}
diff --git a/src/app/pages/cookies/cookies.component.html b/src/app/pages/cookies/cookies.component.html
index bd201f5..11d7993 100644
--- a/src/app/pages/cookies/cookies.component.html
+++ b/src/app/pages/cookies/cookies.component.html
@@ -29,7 +29,7 @@ <h1>What We Store</h1>
         <thead>
         <tr>
           <th>Cookie Name</th>
-          <th>Whats It For?</th>
+          <th>Description</th>
           <th>Type</th>
         </tr>
         </thead>
@@ -69,6 +69,28 @@ <h1>What We Store</h1>
             <div class="tag">1st Party Cookie</div>
           </td>
         </tr>
+        <tr>
+          <td>st-last-visit-date</td>
+          <td>Used to track the last time you visited the site, used on the <a routerLink="./changed">changed</a>
+            page.</td>
+          <td>
+            <div class="tag">1st Party Cookie</div>
+          </td>
+        </tr>
+        <tr>
+          <td>st-blocked-alerts</td>
+          <td>Used to hide any alerts.</td>
+          <td>
+            <div class="tag">1st Party Cookie</div>
+          </td>
+        </tr>
+        <tr>
+          <td>st-enable-alerts</td>
+          <td>Used to allow or disallow alerts from showing in your browser window.</td>
+          <td>
+            <div class="tag">1st Party Cookie</div>
+          </td>
+        </tr>
         </tbody>
       </table>
     </div>
diff --git a/src/app/pages/cookies/cookies.component.scss b/src/app/pages/cookies/cookies.component.scss
index 8b012e1..32d0270 100644
--- a/src/app/pages/cookies/cookies.component.scss
+++ b/src/app/pages/cookies/cookies.component.scss
@@ -1,5 +1,7 @@
 table {
   width: 100%;
+  border-radius: var(--border-radius);
+  overflow: hidden;
 
   td, th {
     padding: 1.2rem;
@@ -15,4 +17,8 @@ table {
       }
     }
   }
+
+  tr td:first-of-type {
+    font-weight: bold;
+  }
 }
diff --git a/src/app/pages/cookies/cookies.component.ts b/src/app/pages/cookies/cookies.component.ts
index 42ceabd..485ddaf 100644
--- a/src/app/pages/cookies/cookies.component.ts
+++ b/src/app/pages/cookies/cookies.component.ts
@@ -19,14 +19,17 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { environment } from '../../../environments/environment';
-import { StateService } from '../../shared/services/state.service';
 import { Title } from '@angular/platform-browser';
+import { SafeStorageService } from '../../shared/services/safe-storage.service';
+import { CookieAcceptanceComponent } from './shared/cookie-acceptance-popup/cookie-acceptance.component';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'st-cookies',
   standalone: true,
   imports: [
-    CommonModule
+    CommonModule,
+    RouterLink
   ],
   templateUrl: './cookies.component.html',
   styleUrl: './cookies.component.scss',
@@ -37,11 +40,11 @@ export class CookiesComponent {
 
   /**
    * Constructor.
-   * @param stateService
+   * @param safeStorageService
    * @param title
    */
   constructor(
-    protected stateService: StateService,
+    protected safeStorageService: SafeStorageService,
     protected title: Title
   ) {
     this.title.setTitle('Cookies - SYCL.tech');
@@ -51,6 +54,6 @@ export class CookiesComponent {
    * Called when a user wishes to change their cookie/storage acceptance.
    */
   onStorageAcceptance() {
-    this.stateService.setStoragePolicyAccepted(undefined);
+    this.safeStorageService.clear(SafeStorageService.STORAGE_ALLOWED_KEY);
   }
 }
diff --git a/src/app/pages/cookies/shared/cookie-acceptance-popup/cookie-acceptance.component.ts b/src/app/pages/cookies/shared/cookie-acceptance-popup/cookie-acceptance.component.ts
index ac2bfdc..69847c9 100644
--- a/src/app/pages/cookies/shared/cookie-acceptance-popup/cookie-acceptance.component.ts
+++ b/src/app/pages/cookies/shared/cookie-acceptance-popup/cookie-acceptance.component.ts
@@ -19,10 +19,10 @@
 import { ChangeDetectionStrategy, Component, signal, Signal } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
-import { StateService } from '../../../../shared/services/state.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import { PlatformService } from '../../../../shared/services/platform.service';
+import { SafeStorageService, State } from '../../../../shared/services/safe-storage.service';
 
 @Component({
   selector: 'st-cookie-acceptance',
@@ -40,18 +40,18 @@ export class CookieAcceptanceComponent {
 
   /**
    * Constructor.
-   * @param stateService
+   * @param safeStorageService
    * @param platformService
    */
   constructor(
-    protected stateService: StateService,
+    protected safeStorageService: SafeStorageService,
     protected platformService: PlatformService
   ) {
     // Only show the dialog on client to avoid flickering (dialog will be rendered during pre-rendering).
     if (this.platformService.isClient()) {
-      this.show = toSignal(this.stateService.getObservable().pipe(
-        map((state) => {
-          return (state.cookiesAccepted === undefined);
+      this.show = toSignal(this.safeStorageService.observe().pipe(
+        map((state: State) => {
+          return state[SafeStorageService.STORAGE_ALLOWED_KEY] == undefined;
         }),
       ), { initialValue: false });
     }
@@ -61,13 +61,13 @@ export class CookieAcceptanceComponent {
    * Called when a user accepts our policies.
    */
   onAcceptPolicies() {
-    this.stateService.setStoragePolicyAccepted(true);
+    this.safeStorageService.save(SafeStorageService.STORAGE_ALLOWED_KEY, true);
   }
 
   /**
    * Called when a user rejects our policies.
    */
   onRejectPolicies() {
-    this.stateService.setStoragePolicyAccepted(false);
+    this.safeStorageService.save(SafeStorageService.STORAGE_ALLOWED_KEY, false);
   }
 }
diff --git a/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.ts b/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.ts
index fded5a6..daf119a 100644
--- a/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.ts
+++ b/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.ts
@@ -23,7 +23,6 @@ import { MarkdownComponent } from 'ngx-markdown';
 import { RouterLink } from '@angular/router';
 import { VideoModel } from '../../../../../shared/models/video.model';
 import { PopupReference } from '../../../../../shared/components/popup/popup.service';
-import { StateService } from '../../../../../shared/services/state.service';
 import { map } from 'rxjs';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -31,6 +30,7 @@ import {
   ContributorAvatarComponent
 } from '../../../../../shared/components/contributor-avatar/contributor-avatar.component';
 import { MultiDateComponent } from '../../../../../shared/components/multi-date/multi-date.component';
+import { SafeStorageService } from '../../../../../shared/services/safe-storage.service';
 
 @Component({
   selector: 'st-video-view-popup',
@@ -78,12 +78,12 @@ export class VideoViewPopupComponent {
   /**
    * Constructor.
    * @param popupReference
-   * @param stateService
+   * @param safeStorageService
    * @param sanitizer
    */
   constructor(
     @Inject('POPUP_DATA') popupReference: PopupReference,
-    private stateService: StateService,
+    private safeStorageService: SafeStorageService,
     private sanitizer: DomSanitizer,
   ) {
     this.video = popupReference.data['video'];
@@ -98,10 +98,8 @@ export class VideoViewPopupComponent {
       return embedUrl ? this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl) : undefined;
     });
 
-    this.cookiesEnabled = toSignal(this.stateService.getObservable().pipe(
-      map((state) => {
-        return !!state.cookiesAccepted;
-      })
+    this.cookiesEnabled = toSignal(this.safeStorageService.observe().pipe(
+      map(() => this.safeStorageService.allowed())
     ));
   }
 }
diff --git a/src/app/pages/ecosystem/videos/video-widget/video-widget.component.scss b/src/app/pages/ecosystem/videos/video-widget/video-widget.component.scss
index 136e251..c305f7f 100644
--- a/src/app/pages/ecosystem/videos/video-widget/video-widget.component.scss
+++ b/src/app/pages/ecosystem/videos/video-widget/video-widget.component.scss
@@ -114,7 +114,6 @@
   .footer {
     background: linear-gradient(94deg, rgba(0, 0, 0, .05) 0%, rgba(239, 239, 239, 0) 100%);
     padding: .5rem 2rem;
-    color: rgba(0, 0, 0, .5);
     text-align: left;
     font-size: .8rem;
     cursor: default;
diff --git a/src/app/pages/getting-started/academy/lesson/lesson.component.ts b/src/app/pages/getting-started/academy/lesson/lesson.component.ts
index e53551c..be01668 100644
--- a/src/app/pages/getting-started/academy/lesson/lesson.component.ts
+++ b/src/app/pages/getting-started/academy/lesson/lesson.component.ts
@@ -28,10 +28,10 @@ import { AcademyLessonService } from '../../../../shared/services/models/academy
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { FormsModule } from '@angular/forms';
 import { PlatformService } from '../../../../shared/services/platform.service';
-import { StateService } from '../../../../shared/services/state.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { TabComponent } from '../../../../shared/components/tabs/tab/tab.component';
 import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { SafeStorageService } from '../../../../shared/services/safe-storage.service';
 
 @Component({
   selector: 'st-lesson',
@@ -69,7 +69,7 @@ export class LessonComponent {
    * @param activatedRoute
    * @param academyLessonService
    * @param platformService
-   * @param stateService
+   * @param safeStorageService
    * @param titleService
    * @param meta
    * @param location
@@ -78,7 +78,7 @@ export class LessonComponent {
     protected activatedRoute: ActivatedRoute,
     protected academyLessonService: AcademyLessonService,
     protected platformService: PlatformService,
-    protected stateService: StateService,
+    protected safeStorageService: SafeStorageService,
     protected titleService: Title,
     protected meta: Meta,
     protected location: Location
@@ -90,7 +90,8 @@ export class LessonComponent {
     this.lessons = toSignal(this.academyLessonService.all(), { initialValue: [] });
 
     this.monacoEditorTheme = toSignal(
-      this.stateService.getObservable().pipe(map(state => state.darkModeEnabled ? 'st-dark' : 'vs-light')),
+      this.safeStorageService.observe().pipe(
+        map(state => state['st-dark-mode-enabled'] ? 'st-dark' : 'vs-light')),
       { initialValue: 'vs-light' })
 
     if (this.platformService.isClient()) {
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 31cb5d1..8aca804 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -45,6 +45,8 @@ <h2>The SYCL standard is defined by the Khronos Group, the open member-driven co
         <h1>News &amp; Updates</h1>
       </div>
       <div>
+        <a class="button" routerLink="./changed">
+          <span class="material-symbols-outlined">update</span>What's Changed?</a>
         <a class="button" routerLink="./news">
           <span class="material-symbols-outlined">newspaper</span>View All</a>
       </div>
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 2a6b861..0b9c681 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -17,7 +17,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { CommonModule, NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, Signal } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { NewsModel } from '../../shared/models/news.model';
 import { NewsService } from '../../shared/services/models/news.service';
@@ -55,6 +55,8 @@ import { ImplementationActivityService } from '../../shared/services/models/impl
 import { toSignal } from '@angular/core/rxjs-interop';
 import { CalenderWidgetComponent } from '../calendar/shared/calendar-item-widget/calender-widget.component';
 import { environment } from '../../../environments/environment';
+import { AlertsComponent } from '../../shared/components/site-wide-alert/alerts.component';
+import { AlertService } from '../../shared/services/alert.service';
 
 @Component({
   selector: 'st-home',
@@ -72,6 +74,7 @@ import { environment } from '../../../environments/environment';
     ScrollingPanelComponent,
     CalenderWidgetComponent,
     NgOptimizedImage,
+    AlertsComponent,
   ],
   templateUrl: './home.component.html',
   styleUrls: [
@@ -80,7 +83,7 @@ import { environment } from '../../../environments/environment';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HomeComponent implements SearchablePage {
+export class HomeComponent implements SearchablePage, OnInit, OnDestroy {
   protected readonly news: Signal<NewsModel[]>;
   protected readonly contributors: Signal<ContributorModel[]>;
   protected readonly communityUpdates: Signal<ImplementationActivityModel[]>;
@@ -101,6 +104,7 @@ export class HomeComponent implements SearchablePage {
    * Constructor
    * @param meta
    * @param titleService
+   * @param alertService
    * @param playgroundSampleService
    * @param newsService
    * @param communityUpdateService
@@ -113,6 +117,7 @@ export class HomeComponent implements SearchablePage {
   constructor(
     protected meta: Meta,
     protected titleService: Title,
+    protected alertService: AlertService,
     protected playgroundSampleService: PlaygroundSampleService,
     protected newsService: NewsService,
     protected communityUpdateService: ImplementationActivityService,
@@ -164,6 +169,27 @@ export class HomeComponent implements SearchablePage {
       this.researchService.count(), { initialValue: 0 });
   }
 
+  /**
+   * @inheritdoc
+   */
+  ngOnInit() {
+    this.alertService.add({
+      id: 'home-whats-changed',
+      icon: 'update',
+      title: 'Show me what has changed!',
+      description: 'Click here to see our new videos, news, projects and research papers, since your last visit.',
+      href: './changed',
+      persistent: true
+    });
+  }
+
+  /**
+   * @inheritdoc
+   */
+  ngOnDestroy() {
+    this.alertService.deleteById('home-whats-changed');
+  }
+
   /**
    * @inheritDoc
    */
diff --git a/src/app/pages/playground/playground.component.ts b/src/app/pages/playground/playground.component.ts
index 707aafb..6392a05 100644
--- a/src/app/pages/playground/playground.component.ts
+++ b/src/app/pages/playground/playground.component.ts
@@ -42,15 +42,15 @@ import { Meta, Title } from '@angular/platform-browser';
 import { PlaygroundSampleService } from '../../shared/services/models/playground-sample.service';
 import { AlertBubbleComponent } from '../../shared/components/alert-bubble/alert-bubble.component';
 import { SearchablePage } from '../../shared/components/site-wide-search/SearchablePage';
-import { StateService } from '../../shared/services/state.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';
 import { LoadAndSavePopupComponent } from './popups/load-and-save/load-and-save-popup.component';
 import { SampleChooserComponent } from './popups/sample-chooser/sample-chooser.component';
 import { PlatformInfoPopupComponent } from './popups/platform-info/platform-info-popup.component';
 import { SharePopupComponent } from './popups/share/share-popup.component';
 import { CompilerSelectorPopupComponent } from './popups/compiler-select/compiler-selector-popup.component';
+import { SafeStorageService } from '../../shared/services/safe-storage.service';
+import { AlertService } from '../../shared/services/alert.service';
 
 @Component({
   selector: 'st-playground',
@@ -100,12 +100,12 @@ export class PlaygroundComponent implements SearchablePage, OnInit, OnDestroy {
    * @param popupService
    * @param platformService
    * @param playgroundService
-   * @param stateService
+   * @param safeStorageService
    * @param activatedRoute
-   * @param storageService
    * @param document
    * @param renderer
    * @param router
+   * @param alertService
    */
   constructor(
     protected titleService: Title,
@@ -113,12 +113,12 @@ export class PlaygroundComponent implements SearchablePage, OnInit, OnDestroy {
     protected popupService: PopupService,
     protected platformService: PlatformService,
     protected playgroundService: PlaygroundService,
-    protected stateService: StateService,
+    protected safeStorageService: SafeStorageService,
     protected activatedRoute: ActivatedRoute,
-    @Inject(LOCAL_STORAGE) protected storageService: StorageService,
     @Inject(DOCUMENT) protected document: Document,
     protected renderer: Renderer2,
-    protected router: Router
+    protected router: Router,
+    protected alertService: AlertService
   ) {
     this.titleService.setTitle('Playground - SYCL.tech');
     this.meta.addTag({ name: 'keywords', content: this.getKeywords().join(', ') });
@@ -174,7 +174,7 @@ export class PlaygroundComponent implements SearchablePage, OnInit, OnDestroy {
                 if (sample == undefined) {
                   this.setSample(PlaygroundSampleService.getDefaultSample());
 
-                  if (this.storageService.has(LoadAndSavePopupComponent.storageKey)) {
+                  if (this.safeStorageService.has(LoadAndSavePopupComponent.storageKey)) {
                     this.onSaveLoadSample();
                   } else if (this.platformService.isClient()) {
                     this.onChooseSample();
@@ -210,8 +210,8 @@ export class PlaygroundComponent implements SearchablePage, OnInit, OnDestroy {
    * Get the editor theme.
    */
   getEditorTheme(): Observable<string> {
-    return this.stateService.getObservable().pipe(
-      map(state => state.darkModeEnabled ? 'st-dark' : 'vs-light'));
+    return this.safeStorageService.observe().pipe(
+      map(state => state['st-dark-mode-enabled'] ? 'st-dark' : 'vs-light'));
   }
 
   /**
@@ -243,8 +243,22 @@ export class PlaygroundComponent implements SearchablePage, OnInit, OnDestroy {
         if (compilationResult.isError()) {
           this.compileState.set(LoadingState.LOAD_FAILURE);
           this.showErrorPanel();
+
+          this.alertService.add({
+            id: 'playground-compilation-result',
+            icon: 'thumb_down',
+            title: 'Compilation Failed',
+            description: `Your code has failed to compile, please check error window.`
+          });
         } else {
           this.compileState.set(LoadingState.LOAD_SUCCESS);
+
+          this.alertService.add({
+            id: 'playground-compilation-result',
+            icon: 'thumb_up',
+            title: 'Compilation Successful',
+            description: `Your code was compiled successfully on ${compilationResult.platform}.`
+          });
         }
       })
     );
diff --git a/src/app/pages/playground/popups/compiler-select/compiler-selector-popup.component.ts b/src/app/pages/playground/popups/compiler-select/compiler-selector-popup.component.ts
index d32e496..4068843 100644
--- a/src/app/pages/playground/popups/compiler-select/compiler-selector-popup.component.ts
+++ b/src/app/pages/playground/popups/compiler-select/compiler-selector-popup.component.ts
@@ -86,7 +86,7 @@ export class CompilerSelectorPopupComponent implements OnInit {
    * @param compiler
    */
   onSelectCompiler(compiler: PlaygroundCompiler) {
-    this.playgroundService.selectedCompiler.set(compiler);
+    this.playgroundService.setCompiler(compiler);
     this.popupReference.close(compiler);
   }
 
diff --git a/src/app/pages/playground/popups/load-and-save/load-and-save-popup.component.ts b/src/app/pages/playground/popups/load-and-save/load-and-save-popup.component.ts
index a736613..a9f02a5 100644
--- a/src/app/pages/playground/popups/load-and-save/load-and-save-popup.component.ts
+++ b/src/app/pages/playground/popups/load-and-save/load-and-save-popup.component.ts
@@ -19,11 +19,10 @@
 import { ChangeDetectionStrategy, Component, Inject, OnInit, signal, WritableSignal } from '@angular/core';
 import { LoadingComponent } from '../../../../shared/components/loading/loading.component';
 import { DatePipe } from '@angular/common';
-import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';
-import { StateService } from '../../../../shared/services/state.service';
-import { tap } from 'rxjs';
+import { take, tap } from 'rxjs';
 import { PopupReference } from '../../../../shared/components/popup/popup.service';
 import { RouterLink } from '@angular/router';
+import { SafeStorageService } from '../../../../shared/services/safe-storage.service';
 
 @Component({
   selector: 'st-load-popup',
@@ -48,36 +47,36 @@ export class LoadAndSavePopupComponent implements OnInit {
   /**
    * Constructor.
    * @param popupReference
-   * @param storageService
-   * @param stateService
+   * @param safeStorageService
    */
   constructor(
     @Inject('POPUP_DATA') protected popupReference: PopupReference,
-    @Inject(LOCAL_STORAGE) protected storageService: StorageService,
-    protected stateService: StateService
+    protected safeStorageService: SafeStorageService
   ) { }
 
   /**
    * @inheritDoc
    */
   ngOnInit(): void {
-    this.stateService.getObservable().pipe(
-      tap((state) => {
-        this.storageEnabled.set(state.cookiesAccepted == true);
-
-        if (this.storageService.has(LoadAndSavePopupComponent.storageKey)) {
-          const saved = this.storageService.get(LoadAndSavePopupComponent.storageKey);
-          this.saved.set(saved.reverse());
-        }
-      }
-    )).subscribe();
+    this.safeStorageService.observe()
+      .pipe(
+        tap(() => {
+          this.storageEnabled.set(this.safeStorageService.allowed());
+
+          if (this.safeStorageService.has(LoadAndSavePopupComponent.storageKey)) {
+            const saved = this.safeStorageService.get(LoadAndSavePopupComponent.storageKey);
+            this.saved.set(saved.reverse());
+          }
+        }),
+        take(1))
+      .subscribe();
   }
 
   /**
    * Called when a user presses the save button.
    */
   onSave() {
-    const saved = this.saved();
+    const saved = this.saved().slice();
 
     saved.push({
       date: new Date(),
@@ -123,14 +122,17 @@ export class LoadAndSavePopupComponent implements OnInit {
    * @param itemsToSave
    */
   private save(itemsToSave: SavedCode[]) {
-    this.saved.set(itemsToSave);
-
     if (itemsToSave.length == 0) {
-      this.storageService.remove(LoadAndSavePopupComponent.storageKey);
+      this.safeStorageService.clear(LoadAndSavePopupComponent.storageKey);
       return ;
     }
 
-    this.storageService.set(LoadAndSavePopupComponent.storageKey, itemsToSave);
+    try {
+      this.safeStorageService.save(LoadAndSavePopupComponent.storageKey, itemsToSave);
+      //this.saved.set(itemsToSave);
+    } catch (e) {
+      console.error('Cannot save code, storage is disabled.');
+    }
   }
 }
 
diff --git a/src/app/pages/playground/popups/platform-info/platform-info-popup.component.scss b/src/app/pages/playground/popups/platform-info/platform-info-popup.component.scss
index 52b7039..eb54d5f 100644
--- a/src/app/pages/playground/popups/platform-info/platform-info-popup.component.scss
+++ b/src/app/pages/playground/popups/platform-info/platform-info-popup.component.scss
@@ -1,7 +1,7 @@
 :host {
   @media screen and (min-width: 805px) {
     width: 750px !important;
-    min-height: 400px;
+    min-height: 470px;
   }
 
   article {
diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html
index e029e9f..8dc42aa 100644
--- a/src/app/pages/settings/settings.component.html
+++ b/src/app/pages/settings/settings.component.html
@@ -8,7 +8,7 @@ <h2>We take your privacy seriously and we limit what we store.</h2>
       </header>
     </div>
     <div>
-      <span class="material-symbols-outlined panel-icon">health_and_safety</span>
+      <span class="material-symbols-outlined panel-icon">settings</span>
     </div>
   </div>
 </section>
@@ -19,7 +19,6 @@ <h2>We take your privacy seriously and we limit what we store.</h2>
       <h1>Change Your Settings</h1>
     </header>
     <div>
-
       <div class="option">
         <div>
           <h1>Enable Cookies/Storage</h1>
@@ -27,30 +26,44 @@ <h1>Enable Cookies/Storage</h1>
             enabling dark mode.</p>
         </div>
         <div>
-          <st-switch [(checked)]="enableStorage" (checkedChange)="onStateChanged()"></st-switch>
+          <st-switch
+              [(checked)]="enableStorage"
+              (checkedChange)="onStateChanged('st-cookies-accepted', $event)"></st-switch>
         </div>
       </div>
-
       <div class="option" [ngClass]="{'disabled': !enableStorage()}">
         <div>
           <h1>Enable Dark Mode</h1>
           <p>Enable or disable dark mode, site wide.</p>
         </div>
         <div>
-          <st-switch [(checked)]="enableDarkMode" (checkedChange)="onStateChanged()"></st-switch>
+          <st-switch
+              [(checked)]="enableDarkMode"
+              (checkedChange)="onStateChanged('st-dark-mode-enabled', $event)"></st-switch>
         </div>
       </div>
-
       <div class="option" [ngClass]="{'disabled': !enableStorage()}">
         <div>
           <h1>Enable Tracking</h1>
           <p>Enable or disable anonymous tracking, we use this to improve the website.</p>
         </div>
         <div>
-          <st-switch [(checked)]="enableTracking" (checkedChange)="onStateChanged()"></st-switch>
+          <st-switch
+              [(checked)]="enableTracking"
+              (checkedChange)="onStateChanged('st-enable-tracking', $event)"></st-switch>
+        </div>
+      </div>
+      <div class="option" [ngClass]="{'disabled': !enableStorage()}">
+        <div>
+          <h1>Enable Alerts</h1>
+          <p>Enable or disable alerts from showing up in your browser window.</p>
+        </div>
+        <div>
+          <st-switch
+              [(checked)]="enableAlerts"
+              (checkedChange)="onStateChanged('st-enable-alerts', $event)"></st-switch>
         </div>
       </div>
-
     </div>
   </div>
 </section>
\ No newline at end of file
diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts
index 4859995..0091ac3 100644
--- a/src/app/pages/settings/settings.component.ts
+++ b/src/app/pages/settings/settings.component.ts
@@ -16,12 +16,12 @@
  *
  *--------------------------------------------------------------------------------------------*/
 
-import { ChangeDetectionStrategy, Component, signal, WritableSignal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal, WritableSignal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SwitchComponent } from '../../shared/components/switch/switch.component';
-import { StateService } from '../../shared/services/state.service';
-import { tap } from 'rxjs';
+import { Subscription, tap } from 'rxjs';
 import { Title } from '@angular/platform-browser';
+import { SafeStorageService } from '../../shared/services/safe-storage.service';
 
 @Component({
   selector: 'st-settings',
@@ -34,39 +34,74 @@ import { Title } from '@angular/platform-browser';
   styleUrl: './settings.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SettingsComponent {
-  enableStorage: WritableSignal<boolean> = signal(false);
-  enableDarkMode: WritableSignal<boolean> = signal(false);
-  enableTracking: WritableSignal<boolean> = signal(false);
+export class SettingsComponent implements OnInit, OnDestroy {
+  /**
+   * Signal for the enable storage switch.
+   * @protected
+   */
+  protected enableStorage: WritableSignal<boolean> = signal(false);
+
+  /**
+   * Signal for the enable dark mode switch.
+   * @protected
+   */
+  protected enableDarkMode: WritableSignal<boolean> = signal(false);
+
+  /**
+   * Signal for the enable tracking switch.
+   * @protected
+   */
+  protected enableTracking: WritableSignal<boolean> = signal(false);
+
+  /**
+   * Signal for the enable alerts switch.
+   * @protected
+   */
+  protected enableAlerts: WritableSignal<boolean> = signal(false);
+
+  /**
+   * Subscription to tracking storage changes.
+   * @protected
+   */
+  protected storageSubscription?: Subscription;
 
   /**
    * Constructor.
    * @param title
-   * @param stateService
+   * @param safeStorageService
    */
   constructor(
     protected title: Title,
-    protected stateService: StateService,
+    protected safeStorageService: SafeStorageService,
   ) {
     this.title.setTitle('Settings - SYCL.tech');
+  }
 
-    stateService.getObservable().pipe(
+  /**
+   * @inheritdoc
+   */
+  ngOnInit(): void {
+    this.storageSubscription = this.safeStorageService.observe().pipe(
       tap((state) => {
-        this.enableDarkMode.set(state.darkModeEnabled);
-        this.enableStorage.set(state.cookiesAccepted ? state.cookiesAccepted : false);
-        this.enableTracking.set(state.enableTracking);
+        this.enableStorage.set(state['st-cookies-accepted'] == true);
+        this.enableDarkMode.set(state['st-dark-mode-enabled'] == true);
+        this.enableTracking.set(state['st-enable-tracking'] == true);
+        this.enableAlerts.set(state['st-enable-alerts'] == true);
       })
     ).subscribe();
   }
 
+  /**
+   * @inheritdoc
+   */
+  ngOnDestroy(): void {
+    this.storageSubscription?.unsubscribe();
+  }
+
   /**
    * Called when a user changes any of the settings.
    */
-  onStateChanged() {
-    const state = this.stateService.snapshot();
-    state.enableTracking = this.enableTracking();
-    state.darkModeEnabled = this.enableDarkMode();
-    state.cookiesAccepted = this.enableStorage();
-    this.stateService.update(state);
+  onStateChanged(key: string, value: any) {
+    this.safeStorageService.save(key, value);
   }
 }
diff --git a/src/app/shared/components/popup/layouts/common.scss b/src/app/shared/components/popup/layouts/common.scss
index a473b67..1ab9a81 100644
--- a/src/app/shared/components/popup/layouts/common.scss
+++ b/src/app/shared/components/popup/layouts/common.scss
@@ -28,6 +28,6 @@ a.button {
   background-color: var(--color-blue);
 
   &.cancel {
-    background-color: var(--color-hint-sixth);
+    background-color: var(--color-grey);
   }
 }
diff --git a/src/app/shared/components/popup/layouts/widget.scss b/src/app/shared/components/popup/layouts/widget.scss
index cff3497..c7c9ff6 100644
--- a/src/app/shared/components/popup/layouts/widget.scss
+++ b/src/app/shared/components/popup/layouts/widget.scss
@@ -3,6 +3,12 @@
 :host {
   > header {
     padding: 0;
+    color: var(--text-color);
+    background: linear-gradient(325deg, rgb(255, 61, 0) 0%, rgb(228, 228, 228) 57%);
+
+    :host-context(.dark-mode) & {
+      background: var(--color-orange);
+    }
 
     .title {
       flex: 1;
@@ -17,6 +23,7 @@
       }
     }
 
+
     .author {
       width: 100%;
       padding: 1rem 3rem;
diff --git a/src/app/shared/components/site-wide-alert/alerts.component.html b/src/app/shared/components/site-wide-alert/alerts.component.html
new file mode 100644
index 0000000..b25669a
--- /dev/null
+++ b/src/app/shared/components/site-wide-alert/alerts.component.html
@@ -0,0 +1,21 @@
+@for (alert of alerts(); track alert.id) {
+  <div class="container" [@slideInSide]>
+    <a class="content" [routerLink]="alert.href" (click)="onAlertClicked(alert)">
+      <div class="icon">
+        <span class="material-symbols-outlined">{{ alert.icon }}</span>
+      </div>
+      <div class="messages">
+        <h1 [innerHTML]="alert.title"></h1>
+
+        @if (alert.description; as subMessage) {
+          <h2 [innerHTML]="subMessage"></h2>
+        }
+      </div>
+    </a>
+    <div class="buttons">
+      <a class="block" title="Don't show this alert ever again" (click)="onBlockAlert(alert)">
+        <span class="material-symbols-outlined">block</span>
+      </a>
+    </div>
+  </div>
+}
diff --git a/src/app/shared/components/site-wide-alert/alerts.component.scss b/src/app/shared/components/site-wide-alert/alerts.component.scss
new file mode 100644
index 0000000..376238a
--- /dev/null
+++ b/src/app/shared/components/site-wide-alert/alerts.component.scss
@@ -0,0 +1,89 @@
+:host {
+  $side-padding: 1rem;
+  $container-padding: 1.5rem;
+
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  bottom: $container-padding;
+  right: $container-padding;
+  z-index: 9999;
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    width: 430px;
+    display: flex;
+    overflow: hidden;
+    background-color: rgba(138, 40, 14, 0.6);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border-radius: var(--border-radius);
+    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
+    transition: var(--transition-fast);
+    color: var(--color-white);
+
+    &:hover {
+      box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .4);
+      background-color: var(--color-orange);
+    }
+
+    .content {
+      display: flex;
+      padding: $side-padding;
+      gap: 1rem;
+      flex: 1;
+      cursor: pointer;
+
+      .icon {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        span {
+          font-size: 30px;
+        }
+      }
+
+      .messages {
+        flex: 1;
+
+        h1 {
+          font-size: 1rem;
+        }
+
+        h2 {
+          font-size: .7rem;
+          font-weight: normal;
+          opacity: .8;
+          margin-top: .2rem;
+        }
+      }
+    }
+
+    .buttons {
+      display: flex;
+      gap: 1rem;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: $side-padding;
+        opacity: .5;
+        transition: var(--transition-fast);
+        background-color: rgba(0, 0, 0, .15);
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/shared/components/site-wide-alert/alerts.component.ts b/src/app/shared/components/site-wide-alert/alerts.component.ts
new file mode 100644
index 0000000..5ee021e
--- /dev/null
+++ b/src/app/shared/components/site-wide-alert/alerts.component.ts
@@ -0,0 +1,120 @@
+/*---------------------------------------------------------------------------------------------
+ *
+ *  Copyright (C) Codeplay Software Ltd.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *--------------------------------------------------------------------------------------------*/
+
+import {
+  ChangeDetectionStrategy,
+  Component, OnDestroy,
+  OnInit,
+  signal,
+  WritableSignal
+} from '@angular/core';
+import { Alert, AlertService } from '../../services/alert.service';
+import { RouterLink } from '@angular/router';
+import { Subscription, tap } from 'rxjs';
+import { PlatformService } from '../../services/platform.service';
+import { SafeStorageService } from '../../services/safe-storage.service';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'st-alerts',
+  standalone: true,
+  templateUrl: './alerts.component.html',
+  imports: [
+    RouterLink,
+    CommonModule,
+  ],
+  styleUrl: './alerts.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('slideInSide', [
+    transition(':enter', [
+      style({ transform: 'translateX(150%)', opacity: 0 }),
+      animate('500ms ease-out', style({ transform: 'translateX(0)', opacity: 1 })),
+    ]),
+    transition(':leave', [
+      animate('500ms ease-out', style({ transform: 'translateX(150%)', opacity: 0 })),
+    ])
+  ])
+],
+})
+export class AlertsComponent implements OnInit, OnDestroy {
+  /**
+   * The signal to store the currently visible alert for rendering via the template.
+   * @protected
+   */
+  protected alerts: WritableSignal<Alert[]> = signal([]);
+
+  /**
+   * Subscription to track alerts.
+   * @protected
+   */
+  protected alertSubscription?: Subscription;
+
+  /**
+   * Constructor.
+   * @param platformService
+   * @param safeStorageService
+   * @param alertService
+   */
+  constructor(
+    protected platformService: PlatformService,
+    protected safeStorageService: SafeStorageService,
+    protected alertService: AlertService
+  ) { }
+
+  /**
+   * @inheritdoc
+   */
+  ngOnInit() {
+    if (!this.platformService.isClient()) {
+      return;
+    }
+
+    this.alertSubscription = this.alertService.observe()
+      .pipe(
+        tap((alerts) => {
+          this.alerts.set(alerts);
+        })
+      )
+      .subscribe();
+  }
+
+  /**
+   * @inheritdoc
+   */
+  ngOnDestroy() {
+    this.alertSubscription?.unsubscribe();
+  }
+
+  /**
+   * Called when a user chooses to block/hide an alert.
+   * @param alert
+   */
+  onBlockAlert(alert: Alert) {
+    this.alertService.block(alert)
+  }
+
+  /**
+   * Called when a user clicks on an alert.
+   * @param alert
+   */
+  onAlertClicked(alert: Alert) {
+    this.onBlockAlert(alert);
+  }
+}
diff --git a/src/app/shared/components/switch/switch.component.ts b/src/app/shared/components/switch/switch.component.ts
index db64e16..4f03c4c 100644
--- a/src/app/shared/components/switch/switch.component.ts
+++ b/src/app/shared/components/switch/switch.component.ts
@@ -44,12 +44,12 @@ export class SwitchComponent {
    */
   @HostListener('click', ['$event'])
   onClick() {
-    this.clicked.emit();
-
     if (!this.enabled()) {
+      this.clicked.emit();
       return ;
     }
 
     this.checked.set(!this.checked());
+    this.clicked.emit();
   }
 }
diff --git a/src/app/shared/services/alert.service.ts b/src/app/shared/services/alert.service.ts
new file mode 100644
index 0000000..b3fbd21
--- /dev/null
+++ b/src/app/shared/services/alert.service.ts
@@ -0,0 +1,213 @@
+/*---------------------------------------------------------------------------------------------
+ *
+ *  Copyright (C) Codeplay Software Ltd.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *--------------------------------------------------------------------------------------------*/
+
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable, tap } from 'rxjs';
+import { SafeStorageService } from './safe-storage.service';
+import { PlatformService } from './platform.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AlertService {
+  /**
+   * Storage key for the cookie service.
+   */
+  public static readonly ENABLE_ALERTS_STORAGE_KEY = 'st-enable-alerts';
+
+  /**
+   * Default timeout for an alert.
+   */
+  public static readonly DEFAULT_TIMEOUT = 4000;
+
+  /**
+   * If the service is enabled or not.
+   * @protected
+   */
+  protected enabled: boolean = false;
+
+  /**
+   * An array of alerts to show to the user.
+   * @protected
+   */
+  protected alerts: Alert[] = [];
+
+  /**
+   * Subject, used to notify observers of changes to the alerts.
+   * @protected
+   */
+  protected behaviorSubject: BehaviorSubject<Alert[]> = new BehaviorSubject<Alert[]>([]);
+
+  /**
+   * Constructor.
+   * @param safeStorageService
+   * @param platformService
+   */
+  constructor(
+    protected safeStorageService: SafeStorageService,
+    protected platformService: PlatformService,
+  ) {
+    this.safeStorageService.observe()
+      .pipe(
+        tap((state) => {
+          this.enabled = state[AlertService.ENABLE_ALERTS_STORAGE_KEY] ?? false;
+
+          if (this.enabled) {
+            this.notify();
+          }
+        })
+      )
+      .subscribe();
+  }
+
+  /**
+   * Get an observable that will notify of any alert changes.
+   */
+  observe(): Observable<Alert[]> {
+    return this.behaviorSubject;
+  }
+
+  /**
+   * Add a new alert.
+   * @param alert
+   */
+  add(
+    alert: Alert
+  ) {
+    // Don't do anything if we are not a client
+    if (!this.platformService.isClient()) {
+      return ;
+    }
+
+    // If the service is disabled or if the alert is blocked, don't show it
+    if (this.isAlertBlocked(alert.id)) {
+      console.error('Not showing alert, service is disabled or alert is blocked.');
+      return ;
+    }
+
+    this.alerts.push(alert);
+
+    this.notify();
+
+    if (alert.persistent) {
+      return ;
+    }
+
+    setTimeout(() => {
+      this.delete(alert);
+    }, AlertService.DEFAULT_TIMEOUT);
+  }
+
+  /**
+   * Block an alert.
+   * @param alert
+   */
+  block(
+    alert: Alert
+  ) {
+    let blockedAlerts = [];
+    if (this.safeStorageService.has('st-blocked-alerts')) {
+      blockedAlerts = this.safeStorageService.get('st-blocked-alerts');
+    }
+
+    blockedAlerts.push(alert.id);
+    this.safeStorageService.save('st-blocked-alerts', blockedAlerts);
+
+    this.delete(alert);
+  }
+
+  /**
+   * Delete an alert.
+   * @param alert
+   */
+  delete(
+    alert: Alert
+  ) {
+    this.deleteById(alert.id);
+  }
+
+  /**
+   * Delete an alert by its id.
+   * @param alertId
+   */
+  deleteById(
+    alertId: string
+  ) {
+    // Remove the alert from the internal alert list by searching for it's id
+    for (const alertIndex in this.alerts) {
+      const currentAlert = this.alerts[alertIndex];
+
+      if (currentAlert.id == alertId) {
+        this.alerts.splice(Number.parseInt(alertIndex), 1);
+      }
+    }
+
+    this.notify();
+  }
+
+  /**
+   * Check if the alert id is within the block list.
+   * @param alertId
+   */
+  isAlertBlocked(
+    alertId: string
+  ): boolean {
+    if (this.safeStorageService.has('st-blocked-alerts')) {
+      return this.safeStorageService.get('st-blocked-alerts').includes(alertId);
+    }
+
+    return false;
+  }
+
+  /**
+   * Notify any subscribed users that there are new alerts.
+   */
+  notify() {
+    if (!this.enabled) {
+      return ;
+    }
+
+    this.behaviorSubject.next(this.getAlerts());
+  }
+
+  /**
+   * Check if there are alerts available.
+   */
+  has(): boolean {
+    return this.alerts.length > 0;
+  }
+
+  /**
+   * Gets the next alert in the alert list.
+   */
+  getAlerts(): Alert[] {
+    return this.alerts.slice();
+  }
+}
+
+/**
+ * Represents an alert.
+ */
+export interface Alert {
+  id: string
+  icon: string
+  title: string
+  persistent?: boolean
+  description?: string
+  href?: string
+}
diff --git a/src/app/shared/services/changed.service.ts b/src/app/shared/services/changed.service.ts
new file mode 100644
index 0000000..0d6f4bd
--- /dev/null
+++ b/src/app/shared/services/changed.service.ts
@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+ *
+ *  Copyright (C) Codeplay Software Ltd.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *--------------------------------------------------------------------------------------------*/
+
+import { Injectable } from '@angular/core';
+import { SafeStorageService } from './safe-storage.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChangedService {
+  /**
+   * The storage key to use for tracking the users last access date.
+   * @protected
+   */
+  protected static readonly STORAGE_LAST_VISIT = 'st-last-visit-date';
+
+  /**
+   * Constructor.
+   * @param safeStorageService
+   */
+  constructor(
+    protected safeStorageService: SafeStorageService
+  ) { }
+
+  /**
+   * Get the date of the users last known visit. Will return undefined if no date is saved.
+   */
+  lastVisitDate(): Date | undefined {
+    if (this.safeStorageService.has(ChangedService.STORAGE_LAST_VISIT)) {
+      return new Date(this.safeStorageService.get(ChangedService.STORAGE_LAST_VISIT));
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Save the last visit date to the local storage service.
+   * @param date
+   */
+  saveLastVisitDate(date?: Date) {
+    try {
+      date = date ?? new Date();
+      this.safeStorageService.save(ChangedService.STORAGE_LAST_VISIT, date);
+    } catch (e) {
+      // Do nothing
+    }
+  }
+}
diff --git a/src/app/shared/services/models/event.service.ts b/src/app/shared/services/models/event.service.ts
index 24dabc9..5b87284 100644
--- a/src/app/shared/services/models/event.service.ts
+++ b/src/app/shared/services/models/event.service.ts
@@ -23,6 +23,7 @@ import { ContributorService } from './contributor.service';
 import { JsonFeedService } from '../json-feed.service';
 import { FilterGroup } from '../../managers/ResultFilterManager';
 import { map, Observable, of } from 'rxjs';
+import { NewsModel } from '../../models/news.model';
 
 @Injectable({
   providedIn: 'root'
@@ -126,4 +127,21 @@ export class EventService extends JsonFeedService {
       })
     );
   }
+
+  /**
+   * Get all event items after a specific date.
+   * @param startDate
+   * @param limit
+   */
+  afterDate(
+    startDate: Date,
+    limit: number | null = null
+  ): Observable<EventModel[]> {
+    return this.all(limit)
+      .pipe(
+        map((items) => {
+          return startDate ? items.filter((item) => (item.starts >= startDate)) : items;
+        })
+      );
+  }
 }
diff --git a/src/app/shared/services/models/news.service.ts b/src/app/shared/services/models/news.service.ts
index e0eece4..80bb2bc 100644
--- a/src/app/shared/services/models/news.service.ts
+++ b/src/app/shared/services/models/news.service.ts
@@ -24,6 +24,7 @@ import { NewsModel } from '../../models/news.model';
 import { JsonFeedService } from '../json-feed.service';
 import { map, Observable, of } from 'rxjs';
 import { PinnedModel } from '../../models/pinned.model';
+import { VideoModel } from '../../models/video.model';
 
 @Injectable({
   providedIn: 'root'
@@ -148,4 +149,21 @@ export class NewsService extends JsonFeedService {
   ): Observable<NewsModel[]> {
     return super._all<NewsModel>(limit, offset, filterGroups).pipe(map((f => f.items)));
   }
+
+  /**
+   * Get all news items after a specific date.
+   * @param startDate
+   * @param limit
+   */
+  afterDate(
+    startDate: Date,
+    limit: number | null = null
+  ): Observable<NewsModel[]> {
+    return this.all(limit)
+      .pipe(
+        map((items) => {
+          return startDate ? items.filter((item) => (item.date >= startDate)) : items;
+        })
+      );
+  }
 }
diff --git a/src/app/shared/services/models/playground.service.ts b/src/app/shared/services/models/playground.service.ts
index 3687594..d790bb1 100644
--- a/src/app/shared/services/models/playground.service.ts
+++ b/src/app/shared/services/models/playground.service.ts
@@ -16,15 +16,13 @@
  *
  *--------------------------------------------------------------------------------------------*/
 
-import { effect, Inject, Injectable, signal, WritableSignal } from '@angular/core';
+import { Injectable, signal, WritableSignal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
 import { BehaviorSubject, catchError, map, Observable, of } from 'rxjs';
 import { CompilationResultModel } from '../../models/compilation-result.model';
 import { PlaygroundSampleModel } from '../../models/playground-sample.model';
-import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';
-import { StateService } from '../state.service';
-
+import { SafeStorageService } from '../safe-storage.service';
 import Convert from 'ansi-to-html';
 
 @Injectable({
@@ -57,19 +55,17 @@ export class PlaygroundService {
    * Constructor.
    * @param httpClient
    * @param domSanitizer
-   * @param stateService
-   * @param storageService
+   * @param safeStorageService
    */
   constructor(
     protected httpClient: HttpClient,
     protected domSanitizer: DomSanitizer,
-    protected stateService: StateService,
-    @Inject(LOCAL_STORAGE) protected storageService: StorageService
+    protected safeStorageService: SafeStorageService
   ) {
     this.sampleSubject = new BehaviorSubject<PlaygroundSampleModel | undefined>(undefined);
 
-    if (this.storageService.has(PlaygroundService.COMPILER_STORAGE_KEY)) {
-      const compilerTag = this.storageService.get(PlaygroundService.COMPILER_STORAGE_KEY);
+    if (this.safeStorageService.has(PlaygroundService.COMPILER_STORAGE_KEY)) {
+      const compilerTag = this.safeStorageService.get(PlaygroundService.COMPILER_STORAGE_KEY);
 
       for (const compiler of this.supportedCompilers) {
         if (compiler.tag == compilerTag) {
@@ -78,17 +74,6 @@ export class PlaygroundService {
         }
       }
     }
-
-    /**
-     * This effect will update the storage service with the selected compiler
-     */
-    effect(() => {
-      const selectedCompiler = this.selectedCompiler();
-
-      if (this.stateService.snapshot().cookiesAccepted) {
-        this.storageService.set('st-playground-compiler-tag', selectedCompiler.tag);
-      }
-    })
   }
 
   /**
@@ -197,6 +182,12 @@ export class PlaygroundService {
    */
   setCompiler(compiler: PlaygroundCompiler) {
     this.selectedCompiler.set(compiler);
+
+    try {
+      this.safeStorageService.save('st-playground-compiler-tag', compiler.tag);
+    } catch (e) {
+      console.error('Cannot save compiler choice, storage is disabled.');
+    }
   }
 
   /**
@@ -472,7 +463,7 @@ export class OneApiCompiler implements PlaygroundCompiler {
  */
 export class AdaptiveCppCompiler implements PlaygroundCompiler {
   public name = 'AdaptiveCpp';
-  public enabled: boolean = false;
+  public enabled: boolean = true;
   public logo: string = '/assets/images/ecosystem/implementations/adaptivecpp/logo-black.webp';
   public tag = 'adaptive'
   public flags = '-fsycl -g0 -Rno-debug-disables-optimization';
diff --git a/src/app/shared/services/models/project.service.ts b/src/app/shared/services/models/project.service.ts
index e1b7142..83033ca 100644
--- a/src/app/shared/services/models/project.service.ts
+++ b/src/app/shared/services/models/project.service.ts
@@ -25,6 +25,7 @@ import { ContributorModel } from '../../models/contributor.model';
 import { JsonFeedService } from '../json-feed.service';
 import { map, Observable, of } from 'rxjs';
 import { MarkdownService } from 'ngx-markdown';
+import { NewsModel } from '../../models/news.model';
 
 @Injectable({
   providedIn: 'root'
@@ -147,6 +148,23 @@ export class ProjectService extends JsonFeedService {
     );
   }
 
+  /**
+   * Get all project items after a specific date.
+   * @param startDate
+   * @param limit
+   */
+  afterDate(
+    startDate: Date,
+    limit: number | null = null
+  ): Observable<ProjectModel[]> {
+    return this.all(limit)
+      .pipe(
+        map((items) => {
+          return startDate ? items.filter((item) => (item.date_created >= startDate)) : items;
+        })
+      );
+  }
+
   /**
    * Create a wrapper repo contributor.
    * @param name
diff --git a/src/app/shared/services/models/research.service.ts b/src/app/shared/services/models/research.service.ts
index 4f4100a..a8d43d5 100644
--- a/src/app/shared/services/models/research.service.ts
+++ b/src/app/shared/services/models/research.service.ts
@@ -81,4 +81,21 @@ export class ResearchService extends JsonFeedService {
       map((items) => items[Math.floor(Math.random() * items.length)])
     );
   }
+
+  /**
+   * Get all research items after a specific date.
+   * @param startDate
+   * @param limit
+   */
+  afterDate(
+    startDate: Date,
+    limit: number | null = null
+  ): Observable<ResearchModel[]> {
+    return this.all(limit)
+      .pipe(
+        map((items) => {
+          return startDate ? items.filter((item) => (item.date >= startDate)) : items;
+        })
+      );
+  }
 }
diff --git a/src/app/shared/services/models/videos.service.ts b/src/app/shared/services/models/videos.service.ts
index bf0a921..3fdc724 100644
--- a/src/app/shared/services/models/videos.service.ts
+++ b/src/app/shared/services/models/videos.service.ts
@@ -85,6 +85,23 @@ export class VideosService extends JsonFeedService {
     );
   }
 
+  /**
+   * Get all video items after a specific date.
+   * @param startDate
+   * @param limit
+   */
+  afterDate(
+    startDate: Date,
+    limit: number | null = null
+  ): Observable<VideoModel[]> {
+    return this.all(limit)
+      .pipe(
+        map((items) => {
+          return startDate ? items.filter((item) => (item.date >= startDate)) : items;
+        })
+      );
+  }
+
   /**
    * Attempt to generate an embed URL based on the external provider.
    * @param externalUrl
diff --git a/src/app/shared/services/safe-storage.service.ts b/src/app/shared/services/safe-storage.service.ts
new file mode 100644
index 0000000..efc481b
--- /dev/null
+++ b/src/app/shared/services/safe-storage.service.ts
@@ -0,0 +1,178 @@
+/*---------------------------------------------------------------------------------------------
+ *
+ *  Copyright (C) Codeplay Software Ltd.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *--------------------------------------------------------------------------------------------*/
+
+import { Inject, Injectable } from '@angular/core';
+import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { environment } from '../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SafeStorageService {
+  public static readonly STORAGE_ALLOWED_KEY = 'st-cookies-accepted';
+  private readonly subject: BehaviorSubject<State>;
+  private readonly allowedStorageKeys: string[] = environment.allowed_storage_keys;
+
+  protected readonly enableByDefault = [
+    'st-enable-tracking',
+    'st-enable-alerts'
+  ]
+
+  /**
+   * Constructor.
+   * @param storageService
+   */
+  constructor(
+    @Inject(LOCAL_STORAGE) private storageService: StorageService
+  ) {
+    this.subject = new BehaviorSubject(this.state());
+  }
+
+  /**
+   * Determine if we are allowed to store data to the storage service.
+   */
+  allowed(): boolean {
+    return this.storageService.has(SafeStorageService.STORAGE_ALLOWED_KEY)
+      && this.storageService.get(SafeStorageService.STORAGE_ALLOWED_KEY) == true;
+  }
+
+  /**
+   * Return an observable, allowing changes to the state to be tracked.
+   */
+  observe(): Observable<State> {
+    return this.subject;
+  }
+
+  /**
+   * Clear all the saved state, persisting if storage is allowed or not.
+   */
+  clear(key?: string) {
+    if (key) {
+      this.storageService.remove(key);
+    } else {
+      this.storageService.clear();
+    }
+  }
+
+  /**
+   * Set if we are allowed or not to store data to the storage service.
+   */
+  setStorageAllowed(enable: boolean) {
+    if (enable) {
+      for (const key of this.enableByDefault) {
+        this.storageService.set(key, enable);
+      }
+    } else {
+      this.clear();
+    }
+
+    this.storageService.set(SafeStorageService.STORAGE_ALLOWED_KEY, enable);
+    this.notify();
+  }
+
+  /**
+   * Save a value to the safe storage service.
+   * @param key the key to use to save and access the value
+   * @param value the value to store
+   * @throws DefaultStorageKeys will be thrown if we are not allowed to store data
+   */
+  save(
+    key: string,
+    value: any
+  ) {
+    // If the key is the STORAGE_ALLOWED_KEY, handle this separately
+    if (key == SafeStorageService.STORAGE_ALLOWED_KEY) {
+      this.setStorageAllowed(value);
+      return ;
+    }
+
+    // Check if we are allowed to store to the storage service. We would be denied if the user has not allowed
+    // cookies/storage.
+    if (!this.allowed()) {
+      throw new StorageNotEnabledError('The storage service is not enabled.');
+    }
+
+    // Check if the key is in the allowed list of keys, this prevents us storing something we haven't declared
+    if (!this.allowedStorageKeys.includes(key)) {
+      throw new KeyNotAllowedError(`The key "${key}" is not in the allowed key list.`);
+    }
+
+    this.storageService.set(key, value);
+
+    // Notify any observers of change to the storage state
+    this.notify();
+  }
+
+  /**
+   * Check if the safe storage service contains a value.
+   * @param key
+   */
+  has(
+    key: string
+  ): boolean {
+    return this.storageService.has(key);
+  }
+
+  /**
+   * Get a specific value using a key. Will return undefined if the key does not exist.
+   * @param key
+   */
+  get(
+    key: string
+  ): any {
+    return this.storageService.get(key);
+  }
+
+  /**
+   * Get the current state of all known allowed keys.
+   */
+  private state() {
+    const state: any = {};
+
+    for (const key of this.allowedStorageKeys) {
+      state[key] = this.storageService.get(key);
+    }
+
+    return state;
+  }
+
+  /**
+   * Notify any observers of the new updated storage state.
+   */
+  private notify() {
+    this.subject.next(this.state());
+  }
+}
+
+/**
+ * State interface.
+ */
+export interface State {
+  [Key: string]: any;
+}
+
+/**
+ * Thrown when we are not allowed to store data.
+ */
+export class StorageNotEnabledError extends Error {}
+
+/**
+ * Thrown when there is an attempt to store a value when it's not listed in the allowed key list.
+ */
+export class KeyNotAllowedError extends Error {}
diff --git a/src/app/shared/services/state.service.ts b/src/app/shared/services/state.service.ts
deleted file mode 100644
index e369d44..0000000
--- a/src/app/shared/services/state.service.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *
- *  Copyright (C) Codeplay Software Ltd.
- *
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- *
- *--------------------------------------------------------------------------------------------*/
-
-import { Inject, Injectable } from '@angular/core';
-import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class StateService {
-  protected stateSubject: BehaviorSubject<ApplicationState>;
-
-  /**
-   * Constructor.
-   * @param storageService
-   */
-  constructor(
-    @Inject(LOCAL_STORAGE) private storageService: StorageService
-  ) {
-    const applicationState: ApplicationState = {
-      cookiesAccepted: this.getStorageServiceValue('st-cookies-accepted'),
-      darkModeEnabled: this.getStorageServiceValue('st-dark-mode-enabled', false),
-      enableTracking: this.getStorageServiceValue('st-enable-tracking', true)
-    }
-
-    this.stateSubject = new BehaviorSubject<ApplicationState>(applicationState);
-  }
-
-  getStorageServiceValue(key: string, defaultValue?: any) {
-    if (!this.storageService.has(key)) {
-      return defaultValue;
-    }
-
-    const value = this.storageService.get(key);
-
-    if (value == undefined || value == 'undefined') {
-      return defaultValue;
-    }
-
-    return value;
-  }
-
-  /**
-   * Get the state observable that can be subscribed to for update changes.
-   */
-  getObservable(): Observable<ApplicationState> {
-    return this.stateSubject;
-  }
-
-  /**
-   * Get the latest state snapshot. Avoid using this in reactive circumstances.
-   */
-  snapshot() {
-    return this.stateSubject.value;
-  }
-
-  /**
-   * Set the dark mode state.
-   * @param enabled
-   */
-  setDarkMode(enabled: boolean) {
-    const state = this.snapshot();
-    state.darkModeEnabled = enabled;
-    this.update(state);
-  }
-
-  /**
-   * Set the storage acceptance policy.
-   * @param enabled
-   */
-  setStoragePolicyAccepted(enabled: boolean | undefined) {
-    const state = this.snapshot();
-    state.cookiesAccepted = enabled;
-    this.update(state);
-  }
-
-  /**
-   * Update the state.
-   * @param state
-   */
-  update(state: ApplicationState) {
-    if (!state.cookiesAccepted) {
-      this.storageService.clear();
-      this.storageService.set('st-cookies-accepted', state.cookiesAccepted);
-      this.stateSubject.next(state);
-      return ;
-    }
-
-    this.storageService.set('st-cookies-accepted', state.cookiesAccepted);
-    this.storageService.set('st-dark-mode-enabled', state.darkModeEnabled);
-    this.storageService.set('st-enable-tracking', state.enableTracking);
-
-    this.stateSubject.next(state);
-  }
-}
-
-/**
- * Interface that represents the state of the application.
- */
-export interface ApplicationState {
-  cookiesAccepted: boolean | undefined
-  darkModeEnabled: boolean
-  enableTracking: boolean
-}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index f890f3d..e292e2b 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -27,5 +27,17 @@ export const environment = {
     discord: 'https://discord.com/invite/FkGSFA3asN'
   },
   privacy_policy_email: 'info@codeplay.com',
-  fathom_analytics_token: 'MMWGQHXZ'
+  fathom_analytics_token: 'MMWGQHXZ',
+
+  // A list of any storage keys/cookies that this site uses
+  allowed_storage_keys: [
+    'st-cookies-accepted',
+    'st-dark-mode-enabled',
+    'st-enable-tracking',
+    'st-playground-compiler-tag',
+    'st-playground-saved',
+    'st-last-visit-date',
+    'st-blocked-alerts',
+    'st-enable-alerts',
+  ],
 };