diff --git a/servers/nextjs/app/(presentation-generator)/components/slide_layouts/SlideFooter.tsx b/servers/nextjs/app/(presentation-generator)/components/slide_layouts/SlideFooter.tsx
index 906f6ee9..f4f574a3 100644
--- a/servers/nextjs/app/(presentation-generator)/components/slide_layouts/SlideFooter.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/slide_layouts/SlideFooter.tsx
@@ -248,95 +248,103 @@ const SlideFooter: React.FC = () => {
         id="footer"
         className="absolute hidden lg:grid z-10 cursor-pointer px-6  grid-cols-3 items-end left-1/2 -translate-x-1/2 justify-between bottom-5 w-full"
       >
-        <div
-          className={`h-8 flex-1 flex ${footerProperties.logoProperties.logoPosition === "left"
-            ? getLogoPositionClass()
-            : "justify-start"
-            }`}
-        >
-          {footerProperties.logoProperties.showLogo &&
-            (footerProperties.logoProperties.logoPosition === "left" ? (
-              getLogoImageSrc() !== "" ? (
-                <img
-                  data-slide-element
-                  data-element-type="picture"
-                  id="footer-user-logo"
-                  className="w-auto h-full object-contain"
-                  src={getLocalImageUrl(getLogoImageSrc())}
-                  alt="logo"
-                  style={getLogoStyle()}
-                />
-              ) : (
-                <div className="flex gap-2 items-center">
-                  <div className="w-8 h-8 bg-gray-100 rounded-lg flex justify-center items-center">
-                    <Plus className="text-gray-500" />
+        {(!footerProperties.logoProperties.showLogo && !footerProperties.footerMessage.showMessage) ? (
+          <div onClick={handleEditor} className="col-span-3 cursor-pointer flex justify-center items-center text-gray-400 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+            Click to add footer
+          </div>
+        ) : (
+          <>
+            <div
+              className={`h-8 flex-1 flex ${footerProperties.logoProperties.logoPosition === "left"
+                ? getLogoPositionClass()
+                : "justify-start"
+                }`}
+            >
+              {footerProperties.logoProperties.showLogo &&
+                (footerProperties.logoProperties.logoPosition === "left" ? (
+                  getLogoImageSrc() !== "" ? (
+                    <img
+                      data-slide-element
+                      data-element-type="picture"
+                      id="footer-user-logo"
+                      className="w-auto h-full object-contain"
+                      src={getLocalImageUrl(getLogoImageSrc())}
+                      alt="logo"
+                      style={getLogoStyle()}
+                    />
+                  ) : (
+                    <div className="flex gap-2 items-center">
+                      <div className="w-8 h-8 bg-gray-100 rounded-lg flex justify-center items-center">
+                        <Plus className="text-gray-500" />
+                      </div>
+                      <p className="text-sm text-gray-400"
+                        style={{
+                          fontFamily: currentColors.fontFamily || "Inter, sans-serif",
+                        }}
+                      >Insert Your Logo</p>
+                    </div>
+                  )
+                ) : (
+                  <div></div>
+                ))}
+            </div>
+
+            <div
+              className={`flex-1 flex items-center font-instrument_sans slide-title justify-center`}
+            >
+              <p
+                id="footer-user-message"
+                className="text-sm"
+                data-slide-element
+                data-element-type="text"
+                data-text-content={footerProperties.footerMessage.message}
+                style={getMessageStyle()}
+              >
+                {footerProperties.footerMessage.showMessage &&
+                  (footerProperties.footerMessage.message
+                    ? footerProperties.footerMessage.message
+                    : "Your text")}
+              </p>
+            </div>
+
+            <div
+              className={`h-8 flex-1 flex ${footerProperties.logoProperties.logoPosition === "right"
+                ? getLogoPositionClass()
+                : "justify-start"
+                }`}
+            >
+              {footerProperties.logoProperties.showLogo &&
+                footerProperties.logoProperties.logoPosition === "right" ? (
+                getLogoImageSrc() !== "" ? (
+                  <div data-element-type="picture" data-slide-element>
+                    <img
+                      data-slide-element
+                      data-element-type="picture"
+                      id="footer-user-logo"
+                      className="w-auto h-full object-contain"
+                      src={getLocalImageUrl(getLogoImageSrc())}
+                      alt="logo"
+                      style={getLogoStyle()}
+                    />
                   </div>
-                  <p className="text-sm text-gray-400"
-                    style={{
-                      fontFamily: currentColors.fontFamily || "Inter, sans-serif",
-                    }}
-                  >Insert Your Logo</p>
-                </div>
-              )
-            ) : (
-              <div></div>
-            ))}
-        </div>
-
-        <div
-          className={`flex-1 flex items-center font-inter slide-title justify-center`}
-        >
-          <p
-            id="footer-user-message"
-            className="text-sm"
-            data-slide-element
-            data-element-type="text"
-            data-text-content={footerProperties.footerMessage.message}
-            style={getMessageStyle()}
-          >
-            {footerProperties.footerMessage.showMessage &&
-              (footerProperties.footerMessage.message
-                ? footerProperties.footerMessage.message
-                : "Your text")}
-          </p>
-        </div>
-
-        <div
-          className={`h-8 flex-1 flex ${footerProperties.logoProperties.logoPosition === "right"
-            ? getLogoPositionClass()
-            : "justify-start"
-            }`}
-        >
-          {footerProperties.logoProperties.showLogo &&
-            footerProperties.logoProperties.logoPosition === "right" ? (
-            getLogoImageSrc() !== "" ? (
-              <div data-element-type="picture" data-slide-element>
-                <img
-                  data-slide-element
-                  data-element-type="picture"
-                  id="footer-user-logo"
-                  className="w-auto h-full object-contain"
-                  src={getLocalImageUrl(getLogoImageSrc())}
-                  alt="logo"
-                  style={getLogoStyle()}
-                />
-              </div>
-            ) : (
-              <div className="flex gap-2 items-center">
-                <div className="w-8 h-8 bg-gray-100 rounded-lg flex justify-center items-center">
-                  <Plus className="text-gray-500" />
-                </div>
-                <p className="text-sm text-gray-400"
-                  style={{
-                    fontFamily: currentColors.fontFamily || "Inter, sans-serif",
-                  }}
-                >Insert Your Logo</p>
-              </div>
-            )
-          ) : (
-            <div className="w-full flex justify-end"></div>
-          )}
-        </div>
+                ) : (
+                  <div className="flex gap-2 items-center">
+                    <div className="w-8 h-8 bg-gray-100 rounded-lg flex justify-center items-center">
+                      <Plus className="text-gray-500" />
+                    </div>
+                    <p className="text-sm text-gray-400"
+                      style={{
+                        fontFamily: currentColors.fontFamily || "Inter, sans-serif",
+                      }}
+                    >Insert Your Logo</p>
+                  </div>
+                )
+              ) : (
+                <div className="w-full flex justify-end"></div>
+              )}
+            </div>
+          </>
+        )}
       </div>
 
       <Sheet open={showEditor} onOpenChange={handleSheetClose}>
diff --git a/servers/nextjs/app/setting/SettingPage.tsx b/servers/nextjs/app/setting/SettingPage.tsx
index fe235ec8..681a82ec 100644
--- a/servers/nextjs/app/setting/SettingPage.tsx
+++ b/servers/nextjs/app/setting/SettingPage.tsx
@@ -97,7 +97,7 @@ const SettingsPage = () => {
     }
 
     return (
-        <div className="min-h-screen bg-[#E9E8F8]">
+        <div className="min-h-screen bg-[#E9E8F8] font-instrument_sans">
             <Header />
             <Wrapper className="lg:w-[60%]">
                 <div className="py-8 space-y-6">
diff --git a/servers/nextjs/components/Home.tsx b/servers/nextjs/components/Home.tsx
index 994eeaa9..78a25be0 100644
--- a/servers/nextjs/components/Home.tsx
+++ b/servers/nextjs/components/Home.tsx
@@ -127,7 +127,7 @@ export default function Home() {
 
     if (isLoading) {
         return (
-            <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white flex items-center justify-center">
+            <div className="min-h-screen bg-gradient-to-b font-instrument_sans from-gray-50 to-white flex items-center justify-center">
                 <div className="text-center">
                     <Loader2 className="w-8 h-8 animate-spin text-blue-600 mx-auto mb-4" />
                     <p className="text-gray-600">Loading configuration...</p>
@@ -188,7 +188,7 @@ export default function Home() {
     };
 
     return (
-        <div className="min-h-screen bg-gradient-to-b font-inter from-gray-50 to-white">
+        <div className="min-h-screen bg-gradient-to-b font-instrument_sans from-gray-50 to-white">
             <main className="container mx-auto px-4 py-12 max-w-3xl">
                 {/* Branding Header */}
                 <div className="text-center mb-12">