diff --git a/src/sections/Community/Handbook/Handbook.style.js b/src/sections/Community/Handbook/Handbook.style.js
index e1d641d76fe7..523f63b74252 100644
--- a/src/sections/Community/Handbook/Handbook.style.js
+++ b/src/sections/Community/Handbook/Handbook.style.js
@@ -166,6 +166,12 @@ export const HandbookWrapper = styled.div`
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
 
+    .archived-project {
+      opacity: 0.3;
+      background-color: #808080;
+      // pointer-events: none;
+    }
+
     .linkscol{
       text-align: center;
       width:8%;
diff --git a/src/sections/Community/Handbook/repository.js b/src/sections/Community/Handbook/repository.js
index 0ef3c168a5d7..af770b6a1af1 100644
--- a/src/sections/Community/Handbook/repository.js
+++ b/src/sections/Community/Handbook/repository.js
@@ -223,7 +223,7 @@ const Repository = () => {
                       const siteIconClasses = smpClass ? "site-icon inline smp-action" : "site-icon inline";
                       return (
                         <tbody key={project}>
-                          <tr>
+                          <tr className={accessRequired === "*archived" ? "archived-project" : ""}>
                             <td>
                               <img className={siteIconClasses} src={image} alt="project" />&nbsp;{project} </td>
                             <td>{language}</td>