diff --git a/ui/pages/popupmessage.tsx b/ui/pages/popupmessage.tsx
index 6065ca7f2..27e4201fd 100644
--- a/ui/pages/popupmessage.tsx
+++ b/ui/pages/popupmessage.tsx
@@ -4,25 +4,32 @@ import LogoSVG from "../public/undp-logo.svg";
 
 const slides = [
   {
-    title: 'The Digital Development Compass Gets a Powerful Upgrade!',
-    content: 'We’re excited to unveil major improvements to the Digital Development Compass (DDC), focusing on robustness, reliability, and clarity!'
+    title: "The Digital Development Compass Gets a Powerful Upgrade!",
+    content:
+      "We’re excited to unveil major improvements to the Digital Development Compass (DDC), focusing on robustness, reliability, and clarity!",
   },
   {
     title1: "Here's a glimpse of what's new:",
-    content: '<b>Stronger Foundation:</b> The DDC’s structure now aligns seamlessly with the Digital Transformation Framework, providing a clearer picture of a country’s digital journey.'
+    content:
+      "<b>Stronger Foundation:</b> The DDC’s structure now aligns seamlessly with the Digital Transformation Framework, providing a clearer picture of a country’s digital journey.",
   },
   {
-    content: "<b>Expert Guidance:</b> A dedicated Expert Committee has been established to review data and methodologies, ensuring the highest quality standards."
+    content:
+      "<b>Expert Guidance:</b> A dedicated Expert Committee has been established to review data and methodologies, ensuring the highest quality standards.",
   },
   {
-    content: "<b>Enhanced Data:</b> Data sources have undergone a rigorous cleaning process, with new ones added based on stricter selection criteria. This means you'll find the most reliable and relevant information at your fingertips."
+    content:
+      "<b>Enhanced Data:</b> Data sources have undergone a rigorous cleaning process, with new ones added based on stricter selection criteria. This means you'll find the most reliable and relevant information at your fingertips.",
   },
   {
-    content: "<b>Solid Methodology:</b> The DDC's methodology has been strengthened by improved scoring and weighting techniques, making it statistically sound and more dependable."
+    content:
+      "<b>Solid Methodology:</b> The DDC's methodology has been strengthened by improved scoring and weighting techniques, making it statistically sound and more dependable.",
   },
   {
-    content: "<b>Elevated User Experience:</b> Enjoy a smoother experience! We've revamped the DDC's visualizations and usability for a more intuitive and informative exploration.",
-    content1: "We're confident these improvements will make the DDC an even more valuable tool for navigating the ever-evolving digital landscape. Stay tuned for further updates!"
+    content:
+      "<b>Elevated User Experience:</b> Enjoy a smoother experience! We've revamped the DDC's visualizations and usability for a more intuitive and informative exploration.",
+    content1:
+      "We're confident these improvements will make the DDC an even more valuable tool for navigating the ever-evolving digital landscape. Stay tuned for further updates!",
   },
   // Add more slides as needed
 ];
@@ -33,7 +40,7 @@ const PopupMessage = () => {
   const totalPages = slides.length;
 
   useEffect(() => {
-    const hasSeenPopup = localStorage.getItem('hasSeenPopup');
+    const hasSeenPopup = localStorage.getItem("hasSeenPopup");
     if (!hasSeenPopup) {
       setIsOpen(true);
     }
@@ -53,7 +60,7 @@ const PopupMessage = () => {
 
   const handleClose = () => {
     setIsOpen(false);
-    localStorage.setItem('hasSeenPopup', 'true'); // Store the flag in localStorage
+    localStorage.setItem("hasSeenPopup", "true"); // Store the flag in localStorage
   };
 
   return (
@@ -68,7 +75,10 @@ const PopupMessage = () => {
       <div className="relative bg-white rounded-lg shadow-lg overflow-hidden w-full max-w-lg mx-4 md:mx-0 z-10">
         <div className="flex justify-between items-center p-4 border-b">
           <div className="flex items-center">
-            <div className="rounded-full bg-blue-100 p-1 flex items-center justify-center" style={{ width: '50px', height: '50px' }}>
+            <div
+              className="rounded-full bg-blue-100 p-1 flex items-center justify-center"
+              style={{ width: "50px", height: "50px" }}
+            >
               <Image src={LogoSVG} alt="UNDP Logo" width={40} height={40} />
             </div>
             <h2 className="ml-1 text-lg">Digital Development Compass</h2>
@@ -77,35 +87,50 @@ const PopupMessage = () => {
             onClick={handleClose}
             className="text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded"
           >
-            <span className="text-2xl">&times;</span> {/* Unicode cross character */}
+            <span className="text-2xl">&times;</span>{" "}
+            {/* Unicode cross character */}
           </button>
         </div>
         <div className="px-4 py-5 sm:p-6">
-          <h1 className="text-2xl font-bold">
-            {slides[currentPage].title}
-          </h1>
-          <h1 className="text-lg">
-            {slides[currentPage].title1}
-          </h1>
-          <div className="text-gray-600 pt-1" dangerouslySetInnerHTML={{ __html: slides[currentPage].content }} />
-          <div className="text-gray-600 pt-3" dangerouslySetInnerHTML={{ __html: slides[currentPage].content1 || "" }} />
+          <h1 className="text-2xl font-bold">{slides[currentPage].title}</h1>
+          <h1 className="text-lg">{slides[currentPage].title1}</h1>
+          <div
+            className="text-gray-600 pt-1"
+            dangerouslySetInnerHTML={{ __html: slides[currentPage].content }}
+          />
+          <div
+            className="text-gray-600 pt-3"
+            dangerouslySetInnerHTML={{
+              __html: slides[currentPage].content1 || "",
+            }}
+          />
         </div>
         <div className="px-4 py-4 sm:px-6 flex justify-between items-center border-t">
-          <button
-            onClick={handleBack}
-            className="text-gray-800 hover:bg-gray-200 font-bold py-2 px-4 rounded-l focus:outline-none focus:ring-2 focus:ring-gray-300"
-            disabled={currentPage === 0}
-          >
-            Back
-          </button>
-          <span className="text-sm text-gray-600">{`${currentPage + 1} of ${totalPages}`}</span>
-          <button
+          {currentPage === 0 ? (
+            <div className="px-10"></div> // Empty div to maintain layout
+          ) : (
+            <button
+              onClick={handleBack}
+              className="text-gray-800 hover:bg-gray-200 font-bold py-2 px-4 rounded-l focus:outline-none focus:ring-2 focus:ring-gray-300"
+            >
+              Back
+            </button>
+          )}
+          <span className="text-sm text-gray-600">{`${
+            currentPage + 1
+          } of ${totalPages}`}</span>
+        
+          {currentPage === totalPages - 1 ? (
+            <div className="px-8"></div> // Empty div to maintain layout
+          ) : (
+            <button
             onClick={handleNext}
             className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
             disabled={currentPage === totalPages - 1}
           >
             Next
           </button>
+          )}
         </div>
       </div>
     </div>