diff --git a/onboarding/templates/onboarding/onboarding_table.html b/onboarding/templates/onboarding/onboarding_table.html
index 2fcb102f5..20c3d1d4b 100644
--- a/onboarding/templates/onboarding/onboarding_table.html
+++ b/onboarding/templates/onboarding/onboarding_table.html
@@ -120,6 +120,8 @@
                         data-job-position = "{{candidate.candidate_id.job_position_id}}"
                         data-join-date="{{candidate.candidate_id.joining_date}}"
                         data-portal-count="{{candidate.candidate_id.onboarding_portal.count}}"
+                        data-toggle="oh-modal-toggle" data-target="#tableTimeOff"
+                        hx-get="{% url 'candidate-single-view' candidate.candidate_id.id %}" hx-target="#singleView"
                         >
                             <div class="oh-sticky-table__sd">
                                 <div class="oh-profile oh-profile--md">
@@ -144,7 +146,7 @@
                                 {{candidate.candidate_id.onboarding_portal.count}} / 4
                             </div>
                             </div>
-                            <div class="oh-sticky-table__td">
+                            <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                 {% if request.user|stage_manages:stage or perms.onboarding.change_candidatestage %}
                                 <select id="" class="w-100" style="
                                     border: 1px solid hsl(213deg,22%,84%);
@@ -169,7 +171,7 @@
 
                                 {% endif %}
                             </div>
-                            <div class="oh-sticky-table__td">
+                            <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                 <div class="oh-kanban__card-actions oh-kanban__dropdown">
                                     <button class="oh-btn oh-btn--small oh-btn--transparent oh-kanban__btn oh-kanban__dropdown-toggle" title="{% trans "Actions" %}">
                                         <ion-icon name="ellipsis-vertical-sharp" role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon>
@@ -186,7 +188,7 @@
                                 </div>
                             </div>
                             {% for task in candidate.candidate_id.candidate_task.all %}
-                            <div class="oh-sticky-table__td" id="task{{task.id}}">
+                            <div class="oh-sticky-table__td" onclick="event.stopPropagation()" id="task{{task.id}}">
                                 {% if request.user|task_manager:task or perms.onboarding.change_candidatetask %}
                                 {% include 'onboarding/candidate_task.html' %}
                                 {% else %}
diff --git a/onboarding/templates/onboarding/onboarding_view.html b/onboarding/templates/onboarding/onboarding_view.html
index 1bb126af0..17608aa28 100644
--- a/onboarding/templates/onboarding/onboarding_view.html
+++ b/onboarding/templates/onboarding/onboarding_view.html
@@ -13,6 +13,32 @@
         padding: 10px;
         height: 50px !important; /* Adjust the height value as needed */
     }
+        
+    .oh-dot--color-done {
+        background-color: hsl(148deg, 71%, 44%)
+    }
+    .oh-dot--color-scheduled {
+        background-color: hsl(40deg, 100%, 60%)
+    }
+
+    .oh-dot--color-stuck {
+        background-color: #ff0400
+    }
+    .oh-dot--color-ongoing {
+        background-color: hsl(204deg, 70%, 53%)
+    }
+
+    .oh-dot--color-todo {
+        background-color: #e3b75f80
+    }
+    .oh-dot--color-None {
+        background-color: hsla(270, 5%, 48%, 0.709)
+    }
+    
+    .oh-dot--color- {
+        background-color: hsla(270, 5%, 48%, 0.709)
+    }
+
 </style>
 <div class="oh-alert-container messages" >
         
@@ -265,6 +291,25 @@
         </div>
     </div>
 </div>
