diff --git a/gallery-mobile.html b/gallery-mobile.html
index 5ac7aed..8342498 100644
--- a/gallery-mobile.html
+++ b/gallery-mobile.html
@@ -12,8 +12,7 @@
         body {
             margin: 0;
             padding: 0;
-            background: #000000;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background: var(--color-background);
         }
         
         .gallery-mobile {
@@ -31,7 +30,7 @@
             top: 0;
             left: 0;
             right: 0;
-            background: #000000;
+            background: var(--color-background);
             z-index: 100;
             padding: 15px 0 0;
         }
@@ -44,39 +43,39 @@
             width: 220px;
             height: auto;
             margin-left: calc(50% - 220px/2 - 61.5px);
-            font-family: Georgia, "Times New Roman", serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
-            color: #FFFFFF;
-            margin-bottom: 5px; /* Reduced spacing */
+            font-size: 1.5rem;
+            line-height: 2rem;
+            color: var(--color-text);
+            margin-bottom: 0.3125rem; /* 5px in rem */
         }
         
         .site-subtitle {
             width: 220px;
             height: auto;
             margin-left: calc(50% - 220px/2 - 61.5px);
-            margin-top: 0; /* Reduced spacing */
-            font-family: Georgia, "Times New Roman", serif;
+            margin-top: 0;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 24px;
-            color: #FFFFFF;
+            font-size: 1rem;
+            line-height: 1.5rem;
+            color: var(--color-text);
         }
         
         .divider {
             width: 344px;
             height: 0px;
-            margin: 10px auto; /* Reduced spacing */
-            border: 0.5px solid #444444;
+            margin: 0.625rem auto; /* 10px in rem */
+            border: 0.5px solid var(--color-divider);
         }
         
         .tag-section {
             display: flex;
             justify-content: center;
-            margin: 10px 16px; /* Reduced spacing */
+            margin: 0.625rem 1rem; /* 10px 16px in rem */
         }
         
         .tag-filter {
@@ -90,15 +89,16 @@
         
         .tag-item {
             cursor: pointer;
-            font-size: 16px;
-            line-height: 24px;
-            color: #FFFFFF;
+            font-family: var(--font-heading);
+            font-size: 1rem;
+            line-height: 1.5rem;
+            color: var(--color-text);
             transition: color 0.3s ease;
             text-align: center;
         }
         
         .tag-item.active {
-            color: #DAA520;
+            color: var(--color-accent);
         }
         
         /* Selected tag section */
@@ -106,40 +106,40 @@
             padding: 0;
             margin-left: calc(50% - 220px/2 - 61.5px); /* Match title positioning */
             width: 220px; /* Match title width */
-            background: #000000;
-            margin-top: 20px;
+            background: var(--color-background);
+            margin-top: 1.25rem; /* 20px in rem */
             position: relative;
         }
         
         .tag-selected {
             width: 271px;
             height: 28px;
-            font-family: 'Zen Old Mincho', serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 24px;
-            line-height: 28px;
-            color: #FFFFFF;
-            margin-bottom: 10px;
+            font-size: 1.5rem;
+            line-height: 1.75rem;
+            color: var(--color-text);
+            margin-bottom: 0.625rem;
         }
         
         .results-count {
             width: 101px;
             height: 24px;
-            margin-top: 5px;
-            font-family: 'Zen Old Mincho', serif;
+            margin-top: 0.3125rem; /* 5px in rem */
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 24px;
-            color: #FFFFFF;
+            font-size: 1rem;
+            line-height: 1.5rem;
+            color: var(--color-text);
         }
         
         .content-divider {
             width: 344px;
             height: 0px;
-            margin: 10px auto; /* Reduced spacing */
-            border: 0.5px solid #444444;
+            margin: 0.625rem auto; /* 10px in rem */
+            border: 0.5px solid var(--color-divider);
         }
         
         /* Content area with appropriate padding to prevent overlap with fixed header */
