diff --git a/app/[locale]/(public)/contact/page.tsx b/app/[locale]/(public)/contact/page.tsx
index 20306100..68ff5a15 100644
--- a/app/[locale]/(public)/contact/page.tsx
+++ b/app/[locale]/(public)/contact/page.tsx
@@ -95,35 +95,35 @@ const ContactForm = () => {
   };
 
   return (
-    <form method="POST" id="form" onSubmit={handleSubmit(onSubmit)} className="max-w-2xl mx-auto bg-white p-6">
+    <form method="POST" id="form" onSubmit={handleSubmit(onSubmit)} className="max-w-2xl mx-auto bg-white dark:bg-black p-6">
       <Reveal>
         {/* Header */}
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-contact.png" alt="contact" />
           <h2 className="ml-4 text-2xl font-bold">{t("contactUs")}</h2>
         </div>
-        <h3 className="text-lg font-semibold text-gray-800 mb-1">{t("writeMessage")}</h3>
-        <p className="text-sm text-gray-600 mb-6">{t("leaveMessage")}</p>
+        <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-1">{t("writeMessage")}</h3>
+        <p className="text-sm text-gray-600 dark:text-white mb-6">{t("leaveMessage")}</p>
 
         {/* Form */}
         <form>
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 mb-1">{t("name")}</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">{t("name")}</label>
             <input type="text" placeholder={t("enterName")} className={`w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.name ? "block" : ""}`} {...register("name")} required />
           </div>
 
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">Email</label>
             <input type="email" placeholder="name@mail.com" className={`w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.email ? "block" : ""}`} {...register("email")} required />
           </div>
 
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 mb-1">{t("number")} (Optional)</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">{t("number")} (Optional)</label>
             <input type="text" placeholder={t("enterNumber")} className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
           </div>
 
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 mb-1">{t("subject")}</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">{t("subject")}</label>
             <select
               className={`w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.subjects ? "block" : ""}`}
               {...register("subjects", { onChange: (e) => handleSubjects(e) })}
@@ -144,7 +144,7 @@ const ContactForm = () => {
           </div>
 
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 mb-1">{t("messages")}</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">{t("messages")}</label>
             <textarea placeholder={t("writeYourMessage")} rows={4} className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
           </div>
 
diff --git a/app/[locale]/(public)/faqs/page.tsx b/app/[locale]/(public)/faqs/page.tsx
index 9d42ae18..d4ebf029 100644
--- a/app/[locale]/(public)/faqs/page.tsx
+++ b/app/[locale]/(public)/faqs/page.tsx
@@ -42,7 +42,7 @@ const FAQS: React.FC = () => {
       <Reveal>
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-faqs.png" alt="Faqs" />
-          <h2 className="ml-4 text-lg lg:text-2xl font-bold text-gray-800">Frequently Asked Questions</h2>
+          <h2 className="ml-4 text-lg lg:text-2xl font-bold text-gray-800 dark:text-white">Frequently Asked Questions</h2>
         </div>
 
         {/* FAQS Items */}
@@ -50,10 +50,10 @@ const FAQS: React.FC = () => {
           {faqs?.map((faq, index) => (
             <div key={index} className="border-b border-gray-300 pb-2 cursor-pointer">
               <div className="flex justify-between items-center" onClick={() => toggleFAQ(index)}>
-                <h3 className="text-sm font-semibold text-gray-800">{faq.question}</h3>
-                <span className="text-gray-500 text-xl">{openIndex === index ? "−" : "+"}</span>
+                <h3 className="text-sm font-semibold text-gray-800 dark:text-white">{faq.question}</h3>
+                <span className="text-gray-500 dark:text-white text-xl">{openIndex === index ? "−" : "+"}</span>
               </div>
-              {openIndex === index && <p className="text-gray-600 mt-2 text-sm">{faq.answer}</p>}
+              {openIndex === index && <p className="text-gray-600 dark:text-white mt-2 text-sm">{faq.answer}</p>}
             </div>
           ))}
         </div>
diff --git a/app/[locale]/(public)/feedback/page.tsx b/app/[locale]/(public)/feedback/page.tsx
index 1e02bd46..1b1652c2 100644
--- a/app/[locale]/(public)/feedback/page.tsx
+++ b/app/[locale]/(public)/feedback/page.tsx
@@ -21,7 +21,7 @@ const Rating: React.FC<RatingProps> = ({ label, onRate }) => {
 
   return (
     <div className="flex justify-between items-center mb-4">
-      <span className="text-gray-800">{label}</span>
+      <span className="text-gray-800 dark:text-white">{label}</span>
       <div className="flex space-x-1">
         {[1, 2, 3, 4, 5].map((star) => (
           <button key={star} onClick={() => handleClick(star)} className={`text-2xl ${star <= selected ? "text-yellow-500" : "text-gray-300"}`}>
@@ -117,14 +117,16 @@ const FeedbackForm: React.FC = () => {
 
   return (
     <Reveal>
-      <div className="max-w-6xl flex flex-col mx-auto p-4 lg:p-40 gap-5">
+      <div className="max-w-6xl flex flex-col mx-auto p-4 lg:p-40 gap-5 ">
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-feedback.png" alt="Feedback" />
-          <h2 className="ml-4 text-[15px] lg:text-[32px] font-bold text-gray-800">{t("userFeedback")}</h2>
+          <h2 className="ml-4 text-[15px] lg:text-[32px] font-bold text-gray-800 dark:text-white">{t("userFeedback")}</h2>
+        </div>
+        <div className="text-black dark:text-white">
+          <Rating label={t("ratings")} onRate={(rating) => handleRatingChange("accessibility", rating)} />
+          <Rating label={t("ratings2")} onRate={(rating) => handleRatingChange("appearance", rating)} />
+          <Rating label={t("ratings3")} onRate={(rating) => handleRatingChange("content", rating)} />
         </div>
-        <Rating label={t("ratings")} onRate={(rating) => handleRatingChange("accessibility", rating)} />
-        <Rating label={t("ratings2")} onRate={(rating) => handleRatingChange("appearance", rating)} />
-        <Rating label={t("ratings3")} onRate={(rating) => handleRatingChange("content", rating)} />
         <div className="flex justify-center">
           <button onClick={handleSubmit} className="w-fit lg:w-32 bg-[#2F80ED] text-white py-2 px-4 gap-4 rounded-md hover:bg-blue-600 transition text-sm lg:text-base">
             {t("send")}
diff --git a/app/[locale]/auth/registration/page.tsx b/app/[locale]/auth/registration/page.tsx
index 4d84dcfc..b2e7125b 100644
--- a/app/[locale]/auth/registration/page.tsx
+++ b/app/[locale]/auth/registration/page.tsx
@@ -482,8 +482,8 @@ const page = () => {
       if (category != undefined) {
         const resInstiution = await listInstitusi(category);
         const res = await listProvince();
-        setInstitution(resInstiution?.data.data);
-        setProvince(res?.data.data);
+        setInstitution(resInstiution?.data?.data);
+        setProvince(res?.data?.data);
       }
     }
 
@@ -518,7 +518,7 @@ const page = () => {
       </div>
 
       <form
-        className="flex-1 w-full bg-white"
+        className="flex-1 w-full bg-white dark:bg-slate-600"
         onSubmit={handleSubmit(onSubmit)}
         style={
           Number(category) < 5
@@ -580,7 +580,7 @@ const page = () => {
                   : {}
               }
             >
-              <p className="text-black text-2xl px-0 lg:px-20 font-semibold">{t("enterOTP")}</p>
+              <p className="text-black dark:text-white text-2xl px-0 lg:px-20 font-semibold">{t("enterOTP")}</p>
               <p className="text-red-500 text-sm px-0 lg:px-20">{t("checkInbox")}</p>
             </div>
           </div>
@@ -600,7 +600,7 @@ const page = () => {
                 {t("member")} <span className="text-red-500">*</span>
               </Label>
               <select
-                className={`py-2 px-1 rounded-md border text-sm text-slate-400 border-slate-300 bg-white ${errors.association ? "block" : ""}`}
+                className={`py-2 px-1 rounded-md border text-sm text-slate-400  border-slate-300 bg-white dark:bg-slate-600 ${errors.association ? "block" : ""}`}
                 {...register("association")}
                 id="association"
                 onChange={(e) => setAssociation(e.target.value)}
@@ -753,7 +753,7 @@ const page = () => {
                 <Label className="mb-2">
                   Email <span className="text-red-500">*</span>
                 </Label>
-                <Input type="email" autoComplete="off" className={`${errors.email ? "block" : ""}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
+                <Input type="email" autoComplete="off" className={`${errors.email ? "block" : "text-white"}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
                 <div className="text-red-500">{errors.email?.message}</div>
               </div>
             </div>
@@ -781,7 +781,7 @@ const page = () => {
                     <option disabled selected>
                       {t("selectInst")}
                     </option>
-                    {institution.map((row: any) => (
+                    {institution?.map((row: any) => (
                       <option value={row.id} key={row.id}>
                         {row?.name}
                       </option>
diff --git a/components/landing-page/footer.tsx b/components/landing-page/footer.tsx
index 9a0c1088..99e71e4b 100644
--- a/components/landing-page/footer.tsx
+++ b/components/landing-page/footer.tsx
@@ -60,7 +60,7 @@ const Footer = () => {
                 <img src="/assets/icon-privacy.png" alt="Privacy" />
                 <p className="font-semibold text-lg">{t("privacy")}</p>
               </div>
-              <div className="container text-black space-y-2">{parse(String(privacy))}</div>
+              <div className="container text-black dark:text-white space-y-2">{parse(String(privacy))}</div>
             </DialogContent>
           </Dialog>
         </div>
diff --git a/components/landing-page/news-tickers.tsx b/components/landing-page/news-tickers.tsx
index 13171697..72b01cdc 100644
--- a/components/landing-page/news-tickers.tsx
+++ b/components/landing-page/news-tickers.tsx
@@ -44,7 +44,7 @@ export default function NewsTicker() {
     }, 7000);
 
     return () => clearInterval(interval);
-  }, [article.length]);
+  }, [article?.length]);
 
   return (
     <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">