diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
index f1670a5..6cfaf2d 100644
--- a/.firebase/hosting.YnVpbGQ.cache
+++ b/.firebase/hosting.YnVpbGQ.cache
@@ -1,15 +1,15 @@
-robots.txt,1725347098103,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-logo512.png,1725347098103,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
-index.html,1725347101733,691120896e66574ebef21e2df77282e4f462f933f936fd52a4d05791e25f1c13
-logo192.png,1725347098102,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
-favicon.ico,1725347098102,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
-asset-manifest.json,1725347101733,491aa9da8efa3551723e84f7c80d97248c64c2c6d32315d89dc3522911799fbb
-static/js/main.3dd63bcb.js.LICENSE.txt,1725347101735,2e0317bf47c29fb7d0485a53b66ae8cb58c98d0cbaf239efac64dd310dfdabda
-static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg,1725347101734,5f6ecf30024a00eebae8bb333ddc0f1c3d19fd8e7e6838404547f41abb63a8e8
-manifest.json,1725347098103,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
-static/js/453.ed3810f9.chunk.js,1725347101735,8680b34d8deb72fd4e63aa475b17f7c79f69163f2910adecf9e96cdd89f5148f
-static/css/main.f855e6bc.css.map,1725347101735,22280b0c507a9b42de44c6d2601519ed3675fa26db7b6de124a4a8999d95d5be
-static/css/main.f855e6bc.css,1725347101735,b61eb3bbf7dd6148bab9cf577b732df73faa394d9b8bacb8422e10fa90ffa46e
-static/js/453.ed3810f9.chunk.js.map,1725347101735,ac5e98edb5bc7e7fee4a8934dc5446ff25749c201891e5ced082a5f2c067ba6b
-static/js/main.3dd63bcb.js,1725347101735,64d0bce07edcb9d7a3d178f591663f770ca8fc70ce5b9669e0a1aa57791957fe
-static/js/main.3dd63bcb.js.map,1725347101735,ce2b3eaeed909db6fbc1de31676eaea433fab705309bc25d56f30f6cba323e2c
+robots.txt,1725691795409,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5
+manifest.json,1725691795408,4368aeaf848ae2e048765562c289452f33ad2a175c4b1951ea8bdf2ada0d5b10
+index.html,1725749057871,effc881b82c9d3c89ee011b5ffb8dafb953803f2ac2de53235fe47d2f9983b74
+logo512.png,1725691795407,212b102aa09e51b3b3e06647e81f7801a61333e171f6582e8124379aabccb41d
+logo192.png,1725691795406,79e2b749561016bc8af300ea19f48347ceed3cb1a54f48ae456172eca45e08f0
+asset-manifest.json,1725749057871,a8269c53ccbff485f0c05c52cc060c9db9fb8241b26989acfeee1e5138bdfa55
+favicon.ico,1725691795404,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d
+static/js/main.db631921.js.LICENSE.txt,1725749057877,92ec6870e0d50ef16c11a5af58e8bae63fc674a797281dae6198d723b4582cff
+static/js/453.ed3810f9.chunk.js.map,1725749057877,b580f924df88443006fe2c2050df639443c362a4697c20b3a6bd730b8bbd83b0
+static/js/453.ed3810f9.chunk.js,1725749057877,ad49a5ec5043145417a4fe58d70d740daa4764cb309e9bb4bcc93dfbdf2b5643
+static/css/main.79d19d76.css,1725749057877,8532eb1bc08eefe39074a437fdd2823b7e14851191c7cd07f96140abf432a5b4
+static/css/main.79d19d76.css.map,1725749057877,863af17a469ff836e46a378ba7cf2a08b3d4a827991c0be88c37d888414ad7c9
+static/media/poster.0fad7cc42115f255a281.png,1725749057877,f3025012e905a2fd748b83ff036dc7fd5dbc6b6aa6493435a0c7a60db866b5bf
+static/js/main.db631921.js,1725749057878,8665bc87d6ae3290e1fcd49e18c2c356b1bafd522c781980eb1048fd9ed4f032
+static/js/main.db631921.js.map,1725749057878,906088b6f783d5ea680d84a43f521330163825d2a8fa738b7546888a52ab1dfd
diff --git a/src/App.css b/src/App.css
index dc946a5..405982b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,28 +1,98 @@
-body,html{
-  height: 100%;
-  margin: 0;
-  padding: 0;
+/* Font-Family */
+body {
+  font-family: "PingFang", "Roboto", sans-serif; /* 中文使用PingFang，英文字母與數字使用Roboto */
 }
 
-.App {
-  text-align: center;
-  background-color: #ffffff;
+/* Typography */
+
+/* H1 Regular */
+.font-H1-regular {
+  font-size: 36px;
+  line-height: 48px;
+  font-weight: 400; /* regular */
+}
+
+/* H1 Semibold */
+.font-H1-semibold {
+  font-size: 36px;
+  line-height: 48px;
+  font-weight: 600; /* semibold */
 }
-.backgorund{
-  justify-content: center;
-  align-items: center;
-  background-color: #ffffff;
+
+/* H2 Regular */
+.font-H2-regular {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 400; /* regular */
 }
 
+/* H2 Semibold */
+.font-H2-semibold {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 600; /* semibold */
+}
+
+/* H3 Regular */
+.font-H3-regular {
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 400; /* regular */
+}
+
+/* H3 Semibold */
+.font-H3-semibold {
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600; /* semibold */
+}
+
+/* Body Regular */
+.font-Body-regular {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400; /* regular */
+}
+
+/* Body Semibold */
+.font-Body-semibold {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600; /* semibold */
+}
 
+/* Caption Regular */
+.font-Caption-regular {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400; /* regular */
+}
+
+/* Colors */
+
+/* Reminder */
+.reminder-hover-color {
+  background-color: #F4B992; /* Orange / 300 */
+}
+
+.reminder-default-color {
+  background-color: #FDB53A; /* Orange / 500 */
+}
+
+/* Disable */
+.disable-color {
+  background-color: #CAD1D5; /* Gray / 100 */
+}
+
+/* Text colors */
+.text-direction-color {
+  color: #91A0A8; /* Gray / 400 */
+}
+
+.text-second-color {
+  color: #475259; /* Grey / 700 */
+}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.text-primary-color {
+  color: #30383D; /* Grey / 800 */
 }
diff --git a/src/App.js b/src/App.js
index 6eb12f5..f7a82db 100644
--- a/src/App.js
+++ b/src/App.js
@@ -38,7 +38,7 @@ function App() {
 
           {/* 我的地點頁面 */}
          {/* <Route 
-            path="/myPlace" 
+            path="/check-in-history" 
             element={<MyPlace userId="" />} 
           /> */}
 
diff --git a/src/components/ArtDetail.js b/src/components/ArtDetail.js
index f01dd3c..20eb136 100644
--- a/src/components/ArtDetail.js
+++ b/src/components/ArtDetail.js
@@ -34,7 +34,7 @@ const DetailComponent = () => {
 
   useEffect(() => {
     // Find the art piece in local JSON data
-    const piece = artDataJson.find(p => p.作品編號 === artId);
+    const piece = artDataJson.find(p => p.系統編號 === artId);
     setArtPiece(piece);
 
     if (piece) {
@@ -56,7 +56,7 @@ const DetailComponent = () => {
     <div className="container my-5">
       <div className="card">
         <div className="card-body">
-          <h2 className="card-title">{artPiece.作品名稱}</h2>
+          <h2 className="card-title" class="font-H1-semibold">{artPiece.作品名稱}</h2>
           <p className="card-text">作者: {artPiece.作者}</p>
           <p className="card-text">設置地點: {artPiece.設置地點}</p>
           <p className="card-text">場域: {artPiece.場域}</p>
@@ -71,11 +71,11 @@ const DetailComponent = () => {
 
           {/* Button Section */}
           <div className="d-flex justify-content-between">
-            <Link to="/gallery" className="btn btn-secondary">回到列表</Link>
+            <Link to="/gallery" className="btn" style={{ backgroundColor: '#5AB4C5', border: 'none', color: 'white', padding: '10px' }}>回列表</Link>
             
-            <span className="d-inline-block" tabIndex="0" data-bs-toggle="tooltip" title={isCheckInEnabled ? "打卡" : `距離需小於50公尺，當前距離: ${distance} 公尺`}>
-              <button className="btn btn-primary" disabled={!isCheckInEnabled}>
-                打卡
+            <span className="d-inline-block" tabIndex="0" data-bs-toggle="tooltip">
+              <button className="btn btn-primary" disabled={!isCheckInEnabled} style={{ backgroundColor: '#5AB4C5', border: 'none', color: 'white', padding: '10px' }}>
+                {isCheckInEnabled ? "打卡" : `距離需小於50公尺，當前距離: ${distance} 公尺`}
               </button>
             </span>
 
diff --git a/src/components/Gallery.js b/src/components/Gallery.js
index 14a572a..dc37bd2 100644
--- a/src/components/Gallery.js
+++ b/src/components/Gallery.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 // Data
 import artDataJson from '../data/artData.json'; 
-import './css/artlist.css';
+//import './css/artlist.css';
 
 
 
@@ -56,13 +56,13 @@ const GalleryPage = () => {
     <div id="gallery-page" className="container">
       {/* Header */}
       <div id="header" className="my-4">
-        <h4 id="header-title">周邊裝置藝術</h4>
+        <h4 id="header-title" class="font-H1-semibold">周邊裝置藝術</h4>
       </div>
 
       {/* Art Installations List */}
       <div id="art-list" style={{ overflowY: 'scroll' }}>
         {sortedArtData.map((item) => (
-          <div key={item.作品編號} className="card mb-3">
+          <div key={item.系統編號} className="card mb-3">
             <div className="row g-0">
               <div className="col-md-4">
                 <img
@@ -79,8 +79,8 @@ const GalleryPage = () => {
                     <br />
                     {item.distance ? `${item.distance} m` : '距離未知'}
                   </p>
-                  <Link to={{pathname: `/details/${item.作品編號}`}}
-                    className="btn btn-primary"
+                  <Link to={{pathname: `/details/${item.系統編號}`}}
+                    className="btn btn-outline-info mt-3 w-100 font-H3-semibold"
                   >
                     打開
                   </Link>
@@ -92,8 +92,8 @@ const GalleryPage = () => {
       </div>
       {/* Bottom Navigation */}
       <div id="bottom-nav" className="fixed-bottom bg-light text-center p-3">
-        <Link to="/map" className="btn btn-outline-primary">
-          回到地圖
+        <Link to="/map" className="btn mt-3 w-100 font-H3-semibold" style={{ backgroundColor: '#5AB4C5', border: 'none', color: 'white', padding: '10px' }}>
+          回地圖
         </Link>
       </div>
     </div>
diff --git a/src/components/Introduction.js b/src/components/Introduction.js
index 19f26d4..4dc643f 100644
--- a/src/components/Introduction.js
+++ b/src/components/Introduction.js
@@ -1,46 +1,64 @@
-// Introduction.js
 import React from 'react';
-import './css/introduction.css';
+//import './css/introduction.css';
 import { Link } from 'react-router-dom';
+// Import images
+import TownPassEllipse from '../img/TownPass_Ellipse.png';
+import PosterImage from '../img/poster.png';
 
 function Introduction() {
     return (
-      <div  className="container mt-5" id="basic">
+      <div className="container mt-5" id="basic">
         {/* Main card bar */}
-        <div className="card text-center">
-          {/* Card header */}
-          <div className="head mt-4">
-            <img className="image rounded float-start" src= "./img/TownPass_Ellipse.png" alt="" />
-            <h2 className="ml-2" id="title">藝通台北</h2>
-          </div>
-  
+        <div className="card text-center" style={{ border: '1px solid #ccc', boxShadow: '5px 5px 15px rgba(0,0,0,0.1)' }}>
+            <img 
+                className="image rounded" 
+                src={TownPassEllipse} 
+                alt="TownPass Logo" 
+                style={{ width: '60px', height: '60px', position: 'absolute', top: '0px', left: '0px' }} 
+              />
+            {/* Card header - Align logo and title */}
+            <div className="text-center mt-4">
+              <h2 className="mb-0 font-H1-semibold" style={{ color: '#46A5E0', textAlign: 'center' }}>
+                藝通台北
+              </h2>
+              <span className="font-H2-regular" style={{ color: '#5E6D76', textAlign: 'center' }}>公共裝置藝術</span>
+            </div>
+
           {/* Card body */}
-          <div className="card-body">
-            <p className="card-text" id="description">
+          <div className="card-body text-start" style={{ padding: '1rem 1.5rem' }}>
+            <p className="card-text font-Body-regular" style={{ color: '#4D4D4D' }}>
               探索城市中的藝術美景，藝術體驗台北的獨特魅力！
-              <br />
               台北市各戶外公共藝術地標，已經超過1000件作品，來為城市帶來活力與創意。
-              <br />
               若您想探索這些藝術地點，請使用手機定位系統。
               <br />
             </p>
-  
+            {/* Poster image with adjusted usage */}
+            <img 
+              className="rounded mx-auto d-block" 
+              src={PosterImage} 
+              alt="海報" 
+              style={{ maxWidth: '100%', height: 'auto', margin: '20px 0' }} 
+            />
             {/* Notification / warning */}
-            <div className="alert alert-warning " id="notification" role="alert">
-              本服務將根據您當前的手機定位，找到附近的公共藝術作品。<br />
-              請使用智慧定位服務並進行打卡。
+            <div className="alert alert-warning text-center font-H3-regular" role="alert" style={{ backgroundColor: '#FFF9E6', color: '#856404', borderColor: '#FFD480' }}>
+              本服務將根據您當前的手機定位，找到附近的公共藝術作品。
+              請開啟GPS定位服務。
             </div>
           </div>
-  
+
           {/* Card footer */}
-          <div className="foot mb-4">
-            來探索台北這座城市中的藝術瑰寶吧！
+          <div className="foot text-center mb-5 font-Body-regular">
+            快來探索台北這座城市中的藝術瑰寶吧！
           </div>
         </div>
-  
-         {/* Link to Map Page */}
-         <Link to="/map" className="btn btn-info mt-4 px-4" id="enter">進入地圖</Link>
-         <Link to="/map" className="btn btn-info mt-4 px-4" id="enter">打卡記錄</Link>
+
+        {/* Link to Map Page */}
+        <Link to="/map" className="btn btn-info mt-3 w-100 font-H3-semibold" style={{ backgroundColor: '#5AB4C5', border: 'none', color: 'white', padding: '10px' }}>
+          進入地圖
+        </Link>
+        <Link to="/check-in-history" className="btn btn-info mt-3 w-100 mb-5 font-H3-semibold" style={{ backgroundColor: '#5AB4C5', border: 'none', color: 'white', padding: '10px' }}>
+          打卡記錄
+        </Link>
       </div>
     );
 }
diff --git a/src/components/Map.js b/src/components/Map.js
index cbe4f3c..911aa8d 100644
--- a/src/components/Map.js
+++ b/src/components/Map.js
@@ -1,19 +1,10 @@
-// Map.js
 import React from 'react';
 import { Link } from 'react-router-dom';
- // 引入 MapComponent
 import MapComponent from './ArtMap.js';
-import './css/map.css';
-
 
 const MapPage = () => {
   return (
     <div id="map-page">
-      {/* Header */}
-      {/* <div id="header">
-        <h3 id="title">藝通台北</h3>
-      </div> */}
-      
       {/* Map placeholder */}
       <div id="map-placeholder">
         <MapComponent />  
@@ -21,8 +12,7 @@ const MapPage = () => {
       
       {/* Bottom info and button */}
       <div id="bottom-info">
-        <p id="art-info">公共裝置藝術資訊</p>
-        <Link to="/gallery" id="gallery-link" className="btn btn-info mt-4 px-4">前往打卡</Link>
+        <Link to="/gallery" className="btn btn-info mt-3 w-100 font-H3-semibold" style={{ backgroundColor: '#5AB4C5', border: 'none', color: 'white', padding: '10px' }}>前往打卡</Link>
       </div>
     </div>
   );
diff --git a/src/components/record.js b/src/components/record.js
index bdfbb81..1bb84c8 100644
--- a/src/components/record.js
+++ b/src/components/record.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import artData from './artData.json'; // 將本地 artData.json 檔案匯入
-import './css/record.css';
+//import './css/record.css';
 
 
 const ArtInfo = () => {
diff --git a/src/img/monster01.png b/src/img/monster01.png
deleted file mode 100644
index 9b9b5bb..0000000
Binary files a/src/img/monster01.png and /dev/null differ