@@ -156,22 +156,23 @@
         }
         
         .footer {
-            margin-top: 40px;
-            padding: 0 16px 20px;
+            margin-top: 2.5rem; /* 40px in rem */
+            padding: 0 1rem 1.25rem; /* 0 16px 20px in rem */
         }
         
         .disclaimer {
-            font-size: 10px;
-            color: #CCCCCC;
+            font-family: var(--font-heading);
+            font-size: 0.625rem; /* 10px in rem */
+            color: var(--color-text);
             line-height: 1.4;
-            margin-bottom: 20px;
+            margin-bottom: 1.25rem; /* 20px in rem */
             text-align: left;
         }
         
         .footer-logos {
             display: flex;
             flex-direction: column;
-            gap: 15px;
+            gap: 0.9375rem; /* 15px in rem */
         }
         
         .capture-logo-container,
@@ -190,9 +191,9 @@
         }
         
         .copyright {
-            font-size: 12px;
-            color: #CCCCCC;
-            margin-top: 10px;
+            font-size: 0.75rem; /* 12px in rem */
+            color: var(--color-text);
+            margin-top: 0.625rem; /* 10px in rem */
             text-align: center;
         }
         
@@ -210,7 +211,7 @@
             width: 50px;
             height: 50px;
             border: 4px solid rgba(255, 255, 255, 0.3);
-            border-top: 4px solid #DAA520;
+            border-top: 4px solid var(--color-accent);
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin-bottom: 1rem;
@@ -225,8 +226,8 @@
         .error-message {
             padding: 2rem;
             text-align: center;
-            color: #f8d7da;
-            background-color: rgba(220, 53, 69, 0.1);
+            color: var(--color-error);
+            background-color: var(--color-error-bg);
             border: 1px solid rgba(220, 53, 69, 0.3);
             border-radius: 5px;
             margin: 2rem 0;
@@ -235,7 +236,7 @@
         .no-results {
             padding: 3rem 0;
             text-align: center;
-            color: #ddd;
+            color: var(--color-light-gray);
             font-size: 1.2rem;
         }
     </style>
@@ -251,7 +252,7 @@
             <!-- Header with title -->
             <div class="header">
                 <a href="index.html" class="logo-home">
-                    <div class="site-title">孫中山逝世<span class="gold-text">100</span>週年</div>
+                    <div class="site-title">孫中山逝世百週年</div>
                     <div class="site-subtitle">AI 人工智慧歷史資料集</div>
                 </a>
             </div>
diff --git a/gallery.css b/gallery.css
index 729bbdc..45a9b68 100644
--- a/gallery.css
+++ b/gallery.css
@@ -17,6 +17,7 @@
     padding: 0.5rem 0;
     position: relative;
     font-size: 0.95rem;
+    font-family: var(--font-heading);
 }
 
 .tag-item::after {
@@ -26,7 +27,7 @@
     left: 0;
     width: 0;
     height: 2px;
-    background-color: #DAA520;
+    background-color: var(--color-accent);
     transition: width 0.3s ease;
 }
 
@@ -36,7 +37,7 @@
 }
 
 .tag-item.active {
-    color: #DAA520;
+    color: var(--color-accent);
     font-weight: 500;
 }
 
