diff --git a/docs/changelogs.md b/docs/changelogs.md
index 159492d9..77d47b80 100644
--- a/docs/changelogs.md
+++ b/docs/changelogs.md
@@ -5,6 +5,20 @@ description: Changelogs for Kener
 
 # Changelogs
 
+## v3.0.1
+
+<picture>
+  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.webp" type="image/webp">
+  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.gif" alt="🚀" width="32" height="32">
+</picture>
+
+Here are the changes in this release
+
+### Features
+
+-   Support for i18n in dates.
+-   Support of i18n in monitor embeds. Read more [here](/docs/embed#javascript-parameters)
+
 ## v3.0.0
 
 <picture>
diff --git a/docs/embed.md b/docs/embed.md
index 5f811f07..81f4e4ed 100644
--- a/docs/embed.md
+++ b/docs/embed.md
@@ -34,6 +34,7 @@ You can pass the following parameters to the embed code
 -   `theme`: You can pass `light` or `dark` theme
 -   `monitor`: The monitor url
 -   `bgc`: Background color of the monitor. Only supports hex color codes. DO NOT include the `#` symbol
+-   `locale`: The locale of the monitor. You can pass the code of the locale you have enabled in your kener settings
 
 Replace `[hostname]` with your kener hostname and `[tag]` with your monitor tag.
 
@@ -79,6 +80,7 @@ You can pass the following parameters to the embed code
 
 -   `theme`: You can pass `light` or `dark` theme
 -   `bgc`: Background color of the monitor. Only supports hex color codes. DO NOT include the `#` symbol
+-   `locale`: The locale of the monitor. You can pass the code of the locale you have enabled in your kener settings
 
 ### Demo
 
diff --git a/docs/i18n.md b/docs/i18n.md
index d5e49cf4..6d390641 100644
--- a/docs/i18n.md
+++ b/docs/i18n.md
@@ -123,6 +123,22 @@ Open `src/lib/locales/locales.json` and add the locale code and the name of the
 
 ### Step 3
 
+Open `src/lib/i18n/client.js` and add the locale code to the `locales` array.
+
+```js
+import { ru, enUS, hi, de, zhCN, vi, ja, nl, da, fr, ko } from "date-fns/locale";
+```
+
+This should be valid for the date-fns library.
+
+Next add a mapping in the `locales` object.
+
+```js
+const locales = { ru, en: enUS, hi, dk: de, "zh-CN": zhCN, vi, ja, nl, dk: da, fr, ko };
+```
+
+### Step 4
+
 Restart the server and you will see a dropdown in the navbar to select the language.
 
 <div class="note info">
diff --git a/docs/roadmap.md b/docs/roadmap.md
index 34a095c3..b466bbfa 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -28,10 +28,16 @@ description: Roadmap for Kener
 
 ☐ Introduce sitemap.xml
 
-☐ Migrate from moment to date-fns
+☑ ~~Migrate from moment to date-fns for status page~~ (moment remains in dashboard. Will remove later)
 
 ☑ ~~Create Admin UI~~ Released in (3.0.0)
 
+☐ Webhook customization
+
+☐ Monitor Update Screen
+
+☐ i18n for admin dashboard
+
 ---
 
 Request a feature or start a discussion [here](https://github.com/rajnandan1/kener/discussions/119)
diff --git a/embed.html b/embed.html
index 9a2a57fe..434fe164 100644
--- a/embed.html
+++ b/embed.html
@@ -14,7 +14,7 @@
 		Hello world
 		<script
 			async
-			src="http://localhost:3000/embed/monitor-earth/js?theme=light&monitor=http://localhost:3000/embed/monitor-earth"
+			src="http://localhost:3000/embed/monitor-earth/js?theme=dark&bgc=111&locale=hi&monitor=http://localhost:3000/embed/monitor-earth"
 		></script>
 	</body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index ed93cac7..bb049a14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
 				"bits-ui": "^0.9.9",
 				"clsx": "^2.0.0",
 				"croner": "^7.0.5",
+				"date-fns": "^4.1.0",
 				"dns2": "^2.1.0",
 				"dotenv": "^16.4.5",
 				"express": "^4.18.2",
@@ -2098,6 +2099,23 @@
 				"url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
 			}
 		},
