diff --git a/dapp/src/components/CommitHistory.astro b/dapp/src/components/CommitHistory.astro
deleted file mode 100644
index 688b2e4..0000000
--- a/dapp/src/components/CommitHistory.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-import { getCommitHistory } from '../service/GithubService';
-import CommitRecord from './CommitRecord.astro';
-import { formatDate } from '../service/utils';
-import type { FormattedCommit } from '../types/github';
-
-const commitHistory = await getCommitHistory('tupui', 'soroban-versioning');
----
-
-<div class="commit-history-container max-w-[900px]  max-h-[560px] mx-auto overflow-y-auto space-y-4 relative pl-8 before:content-[''] before:absolute before:left-[0.5rem] before:top-0 before:bottom-0 before:w-0.5 before:bg-zinc-700">
-  {commitHistory && commitHistory.length > 0 && commitHistory.map((day: { date: string; commits: FormattedCommit[] }) => (
-    <div class="day-group relative">
-      <h3 class="text-lg font-semibold pb-4 relative">
-        <div class="commit-dot absolute left-[-2.2rem] top-0 w-[25px] h-[25px] bg-[#f3f3f3] rounded-full before:content-[''] before:absolute before:left-[50%] before:top-[50%] before:transform before:-translate-x-1/2 before:-translate-y-1/2 before:w-[15px] before:h-[15px] before:border-[2px] before:rounded-full"></div>
-        <span class="pr-2 relative z-10">{formatDate(day.date)}</span>
-      </h3>
-      <div class="space-y-4 relative">
-        {day.commits.map((commit: FormattedCommit) => (
-          <div class="relative">
-            <div class="absolute left-[-1.25rem] top-1/2 w-2 h-2 rounded-full transform -translate-y-1/2"></div>
-            <CommitRecord
-              message={commit.message}
-              date={commit.commit_date}
-              authorName={commit.author.name}
-              authorGithubLink={commit.author.html_url}
-              sha={commit.sha}
-              commitLink={commit.html_url}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  ))}
-</div>
diff --git a/dapp/src/components/CommitHistory.jsx b/dapp/src/components/CommitHistory.jsx
new file mode 100644
index 0000000..b9eabdd
--- /dev/null
+++ b/dapp/src/components/CommitHistory.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { getCommitHistory } from '../service/GithubService';
+import CommitRecord from './CommitRecord.jsx';
+import { formatDate } from '../service/utils';
+import { loadProjectRepoInfo } from '../service/StateService';
+
+const CommitHistory = () => {
+  const [commitHistory, setCommitHistory] = React.useState([]);
+
+  React.useEffect(() => {
+    const fetchCommitHistory = async () => {
+      const projectRepoInfo = loadProjectRepoInfo();
+      if (projectRepoInfo?.author && projectRepoInfo?.repository) {
+        const history = await getCommitHistory(projectRepoInfo.author, projectRepoInfo.repository);
+        console.log("history:", history);
+        setCommitHistory(history);
+      }
+    };
+    fetchCommitHistory();
+  }, []);
+
+  return (
+    <div className="commit-history-container max-h-[560px] overflow-auto relative pl-8">
+      {commitHistory.map((day) => (
+        <div key={day.date} className="day-group relative">
+          <h3 className="text-lg font-semibold pb-4 relative before:content-[''] before:absolute before:-left-[1.5rem] before:top-0 before:bottom-0 before:w-0.5 before:bg-zinc-700">
+            <div className="commit-dot absolute left-[-2.2rem] top-0 w-[25px] h-[25px] bg-[#f3f3f3] rounded-full before:content-[''] before:absolute before:left-[50%] before:top-[50%] before:transform before:-translate-x-1/2 before:-translate-y-1/2 before:w-[15px] before:h-[15px] before:border-[2px] before:rounded-full"></div>
+            <span className="pr-2 relative z-10">{formatDate(day.date)}</span>
+          </h3>
+          <div className="space-y-4 pb-4 relative before:content-[''] before:absolute before:-left-[1.5rem] before:top-0 before:bottom-0 before:w-0.5 before:bg-zinc-700">
+            {day.commits.map((commit) => (
+              <div key={commit.sha} className="relative">
+                <CommitRecord
+                  message={commit.message}
+                  date={commit.commit_date}
+                  authorName={commit.author.name}
+                  authorGithubLink={commit.author.html_url}
+                  sha={commit.sha}
+                  commitLink={commit.html_url}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CommitHistory;
diff --git a/dapp/src/components/CommitRecord.astro b/dapp/src/components/CommitRecord.astro
deleted file mode 100644
index 579b6af..0000000
--- a/dapp/src/components/CommitRecord.astro
+++ /dev/null
@@ -1,121 +0,0 @@
----
-interface Props {
-  message: string;
-  date: string;
-  authorName: string;
-  authorGithubLink: string;
-  sha: string;
-  commitLink: string;
-}
-
-const { message, date, authorName, authorGithubLink, sha, commitLink } = Astro.props;
-
-import { formatTime } from '../service/utils';
-
-const formattedMessage = message.split(/\r?\n/).map((line: string) => line.trim()).filter(Boolean);
-const firstLine = formattedMessage[0];
-const hasMoreLines = formattedMessage.length > 1;
----
-
-<div class="commit-record relative bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex justify-between items-start" data-sha={sha}>
-  <div class="commit-info flex-grow overflow-hidden mr-4">
-    <div class="flex items-center">
-      <a href={commitLink} target="_blank" rel="noopener noreferrer" class="commit-message text-lg font-medium hover:underline hover:text-blue-500 truncate">{firstLine}</a>
-      {hasMoreLines && (
-        <button class="expand-button ml-2 text-xs bg-zinc-200 hover:bg-zinc-300 text-gray-700 font-semibold py-1 px-2 rounded-md transition-colors duration-200 flex-shrink-0">
-          . . .
-        </button>
-      )}
-    </div>
-    {hasMoreLines && (
-      <div class="expanded-message hidden mt-2 text-sm text-gray-700 whitespace-pre-wrap">{formattedMessage.slice(1).join('\n')}</div>
-    )}
-    <div class="commit-details text-sm text-gray-600 mt-1">
-      <a href={authorGithubLink} target="_blank" rel="noopener noreferrer" class="author-name font-semibold hover:underline hover:text-blue-500">{authorName}</a>
-      <span class="mx-1">committed on</span>
-      <span class="commit-date">{formatTime(date)}</span>
-    </div>
-  </div>
-  <div class="commit-sha flex items-center space-x-2 flex-shrink-0">
-    <a href={commitLink} target="_blank" rel="noopener noreferrer" class="sha text-sm font-mono text-gray-500 hover:bg-zinc-400 transition-colors duration-200 px-2 py-1 rounded">{sha.substring(0, 7)}</a>
-    <button class="copy-button hover:bg-zinc-400 transition-colors duration-200 p-1 rounded" data-sha={sha}>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-gray-400 hover:text-gray-600">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
-      </svg>
-    </button>
-  </div>
-</div>
-
-<script>
-  import { getProjectHash } from '../service/ProjectService';
-
-  function setupCopyButton(button: HTMLButtonElement) {
-    button.addEventListener('click', async () => {
-      const sha = button.getAttribute('data-sha');
-      if (sha) {
-        try {
-          await navigator.clipboard.writeText(sha);
-          const svg = button.querySelector('svg');
-          if (svg) {
-            svg.classList.remove('text-gray-400', 'hover:text-gray-600');
-            svg.classList.add('text-green-500');
-            svg.innerHTML = `
-              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-            `;
-          }
-          setTimeout(() => {
-            if (svg) {
-              svg.classList.remove('text-green-500');
-              svg.classList.add('text-gray-400', 'hover:text-gray-600');
-              svg.innerHTML = `
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
-              `;
-            }
-          }, 10);
-        } catch (err) {
-          console.error('Failed to copy: ', err);
-        }
-      }
-    });
-  }
-
-  function setupExpandButtons() {
-    const expandButtons = document.querySelectorAll('.expand-button');
-    expandButtons.forEach(button => {
-      button.addEventListener('click', () => {
-        const record = button.closest('.commit-record');
-        const expandedMessage = record?.querySelector('.expanded-message');
-        if (expandedMessage) {
-          expandedMessage.classList.toggle('hidden');
-          button.textContent = expandedMessage.classList.contains('hidden') ? '. . .' : 'Less';
-        }
-      });
-    });
-  }
-
-  async function highlightLatestCommit() {
-    const latestSha = await getProjectHash();
-    if (latestSha) {
-      const commitRecords = document.querySelectorAll('.commit-record');
-      commitRecords.forEach((record) => {
-        const recordSha = record.getAttribute('data-sha');
-        if (recordSha === latestSha) {
-          record.classList.add('border-2', 'border-blue-300', 'bg-zinc-300');
-          record.id = 'latest-commit-record';
-          const indicator = document.createElement('div');
-          indicator.className = 'absolute top-0.5 left-1 text-xs font-bold tracking-tighter leading-3 bg-lime rounded-sm p-0.5';
-          indicator.textContent = 'latest commit';
-          record.insertBefore(indicator, record.firstChild);
-        }
-      });
-    }
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    highlightLatestCommit();
-    const copyButtons = document.querySelectorAll('.copy-button');
-    copyButtons.forEach(button => setupCopyButton(button as HTMLButtonElement));
-    setupExpandButtons();
-  });
-</script>
-
diff --git a/dapp/src/components/CommitRecord.jsx b/dapp/src/components/CommitRecord.jsx
new file mode 100644
index 0000000..cd37fc3
--- /dev/null
+++ b/dapp/src/components/CommitRecord.jsx
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { formatTime } from '../service/utils';
+import { loadProjectLatestSha } from '../service/StateService';
+
+const CommitRecord = ({ message, date, authorName, authorGithubLink, sha, commitLink }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const [isLatestCommit, setIsLatestCommit] = useState(false);
+  const formattedMessage = message.split(/\r?\n/).map(line => line.trim()).filter(Boolean);
+  const firstLine = formattedMessage[0];
+  const hasMoreLines = formattedMessage.length > 1;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    const highlightLatestCommit = () => {
+      const latestSha = 'cb2e487eb72e836d5ef9f00b52997416a56173dd';
+      setIsLatestCommit(sha === latestSha);
+    };
+    highlightLatestCommit();
+  }, [sha]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(sha);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  };
+
+  return (
+    <div className={`commit-record relative bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex justify-between items-start ${isLatestCommit ? 'border-2 border-blue-300 bg-zinc-300' : ''}`} data-sha={sha} id={isLatestCommit ? 'latest-commit-record' : undefined}>
+      {isLatestCommit && (
+        <div className="absolute top-0.5 left-1 text-xs font-bold tracking-tighter leading-3 bg-lime rounded-sm p-0.5">
+          latest commit
+        </div>
+      )}
+      <div className="commit-info flex-grow overflow-hidden mr-4">
+        <div className="flex items-center">
+          <a href={commitLink} target="_blank" rel="noopener noreferrer" className="commit-message text-lg font-medium hover:underline hover:text-blue-500 truncate">{firstLine}</a>
+          {hasMoreLines && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="expand-button ml-2 text-xs bg-zinc-200 hover:bg-zinc-300 text-gray-700 font-semibold py-1 px-2 rounded-md transition-colors duration-200 flex-shrink-0">
+              {isExpanded ? 'Less' : '. . .'}
+            </button>
+          )}
+        </div>
+        {hasMoreLines && isExpanded && (
+          <div className="expanded-message mt-2 text-sm text-gray-700 whitespace-pre-wrap">{formattedMessage.slice(1).join('\n')}</div>
+        )}
+        <div className="commit-details text-sm text-gray-600 mt-1">
+          <a href={authorGithubLink} target="_blank" rel="noopener noreferrer" className="author-name font-semibold hover:underline hover:text-blue-500">{authorName}</a>
+          <span className="mx-1">committed on</span>
+          <span className="commit-date">{formatTime(date)}</span>
+        </div>
+      </div>
+      <div className="commit-sha flex items-center space-x-2 flex-shrink-0">
+        <a href={commitLink} target="_blank" rel="noopener noreferrer" className="sha text-sm font-mono text-gray-500 hover:bg-zinc-400 transition-colors duration-200 px-2 py-1 rounded">{sha.substring(0, 7)}</a>
+        <button className="copy-button hover:bg-zinc-400 transition-colors duration-200 p-1 rounded" onClick={handleCopy}>
+          {isCopied ? (
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 text-green-500">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 text-gray-400 hover:text-gray-600">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CommitRecord;
\ No newline at end of file
diff --git a/dapp/src/components/ProjectInfo.astro b/dapp/src/components/ProjectInfo.astro
index 20bb5dd..97781ad 100644
--- a/dapp/src/components/ProjectInfo.astro
+++ b/dapp/src/components/ProjectInfo.astro
@@ -2,7 +2,7 @@
 import Topic from "./utils/Topic.astro";
 import Modal from "./utils/Modal.astro";
 import Loading from "./utils/Loading.astro";
-import CommitHistory from "./CommitHistory.astro";
+import CommitHistory from "./CommitHistory.jsx";
 ---
 
 <div class="relative flex flex-col items-center md:flex-row justify-between">
@@ -50,7 +50,7 @@ import CommitHistory from "./CommitHistory.astro";
       </div>
     </div>
     <div id="commit-history-container" class="mt-4 overflow-hidden transition-all duration-300 max-h-0">
-      <CommitHistory/>
+      <CommitHistory client:load/>
     </div>
   </div>
 </div>
@@ -111,8 +111,8 @@ import CommitHistory from "./CommitHistory.astro";
 </Modal>
 
 <script>
-  import { getProject, updateConfig } from "../service/ProjectService";
-  import { initializeProjectState, loadedProjectInfo, setProject } from "../service/StateService";
+  import { getProject, getProjectHash, updateConfig } from "../service/ProjectService";
+  import { initializeProjectState, loadedProjectInfo, setProject, setProjectLatestSha } from "../service/StateService";
   import { loadedPublicKey } from "./stellar-wallets-kit";
 
   document.addEventListener("astro:page-load", () => {
@@ -192,7 +192,20 @@ import CommitHistory from "./CommitHistory.astro";
       }
     }
 
+    
+  async function updateProjectLatestSha() {
+    try {
+      const latestSha = await getProjectHash();
+      if (latestSha) {
+        setProjectLatestSha(latestSha);
+      }
+    } catch (error) {
+      console.error("Error updating project latest SHA:", error);
+    }
+  }
+
     updateProjectInfo();
+    updateProjectLatestSha();  // Call this function to update the latest SHA
 
     const button = document.querySelector(
       "[update-config]",
diff --git a/dapp/src/service/StateService.ts b/dapp/src/service/StateService.ts
index d14b434..4ffbe35 100644
--- a/dapp/src/service/StateService.ts
+++ b/dapp/src/service/StateService.ts
@@ -30,6 +30,12 @@ const projectRepoInfo: {
   project_repository: undefined,
 }
 
+const projectLatestSha: {
+  sha: string | undefined;
+} = {
+  sha: undefined,
+};
+
 function initializeProjectState() {
   if (typeof window !== 'undefined') {
     const storedState = localStorage.getItem('projectState');
@@ -53,6 +59,12 @@ function initializeProjectState() {
       projectRepoInfo.project_author = parsedRepoInfo.project_author;
       projectRepoInfo.project_repository = parsedRepoInfo.project_repository;
     }
+
+    const storedLatestSha = localStorage.getItem('projectLatestSha');
+    if (storedLatestSha && projectLatestSha.sha === undefined) {
+      const parsedLatestSha = JSON.parse(storedLatestSha);
+      projectLatestSha.sha = parsedLatestSha.sha;
+    }
   }
 }
 
@@ -93,6 +105,15 @@ function setProjectRepoInfo(author: string, repository: string): void {
   }
 }
 
+function setProjectLatestSha(sha: string): void {
+  projectLatestSha.sha = sha;
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('projectLatestSha', JSON.stringify({
+      sha: projectLatestSha.sha,
+    }));
+  }
+}
+
 function loadedProjectId(): Buffer | undefined {
   return projectState.project_id;
 }
@@ -121,6 +142,10 @@ function loadProjectRepoInfo(): { author: string; repository: string } | undefin
   };
 }
 
+function loadProjectLatestSha(): string | undefined {
+  return projectLatestSha.sha;
+}
+
 export {
   initializeProjectState,
   setProjectId,
@@ -129,4 +154,6 @@ export {
   loadedProjectId,
   loadedProjectInfo,
   loadProjectRepoInfo,
+  setProjectLatestSha,
+  loadProjectLatestSha,
 };
\ No newline at end of file