diff --git a/apps/client/pages/api/auth/[...nextauth].js b/apps/client/pages/api/auth/[...nextauth].js
index 1dc358556..704336400 100644
--- a/apps/client/pages/api/auth/[...nextauth].js
+++ b/apps/client/pages/api/auth/[...nextauth].js
@@ -31,7 +31,6 @@ const options = {
       name: "Credentials",
       async authorize(credentials, req, res) {
         try {
-          console.log("hit");
           const user = await prisma.user.findUnique({
             where: { email: credentials.email },
           });
@@ -76,7 +75,6 @@ const options = {
   },
   callbacks: {
     jwt: async ({ token, user }) => {
-      console.log(token, user);
       user && (token.user = user);
       return token;
     },
@@ -85,16 +83,15 @@ const options = {
     },
     async session({ session, token, user }) {
       // checking for user changes on: language, email & name
-      console.log(token, session, user);
       const check_user = await prisma.user.findUnique({
         where: { email: user !== undefined ? user.email : token.email },
       });
 
       if (!check_user) throw new Error("No user found");
 
-      console.log("TOKEN: ", token);
-      console.log("SESSION: ", session);
-      console.log("USER: ", user);
+      // console.log("TOKEN: ", token);
+      // console.log("SESSION: ", session);
+      // console.log("USER: ", user);
 
       if (!user) {
         session.user = token;
diff --git a/apps/client/pages/api/v1/ticket/[id]/index.js b/apps/client/pages/api/v1/ticket/[id]/index.js
index 63f987948..f48bc4482 100644
--- a/apps/client/pages/api/v1/ticket/[id]/index.js
+++ b/apps/client/pages/api/v1/ticket/[id]/index.js
@@ -1,5 +1,3 @@
-import { ArrowTrendingUpIcon } from "@heroicons/react/20/solid";
-
 const { prisma } = require("../../../../../prisma/prisma");
 
 export default async function getById(req, res) {
@@ -20,6 +18,19 @@ export default async function getById(req, res) {
       },
     });
 
+    const timeTracking = await prisma.timeTracking.findMany({
+      where: {
+        ticketId: id,
+      },
+      include: {
+        user: {
+          select: {
+            name: true,
+          },
+        },
+      },
+    });
+
     const comments = await prisma.comment.findMany({
       where: {
         ticketId: ticket.id,
@@ -36,6 +47,7 @@ export default async function getById(req, res) {
     var t = {
       ...ticket,
       comments: [...comments],
+      TimeTracking: [...timeTracking],
     };
 
     res.status(200).json({ ticket: t });
diff --git a/apps/client/pages/api/v1/time/new.js b/apps/client/pages/api/v1/time/new.js
new file mode 100644
index 000000000..2c158f01e
--- /dev/null
+++ b/apps/client/pages/api/v1/time/new.js
@@ -0,0 +1,36 @@
+const { prisma } = require("../../../../prisma/prisma");
+import { getSession } from "next-auth/react";
+
+export default async function handler(req, res) {
+  const session = await getSession({ req });
+
+  const { time, id, title } = req.body;
+
+  console.log(time, id, title);
+
+  try {
+    if (session) {
+      const timeTracked = await prisma.timeTracking.create({
+        data: {
+          title,
+          ticketId: id,
+          time: Number(time),
+          userId: session.user.id,
+        },
+      });
+
+      res.status(200).json({
+        message: "Time tracked & linked to the ticket",
+        timeTracked,
+        success: true,
+      });
+    } else {
+      res
+        .status(403)
+        .json({ message: "Not authorised sorry :) ", success: false });
+    }
+  } catch (error) {
+    console.log(error);
+    return res.status(500);
+  }
+}
diff --git a/apps/client/pages/tickets/[id].js b/apps/client/pages/tickets/[id].js
index f9a0d62b4..863827701 100644
--- a/apps/client/pages/tickets/[id].js
+++ b/apps/client/pages/tickets/[id].js
@@ -5,12 +5,7 @@ import { message, Upload, Divider } from "antd";
 import moment from "moment";
 import { Menu, Transition, Listbox } from "@headlessui/react";
 import {
-  ArchiveBoxIcon,
-  ArrowRightCircleIcon,
-  ChevronDownIcon,
-  DocumentDuplicateIcon,
   PencilIcon,
-  PencilSquareIcon,
   LockOpenIcon,
   ChatBubbleLeftEllipsisIcon,
   CalendarIcon,
@@ -50,6 +45,9 @@ export default function Ticket() {
   }, [router]);
 
   const [edit, setEdit] = useState(false);
+  const [editTime, setTimeEdit] = useState(false);
+  const [assignedEdit, setAssignedEdit] = useState(false);
+  const [labelEdit, setLabelEdit] = useState(false);
 
   const [users, setUsers] = useState();
   const [n, setN] = useState();
@@ -61,8 +59,7 @@ export default function Ticket() {
   const [priority, setPriority] = useState();
   const [ticketStatus, setTicketStatus] = useState();
   const [comment, setComment] = useState();
-  const [assignedEdit, setAssignedEdit] = useState(false);
-  const [labelEdit, setLabelEdit] = useState(false);
+  const [timeSpent, setTimeSpent] = useState();
 
   const IssueEditor = useEditor({
     extensions: [
@@ -131,6 +128,26 @@ export default function Ticket() {
       .then(() => refetch());
   }
 
+  async function addTime() {
+    console.log("hit");
+    await fetch(`/api/v1/time/new`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        time: timeSpent,
+        id: data.ticket.id,
+        title: data.ticket.title,
+      }),
+    })
+      .then((res) => res.json())
+      .then(() => {
+        setTimeEdit(false);
+        refetch();
+      });
+  }
+
   const propsUpload = {
     name: "file",
     showUploadList: false,
@@ -936,8 +953,8 @@ export default function Ticket() {
                       )}
                     </div>
                     <div className="border-t border-gray-200">
-                      <div className="flex flex-row items-center justify-between">
-                        <span className="text-sm font-medium text-gray-500 mt-2">
+                      <div className="flex flex-row items-center justify-between mt-2">
+                        <span className="text-sm font-medium text-gray-500 ">
                           Labels
                         </span>
                         {!labelEdit ? (
@@ -1399,6 +1416,60 @@ export default function Ticket() {
                         </>
                       )}
                     </div>
+                    <div className="border-t border-gray-200">
+                      <div className="flex flex-row items-center justify-between mt-2">
+                        <span className="text-sm font-medium text-gray-500 ">
+                          Time Tracking
+                        </span>
+                        {!editTime ? (
+                          <button
+                            onClick={() => setTimeEdit(true)}
+                            className="text-sm font-medium text-gray-500 hover:underline"
+                          >
+                            add
+                          </button>
+                        ) : (
+                          <button
+                            onClick={() => {
+                              setTimeEdit(false);
+                              addTime();
+                            }}
+                            className="text-sm font-medium text-gray-500 hover:underline"
+                          >
+                            save
+                          </button>
+                        )}
+                      </div>
+                      {data.ticket.TimeTracking.length > 0 ? (
+                        data.ticket.TimeTracking.map((i) => (
+                          <div key={i.id} className="text-xs">
+                            <div className="flex flex-row space-x-1.5 items-center">
+                              <span>{i.user.name} / </span>
+                              <span>{i.time} minutes</span>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <div>
+                          <span className="text-xs">No Time added</span>
+                        </div>
+                      )}
+                      {editTime && (
+                        <div>
+                          <div className="mt-2">
+                            <input
+                              type="number"
+                              name="number"
+                              id="timespent"
+                              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                              placeholder="30"
+                              value={timeSpent}
+                              onChange={(e) => setTimeSpent(e.target.value)}
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </aside>
               </div>