diff --git a/frontend/__tests__/unit/components/MarkdownWrapper.test.tsx b/frontend/__tests__/unit/components/MarkdownWrapper.test.tsx
index 83d3579c7e..d55a46d9f2 100644
--- a/frontend/__tests__/unit/components/MarkdownWrapper.test.tsx
+++ b/frontend/__tests__/unit/components/MarkdownWrapper.test.tsx
@@ -6,7 +6,7 @@ jest.mock('dompurify', () => ({
   sanitize: (html: string) => html,
 }))
 
-jest.mock('markdown-it/index.mjs', () => {
+jest.mock('markdown-it', () => {
   return jest.fn().mockImplementation(() => ({
     render: (content: string) => {
       // Very simple mock: replace **bold** and [link](url)
diff --git a/frontend/__tests__/unit/components/ProgramCard.test.tsx b/frontend/__tests__/unit/components/ProgramCard.test.tsx
index 77f8ae0707..2218f4543f 100644
--- a/frontend/__tests__/unit/components/ProgramCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramCard.test.tsx
@@ -278,8 +278,7 @@ describe('ProgramCard', () => {
       )
 
       expect(screen.getByText(longDescription)).toBeInTheDocument()
-      expect(screen.getByText(longDescription)).toBeInTheDocument()
-      const descriptionElement = screen.getByText(longDescription)
+      const descriptionElement = screen.getByText(longDescription).closest('.md-wrapper')
       expect(descriptionElement).toHaveClass('line-clamp-8')
     })
 
@@ -298,7 +297,7 @@ describe('ProgramCard', () => {
 
       expect(screen.getByText('Short description')).toBeInTheDocument()
 
-      const descriptionElement = screen.getByText('Short description')
+      const descriptionElement = screen.getByText('Short description').closest('.md-wrapper')
       expect(descriptionElement).toHaveClass('line-clamp-8')
     })
 
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 844eb03bc8..1b52723eda 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -131,6 +131,28 @@
     color: #1d7bd7;
   }
 
+  a .md-wrapper {
+    color: rgb(75 85 99); /* gray-600 */
+  }
+
+  .dark a .md-wrapper {
+    color: rgb(156 163 175); /* gray-400 */
+  }
+
+  a .md-wrapper a {
+    color: #1d7bd7;
+  }
+
+  .dark a .md-wrapper a {
+    color: #1d7bd7;
+  }
+
+  a .md-wrapper ul,
+  a .md-wrapper ol,
+  a .md-wrapper li {
+    color: inherit;
+  }
+
   .navlink {
     color: inherit;
   }
@@ -253,6 +275,24 @@
     transition: transform 1s ease;
   }
 
+  .md-wrapper ul,
+  .md-wrapper ol {
+    margin: 0 0 1em 1.5em;
+    padding-left: 1.5em;
+  }
+
+  .md-wrapper ul {
+    list-style-type: disc;
+  }
+
+  .md-wrapper ol {
+    list-style-type: decimal;
+  }
+
+  .md-wrapper li {
+    margin: 0.25em 0;
+  }
+
   .flip-container:hover .icon-flip {
     transform: rotateY(180deg);
   }
diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx
index f392fac470..fae64ca9ac 100644
--- a/frontend/src/components/CardDetailsPage.tsx
+++ b/frontend/src/components/CardDetailsPage.tsx
@@ -21,6 +21,7 @@ import HealthMetrics from 'components/HealthMetrics'
 import InfoBlock from 'components/InfoBlock'
 import Leaders from 'components/Leaders'
 import LeadersList from 'components/LeadersList'
+import Markdown from 'components/MarkdownWrapper'
 import MenteeContributorsList from 'components/MenteeContributorsList'
 import MetricsScoreCircle from 'components/MetricsScoreCircle'
 import Milestones from 'components/Milestones'
@@ -76,14 +77,12 @@ const DetailsCard = ({
   const { data } = useSession()
 
   // compute styles based on type prop
-  const secondaryCardStyles = (() => {
-    if (type === 'program' || type === 'module') {
-      return 'gap-2 md:col-span-7'
-    } else if (type === 'chapter') {
-      return 'gap-2 md:col-span-3'
-    }
-    return 'gap-2 md:col-span-5'
-  })()
+  const typeStylesMap = {
+    chapter: 'gap-2 md:col-span-3',
+    module: 'gap-2 md:col-span-7',
+    program: 'gap-2 md:col-span-7',
+  }
+  const secondaryCardStyles = typeStylesMap[type] ?? 'gap-2 md:col-span-5'
 
   return (
     <div className="min-h-screen bg-white p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
@@ -120,7 +119,7 @@ const DetailsCard = ({
         <p className="mb-6 text-xl">{description}</p>
         {summary && (
           <SecondaryCard icon={FaCircleInfo} title={<AnchorTitle title="Summary" />}>
-            <p>{summary}</p>
+            <Markdown content={summary} />
           </SecondaryCard>
         )}
 
diff --git a/frontend/src/components/MarkdownWrapper.tsx b/frontend/src/components/MarkdownWrapper.tsx
index 56f8be5834..2eb8dbfee4 100644
--- a/frontend/src/components/MarkdownWrapper.tsx
+++ b/frontend/src/components/MarkdownWrapper.tsx
@@ -1,13 +1,14 @@
 import DOMPurify from 'dompurify'
-import markdownit from 'markdown-it/index.mjs'
+import markdownit from 'markdown-it'
 import taskLists from 'markdown-it-task-lists'
 
 export default function Markdown({ content, className }: { content: string; className?: string }) {
-  const md = markdownit({
+  // prettier-ignore
+  const md = markdownit({  // NOSONAR - Safe to use markdown-it as we use DOMPurify to sanitize the content.
+    breaks: true,
     html: true,
     linkify: true,
     typographer: true,
-    breaks: true,
   }).use(taskLists)
 
   return (
diff --git a/frontend/src/components/ProgramCard.tsx b/frontend/src/components/ProgramCard.tsx
index d4e11ab50c..7413097a32 100644
--- a/frontend/src/components/ProgramCard.tsx
+++ b/frontend/src/components/ProgramCard.tsx
@@ -5,6 +5,7 @@ import type React from 'react'
 import { GetProgramAndModulesDocument } from 'types/__generated__/programsQueries.generated'
 import { Program } from 'types/mentorship'
 import EntityActions from 'components/EntityActions'
+import Markdown from 'components/MarkdownWrapper'
 
 interface ProgramCardProps {
   program: Program
@@ -56,7 +57,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, href, accessLevel, i
   return (
     <Link
       href={href}
-      className="group block h-72 w-72 rounded-lg border border-gray-400 bg-white p-6 text-left transition-transform duration-300 hover:scale-[1.02] hover:brightness-105 md:h-80 md:w-80 lg:h-80 lg:w-96 dark:border-gray-600 dark:bg-gray-800"
+      className="group block h-72 w-72 rounded-lg border border-gray-400 bg-white p-6 text-left text-inherit transition-transform duration-300 hover:scale-[1.02] hover:brightness-105 md:h-80 md:w-80 lg:h-80 lg:w-96 dark:border-gray-600 dark:bg-gray-800"
     >
       <div className="flex h-full flex-col">
         <div className="flex flex-1 flex-col">
@@ -67,7 +68,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, href, accessLevel, i
               showArrow
               content={program.name}
               placement="bottom"
-              isDisabled={program.name.length > 50 ? false : true}
+              isDisabled={program.name.length <= 50}
             >
               <h3 className="mr-1 line-clamp-2 h-12 overflow-hidden text-base font-semibold text-gray-600 dark:text-white">
                 {program.name}
@@ -96,7 +97,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, href, accessLevel, i
               </span>
             )}
           </div>
-          <p className="line-clamp-8 text-sm text-gray-700 dark:text-gray-300">{description}</p>
+          <Markdown content={description} className="line-clamp-8" />
         </div>
       </div>
     </Link>
diff --git a/frontend/src/components/SingleModuleCard.tsx b/frontend/src/components/SingleModuleCard.tsx
index 729b38b878..1de2743282 100644
--- a/frontend/src/components/SingleModuleCard.tsx
+++ b/frontend/src/components/SingleModuleCard.tsx
@@ -10,6 +10,7 @@ import { ExtendedSession } from 'types/auth'
 import type { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
 import EntityActions from 'components/EntityActions'
+import Markdown from 'components/MarkdownWrapper'
 import { getSimpleDuration } from 'components/ModuleCard'
 import TopContributorsList from 'components/TopContributorsList'
 
@@ -66,7 +67,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({ module, accessLevel
 
       {/* Description */}
       <div>
-        <p>{module.description}</p>
+        <Markdown content={module.description || 'No description available.'} />
       </div>
 
       {/* Details */}