+		"node_modules/concurrently/node_modules/date-fns": {
+			"version": "2.30.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.21.0"
+			},
+			"engines": {
+				"node": ">=0.11"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/date-fns"
+			}
+		},
 		"node_modules/config-chain": {
 			"version": "1.1.13",
 			"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
@@ -2283,19 +2301,13 @@
 			}
 		},
 		"node_modules/date-fns": {
-			"version": "2.30.0",
-			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-			"dev": true,
-			"dependencies": {
-				"@babel/runtime": "^7.21.0"
-			},
-			"engines": {
-				"node": ">=0.11"
-			},
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"license": "MIT",
 			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/date-fns"
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
 			}
 		},
 		"node_modules/date-picker-svelte": {
diff --git a/package.json b/package.json
index 846de3fa..2f43f5f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "kener",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"private": false,
 	"license": "MIT",
 	"description": "Kener: An open-source Node.js status page application for real-time service monitoring, incident management, and customizable reporting. Simplify service outage tracking, enhance incident communication, and ensure a seamless user experience.",
@@ -76,6 +76,7 @@
 		"bits-ui": "^0.9.9",
 		"clsx": "^2.0.0",
 		"croner": "^7.0.5",
+		"date-fns": "^4.1.0",
 		"dns2": "^2.1.0",
 		"dotenv": "^16.4.5",
 		"express": "^4.18.2",
diff --git a/src/kener.css b/src/kener.css
index 3f2e6aad..8ab84f8f 100644
--- a/src/kener.css
+++ b/src/kener.css
@@ -761,7 +761,7 @@ textarea::placeholder {
 	vertical-align: middle;
 	width: auto;
 	word-break: keep-all;
-	z-index: 0;
+	z-index: 10;
 }
 
 @media (min-width: 768px) {
diff --git a/src/lib/components/IncidentNew.svelte b/src/lib/components/IncidentNew.svelte
index ec881309..d77f93cf 100644
--- a/src/lib/components/IncidentNew.svelte
+++ b/src/lib/components/IncidentNew.svelte
@@ -1,20 +1,23 @@
 <script>
-	import moment from "moment";
+	import { formatDistanceToNow, formatDistance } from "date-fns";
+
 	import * as Accordion from "$lib/components/ui/accordion";
-	import { l } from "$lib/i18n/client";
+	import { l, f, fd, fdn } from "$lib/i18n/client";
 	import { base } from "$app/paths";
 	export let incident;
 	export let index;
 	export let lang;
-	let startTime = incident.start_date_time;
-	// let startTime = moment(incident.incident_start_time * 1000).format("MMMM Do YYYY, h:mm:ss a");
-	let endTime = parseInt(new Date() / 1000);
-	let nowTime = parseInt(new Date() / 1000);
+	export let selectedLang = "en";
+	let startTime = new Date(incident.start_date_time * 1000);
+	let endTime = new Date();
+	let nowTime = new Date();
 	if (incident.end_date_time) {
-		endTime = incident.end_date_time;
+		endTime = new Date(incident.end_date_time * 1000);
 	}
-	let lastedFor = moment.duration(endTime - startTime, "seconds").humanize();
-	let startedAt = moment.duration(nowTime - startTime, "seconds").humanize();
+
+	const lastedFor = fd(startTime, endTime, selectedLang);
+	const startedAt = fdn(startTime, selectedLang);
+
 	let isFuture = false;
 	//is future incident
 	if (nowTime < startTime) {
@@ -94,7 +97,7 @@
 							</div>
 						{/if}
 						<p class="my-3 text-xs font-semibold uppercase text-muted-foreground">
-							Updates
+							{l(lang, "Updates")}
 						</p>
 						{#if incident.comments.length > 0}
 							<ol class="relative mt-2 pl-14">
@@ -108,8 +111,10 @@
 										<time
 											class=" mb-1 text-sm font-medium leading-none text-muted-foreground"
 										>
-											{moment(comment.commented_at * 1000).format(
-												"MMMM Do YYYY, h:mm:ss a"
+											{f(
+												new Date(comment.commented_at * 1000),
+												"MMMM do yyyy, h:mm:ss a",
+												selectedLang
 											)}
 										</time>
 
diff --git a/src/lib/components/monitor.svelte b/src/lib/components/monitor.svelte
index 8c3a77f4..7903baf4 100644
--- a/src/lib/components/monitor.svelte
+++ b/src/lib/components/monitor.svelte
@@ -4,6 +4,8 @@
 	import { Badge } from "$lib/components/ui/badge";
 	import { Button } from "$lib/components/ui/button";
 	import { base } from "$app/paths";
+	import { sub, startOfDay, getUnixTime } from "date-fns";
+
 	import {
 		Share2,
 		Link,
@@ -19,10 +21,9 @@
 	import { createEventDispatcher } from "svelte";
 	import { afterUpdate } from "svelte";
 	import axios from "axios";
-	import { l, summaryTime, n, ampm } from "$lib/i18n/client";
+	import { l, summaryTime, f } from "$lib/i18n/client";
 	import { hoverAction, clickOutsideAction, slide } from "svelte-legos";
 	import LoaderBoxes from "$lib/components/loaderbox.svelte";
-	import moment from "moment";
 	import NumberFlow from "@number-flow/svelte";
 	import Incident from "$lib/components/IncidentNew.svelte";
 
@@ -33,6 +34,8 @@
 	export let localTz;
 	export let lang;
 	export let embed = false;
+	export let selectedLang = "en";
+
 	let _0Day = {};
 	let _90Day = monitor.pageData._90Day;
 	let uptime90Day = monitor.pageData.uptime90Day;
@@ -87,33 +90,31 @@
 			});
 		}, 1000 * 0.2);
 	}
-
 	let uptimesRollers = [
 		{
 			text: `${l(lang, "90 Days")}`,
-			startTs: moment().subtract(90, "days").startOf("day").unix(),
+			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 90 }))),
 			value: uptime90Day
 		},
 		{
 			text: `${l(lang, "60 Days")}`,
-			startTs: moment().subtract(59, "days").startOf("day").unix(),
-			value: uptime90Day
+			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 59 })))
 		},
 		{
 			text: `${l(lang, "30 Days")}`,
-			startTs: moment().subtract(29, "days").startOf("day").unix()
+			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 29 })))
 		},
 		{
 			text: `${l(lang, "14 Days")}`,
-			startTs: moment().subtract(13, "days").startOf("day").unix()
+			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 13 })))
 		},
 		{
 			text: `${l(lang, "7 Days")}`,
-			startTs: moment().subtract(6, "days").startOf("day").unix()
+			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 6 })))
 		},
 		{
 			text: l(lang, "Today"),
-			startTs: moment().startOf("day").unix()
+			startTs: getUnixTime(startOfDay(new Date()))
 		}
 	];
 
