diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index 971af463..d9468850 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -65,6 +65,7 @@ export default function RootLayout({
     >
       <head>
         <script
+          nonce={nonce}
           dangerouslySetInnerHTML={{ __html: DEV_CONVERSION_INLINE_SCRIPT }}
           defer
         />
@@ -73,20 +74,20 @@ export default function RootLayout({
       <body className="bg-100 text-700 !overflow-x-hidden bg-background prose-headings:font-bold prose-headings:font-inter text-sm font-medium font-open-sans">
         <SkipNav />
         <NoJSReminder />
-        {/* Platform announcements sent through the API goes here */}
-        <div id="myfursona-announcements"></div>
-        <div id="myfursona-app">
-          <Providers>
+        <Providers>
+          <div id="myfursona-app">
+            {/* Platform announcements sent through the API goes here */}
+            <div id="announcements"></div>
             <header className="sticky top-0 z-10">
               <Navbar />
               <Sidebar />
             </header>
-            <main id="skip-navigation" className="min-h-[100dvh]">
+            <main id="skip-navigation" className="min-h-[calc(100dvh-6rem)]">
               {children}
             </main>
             <Footer />
-          </Providers>
-        </div>
+          </div>
+        </Providers>
       </body>
     </html>
   )
diff --git a/apps/website/src/components/base/Analytics.tsx b/apps/website/src/components/base/Analytics.tsx
index a63dab6a..23952c81 100644
--- a/apps/website/src/components/base/Analytics.tsx
+++ b/apps/website/src/components/base/Analytics.tsx
@@ -1,4 +1,5 @@
 import Script from "next/script"
+import dedent from "dedent"
 
 export default function Analytics({ nonce }: { nonce: string }) {
   return (
@@ -6,15 +7,15 @@ export default function Analytics({ nonce }: { nonce: string }) {
       {/* Site analytics - Umami */}
       <Script
         id="umami"
-        async
         defer
         src="https://analytics.umami.is/script.js"
         data-website-id="DEV"
       />
       {/* Behavior analytics - Microsoft Clarity */}
       <script
+        nonce={nonce}
         dangerouslySetInnerHTML={{
-          __html: `
+          __html: dedent`
             (function(c,l,a,r,i,t,y){
             c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
             t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
diff --git a/apps/website/src/middleware.ts b/apps/website/src/middleware.ts
index 3342d778..3b40cecd 100644
--- a/apps/website/src/middleware.ts
+++ b/apps/website/src/middleware.ts
@@ -1,48 +1,40 @@
 import { NextResponse } from "next/server"
 import type { NextRequest } from "next/server"
-// import { generateCSPString } from "./utils"
+import { generateCSP } from "./utils"
 
 export default function middleware(request: NextRequest) {
   const requestHeaders = new Headers(request.headers)
   const generatedNonce = crypto.randomUUID()
 
-  // const csp = generateCSPString({
-  //   defaultSrc: {},
-  //   scriptSrc: {
-  //     // TODO only enable 'unsafe-eval' on dev environments only
-  //     unsafeEval: true,
-  //     domains: [
-  //       "https://assets.hcaptcha.com",
-  //       "https://www.clarity.ms/",
-  //       "https://analytics.umami.is/"
-  //     ],
-  //     nonce: generatedNonce
-  //   },
-  //   styleSrc: {
-  //     unsafeInline: true
-  //   },
-  //   connectSrc: {
-  //     domains: [
-  //       "https://assets.hcaptcha.com",
-  //       "https://api.stripe.com",
-  //       "https://analytics.umami.is/"
-  //     ]
-  //   },
-  //   frameSrc: {
-  //     domains: [
-  //       "https://www.youtube-nocookie.com",
-  //       "https://hooks.stripe.com",
-  //       "https://js.stripe.com"
-  //     ]
-  //   },
-  //   imgSrc: {
-  //     domains: ["https://c.bing.com", "https://c.clarity.ms"]
-  //   },
-  //   upgradeInsecureRequests: true
-  // })
+  const csp = generateCSP({
+    "default-src": ["self"],
+    "script-src": [
+      "self",
+      "unsafe-eval",
+      "https://assets.hcaptcha.com",
+      "https://www.clarity.ms/",
+      "https://analytics.umami.is/",
+      `nonce-${generatedNonce}`
+    ],
+    "style-src": ["self", "unsafe-inline"],
+    "connect-src": [
+      "self",
+      "https://assets.hcaptcha.com",
+      "https://api.stripe.com",
+      "https://analytics.umami.is/"
+    ],
+    "frame-src": [
+      "https://www.youtube-nocookie.com",
+      "https://hooks.stripe.com",
+      "https://js.stripe.com"
+    ],
+    "frame-ancestors": ["none"],
+    "img-src": ["self", "data:", "https://c.bing.com", "https://c.clarity.ms"],
+    "upgrade-insecure-requests": true
+  })
 
-  // Set the CSP header so that Next.js can read it and generate tags with the nonce
-  // requestHeaders.set("Content-Security-Policy", csp)
+  requestHeaders.set("Content-Encoding", "br")
+  requestHeaders.set("Content-Security-Policy", csp)
   requestHeaders.set("x-nonce", generatedNonce)
 
   const response = NextResponse.next({
@@ -52,13 +44,9 @@ export default function middleware(request: NextRequest) {
   })
 
   response.headers.set("Content-Encoding", "br")
-  // response.headers.set("Content-Security-Policy", csp)
-  response.headers.set("X-Content-Type-Options", "no-sniff")
-  response.headers.set("X-Frame-Options", "DENY")
-  /**
-   ** Technically not supported by most browsers as it's a non-standard, but it's here
-   ** just for good measure.
-   **/
+  response.headers.set("Content-Security-Policy", csp)
+  // This header technically not supported by most browsers
+  // as it's a non-standard, but it's here  just for good measure.
   response.headers.set("X-XSS-Protection", "1; mode=block")
 
   return response
diff --git a/apps/website/src/utils/generateCSP.ts b/apps/website/src/utils/generateCSP.ts
new file mode 100644
index 00000000..7f494405
--- /dev/null
+++ b/apps/website/src/utils/generateCSP.ts
@@ -0,0 +1,62 @@
+type CSPDirective =
+  | (
+      | "none"
+      | "self"
+      | "unsafe-inline"
+      | "unsafe-hashes"
+      | "unsafe-eval"
+      | "strict-dynamic"
+      | "blob:"
+      | "https:"
+      | "data:"
+      | "mediastream:"
+      | "nonce-"
+      | "sha256-"
+    )[]
+  | string[]
+type CSPDirectiveWithWasm = CSPDirective | "wasm-unsafe-eval"[]
+
+type CSPPolicies = Partial<{
+  "script-src": CSPDirectiveWithWasm
+  "connect-src": CSPDirectiveWithWasm
+  "default-src": CSPDirective
+  "style-src": CSPDirective
+  "font-src": CSPDirective
+  "frame-src": CSPDirective
+  "frame-ancestors": "none"[] | string[]
+  "img-src": CSPDirective
+  "worker-src": CSPDirective
+  "upgrade-insecure-requests": true
+}>
+
+export function generateCSP(policy: CSPPolicies): string {
+  let _directives = []
+
+  const joinSpaces = (s: string[]) => s.join(" ")
+
+  Object.entries(policy).forEach(([directive, values]) => {
+    if (directive !== "upgrade-insecure-requests") {
+      const parsedValues = joinSpaces(
+        (values as string[]).map((value) => {
+          if (value === "self") return `'self'`
+          if (value === "none") return `'none'`
+          if (value === "unsafe-inline") return `'unsafe-inline'`
+          if (value === "unsafe-hashes") return `'unsafe-hashes'`
+          if (value === "unsafe-eval") return `'unsafe-eval'`
+          if (value.startsWith("nonce-") || value.startsWith("sha"))
+            return `'${value}'`
+          return value
+        })
+      )
+
+      _directives.push(`${directive} ${parsedValues};`)
+    }
+    if (directive == "upgrade-insecure-requests") {
+      _directives.push(`upgrade-insecure-requests;`)
+    }
+  })
+
+  return joinSpaces(_directives)
+    .replace(/(\s;\s)/g, "; ")
+    .replace(/\s;/g, ";")
+}
diff --git a/apps/website/src/utils/generateCSPString.ts b/apps/website/src/utils/generateCSPString.ts
deleted file mode 100644
index 771b8a88..00000000
--- a/apps/website/src/utils/generateCSPString.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-// FIXME
-// lodash packages won't compile since Edge Runtime prohibit it when building the app
-// >> Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
-// Kuro, rewrite this shit lol
-import kebabCase from "lodash.kebabcase"
-
-type Schemes = "data:" | "https:" | "blob:" | "mediastream:" | "filesystem:" | "ws://"
-
-type CSPDirective<T = {}> = {
-  none?: boolean
-  nonce?: string
-  domains?: Schemes[] | string[]
-} & T
-
-interface SandboxDirectives {
-  allowDownloads: boolean
-  /** This value is experimental and is expected to change in the future */
-  allowDownloadsWithoutUserActivation: boolean
-  allowForms: boolean
-  allowModals: boolean
-  allowOrientationLock: boolean
-  allowPointerLock: boolean
-  allowPopups: boolean
-  allowPopupsToEscapeSandbox: boolean
-  allowPresentation: boolean
-  allowSameOrigin: boolean
-  allowScripts: boolean
-  /** This value is experimental and is expected to change in the future */
-  allowStorageAccessByUserActivation: boolean
-  allowTopNavigation: boolean
-  allowTopNavigationByUserActivation: boolean
-  allowTopNavigationToCustomProtocols: boolean
-}
-
-interface CSPPolicies {
-  defaultSrc?: CSPDirective
-  frameSrc?: CSPDirective
-  styleSrc?: CSPDirective<{
-    unsafeInline?: boolean
-    nonce?: string
-    sha256?: string
-    sha384?: string
-    sha512?: string
-  }>
-  scriptSrc?: CSPDirective<{
-    unsafeInline?: boolean
-    unsafeEval?: boolean
-    unsafeHashes?: boolean
-    wasmUnsafeEval?: boolean
-    strictDynamic?: boolean
-    sha256?: string
-    sha384?: string
-    sha512?: string
-  }>
-  connectSrc?: CSPDirective
-  imgSrc?: CSPDirective
-  fontSrc?: CSPDirective
-  workerSrc?: CSPDirective
-  upgradeInsecureRequests?: boolean
-  sandbox?: Partial<SandboxDirectives>
-}
-
-export function generateCSPString(policy: CSPPolicies) {
-  let directives: string[] = []
-
-  const joinSpaces = (s: string[]) => s.join(" ")
-
-  Object.entries(policy).forEach(([directiveName, directiveValues]) => {
-    directives.push(
-      directiveName !== "upgradeInsecureRequests"
-        ? `${kebabCase(directiveName)} 'self'`
-        : kebabCase(directiveName)
-    )
-
-    Object.entries(directiveValues).forEach((v) => {
-      const [nestedKey, nestedValue] = v
-
-      if (nestedKey && v.includes(true)) {
-        directives.push(`'${kebabCase(nestedKey)}'`)
-      }
-      if (v.includes("domains")) {
-        directives.push(joinSpaces(nestedValue as string[]))
-      }
-      if (v.includes("nonce")) {
-        directives.push(`'nonce-${nestedValue}'`)
-      }
-      if (v.includes("sha256")) {
-        directives.push(`'sha256-${nestedValue}'`)
-      }
-      if (v.includes("sha384")) {
-        directives.push(`'sha384-${nestedValue}'`)
-      }
-      if (v.includes("sha512")) {
-        directives.push(`'sha512-${nestedValue}'`)
-      }
-    })
-
-    directives.push(";")
-  })
-
-  const parsedOutput = joinSpaces(directives)
-    .replace(/(\s;\s)/g, "; ")
-    .replace(/\s;/g, ";")
-  return parsedOutput
-}
diff --git a/apps/website/src/utils/index.ts b/apps/website/src/utils/index.ts
index 6423790d..eb3953c2 100644
--- a/apps/website/src/utils/index.ts
+++ b/apps/website/src/utils/index.ts
@@ -1,3 +1,3 @@
-import { generateCSPString } from "./generateCSPString"
+import { generateCSP } from "./generateCSP"
 
-export { generateCSPString }
+export { generateCSP }
