diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js
index a7d2b1f2e733..89363d64a8c9 100644
--- a/src/sections/Projects/Sistent/components/button/code.js
+++ b/src/sections/Projects/Sistent/components/button/code.js
@@ -40,7 +40,7 @@ export const ButtonCode = () => {
   const { isDark } = useStyledDarkMode();
 
   return (
-    <SistentLayout title="Button">
+    <SistentLayout title="Button" >
       <div className="content">
         <a id="Identity">
           <h2>Button</h2>
diff --git a/src/sections/Projects/Sistent/components/button/index.js b/src/sections/Projects/Sistent/components/button/index.js
index e93b0bda000d..525ea276897d 100644
--- a/src/sections/Projects/Sistent/components/button/index.js
+++ b/src/sections/Projects/Sistent/components/button/index.js
@@ -13,7 +13,7 @@ const SistentButton = () => {
   const { isDark } = useStyledDarkMode();
 
   return (
-    <SistentLayout title="Button">
+    <SistentLayout title="Button" >
       <div className="content">
         <a id="Identity">
           <h2>Button</h2>
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index ce9cb2768f06..8bb294655b0f 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -6,6 +6,7 @@ import TOC from "../../../../components/SistentNavigation";
 import SearchBox from "../../../../reusecore/Search";
 import useDataList from "../../../../utils/usedataList";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+import { Link } from "gatsby";
 
 const componentsData = [
   {
@@ -41,6 +42,8 @@ const SistentComponents = () => {
     "id"
   );
 
+  const compArray = queryResults;
+
   return (
     <SistentWrapper>
       <div className="page-header-section">
@@ -67,26 +70,29 @@ const SistentComponents = () => {
             </div>
             <div className="product_cards">
               <div className="cards">
-                {queryResults.map((comp) => (
-                  <div className="card" key={comp.id}>
-                    <div className="card_head">
-                      <div className="title">{comp.name}</div>
-                      <div className="text">{comp.description}</div>
-                    </div>
-                    <div>
-                      <div className="card_bottom">
-                        <a className="learn" href={comp.url}>
-                          <div className="learn-more">
-                            <div>Learn more</div>
-                            <div className="icon">
-                              <FaArrowRight />
+                {compArray.map((comp) => (
+                  <Link key={comp.id} to={comp.url}>
+                    <div className="card">
+                      <div className="card_head">
+                        <div className="title">{comp.name}</div>
+                        <div className="text">{comp.description}</div>
+                      </div>
+                      <div>
+                        <div className="card_bottom">
+                          <a className="learn" href={comp.url}>
+                            <div className="learn-more">
+                              <div>Learn more</div>
+                              <div className="icon">
+                                <FaArrowRight />
+                              </div>
                             </div>
-                          </div>
-                        </a>
+                          </a>
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  </Link>
                 ))}
+
               </div>
             </div>
           </div>
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
index 15606def6b34..b32bb2e26262 100644
--- a/src/sections/Projects/Sistent/sistent.style.js
+++ b/src/sections/Projects/Sistent/sistent.style.js
@@ -676,6 +676,7 @@ const SistentWrapper = styled.div`
   .card_head .title {
     font-size: 32px;
     font-weight: 700;
+    color: ${props => props.theme.text};
   }
 
   .card .text {
@@ -687,6 +688,17 @@ const SistentWrapper = styled.div`
     color: ${(props) => props.theme.whiteToBlack};
   }
 
+  .card {
+    box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo};
+    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
+
+      &:hover {
+        box-shadow: 0px 2px 15px 4px ${props => props.theme.whiteNineToBlackOne};
+        transform: scale(1.045);
+      }
+  }
+
+  
   .card_bottom {
     border-top: 2px solid #2c2c2c;
     display: flex;