@@ -87,9 +88,9 @@ media-viewer {
 /* Customize Capture Eye modal appearance */
 capture-eye::part(modal) {
     max-width: 90vw;
-    background-color: #191919;
+    background-color: var(--color-modal-bg);
     border-radius: 8px;
-    color: #fff;
+    color: var(--color-text);
 }
 
 capture-eye::part(overlay) {
@@ -110,7 +111,7 @@ capture-eye::part(overlay) {
     width: 50px;
     height: 50px;
     border: 4px solid rgba(255, 255, 255, 0.3);
-    border-top: 4px solid #DAA520;
+    border-top: 4px solid var(--color-accent);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 1rem;
@@ -125,8 +126,8 @@ capture-eye::part(overlay) {
 .error-message {
     padding: 2rem;
     text-align: center;
-    color: #f8d7da;
-    background-color: rgba(220, 53, 69, 0.1);
+    color: var(--color-error);
+    background-color: var(--color-error-bg);
     border: 1px solid rgba(220, 53, 69, 0.3);
     border-radius: 5px;
     margin: 2rem 0;
@@ -135,7 +136,7 @@ capture-eye::part(overlay) {
 .no-results {
     padding: 3rem 0;
     text-align: center;
-    color: #ddd;
+    color: var(--color-light-gray);
     font-size: 1.2rem;
 }
 
@@ -147,7 +148,7 @@ capture-eye::part(overlay) {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: #1a1a1a;
+    background-color: var(--color-modal-bg);
     padding: 1rem;
     box-sizing: border-box;
 }
@@ -177,5 +178,5 @@ capture-eye::part(overlay) {
 .file-type {
     font-size: 0.8rem;
     opacity: 0.7;
-    color: #ddd;
+    color: var(--color-light-gray);
 }
diff --git a/gallery.html b/gallery.html
index 3915a09..6574cfc 100644
--- a/gallery.html
+++ b/gallery.html
@@ -12,8 +12,7 @@
         body {
             margin: 0;
             padding: 0;
-            background: #0A0A0A;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background: var(--color-background);
             overflow-x: hidden;
         }
         
@@ -23,7 +22,7 @@
             max-width: 1512px;
             min-height: 100vh;
             margin: 0 auto;
-            background: #0A0A0A;
+            background: var(--color-background);
             display: flex;
         }
         
@@ -51,30 +50,30 @@
         }
         
         .site-title {
-            font-family: Georgia, "Times New Roman", serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
-            color: #FFFFFF;
-            margin-bottom: 10px;
+            font-size: 1.5rem;
+            line-height: 2rem;
+            color: var(--color-text);
+            margin-bottom: 0.625rem;
             text-align: left;
         }
         
         .site-subtitle {
-            font-family: Georgia, "Times New Roman", serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 24px;
-            color: #FFFFFF;
+            font-size: 1rem;
+            line-height: 1.5rem;
+            color: var(--color-text);
             text-align: left;
         }
         
         .divider {
             width: 204px;
             height: 0;
-            border: 0.5px solid #444444;
+            border: 0.5px solid var(--color-divider);
             margin: 20px 0;
         }
         
@@ -94,8 +93,8 @@
         .tag-item {
             cursor: pointer;
             padding: 8px 0;
-            font-size: 16px;
-            color: #FFFFFF;
+            font-size: 1rem;
+            color: var(--color-text);
             transition: color 0.3s ease;
             width: 100%;
             text-align: left;
@@ -109,7 +108,7 @@
             left: 0;
             width: 0;
             height: 2px;
-            background-color: #DAA520;
+            background-color: var(--color-accent);
             transition: width 0.3s ease;
             max-width: 204px;
         }
@@ -120,7 +119,7 @@
         }
         
         .tag-item.active {
-            color: #DAA520;
+            color: var(--color-accent);
         }
         
         .main-content {
@@ -137,7 +136,7 @@
             top: 0;
             left: 286px;
             right: 46px;
-            background: #0A0A0A;
+            background: var(--color-background);
             z-index: 10;
             padding-top: 40px;
         }
@@ -150,29 +149,29 @@
         }
         
         .tag-selected {
-            font-family: 'Zen Old Mincho', serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 24px;
-            line-height: 32px;
-            color: #FFFFFF;
+            font-size: 1.5rem;
+            line-height: 2rem;
+            color: var(--color-text);
             width: 460px;
         }
         
         .results-count {
-            font-family: 'Zen Old Mincho', serif;
+            font-family: var(--font-heading);
             font-style: normal;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 24px;
+            font-size: 1rem;
+            line-height: 1.5rem;
             text-align: right;
-            color: #FFFFFF;
+            color: var(--color-text);
         }
         
         .horizontal-divider {
             width: 100%;
             height: 0;
-            border: 0.5px solid #444444;
+            border: 0.5px solid var(--color-divider);
             margin: 0;
         }
         
@@ -182,7 +181,7 @@
             height: 0;
             left: 266px;
             top: 40px;
-            border: 0.5px solid #444444;
+            border: 0.5px solid var(--color-divider);
             transform: rotate(90deg);
             transform-origin: 0 0;
             z-index: 5;
@@ -196,8 +195,9 @@
         }
         
         .disclaimer {
-            font-size: 10px;
-            color: #CCCCCC;
+            font-family: var(--font-heading);
+            font-size: 0.625rem;
+            color: var(--color-text);
             text-align: left;
             width: 100%;
             max-width: 204px;
@@ -233,8 +233,8 @@
         }
         
         .copyright {
-            font-size: 12px;
-            color: #CCCCCC;
+            font-size: 0.75rem;
+            color: var(--color-text);
             text-align: left;
             margin-top: 10px;
         }
@@ -254,7 +254,7 @@
             <div class="sidebar-content">
                 <div class="site-header">
                     <a href="index.html" class="logo-home">
-                        <div class="site-title">孫中山逝世<span class="gold-text">100</span>週年</div>
+                        <div class="site-title">孫中山逝世百週年</div>
                         <div class="site-subtitle">AI 人工智慧歷史資料集</div>
                     </a>
                     
diff --git a/index.html b/index.html
index 1546698..156a0e5 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@ <h2 class="subtitle white-text">開源 AI 人工智慧歷史資料集</h2>
             </div>
             
             <div class="buttons">
-                <a href="gallery.html" class="btn enter-btn">Enter</a>
+                <a href="gallery.html" target="_blank" rel="noopener noreferrer" class="btn enter-btn">Enter</a>
                 <a href="#" class="learn-more" id="learnMoreBtn">Learn more</a>
             </div>
         </div>
diff --git a/styles.css b/styles.css
index 79049a8..527d06e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,27 @@
 /* Global Styles */
+:root {
+    /* Font variables */
+    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-heading: Georgia, "Times New Roman", serif;
+    
+    /* Color variables */
+    --color-background: #0A0A0A;
+    --color-text: #FFFFFF;
+    --color-accent: #E0B122;
+    --color-link: #3498db;
+    --color-error: #f8d7da;
+    --color-error-bg: rgba(220, 53, 69, 0.1);
+    --color-divider: #444444;
+    
+    /* UI Element Colors */
+    --color-modal-bg: #191919;
+    --color-button: #555;
+    --color-button-hover: #777;
+    --color-footer-bg: #111;
+    --color-footer-text: #888;
+    --color-light-gray: #ddd;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -7,15 +30,15 @@
 
 /* Base font for entire site */
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    background-color: #000;
-    color: #fff;
+    font-family: var(--font-primary);
+    background-color: var(--color-background);
+    color: var(--color-text);
     line-height: 1.6;
 }
 
 /* Heading font family - only defined once */
 .main-title, .subtitle, .modal-text {
-    font-family: Georgia, "Times New Roman", serif;
+    font-family: var(--font-heading);
     font-weight: 600;
 }
 
@@ -25,12 +48,12 @@ body {
 }
 
 a {
-    color: #fff;
+    color: var(--color-text);
     text-decoration: none;
 }
 
 .link {
-    color: #3498db;
+    color: var(--color-link);
     text-decoration: none;
 }
 
@@ -109,7 +132,7 @@ a {
     font-size: 60px;
     line-height: 24px;
     text-align: center;
-    color: #FFFFFF;
+    color: var(--color-text);
     position: relative;
     width: 1200px;
     margin: 0 auto 50px;
@@ -119,18 +142,19 @@ a {
     font-size: 45px; /* Reverted back to original */
     line-height: 20px; /* Reverted back to original */
     text-align: center;
-    color: #FFFFFF;
+    color: var(--color-text);
     position: relative;
     width: 738px;
     margin: 0 auto 80px;
 }
 
 .white-text {
-    color: #FFFFFF;
+    color: var(--color-text);
 }
 
 .gold-text {
-    color: #E0B122;
+    color: var(--color-accent);
+    font-size: 1.15em; /* Make gold text 15% larger than surrounding text */
 }
 
 .powered-by {
@@ -141,7 +165,7 @@ a {
     font-size: 20px;
     line-height: 16px;
     text-align: center;
-    color: #FFFFFF;
+    color: var(--color-text);
     margin-bottom: 20px;
 }
 
@@ -170,7 +194,7 @@ a {
 
 /* KMT Logo with white rounded rectangle background */
 .kmt-logo-container {
-    background-color: #FFFFFF !important; /* Important flag to override browser styles */
+    background-color: var(--color-text) !important; /* Important flag to override browser styles */
     forced-color-adjust: none; /* Prevents Windows high contrast mode from changing colors */
     border-radius: 10px;
     display: flex;
@@ -204,7 +228,7 @@ a {
 }
 
 .enter-btn {
-    background-color: #FFFFFF !important; /* Important flag to override browser styles */
+    background-color: var(--color-accent) !important; /* Changed from white to accent color */
     forced-color-adjust: none; /* Prevents Windows high contrast mode from changing colors */
     color: #000000;
     font-size: 24px;
@@ -217,11 +241,11 @@ a {
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    border: 1px solid #FFFFFF;
+    border: 1px solid var(--color-accent); /* Updated border color to match background */
 }
 
 .enter-btn:hover {
-    background-color: #f0f0f0;
+    background-color: #f0cd6d; /* Lighter version of the accent color for hover state */
 }
 
 .learn-more {
@@ -229,7 +253,7 @@ a {
     line-height: 16px;
     text-align: center;
     text-decoration-line: underline;
-    color: #FFFFFF;
+    color: var(--color-text);
 }
 
 .learn-more:hover {
@@ -250,7 +274,7 @@ a {
 }
 
 .modal-content {
-    background-color: #000;
+    background-color: var(--color-background);
     margin: 5% auto;
     padding: 2rem;
     border: 1px solid #333;
@@ -273,13 +297,13 @@ a {
 
 .credits {
     font-size: 0.9rem;
-    color: #aaa;
+    color: var(--color-text);
     margin-top: 2rem;
 }
 
 .close-btn {
-    background-color: #555;
-    color: #fff;
+    background-color: var(--color-button);
+    color: var(--color-text);
     border: none;
     padding: 0.5rem 2rem;
     margin: 0 auto;
@@ -287,7 +311,7 @@ a {
 }
 
 .close-btn:hover {
-    background-color: #777;
+    background-color: var(--color-button-hover);
 }
 
 /* Responsive Adjustments */
@@ -340,6 +364,7 @@ a {
         margin: 0 auto 30px;
         white-space: nowrap; /* Prevent line breaks within the title */
         text-align: center;
+        font-family: var(--font-heading) !important; /* Ensure Georgia font */
     }
     
     .subtitle {
@@ -348,6 +373,14 @@ a {
         line-height: 32px; /* Increased line height to match the new font size */
         margin: 0 auto;
         text-align: center;
+        font-family: var(--font-heading) !important; /* Ensure Georgia font */
+    }
+    
+    /* Ensure modal text uses the correct font in mobile */
+    .modal-text {
+        font-family: var(--font-heading) !important; /* Ensure Georgia font */
+        line-height: 1.8;
+        margin-bottom: 2rem;
     }
     
     .powered-by {
@@ -397,17 +430,25 @@ a {
         margin-bottom: 20px; /* Add extra bottom margin */
     }
     
+    /* Fix enter button styles on mobile */
     .enter-btn {
         margin: 0 auto 20px;
         width: 160px;
         height: 55px;
         font-size: 20px;
+        background-color: var(--color-accent) !important; /* Ensure accent color is applied */
+        border: 1px solid var(--color-accent);
     }
     
     .learn-more {
         position: relative;
         margin: 0;
     }
+    
+    /* Gold text to maintain same relative size increase on mobile */
+    .gold-text {
+        font-size: 1.15em; /* Keep the same relative size increase */
+    }
 }
 
 @media (max-width: 480px) {
@@ -446,7 +487,7 @@ a {
 
 /* Header for Gallery Page */
 header {
-    background-color: #000;
+    background-color: var(--color-background);
     padding: 1rem 0;
     position: sticky;
     top: 0;
@@ -474,7 +515,7 @@ header {
 
 /* Footer Styles */
 footer {
-    background-color: #111;
+    background-color: var(--color-footer-bg);
     padding: 2rem 0;
     margin-top: 2rem;
 }
@@ -507,7 +548,7 @@ footer {
 
 footer p {
     font-size: 0.9rem;
-    color: #888;
+    color: var(--color-footer-text);
 }
 
 /* Responsive footer adjustments */