diff --git a/components/form/login.tsx b/components/form/login.tsx
index 60763df..b403f0b 100644
--- a/components/form/login.tsx
+++ b/components/form/login.tsx
@@ -232,9 +232,9 @@ export default function Login() {
           {isFirstLogin ? (
             <div className="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
               <div className="text-center mb-8">
-                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                   <svg
-                    className="w-8 h-8 text-orange-600"
+                    className="w-8 h-8 text-blue-900"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -292,7 +292,7 @@ export default function Login() {
 
                 <Button
                   size="lg"
-                  className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
+                  className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
                   onClick={submitCheckEmail}
                 >
                   Submit
@@ -486,7 +486,7 @@ export default function Login() {
 
                 <Button
                   size="lg"
-                  className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
+                  className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
                   onClick={onSubmit}
                 >
                   Masuk ke Portal
diff --git a/components/landing-page/headers.tsx b/components/landing-page/headers.tsx
index 80956ac..7e4b17a 100644
--- a/components/landing-page/headers.tsx
+++ b/components/landing-page/headers.tsx
@@ -39,33 +39,38 @@ export default function HeaderNews() {
     }
   }
 
-  if (articles.length < 4) return null;
+  if (articles.length === 0) {
+    return <p className="text-center">Belum ada artikel.</p>;
+  }
 
   return (
     <div className="max-w-7xl mx-auto">
-      <div className=" py-6 grid grid-cols-1 md:grid-cols-2 gap-4 h-[600px]">
+      <div className="py-6 grid grid-cols-1 md:grid-cols-2 gap-4 h-[600px]">
         {/* Kiri - berita utama */}
-        <div className="relative  overflow-hidden h-full">
+        <div className="relative overflow-hidden h-full">
           <Image
-            src={articles[0].thumbnailUrl || "/dummy.jpg"}
-            alt={articles[0].title}
+            src={articles[0]?.thumbnailUrl || "/dummy.jpg"}
+            alt={articles[0]?.title || "No Title"}
             fill
             className="object-cover"
           />
           <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
           <div className="absolute bottom-4 left-4 right-4 text-white">
             <span className="bg-black/70 text-xs px-2 py-1 rounded">
-              {articles[0].categories[0]?.title || "Uncategorized"}
+              {articles[0]?.categories?.[0]?.title || "Uncategorized"}
             </span>
-            <h2 className="text-2xl font-bold mt-2">{articles[0].title}</h2>
+            <h2 className="text-2xl font-bold mt-2">{articles[0]?.title}</h2>
             <p className="text-sm mt-1">
-              <span className="font-semibold">{articles[0].createdByName}</span>{" "}
+              <span className="font-semibold">
+                {articles[0]?.createdByName}
+              </span>{" "}
               •{" "}
-              {new Date(articles[0].createdAt).toLocaleDateString("id-ID", {
-                day: "numeric",
-                month: "long",
-                year: "numeric",
-              })}
+              {articles[0]?.createdAt &&
+                new Date(articles[0].createdAt).toLocaleDateString("id-ID", {
+                  day: "numeric",
+                  month: "long",
+                  year: "numeric",
+                })}
             </p>
           </div>
         </div>
@@ -74,67 +79,84 @@ export default function HeaderNews() {
         <div className="grid grid-rows-2 gap-2 h-full">
           {/* Atas: 2 berita kecil */}
           <div className="grid grid-cols-2 gap-4">
-            {articles.slice(1, 3).map((item) => (
-              <div key={item.id} className="relative  overflow-hidden">
-                <Image
-                  src={item.thumbnailUrl || "/dummy.jpg"}
-                  alt={item.title}
-                  fill
-                  className="object-cover"
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
-                <div className="absolute bottom-2 left-2 right-2 text-white">
-                  <span className="bg-black/70 text-[10px] px-2 py-1 rounded">
-                    {item.categories[0]?.title || "Uncategorized"}
-                  </span>
-                  <h3 className="text-sm font-semibold mt-1 line-clamp-2">
-                    {item.title}
-                  </h3>
-                  <p className="text-[10px]">
-                    <span className="font-semibold">{item.createdByName}</span>{" "}
-                    •{" "}
-                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
-                      day: "numeric",
-                      month: "short",
-                      year: "numeric",
-                    })}
-                  </p>
-                </div>
-              </div>
-            ))}
+            {[articles[1], articles[2]].map(
+              (item, idx) =>
+                item && (
+                  <div
+                    key={item.id || `dummy-${idx}`}
+                    className="relative overflow-hidden"
+                  >
+                    <Image
+                      src={item.thumbnailUrl || "/dummy.jpg"}
+                      alt={item.title || "No Title"}
+                      fill
+                      className="object-cover"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
+                    <div className="absolute bottom-2 left-2 right-2 text-white">
+                      <span className="bg-black/70 text-[10px] px-2 py-1 rounded">
+                        {item.categories?.[0]?.title || "Uncategorized"}
+                      </span>
+                      <h3 className="text-sm font-semibold mt-1 line-clamp-2">
+                        {item.title}
+                      </h3>
+                      <p className="text-[10px]">
+                        <span className="font-semibold">
+                          {item.createdByName}
+                        </span>{" "}
+                        •{" "}
+                        {item.createdAt &&
+                          new Date(item.createdAt).toLocaleDateString("id-ID", {
+                            day: "numeric",
+                            month: "short",
+                            year: "numeric",
+                          })}
+                      </p>
+                    </div>
+                  </div>
+                )
+            )}
           </div>
 
           {/* Bawah: 1 berita besar */}
-          <div className="relative overflow-hidden">
-            <Image
-              src={articles[3].thumbnailUrl || "/dummy.jpg"}
-              alt={articles[3].title}
-              fill
-              className="object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
-            <div className="absolute bottom-2 left-2 right-2 text-white">
-              <span className="bg-black/70 text-xs px-2 py-1 rounded">
-                {articles[3].categories[0]?.title || "Uncategorized"}
-              </span>
-              <h3 className="text-base font-semibold mt-1">
-                {articles[3].title}
-              </h3>
-              <p className="text-xs">
-                <span className="font-semibold">
-                  {articles[3].createdByName}
-                </span>{" "}
-                •{" "}
-                {new Date(articles[3].createdAt).toLocaleDateString("id-ID", {
-                  day: "numeric",
-                  month: "long",
-                  year: "numeric",
-                })}
-              </p>
+          {articles[3] && (
+            <div className="relative overflow-hidden">
+              <Image
+                src={articles[3]?.thumbnailUrl || "/dummy.jpg"}
+                alt={articles[3]?.title || "No Title"}
+                fill
+                className="object-cover"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
+              <div className="absolute bottom-2 left-2 right-2 text-white">
+                <span className="bg-black/70 text-xs px-2 py-1 rounded">
+                  {articles[3]?.categories?.[0]?.title || "Uncategorized"}
+                </span>
+                <h3 className="text-base font-semibold mt-1">
+                  {articles[3]?.title}
+                </h3>
+                <p className="text-xs">
+                  <span className="font-semibold">
+                    {articles[3]?.createdByName}
+                  </span>{" "}
+                  •{" "}
+                  {articles[3]?.createdAt &&
+                    new Date(articles[3].createdAt).toLocaleDateString(
+                      "id-ID",
+                      {
+                        day: "numeric",
+                        month: "long",
+                        year: "numeric",
+                      }
+                    )}
+                </p>
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
+
+      {/* Banner bawah */}
       <div className="w-full relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
         <Image
           src={"/image-kolom.png"}
diff --git a/service/http-config/axios-base-instance.ts b/service/http-config/axios-base-instance.ts
index de3efbe..5a51d41 100644
--- a/service/http-config/axios-base-instance.ts
+++ b/service/http-config/axios-base-instance.ts
@@ -6,7 +6,7 @@ const axiosBaseInstance = axios.create({
   baseURL,
   headers: {
     "Content-Type": "application/json",
-    "X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640"
+    "X-Client-Key": "02080003-5ad6-4b85-8ee6-0e14ec39349d",
   },
 });
 
diff --git a/service/http-config/axios-interceptor-instance.ts b/service/http-config/axios-interceptor-instance.ts
index 422a192..6865e70 100644
--- a/service/http-config/axios-interceptor-instance.ts
+++ b/service/http-config/axios-interceptor-instance.ts
@@ -10,7 +10,7 @@ const axiosInterceptorInstance = axios.create({
   baseURL,
   headers: {
     "Content-Type": "application/json",
-    "X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640"
+    "X-Client-Key": "02080003-5ad6-4b85-8ee6-0e14ec39349d",
   },
   withCredentials: true,
 });
diff --git a/service/http-config/http-base-services.ts b/service/http-config/http-base-services.ts
index 755d158..75b359c 100644
--- a/service/http-config/http-base-services.ts
+++ b/service/http-config/http-base-services.ts
@@ -2,11 +2,11 @@ import axiosBaseInstance from "./axios-base-instance";
 
 const defaultHeaders = {
   "Content-Type": "application/json",
-  "X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640"
+  "X-Client-Key": "02080003-5ad6-4b85-8ee6-0e14ec39349d",
 };
 
-export async function httpGet(pathUrl: any, headers?: any) {  
-  console.log("X-HEADERS : ", defaultHeaders)
+export async function httpGet(pathUrl: any, headers?: any) {
+  console.log("X-HEADERS : ", defaultHeaders);
   const mergedHeaders = {
     ...defaultHeaders,
     ...headers,
diff --git a/service/http-config/http-interceptor-services.ts b/service/http-config/http-interceptor-services.ts
index 4d33d96..5f38265 100644
--- a/service/http-config/http-interceptor-services.ts
+++ b/service/http-config/http-interceptor-services.ts
@@ -5,11 +5,11 @@ import { getCsrfToken } from "../master-user";
 
 const defaultHeaders = {
   "Content-Type": "application/json",
-  "X-Client-Key": "bb65b1ad-e954-4a1a-b4d0-74df5bb0b640"
+  "X-Client-Key": "02080003-5ad6-4b85-8ee6-0e14ec39349d",
 };
 
 export async function httpGetInterceptor(pathUrl: any) {
-  console.log("X-HEADERS : ", defaultHeaders)
+  console.log("X-HEADERS : ", defaultHeaders);
   const response = await axiosInterceptorInstance
     .get(pathUrl, { headers: defaultHeaders })
     .catch((error) => error.response);
@@ -35,7 +35,11 @@ export async function httpGetInterceptor(pathUrl: any) {
   }
 }
 
-export async function httpPostInterceptor(pathUrl: any, data: any, headers?: any) {
+export async function httpPostInterceptor(
+  pathUrl: any,
+  data: any,
+  headers?: any
+) {
   const resCsrf = await getCsrfToken();
   const csrfToken = resCsrf?.data?.csrf_token;
 
@@ -67,7 +71,11 @@ export async function httpPostInterceptor(pathUrl: any, data: any, headers?: any
   }
 }
 
-export async function httpPutInterceptor(pathUrl: any, data: any, headers?: any) {
+export async function httpPutInterceptor(
+  pathUrl: any,
+  data: any,
+  headers?: any
+) {
   const resCsrf = await getCsrfToken();
   const csrfToken = resCsrf?.data?.csrf_token;
 
@@ -99,7 +107,7 @@ export async function httpPutInterceptor(pathUrl: any, data: any, headers?: any)
 }
 
 export async function httpDeleteInterceptor(pathUrl: any, headers?: any) {
-   const resCsrf = await getCsrfToken();
+  const resCsrf = await getCsrfToken();
   const csrfToken = resCsrf?.data?.csrf_token;
 
   const mergedHeaders = {