diff --git a/app/components/ui/Cards/OppEventCard.module.scss b/app/components/ui/Cards/OppEventCard.module.scss
index 6383d849f..3c135af66 100644
--- a/app/components/ui/Cards/OppEventCard.module.scss
+++ b/app/components/ui/Cards/OppEventCard.module.scss
@@ -8,7 +8,6 @@
   width: 100%;
   overflow: hidden;
   position: relative;
-  cursor: pointer;
 
   &:focus-within {
     outline: 3px solid $black;
@@ -18,6 +17,10 @@
     flex-direction: column;
   }
 
+  &:hover {
+    background: $surface-secondary;
+  }
+
   @media screen and (max-width: $break-tablet-l) {
     flex-direction: column;
   }
diff --git a/app/components/ui/Cards/OppEventCard.tsx b/app/components/ui/Cards/OppEventCard.tsx
index d05cfaabb..e9c26c2c3 100644
--- a/app/components/ui/Cards/OppEventCard.tsx
+++ b/app/components/ui/Cards/OppEventCard.tsx
@@ -19,6 +19,10 @@ export const OppEventCard = (props: OppEventCardProps) => {
     details: { title, id, calendarEvent, imageUrl },
     sectionType,
   } = props;
+
+  const topLevelSlug = sectionType === "event" ? "events" : "opportunities";
+  const fullSlug = `/${topLevelSlug}/${id}`;
+
   return (
     <div className={`${styles.oppEventCard} ${styles[sectionType]}`}>
       {imageUrl ? (
@@ -36,7 +40,7 @@ export const OppEventCard = (props: OppEventCardProps) => {
       <div className={styles.content}>
         <div>
           <h4 className={styles.contentTitle}>
-            <a href={id}>{title}</a>
+            <a href={fullSlug}>{title}</a>
           </h4>
           {calendarEvent && (
             <div className={styles.contentTime}>
@@ -45,7 +49,7 @@ export const OppEventCard = (props: OppEventCardProps) => {
           )}
         </div>
 
-        <Button arrowVariant="after" variant="linkBlue" size="lg">
+        <Button arrowVariant="after" variant="linkBlue" size="lg" isVisualOnly>
           View more
         </Button>
       </div>
diff --git a/app/components/ui/inline/Button/Button.tsx b/app/components/ui/inline/Button/Button.tsx
index 855c993e4..6ee86720d 100644
--- a/app/components/ui/inline/Button/Button.tsx
+++ b/app/components/ui/inline/Button/Button.tsx
@@ -22,6 +22,7 @@ export const Button = ({
   disabled,
   href,
   mobileFullWidth = true,
+  isVisualOnly = false,
 }: {
   children: string | JSX.Element;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -37,6 +38,7 @@ export const Button = ({
   iconName?: string; // use font awesome icon name without 'fa-'
   href?: string;
   mobileFullWidth?: boolean;
+  isVisualOnly?: boolean; // Maintains button styling as visual cue clickable cards but hidden to screen readers
 }) => {
   const buttonClass = classNames(
     styles.button,
@@ -63,6 +65,14 @@ export const Button = ({
     </>
   );
 
+  if (isVisualOnly) {
+    return (
+      <p className={buttonClass} aria-hidden>
+        {content}
+      </p>
+    );
+  }
+
   // Links that follow same visual guidelines as buttons
   if (href) {
     const isExternalLink = !href.startsWith("/");