diff --git a/README.md b/README.md
index c403366..652d99e 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,5 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+![osu! Tournament Rating](https://akinariosu.s-ul.eu/X1Me0Jpd)
 
-## Getting Started
+# o!TR Web
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+[![CodeFactor](https://www.codefactor.io/repository/github/osu-tournament-rating/otr-web/badge)](https://www.codefactor.io/repository/github/osu-tournament-rating/otr-web)
diff --git a/app/actions.ts b/app/actions.ts
index cb2d2fa..5abf906 100644
--- a/app/actions.ts
+++ b/app/actions.ts
@@ -23,7 +23,7 @@ export async function getUserData() {
     }, */
   });
 
-  if (res.status !== 200) {
+  if (!res?.ok) {
     const errorMessage = await res.text();
 
     return {
@@ -35,22 +35,9 @@ export async function getUserData() {
     };
   }
 
-  if (res.status === 200) {
-    res = await res.json();
-
-    return res;
-  }
+  res = await res.json();
 
-  /* .then((response) => {
-      return response.json();
-    })
-    .then((data) => {
-      console.log(data);
-      return data;
-    })
-    .catch((error) => {
-      console.error('Error fetching authenticated user:', error);
-    }); */
+  return res;
 }
 
 export async function checkUserLogin() {
@@ -67,11 +54,13 @@ export async function checkUserLogin() {
   });
 
   if (!res?.ok) {
-    const errorCode = res?.status;
+    const errorMessage = await res.text();
 
     return {
       error: {
-        errorCode,
+        status: res?.status,
+        text: res?.statusText,
+        message: errorMessage,
       },
     };
   }
@@ -204,6 +193,10 @@ export async function saveTournamentMatches(
   }
 }
 
+export async function getOsuModeCookie() {
+  return cookies().get('OTR-user-selected-osu-mode');
+}
+
 export async function changeOsuModeCookie(mode?: string) {
   await cookies().set('OTR-user-selected-osu-mode', mode ?? '0');
   return;
diff --git a/app/dashboard/page.module.css b/app/dashboard/page.module.css
index 64b7bd0..d961a3d 100644
--- a/app/dashboard/page.module.css
+++ b/app/dashboard/page.module.css
@@ -65,10 +65,6 @@
   color: hsla(var(--red-400));
 }
 
-.change.negative::before {
-  content: '-';
-}
-
 .header .stats {
   display: flex;
   flex-flow: row;
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index e90e753..702ff82 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -102,7 +102,7 @@ export default async function page({
             </div>
           </div>
           <div className={styles.chart}>
-            <AreaChart ratingStats={data.ratingStats} />
+            <AreaChart ratingStats={data.ratingChart.chartData} />
           </div>
         </div>
       </div>
@@ -162,32 +162,6 @@ export default async function page({
         <GridCard title={'Winrate by mod'}>
           <RadarChart winrateModData={data?.modStats} />
         </GridCard>
-        <GridCard title={'Teammates'}>
-          <div className={styles.cardStat}>
-            <span>Most played</span>
-            <span className={styles.value}>
-              {data?.matchStats.mostPlayedTeammateName}
-            </span>
-          </div>
-          <div className={styles.cardStat}>
-            <span>Best teammate</span>
-            <span className={styles.value}>
-              {data?.matchStats.bestTeammateName}
-            </span>
-          </div>
-        </GridCard>
-        <GridCard title={'Opponents'}>
-          <div className={styles.cardStat}>
-            <span>Most played</span>
-            <span className={styles.value}>
-              {data?.matchStats.mostPlayedOpponentName}
-            </span>
-          </div>
-          <div className={styles.cardStat}>
-            <span>Best opponent</span>
-            <span className={styles.value}>TO DO</span>
-          </div>
-        </GridCard>
         <GridCard title={'Average score per mod'}>
           <RadarChart averageModScore={data?.modStats} />
         </GridCard>
diff --git a/app/globals.css b/app/globals.css
index ee8bd14..c0a4747 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -117,6 +117,10 @@
   /* USER RATING TIER */
   --tier-bar-background: var(--gray-300);
   --tier-bar-accent: var(--accent-color);
+
+  /* TOAST */
+  --toast-error-bg: var(--yellow-200);
+  --toast-error-border: 50, 70%, 64%;
 }
 
 * {
diff --git a/app/layout.tsx b/app/layout.tsx
index e38bd47..6732abc 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import Footer from '@/components/Footer/Footer';
-import NavBar from '@/components/NavBar/NavBar';
+import { LayoutProvider } from '@/components/LayoutProvider/LayoutProvider';
+import ErrorProvider from '@/util/ErrorContext';
 import UserProvider from '@/util/UserLoggedContext';
 import type { Metadata } from 'next';
 import { Viewport } from 'next';
@@ -32,11 +33,14 @@ export default function RootLayout({
   return (
     <html lang="en" className={inter.variable}>
       <body>
-        <UserProvider>
-          <NavBar />
-          {children}
-          <Footer />
-        </UserProvider>
+        <ErrorProvider>
+          <UserProvider>
+            <LayoutProvider>
+              {children}
+              <Footer />
+            </LayoutProvider>
+          </UserProvider>
+        </ErrorProvider>
       </body>
     </html>
   );
diff --git a/app/unauthorized/page.tsx b/app/unauthorized/page.tsx
index 06be9ca..69c79f9 100644
--- a/app/unauthorized/page.tsx
+++ b/app/unauthorized/page.tsx
@@ -2,7 +2,7 @@
 
 import LoginButton from '@/components/Button/LoginButton';
 import Card from '@/components/Card/Card';
-import { useUser } from '@/util/hooks';
+import { useSetError, useUser } from '@/util/hooks';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import styles from './page.module.css';
@@ -10,13 +10,16 @@ import styles from './page.module.css';
 export default function Unauthorized() {
   const router = useRouter();
   const user = useUser();
+  const setError = useSetError();
 
   if (user?.osuId) {
     return router.push('/');
   }
 
+  setError(user?.error);
+
   return (
-    <main className={styles.container}>
+    <main className={styles.container} style={{ paddingTop: '2vw' }}>
       <Card
         title="Unauthorized"
         description="Currently, the o!TR website is in a closed pre-alpha state. Only whitelisted users are allowed. We will open things up once we have more features implemented. Thanks for your patience!"
diff --git a/app/users/[id]/page.module.css b/app/users/[id]/page.module.css
index 64b7bd0..d961a3d 100644
--- a/app/users/[id]/page.module.css
+++ b/app/users/[id]/page.module.css
@@ -65,10 +65,6 @@
   color: hsla(var(--red-400));
 }
 
-.change.negative::before {
-  content: '-';
-}
-
 .header .stats {
   display: flex;
   flex-flow: row;
diff --git a/app/users/[id]/page.tsx b/app/users/[id]/page.tsx
index 7fd1ff7..ccdc0b7 100644
--- a/app/users/[id]/page.tsx
+++ b/app/users/[id]/page.tsx
@@ -82,7 +82,7 @@ export default async function page({
             </div>
           </div>
           <div className={styles.chart}>
-            <AreaChart ratingStats={data.ratingStats} />
+            <AreaChart ratingStats={data.ratingChart.chartData} />
           </div>
         </div>
       </div>
@@ -142,32 +142,6 @@ export default async function page({
         <GridCard title={'Winrate by mod'}>
           <RadarChart winrateModData={data?.modStats} />
         </GridCard>
-        <GridCard title={'Teammates'}>
-          <div className={styles.cardStat}>
-            <span>Most played</span>
-            <span className={styles.value}>
-              {data?.matchStats.mostPlayedTeammateName}
-            </span>
-          </div>
-          <div className={styles.cardStat}>
-            <span>Best teammate</span>
-            <span className={styles.value}>
-              {data?.matchStats.bestTeammateName}
-            </span>
-          </div>
-        </GridCard>
-        <GridCard title={'Opponents'}>
-          <div className={styles.cardStat}>
-            <span>Most played</span>
-            <span className={styles.value}>
-              {data?.matchStats.mostPlayedOpponentName}
-            </span>
-          </div>
-          <div className={styles.cardStat}>
-            <span>Best opponent</span>
-            <span className={styles.value}>TO DO</span>
-          </div>
-        </GridCard>
         <GridCard title={'Average score per mod'}>
           <RadarChart averageModScore={data?.modStats} />
         </GridCard>
diff --git a/components/Charts/AreaChart/AreaChart.module.css b/components/Charts/AreaChart/AreaChart.module.css
index 930b785..8e46bb9 100644
--- a/components/Charts/AreaChart/AreaChart.module.css
+++ b/components/Charts/AreaChart/AreaChart.module.css
@@ -28,6 +28,18 @@
   color: hsla(var(--tooltip-color), 0.92);
   cursor: default;
   pointer-events: auto;
+  align-items: center;
+}
+
+.tooltip .headerDate {
+  color: #ddd;
+  font-weight: 600;
+  font-size: 0.95em;
+  margin-left: auto;
+  text-align: right;
+  padding-left: 1.5em;
+  display: flex;
+  flex-flow: row nowrap;
 }
 
 .tooltip ul {
diff --git a/components/Charts/AreaChart/AreaChart.tsx b/components/Charts/AreaChart/AreaChart.tsx
index 0dd3f6c..fe44691 100644
--- a/components/Charts/AreaChart/AreaChart.tsx
+++ b/components/Charts/AreaChart/AreaChart.tsx
@@ -8,6 +8,7 @@ import {
   LineElement,
   LinearScale,
   PointElement,
+  TimeScale,
   Title,
   Tooltip,
 } from 'chart.js';
@@ -16,6 +17,7 @@ import { useEffect, useState } from 'react';
 import { Line } from 'react-chartjs-2';
 import styles from './AreaChart.module.css';
 
+import 'chartjs-adapter-date-fns';
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -24,7 +26,8 @@ ChartJS.register(
   Title,
   Tooltip,
   Filler,
-  Legend
+  Legend,
+  TimeScale
 );
 
 const getOrCreateTooltip = (chart) => {
@@ -45,6 +48,16 @@ const getOrCreateTooltip = (chart) => {
   return tooltipEl;
 };
 
+function formatDateTooltip(date) {
+  const year = date.toLocaleString('default', { year: 'numeric' });
+  const month = date.toLocaleString('default', {
+    month: '2-digit',
+  });
+  const day = date.toLocaleString('default', { day: '2-digit' });
+
+  return [year, month, day].join('-');
+}
+
 export default function AreaChart({
   ratingStats,
   rankChart,
@@ -77,8 +90,14 @@ export default function AreaChart({
   let tournamentsTooltip: object[];
 
   if (ratingStats) {
+    const currentDay = new Date().toLocaleDateString(
+      'en-US',
+      dateFormatOptions
+    );
+    let latestRating = 0;
+
     labels = ratingStats.map((day) => {
-      return new Date(day[0].tooltipInfo.matchDate).toLocaleDateString(
+      return new Date(day[0].timestamp).toLocaleDateString(
         'en-US',
         dateFormatOptions
       );
@@ -87,9 +106,10 @@ export default function AreaChart({
     tournamentsTooltip = ratingStats.map((day) => {
       let matches = [];
       day.forEach((match) => {
-        match.tooltipInfo.matchDate = new Date(
-          match.tooltipInfo.matchDate
-        ).toLocaleDateString('en-US', dateFormatOptions);
+        match.timestamp = new Date(match.timestamp).toLocaleDateString(
+          'en-US',
+          dateFormatOptions
+        );
 
         return matches.push(match);
       });
@@ -98,13 +118,21 @@ export default function AreaChart({
 
     dataForGraph = ratingStats.map((day) => {
       if (day.length > 1) {
+        latestRating = day[day.length - 1].ratingAfter.toFixed(0);
         return day[day.length - 1].ratingAfter.toFixed(0);
       }
 
       if (day.length === 1) {
+        latestRating = day[0].ratingAfter.toFixed(0);
         return day[0].ratingAfter.toFixed(0);
       }
     });
+
+    labels.push(currentDay);
+    tournamentsTooltip.push([
+      { name: 'Decay', ratingChange: 0, timestamp: currentDay },
+    ]);
+    dataForGraph.push(latestRating);
   }
 
   /* if (rankChart) {
@@ -140,9 +168,7 @@ export default function AreaChart({
 
     if (tooltip.body && ratingStats) {
       const matchesLines = new Set(
-        ...tournamentsTooltip.filter(
-          (day) => day[0].tooltipInfo.matchDate == tooltip.title
-        )
+        ...tournamentsTooltip.filter((day) => day[0].timestamp == tooltip.title)
       );
 
       /* TOOLTIP HEADER */
@@ -154,18 +180,24 @@ export default function AreaChart({
       const headerValue = document.createElement('span');
       headerValue.className = styles.headerValue;
       headerValue.innerHTML = tooltip.body[0].lines[0];
+      const headerDate = document.createElement('span');
+      headerDate.className = styles.headerDate;
+      matchesLines.forEach((match) => (headerDate.innerHTML = match.timestamp));
 
       header.appendChild(headerProperty);
       header.appendChild(headerValue);
+      header.appendChild(headerDate);
 
       const matchesList = document.createElement('ul');
       matchesLines.forEach((match) => {
         const li = document.createElement('li');
 
         const matchName = document.createElement('a');
-        matchName.href = match.tooltipInfo.mpLink;
-        matchName.target = '_blank';
-        matchName.innerHTML = match.tooltipInfo.matchName;
+        matchName.href = match?.matchOsuId
+          ? `https://osu.ppy.sh/mp/${match?.matchOsuId}`
+          : '#';
+        matchName.target = match?.matchOsuId ? '_blank' : '_self';
+        matchName.innerHTML = match.name;
 
         const ratingChange = document.createElement('span');
         ratingChange.innerHTML = match.ratingChange.toFixed(1);
@@ -198,13 +230,13 @@ export default function AreaChart({
 
     // Display, position, and set styles for font
     tooltipEl.style.opacity = 1;
-    tooltipEl.style.top = positionY + tooltip.caretY + 5 + 'px';
+    tooltipEl.style.top = positionY + tooltip.caretY + 8 + 'px';
     tooltipEl.style.font = tooltip.options.bodyFont.string;
     tooltipEl.style.padding =
       tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
     tooltipEl.style.pointerEvents = 'none';
 
-    var offset = tooltip.width + 120;
+    var offset = tooltip.width + 80; /* 120 */
     if (chart.width / 2 < tooltip.caretX) {
       offset *= -1;
     } else {
@@ -241,13 +273,24 @@ export default function AreaChart({
     maintainAspectRatio: false,
     scales: {
       x: {
+        /* type: 'time', */
+        /* time: {
+          unit: 'day',
+          distribution: 'series',
+          tooltipFormat: 'dd.M.yyyy',
+          displayFormats: {
+            day: 'dd.M',
+          },
+          parser: 'dd/M/yyyy',
+        }, */
         ticks: {
           font: {
             size: 16,
             family: font,
           },
           autoSkip: true,
-          maxTicksLimit: 8,
+          maxTicksLimit: 7,
+          major: { enabled: true },
         },
       },
       y: {
diff --git a/components/ErrorToast/ErrorToast.module.css b/components/ErrorToast/ErrorToast.module.css
new file mode 100644
index 0000000..946fba2
--- /dev/null
+++ b/components/ErrorToast/ErrorToast.module.css
@@ -0,0 +1,50 @@
+.toast {
+  width: 26em;
+  height: auto;
+  background-color: hsla(var(--toast-error-border));
+  color: #222;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  margin-left: -13em;
+  border-radius: 0.3rem;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  border: 0.4em solid hsl(var(--toast-error-border));
+  font-family: var(--font-families);
+  transform: translateY(-1em);
+  opacity: 1;
+}
+
+.toast .header {
+  display: flex;
+  flex-flow: row;
+  padding: 0.6em 1em 0.7em 1em;
+  font-weight: 700;
+  gap: 1.2em;
+  align-items: center;
+}
+
+.toast .header :first-child {
+  position: relative;
+}
+
+.toast .header :first-child::after {
+  content: '/';
+  position: absolute;
+  top: -0.04em;
+  right: -0.7em;
+  font-weight: 300;
+  color: #333;
+  font-size: 1.1em;
+}
+
+.toast .body {
+  padding: 1em;
+  background-color: hsla(var(--toast-error-bg), 0.8);
+  border-radius: 0.2rem;
+}
diff --git a/components/ErrorToast/ErrorToast.tsx b/components/ErrorToast/ErrorToast.tsx
new file mode 100644
index 0000000..ab1aa3b
--- /dev/null
+++ b/components/ErrorToast/ErrorToast.tsx
@@ -0,0 +1,42 @@
+import { motion } from 'framer-motion';
+import styles from './ErrorToast.module.css';
+
+export default function ErrorToast({
+  status,
+  text,
+  message,
+}: {
+  status: number;
+  text: string;
+  message: string;
+}) {
+  const initial = {
+    translateY: '0.5em',
+    opacity: 0,
+  };
+
+  const animate = {
+    translateY: '-1em',
+    opacity: 1,
+  };
+
+  const exit = {
+    translateY: '1em',
+    opacity: 0,
+  };
+
+  return (
+    <motion.div
+      initial={initial}
+      animate={animate}
+      exit={exit}
+      className={styles.toast}
+    >
+      <div className={styles.header}>
+        <span>{status}</span>
+        <span>{text}</span>
+      </div>
+      <div className={styles.body}>{message}</div>
+    </motion.div>
+  );
+}
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index b86368d..20ea156 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -4,7 +4,7 @@ import styles from './Footer.module.css';
 export default function Footer() {
   return (
     <div className={styles.footer}>
-      <div className={styles.copyright}>© o!TR 2023</div>
+      <div className={styles.copyright}>© o!TR 2024</div>
       <div className={styles.actions}>
         <span>Staff</span>
         <span>Privacy</span>
diff --git a/components/LayoutProvider/LayoutProvider.tsx b/components/LayoutProvider/LayoutProvider.tsx
new file mode 100644
index 0000000..b4509c2
--- /dev/null
+++ b/components/LayoutProvider/LayoutProvider.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+// Use usePathname for catching route name.
+import { usePathname } from 'next/navigation';
+import NavBar from '../NavBar/NavBar';
+
+export const LayoutProvider = ({ children }: { children: React.ReactNode }) => {
+  const pathname = usePathname();
+  return (
+    <>
+      {pathname !== '/unauthorized' && <NavBar />}
+      {children}
+    </>
+  );
+};
diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index d3d26bc..97ce2eb 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -1,8 +1,11 @@
+'use client';
+
+import { getOsuModeCookie } from '@/app/actions';
 import moonSVG from '@/public/icons/moon.svg';
 import logo from '@/public/logos/small.svg';
-import { cookies } from 'next/headers';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 import HamburgerMobile from './HamburgerMobile/HamburgerMobile';
 import ModeSwitcher from './ModeSwitcher/ModeSwitcher';
 import styles from './NavBar.module.css';
@@ -10,7 +13,14 @@ import Routes from './Routes/Routes';
 import UserLogged from './UserLogged/UserLogged';
 
 export default function NavBar() {
-  const cookieMode = cookies().get('OTR-user-selected-osu-mode');
+  const [cookieMode, setCookieMode] = useState({});
+
+  useEffect(() => {
+    const cookie = Promise.resolve(getOsuModeCookie());
+    cookie.then((value) => {
+      setCookieMode(value);
+    });
+  }, []);
 
   return (
     <nav className={styles.navbar}>
@@ -19,9 +29,9 @@ export default function NavBar() {
       </Link>
       <div className={styles.content}>
         <Routes />
-        <Link href={'/donate'}>Donate</Link>
+        {/* <Link href={'/donate'}>Donate</Link> */}
         <div className={styles.actions}>
-          <ModeSwitcher mode={cookieMode?.value} />
+          {cookieMode?.value && <ModeSwitcher mode={cookieMode?.value} />}
           <button>
             <div className={styles.darkModeSwitcher}>
               <Image src={moonSVG} alt="Dark Mode Switcher" fill />
diff --git a/package-lock.json b/package-lock.json
index d81464a..230f97b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "chart.js": "^4.4.0",
+        "chartjs-adapter-date-fns": "^3.0.0",
         "clsx": "^2.0.0",
         "framer-motion": "^10.16.4",
         "next": "14.0.1",
@@ -918,6 +919,15 @@
         "pnpm": ">=7"
       }
     },
+    "node_modules/chartjs-adapter-date-fns": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
+      "integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
+      "peerDependencies": {
+        "chart.js": ">=2.8.0",
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -981,6 +991,16 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz",
+      "integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 33240dd..7cd90a5 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "chart.js": "^4.4.0",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "clsx": "^2.0.0",
     "framer-motion": "^10.16.4",
     "next": "14.0.1",
diff --git a/util/ErrorContext.tsx b/util/ErrorContext.tsx
new file mode 100644
index 0000000..71d1717
--- /dev/null
+++ b/util/ErrorContext.tsx
@@ -0,0 +1,55 @@
+'use client';
+import { AnimatePresence } from 'framer-motion';
+import { createContext, useEffect, useMemo, useState } from 'react';
+
+import ErrorToast from '@/components/ErrorToast/ErrorToast';
+
+import type { ReactNode } from 'react';
+
+export const ErrorContext = createContext<object | undefined>(undefined);
+
+export const SetErrorContext = createContext<object | undefined>(undefined);
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function ErrorProvider({ children }: Props): JSX.Element {
+  const [error, setError] = useState<object | undefined>(undefined);
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    if (!error || show) return;
+
+    if (
+      error?.status === 400 ||
+      error?.message === 'No access token cookie found.'
+    )
+      return;
+
+    if (error?.status === 401 && error?.message == "") return;
+
+    setShow(true);
+    setTimeout(() => {
+      setError(undefined);
+      setShow(false);
+    }, 6000);
+  }, [error, show]);
+
+  return (
+    <SetErrorContext.Provider value={useMemo(() => setError, [setError])}>
+      <ErrorContext.Provider value={useMemo(() => error, [error])}>
+        <AnimatePresence>
+          {show && (
+            <ErrorToast
+              message={error?.message}
+              status={error?.status}
+              text={error?.text}
+            />
+          )}
+        </AnimatePresence>
+        {children}
+      </ErrorContext.Provider>
+    </SetErrorContext.Provider>
+  );
+}
diff --git a/util/hooks.ts b/util/hooks.ts
index c401b2e..08d2fbb 100644
--- a/util/hooks.ts
+++ b/util/hooks.ts
@@ -1,6 +1,15 @@
 import { useContext } from 'react';
+import { ErrorContext, SetErrorContext } from './ErrorContext';
 import { UserLoggedContext } from './UserLoggedContext';
 
 export function useUser() {
   return useContext(UserLoggedContext);
 }
+
+export function useError() {
+  return useContext(ErrorContext);
+}
+
+export function useSetError() {
+  return useContext(SetErrorContext);
+}