diff --git a/apps/web/components/ContestClock.tsx b/apps/web/components/ContestClock.tsx
index 7b9cc1c..bc338a0 100644
--- a/apps/web/components/ContestClock.tsx
+++ b/apps/web/components/ContestClock.tsx
@@ -1,35 +1,17 @@
 "use client";
-import { useEffect, useState } from "react";
-import { parseClock } from "../lib/time";
-import { Card, CardContent } from "./ui/card";
+import { useContestTime } from "@/hooks/useContestTime";
 import { Clock } from "lucide-react";
+import { Card, CardContent } from "./ui/card";
 
 export const ContestClock = ({ startTime, endTime }: { startTime: Date; endTime: Date }) => {
-  const [currentTime, setCurrentTime] = useState(Date.now());
-  const [isStarted, setIsStarted] = useState(false);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const now = Date.now();
-      setCurrentTime(now);
-      setIsStarted(now >= startTime.getTime());
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [startTime]);
-
-  const timeLeft = isStarted
-    ? Math.max(0, endTime.getTime() - currentTime)
-    : Math.max(0, startTime.getTime() - currentTime);
-
-  const formatTime = (time: number) => {
-    const hours = Math.floor(time / 3600000);
-    const minutes = Math.floor((time % 3600000) / 60000);
-    const seconds = Math.floor((time % 60000) / 1000);
-    return { hours, minutes, seconds };
-  };
 
-  const { hours, minutes, seconds } = formatTime(timeLeft);
+  const {
+    hours,
+    isStarted,
+    minutes,
+    seconds,
+    timeLeft
+  } = useContestTime({ startTime, endTime });
 
   return (
     <Card className="bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-indigo-900 dark:to-blue-900 border-2 border-indigo-200 dark:border-indigo-700 shadow-lg">
diff --git a/apps/web/components/ContestProblemsTable.tsx b/apps/web/components/ContestProblemsTable.tsx
index 6a86c22..a3f9277 100644
--- a/apps/web/components/ContestProblemsTable.tsx
+++ b/apps/web/components/ContestProblemsTable.tsx
@@ -1,14 +1,16 @@
+"use client"
+
+import { CheckIcon, ChevronRightIcon, LockIcon } from "lucide-react";
 import Link from "next/link";
 import { Button } from "./ui/button";
 import {
   Table,
-  TableHeader,
-  TableRow,
-  TableHead,
   TableBody,
   TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from "./ui/table";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
 
 interface ProblemRowProps {
   id: string;
@@ -17,6 +19,8 @@ interface ProblemRowProps {
   submissionCount: number;
   contestId: string;
   points: number;
+  startTime: Date;
+  endTime: Date;
 }
 
 export const ContestProblemsTable = ({
@@ -26,6 +30,8 @@ export const ContestProblemsTable = ({
     title: string;
     description: string;
     id: string;
+    endTime: Date;
+    startTime: Date;
     problems: {
       problem: {
         id: string;
@@ -75,6 +81,8 @@ export const ContestProblemsTable = ({
                       title={problem.title}
                       difficulty={problem.difficulty}
                       submissionCount={problem.solved}
+                      startTime={contest.startTime}
+                      endTime={contest.endTime}
                     />
                   ))}
                 </TableBody>
@@ -94,12 +102,18 @@ function ProblemRow({
   submissionCount,
   contestId,
   points,
+  startTime,
+  endTime
 }: ProblemRowProps) {
   const difficultyColor = {
     Easy: "text-green-600 dark:text-green-400",
     Medium: "text-yellow-600 dark:text-yellow-400",
     Hard: "text-red-600 dark:text-red-400",
   }[difficulty] || "text-gray-600 dark:text-gray-400";
+  const isActive = startTime.getTime() < Date.now() && endTime.getTime() > Date.now();
+
+
+
 
   return (
     <TableRow className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
@@ -124,12 +138,25 @@ function ProblemRow({
         </div>
       </TableCell>
       <TableCell className="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
-        <Link href={`/contest/${contestId}/problem/${id}`}>
-          <Button className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
-            Solve
-            <ChevronRightIcon className="ml-2 -mr-1 h-4 w-4" />
-          </Button>
-        </Link>
+
+        {
+          isActive ? (
+            <Link href={`/contest/${contestId}/problem/${id}`}>
+              <Button className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
+                Solve
+                <ChevronRightIcon className="ml-2 -mr-1 h-4 w-4" />
+              </Button>
+            </Link>
+          ) : (
+            <Button className="inline-flex disabled items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-400 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400 transition-colors duration-200">
+              Solve
+              <LockIcon className="ml-2 -mr-1 h-4 w-4" />
+            </Button>
+          )
+        }
+
+
+
       </TableCell>
     </TableRow>
   );
diff --git a/apps/web/hooks/useContestTime.ts b/apps/web/hooks/useContestTime.ts
new file mode 100644
index 0000000..59df916
--- /dev/null
+++ b/apps/web/hooks/useContestTime.ts
@@ -0,0 +1,42 @@
+"use client"
+
+import { useEffect, useState } from "react";
+
+export function useContestTime({ startTime, endTime }: { startTime: Date; endTime: Date }) {
+    const [currentTime, setCurrentTime] = useState(Date.now());
+    const [isStarted, setIsStarted] = useState(false);
+
+    console.log({ startTime, endTime });
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const now = Date.now();
+            setCurrentTime(now);
+            setIsStarted(now >= startTime.getTime());
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [startTime]);
+
+    const timeLeft = isStarted
+        ? Math.max(0, endTime.getTime() - currentTime)
+        : Math.max(0, startTime.getTime() - currentTime);
+
+    const formatTime = (time: number) => {
+        const hours = Math.floor(time / 3600000);
+        const minutes = Math.floor((time % 3600000) / 60000);
+        const seconds = Math.floor((time % 60000) / 1000);
+        return { hours, minutes, seconds };
+    };
+
+    const { hours, minutes, seconds } = formatTime(timeLeft);
+
+    return {
+        hours,
+        minutes,
+        seconds,
+        timeLeft,
+        currentTime,
+        isStarted
+    }
+}
\ No newline at end of file