diff --git a/package-lock.json b/package-lock.json
index adf45b8ea..2d194f7ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.1.3",
+            "version": "1.1.4",
             "license": "ISC",
             "dependencies": {
                 "@types/react-dates": "^21.8.6",
@@ -66,7 +66,7 @@
                 "@rjsf/validator-ajv8": "^5.13.3",
                 "@typeform/embed-react": "2.20.0",
                 "dompurify": "^3.0.2",
-                "marked": "4.3.0",
+                "marked": "^13.0.3",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
                 "react-draggable": "^4.4.5",
@@ -7309,15 +7309,16 @@
             }
         },
         "node_modules/marked": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
-            "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+            "version": "13.0.3",
+            "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.3.tgz",
+            "integrity": "sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==",
+            "license": "MIT",
             "peer": true,
             "bin": {
                 "marked": "bin/marked.js"
             },
             "engines": {
-                "node": ">= 12"
+                "node": ">= 18"
             }
         },
         "node_modules/memoize-one": {
diff --git a/package.json b/package.json
index 9704480bd..ab1cbfc70 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -79,7 +79,7 @@
         "@rjsf/validator-ajv8": "^5.13.3",
         "@typeform/embed-react": "2.20.0",
         "dompurify": "^3.0.2",
-        "marked": "4.3.0",
+        "marked": "^13.0.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.5",
diff --git a/src/Common/Markdown/MarkDown.tsx b/src/Common/Markdown/MarkDown.tsx
index 624b797f4..251d8b9b8 100644
--- a/src/Common/Markdown/MarkDown.tsx
+++ b/src/Common/Markdown/MarkDown.tsx
@@ -14,14 +14,12 @@
  * limitations under the License.
  */
 
-import { marked } from 'marked'
+import { marked, Tokens } from 'marked'
 import DOMPurify from 'dompurify'
 import { useEffect, useRef } from 'react'
 import { MarkDownProps } from './Types'
 import './markdown.scss'
 
-const uncheckedCheckboxInputElement = `<input checked="" disabled="" type="checkbox">`
-const checkedCheckboxInputElement = `<input disabled="" type="checkbox">`
 const renderer = new marked.Renderer()
 
 const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscapedText, ...props }: MarkDownProps) => {
@@ -39,62 +37,59 @@ const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscap
         getHeight()
     }, [markdown])
 
-    const isReadmeInputCheckbox = (text: string) => {
-        if (text.includes(uncheckedCheckboxInputElement) || text.includes(checkedCheckboxInputElement)) {
-            return true
-        }
-        return false
-    }
+    const renderTableRow = (row: Tokens.TableCell[]) => `
+            <tr>
+                ${row.map((rowCell) => `<td align="${rowCell.align}">${marked(rowCell.text)}</td>`).join('')}
+            </tr>
+        `
 