+
+
+<div class="oh-modal" id="tableTimeOff" role="dialog" aria-labelledby="tableTimeOffModal" aria-hidden="true">
+    <div class="oh-modal__dialog ">
+        <div class="oh-modal__dialog-header">
+
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+        </div>
+
+        <div id="singleView">
+
+        </div>
+        
+    </div>
+</div>
+
+
 <script>
     $(document).ready(function() {
         $("#search").on("htmx:afterRequest", function(event, xhr, data) {
diff --git a/onboarding/templates/onboarding/single_view.html b/onboarding/templates/onboarding/single_view.html
new file mode 100644
index 000000000..4a6722e09
--- /dev/null
+++ b/onboarding/templates/onboarding/single_view.html
@@ -0,0 +1,126 @@
+{% load i18n %} {% load onboardingfilters %} 
+<div class="oh-modal__dialog-body oh-timeoff-modal__body  pb-2">
+    <div class="oh-timeoff-modal__profile-content">
+        <div class="oh-profile">
+            <div class="oh-profile-section__edit-photo me-3" >
+                {% if candidate.profile %}
+                <img src="{{candidate.profile.url}}"
+                    class="oh-profile-section__modal-image" alt="" />
+                {% else %}
+                <img src="https://ui-avatars.com/api/?name={{candidate}}&background=random"
+                    class="oh-profile-section__modal-image" alt="" />
+                {% endif %}
+            </div>
+            <div  >
+
+                <div class="oh-timeoff-modal__profile-info mb-2">
+                    <span class="oh-timeoff-modal__user fw-bold">{{candidate}}</span>
+                </div>
+                <div class="oh-profile">
+                    <a href="{% url 'candidate-view-individual' candidate.id %}" type="button" title="View" class="oh-btn oh-btn--light-bkg w-50"> 
+                        <ion-icon name="eye-outline" role="img" class="md hydrated" aria-label="eye outline"></ion-icon>
+                    </a>
+                    <a href="{% url 'rec-candidate-update' candidate.id %}?onboarding=true" class="oh-btn oh-btn--light-bkg w-100" title="Edit" >
+                        <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="oh-timeoff-modal__stats-container">
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Email" %}</span>
+            <span class="oh-timeoff-modal__stat-count">{{candidate.email}}</span>
+        </div>
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Job Position" %}</span>
+            <span class="oh-timeoff-modal__stat-count">{{candidate.job_position_id}}</span>
+        </div>
+    </div>
+
+    <div class="oh-timeoff-modal__stats-container mt-3">
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Contact" %}</span>
+            <span class="oh-timeoff-modal__stat-count">{{candidate.mobile}}</span>
+        </div>
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Joining Date" %}</span>
+            <span class="oh-timeoff-modal__stat-count">{{candidate.joining_date}}</span>
+        </div>
+    </div>
+    <div class="oh-timeoff-modal__stats-container mt-3">
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Onboarding portal stage" %}</span>
+            <span class="oh-timeoff-modal__stat-count">
+                <div class="oh-checkpoint-badge oh-checkpoint-badge--secondary" >
+                {{candidate.onboarding_portal.count}} / 4
+                </div>
+            </span>
+        </div>
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Stage" %}</span>
+            <span class="oh-timeoff-modal__stat-count">
+                    {% if request.user|stage_manages:candidate.onboarding_stage.onboarding_stage_id or perms.onboarding.change_candidatestage %}
+                    <select id="" class="w-100" style="
+                        border: 1px solid hsl(213deg,22%,84%);
+                        padding: 0.3rem 0.8rem 0.3rem 0.3rem;
+                        border-radius: 0rem;" name="stage"
+                        hx-post="{% url 'candidate-stage-update' candidate.id recruitment.id %}"
+                        hx-trigger="change" hx-target="#onboardingTable{{recruitment.id}}">
+                        {% for stage in recruitment.onboardingstage_set.all %}
+                        {% if candidate.onboarding_stage.onboarding_stage_id == stage %}
+                        <option value="{{stage.id}}" selected>{{stage}}</option>
+                        {% else %}
+                        <option value="{{stage.id}}">{{stage}}</option>
+                        {% endif %}
+                        {% endfor %}
+                    </select>
+                    {% else %}
+                    {% for stage in recruitment.onboardingstage_set.all %}
+                        {% if candidate.onboarding_stage_id == stage %}
+                        {{stage}}
+                        {% endif %}
+                    {% endfor %}
+        
+                    {% endif %}
+            </span>
+        </div>
+    </div>
+
+    <div class="oh-timeoff-modal__stats w-100 mt-3 mb-3">
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-count">{% trans "Tasks" %}</span>
+            <div class="row ms-2">
+                {% for task in candidate.candidate_task.all %}
+                    <div class="col-6 ps-0 pb-1">
+                        <div class="oh-timeoff-modal__stat-title mb-1 "><span class="oh-dot oh-dot--small  me-1 oh-dot--color-{{task.status}}"></span>{{task.onboarding_task_id.task_title}} </div>
+                        <div class="" id="task{{task.id}}">
+                            {% if request.user|task_manager:task or perms.onboarding.change_candidatetask %}
+                            {% include 'onboarding/candidate_task.html' %}
+                            {% else %}
+                            {% for choice in choices %}
+                            {% if choice.0 == task.status %}
+                            {{choice.1}}
+                            {% endif %}
+                            {% endfor %}
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+    
+</div>
+
+<script>
+    $("select[name='task']").on("change", function() {
+        var value = $(this).val();
+        var dot = $(this).closest('.col-6').find('span.oh-dot');
+        console.log(dot)
+    
+        // Update the class
+        dot.removeClass().addClass('oh-dot oh-dot--small me-1 oh-dot--color-' + value);
+    })
+</script>
\ No newline at end of file
diff --git a/onboarding/urls.py b/onboarding/urls.py
index 122995f04..bf347e819 100644
--- a/onboarding/urls.py
+++ b/onboarding/urls.py
@@ -24,6 +24,7 @@ urlpatterns = [
     path("candidate-creation", views.candidate_creation, name="candidate-creation"),
     path("candidate-update/<int:obj_id>", views.candidate_update, name="candidate-update"),
     path("candidate-delete/<int:obj_id>", views.candidate_delete, name="candidate-delete"),
+    path("candidate-single-view/<int:id>", views.candidates_single_view, name="candidate-single-view"),
     path("candidates-view", views.candidates_view, name="candidates-view"),
     path("hired-candidates-view", views.hired_candidate_view, name="hired-candidates-view"),
     path("candidate-filter", views.candidate_filter, name="candidate-filter"),
diff --git a/onboarding/views.py b/onboarding/views.py
index 9d8c1b574..e55f8b549 100644
--- a/onboarding/views.py
+++ b/onboarding/views.py
@@ -402,6 +402,48 @@ def candidate_delete(request, obj_id):
         )
     return redirect(candidates_view)
 
+@login_required
+@permission_required("recruitment.view_candidate")
+def candidates_single_view(request,id):
+    candidate = Candidate.objects.get(hired=True, start_onboard=True,id=id)
+    if not CandidateStage.objects.filter(candidate_id=candidate).exists():
+        try:
+            onboarding_stage = OnboardingStage.objects.filter(
+                recruitment_id=candidate.recruitment_id
+            ).order_by("sequence")[0]
+            CandidateStage(
+                candidate_id=candidate, onboarding_stage_id=onboarding_stage
+            ).save()
+        except Exception:
+            messages.error(
+                request,
+                _("%(recruitment)s has no stage..")
+                % {"recruitment": candidate.recruitment_id},
+            )
+        if tasks := OnboardingTask.objects.filter(
+            recruitment_id=candidate.recruitment_id
+        ):
+            for task in tasks:
+                if not CandidateTask.objects.filter(
+                    candidate_id=candidate, onboarding_task_id=task
+                ).exists():
+                    CandidateTask(
+                        candidate_id=candidate, onboarding_task_id=task
+                    ).save()
+
+    recruitment =candidate.recruitment_id
+    choices = CandidateTask.choice
+    context = {
+            "recruitment": recruitment,
+            "choices": choices,
+            "candidate": candidate,
+        }
+    return render(
+        request,
+        "onboarding/single_view.html",
+        context,
+    )
+
 
 def paginator_qry(qryset, page_number):
     """