diff --git a/web/components/answers/add-compatibility-question-button.tsx b/web/components/answers/add-compatibility-question-button.tsx
index 25854f95..2df33975 100644
--- a/web/components/answers/add-compatibility-question-button.tsx
+++ b/web/components/answers/add-compatibility-question-button.tsx
@@ -27,12 +27,13 @@ export function AddCompatibilityQuestionButton(props: {
   if (!user) return null
   return (
     <>
-      <span
+      <button
+        type="button"
         onClick={() => setOpen(true)}
-        className="text-primary-500 cursor-pointer text-sm transition-all hover:underline"
+        className="text-sm"
       >
-        Submit your own compatibility question
-      </span>
+        or submit your own!
+      </button>
       <AddCompatibilityQuestionModal
         open={open}
         setOpen={setOpen}
diff --git a/web/components/answers/compatibility-questions-display.tsx b/web/components/answers/compatibility-questions-display.tsx
index da0b8988..cbc2b5d8 100644
--- a/web/components/answers/compatibility-questions-display.tsx
+++ b/web/components/answers/compatibility-questions-display.tsx
@@ -199,16 +199,16 @@ export function CompatibilityQuestionsDisplay(props: {
       ) : (
         <>
           {isCurrentUser && !fromLoverPage && (
-            <span>
+            <span className='customlink'>
               {otherQuestions.length < 1 ? (
                 <span className="text-ink-600 text-sm">
                   You've already answered all the compatibility questions!
                 </span>
               ) : (
                 <span className="text-ink-600 text-sm">
-                  Answer more questions to increase your compatibility scores!
+                  Answer more questions to increase your compatibility scores—
                 </span>
-              )}{' '}
+              )}{''}
               <AddCompatibilityQuestionButton
                 refreshCompatibilityAll={refreshCompatibilityAll}
               />
diff --git a/web/styles/globals.css b/web/styles/globals.css
index d6825673..826c841a 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -2,8 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+/*make var font-main*/
+:root {
+    --font-main: "Crimson Pro", Georgia, "Times New Roman", Times, serif;
+}
+
 .logo {
-    font-family: "Crimson Pro", Georgia, "Times New Roman", Times, serif;
+    font-family: var(--font-main), serif;
 }
 
 @layer base {
@@ -278,22 +283,25 @@ ul {
     padding-left: 1.25rem;
     margin-top: 0.5rem;
 }
-
-.customlink a {
+.customlink a,
+.customlink button{
     color: rgb(var(--color-primary-500));
     text-decoration: none;
+    font-family: var(--font-main), serif;
 }
 
-.dark .customlink a {
+.dark .customlink a,
+.dark .customlink button {
     color: rgb(var(--color-primary-700));
 }
 
-.customlink a:hover {
+.customlink a:hover,
+.customlink button:hover {
     text-decoration: underline;
 }
 
 .sidebar-nav {
-    font-family: "Inter", sans-serif; /* clean and legible */
+    font-family: var(--font-main), serif;
 }
 
 .body-bg {