diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
index 2e382a2fbb..f3e3295849 100644
--- a/react/css/CHANGELOG.md
+++ b/react/css/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Changelog
 
-## [0.0.2-beta.2] - 2024-06-13
+## [0.0.2-beta.4] - 2024-06-17
+### Added
+- Added Timeline Molecule related css
+
+## [0.0.2-beta.3] - 2024-06-13
 ### Changed
 - Deleted Unused CSS 
 - Added preview overlay styles for uploadedfile and backLink styles
diff --git a/react/css/package.json b/react/css/package.json
index 8b35e49e9b..1e3e66c751 100644
--- a/react/css/package.json
+++ b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.3",
+  "version": "0.0.2-beta.4",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",
diff --git a/react/css/src/digitv2/components/backLinkV2.scss b/react/css/src/digitv2/components/backLinkV2.scss
index 4b54669275..5dd9da6163 100644
--- a/react/css/src/digitv2/components/backLinkV2.scss
+++ b/react/css/src/digitv2/components/backLinkV2.scss
@@ -7,7 +7,7 @@
         flex-shrink: 0;
         width: theme(digitv2.spacers.spacer6);
         height: theme(digitv2.spacers.spacer6);
-
+        cursor: pointer;
 
         @media (max-width: 30rem) {
             width: theme(digitv2.spacers.spacer5);
@@ -20,12 +20,18 @@
         @extend .typography.body-l;
         color: theme(digitv2.lightTheme.primary-1);
         margin-top:0.063rem;
+        cursor: pointer;
     }
 
     &.disabled{
         pointer-events: none;
         .digit-back-link-label{
             color: theme(digitv2.lightTheme.text-disabled);
+            cursor: default;
+        }
+
+        .digit-back-link-icon{
+            cursor: default;
         }
     }
 }
\ No newline at end of file
diff --git a/react/css/src/digitv2/components/timelineV2.scss b/react/css/src/digitv2/components/timelineV2.scss
index 1bccefd681..7e6771eb8a 100644
--- a/react/css/src/digitv2/components/timelineV2.scss
+++ b/react/css/src/digitv2/components/timelineV2.scss
@@ -1,5 +1,5 @@
 .digit-timeline-item {
-  @apply flex items-start;
+  @apply flex items-start relative ;
   gap: theme(digitv2.spacers.spacer4);
 }
 
@@ -13,6 +13,29 @@
   }
 }
 
