diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js
index a543dd9070dc1b..15231d76fa1af3 100644
--- a/src/sections/Adventures-Callout/discuss.style.js
+++ b/src/sections/Adventures-Callout/discuss.style.js
@@ -1,167 +1,157 @@
 import styled from "styled-components";
 
 const AdventuresWrapper = styled.div`
-    background-color:none;
-    padding: 1.5rem 0.625rem 1rem;
-    overflow: hidden;
-    h2{
-        font-weight: 500;
+  background-color: none;
+  padding: 1.5rem 0.625rem 1rem;
+  overflow: hidden;
+  h2 {
+    font-weight: 500;
+  }
+  h2 span {
+    color: ${(props) => props.theme.secondaryColor};
+  }
+  .logo {
+    width: 100%;
+  }
+  .explain {
+    padding-top: 0rem;
+    text-align: center;
+    p {
+      text-align: center;
+      color: ${(props) => props.theme.white};
+      padding: 0px 3.125rem;
     }
-    h2 span{
-        color:${(props) => props.theme.secondaryColor};
+    h2 {
+      color: ${(props) => props.theme.white};
+      line-height: 1.2;
     }
-    .logo{
-        width: 100%;
+    h1 {
+      padding: 1.25rem 0px;
     }
-    .explain {
-        padding-top: 0rem;
-        text-align: center;
-        p { 
-            text-align: center;
-            color: ${(props) => props.theme.white};
-            padding: 0px 3.125rem;
+    .cards {
+      margin: 0.15rem auto 0;
+      max-width: 50rem;
+      padding: 1.5rem 2rem 0rem 2rem;
+      background-color: none;
+      border-radius: 25px;
+      .card {
+        height: 20rem;
+        max-width: 100%;
+        -webkit-transition: 450ms all;
+        transition: 450ms all;
+        margin: auto;
+        padding: 1.25rem;
+        background-color: #1e2117;
+        border-radius: 25px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        p {
+          text-align: center;
+          padding: 0px 0px 1px 0px;
+          letter-spacing: 0;
+          font-size: 16px;
         }
         h2 {
-            color: ${(props) => props.theme.white}; 
-            line-height: 1.2;
+          text-align: center;
+          font-size: 28px;
+          text-transform: uppercase;
+          clear: both;
+          margin-bottom: 0rem;
+          margin-top: 1rem;
         }
-        h1 {
-            padding: 1.25rem 0px;
+        &:hover,
+        &:focus:not(:focus-visible) {
+          outline: none;
         }
-        .cards {
-            margin: 0.15rem auto 0 ;
-            max-width: 50rem;
-            padding: 1.5rem 2rem 0rem 2rem;
-            background-color: none;
-            border-radius: 25px;
-            .card {
-                -webkit-transition: 450ms all;
-                transition: 450ms all;
-                margin: auto;
-                padding: 1.25rem;
-                background-color: #1E2117; 
-                border-radius: 25px;
-                overflow: hidden;
-                p {
-                    text-align: center;
-                    padding: 0px 0px 1px 0px;
-                    letter-spacing: 0;
-                    font-size: 16px;
-                }
-                h2 {
-                    text-align: center;
-                    font-size: 28px;
-                    text-transform:uppercase;
-                    clear: both;
-                    margin-bottom: 0rem;
-                    margin-top: 1rem;
-                }
-                &:hover,
-                &:focus:not(:focus-visible) {
-                   outline: none;
-                }
-                &:hover{
-                    transform: translateY(0.03rem);
-                    box-shadow: 0 2px 10px #00d3a9;
-                }
-                }
-            }
+        &:hover {
+          transform: translateY(0.03rem);
+          box-shadow: 0 2px 10px #00d3a9;
         }
+      }
     }
+  }
 
-    button{
-        color: #1E2117;
-        padding: 0;
-        border: 0;
-        background: none;
-        transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s;
-        cursor: pointer;
+  @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 1211px) {
+      .explain {
+        .cards {
+          padding: 0;
+          .card {
+            height: 20rem;
+            width: 23.8rem;
+          }
+        }
+      }
     }
-    @media only screen and (min-width: 768px){
-        @media only screen and (min-width: 1211px){
-            .explain {
-                .cards {
-                    padding: 0;
-                    .card {
-                        height:20rem;
-                        width: 23.8rem;
-                    }  
-                }
-            }
+    @media only screen and (max-width: 1211px) {
+      .explain {
+        .cards {
+          padding: 0;
+          h2 {
+            font-size: 25px;
+            line-height: 35px;
+          }
+          p {
+            font-size: 15px;
+          }
+          .card {
+            width: 23rem;
+            height: 20rem;
+          }
         }
-        @media only screen and (max-width: 1211px){
-            .explain {
-                .cards {
-                    padding: 0; 
-                        h2 {
-                            font-size: 25px;
-                            line-height: 35px;
-                        }
-                        p {
-                            font-size: 15px
-                        }
-                        .card{
-                            width:23rem;
-                            height:20rem;
-                        }
-                    }
-                }
+      }
+    }
+    @media only screen and (max-width: 992px) {
+      .explain {
+        .cards {
+          padding: 0;
+          .card {
+            h2 {
+              font-size: 22px;
+              line-height: 32px;
             }
-        }
-       
-        @media only screen and (max-width: 992px){
-          
-            .explain {
-                .cards {
-                    padding: 0;
-                    .card {
-                        h2 {
-                            font-size: 22px;
-                            line-height: 32px;
-                        }
-                        p {
-                            font-size: 13px;
-                            line-height: 23px;
-                        }
-                        width:18rem;
-                        height:18rem;
-                    }
-                }
-                button {
-                    padding: 0;
-                }
+            p {
+              font-size: 13px;
+              line-height: 23px;
             }
+            width: 18rem;
+            height: 18rem;
+          }
         }
+      }
     }
-    @media only screen and (max-width: 450px){
-        .explain {
-            .cards {
-                padding: 1rem 1rem 1rem 1rem;
-                .card {
-                    padding: 0.5rem;
-                    h2 {
-                        font-size: 25px;
-                    }
-                    p{
-                        font-size: 15px;  
-                    }
-                }
-            }
+  }
+  @media only screen and (max-width: 450px) {
+    .explain {
+      .cards {
+        padding: 1rem 1rem 1rem 1rem;
+        .card {
+          padding: 0.5rem;
+          h2 {
+            font-size: 25px;
+          }
+          p {
+            font-size: 15px;
+          }
         }
+      }
     }
-    @media only screen and (max-width: 375px){
-        .explain {
-            .cards {
-                padding: 1rem .5rem 1rem .5rem;
-                h2 {
-                    font-size: 22px;
-                }
-                p{
-                    font-size: 13px;  
-                }
-            }
+  }
+  @media only screen and (max-width: 375px) {
+    .explain {
+      .cards {
+        padding: 1rem 0.5rem 1rem 0.5rem;
+        h2 {
+          font-size: 22px;
         }
-    } 
+        p {
+          font-size: 13px;
+        }
+      }
+    }
+  }
 `;
 
 export default AdventuresWrapper;