-    renderer.listitem = (text: string) => {
-        if (isReadmeInputCheckbox(text)) {
-            // eslint-disable-next-line no-param-reassign
-            text = text
-                .replace(
-                    uncheckedCheckboxInputElement,
-                    '<input type="checkbox" style="margin: 0 0.2em 0.25em -1.4em;" class="dc__vertical-align-middle" checked disabled>',
-                )
-                .replace(
-                    checkedCheckboxInputElement,
-                    '<input type="checkbox" style="margin: 0 0.2em 0.25em -1.4em;" class="dc__vertical-align-middle" disabled>',
-                )
-            return `<li style="list-style: none">${text}</li>`
+    renderer.listitem = ({ text, task, checked }: Tokens.ListItem) => {
+        if (task) {
+            return `<li style="list-style: none">
+                        <input disabled type="checkbox" ${checked ? 'checked' : ''} class="dc__vertical-align-middle" style="margin: 0 0.2em 0.25em -1.4em">
+                        ${text}
+                    </li>`
         }
         return `<li>${text}</li>`
     }
 
-    renderer.image = (href: string, title: string, text: string) =>
+    renderer.image = ({ href, title, text }: Tokens.Image) =>
         `<img src="${href}" alt="${text}" title="${title}" class="max-w-100">`
 
-    renderer.table = (header, body) => `
+    renderer.table = ({ header, rows }: Tokens.Table) => `
         <div class="table-container">
             <table>
-                ${header}
-                ${body}
+                <thead>
+                    <tr>${header.map((headerCell) => `<th align="${headerCell.align}">${headerCell.text}</th>`).join('')}</tr>
+                </thead>
+                <tbody>
+                    ${rows.map((row) => renderTableRow(row)).join('')}
+                </tbody>
             </table>
         </div>
         `
 
-    renderer.heading = (text, level) => {
+    renderer.heading = ({ text, depth }: Tokens.Heading) => {
         const escapedText = disableEscapedText ? '' : text.toLowerCase().replace(/[^\w]+/g, '-')
 
         return `
           <a name="${escapedText}" rel="noreferrer noopener" class="anchor" href="#${escapedText}">
-                <h${level} data-testid="deployment-template-readme-version">
+                <h${depth} data-testid="deployment-template-readme-version">
               <span class="header-link"></span>
               ${text}
-              </h${level}>
+              </h${depth}>
             </a>`
     }
 
     marked.setOptions({
         renderer,
         gfm: true,
-        smartLists: true,
         ...(breaks && { breaks: true }),
     })
 
-    const createMarkup = () => ({ __html: DOMPurify.sanitize(marked(markdown), { USE_PROFILES: { html: true } }) })
+    const createMarkup = () => ({
+        __html: DOMPurify.sanitize(marked(markdown) as string, { USE_PROFILES: { html: true } }),
+    })
 
     return (
         <article
diff --git a/src/Common/Markdown/markdown.scss b/src/Common/Markdown/markdown.scss
index 3a9bea51b..c67efb495 100644
--- a/src/Common/Markdown/markdown.scss
+++ b/src/Common/Markdown/markdown.scss
@@ -26,7 +26,7 @@
         border-spacing: 0;
         border-collapse: collapse;
 
-        tbody {
+        tbody, thead {
             td,
             th {
                 padding: 6px 13px;
diff --git a/src/Shared/Components/CICDHistory/Sidebar.tsx b/src/Shared/Components/CICDHistory/Sidebar.tsx
index 323fa33c9..491f78b14 100644
--- a/src/Shared/Components/CICDHistory/Sidebar.tsx
+++ b/src/Shared/Components/CICDHistory/Sidebar.tsx
@@ -210,7 +210,7 @@ const HistorySummaryCard = React.memo(
             >
                 <NavLink
                     to={getPath}
-                    className="w-100 deployment-history-card-container"
+                    className="w-100 deployment-history-card-container p-8 br-4"
                     data-testid={dataTestId}
                     activeClassName="active"
                     ref={assignTargetCardRef}
@@ -218,22 +218,21 @@ const HistorySummaryCard = React.memo(
                     <div className="w-100 deployment-history-card">
                         {getTriggerStatusIcon(status)}
                         <div className="flexbox-col dc__gap-8">
-                            <div className="flex column left dc__ellipsis-right">
-                                <div className="cn-9 fs-14">
+                            <div className="flex column left">
+                                <div className="cn-9 fs-13 lh-20">
                                     {moment(startedOn).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
                                 </div>
                                 <div className="flex left cn-7 fs-12">
                                     {isCDType && (
                                         <>
-                                            <div className="dc__capitalize">
+                                            <div className="dc__first-letter-capitalize dc__no-shrink">
                                                 {['pre', 'post'].includes(stage?.toLowerCase())
                                                     ? `${stage}-deploy`
                                                     : stage}
                                             </div>
                                             <span className="dc__bullet dc__bullet--d2 ml-4 mr-4" />
-
                                             {artifact && (
-                                                <div className="dc__app-commit__hash dc__app-commit__hash--no-bg">
+                                                <div className="dc__app-commit__hash dc__app-commit__hash--no-bg dc__no-shrink">
                                                     <ICDocker className="commit-hash__icon grayscale" />
                                                     {artifact.split(':')[1].slice(-12)}
                                                 </div>
@@ -241,7 +240,7 @@ const HistorySummaryCard = React.memo(
                                             <span className="dc__bullet dc__bullet--d2 ml-4 mr-4" />
                                         </>
                                     )}
-                                    <div className="cn-7 fs-12">
+                                    <div className="cn-7 fs-12 dc__ellipsis-right">
                                         {triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}
                                     </div>
                                 </div>
@@ -377,11 +376,10 @@ const Sidebar = React.memo(
                     </div>
                 )}
 
-                <div className="flex column top left flex-grow-1 dc__hide-hscroll" style={{ overflowY: 'auto' }}>
+                <div className="flex column top left flex-grow-1 dc__hide-hscroll p-8" style={{ overflowY: 'auto' }}>
                     {fetchIdData === FetchIdDataStatus.SUCCESS && (
                         <ViewAllCardsTile handleViewAllHistory={handleViewAllHistory} />
                     )}
-
                     {Array.from(triggerHistory)
                         .sort(([a], [b]) => b - a)
                         .map(([triggerId, triggerDetails], index) => (
diff --git a/src/Shared/Components/CICDHistory/cicdHistory.scss b/src/Shared/Components/CICDHistory/cicdHistory.scss
index ce1bcea7b..f0481bed8 100644
--- a/src/Shared/Components/CICDHistory/cicdHistory.scss
+++ b/src/Shared/Components/CICDHistory/cicdHistory.scss
@@ -190,7 +190,6 @@
 
 .deployment-history-card-container {
     text-decoration: unset;
-    padding: 0 16px;
 
     &:hover {
         text-decoration: unset;
@@ -204,8 +203,7 @@
     .deployment-history-card {
         display: grid;
         grid-template-columns: 20px 1fr;
-        padding: 12px 0;
-        column-gap: 12px;
+        column-gap: 8px;
     }
 
     .app-status__icon {