@@ -171,7 +172,7 @@
 		}
 		let incidentIDs = incidentObj?.ids || [];
 		dayUptime = "NA";
-		dateFetchedFor = moment(new Date(bar.timestamp * 1000)).format("dddd, MMMM Do, YYYY");
+		dateFetchedFor = f(new Date(bar.timestamp * 1000), "EEEE, MMMM do, yyyy", selectedLang);
 		showDailyDataModal = true;
 		loadingDayData = true;
 		dayIncidentsFull = [];
@@ -328,9 +329,12 @@
 						{#if bar.showDetails}
 							<div class="show-hover absolute text-sm">
 								<div class="text-{bar.textClass} text-xs font-semibold">
-									{moment(new Date(bar.timestamp * 1000)).format(
-										"dddd, MMMM Do, YYYY"
-									)} -
+									{f(
+										new Date(bar.timestamp * 1000),
+										"EEEE, MMMM do, yyyy",
+										selectedLang
+									)}
+									-
 									{l(lang, summaryTime(bar.summaryStatus), {
 										status: bar.summaryStatus,
 										duration: bar.summaryDuration
diff --git a/src/lib/components/shareMenu.svelte b/src/lib/components/shareMenu.svelte
index 2cc96634..ce43bfe2 100644
--- a/src/lib/components/shareMenu.svelte
+++ b/src/lib/components/shareMenu.svelte
@@ -4,12 +4,13 @@
 	import { base } from "$app/paths";
 	import { onMount } from "svelte";
 	import { analyticsEvent } from "$lib/boringOne";
-	import { l, summaryTime, n, ampm } from "$lib/i18n/client";
+	import { l, summaryTime } from "$lib/i18n/client";
 	import * as RadioGroup from "$lib/components/ui/radio-group";
 	import { Label } from "$lib/components/ui/label";
 
 	export let monitor;
 	export let lang;
+	export let selectedLang = "en";
 	let theme = "light";
 	let copiedLink = false;
 	let embedType = "js";
diff --git a/src/lib/i18n/client.js b/src/lib/i18n/client.js
index d2bbbc89..1d5b6f83 100644
--- a/src/lib/i18n/client.js
+++ b/src/lib/i18n/client.js
@@ -1,4 +1,31 @@
 // @ts-nocheck
+
+import { format, formatDistance, formatDistanceToNow, formatDuration } from "date-fns";
+import { ru, enUS, hi, de, zhCN, vi, ja, nl, da, fr, ko } from "date-fns/locale";
+
+const locales = { ru, en: enUS, hi, de, "zh-CN": zhCN, vi, ja, nl, dk: da, fr, ko };
+
+const f = function (date, formatStr, locale) {
+	return format(date, formatStr, {
+		locale: locales[locale] || enUS
+	});
+};
+
+const fd = function (start, end, locale) {
+	return formatDistance(start, end, { addSuffix: false, locale: locales[locale] });
+};
+const fdn = function (start, locale) {
+	return formatDistanceToNow(start, { addSuffix: true, locale: locales[locale] });
+};
+const fdm = function (duration, locale) {
+	return formatDuration(duration, {
+		format: ["hours", "minutes"],
+		zero: false,
+		delimiter: " ",
+		locale: locales[locale]
+	});
+};
+
 const l = function (sessionLangMap, key, args = {}) {
 	const keys = key.split(".");
 	let obj = sessionLangMap;
@@ -31,30 +58,4 @@ const summaryTime = function (summaryStatus) {
 	return "%status for %duration";
 };
 
-const n = function (
-	/** @type {{ numbers: { [x: string]: any; }; }} */ sessionLangMap,
-	/** @type {string} */ inputString
-) {
-	const translations = sessionLangMap.numbers;
-	console.trace("translations", translations);
-	// @ts-ignore
-	return inputString.replace(
-		/\d/g,
-		(/** @type {string | number} */ match) => translations[match] || match
-	);
-};
-const ampm = function (
-	/** @type {{ monitor: { [x: string]: any; }; }} */ sessionLangMap,
-	/** @type {string} */ inputString
-) {
-	const translations = sessionLangMap.monitor;
-
-	// @ts-ignore
-	let resp = inputString.replace(/(am|pm)/g, function (/** @type {string | number} */ match) {
-		return translations[match] || match;
-	});
-
-	return resp;
-};
-
-export { l, summaryTime, n, ampm };
+export { l, summaryTime, f, formatDistance, fd, fdn, fdm };
diff --git a/src/lib/locales/locales.json b/src/lib/locales/locales.json
index 93d85f74..620c5e28 100644
--- a/src/lib/locales/locales.json
+++ b/src/lib/locales/locales.json
@@ -31,15 +31,15 @@
 		"code": "ru",
 		"name": "Русский"
 	},
-  {
+	{
 		"code": "dk",
 		"name": "Dansk"
 	},
-  {
+	{
 		"code": "nl",
 		"name": "Nederlands"
 	},
-  {
+	{
 		"code": "ko",
 		"name": "한국어"
 	}
diff --git a/src/lib/server/controllers/controller.js b/src/lib/server/controllers/controller.js
index e95e52fa..435fc1c7 100644
--- a/src/lib/server/controllers/controller.js
+++ b/src/lib/server/controllers/controller.js
@@ -454,9 +454,8 @@ export const CreateIncident = async (data) => {
 	}
 
 	let newIncident = await db.createIncident(incident);
-
 	return {
-		incident_id: newIncident.lastInsertRowid
+		incident_id: newIncident[0]
 	};
 };
 
@@ -713,7 +712,17 @@ export const CookieConfig = () => {
 		sameSite: "lax"
 	};
 };
+export const GetLocaleFromCookie = (site, cookies) => {
+	let selectedLang = "en";
+	const localLangCookie = cookies.get("localLang");
 
+	if (!!localLangCookie && site.i18n?.locales.find((l) => l.code === localLangCookie)) {
+		selectedLang = localLangCookie;
+	} else if (site.i18n?.defaultLocale && site.i18n?.locales[site.i18n.defaultLocale]) {
+		selectedLang = site.i18n.defaultLocale;
+	}
+	return selectedLang;
+};
 export const IsLoggedInSession = async (cookies) => {
 	let tokenData = cookies.get("kener-user");
 	if (!!!tokenData) {
diff --git a/src/lib/server/db/seedSiteData.js b/src/lib/server/db/seedSiteData.js
index c77cf22c..2cd332f3 100644
--- a/src/lib/server/db/seedSiteData.js
+++ b/src/lib/server/db/seedSiteData.js
@@ -41,7 +41,7 @@ const seedSiteData = {
 	nav: [
 		{ name: "Documentation", url: "/docs/home", iconURL: "" },
 		{ name: "Github", iconURL: "", url: "https://github.com/rajnandan1/kener" },
-		{ name: "Buy me a coffee", iconURL: "", url: "https://buymeacoffee.com/rajnandan1" }
+		{ name: "Login", iconURL: "", url: "/manage/signin" }
 	],
 	hero: {
 		title: "Kener is a Modern Open-Source Status Page System",
@@ -51,13 +51,7 @@ const seedSiteData = {
 		'<p class="text-center">\nMade using \n<a href="https://github.com/rajnandan1/kener" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">\n  Kener\n</a>\nan open source status page system built with Svelte and TailwindCSS.<br/>\nCreated with ❤️ by <a href="https://rajnandan.com" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">Raj Nandan Sharma</a>.\n</p>\n',
 	i18n: {
 		defaultLocale: "en",
-		locales: [
-			{ code: "en", name: "English", selected: true, disabled: false },
-			{ code: "hi", name: "हिन्दी", selected: true, disabled: false },
-			{ code: "zh_CN", name: "中文", selected: true, disabled: false },
-			{ code: "ja", name: "日本語", selected: true, disabled: false },
-			{ code: "vi", name: "Tiếng Việt", selected: true, disabled: false }
-		]
+		locales: [{ code: "en", name: "English", selected: true, disabled: false }]
 	},
 	pattern: "none",
 	analytics: [
diff --git a/src/lib/server/page.js b/src/lib/server/page.js
index b66bf77b..1f2fa7cf 100644
--- a/src/lib/server/page.js
+++ b/src/lib/server/page.js
@@ -8,17 +8,18 @@ import {
 	ParseUptime,
 	GetDayStartTimestampUTC
 } from "$lib/server/tool.js";
-
+import { formatDuration, intervalToDuration } from "date-fns";
+import { fdm } from "$lib/i18n/client";
 import { GetDataGroupByDayAlternative } from "$lib/server/controllers/controller.js";
 
-function getSummaryDuration(numOfMinute) {
-	if (numOfMinute > 59) {
-		let hour = Math.floor(numOfMinute / 60);
-		let minute = numOfMinute % 60;
-		return `${hour} hours ${minute} minute${minute > 1 ? "s" : ""}`;
-	} else {
-		return `${numOfMinute} minute${numOfMinute > 1 ? "s" : ""}`;
-	}
+function getSummaryDuration(numOfMinute, selectedLang) {
+	// Convert minutes to milliseconds and create duration object
+	const duration = intervalToDuration({
+		start: new Date(0),
+		end: new Date(numOfMinute * 60 * 1000)
+	});
+
+	return fdm(duration, selectedLang);
 }
 function getTimezoneOffset(timeZone) {
 	const formatter = new Intl.DateTimeFormat("en-US", { timeZone, timeZoneName: "short" });
@@ -71,9 +72,8 @@ function getCountOfSimilarStatuesEnd(arr, statusType) {
 	return count;
 }
 
-const FetchData = async function (site, monitor, localTz) {
+const FetchData = async function (site, monitor, localTz, selectedLang) {
 	const secondsInDay = 24 * 60 * 60;
-
 	//get offset from utc in minutes
 
 	const now = GetMinuteStartNowTimestampUTC() + 60;
@@ -136,12 +136,12 @@ const FetchData = async function (site, monitor, localTz) {
 				StatusObj.DEGRADED,
 				site.barStyle
 			);
-			summaryDuration = getSummaryDuration(dayData.DEGRADED);
+			summaryDuration = getSummaryDuration(dayData.DEGRADED, selectedLang);
 			summaryStatus = "DEGRADED";
 		}
 		if (dayData.DOWN >= monitor.day_down_minimum_count) {
 			cssClass = returnStatusClass(dayData.DOWN, dayData.UP, StatusObj.DOWN, site.barStyle);
-			summaryDuration = getSummaryDuration(dayData.DOWN);
+			summaryDuration = getSummaryDuration(dayData.DOWN, selectedLang);
 			summaryStatus = "DOWN";
 		}
 
@@ -175,13 +175,17 @@ const FetchData = async function (site, monitor, localTz) {
 
 		if (!!lastRow && lastRow.status == "DEGRADED") {
 			summaryDuration = getSummaryDuration(
-				getCountOfSimilarStatuesEnd(todayDataDb, "DEGRADED")
+				getCountOfSimilarStatuesEnd(todayDataDb, "DEGRADED"),
+				selectedLang
 			);
 			summaryStatus = "DEGRADED";
 			summaryColorClass = "api-degraded";
 		}
 		if (!!lastRow && lastRow.status == "DOWN") {
-			summaryDuration = getSummaryDuration(getCountOfSimilarStatuesEnd(todayDataDb, "DOWN"));
+			summaryDuration = getSummaryDuration(
+				getCountOfSimilarStatuesEnd(todayDataDb, "DOWN"),
+				selectedLang
+			);
 			summaryStatus = "DOWN";
 			summaryColorClass = "api-down";
 		}
diff --git a/src/routes/(docs)/+layout.svelte b/src/routes/(docs)/+layout.svelte
index 804a5c57..0a828822 100644
--- a/src/routes/(docs)/+layout.svelte
+++ b/src/routes/(docs)/+layout.svelte
@@ -53,6 +53,7 @@
 <svelte:window on:pagechange={pageChange} on:rightbar={updateTableOfContents} />
 <svelte:head>
 	<link rel="icon" id="kener-app-favicon" href="{base}/logo96.png" />
+
 	<!-- Google tag (gtag.js) -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3MLRXCBFT"></script>
 	<script>
diff --git a/src/routes/(embed)/+layout.server.js b/src/routes/(embed)/+layout.server.js
index 042da496..30371912 100644
--- a/src/routes/(embed)/+layout.server.js
+++ b/src/routes/(embed)/+layout.server.js
@@ -38,21 +38,15 @@ export async function load({ params, route, url, cookies, request }) {
 	if (userAgent?.includes("Chrome-Lighthouse") || userAgent?.includes("bot")) {
 		isBot = true;
 	}
-
+	const query = url.searchParams;
 	//load all files from lib locales folder
-	let selectedLang = "en";
-	const localLangCookie = cookies.get("localLang");
+	let selectedLang = query.get("locale") ? query.get("locale") : "en";
 
-	if (!!localLangCookie && site.i18n?.locales.find((l) => l.code === localLangCookie)) {
-		selectedLang = localLangCookie;
-	} else if (site.i18n?.defaultLocale && site.i18n?.locales[site.i18n.defaultLocale]) {
-		selectedLang = site.i18n.defaultLocale;
-	}
 	let embed = false;
 	if (route.id.endsWith("monitor-[tag]")) {
 		embed = true;
 	}
-	const query = url.searchParams;
+
 	const bgc = query.get("bgc") ? "#" + query.get("bgc") : "";
 	return {
 		site: site,
diff --git a/src/routes/(embed)/embed/monitor-[tag]/+page.server.js b/src/routes/(embed)/embed/monitor-[tag]/+page.server.js
index 1ee94712..f16e77c9 100644
--- a/src/routes/(embed)/embed/monitor-[tag]/+page.server.js
+++ b/src/routes/(embed)/embed/monitor-[tag]/+page.server.js
@@ -17,7 +17,12 @@ export async function load({ params, route, url, parent }) {
 		delete monitors[i].api;
 		delete monitors[i].default_status;
 		monitors[i].embed = true;
-		let data = await FetchData(siteData, monitors[i], parentData.localTz);
+		let data = await FetchData(
+			siteData,
+			monitors[i],
+			parentData.localTz,
+			parentData.selectedLang
+		);
 		monitors[i].pageData = data;
 		monitorsActive.push(monitors[i]);
 	}
diff --git a/src/routes/(embed)/embed/monitor-[tag]/+page.svelte b/src/routes/(embed)/embed/monitor-[tag]/+page.svelte
index 5dd92ee1..4d6e11be 100644
--- a/src/routes/(embed)/embed/monitor-[tag]/+page.svelte
+++ b/src/routes/(embed)/embed/monitor-[tag]/+page.svelte
@@ -43,6 +43,7 @@
 					<Monitor
 						{monitor}
 						localTz={data.localTz}
+						selectedLang={data.selectedLang}
 						lang={data.lang}
 						{embed}
 						on:heightChange={handleHeightChange}
diff --git a/src/routes/(embed)/embed/monitor-[tag]/js/+server.js b/src/routes/(embed)/embed/monitor-[tag]/js/+server.js
index 3fe7b6c0..9bd40930 100644
--- a/src/routes/(embed)/embed/monitor-[tag]/js/+server.js
+++ b/src/routes/(embed)/embed/monitor-[tag]/js/+server.js
@@ -6,6 +6,7 @@ export async function GET({ url, params }) {
 	const uriEmbedded = query.get("monitor");
 	const theme = query.get("theme") || "light";
 	const bgc = query.get("bgc") || "transparent";
+	const locale = query.get("locale") || "en";
 	const uriOriginal = uriEmbedded;
 
 	const currentSlug = tag;
@@ -15,7 +16,7 @@ export async function GET({ url, params }) {
         var uid = "KENER_" + ~~(new Date().getTime() / 86400000);
         var uriOriginal = "${uriOriginal}";
         var uriOriginalNoProtocol = uriOriginal.split("//").pop();
-        var uriEmbedded = "${uriEmbedded}?theme=${theme}&bgc=${bgc}";
+        var uriEmbedded = "${uriEmbedded}?theme=${theme}&bgc=${bgc}&locale=${locale}";
         var currentSlug = "${currentSlug}";
         var target = document.querySelector("script[src*='" + uriOriginalNoProtocol + "']");
         var iframe = document.createElement("iframe");
diff --git a/src/routes/(kener)/+layout.server.js b/src/routes/(kener)/+layout.server.js
index 03a57b48..d49d055e 100644
--- a/src/routes/(kener)/+layout.server.js
+++ b/src/routes/(kener)/+layout.server.js
@@ -5,7 +5,8 @@ import { base } from "$app/paths";
 import {
 	GetAllSiteData,
 	IsSetupComplete,
-	IsLoggedInSession
+	IsLoggedInSession,
+	GetLocaleFromCookie
 } from "$lib/server/controllers/controller.js";
 
 export async function load({ params, route, url, cookies, request }) {
@@ -36,15 +37,7 @@ export async function load({ params, route, url, cookies, request }) {
 		isBot = true;
 	}
 
-	//load all files from lib locales folder
-	let selectedLang = "en";
-	const localLangCookie = cookies.get("localLang");
-
-	if (!!localLangCookie && site.i18n?.locales.find((l) => l.code === localLangCookie)) {
-		selectedLang = localLangCookie;
-	} else if (site.i18n?.defaultLocale && site.i18n?.locales[site.i18n.defaultLocale]) {
-		selectedLang = site.i18n.defaultLocale;
-	}
+	let selectedLang = GetLocaleFromCookie(site, cookies);
 
 	const query = url.searchParams;
 	const bgc = query.get("bgc") ? "#" + query.get("bgc") : "";
diff --git a/src/routes/(kener)/+layout.svelte b/src/routes/(kener)/+layout.svelte
index e5dd16ff..daccdcaf 100644
--- a/src/routes/(kener)/+layout.svelte
+++ b/src/routes/(kener)/+layout.svelte
@@ -34,7 +34,10 @@
 	if (!allLocales) {
 		defaultLocaleValue = "English";
 	} else {
-		defaultLocaleValue = allLocales.find((locale) => locale.code === defaultLocaleKey).name;
+		let lclFi = allLocales.find((locale) => locale.code === defaultLocaleKey);
+		if (lclFi) {
+			defaultLocaleValue = lclFi.name;
+		}
 	}
 	/**
 	 * @param {string} locale
@@ -217,7 +220,7 @@
 			on:click|preventDefault={(e) => {
 				location.href = `${base}/manage/app/site`;
 			}}
-			class="button-77 fixed bottom-8 left-8"
+			class="button-77 fixed bottom-8 left-8 z-50"
 			role="button"
 		>
 			Manage
diff --git a/src/routes/(kener)/+page.server.js b/src/routes/(kener)/+page.server.js
index 0fa02f46..759db4af 100644
--- a/src/routes/(kener)/+page.server.js
+++ b/src/routes/(kener)/+page.server.js
@@ -26,7 +26,12 @@ export async function load({ parent, url }) {
 		delete monitors[i].api;
 		delete monitors[i].default_status;
 
-		let data = await FetchData(siteData, monitors[i], parentData.localTz);
+		let data = await FetchData(
+			siteData,
+			monitors[i],
+			parentData.localTz,
+			parentData.selectedLang
+		);
 		monitors[i].pageData = data;
 
 		monitors[i].activeIncidents = [];
diff --git a/src/routes/(kener)/+page.svelte b/src/routes/(kener)/+page.svelte
index 706f8eb7..f3e96661 100644
--- a/src/routes/(kener)/+page.svelte
+++ b/src/routes/(kener)/+page.svelte
@@ -108,7 +108,12 @@
 		<Card.Root class="w-full">
 			<Card.Content class=" newincidents w-full overflow-hidden p-0">
 				{#each data.unresolvedIncidents as incident, index}
-					<Incident {incident} lang={data.lang} index="incident-{index}" />
+					<Incident
+						{incident}
+						lang={data.lang}
+						index="incident-{index}"
+						selectedLang={data.selectedLang}
+					/>
 				{/each}
 			</Card.Content>
 		</Card.Root>
@@ -161,6 +166,7 @@
 						{monitor}
 						localTz={data.localTz}
 						lang={data.lang}
+						selectedLang={data.selectedLang}
 					/>
 				{/each}
 			</Card.Content>
@@ -246,7 +252,11 @@
 				<X class="h-4 w-4   text-muted-foreground" />
 			</Button>
 			<div class="content">
-				<ShareMenu monitor={activeMonitor} lang={data.lang} />
+				<ShareMenu
+					monitor={activeMonitor}
+					lang={data.lang}
+					selectedLang={data.selectedLang}
+				/>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/(kener)/incidents/+page.server.js b/src/routes/(kener)/incidents/+page.server.js
index 9524abe1..12871a80 100644
--- a/src/routes/(kener)/incidents/+page.server.js
+++ b/src/routes/(kener)/incidents/+page.server.js
@@ -2,8 +2,8 @@
 
 import { redirect } from "@sveltejs/kit";
 import { base } from "$app/paths";
-import moment from "moment";
+import { format } from "date-fns";
 
 export async function load({ parent, url }) {
-	throw redirect(302, base + "/incidents/" + moment().format("MMMM-YYYY"));
+	throw redirect(302, base + "/incidents/" + format(new Date(), "MMMM-yyyy"));
 }
diff --git a/src/routes/(kener)/incidents/[month]/+page.server.js b/src/routes/(kener)/incidents/[month]/+page.server.js
index af7af441..54525fcb 100644
--- a/src/routes/(kener)/incidents/[month]/+page.server.js
+++ b/src/routes/(kener)/incidents/[month]/+page.server.js
@@ -3,27 +3,38 @@
 import {
 	GetMonitors,
 	GetIncidentsOpenHome,
-	GetIncidentsPage
+	GetIncidentsPage,
+	GetLocaleFromCookie
 } from "$lib/server/controllers/controller.js";
 import { BeginningOfDay } from "$lib/server/tool.js";
 import db from "$lib/server/db/db.js";
-import moment from "moment";
+import {
+	format,
+	addMonths,
+	parse,
+	subMonths,
+	getUnixTime,
+	startOfMonth,
+	endOfMonth
+} from "date-fns";
+import { f } from "$lib/i18n/client";
 
-export async function load({ parent, url, params }) {
+export async function load({ parent, url, params, cookies }) {
 	const parentData = await parent();
+
 	let monitors = await GetMonitors({ status: "ACTIVE" });
 	const query = url.searchParams;
 	let todayStart = BeginningOfDay({ timeZone: parentData.localTz });
 	let tomorrowStart = todayStart + 86400;
-
-	let month = params.month;
+	let locale = GetLocaleFromCookie(parentData.site, cookies);
+	let month = params.month; //January-2021
 	if (!!!month) {
-		month = moment().format("MMMM-YYYY");
+		month = format(new Date(), "MMMM-yyyy");
 	}
 
-	let monthStartTs = moment(month, "MMMM-YYYY").unix();
+	let monthStartTs = getUnixTime(startOfMonth(parse(month, "MMMM-yyyy", new Date())));
 
-	let monthEndTs = moment(month, "MMMM-YYYY").endOf("month").unix();
+	let monthEndTs = getUnixTime(endOfMonth(parse(month, "MMMM-yyyy", new Date())));
 
 	let incidents = await GetIncidentsPage(monthStartTs, monthEndTs);
 
@@ -47,8 +58,8 @@ export async function load({ parent, url, params }) {
 
 	return {
 		incidents: incidents,
-		nextMonthName: moment(month, "MMMM-YYYY").add(1, "months").format("MMMM-YYYY"),
-		prevMonthName: moment(month, "MMMM-YYYY").subtract(1, "months").format("MMMM-YYYY"),
-		thisMonthName: month
+		nextMonthName: f(addMonths(parse(month, "MMMM-yyyy", new Date()), 1), "MMMM-yyyy", "en"),
+		prevMonthName: f(subMonths(parse(month, "MMMM-yyyy", new Date()), 1), "MMMM-yyyy", "en"),
+		thisMonthName: f(parse(month, "MMMM-yyyy", new Date()), "MMMM-yyyy", "en")
 	};
 }
diff --git a/src/routes/(kener)/incidents/[month]/+page.svelte b/src/routes/(kener)/incidents/[month]/+page.svelte
index 895b18c0..5841e691 100644
--- a/src/routes/(kener)/incidents/[month]/+page.svelte
+++ b/src/routes/(kener)/incidents/[month]/+page.svelte
@@ -1,14 +1,15 @@
 <script>
-	import moment from "moment";
 	import { Badge } from "$lib/components/ui/badge";
 	import Incident from "$lib/components/IncidentNew.svelte";
 	import { Button } from "$lib/components/ui/button";
 	import { ArrowRight, ArrowLeft, CalendarCheck2, ChevronLeft } from "lucide-svelte";
 	import { base } from "$app/paths";
 	import { goto } from "$app/navigation";
-	import { l } from "$lib/i18n/client";
+	import { l, f } from "$lib/i18n/client";
+	import { startOfDay, addDays, subDays, getUnixTime, parse } from "date-fns";
 
 	export let data;
+	let selectedLang = data.selectedLang;
 	let incidents = data.incidents;
 
 	let incidentSmartDates = {};
@@ -19,25 +20,12 @@
 
 	incidents.forEach((incident) => {
 		let startTime = incident.start_date_time;
-		let today = moment(startTime * 1000)
-			.startOf("day")
-			.unix();
-		let tomorrow = moment(startTime * 1000)
-			.add(1, "days")
-			.startOf("day")
-			.unix();
-		let dayAfterTomorrow = moment(startTime * 1000)
-			.add(2, "days")
-			.startOf("day")
-			.unix();
-		let yesterday = moment(startTime * 1000)
-			.subtract(1, "days")
-			.startOf("day")
-			.unix();
-		let dayBeforeYesterday = moment(startTime * 1000)
-			.subtract(2, "days")
-			.startOf("day")
-			.unix();
+
+		const today = getUnixTime(startOfDay(new Date(startTime * 1000)));
+		const tomorrow = getUnixTime(startOfDay(addDays(new Date(startTime * 1000), 1)));
+		const dayAfterTomorrow = getUnixTime(startOfDay(addDays(new Date(startTime * 1000), 2)));
+		const yesterday = getUnixTime(startOfDay(subDays(new Date(startTime * 1000), 1)));
+		const dayBeforeYesterday = getUnixTime(startOfDay(subDays(new Date(startTime * 1000), 2)));
 
 		if (!incidentSmartDates[today]) {
 			incidentSmartDates[today] = [];
@@ -81,7 +69,7 @@
 	>
 		<div class="blurry-bg mx-auto max-w-3xl text-center text-muted">
 			<h1 class="    text-5xl font-extrabold leading-tight">
-				{data.thisMonthName.replace("-", ", ")}
+				{f(parse(data.thisMonthName, "MMMM-yyyy", new Date()), "MMMM, yyyy", selectedLang)}
 			</h1>
 			<p class="mx-auto mt-4 max-w-xl font-medium sm:text-xl">
 				{l(data.lang, "Incident Updates")}
@@ -119,7 +107,7 @@
 		{#each sortedIncidentSmartDates as date}
 			<div class="mb-4 grid w-full grid-cols-2 gap-x-4 rounded-md border bg-card">
 				<div class="text-md col-span-2 border-b p-2 px-4 font-medium">
-					{moment.unix(date).format("dddd, MMMM Do")}
+					{f(new Date(date * 1000), "EEEE, MMMM do", data.selectedLang)}
 				</div>
 				{#if incidentSmartDates[date].length === 0}
 					<div class="col-span-2 p-2 px-4 text-sm font-medium text-muted-foreground">
@@ -128,7 +116,12 @@
 				{/if}
 				{#each incidentSmartDates[date] as incident, index}
 					<div class="newincidents col-span-2">
-						<Incident {incident} lang={data.lang} index="incident-{index}" />
+						<Incident
+							{incident}
+							lang={data.lang}
+							index="incident-{index}"
+							{selectedLang}
+						/>
 					</div>
 				{/each}
 			</div>
@@ -147,7 +140,7 @@
 				}}
 			>
 				<ArrowLeft class="arrow mr-2 h-4 w-4" />
-				{data.prevMonthName.replace("-", ", ")}
+				{f(parse(data.prevMonthName, "MMMM-yyyy", new Date()), "MMMM, yyyy", selectedLang)}
 			</Button>
 			<Button
 				variant="secondary"
@@ -156,7 +149,7 @@
 					window.location.href = `${base}/incidents/${data.nextMonthName}`;
 				}}
 			>
-				{data.nextMonthName.replace("-", ", ")}
+				{f(parse(data.nextMonthName, "MMMM-yyyy", new Date()), "MMMM, yyyy", selectedLang)}
 				<ArrowRight class="arrow ml-2 h-4 w-4" />
 			</Button>
 		</div>