diff --git a/src/components/ResumeDownloadButton.tsx b/src/components/ResumeDownloadButton.tsx
index ba2de57..389f40a 100644
--- a/src/components/ResumeDownloadButton.tsx
+++ b/src/components/ResumeDownloadButton.tsx
@@ -49,7 +49,7 @@ export default function ResumeDownloadButton({
       <button
         onClick={handleDownload}
         disabled={isLoading}
-        class={`btn bg-primary font-bold rounded-full inline-flex items-center gap-2 text-sm sm:text-base ${
+        class={`btn btn-primary font-bold rounded-full inline-flex items-center gap-2 text-sm sm:text-base ${
           isLoading
             ? "text-primary border-2 border-primary"
             : ""
diff --git a/src/components/ResumeSettingsModal.tsx b/src/components/ResumeSettingsModal.tsx
index 08c0909..413b234 100644
--- a/src/components/ResumeSettingsModal.tsx
+++ b/src/components/ResumeSettingsModal.tsx
@@ -162,7 +162,7 @@ export default function ResumeSettingsModal({
       {/* Floating Settings Button */}
       <button
         onClick={openModal}
-        class={`fixed top-4 right-4 z-20 bg-secondary hover:bg-primary btn btn-circle ${className}`}
+        class={`fixed top-4 right-4 z-20 btn btn-secondary hover:btn-primary btn-circle ${className}`}
         aria-label="Resume Settings"
       >
         <Settings class="text-lg" />
@@ -170,12 +170,12 @@ export default function ResumeSettingsModal({
 
       {/* Modal */}
       <div class={`modal ${modalOpen.value ? "modal-open" : ""}`}>
-        <div class="modal-box w-11/12 max-w-5xl h-[90vh] flex flex-col">
+        <div class="modal-box w-11/12 max-w-5xl h-[90vh] flex flex-col relative z-50">
           <div class="flex justify-between items-center mb-4">
             <h3 class="font-bold text-lg">Resume Generator</h3>
             <button
               onClick={closeModal}
-              class="btn btn-circle bg-secondary hover:bg-primary"
+              class="btn btn-circle btn-secondary hover:btn-primary"
             >
               <X className="text-lg" />
             </button>
@@ -189,10 +189,10 @@ export default function ResumeSettingsModal({
 
             {/* Action Buttons */}
             <div class="flex flex-wrap gap-2 mb-6">
-              <button onClick={downloadTemplate} class="btn bg-primary btn-sm font-bold">
+              <button onClick={downloadTemplate} class="btn btn-primary btn-sm font-bold">
                 Download Template
               </button>
-              <button onClick={loadTemplate} class="btn bg-secondary btn-sm font-bold">
+              <button onClick={loadTemplate} class="btn btn-secondary btn-sm font-bold">
                 Load Template in Editor
               </button>
             </div>
@@ -207,7 +207,7 @@ export default function ResumeSettingsModal({
                   role="tab"
                   class={`px-4 py-2 rounded-full text-sm transition-all duration-200 font-bold ${
                     activeTab === "upload"
-                      ? "bg-primary shadow-sm"
+                      ? "btn btn-primary shadow-sm"
                       : "text-base-content/70 hover:text-base-content hover:bg-base-200"
                   }`}
                   onClick={() => setActiveTab("upload")}
@@ -218,7 +218,7 @@ export default function ResumeSettingsModal({
                   role="tab"
                   class={`px-4 py-2 rounded-full text-sm font-bold transition-all duration-200 ${
                     activeTab === "edit"
-                      ? "bg-primary font-bold shadow-sm"
+                      ? "btn btn-primary font-bold shadow-sm"
                       : "text-base-content/70 hover:text-base-content font-bold hover:bg-base-200"
                   }`}
                   onClick={() => setActiveTab("edit")}
@@ -312,7 +312,7 @@ export default function ResumeSettingsModal({
             )}
           </div>
         </div>
-        <div class="modal-backdrop backdrop-blur-sm" onClick={closeModal}></div>
+        <div class="modal-backdrop" onClick={closeModal}></div>
       </div>
     </>
   );
diff --git a/src/components/ScrollUpButton.tsx b/src/components/ScrollUpButton.tsx
index c884f4b..93c2e44 100644
--- a/src/components/ScrollUpButton.tsx
+++ b/src/components/ScrollUpButton.tsx
@@ -29,8 +29,8 @@ export default function ScrollUpButton() {
   return (
     <button
       onClick={scrollToTop}
-      class={`fixed bottom-4 right-4 z-20 bg-secondary hover:bg-primary
-            btn btn-circle transition-all duration-300
+      class={`fixed bottom-4 right-4 z-20 btn btn-secondary hover:btn-primary
+            btn-circle transition-all duration-300
             ${
               isVisible.value
                 ? "opacity-100 translate-y-0"