diff --git a/src/forge/Main/CoderDepotCatalogue.jsx b/src/forge/Main/CoderDepotCatalogue.jsx
index 9d515e6b..f7dea90f 100644
--- a/src/forge/Main/CoderDepotCatalogue.jsx
+++ b/src/forge/Main/CoderDepotCatalogue.jsx
@@ -29,9 +29,12 @@ function CoderDepotCatalogue({item , goToSubRoot , owner , projectsId , platform
           <span><i className={`iconfont ${typeIco[`${item.type}`]} mr8`}></i>{item.name}</span>
           :
           (item.type === "submodule" ? 
-            <a href={`${item.submodule_git_url.slice(0,item.submodule_git_url.length-4)}`} target="_self">
-              <i className={`iconfont ${typeIco[`${item.type}`]} mr8`}></i>{item.name}
-            </a>
+            <React.Fragment>
+              <a href={`${item.submodule_git_url.slice(0,item.submodule_git_url.length-4)}`} target="_self">
+                <i className={`iconfont ${typeIco[`${item.type}`]} mr8`}></i>{item.name} 
+              </a>
+              <span className="ml2">@</span><a href={`/${owner}/${projectsId}/commits/${truncateCommitId(item.sha)}`} title={item.sha}>{truncateCommitId(item.sha)}</a>
+            </React.Fragment>
             :
             <a onClick={()=>goToSubRoot(item.path,item.type,item.name)}>
               <i className={`iconfont ${typeIco[`${item.type}`]} mr8`}></i>{item.name}