diff --git a/app/[hackathon]/InteractionClient.tsx b/app/[hackathon]/InteractionClient.tsx
index ef9958b..1ee7a7a 100644
--- a/app/[hackathon]/InteractionClient.tsx
+++ b/app/[hackathon]/InteractionClient.tsx
@@ -489,10 +489,10 @@ export default function InteractionClient() {
     switch (status) {
       case 'upcoming':
         return <Badge className="bg-blue-500 hover:bg-blue-600 text-white">Upcoming</Badge>
-      case 'active':
-        return <Badge className="bg-green-500 hover:bg-green-600 text-white">Active - {daysRemaining} days left</Badge>
-      case 'ended':
-        return <Badge className="bg-orange-500 hover:bg-orange-600 text-white">Submission Ended</Badge>
+      case 'accepting-submissions':
+        return <Badge className="bg-green-500 hover:bg-green-600 text-white">Accepting Submissions - {daysRemaining} days left</Badge>
+      case 'judging-submissions':
+        return <Badge className="bg-orange-500 hover:bg-orange-600 text-white">Judging Submissions</Badge>
       case 'concluded':
         return <Badge className="bg-gray-500 hover:bg-gray-600 text-white">Concluded</Badge>
       default:
@@ -604,7 +604,7 @@ export default function InteractionClient() {
                   </div>
                 </div>
                 <div className="flex items-center gap-4">
-                  <div className={`w-3 h-3 rounded-full ${status === 'ended' || status === 'concluded' ? 'bg-green-500' : status === 'active' ? 'bg-blue-500' : 'bg-gray-300'}`}></div>
+                  <div className={`w-3 h-3 rounded-full ${status === 'judging-submissions' || status === 'concluded' ? 'bg-green-500' : status === 'accepting-submissions' ? 'bg-blue-500' : 'bg-gray-300'}`}></div>
                   <div>
                     <p className="font-semibold text-gray-800">Submission Deadline</p>
                     <p className="text-sm text-muted-foreground">
@@ -745,7 +745,7 @@ export default function InteractionClient() {
           )}
 
           {/* Project Submission */}
-          {status === 'active' && (
+          {status === 'accepting-submissions' && (
             <Card className="border shadow-sm border-black bg-white">
               <CardContent className="p-6">
                 <div className="text-center space-y-4">
diff --git a/app/createHackathon/page.tsx b/app/createHackathon/page.tsx
index 9307421..936698b 100644
--- a/app/createHackathon/page.tsx
+++ b/app/createHackathon/page.tsx
@@ -48,6 +48,7 @@ export default function CreateHackathon() {
   
   const [timezoneMode, setTimezoneMode] = useState<TimezoneMode>('local')
   const [prizePoolType, setPrizePoolType] = useState<'eth' | 'token'>('eth')
+  const [tokenSymbol, setTokenSymbol] = useState<string>('')
   
   const [judges, setJudges] = useState<Judge[]>([
     { address: '', name: '', tokens: '' }
@@ -88,6 +89,33 @@ export default function CreateHackathon() {
     }
   })
 
+  // Fetch token symbol
+  const { data: fetchedTokenSymbol } = useReadContract({
+    address: formData.tokenAddress as `0x${string}`,
+    abi: [
+      {
+        "inputs": [],
+        "name": "symbol",
+        "outputs": [{"internalType": "string", "name": "", "type": "string"}],
+        "stateMutability": "view",
+        "type": "function"
+      }
+    ] as const,
+    functionName: 'symbol',
+    query: {
+      enabled: prizePoolType === 'token' && isAddress(formData.tokenAddress)
+    }
+  })
+
+  // Update token symbol when fetched
+  useEffect(() => {
+    if (fetchedTokenSymbol) {
+      setTokenSymbol(String(fetchedTokenSymbol))
+    } else {
+      setTokenSymbol('')
+    }
+  }, [fetchedTokenSymbol])
+
   // Smart contract has been fixed! 
   // Factory now transfers tokens directly from user to the created Hackathon contract
 
@@ -250,6 +278,7 @@ export default function CreateHackathon() {
     }
 
     // Check judges
+    const judgeAddresses = new Set<string>()
     for (let i = 0; i < judges.length; i++) {
       const judge = judges[i]
       if (!judge.address || !judge.name || !judge.tokens) {
@@ -262,6 +291,14 @@ export default function CreateHackathon() {
         return false
       }
 
+      // Check for duplicate addresses
+      const normalizedAddress = judge.address.toLowerCase()
+      if (judgeAddresses.has(normalizedAddress)) {
+        setValidationError(`Duplicate judge address found. Each judge must have a unique wallet address.`)
+        return false
+      }
+      judgeAddresses.add(normalizedAddress)
+
       const tokens = parseInt(judge.tokens)
       if (isNaN(tokens) || tokens <= 0) {
         setValidationError(`Invalid token amount for judge ${i + 1}`)
@@ -399,34 +436,31 @@ export default function CreateHackathon() {
         <form onSubmit={handleSubmit} className="space-y-8">
           {/* Basic Information */}
           <Card className="border-0 shadow-lg bg-white backdrop-blur-sm">
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2 text-gray-800">
-                <Sparkles className="w-5 h-5 text-amber-600" />
-                Basic Information
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-6">
+            <CardContent className="space-y-6 pt-6">
               {/* Hackathon Name */}
               <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <Label htmlFor="name" className="text-gray-700 font-medium">Hackathon Name *</Label>
-                  <button
-                    type="button"
-                    onClick={() => toggleInfo('name')}
-                    className="text-amber-600 hover:text-amber-700"
-                  >
-                    <Info className="w-4 h-4" />
-                  </button>
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-2 min-w-[200px]">
+                    <Sparkles className="w-4 h-4 text-amber-600" />
+                    <Label htmlFor="name" className="text-gray-700 font-medium">Hackathon Name *</Label>
+                    <button
+                      type="button"
+                      onClick={() => toggleInfo('name')}
+                      className="text-amber-600 hover:text-amber-700"
+                    >
+                      <Info className="w-4 h-4" />
+                    </button>
+                  </div>
+                  <Input
+                    id="name"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    placeholder="Enter hackathon name"
+                    className="border-amber-200 focus:border-amber-500 bg-white text-gray-900 placeholder:text-gray-500 flex-1"
+                  />
                 </div>
-                <Input
-                  id="name"
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  placeholder="Enter hackathon name"
-                  className="border-amber-200 focus:border-amber-500 bg-white text-gray-900 placeholder:text-gray-500"
-                />
                 {showInfo.name && (
-                  <p className="text-sm text-gray-600">
+                  <p className="text-sm text-gray-600 ml-[212px]">
                     Choose a unique and descriptive name for your hackathon
                   </p>
                 )}
@@ -437,8 +471,8 @@ export default function CreateHackathon() {
               {/* Date and Time */}
               <div className="space-y-4">
                 {/* Timezone Toggle */}
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-2 min-w-[200px]">
                     <Globe className="w-4 h-4 text-purple-600" />
                     <Label className="text-gray-700 font-medium">Timezone</Label>
                     <button
@@ -477,7 +511,7 @@ export default function CreateHackathon() {
                   </div>
                 </div>
                 {showInfo.timezone && (
-                  <p className="text-sm text-gray-600 mb-4">
+                  <p className="text-sm text-gray-600 mb-4 ml-[212px]">
                     Choose how you want to input times. Local time will be converted to UTC for storage on the blockchain.
                     All times are ultimately stored and displayed in UTC format.
                   </p>
@@ -487,68 +521,64 @@ export default function CreateHackathon() {
                   <div className="space-y-4">
                     <div className="flex items-center gap-2">
                       <Calendar className="w-4 h-4 text-blue-500" />
-                      <Label className="text-gray-700 font-medium">
-                        Start Date & Time * ({timezoneMode === 'local' ? 'Local Time' : 'UTC'})
-                      </Label>
+                      <Label className="text-gray-700 font-medium">Start Date & Time *</Label>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <Input
+                        type="date"
+                        value={formData.startDate}
+                        onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
+                        className="border-blue-200 focus:border-blue-500 bg-white text-gray-900 [&::-webkit-calendar-picker-indicator]:opacity-100 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+                        style={{
+                          colorScheme: 'light'
+                        }}
+                      />
+                      <Input
+                        type="time"
+                        value={formData.startTime}
+                        onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
+                        className="border-blue-200 focus:border-blue-500 bg-white text-gray-900 [&::-webkit-calendar-picker-indicator]:opacity-100 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+                        style={{
+                          colorScheme: 'light'
+                        }}
+                      />
                     </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <Input
-                      type="date"
-                      value={formData.startDate}
-                      onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
-                      className="border-blue-200 focus:border-blue-500 bg-white text-gray-900"
-                      style={{
-                        colorScheme: 'light'
-                      }}
-                    />
-                    <Input
-                      type="time"
-                      value={formData.startTime}
-                      onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
-                      className="border-blue-200 focus:border-blue-500 bg-white text-gray-900"
-                      style={{
-                        colorScheme: 'light'
-                      }}
-                    />
                   </div>
-                </div>
 
-                <div className="space-y-4">
-                  <div className="flex items-center gap-2">
-                    <Clock className="w-4 h-4 text-red-500" />
-                    <Label className="text-gray-700 font-medium">
-                      End Date & Time * ({timezoneMode === 'local' ? 'Local Time' : 'UTC'})
-                    </Label>
-                  </div>
-                  <div className="grid grid-cols-2 gap-2">
-                    <Input
-                      type="date"
-                      value={formData.endDate}
-                      onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
-                      className="border-red-200 focus:border-red-500 bg-white text-gray-900"
-                      style={{
-                        colorScheme: 'light'
-                      }}
-                    />
-                    <Input
-                      type="time"
-                      value={formData.endTime}
-                      onChange={(e) => setFormData({ ...formData, endTime: e.target.value })}
-                      className="border-red-200 focus:border-red-500 bg-white text-gray-900"
-                      style={{
-                        colorScheme: 'light'
-                      }}
-                    />
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-2">
+                      <Clock className="w-4 h-4 text-red-500" />
+                      <Label className="text-gray-700 font-medium">End Date & Time *</Label>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <Input
+                        type="date"
+                        value={formData.endDate}
+                        onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
+                        className="border-red-200 focus:border-red-500 bg-white text-gray-900 [&::-webkit-calendar-picker-indicator]:opacity-100 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+                        style={{
+                          colorScheme: 'light'
+                        }}
+                      />
+                      <Input
+                        type="time"
+                        value={formData.endTime}
+                        onChange={(e) => setFormData({ ...formData, endTime: e.target.value })}
+                        className="border-red-200 focus:border-red-500 bg-white text-gray-900 [&::-webkit-calendar-picker-indicator]:opacity-100 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+                        style={{
+                          colorScheme: 'light'
+                        }}
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
-              </div>
 
               {/* Prize Pool */}
               <div className="space-y-4">
                 {/* Prize Pool Type Toggle */}
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-2 min-w-[200px]">
                     <Trophy className="w-4 h-4 text-yellow-500" />
                     <Label className="text-gray-700 font-medium">Prize Pool Type</Label>
                     <button
@@ -588,49 +618,98 @@ export default function CreateHackathon() {
                   </div>
                 </div>
                 {showInfo.prizePoolType && (
-                  <p className="text-sm text-gray-600 mb-4">
-                    Choose whether to fund the prize pool with native ETH (sent with transaction) or with an ERC-20 token (requires approval). 
-                    Token-based hackathons are now fully supported!
+                  <p className="text-sm text-gray-600 mb-4 ml-[212px]">
+                    Choose whether to fund the prize pool with native ETH or with an ERC20 token.
                   </p>
                 )}
 
+                {/* Token Fields - Parallel Layout */}
+                {prizePoolType === 'token' && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {/* Token Address */}
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-4">
+                        <div className="flex items-center gap-2 min-w-[180px]">
+                          <Coins className="w-4 h-4 text-purple-500" />
+                          <Label htmlFor="tokenAddress" className="text-gray-700 font-medium">Token Contract Address *</Label>
+                        </div>
+                      </div>
+                      <Input
+                        id="tokenAddress"
+                        value={formData.tokenAddress}
+                        onChange={(e) => setFormData({ ...formData, tokenAddress: e.target.value })}
+                        placeholder="0x..."
+                        className="font-mono text-sm border-yellow-200 focus:border-yellow-500 bg-white text-gray-900 placeholder:text-gray-500"
+                      />
+                    </div>
 
+                    {/* Prize Pool Amount */}
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-4">
+                        <div className="flex items-center gap-2 min-w-[180px]">
+                          <Trophy className="w-4 h-4 text-yellow-600" />
+                          <Label htmlFor="prizePool" className="text-gray-700 font-medium">
+                            Prize Pool Amount ({tokenSymbol || 'Tokens'}) *
+                          </Label>
+                          <button
+                            type="button"
+                            onClick={() => toggleInfo('prizePool')}
+                            className="text-amber-600 hover:text-amber-700"
+                          >
+                            <Info className="w-4 h-4" />
+                          </button>
+                        </div>
+                      </div>
+                      <Input
+                        id="prizePool"
+                        type="number"
+                        step="any"
+                        min="0"
+                        value={formData.prizePool}
+                        onChange={(e) => setFormData({ ...formData, prizePool: e.target.value })}
+                        placeholder={`Enter amount in ${tokenSymbol || 'tokens'}`}
+                        className="border-yellow-200 focus:border-yellow-500 bg-white text-gray-900 placeholder:text-gray-500"
+                      />
+                    </div>
+                  </div>
+                )}
 
-                {/* Token Address Input (only show when token is selected) */}
-                {prizePoolType === 'token' && (
+                {/* ETH Prize Pool Amount (when ETH is selected) */}
+                {prizePoolType === 'eth' && (
                   <div className="space-y-2">
-                    <Label htmlFor="tokenAddress" className="text-gray-700 font-medium">Token Contract Address *</Label>
-                    <Input
-                      id="tokenAddress"
-                      value={formData.tokenAddress}
-                      onChange={(e) => setFormData({ ...formData, tokenAddress: e.target.value })}
-                      placeholder="0x..."
-                      className="font-mono text-sm border-yellow-200 focus:border-yellow-500 bg-white text-gray-900 placeholder:text-gray-500"
-                    />
+                    <div className="flex items-center gap-4">
+                      <div className="flex items-center gap-2 min-w-[200px]">
+                        <Trophy className="w-4 h-4 text-yellow-600" />
+                        <Label htmlFor="prizePool" className="text-gray-700 font-medium">
+                          Prize Pool Amount (ETH) *
+                        </Label>
+                        <button
+                          type="button"
+                          onClick={() => toggleInfo('prizePool')}
+                          className="text-amber-600 hover:text-amber-700"
+                        >
+                          <Info className="w-4 h-4" />
+                        </button>
+                      </div>
+                      <Input
+                        id="prizePool"
+                        type="number"
+                        step="any"
+                        min="0"
+                        value={formData.prizePool}
+                        onChange={(e) => setFormData({ ...formData, prizePool: e.target.value })}
+                        placeholder="Enter prize pool amount in ETH"
+                        className="border-yellow-200 focus:border-yellow-500 bg-white text-gray-900 placeholder:text-gray-500 flex-1"
+                      />
+                    </div>
                   </div>
                 )}
 
-                {/* Prize Pool Amount */}
-                <div className="space-y-2">
-                  <Label htmlFor="prizePool" className="text-gray-700 font-medium">
-                    Prize Pool Amount ({prizePoolType === 'eth' ? 'ETH' : 'Tokens'}) *
-                  </Label>
-                  <Input
-                    id="prizePool"
-                    type="number"
-                    step="any"
-                    min="0"
-                    value={formData.prizePool}
-                    onChange={(e) => setFormData({ ...formData, prizePool: e.target.value })}
-                    placeholder={`Enter prize pool amount in ${prizePoolType === 'eth' ? 'ETH' : 'tokens'}`}
-                    className="border-yellow-200 focus:border-yellow-500 bg-white text-gray-900 placeholder:text-gray-500"
-                  />
-                  {showInfo.prizePool && (
-                    <p className="text-sm text-gray-600">
-                      The total prize pool that will be distributed to winners based on voting results
-                    </p>
-                  )}
-                </div>
+                {showInfo.prizePool && (
+                  <p className="text-sm text-gray-600 ml-[212px]">
+                    The total prize pool that will be distributed to winners based on voting results
+                  </p>
+                )}
               </div>
             </CardContent>
           </Card>
@@ -683,7 +762,10 @@ export default function CreateHackathon() {
 
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                       <div className="space-y-2">
-                        <Label className="text-gray-700 font-medium">Wallet Address *</Label>
+                        <div className="flex items-center gap-2">
+                          <Users className="w-4 h-4 text-blue-500" />
+                          <Label className="text-gray-700 font-medium">Wallet Address *</Label>
+                        </div>
                         <Input
                           value={judge.address}
                           onChange={(e) => updateJudge(index, 'address', e.target.value)}
@@ -692,7 +774,10 @@ export default function CreateHackathon() {
                         />
                       </div>
                       <div className="space-y-2">
-                        <Label className="text-gray-700 font-medium">Judge Name *</Label>
+                        <div className="flex items-center gap-2">
+                          <Users className="w-4 h-4 text-green-500" />
+                          <Label className="text-gray-700 font-medium">Judge Name *</Label>
+                        </div>
                         <Input
                           value={judge.name}
                           onChange={(e) => updateJudge(index, 'name', e.target.value)}
@@ -701,7 +786,10 @@ export default function CreateHackathon() {
                         />
                       </div>
                       <div className="space-y-2">
-                        <Label className="text-gray-700 font-medium">Voting Tokens *</Label>
+                        <div className="flex items-center gap-2">
+                          <Coins className="w-4 h-4 text-orange-500" />
+                          <Label className="text-gray-700 font-medium">Voting Tokens *</Label>
+                        </div>
                         <Input
                           type="number"
                           min="1"
diff --git a/app/explorer/page.tsx b/app/explorer/page.tsx
index c5d194a..61ce428 100644
--- a/app/explorer/page.tsx
+++ b/app/explorer/page.tsx
@@ -75,9 +75,9 @@ export default function ExplorerPage() {
   // Get status badge color
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'active': return 'bg-green-100 text-green-800 border-green-200'
+      case 'accepting-submissions': return 'bg-green-100 text-green-800 border-green-200'
       case 'upcoming': return 'bg-blue-100 text-blue-800 border-blue-200'
-      case 'ended': return 'bg-orange-100 text-orange-800 border-orange-200'
+      case 'judging-submissions': return 'bg-orange-100 text-orange-800 border-orange-200'
       case 'concluded': return 'bg-gray-100 text-gray-800 border-gray-200'
       default: return 'bg-gray-100 text-gray-800 border-gray-200'
     }
@@ -240,18 +240,18 @@ export default function ExplorerPage() {
     let matchesStatus = true
     if (statusFilter !== "All Status") {
       const status = getHackathonStatus(hackathon.startTime, hackathon.endTime, hackathon.concluded)
-      matchesStatus = statusFilter.toLowerCase() === status
+      matchesStatus = statusFilter === status
     }
     
     return matchesSearch && matchesStatus
   })
 
-  // Sort hackathons by status priority (active first, then upcoming, then ended/concluded)
+  // Sort hackathons by status priority (accepting-submissions first, then upcoming, then judging-submissions/concluded)
   const sortedHackathons = filteredHackathons.sort((a, b) => {
     const statusA = getHackathonStatus(a.startTime, a.endTime, a.concluded)
     const statusB = getHackathonStatus(b.startTime, b.endTime, b.concluded)
     
-    const statusPriority = { 'active': 0, 'upcoming': 1, 'ended': 2, 'concluded': 3 }
+    const statusPriority = { 'accepting-submissions': 0, 'upcoming': 1, 'judging-submissions': 2, 'concluded': 3 }
     return statusPriority[statusA] - statusPriority[statusB]
   })
 
@@ -356,9 +356,9 @@ export default function ExplorerPage() {
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="All Status">All Status</SelectItem>
-              <SelectItem value="active">Active</SelectItem>
+              <SelectItem value="accepting-submissions">Accepting Submissions</SelectItem>
               <SelectItem value="upcoming">Upcoming</SelectItem>
-              <SelectItem value="ended">Ended</SelectItem>
+              <SelectItem value="judging-submissions">Judging Submissions</SelectItem>
               <SelectItem value="concluded">Concluded</SelectItem>
             </SelectContent>
           </Select>
@@ -367,15 +367,15 @@ export default function ExplorerPage() {
 
       {/* Hackathons List */}
       <div className="space-y-8">
-        {/* Ongoing Hackathons */}
-        {sortedHackathons.filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) === 'active').length > 0 && (
+        {/* Active Hackathons */}
+        {sortedHackathons.filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) === 'accepting-submissions').length > 0 && (
           <div className="space-y-4">
             <h2 className="text-2xl font-bold text-amber-800 border-b border-amber-200 pb-2">
-              🔥 Ongoing Hackathons
+              🔥 Active Hackathons
             </h2>
-            <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
               {sortedHackathons
-                .filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) === 'active')
+                .filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) === 'accepting-submissions')
                 .map((hackathon) => {
                   const status = getHackathonStatus(hackathon.startTime, hackathon.endTime, hackathon.concluded)
                   return (
@@ -384,56 +384,65 @@ export default function ExplorerPage() {
                       href={`/h?hackAddr=${hackathon.contractAddress}&chainId=${chainId}`}
                       className="block"
                     >
-                                              <div className="w-full bg-white border border-amber-100 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group relative">
+                      <div className="bg-white border border-amber-100 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group relative h-full">
                         {/* Gradient background overlay based on status */}
                         <div className={`absolute inset-0 transition-all duration-300 ${
-                          status === 'active' 
-                            ? 'bg-gradient-to-r from-amber-50/60 via-orange-50/30 to-amber-50/60 group-hover:from-amber-100/60 group-hover:via-orange-100/30 group-hover:to-amber-100/60'
+                          status === 'accepting-submissions' 
+                            ? 'bg-gradient-to-b from-amber-50/60 via-orange-50/30 to-amber-50/60 group-hover:from-amber-100/60 group-hover:via-orange-100/30 group-hover:to-amber-100/60'
                             : status === 'upcoming' 
-                            ? 'bg-gradient-to-r from-blue-50/60 via-indigo-50/30 to-blue-50/60 group-hover:from-blue-100/60 group-hover:via-indigo-100/30 group-hover:to-blue-100/60'
-                            : status === 'ended'
-                            ? 'bg-gradient-to-r from-orange-50/60 via-amber-50/30 to-orange-50/60 group-hover:from-orange-100/60 group-hover:via-amber-100/30 group-hover:to-orange-100/60'
-                            : 'bg-gradient-to-r from-gray-50/60 via-slate-50/30 to-gray-50/60 group-hover:from-gray-100/60 group-hover:via-slate-100/30 group-hover:to-gray-100/60'
+                            ? 'bg-gradient-to-b from-blue-50/60 via-indigo-50/30 to-blue-50/60 group-hover:from-blue-100/60 group-hover:via-indigo-100/30 group-hover:to-blue-100/60'
+                            : status === 'judging-submissions'
+                            ? 'bg-gradient-to-b from-orange-50/60 via-amber-50/30 to-orange-50/60 group-hover:from-orange-100/60 group-hover:via-amber-100/30 group-hover:to-orange-100/60'
+                            : 'bg-gradient-to-b from-gray-50/60 via-slate-50/30 to-gray-50/60 group-hover:from-gray-100/60 group-hover:via-slate-100/30 group-hover:to-gray-100/60'
                         }`}></div>
                         
-                        <div className="relative z-10 flex items-center justify-between p-6 min-h-[140px]">
-                          {/* Left section - Name and Status */}
-                          <div className="flex items-center gap-4 flex-1">
-                            <div className="space-y-2">
-                              <h3 className="text-lg font-semibold text-gray-900 group-hover:text-amber-700 transition-colors">
-                                {hackathon.hackathonName}
-                              </h3>
-                              <Badge className={`text-xs font-medium px-3 py-1 ${getStatusColor(status)} shadow-sm`}>
-                                🔥 {status.toUpperCase()}
-                              </Badge>
-                            </div>
-                          </div>
-
-                          {/* Center section - Block Image */}
-                          <div className="flex-shrink-0 mx-8 relative h-full flex items-center">
-                            <div className="h-32 w-32 relative group-hover:scale-105 transition-transform duration-300">
+                        <div className="relative z-10 p-6 flex flex-col h-full">
+                          {/* Top section - Image */}
+                          <div className="flex justify-center mb-4">
+                            <div className="h-20 w-20 relative group-hover:scale-105 transition-transform duration-300">
                               <Image
                                 src={getImagePath("/block.png")}
                                 alt="Blockchain Block"
-                                width={128}
-                                height={128}
+                                width={80}
+                                height={80}
                                 className="h-full w-full object-contain"
                                 priority
                               />
                             </div>
                           </div>
 
-                          {/* Right section - Date and Prize */}
-                          <div className="flex flex-col items-end gap-2 flex-1">
-                            <div className="flex items-center gap-2 text-gray-600">
-                              <Calendar className="w-4 h-4" />
-                              <span className="text-sm font-medium">
-                                {formatDate(hackathon.startTime)} - {formatDate(hackathon.endTime)}
-                              </span>
-                            </div>
-                            <div className="flex items-center gap-2 text-amber-700 font-bold bg-amber-50 px-3 py-1 rounded-full border border-amber-200">
+                          {/* Title */}
+                          <h3 className="text-lg font-semibold text-gray-900 group-hover:text-amber-700 transition-colors text-center mb-3 line-clamp-2">
+                            {hackathon.hackathonName}
+                          </h3>
+
+                          {/* Status Badge */}
+                          <div className="flex justify-center mb-4">
+                            <Badge className={`text-xs font-medium px-3 py-1 ${getStatusColor(status)} shadow-sm`}>
+                              🔥 {status === 'accepting-submissions' ? 'ACCEPTING SUBMISSIONS' : 
+                                   status === 'judging-submissions' ? 'JUDGING SUBMISSIONS' :
+                                   status === 'upcoming' ? 'UPCOMING' : 'CONCLUDED'}
+                            </Badge>
+                          </div>
+
+                          {/* Date */}
+                          <div className="flex items-center justify-center gap-2 text-gray-600 mb-3">
+                            <Calendar className="w-4 h-4" />
+                            <span className="text-xs font-medium text-center">
+                              {formatDate(hackathon.startTime)}
+                            </span>
+                          </div>
+                          <div className="flex items-center justify-center gap-2 text-gray-600 mb-4">
+                            <span className="text-xs font-medium text-center">
+                              to {formatDate(hackathon.endTime)}
+                            </span>
+                          </div>
+
+                          {/* Prize - Push to bottom */}
+                          <div className="mt-auto">
+                            <div className="flex items-center justify-center gap-2 text-amber-700 font-bold bg-amber-50 px-3 py-2 rounded-full border border-amber-200">
                               <DollarSign className="w-4 h-4" />
-                              <span>{formatPrizeAmount(hackathon)}</span>
+                              <span className="text-sm">{formatPrizeAmount(hackathon)}</span>
                             </div>
                           </div>
                         </div>
@@ -446,14 +455,14 @@ export default function ExplorerPage() {
         )}
 
         {/* Other Hackathons */}
-        {sortedHackathons.filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) !== 'active').length > 0 && (
+        {sortedHackathons.filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) !== 'accepting-submissions').length > 0 && (
           <div className="space-y-4">
             <h2 className="text-2xl font-bold text-gray-700 border-b border-gray-200 pb-2">
               Upcoming & Past Hackathons
             </h2>
-            <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
               {sortedHackathons
-                .filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) !== 'active')
+                .filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) !== 'accepting-submissions')
                 .map((hackathon) => {
                   const status = getHackathonStatus(hackathon.startTime, hackathon.endTime, hackathon.concluded)
                   return (
@@ -462,57 +471,66 @@ export default function ExplorerPage() {
                       href={`/h?hackAddr=${hackathon.contractAddress}&chainId=${chainId}`}
                       className="block"
                     >
-                      <div className="w-full bg-white border border-amber-100 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group relative">
+                      <div className="bg-white border border-amber-100 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group relative h-full">
                         {/* Gradient background overlay based on status */}
                         <div className={`absolute inset-0 transition-all duration-300 ${
                           status === 'upcoming' 
-                            ? 'bg-gradient-to-r from-blue-50/60 via-indigo-50/30 to-blue-50/60 group-hover:from-blue-100/60 group-hover:via-indigo-100/30 group-hover:to-blue-100/60'
-                            : status === 'ended'
-                            ? 'bg-gradient-to-r from-orange-50/60 via-amber-50/30 to-orange-50/60 group-hover:from-orange-100/60 group-hover:via-amber-100/30 group-hover:to-orange-100/60'
-                            : 'bg-gradient-to-r from-gray-50/60 via-slate-50/30 to-gray-50/60 group-hover:from-gray-100/60 group-hover:via-slate-100/30 group-hover:to-gray-100/60'
+                            ? 'bg-gradient-to-b from-blue-50/60 via-indigo-50/30 to-blue-50/60 group-hover:from-blue-100/60 group-hover:via-indigo-100/30 group-hover:to-blue-100/60'
+                            : status === 'judging-submissions'
+                            ? 'bg-gradient-to-b from-orange-50/60 via-amber-50/30 to-orange-50/60 group-hover:from-orange-100/60 group-hover:via-amber-100/30 group-hover:to-orange-100/60'
+                            : 'bg-gradient-to-b from-gray-50/60 via-slate-50/30 to-gray-50/60 group-hover:from-gray-100/60 group-hover:via-slate-100/30 group-hover:to-gray-100/60'
                         }`}></div>
                         
-                        <div className="relative z-10 flex items-center justify-between p-6 min-h-[140px]">
-                          {/* Left section - Name and Status */}
-                          <div className="flex items-center gap-4 flex-1">
-                            <div className="space-y-2">
-                              <h3 className="text-lg font-semibold text-gray-900 group-hover:text-amber-700 transition-colors">
-                                {hackathon.hackathonName}
-                              </h3>
-                              <Badge className={`text-xs font-medium px-3 py-1 ${getStatusColor(status)} shadow-sm`}>
-                                {status === 'upcoming' && '⏰'} 
-                                {status === 'ended' && '⏹️'} 
-                                {status === 'concluded' && '✅'} 
-                                {status.toUpperCase()}
-                              </Badge>
-                            </div>
-                          </div>
-
-                          {/* Center section - Block Image */}
-                          <div className="flex-shrink-0 mx-8 relative h-full flex items-center">
-                            <div className="h-32 w-32 relative group-hover:scale-105 transition-transform duration-300">
+                        <div className="relative z-10 p-6 flex flex-col h-full">
+                          {/* Top section - Image */}
+                          <div className="flex justify-center mb-4">
+                            <div className="h-20 w-20 relative group-hover:scale-105 transition-transform duration-300">
                               <Image
                                 src={getImagePath("/block.png")}
                                 alt="Blockchain Block"
-                                width={128}
-                                height={128}
+                                width={80}
+                                height={80}
                                 className="h-full w-full object-contain"
                                 priority
                               />
                             </div>
                           </div>
 
-                          {/* Right section - Date and Prize */}
-                          <div className="flex flex-col items-end gap-2 flex-1">
-                            <div className="flex items-center gap-2 text-gray-600">
-                              <Calendar className="w-4 h-4" />
-                              <span className="text-sm font-medium">
-                                {formatDate(hackathon.startTime)} - {formatDate(hackathon.endTime)}
-                              </span>
-                            </div>
-                            <div className="flex items-center gap-2 text-amber-700 font-bold bg-amber-50 px-3 py-1 rounded-full border border-amber-200">
+                          {/* Title */}
+                          <h3 className="text-lg font-semibold text-gray-900 group-hover:text-amber-700 transition-colors text-center mb-3 line-clamp-2">
+                            {hackathon.hackathonName}
+                          </h3>
+
+                          {/* Status Badge */}
+                          <div className="flex justify-center mb-4">
+                            <Badge className={`text-xs font-medium px-3 py-1 ${getStatusColor(status)} shadow-sm`}>
+                              {status === 'upcoming' && '⏰'} 
+                              {status === 'judging-submissions' && '⚖️'} 
+                              {status === 'concluded' && '✅'} 
+                              {status === 'accepting-submissions' ? 'ACCEPTING SUBMISSIONS' : 
+                               status === 'judging-submissions' ? 'JUDGING SUBMISSIONS' :
+                               status === 'upcoming' ? 'UPCOMING' : 'CONCLUDED'}
+                            </Badge>
+                          </div>
+
+                          {/* Date */}
+                          <div className="flex items-center justify-center gap-2 text-gray-600 mb-3">
+                            <Calendar className="w-4 h-4" />
+                            <span className="text-xs font-medium text-center">
+                              {formatDate(hackathon.startTime)}
+                            </span>
+                          </div>
+                          <div className="flex items-center justify-center gap-2 text-gray-600 mb-4">
+                            <span className="text-xs font-medium text-center">
+                              to {formatDate(hackathon.endTime)}
+                            </span>
+                          </div>
+
+                          {/* Prize - Push to bottom */}
+                          <div className="mt-auto">
+                            <div className="flex items-center justify-center gap-2 text-amber-700 font-bold bg-amber-50 px-3 py-2 rounded-full border border-amber-200">
                               <DollarSign className="w-4 h-4" />
-                              <span>{formatPrizeAmount(hackathon)}</span>
+                              <span className="text-sm">{formatPrizeAmount(hackathon)}</span>
                             </div>
                           </div>
                         </div>
diff --git a/app/myHackathons/page.tsx b/app/myHackathons/page.tsx
index 31a55e1..502604a 100644
--- a/app/myHackathons/page.tsx
+++ b/app/myHackathons/page.tsx
@@ -514,9 +514,9 @@ export default function MyHackathonsPage() {
               <div className="flex items-center gap-2">
                 <Calendar className="w-4 h-4 text-blue-500" />
                 <span className="text-sm text-gray-600">
-                  {status === 'active' ? `${getDaysRemaining(hackathon.endTime)} days left` : 
+                  {status === 'accepting-submissions' ? `${getDaysRemaining(hackathon.endTime)} days left` : 
                    status === 'upcoming' ? 'Not started' : 
-                   status === 'ended' ? 'Ended' : 'Concluded'}
+                   status === 'judging-submissions' ? 'Judging Submissions' : 'Concluded'}
                 </span>
               </div>
               
@@ -610,14 +610,14 @@ export default function MyHackathonsPage() {
               <div className="flex items-center gap-2">
                 <Calendar className="w-4 h-4 text-blue-500" />
                 <span className="text-sm text-gray-600">
-                  {status === 'active' ? `${getDaysRemaining(hackathon.endTime)} days left to submit` : 
+                  {status === 'accepting-submissions' ? `${getDaysRemaining(hackathon.endTime)} days left to submit` : 
                    status === 'upcoming' ? 'Not started' : 
-                   status === 'ended' ? 'Voting period - submissions closed' : 'Concluded'}
+                   status === 'judging-submissions' ? 'Voting period - submissions closed' : 'Concluded'}
                 </span>
               </div>
               
               <div className="flex gap-2">
-                {status === 'ended' && userJudge.tokensRemaining > 0 && (
+                {status === 'judging-submissions' && userJudge.tokensRemaining > 0 && (
                   <Link href={`/h/judge?hackAddr=${hackathon.contractAddress}&chainId=${chainId}`}>
                     <Button size="sm" className="bg-[#FAE5C3] text-[#8B6914] hover:bg-[#8B6914] hover:text-white">
                       Vote on Projects
@@ -689,14 +689,14 @@ export default function MyHackathonsPage() {
               <div className="flex items-center gap-2">
                 <Calendar className="w-4 h-4 text-blue-500" />
                 <span className="text-sm text-gray-600">
-                  {status === 'active' ? `${getDaysRemaining(hackathon.endTime)} days left` : 
+                  {status === 'accepting-submissions' ? `${getDaysRemaining(hackathon.endTime)} days left` : 
                    status === 'upcoming' ? 'Not started' : 
-                   status === 'ended' ? 'Ended' : 'Concluded'}
+                   status === 'judging-submissions' ? 'Judging Submissions' : 'Concluded'}
                 </span>
               </div>
               
               <div className="flex gap-2">
-                {(status === 'ended' || status === 'active') && (
+                {(status === 'judging-submissions' || status === 'accepting-submissions') && (
                   <Link href={`/manage?hackAddr=${hackathon.contractAddress}&chainId=${chainId}`}>
                     <Button size="sm" className="bg-[#FAE5C3] text-[#8B6914] hover:bg-[#8B6914] hover:text-white">
                       Manage
@@ -855,10 +855,13 @@ export default function MyHackathonsPage() {
             {activeTab === "judging" && "You haven't been assigned as a judge yet. Stay tuned for opportunities!"}
             {activeTab === "organizing" && "You haven't organized any hackathons yet. Create your first event!"}
           </p>
-          <Button className="bg-[#FAE5C3] text-[#8B6914] hover:bg-[#8B6914] hover:text-white">
-            {activeTab === "participating" ? "Explore Hackathons" : 
-             activeTab === "judging" ? "Browse Opportunities" : "Create Hackathon"}
-          </Button>
+          <Link href={activeTab === "participating" ? "/explorer" : 
+                     activeTab === "judging" ? "/explorer" : "/createHackathon"}>
+            <Button className="bg-[#FAE5C3] text-[#8B6914] hover:bg-[#8B6914] hover:text-white">
+              {activeTab === "participating" ? "Explore Hackathons" : 
+               activeTab === "judging" ? "Browse Opportunities" : "Create Hackathon"}
+            </Button>
+          </Link>
         </div>
       )}
     </div>
diff --git a/app/organizer/[address]/OrganizerClient.tsx b/app/organizer/[address]/OrganizerClient.tsx
index 0745cb3..39f1841 100644
--- a/app/organizer/[address]/OrganizerClient.tsx
+++ b/app/organizer/[address]/OrganizerClient.tsx
@@ -442,11 +442,11 @@ export default function OrganizerClient({ address }: OrganizerClientProps) {
                           <div className="w-full bg-white border border-amber-100 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group relative">
                             {/* Gradient background overlay based on status */}
                             <div className={`absolute inset-0 transition-all duration-300 ${
-                              status === 'active' 
+                              status === 'accepting-submissions' 
                                 ? 'bg-gradient-to-r from-amber-50/60 via-orange-50/30 to-amber-50/60 group-hover:from-amber-100/60 group-hover:via-orange-100/30 group-hover:to-amber-100/60'
                                 : status === 'upcoming' 
                                 ? 'bg-gradient-to-r from-blue-50/60 via-indigo-50/30 to-blue-50/60 group-hover:from-blue-100/60 group-hover:via-indigo-100/30 group-hover:to-blue-100/60'
-                                : status === 'ended'
+                                : status === 'judging-submissions'
                                 ? 'bg-gradient-to-r from-orange-50/60 via-amber-50/30 to-orange-50/60 group-hover:from-orange-100/60 group-hover:via-amber-100/30 group-hover:to-orange-100/60'
                                 : 'bg-gradient-to-r from-gray-50/60 via-slate-50/30 to-gray-50/60 group-hover:from-gray-100/60 group-hover:via-slate-100/30 group-hover:to-gray-100/60'
                             }`}></div>
@@ -522,7 +522,7 @@ export default function OrganizerClient({ address }: OrganizerClientProps) {
                             <div className={`absolute inset-0 transition-all duration-300 ${
                               status === 'upcoming' 
                                 ? 'bg-gradient-to-r from-blue-50/60 via-indigo-50/30 to-blue-50/60 group-hover:from-blue-100/60 group-hover:via-indigo-100/30 group-hover:to-blue-100/60'
-                                : status === 'ended'
+                                : status === 'judging-submissions'
                                 ? 'bg-gradient-to-r from-orange-50/60 via-amber-50/30 to-orange-50/60 group-hover:from-orange-100/60 group-hover:via-amber-100/30 group-hover:to-orange-100/60'
                                 : 'bg-gradient-to-r from-gray-50/60 via-slate-50/30 to-gray-50/60 group-hover:from-gray-100/60 group-hover:via-slate-100/30 group-hover:to-gray-100/60'
                             }`}></div>
@@ -536,7 +536,7 @@ export default function OrganizerClient({ address }: OrganizerClientProps) {
                                   </h3>
                                   <Badge className={`text-xs font-medium px-3 py-1 ${getStatusColor(status)} shadow-sm`}>
                                     {status === 'upcoming' && '⏰'} 
-                                    {status === 'ended' && '⏹️'} 
+                                    {status === 'judging-submissions' && '⏹️'} 
                                     {status === 'concluded' && '✅'} 
                                     {status.toUpperCase()}
                                   </Badge>
diff --git a/components/hackathon-card.tsx b/components/hackathon-card.tsx
index 34221b8..70b7efb 100644
--- a/components/hackathon-card.tsx
+++ b/components/hackathon-card.tsx
@@ -23,10 +23,10 @@ export default function HackathonCard({ hackathon, showJoinButton = true }: Hack
     switch (status) {
       case 'upcoming':
         return <Badge className="bg-blue-500 hover:bg-blue-600 text-white shadow-sm">Upcoming</Badge>
-      case 'active':
-        return <Badge className="bg-green-500 hover:bg-green-600 text-white shadow-sm">{daysRemaining} days left</Badge>
-      case 'ended':
-        return <Badge className="bg-orange-500 hover:bg-orange-600 text-white shadow-sm">Ended</Badge>
+      case 'accepting-submissions':
+        return <Badge className="bg-green-500 hover:bg-green-600 text-white shadow-sm">Accepting Submissions</Badge>
+      case 'judging-submissions':
+        return <Badge className="bg-orange-500 hover:bg-orange-600 text-white shadow-sm">Judging Submissions</Badge>
       case 'concluded':
         return <Badge className="bg-slate-500 hover:bg-slate-600 text-white shadow-sm">Concluded</Badge>
       default:
diff --git a/hooks/useHackathons.ts b/hooks/useHackathons.ts
index addb1ba..dfd8120 100644
--- a/hooks/useHackathons.ts
+++ b/hooks/useHackathons.ts
@@ -55,10 +55,10 @@ export const getDaysRemaining = (endTime: number): number => {
   return Math.floor(getTimeRemaining(endTime) / 86400)
 }
 
-export const getHackathonStatus = (startTime: number, endTime: number, concluded: boolean): 'upcoming' | 'active' | 'ended' | 'concluded' => {
+export const getHackathonStatus = (startTime: number, endTime: number, concluded: boolean): 'upcoming' | 'accepting-submissions' | 'judging-submissions' | 'concluded' => {
   if (concluded) return 'concluded'
   const now = getCurrentUTCTimestamp()
   if (now < startTime) return 'upcoming'
-  if (now > endTime) return 'ended'
-  return 'active'
+  if (now > endTime) return 'judging-submissions'
+  return 'accepting-submissions'
 } 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 66687d3..914deb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "lucide-react": "^0.454.0",
         "next": "15.2.4",
         "next-themes": "^0.4.4",
+        "pino-pretty": "^13.1.1",
         "react": "^18.3.1",
         "react-day-picker": "8.10.1",
         "react-dom": "^18.3.1",
@@ -6008,6 +6009,12 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "license": "MIT"
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -6236,6 +6243,15 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/dateformat": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
+      "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
@@ -6751,6 +6767,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/fast-copy": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-3.0.2.tgz",
+      "integrity": "sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7059,6 +7081,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/help-me": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz",
+      "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==",
+      "license": "MIT"
+    },
     "node_modules/idb-keyval": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
@@ -7310,6 +7338,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/joycon": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
+      "integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7495,6 +7532,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -7961,6 +8007,57 @@
         "split2": "^4.0.0"
       }
     },
+    "node_modules/pino-pretty": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/pino-pretty/-/pino-pretty-13.1.1.tgz",
+      "integrity": "sha512-TNNEOg0eA0u+/WuqH0MH0Xui7uqVk9D74ESOpjtebSQYbNWJk/dIxCXIxFsNfeN53JmtWqYHP2OrIZjT/CBEnA==",
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "^2.0.7",
+        "dateformat": "^4.6.3",
+        "fast-copy": "^3.0.2",
+        "fast-safe-stringify": "^2.1.1",
+        "help-me": "^5.0.0",
+        "joycon": "^3.1.1",
+        "minimist": "^1.2.6",
+        "on-exit-leak-free": "^2.1.0",
+        "pino-abstract-transport": "^2.0.0",
+        "pump": "^3.0.0",
+        "secure-json-parse": "^4.0.0",
+        "sonic-boom": "^4.0.1",
+        "strip-json-comments": "^5.0.2"
+      },
+      "bin": {
+        "pino-pretty": "bin.js"
+      }
+    },
+    "node_modules/pino-pretty/node_modules/on-exit-leak-free": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",
+      "integrity": "sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/pino-pretty/node_modules/pino-abstract-transport": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-2.0.0.tgz",
+      "integrity": "sha512-F63x5tizV6WCh4R6RHyi2Ml+M70DNRXt/+HANowMflpgGFMAym/VKm6G7ZOQRjqN7XbGxK1Lg9t6ZrtzOaivMw==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.0.0"
+      }
+    },
+    "node_modules/pino-pretty/node_modules/sonic-boom": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.0.tgz",
+      "integrity": "sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==",
+      "license": "MIT",
+      "dependencies": {
+        "atomic-sleep": "^1.0.0"
+      }
+    },
     "node_modules/pino-std-serializers": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-4.0.0.tgz",
@@ -8566,6 +8663,22 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/secure-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-4.0.0.tgz",
+      "integrity": "sha512-dxtLJO6sc35jWidmLxo7ij+Eg48PM/kleBsxpC8QJE0qJICe+KawkDQmvCMZUr9u7WKVHgMW6vy3fQ7zMiFZMA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -8911,6 +9024,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.3.tgz",
+      "integrity": "sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
diff --git a/package.json b/package.json
index df24732..11ff178 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "lucide-react": "^0.454.0",
     "next": "15.2.4",
     "next-themes": "^0.4.4",
+    "pino-pretty": "^13.1.1",
     "react": "^18.3.1",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",