+.connector-line {
+  @apply absolute bottom-0 border-solid border-border;
+  border-left-width: 0.125rem;
+  margin-left: 0.938rem;
+  top: theme(digitv2.spacers.spacer8);
+
+  &.completed,
+  &.inprogress{
+    border-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.inprogress{
+    border-style: dashed;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    margin-left: 0.688rem;
+    top: theme(digitv2.spacers.spacer6);
+    border-left-width: 0.063rem;
+  }
+}
+
 .timeline-content,
 .timeline-info {
   @apply flex flex-col w-full;
@@ -86,7 +109,7 @@ img {
 /* Circle Variants */
 .timeline-circle,
 .timeline-circle.upcoming {
-    background-color: theme(digitv2.lightTheme.text-disabled);
+  background-color: theme(digitv2.lightTheme.text-disabled);
 }
 
 .timeline-circle.inprogress {
diff --git a/react/example/package.json b/react/example/package.json
index 4253be7d43..43983f6d73 100644
--- a/react/example/package.json
+++ b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.4",
+    "@egovernments/digit-ui-components": "0.0.2-beta.5",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
diff --git a/react/example/public/index.html b/react/example/public/index.html
index b3ac52d720..85e0176bcc 100644
--- a/react/example/public/index.html
+++ b/react/example/public/index.html
@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.3/dist/index.css"
+    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.4/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json
index 675bd7bc00..b979a70e03 100644
--- a/react/modules/Project/package.json
+++ b/react/modules/Project/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-        "@egovernments/digit-ui-components": "0.0.2-beta.4",
+        "@egovernments/digit-ui-components": "0.0.2-beta.5",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",
diff --git a/react/modules/core/package.json b/react/modules/core/package.json
index fb9fdd9925..113d4ec0b9 100644
--- a/react/modules/core/package.json
+++ b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.4",
+    "@egovernments/digit-ui-components": "0.0.2-beta.5",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
index 76b5cda86e..9ccfa1981e 100644
--- a/react/modules/sample/package.json
+++ b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.4",
+    "@egovernments/digit-ui-components": "0.0.2-beta.5",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",
diff --git a/react/package.json b/react/package.json
index e84fdfe68e..d0fdd0b983 100644
--- a/react/package.json
+++ b/react/package.json
@@ -77,7 +77,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.4",
+    "@egovernments/digit-ui-components": "0.0.2-beta.5",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",
diff --git a/react/ui-components/CHANGELOG.md b/react/ui-components/CHANGELOG.md
index a1f15cd92d..67b9dcdf3c 100644
--- a/react/ui-components/CHANGELOG.md
+++ b/react/ui-components/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.2-beta.5] - 2024-06-17
+### New Changes
+- Added Timeline Molecule. 
+
 ## [0.0.2-beta.4] - 2024-06-15
 ### Changed
 - fix: Fixed prop for the document upload.
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index 300f4e023a..81579f9df3 100644
--- a/react/ui-components/package.json
+++ b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.4",
+  "version": "0.0.2-beta.5",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-components-css": "0.0.2-beta.3",
+    "@egovernments/digit-ui-components-css": "0.0.2-beta.4",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "@googlemaps/js-api-loader": "1.13.10",
diff --git a/react/ui-components/src/atoms/Timeline.js b/react/ui-components/src/atoms/Timeline.js
index 2525f67c26..a3c7f0e564 100644
--- a/react/ui-components/src/atoms/Timeline.js
+++ b/react/ui-components/src/atoms/Timeline.js
@@ -11,14 +11,17 @@ const Timeline = ({
   additionalElements,
   inline,
   individualElementStyles,
+  showConnector,
+  className,
+  isLastStep
 }) => {
   const [showDetails, setShowDetails] = useState(false);
 
   const [isMobileView, setIsMobileView] = React.useState(
-    window.innerWidth <= 480
+    (window.innerWidth / window.innerHeight <= 9/16)
   );
   const onResize = () => {
-    if (window.innerWidth <= 480) {
+    if (window.innerWidth / window.innerHeight <= 9/16) {
       if (!isMobileView) {
         setIsMobileView(true);
       }
@@ -61,7 +64,7 @@ const Timeline = ({
       : "";
 
   return (
-    <div className="digit-timeline-item">
+    <div className={`digit-timeline-item ${className || ""}`}>
       <div className={`timeline-circle ${variant}`}>
         {variant === "completed" && (
           <div className="check-icon">
@@ -73,6 +76,7 @@ const Timeline = ({
           </div>
         )}
       </div>
+      {showConnector && !isLastStep && <div className={`connector-line ${variant || ""}`} />}
       <div className="timeline-content">
         <div className="timeline-info">
           <div className="timeline-label">
diff --git a/react/ui-components/src/atoms/stories/InfoButton.stories.js b/react/ui-components/src/atoms/stories/InfoButton.stories.js
index ffb75428e6..acf243e3c2 100644
--- a/react/ui-components/src/atoms/stories/InfoButton.stories.js
+++ b/react/ui-components/src/atoms/stories/InfoButton.stories.js
@@ -28,7 +28,22 @@ export default {
   },
 };
 
-const Template = (args) => <InfoButton {...args} />;
+const commonStyles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  color: "#363636",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => (
+  <div style={commonStyles}>
+    <InfoButton {...args} />
+  </div>
+);
 
 const commonArgs = {
   label: "Button",
diff --git a/react/ui-components/src/atoms/stories/Timeline.stories.js b/react/ui-components/src/atoms/stories/Timeline.stories.js
index 9356117d4b..dd96f87b41 100644
--- a/react/ui-components/src/atoms/stories/Timeline.stories.js
+++ b/react/ui-components/src/atoms/stories/Timeline.stories.js
@@ -7,6 +7,7 @@ export default {
   component: Timeline,
   argTypes: {
     label: { control: "text" },
+    className: { control: "text" },
     viewDetailsLabel: { control: "text" },
     hideDetailsLabel: { control: "text" },
     subElements: {
@@ -31,6 +32,9 @@ export default {
     individualElementStyles: {
       control: { type: "object" },
     },
+    showConnector:{
+      control:{type:"boolean"}
+    }
   },
 };
 
@@ -112,14 +116,24 @@ UpcomingDefault.args = {
 };
 
 // Upcoming Timeline
-export const Upcoming = Template.bind({});
-Upcoming.args = {
+export const UpcomingWithAdditionalElements = Template.bind({});
+UpcomingWithAdditionalElements.args = {
   label: "Upcoming",
   variant: "upcoming",
   subElements: subElements,
   additionalElements: additionalElements,
 };
 
+// Upcoming Timeline
+export const UpcomingWithConnector = Template.bind({});
+UpcomingWithConnector.args = {
+  label: "Upcoming",
+  variant: "upcoming",
+  subElements: subElements,
+  additionalElements: additionalElements,
+  showConnector:true
+};
+
 // InProgress Timeline Without AdditionalElements
 export const InProgressDefault = Template.bind({});
 InProgressDefault.args = {
@@ -129,14 +143,25 @@ InProgressDefault.args = {
 };
 
 // InProgress Timeline
-export const InProgress = Template.bind({});
-InProgress.args = {
+export const InProgressWithAdditionalElements = Template.bind({});
+InProgressWithAdditionalElements.args = {
   label: "Inprogress",
   subElements: subElements,
   variant: "inprogress",
   additionalElements: additionalElements,
 };
 
+// InProgress Timeline
+export const InProgressWithConnector = Template.bind({});
+InProgressWithConnector.args = {
+  label: "Inprogress",
+  subElements: subElements,
+  variant: "inprogress",
+  additionalElements: additionalElements,
+  showConnector:true
+};
+
+
 // Completed Timeline Without AdditionalElements
 export const CompletedDefault = Template.bind({});
 CompletedDefault.args = {
@@ -146,10 +171,20 @@ CompletedDefault.args = {
 };
 
 // Completed Timeline
-export const Completed = Template.bind({});
-Completed.args = {
+export const CompletedWithAdditionalElements = Template.bind({});
+CompletedWithAdditionalElements.args = {
   label: "Completed",
   subElements: subElements,
   variant: "completed",
   additionalElements: additionalElements,
 };
+
+// Completed Timeline
+export const CompletedWithConnector = Template.bind({});
+CompletedWithConnector.args = {
+  label: "Completed",
+  subElements: subElements,
+  variant: "completed",
+  additionalElements: additionalElements,
+  showConnector:true
+};
\ No newline at end of file
diff --git a/react/ui-components/src/index.js b/react/ui-components/src/index.js
index f77c888887..18692609b9 100644
--- a/react/ui-components/src/index.js
+++ b/react/ui-components/src/index.js
@@ -230,7 +230,8 @@ import {
   SearchField,
   SearchOnRadioButtons,
   TextInputCard,
-  PanelCard
+  PanelCard,
+  TimelineMolecule
 } from "./molecules";
 
 // import { initCoreLibraries } from "@egovernments/digit-ui-libraries-core";
@@ -317,6 +318,7 @@ export {
   SearchOnRadioButtons,
   TextInputCard,
   PanelCard,
+  TimelineMolecule,
   Toggle,
   ToggleSwitch,
   TreeSelect,
diff --git a/react/ui-components/src/molecules/TimelineMolecule.js b/react/ui-components/src/molecules/TimelineMolecule.js
new file mode 100644
index 0000000000..ee200e65b2
--- /dev/null
+++ b/react/ui-components/src/molecules/TimelineMolecule.js
@@ -0,0 +1,14 @@
+import React,{Children} from "react";
+import { Timeline } from "../atoms";
+
+const TimelineMolecule = ({ children }) => {
+  return (
+    <div className="digit-timeline-molecule">
+      {Children.map(children, (child, index) => (
+        <Timeline {...child.props} isLastStep={index === Children.count(children) - 1} />
+      ))}
+    </div>
+  );
+};
+
+export default TimelineMolecule;
diff --git a/react/ui-components/src/molecules/index.js b/react/ui-components/src/molecules/index.js
index f9ca7e7aec..a1b040eaa6 100644
--- a/react/ui-components/src/molecules/index.js
+++ b/react/ui-components/src/molecules/index.js
@@ -15,6 +15,7 @@ import RenderFormFields from "./RenderFormFields";
 import DateRangeNew from "./DateRangeNew";
 import WorkflowStatusFilter from "./WorkflowStatusFilter";
 import PanelCard from "./PanelCard";
+import TimelineMolecule from "./TimelineMolecule";
 
 export {
   ApiDropdown,
@@ -33,5 +34,6 @@ export {
   RenderFormFields,
   DateRangeNew,
   WorkflowStatusFilter,
-  PanelCard
+  PanelCard,
+  TimelineMolecule
 };
diff --git a/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js b/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js
new file mode 100644
index 0000000000..9e318be3ec
--- /dev/null
+++ b/react/ui-components/src/molecules/stories/TimelineMolecule.stories.js
@@ -0,0 +1,151 @@
+import React from "react";
+import TimelineMolecule from "../TimelineMolecule";
+import { Button } from "../../atoms";
+import Timeline from "../../atoms";
+
+export default {
+  title: "Molecules/TimelineMolecule",
+  component: TimelineMolecule,
+  argTypes: {},
+};
+
+const subElements = [
+  "26 / 03 / 2024",
+  "11:00 PM",
+  "26 / 03 / 2024 11:00 PM",
+  "26 / 03 / 2024 11:00 PM Mon",
+  "+91 **********",
+];
+
+const additionalElements = [
+  <div key="1">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's
+  </div>,
+  <Button variation="link" label={"Click on the link"} type="button" />,
+  <img
+    key="2"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 2"
+  />,
+  <img
+    key="3"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 3"
+  />,
+  <img
+    key="4"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 4"
+  />,
+  <img
+    key="5"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 5"
+  />,
+  <img
+    key="6"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 6"
+  />,
+  <img
+    key="7"
+    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
+    alt="Additional Element 7"
+  />,
+  <img
+    key="8"
+    src="https://digit.org/wp-content/uploads/2023/06/Digit-Logo-1.png"
+    alt="Additional Element 8"
+  />,
+  <Button
+    variation="primary"
+    label={"Button"}
+    type="button"
+    icon="MyLocation"
+  />,
+  <Button
+    variation="secondary"
+    label={"Button"}
+    type="button"
+    icon="MyLocation"
+    isSuffix={true}
+  />,
+];
+
+export const Default = () => (
+  <TimelineMolecule>
+    <Timeline
+      label="Completed Timeline Step"
+      subElements={subElements}
+      variant="completed"
+      showConnector={true}
+    />
+    <Timeline
+      label="Completed Timeline Step2"
+      subElements={subElements}
+      variant="completed"
+      showConnector={true}
+      isLastCompletedStep={true}
+    />
+    <Timeline
+      label="Inprogress Timeline Step"
+      subElements={subElements}
+      variant="inprogress"
+      showConnector={true}
+    />
+    <Timeline
+      label="Upcoming Timeline Step"
+      subElements={subElements}
+      variant="upcoming"
+      showConnector={true}
+    />
+    <Timeline
+      label="Upcoming Timeline Step2"
+      subElements={subElements}
+      variant="upcoming"
+      showConnector={true}
+    />
+  </TimelineMolecule>
+);
+
+export const WithAdditionalElements = () => (
+  <TimelineMolecule>
+    <Timeline
+      label="Completed Timeline Step"
+      subElements={subElements}
+      variant="completed"
+      showConnector={true}
+      additionalElements={additionalElements}
+    />
+    <Timeline
+      label="Completed Timeline Step2"
+      subElements={subElements}
+      variant="completed"
+      showConnector={true}
+      isLastCompletedStep={true}
+      additionalElements={additionalElements}
+    />
+    <Timeline
+      label="Inprogress Timeline Step"
+      subElements={subElements}
+      variant="inprogress"
+      showConnector={true}
+      additionalElements={additionalElements}
+    />
+    <Timeline
+      label="Upcoming Timeline Step"
+      subElements={subElements}
+      variant="upcoming"
+      showConnector={true}
+      additionalElements={additionalElements}
+    />
+    <Timeline
+      label="Upcoming Timeline Step2"
+      subElements={subElements}
+      variant="upcoming"
+      showConnector={true}
+      additionalElements={additionalElements}
+    />
+  </TimelineMolecule>
+);