diff --git a/src/sections/Adventures-Callout/index.js b/src/sections/Adventures-Callout/index.js
index df195b9779e72a..7afcbfed2a4169 100644
--- a/src/sections/Adventures-Callout/index.js
+++ b/src/sections/Adventures-Callout/index.js
@@ -11,7 +11,7 @@ const AdventuresCallout = () => {
     <AdventuresWrapper>
       <div className="explain">
         <div className="cards">
-          <Col lg={12} md={12} sm={12}>
+          <Col $lg={12} $md={12} $sm={12}>
             <a
               target="_blank"
               href="/community/adventures-of-five-and-friends"
@@ -23,13 +23,11 @@ const AdventuresCallout = () => {
                     <h2>Adventures of Five & Friends</h2>
                     {/*<p>Meet Five, our intergalatic Cloud Native Hero</p>*/}
 
-                    <button>
-                      <StaticImage
-                        className="logo"
-                        alt="Adventures of Five & Friends"
-                        src={Adventure}
-                      />
-                    </button>
+                    <StaticImage
+                      className="logo"
+                      alt="Adventures of Five & Friends"
+                      src={Adventure}
+                    />
                   </SectionTitle>
                 </div>
               </div>
diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js
index 529c100da3af81..cedf58a2f51263 100644
--- a/src/sections/Discuss-Callout/discuss.style.js
+++ b/src/sections/Discuss-Callout/discuss.style.js
@@ -1,184 +1,217 @@
 import styled from "styled-components";
 
 const DiscussWrapper = styled.div`
-    background-color:none;
-    padding: 1.5rem 0.625rem 1rem;
-    
-    overflow: hidden;
-    h2{
-        font-weight: 500;
+  background-color: none;
+  padding: 1.5rem 0.625rem 1rem;
+
+  overflow: hidden;
+  h2 {
+    font-weight: 500;
+  }
+  h2 span {
+    color: ${(props) => props.theme.secondaryColor};
+  }
+  .logo {
+    width: 200px;
+    max-width: 100%;
+    display: block;
+  }
+
+  .logo-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.35rem 1.25rem;
+    border: 2px solid ${(props) => props.theme.white};
+    border-radius: 6px;
+    background: transparent;
+    transition: all 0.25s ease;
+  }
+
+  a {
+    display: block;
+    text-decoration: none;
+    border-radius: 25px;
+
+    &:focus:not(:focus-visible) {
+      outline: none;
     }
-    h2 span{
-        color:${(props) => props.theme.secondaryColor};
+    &:focus-visible {
+      outline: 3px solid ${(props) => props.theme.secondaryColor};
+      outline-offset: 3px;
     }
-    .logo{
-        width: 200px;
+
+    &:hover,
+    &:focus-visible {
+      .logo-wrapper {
+        border-color: ${(props) => props.theme.caribbeanGreenColor || props.theme.secondaryColor};
+        box-shadow: 0 0 10px ${(props) => props.theme.secondaryColor};
+      }
     }
-    
-    .explain {
-        padding-top: 0rem;
-        text-align: center;
-        p { 
-            text-align: center;
-            color: ${(props) => props.theme.white};
-            padding: 0px 3.125rem;
+  }
+
+  .explain {
+    padding-top: 0rem;
+    text-align: center;
+    p {
+      text-align: center;
+      color: ${(props) => props.theme.white};
+      padding: 0px 3.125rem;
+    }
+    h2 {
+      color: ${(props) => props.theme.white};
+    }
+    h1 {
+      padding: 1.25rem 0px;
+    }
+    .cards {
+      margin: 0.15rem auto 0;
+      max-width: 50rem;
+      padding: 1.5rem 2rem 0rem 2rem;
+      background-color: none;
+      border-radius: 25px;
+      .card {
+        height: 20rem;
+        max-width: 100%;
+        -webkit-transition: 450ms all;
+        transition: 450ms all;
+        margin: auto;
+        padding: 1.25rem;
+        background-color: #1e2117;
+        border-radius: 25px;
+        .parentcard,
+        .section-title,
+        .card-align {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: space-around;
+        }
+        p {
+          text-align: center;
+          padding: 0px 0px 1px 0px;
+          letter-spacing: 0;
+          font-size: 16px;
+          max-width: 20rem;
+          margin: 0 auto;
         }
         h2 {
-            color: ${(props) => props.theme.white};  
+          text-align: center;
+          font-size: 28px;
+          text-transform: uppercase;
+          clear: both;
+          margin-bottom: 0rem;
+          margin-top: 1rem;
         }
-        h1 {
-            padding: 1.25rem 0px;
+        &:focus:not(:focus-visible) {
+          outline: none;
         }
-        .cards {
-            margin: 0.15rem auto 0 ;
-            max-width: 50rem;
-            padding: 1.5rem 2rem 0rem 2rem;
-            background-color: none;
-            border-radius: 25px;
-            .card {
-                height:20rem;
-                -webkit-transition: 450ms all;
-                transition: 450ms all;
-                margin: auto;
-                padding: 1.25rem;
-                background-color: #1E2117; 
-                border-radius: 25px;
-                p {
-                    text-align: center;
-                    padding: 0px 0px 1px 0px;
-                    letter-spacing: 0;
-                    font-size: 16px;
-                }
-                h2 {
-                    text-align: center;
-                    font-size: 28px;
-                    text-transform:uppercase;
-                    clear: both;
-                    margin-bottom: 0rem;
-                    margin-top: 1rem;
-                }
-                &:focus:not(:focus-visible) {
-                   outline: none;
-                }
-                &:hover{
-                    transform: translateY(0.03rem);
-                    box-shadow: 0 2px 10px #00d3a9;
-                }
-                }
-            }
+        &:hover {
+          transform: translateY(0.03rem);
+          box-shadow: 0 2px 10px #00d3a9;
         }
+      }
     }
+  }
 
-    button{
-        color: #1E2117;
-        padding: 0.2em 1em;
-        border: 2px solid;
-        background: none;
-        transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s;
-        cursor: pointer;
+  @media only screen and (min-width: 768px) {
+    @media only screen and (min-width: 1211px) {
+      .card-align {
+        padding: 2rem 0;
+      }
+      .explain {
+        .cards {
+          padding: 0;
+          h2 {
+            padding-bottom: 1rem;
+          }
+          .card {
+            height: 20rem;
+            width: 23.8rem;
+          }
+        }
+      }
     }
-    @media only screen and (min-width: 768px){
-        @media only screen and (min-width: 1211px){
-            .card-align{
-              padding:2rem 0;
-            }
-            .explain {
-                .cards {
-                    padding: 0;
-                    h2{
-                        padding-bottom:1rem;
-                    }
-                    .card {
-                        height:20rem;
-                        width: 23.8rem;
-                    }  
-                }
-            }
+    @media only screen and (max-width: 1211px) {
+      .card-align {
+        padding: 2rem 0;
+      }
+      .explain {
+        .cards {
+          padding: 0;
+          h2 {
+            padding-bottom: 1rem;
+            font-size: 25px;
+            line-height: 35px;
+          }
+          p {
+            font-size: 15px;
+          }
+          .card {
+            width: 23rem;
+            height: 20rem;
+          }
         }
-        @media only screen and (max-width: 1211px){
-            .card-align{
-              padding:2rem 0;
+      }
+    }
+    @media only screen and (max-width: 992px) {
+      .card-align {
+        padding: 1.1rem 0;
+      }
+      .explain {
+        .cards {
+          padding: 0;
+          .card {
+            h2 {
+              font-size: 22px;
+              line-height: 32px;
+              padding-bottom: 1rem;
             }
-            .explain {
-                .cards {
-                    padding: 0; 
-                        h2 {
-                            padding-bottom:1rem;
-                            font-size: 25px;
-                            line-height: 35px;
-                        }
-                        p {
-                            font-size: 15px
-                        }
-                        .card{
-                            width:23rem;
-                            height:20rem;
-                        }
-                    }
-                }
+            p {
+              font-size: 13px;
+              line-height: 23px;
             }
+            width: 18rem;
+            height: 18rem;
+          }
         }
-     
-        @media only screen and (max-width: 992px){
-            .card-align{
-              padding:1.1rem 0;
-            }
-            .explain {
-                .cards {
-                    padding: 0;
-                    .card {
-                        h2 {
-                            font-size: 22px;
-                            line-height: 32px;
-                            padding-bottom:1rem;
-                        }
-                        p {
-                            font-size: 13px;
-                            line-height: 23px;
-                        }
-                        width:18rem;
-                        height:18rem;
-                    }
-                }
-                button {
-                    padding: 0;
-                }
-            }
+      }
+    }
+  }
+
+  @media only screen and (max-width: 450px) {
+    .card-align {
+      padding: 2rem 0;
+    }
+    .explain {
+      .cards {
+        padding: 1rem 1rem 1rem 1rem;
+        .card {
+          padding: 0.5rem;
+          h2 {
+            font-size: 25px;
+          }
+          p {
+            font-size: 15px;
+          }
         }
+      }
     }
-  
-    @media only screen and (max-width: 450px){
-        .card-align{
-              padding:2rem 0;
+  }
+  @media only screen and (max-width: 375px) {
+    .explain {
+      .cards {
+        padding: 1rem 0.5rem 1rem 0.5rem;
+        h2 {
+          font-size: 22px;
         }
-        .explain {
-            .cards {
-                padding: 1rem 1rem 1rem 1rem;
-                .card {
-                    padding: 0.5rem;
-                    h2 {
-                        font-size: 25px;
-                    }
-                    p{
-                        font-size: 15px;  
-                    }
-                }
-            }
+        p {
+          font-size: 13px;
         }
+      }
     }
-    @media only screen and (max-width: 375px){
-        .explain {
-            .cards {
-                padding: 1rem .5rem 1rem .5rem;
-                h2 {
-                    font-size: 22px;
-                }
-                p{
-                    font-size: 13px;  
-                }
-            }
-        }
-    } 
+  }
 `;
 
 export default DiscussWrapper;
diff --git a/src/sections/Discuss-Callout/index.js b/src/sections/Discuss-Callout/index.js
index 1f34ddd27301ea..ab9f0823143d83 100644
--- a/src/sections/Discuss-Callout/index.js
+++ b/src/sections/Discuss-Callout/index.js
@@ -27,14 +27,14 @@ const DiscussCallout = () => {
                         Discussion Forum
                       </p>
 
-                      <button>
+                      <div className="logo-wrapper">
                         <img
                           className="logo"
                           alt="Discuss"
                           src={Discuss}
                           loading="lazy"
                         />
-                      </button>
+                      </div>
                     </div>
                   </SectionTitle>
                 </div>