diff --git a/ui/app/api/news/[id]/route.ts b/ui/app/api/news/[id]/route.ts
index 3843011..5b4f5ba 100644
--- a/ui/app/api/news/[id]/route.ts
+++ b/ui/app/api/news/[id]/route.ts
@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import fs from "node:fs/promises";
 import path from "node:path";
+import { VALIDATED_ENV } from "../../../../lib/constants";
 
 export async function GET(request: Request, { params }: { params: { id: string } }) {
   try {
diff --git a/ui/app/news/[id]/layout.tsx b/ui/app/news/[id]/layout.tsx
index 4131370..5eecd46 100644
--- a/ui/app/news/[id]/layout.tsx
+++ b/ui/app/news/[id]/layout.tsx
@@ -1,17 +1,15 @@
-import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
+import { Metadata } from "next";
+import React from "react";
+import { ENV, assertEnvVariables } from "../../../lib/constants";
 
-export default function NewsDetailLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="max-w-4xl mx-auto p-4">
-      <Link
-        href="/news"
-        className="inline-flex items-center mb-4 text-sm font-medium text-black dark:text-white hover:underline"
-      >
-        <ArrowLeft className="w-4 h-4 mr-1" />
-        Back
-      </Link>
-      {children}
-    </div>
-  );
-}
+export const metadata: Metadata = {
+  title: "News - Perplexica",
+};
+
+assertEnvVariables(ENV);
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+export default Layout;
diff --git a/ui/app/news/[id]/page.tsx b/ui/app/news/[id]/page.tsx
index 0c47af4..a2fbfcc 100644
--- a/ui/app/news/[id]/page.tsx
+++ b/ui/app/news/[id]/page.tsx
@@ -1,7 +1,8 @@
 import NewsDetail from "../../../components/NewsDetail";
+import { VALIDATED_ENV } from "../../../lib/constants";
 
 async function getNewsData(id: string) {
-  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/news/${id}`, { next: { revalidate: 60 } });
+  const res = await fetch(`${VALIDATED_ENV.API_URL}/news/${id}`, { next: { revalidate: 60 } });
   if (!res.ok) {
     throw new Error("Failed to fetch news");
   }
diff --git a/ui/lib/constants.ts b/ui/lib/constants.ts
new file mode 100644
index 0000000..9bd682e
--- /dev/null
+++ b/ui/lib/constants.ts
@@ -0,0 +1,20 @@
+export const ENV = {
+  WS_URL: process.env.NEXT_PUBLIC_WS_URL,
+  API_URL: process.env.NEXT_PUBLIC_API_URL,
+} as const;
+
+export type ENV = typeof ENV;
+
+// Type guard function
+export function assertEnvVariables(ENV: ENV): asserts ENV is Required<ENV> {
+  const missingVariables = Object.entries(ENV).filter(([_, value]) => value === undefined);
+  if (missingVariables.length > 0) {
+    throw new Error(`Missing environment variables: ${missingVariables.map(([key]) => key).join(", ")}`);
+  }
+}
+
+// Call this function early in your app's initialization
+assertEnvVariables(ENV);
+
+// After assertion, we can safely use ENV
+export const VALIDATED_ENV: Required<ENV> = ENV as Required<ENV>;