diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index 9dff9ae7bb90..08d87a94ba81 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -5,6 +5,7 @@ import TOC from "../../../../components/SistentNavigation";
 import SistentPagination from "../../../../components/SistentNavigation/pagination";
 import SearchBox from "../../../../reusecore/Search";
 import useDataList from "../../../../utils/usedataList";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 
 const componentsData = [
   {
@@ -68,7 +69,12 @@ const SistentComponents = () => {
                     <div>
                       <div className="card_bottom">
                         <a className="learn" href={comp.url}>
-                          Learn more
+                          <div className="learn-more">
+                            <div>Learn more</div>
+                            <div className="icon">
+                              <FaArrowRight />
+                            </div>
+                          </div>
                         </a>
                       </div>
                     </div>
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
index 1abc1da40112..56010e7a3293 100644
--- a/src/sections/Projects/Sistent/sistent.style.js
+++ b/src/sections/Projects/Sistent/sistent.style.js
@@ -442,8 +442,18 @@ const SistentWrapper = styled.div`
     }
   }
 
-  .learn {
-    width: 10rem;
+  .learn-more {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .icon {
+      font-size: 0.8rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: ${(props) => props.theme.whiteToBlack};
+    }
   }
 
   .writing_program {
@@ -683,9 +693,7 @@ const SistentWrapper = styled.div`
     cursor: pointer;
     color: ${(props) => props.theme.whiteToBlack};
     &:hover {
-      text-decoration: underline;
-      text-decoration-color: ${(props) => props.theme.secondaryColor};
-      text-underline-offset: 8px;
+      border-bottom: 1px solid ${(props) => props.theme.secondaryColor};
     }
   }
   .btns Button {