From 74b1a337bc7cee8981e092a58b3db82ea913d632 Mon Sep 17 00:00:00 2001
From: aamoghS <aamoghsawantt@gmail.com>
Date: Thu, 5 Feb 2026 07:53:27 -0500
Subject: [PATCH] ui resuability

---
 sites/mainweb/app/(portal)/admin/page.tsx     | 237 ++----------------
 sites/mainweb/app/(portal)/club/page.tsx      | 161 ++----------
 sites/mainweb/app/(portal)/dashboard/page.tsx |   7 +-
 sites/mainweb/app/(portal)/judge/page.tsx     | 184 +++-----------
 .../components/portal/EventFormModal.tsx      | 140 +++++++++++
 .../components/portal/LoadingScreen.tsx       |  15 ++
 .../components/portal/ModalWrapper.tsx        |  37 +++
 .../mainweb/components/portal/ProgressBar.tsx |  19 ++
 .../mainweb/components/portal/QRCodeModal.tsx | 122 +++++++++
 .../components/portal/QRScannerModal.tsx      |  96 +++++++
 .../components/portal/ScanResultModal.tsx     |  90 +++++++
 .../components/portal/StatusScreen.tsx        |  99 ++++++++
 .../portal/dashboard/FeatureCard.tsx          | 151 +++++++++++
 .../components/portal/dashboard/Sidebar.tsx   | 104 ++++++++
 .../components/portal/judge/RubricSlider.tsx  | 108 ++++++++
 15 files changed, 1071 insertions(+), 499 deletions(-)
 create mode 100644 sites/mainweb/components/portal/EventFormModal.tsx
 create mode 100644 sites/mainweb/components/portal/LoadingScreen.tsx
 create mode 100644 sites/mainweb/components/portal/ModalWrapper.tsx
 create mode 100644 sites/mainweb/components/portal/ProgressBar.tsx
 create mode 100644 sites/mainweb/components/portal/QRCodeModal.tsx
 create mode 100644 sites/mainweb/components/portal/QRScannerModal.tsx
 create mode 100644 sites/mainweb/components/portal/ScanResultModal.tsx
 create mode 100644 sites/mainweb/components/portal/StatusScreen.tsx
 create mode 100644 sites/mainweb/components/portal/dashboard/FeatureCard.tsx
 create mode 100644 sites/mainweb/components/portal/dashboard/Sidebar.tsx
 create mode 100644 sites/mainweb/components/portal/judge/RubricSlider.tsx

diff --git a/sites/mainweb/app/(portal)/admin/page.tsx b/sites/mainweb/app/(portal)/admin/page.tsx
index 62699d1..5e47bfd 100644
--- a/sites/mainweb/app/(portal)/admin/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useSession, signOut } from 'next-auth/react';
+import { useSession } from 'next-auth/react';
 import { trpc } from '@/lib/trpc';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -8,6 +8,8 @@ import Background from '@/components/portal/Background';
 import QRCode from 'qrcode';
 import Link from 'next/link';
 import { LiquidGlass } from '@/components/portal/LiquidGlass';
+import { QRCodeModal } from '@/components/portal/QRCodeModal';
+import { EventFormModal } from '@/components/portal/EventFormModal';
 
 type AdminView = 'events' | 'members' | 'admins';
 
@@ -34,14 +36,7 @@ export default function AdminPage() {
   const [qrCodeDataURL, setQrCodeDataURL] = useState<string>('');
   const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
 
-  // Event form state
-  const [eventForm, setEventForm] = useState({
-    title: '',
-    description: '',
-    location: '',
-    eventDate: '',
-    maxCheckIns: '',
-  });
+
 
   // Queries
   const { data: adminStatus, isLoading: adminLoading } = trpc.admin.isAdmin.useQuery(undefined, {
@@ -55,13 +50,6 @@ export default function AdminPage() {
   const createEventMutation = trpc.events.create.useMutation({
     onSuccess: (newEvent) => {
       if (newEvent) {
-        setEventForm({
-          title: '',
-          description: '',
-          location: '',
-          eventDate: '',
-          maxCheckIns: '',
-        });
         setShowCreateEvent(false);
         generateQRCode(newEvent.qrCode);
         setSelectedEvent(newEvent as unknown as Event);
@@ -69,6 +57,7 @@ export default function AdminPage() {
     },
   });
 
+
   const toggleCheckInMutation = trpc.events.toggleCheckIn.useMutation({
     onSuccess: () => {
       utils.events.listAll.invalidate();
@@ -104,10 +93,10 @@ export default function AdminPage() {
     try {
       const url = await QRCode.toDataURL(qrCode, {
         width: 400,
-        margin: 2,
+        margin: 3,
         color: {
-          dark: '#00A8A8',
-          light: '#0a0a0a',
+          dark: '#000000',
+          light: '#ffffff',
         },
       });
       setQrCodeDataURL(url);
@@ -117,13 +106,13 @@ export default function AdminPage() {
     }
   };
 
-  const handleCreateEvent = () => {
+  const handleCreateEvent = (formData: { title: string; description: string; location: string; eventDate: string }) => {
     createEventMutation.mutate({
-      title: eventForm.title,
-      description: eventForm.description || undefined,
-      location: eventForm.location || undefined,
-      eventDate: new Date(eventForm.eventDate),
-      maxCheckIns: eventForm.maxCheckIns ? parseInt(eventForm.maxCheckIns) : undefined,
+      title: formData.title,
+      description: formData.description || undefined,
+      location: formData.location || undefined,
+      eventDate: new Date(formData.eventDate),
+      maxCheckIns: undefined, // Always unlimited
     });
   };
 
@@ -150,195 +139,23 @@ export default function AdminPage() {
 
       {/* CREATE EVENT MODAL */}
       {showCreateEvent && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
-          <div
-            className="absolute inset-0 bg-black/95 backdrop-blur-md"
-            onClick={() => setShowCreateEvent(false)}
-          />
-          <div className="relative w-full max-w-2xl bg-[#0A0A0A] border border-[#00A8A8]/30 rounded-2xl p-8 shadow-[0_0_50px_rgba(0,168,168,0.2)] animate-in zoom-in-95 duration-300 max-h-[90vh] overflow-y-auto">
-            <div className="flex justify-between items-center mb-8 pb-4 border-b border-white/5">
-              <div>
-                <h3 className="text-3xl font-black text-white italic uppercase tracking-tighter">
-                  Create Event
-                </h3>
-                <p className="text-xs font-mono text-[#00A8A8] uppercase tracking-widest">
-                  Configure QR Protocols
-                </p>
-              </div>
-              <button
-                onClick={() => setShowCreateEvent(false)}
-                className="text-gray-500 hover:text-white transition-colors text-sm uppercase tracking-widest font-mono p-2 hover:bg-white/5 rounded"
-              >
-                [ Close Panel ]
-              </button>
-            </div>
-
-            <div className="space-y-6">
-              <div className="space-y-2">
-                <label className="text-sm text-gray-500 uppercase tracking-widest font-mono block font-bold mb-2">
-                  Event Title Identifier
-                </label>
-                <input
-                  type="text"
-                  value={eventForm.title}
-                  onChange={(e) => setEventForm({ ...eventForm, title: e.target.value })}
-                  className="w-full bg-black/40 border border-white/10 rounded-xl px-6 py-4 text-white text-base focus:border-[#00A8A8] focus:outline-none transition-all font-mono"
-                  placeholder="e.g., Weekly_Workshop_01"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <label className="text-xs text-gray-500 uppercase tracking-widest font-mono block">
-                  Data Description
-                </label>
-                <textarea
-                  value={eventForm.description}
-                  onChange={(e) => setEventForm({ ...eventForm, description: e.target.value })}
-                  className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white text-sm focus:border-[#00A8A8] focus:outline-none transition-all resize-none font-mono"
-                  rows={3}
-                  placeholder="System details..."
-                />
-              </div>
-
-              <div className="grid grid-cols-2 gap-6">
-                <div className="space-y-2">
-                  <label className="text-xs text-gray-500 uppercase tracking-widest font-mono block">
-                    Location Node
-                  </label>
-                  <input
-                    type="text"
-                    value={eventForm.location}
-                    onChange={(e) => setEventForm({ ...eventForm, location: e.target.value })}
-                    className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white text-sm focus:border-[#00A8A8] focus:outline-none transition-all font-mono"
-                    placeholder="e.g., Klaus_2443"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <label className="text-xs text-gray-500 uppercase tracking-widest font-mono block">
-                    Temporal Stamp
-                  </label>
-                  <input
-                    type="datetime-local"
-                    value={eventForm.eventDate}
-                    onChange={(e) => setEventForm({ ...eventForm, eventDate: e.target.value })}
-                    className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white text-sm focus:border-[#00A8A8] focus:outline-none transition-all font-mono"
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <label className="text-xs text-gray-500 uppercase tracking-widest font-mono block">
-                  Check-In Limit
-                </label>
-                <input
-                  type="number"
-                  value={eventForm.maxCheckIns}
-                  onChange={(e) => setEventForm({ ...eventForm, maxCheckIns: e.target.value })}
-                  className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white text-sm focus:border-[#00A8A8] focus:outline-none transition-all font-mono"
-                  placeholder="Unrestricted"
-                />
-              </div>
-
-              <button
-                onClick={handleCreateEvent}
-                disabled={!eventForm.title || !eventForm.eventDate || createEventMutation.isPending}
-                className="w-full px-8 py-5 bg-[#00A8A8] text-black font-black text-base uppercase tracking-[0.2em] hover:bg-[#00A8A8]/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_30px_rgba(0,168,168,0.3)] mt-6 rounded-xl"
-              >
-                {createEventMutation.isPending ? 'Processing...' : 'INITIALIZE EVENT'}
-              </button>
-            </div>
-          </div>
-        </div>
+        <EventFormModal
+          onClose={() => setShowCreateEvent(false)}
+          onSubmit={handleCreateEvent}
+          isSubmitting={createEventMutation.isPending}
+        />
       )}
 
       {/* QR CODE MODAL */}
       {showQRCode && selectedEvent && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
-          <div
-            className="absolute inset-0 bg-black/95 backdrop-blur-md"
-            onClick={() => setShowQRCode(null)}
-          />
-          <div className="relative w-full max-w-md bg-[#0A0A0A] border border-[#00A8A8]/30 rounded-2xl p-8 shadow-[0_0_50px_rgba(0,168,168,0.2)] animate-in zoom-in-95 duration-300">
-            <div className="flex justify-between items-center mb-8 pb-4 border-b border-white/5">
-              <div>
-                <h3 className="text-2xl font-black text-white italic uppercase tracking-tighter">
-                  QR Protocols
-                </h3>
-                <p className="text-xs font-mono text-[#00A8A8] uppercase tracking-widest">
-                  {selectedEvent.title}
-                </p>
-              </div>
-              <button
-                onClick={() => setShowQRCode(null)}
-                className="text-gray-500 hover:text-white transition-colors text-xs uppercase tracking-widest font-mono p-2 hover:bg-white/5 rounded"
-              >
-                [ Close ]
-              </button>
-            </div>
-
-            <div className="space-y-8">
-              <div className="bg-white p-6 rounded-xl shadow-[inset_0_0_20px_rgba(0,0,0,0.1)]">
-                {qrCodeDataURL && (
-                  <img
-                    src={qrCodeDataURL}
-                    alt="Event QR Code"
-                    className="w-full h-auto"
-                  />
-                )}
-              </div>
-
-              <div className="bg-black/40 border border-white/5 rounded-xl p-6 space-y-3">
-                <div className="flex justify-between text-xs font-mono">
-                  <span className="text-gray-600 uppercase">IDENT:</span>
-                  <span className="text-white">{selectedEvent.title}</span>
-                </div>
-                <div className="flex justify-between text-xs font-mono">
-                  <span className="text-gray-600 uppercase">SYNC COUNT:</span>
-                  <span className="text-white">
-                    {selectedEvent.currentCheckIns} {selectedEvent.maxCheckIns ? `/ ${selectedEvent.maxCheckIns}` : ''}
-                  </span>
-                </div>
-                <div className="flex justify-between text-xs font-mono">
-                  <span className="text-gray-600 uppercase">STATUS:</span>
-                  <span className={selectedEvent.checkInEnabled ? 'text-green-500 shadow-[0_0_10px_rgba(34,197,94,0.3)]' : 'text-red-500'}>
-                    {selectedEvent.checkInEnabled ? 'LINK ACTIVE' : 'LINK TERMINATED'}
-                  </span>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <button
-                  onClick={downloadQRCode}
-                  className="px-6 py-3 bg-white/5 border border-white/10 text-white font-bold text-xs uppercase tracking-widest hover:bg-white/10 transition-all rounded font-mono"
-                >
-                  SAVE IMG
-                </button>
-                <button
-                  onClick={() => {
-                    navigator.clipboard.writeText(selectedEvent.qrCode);
-                    alert('Access Code copied to buffer.');
-                  }}
-                  className="px-6 py-3 bg-white/5 border border-white/10 text-white font-bold text-xs uppercase tracking-widest hover:bg-white/10 transition-all rounded font-mono"
-                >
-                  COPY VAL
-                </button>
-              </div>
-
-              <button
-                onClick={() => {
-                  if (confirm('Regenerate protocols? Current QR will be deprecated.')) {
-                    regenerateQRMutation.mutate({ eventId: selectedEvent.id });
-                  }
-                }}
-                disabled={regenerateQRMutation.isPending}
-                className="w-full px-6 py-3 bg-red-500/5 border border-red-500/20 text-red-500/80 font-bold text-xs uppercase tracking-widest hover:bg-red-500/10 transition-all disabled:opacity-50 rounded font-mono"
-              >
-                {regenerateQRMutation.isPending ? 'RENEWING...' : 'REBOOT QR SYSTEM'}
-              </button>
-            </div>
-          </div>
-        </div>
+        <QRCodeModal
+          event={selectedEvent}
+          qrCodeDataURL={qrCodeDataURL}
+          onClose={() => setShowQRCode(null)}
+          onDownload={downloadQRCode}
+          onRegenerate={() => regenerateQRMutation.mutate({ eventId: selectedEvent.id })}
+          isRegenerating={regenerateQRMutation.isPending}
+        />
       )}
 
       {/* MAIN CONTENT */}
diff --git a/sites/mainweb/app/(portal)/club/page.tsx b/sites/mainweb/app/(portal)/club/page.tsx
index 657fb51..3a9ed1b 100644
--- a/sites/mainweb/app/(portal)/club/page.tsx
+++ b/sites/mainweb/app/(portal)/club/page.tsx
@@ -5,9 +5,10 @@ import { trpc } from '@/lib/trpc';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import Background from '@/components/portal/Background';
-import { Scanner } from '@yudiel/react-qr-scanner';
-
 import { LiquidGlass } from '@/components/portal/LiquidGlass';
+import { LoadingScreen } from '@/components/portal/LoadingScreen';
+import { QRScannerModal } from '@/components/portal/QRScannerModal';
+import { ScanResultModal } from '@/components/portal/ScanResultModal';
 
 export default function ClubPage() {
   const { data: session, status } = useSession();
@@ -103,11 +104,7 @@ export default function ClubPage() {
   };
 
   if (status === 'loading' || !memberStatus) {
-    return (
-      <div className="min-h-screen bg-[#050505] flex items-center justify-center font-mono text-[#00A8A8] animate-pulse uppercase tracking-[0.5em]">
-        Verifying Access...
-      </div>
-    );
+    return <LoadingScreen message="Verifying Access..." />;
   }
 
   if (!session || !memberStatus.isMember) return null;
@@ -120,144 +117,26 @@ export default function ClubPage() {
 
       {/* QR SCANNER MODAL */}
       {showScanner && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
-          <div
-            className="absolute inset-0 bg-black/95 backdrop-blur-md"
-            onClick={() => {
-              if (!isProcessing) {
-                setShowScanner(false);
-                setIsPaused(false);
-              }
-            }}
-          />
-          <div className="relative w-full max-w-md bg-[#0a0a0a] border border-[#00A8A8]/30 rounded-2xl p-6 shadow-[0_0_50px_rgba(0,168,168,0.3)] animate-in zoom-in-95 duration-300">
-            <div className="flex justify-between items-center mb-6">
-              <div>
-                <h3 className="text-xl font-black text-white italic uppercase tracking-tighter">QR Scanner</h3>
-                <p className="text-[9px] font-mono text-[#00A8A8] uppercase tracking-widest">Event Check-In System</p>
-              </div>
-              <button
-                onClick={() => {
-                  if (!isProcessing) {
-                    setShowScanner(false);
-                    setIsPaused(false);
-                  }
-                }}
-                disabled={isProcessing}
-                className="text-gray-500 hover:text-white transition-colors text-[10px] uppercase tracking-widest disabled:opacity-50"
-              >
-                [ Close ]
-              </button>
-            </div>
-
-            {/* Camera Feed */}
-            <div className="relative rounded-xl overflow-hidden border-2 border-[#00A8A8]/30">
-              {isProcessing && (
-                <div className="absolute inset-0 bg-black/80 z-10 flex items-center justify-center">
-                  <div className="text-center">
-                    <div className="w-12 h-12 border-4 border-[#00A8A8] border-t-transparent rounded-full animate-spin mx-auto mb-3" />
-                    <p className="text-[10px] text-[#00A8A8] uppercase tracking-widest font-mono">
-                      Verifying...
-                    </p>
-                  </div>
-                </div>
-              )}
-              <Scanner
-                onScan={handleScan}
-                onError={handleError}
-                paused={isPaused || isProcessing}
-                constraints={{
-                  facingMode: 'environment',
-                }}
-                formats={['qr_code']}
-                components={{
-                  torch: true,
-                  finder: true,
-                }}
-                styles={{
-                  container: {
-                    width: '100%',
-                    height: '350px',
-                  },
-                }}
-                scanDelay={500}
-              />
-            </div>
-
-            <div className="mt-4 bg-[#00A8A8]/10 border border-[#00A8A8]/30 rounded-lg p-4">
-              <p className="text-[9px] text-[#00A8A8] uppercase tracking-widest font-bold mb-2">Instructions:</p>
-              <ul className="text-[8px] text-gray-500 space-y-1 font-mono">
-                <li>• Hold phone steady over QR code</li>
-                <li>• Ensure good lighting conditions</li>
-                <li>• Scan happens automatically</li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <QRScannerModal
+          onClose={() => {
+            setShowScanner(false);
+            setIsPaused(false);
+          }}
+          onScan={handleScan}
+          onError={handleError}
+          isProcessing={isProcessing}
+          isPaused={isPaused}
+        />
       )}
 
       {/* SCAN RESULT MODAL */}
       {scanResult && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
-          <div
-            className="absolute inset-0 bg-black/95 backdrop-blur-md"
-            onClick={() => setScanResult(null)}
-          />
-          <div className="relative w-full max-w-md bg-[#0a0a0a] border border-[#00A8A8]/30 rounded-2xl p-8 shadow-[0_0_50px_rgba(0,168,168,0.3)] animate-in zoom-in-95 duration-300">
-            <div className="text-center space-y-8">
-              <div className={`inline-block p-6 rounded-full ${scanResult.success
-                ? 'bg-[#00A8A8]/10 border border-[#00A8A8]/20'
-                : 'bg-red-500/10 border border-red-500/20'
-                }`}>
-                {scanResult.success ? (
-                  <svg className="w-12 h-12 text-[#00A8A8]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  </svg>
-                ) : (
-                  <svg className="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                )}
-              </div>
-
-              <div>
-                <h3 className={`text-3xl font-black uppercase tracking-tighter mb-2 ${scanResult.success ? 'text-white' : 'text-red-400'
-                  }`}>
-                  {scanResult.success ? 'Check-In Success' : 'Check-In Failed'}
-                </h3>
-                <p className="text-[10px] font-mono text-[#00A8A8] uppercase tracking-[0.3em]">
-                  {scanResult.success ? 'Identity Verified' : 'Access Denied'}
-                </p>
-              </div>
-
-              {scanResult.success && scanResult.eventTitle && (
-                <div className="space-y-3">
-                  <div className="bg-white/[0.02] border border-white/5 rounded-xl p-6">
-                    <p className="text-[9px] text-gray-600 uppercase tracking-[0.4em] mb-3 font-mono">Event Payload:</p>
-                    <p className="text-xl text-white font-black uppercase italic tracking-tight">{scanResult.eventTitle}</p>
-                  </div>
-                </div>
-              )}
-
-              {!scanResult.success && (
-                <div className="bg-red-500/5 border border-red-500/20 rounded-xl p-6">
-                  <p className="text-[9px] text-red-500 uppercase tracking-[0.4em] mb-3 font-mono">Error Code:</p>
-                  <p className="text-sm text-red-300 font-mono italic"> &gt; "{scanResult.message}"</p>
-                </div>
-              )}
-
-              <button
-                onClick={() => setScanResult(null)}
-                className={`w-full px-8 py-5 font-black uppercase text-xs tracking-[0.4em] transition-all rounded-lg ${scanResult.success
-                  ? 'bg-[#00A8A8] text-black hover:bg-[#00A8A8]/80 shadow-[0_0_20px_rgba(0,168,168,0.3)]'
-                  : 'bg-red-500/10 border border-red-500/30 text-red-500 hover:bg-red-500/20'
-                  }`}
-              >
-                TERMINATE OVERLAY
-              </button>
-            </div>
-          </div>
-        </div>
+        <ScanResultModal
+          success={scanResult.success}
+          message={scanResult.message}
+          eventTitle={scanResult.eventTitle}
+          onClose={() => setScanResult(null)}
+        />
       )}
 
       {/* MAIN CONTENT */}
diff --git a/sites/mainweb/app/(portal)/dashboard/page.tsx b/sites/mainweb/app/(portal)/dashboard/page.tsx
index 1762717..5bfaf46 100644
--- a/sites/mainweb/app/(portal)/dashboard/page.tsx
+++ b/sites/mainweb/app/(portal)/dashboard/page.tsx
@@ -10,6 +10,7 @@ import Link from 'next/link';
 import LinkStripeAccount from '@/components/portal/LinkStripeAccount';
 import ProfileForm from '@/components/portal/profile/ProfileForm';
 import { LiquidGlass } from '@/components/portal/LiquidGlass';
+import { LoadingScreen } from '@/components/portal/LoadingScreen';
 
 export default function Dashboard() {
   const { data: session, status } = useSession();
@@ -24,11 +25,7 @@ export default function Dashboard() {
     if (status === 'unauthenticated') router.push('/login');
   }, [status, router]);
 
-  if (status === 'loading') return (
-    <div className="min-h-screen bg-[#050505] flex items-center justify-center font-mono text-[#00A8A8] animate-pulse uppercase tracking-[0.5em]">
-      Syncing Identity...
-    </div>
-  );
+  if (status === 'loading') return <LoadingScreen message="Syncing Identity..." />;
 
   if (!session) return null;
 
diff --git a/sites/mainweb/app/(portal)/judge/page.tsx b/sites/mainweb/app/(portal)/judge/page.tsx
index 684722d..c552359 100644
--- a/sites/mainweb/app/(portal)/judge/page.tsx
+++ b/sites/mainweb/app/(portal)/judge/page.tsx
@@ -5,6 +5,10 @@ import { useSession, signOut } from 'next-auth/react';
 import { trpc } from '@/lib/trpc';
 import { useRouter } from 'next/navigation';
 import { LiquidGlass } from '@/components/portal/LiquidGlass';
+import { LoadingScreen } from '@/components/portal/LoadingScreen';
+import { StatusScreen } from '@/components/portal/StatusScreen';
+import { ProgressBar } from '@/components/portal/ProgressBar';
+import { RubricSlider, RubricSliderStyles } from '@/components/portal/judge/RubricSlider';
 
 // Rubric criteria definitions
 const RUBRIC_CRITERIA = [
@@ -114,52 +118,34 @@ export default function JudgePage() {
   };
 
   if (!mounted || status === 'loading' || checkingJudge) {
-    return (
-      <div className="min-h-screen bg-[#050505] flex items-center justify-center font-mono text-[#00A8A8] animate-pulse uppercase tracking-[0.5em]">
-        Syncing Identity...
-      </div>
-    );
+    return <LoadingScreen message="Syncing Identity..." />;
   }
 
   if (!session) return null;
 
   if (!judgeStatus?.isJudge) {
     return (
-      <div className="min-h-screen flex flex-col items-center justify-center px-6 text-center bg-[#050505] selection:bg-[#00A8A8]/30">
-        <div className="w-16 h-16 rounded-full flex items-center justify-center mb-6 bg-red-500/10 border border-red-500/30">
-          <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </div>
-        <h1 className="text-2xl font-black text-white uppercase tracking-tight mb-2">Access Denied</h1>
-        <p className="text-gray-500 font-mono text-sm mb-8">You're not registered as a judge.</p>
-        <button
-          onClick={() => signOut({ callbackUrl: '/login' })}
-          className="px-8 py-3 border border-red-500/20 text-red-500 font-mono text-[10px] uppercase tracking-[0.3em] hover:bg-red-500/10 transition-all"
-        >
-          Terminate Session
-        </button>
-      </div>
+      <StatusScreen
+        variant="denied"
+        title="Access Denied"
+        message="You're not registered as a judge."
+        onAction={() => signOut({ callbackUrl: '/login' })}
+        actionLabel="Terminate Session"
+        actionVariant="danger"
+      />
     );
   }
 
   if (!hackathonId) {
     return (
-      <div className="min-h-screen flex flex-col items-center justify-center px-6 text-center bg-[#050505] selection:bg-[#00A8A8]/30">
-        <div className="w-16 h-16 rounded-full flex items-center justify-center mb-6 bg-yellow-500/10 border border-yellow-500/30">
-          <svg className="w-8 h-8 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-        </div>
-        <h1 className="text-2xl font-black text-white uppercase tracking-tight mb-2">Awaiting Assignment</h1>
-        <p className="text-gray-500 font-mono text-sm mb-8">Please wait for event assignment.</p>
-        <button
-          onClick={() => signOut({ callbackUrl: '/login' })}
-          className="px-8 py-3 border border-white/10 text-gray-400 font-mono text-[10px] uppercase tracking-[0.3em] hover:bg-white/5 transition-all"
-        >
-          Terminate Session
-        </button>
-      </div>
+      <StatusScreen
+        variant="waiting"
+        title="Awaiting Assignment"
+        message="Please wait for event assignment."
+        onAction={() => signOut({ callbackUrl: '/login' })}
+        actionLabel="Terminate Session"
+        actionVariant="default"
+      />
     );
   }
 
@@ -168,33 +154,19 @@ export default function JudgePage() {
 
   if (isDone) {
     return (
-      <div className="min-h-screen flex flex-col items-center justify-center px-6 text-center bg-[#050505] selection:bg-[#00A8A8]/30">
-        <div className="w-20 h-20 rounded-full bg-[#00A8A8]/10 border border-[#00A8A8]/30 flex items-center justify-center mb-8 shadow-[0_0_40px_rgba(0,168,168,0.2)]">
-          <svg className="w-10 h-10 text-[#00A8A8]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-          </svg>
-        </div>
-        <h1 className="text-4xl font-black text-white uppercase tracking-tighter mb-2">
-          Mission<br />
-          <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A8A8] to-[#005a5a] italic">Complete</span>
-        </h1>
-        <p className="text-gray-500 font-mono text-sm mb-10">All projects evaluated. Thank you for judging.</p>
-        <button
-          onClick={() => signOut({ callbackUrl: '/login' })}
-          className="px-12 py-5 bg-white text-black font-black text-[11px] uppercase tracking-[0.2em] rounded-sm hover:bg-[#00A8A8] hover:text-white transition-all active:scale-95 shadow-[0_0_30px_rgba(0,168,168,0.1)]"
-        >
-          Exit Terminal
-        </button>
-      </div>
+      <StatusScreen
+        variant="success"
+        title="Mission Complete"
+        message="All projects evaluated. Thank you for judging."
+        onAction={() => signOut({ callbackUrl: '/login' })}
+        actionLabel="Exit Terminal"
+        actionVariant="primary"
+      />
     );
   }
 
   if (loadingNext || !project) {
-    return (
-      <div className="min-h-screen bg-[#050505] flex items-center justify-center font-mono text-[#00A8A8] animate-pulse uppercase tracking-[0.5em]">
-        Loading Project...
-      </div>
-    );
+    return <LoadingScreen message="Loading Project..." />;
   }
 
   return (
@@ -204,12 +176,7 @@ export default function JudgePage() {
         <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:40px_40px]" />
       </div>
 
-      <div className="h-1 bg-white/5 relative z-10">
-        <div
-          className="h-full bg-gradient-to-r from-[#00A8A8] to-[#005a5a] transition-all duration-500 shadow-[0_0_10px_rgba(0,168,168,0.5)]"
-          style={{ width: `${progress?.percentage || 0}%` }}
-        />
-      </div>
+      <ProgressBar percentage={progress?.percentage || 0} className="relative z-10" />
 
       <main className="flex-1 flex flex-col px-4 py-5 max-w-lg mx-auto w-full relative z-10">
         {/* Table Number Header */}
@@ -247,52 +214,15 @@ export default function JudgePage() {
 
           <div className="space-y-4">
             {RUBRIC_CRITERIA.map((criterion) => (
-              <div key={criterion.key} className="space-y-2">
-                <button
-                  onClick={() => setExpandedCriteria(expandedCriteria === criterion.key ? null : criterion.key)}
-                  className="w-full flex items-center justify-between text-left"
-                >
-                  <span className="text-xs font-semibold text-white">{criterion.label}</span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-lg font-black text-[#00A8A8] min-w-[2rem] text-right">
-                      {scores[criterion.key]}
-                    </span>
-                    <svg
-                      className={`w-4 h-4 text-gray-500 transition-transform ${expandedCriteria === criterion.key ? 'rotate-180' : ''}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                    </svg>
-                  </div>
-                </button>
-
-                {expandedCriteria === criterion.key && (
-                  <p className="text-[10px] text-gray-400 font-mono pl-1 pb-1">{criterion.description}</p>
-                )}
-
-                {/* Slider */}
-                <div className="relative">
-                  <input
-                    type="range"
-                    min="1"
-                    max="10"
-                    value={scores[criterion.key]}
-                    onChange={(e) => updateScore(criterion.key, parseInt(e.target.value))}
-                    className="w-full h-12 appearance-none bg-transparent cursor-pointer touch-pan-y"
-                    style={{
-                      background: `linear-gradient(to right, #00A8A8 0%, #00A8A8 ${(scores[criterion.key] - 1) * 11.11}%, rgba(255,255,255,0.1) ${(scores[criterion.key] - 1) * 11.11}%, rgba(255,255,255,0.1) 100%)`,
-                      borderRadius: '8px',
-                    }}
-                  />
-                  <div className="flex justify-between text-[8px] text-gray-600 font-mono px-1 -mt-1">
-                    <span>1</span>
-                    <span>5</span>
-                    <span>10</span>
-                  </div>
-                </div>
-              </div>
+              <RubricSlider
+                key={criterion.key}
+                label={criterion.label}
+                description={criterion.description}
+                value={scores[criterion.key]}
+                onChange={(value) => updateScore(criterion.key, value)}
+                isExpanded={expandedCriteria === criterion.key}
+                onToggleExpand={() => setExpandedCriteria(expandedCriteria === criterion.key ? null : criterion.key)}
+              />
             ))}
           </div>
         </LiquidGlass>
@@ -322,39 +252,7 @@ export default function JudgePage() {
         </button>
       </main>
 
-      {/* Custom slider styles */}
-      <style jsx global>{`
-        input[type="range"] {
-          -webkit-appearance: none;
-          appearance: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          appearance: none;
-          width: 28px;
-          height: 28px;
-          background: white;
-          border-radius: 50%;
-          cursor: pointer;
-          box-shadow: 0 0 20px rgba(0, 168, 168, 0.5), 0 2px 8px rgba(0,0,0,0.3);
-          border: 3px solid #00A8A8;
-        }
-        input[type="range"]::-moz-range-thumb {
-          width: 28px;
-          height: 28px;
-          background: white;
-          border-radius: 50%;
-          cursor: pointer;
-          box-shadow: 0 0 20px rgba(0, 168, 168, 0.5), 0 2px 8px rgba(0,0,0,0.3);
-          border: 3px solid #00A8A8;
-        }
-        input[type="range"]:active::-webkit-slider-thumb {
-          transform: scale(1.1);
-        }
-        input[type="range"]:active::-moz-range-thumb {
-          transform: scale(1.1);
-        }
-      `}</style>
+      <RubricSliderStyles />
     </div>
   );
 }
diff --git a/sites/mainweb/components/portal/EventFormModal.tsx b/sites/mainweb/components/portal/EventFormModal.tsx
new file mode 100644
index 0000000..f998103
--- /dev/null
+++ b/sites/mainweb/components/portal/EventFormModal.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { ModalWrapper } from './ModalWrapper';
+
+interface EventFormData {
+    title: string;
+    description: string;
+    location: string;
+    eventDate: string;
+}
+
+interface EventFormModalProps {
+    onClose: () => void;
+    onSubmit: (data: EventFormData) => void;
+    isSubmitting?: boolean;
+}
+
+function getCurrentDateTimeLocal(): string {
+    const now = new Date();
+    const offset = now.getTimezoneOffset();
+    const localDate = new Date(now.getTime() - offset * 60 * 1000);
+    return localDate.toISOString().slice(0, 16);
+}
+
+export function EventFormModal({
+    onClose,
+    onSubmit,
+    isSubmitting = false,
+}: EventFormModalProps) {
+    const [form, setForm] = useState<EventFormData>({
+        title: '',
+        description: '',
+        location: '',
+        eventDate: '',
+    });
+
+    // Auto-fill date/time when modal opens
+    useEffect(() => {
+        setForm((prev) => ({
+            ...prev,
+            eventDate: getCurrentDateTimeLocal(),
+        }));
+    }, []);
+
+    const handleSubmit = () => {
+        onSubmit(form);
+    };
+
+    const isValid = form.title.trim() && form.eventDate;
+
+    return (
+        <ModalWrapper onClose={onClose} maxWidth="2xl">
+            {/* Header */}
+            <div className="flex justify-between items-center mb-8 pb-4 border-b border-white/5">
+                <div>
+                    <h3 className="text-3xl font-black text-white italic uppercase tracking-tighter">
+                        Create Event
+                    </h3>
+                    <p className="text-xs font-mono text-[#00A8A8] uppercase tracking-widest">
+                        Configure QR Protocols
+                    </p>
+                </div>
+                <button
+                    onClick={onClose}
+                    className="text-gray-500 hover:text-white transition-colors text-sm uppercase tracking-widest font-mono p-2 hover:bg-white/5 rounded"
+                >
+                    [ Close Panel ]
+                </button>
+            </div>
+
+            <div className="space-y-6">
+                {/* Title */}
+                <div className="space-y-2">
+                    <label className="text-sm text-gray-500 uppercase tracking-widest font-mono block font-bold mb-2">
+                        Event Title Identifier
+                    </label>
+                    <input
+                        type="text"
+                        value={form.title}
+                        onChange={(e) => setForm({ ...form, title: e.target.value })}
+                        className="w-full bg-black/40 border border-white/10 rounded-xl px-6 py-4 text-white text-base focus:border-[#00A8A8] focus:outline-none transition-all font-mono"
+                        placeholder="e.g., Weekly Workshop 01"
+                    />
+                </div>
+
+                {/* Description */}
+                <div className="space-y-2">
+                    <label className="text-xs text-gray-500 uppercase tracking-widest font-mono block">
+                        Data Description
+                    </label>
+                    <textarea
+                        value={form.description}
+                        onChange={(e) => setForm({ ...form, description: e.target.value })}
+                        className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white text-sm focus:border-[#00A8A8] focus:outline-none transition-all resize-none font-mono"
+                        rows={3}
+                        placeholder="System details..."
+                    />
+                </div>
+
+                {/* Location and Date */}
+                <div className="grid grid-cols-2 gap-6">
+                    <div className="space-y-2">
+                        <label className="text-xs text-gray-500 uppercase tracking-widest font-mono block">
+                            Location Node
+                        </label>
+                        <input
+                            type="text"
+                            value={form.location}
+                            onChange={(e) => setForm({ ...form, location: e.target.value })}
+                            className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white text-sm focus:border-[#00A8A8] focus:outline-none transition-all font-mono"
+                            placeholder="e.g., Klaus 2443"
+                        />
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-xs text-gray-500 uppercase tracking-widest font-mono block">
+                            Temporal Stamp
+                        </label>
+                        <input
+                            type="datetime-local"
+                            value={form.eventDate}
+                            onChange={(e) => setForm({ ...form, eventDate: e.target.value })}
+                            className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white text-sm focus:border-[#00A8A8] focus:outline-none transition-all font-mono"
+                        />
+                    </div>
+                </div>
+
+                {/* Submit Button */}
+                <button
+                    onClick={handleSubmit}
+                    disabled={!isValid || isSubmitting}
+                    className="w-full px-8 py-5 bg-[#00A8A8] text-black font-black text-base uppercase tracking-[0.2em] hover:bg-[#00A8A8]/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_30px_rgba(0,168,168,0.3)] mt-6 rounded-xl"
+                >
+                    {isSubmitting ? 'Processing...' : 'INITIALIZE EVENT'}
+                </button>
+            </div>
+        </ModalWrapper>
+    );
+}
diff --git a/sites/mainweb/components/portal/LoadingScreen.tsx b/sites/mainweb/components/portal/LoadingScreen.tsx
new file mode 100644
index 0000000..2a4954a
--- /dev/null
+++ b/sites/mainweb/components/portal/LoadingScreen.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+
+interface LoadingScreenProps {
+    message?: string;
+}
+
+export function LoadingScreen({ message = 'Loading...' }: LoadingScreenProps) {
+    return (
+        <div className="min-h-screen bg-[#050505] flex items-center justify-center font-mono text-[#00A8A8] animate-pulse uppercase tracking-[0.5em]">
+            {message}
+        </div>
+    );
+}
diff --git a/sites/mainweb/components/portal/ModalWrapper.tsx b/sites/mainweb/components/portal/ModalWrapper.tsx
new file mode 100644
index 0000000..ebbe86e
--- /dev/null
+++ b/sites/mainweb/components/portal/ModalWrapper.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+
+interface ModalWrapperProps {
+    children: React.ReactNode;
+    onClose: () => void;
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
+const maxWidthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+};
+
+export function ModalWrapper({
+    children,
+    onClose,
+    maxWidth = 'md',
+}: ModalWrapperProps) {
+    return (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+            <div
+                className="absolute inset-0 bg-black/95 backdrop-blur-md"
+                onClick={onClose}
+            />
+            <div
+                className={`relative w-full ${maxWidthClasses[maxWidth]} bg-[#0A0A0A] border border-[#00A8A8]/30 rounded-2xl p-8 shadow-[0_0_50px_rgba(0,168,168,0.2)] animate-in zoom-in-95 duration-300 max-h-[90vh] overflow-y-auto`}
+            >
+                {children}
+            </div>
+        </div>
+    );
+}
diff --git a/sites/mainweb/components/portal/ProgressBar.tsx b/sites/mainweb/components/portal/ProgressBar.tsx
new file mode 100644
index 0000000..1391653
--- /dev/null
+++ b/sites/mainweb/components/portal/ProgressBar.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import React from 'react';
+
+interface ProgressBarProps {
+    percentage: number;
+    className?: string;
+}
+
+export function ProgressBar({ percentage, className = '' }: ProgressBarProps) {
+    return (
+        <div className={`h-1 bg-white/5 relative ${className}`}>
+            <div
+                className="h-full bg-gradient-to-r from-[#00A8A8] to-[#005a5a] transition-all duration-500 shadow-[0_0_10px_rgba(0,168,168,0.5)]"
+                style={{ width: `${percentage}%` }}
+            />
+        </div>
+    );
+}
diff --git a/sites/mainweb/components/portal/QRCodeModal.tsx b/sites/mainweb/components/portal/QRCodeModal.tsx
new file mode 100644
index 0000000..49bd720
--- /dev/null
+++ b/sites/mainweb/components/portal/QRCodeModal.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import React from 'react';
+import { ModalWrapper } from './ModalWrapper';
+
+interface Event {
+    id: string;
+    title: string;
+    qrCode: string;
+    checkInEnabled: boolean;
+    currentCheckIns: number;
+    maxCheckIns: number | null;
+}
+
+interface QRCodeModalProps {
+    event: Event;
+    qrCodeDataURL: string;
+    onClose: () => void;
+    onDownload: () => void;
+    onRegenerate: () => void;
+    isRegenerating?: boolean;
+}
+
+export function QRCodeModal({
+    event,
+    qrCodeDataURL,
+    onClose,
+    onDownload,
+    onRegenerate,
+    isRegenerating = false,
+}: QRCodeModalProps) {
+    const handleCopyCode = () => {
+        navigator.clipboard.writeText(event.qrCode);
+        alert('Access Code copied to buffer.');
+    };
+
+    const handleRegenerate = () => {
+        if (confirm('Regenerate protocols? Current QR will be deprecated.')) {
+            onRegenerate();
+        }
+    };
+
+    return (
+        <ModalWrapper onClose={onClose} maxWidth="lg">
+            {/* Header */}
+            <div className="flex justify-between items-center mb-8 pb-6 border-b border-white/5">
+                <div>
+                    <h3 className="text-3xl font-black text-white italic uppercase tracking-tighter">
+                        QR Protocols
+                    </h3>
+                    <p className="text-sm font-mono text-[#00A8A8] uppercase tracking-widest mt-1">
+                        {event.title}
+                    </p>
+                </div>
+                <button
+                    onClick={onClose}
+                    className="text-gray-500 hover:text-white transition-colors text-xs uppercase tracking-widest font-mono p-2 hover:bg-white/5 rounded"
+                >
+                    [ Close ]
+                </button>
+            </div>
+
+            <div className="space-y-8">
+                {/* QR Code Display - White background with more padding */}
+                <div className="bg-white p-8 rounded-2xl shadow-lg mx-auto max-w-sm">
+                    {qrCodeDataURL && (
+                        <img
+                            src={qrCodeDataURL}
+                            alt="Event QR Code"
+                            className="w-full h-auto"
+                        />
+                    )}
+                </div>
+
+                {/* Event Info */}
+                <div className="bg-black/40 border border-white/5 rounded-xl p-6 space-y-4">
+                    <div className="flex justify-between text-sm font-mono">
+                        <span className="text-gray-600 uppercase">IDENT:</span>
+                        <span className="text-white">{event.title}</span>
+                    </div>
+                    <div className="flex justify-between text-sm font-mono">
+                        <span className="text-gray-600 uppercase">SYNC COUNT:</span>
+                        <span className="text-white">
+                            {event.currentCheckIns} {event.maxCheckIns ? `/ ${event.maxCheckIns}` : '/ Unlimited'}
+                        </span>
+                    </div>
+                    <div className="flex justify-between text-sm font-mono">
+                        <span className="text-gray-600 uppercase">STATUS:</span>
+                        <span className={event.checkInEnabled ? 'text-green-500 shadow-[0_0_10px_rgba(34,197,94,0.3)]' : 'text-red-500'}>
+                            {event.checkInEnabled ? 'LINK ACTIVE' : 'LINK TERMINATED'}
+                        </span>
+                    </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="grid grid-cols-2 gap-4">
+                    <button
+                        onClick={onDownload}
+                        className="px-6 py-4 bg-white/5 border border-white/10 text-white font-bold text-sm uppercase tracking-widest hover:bg-white/10 transition-all rounded-xl font-mono"
+                    >
+                        SAVE IMG
+                    </button>
+                    <button
+                        onClick={handleCopyCode}
+                        className="px-6 py-4 bg-white/5 border border-white/10 text-white font-bold text-sm uppercase tracking-widest hover:bg-white/10 transition-all rounded-xl font-mono"
+                    >
+                        COPY VAL
+                    </button>
+                </div>
+
+                {/* Regenerate Button */}
+                <button
+                    onClick={handleRegenerate}
+                    disabled={isRegenerating}
+                    className="w-full px-6 py-4 bg-red-500/5 border border-red-500/20 text-red-500/80 font-bold text-sm uppercase tracking-widest hover:bg-red-500/10 transition-all disabled:opacity-50 rounded-xl font-mono"
+                >
+                    {isRegenerating ? 'RENEWING...' : 'REBOOT QR SYSTEM'}
+                </button>
+            </div>
+        </ModalWrapper>
+    );
+}
diff --git a/sites/mainweb/components/portal/QRScannerModal.tsx b/sites/mainweb/components/portal/QRScannerModal.tsx
new file mode 100644
index 0000000..c413cca
--- /dev/null
+++ b/sites/mainweb/components/portal/QRScannerModal.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import React from 'react';
+import { ModalWrapper } from './ModalWrapper';
+import { Scanner } from '@yudiel/react-qr-scanner';
+
+interface QRScannerModalProps {
+    onClose: () => void;
+    onScan: (detectedCodes: { rawValue: string }[]) => void;
+    onError?: (error: unknown) => void;
+    isProcessing?: boolean;
+    isPaused?: boolean;
+}
+
+export function QRScannerModal({
+    onClose,
+    onScan,
+    onError,
+    isProcessing = false,
+    isPaused = false,
+}: QRScannerModalProps) {
+    const handleClose = () => {
+        if (!isProcessing) {
+            onClose();
+        }
+    };
+
+    return (
+        <ModalWrapper onClose={handleClose} maxWidth="md">
+            {/* Header */}
+            <div className="flex justify-between items-center mb-6">
+                <div>
+                    <h3 className="text-xl font-black text-white italic uppercase tracking-tighter">
+                        QR Scanner
+                    </h3>
+                    <p className="text-[9px] font-mono text-[#00A8A8] uppercase tracking-widest">
+                        Event Check-In System
+                    </p>
+                </div>
+                <button
+                    onClick={handleClose}
+                    disabled={isProcessing}
+                    className="text-gray-500 hover:text-white transition-colors text-[10px] uppercase tracking-widest disabled:opacity-50"
+                >
+                    [ Close ]
+                </button>
+            </div>
+
+            {/* Camera Feed */}
+            <div className="relative rounded-xl overflow-hidden border-2 border-[#00A8A8]/30">
+                {isProcessing && (
+                    <div className="absolute inset-0 bg-black/80 z-10 flex items-center justify-center">
+                        <div className="text-center">
+                            <div className="w-12 h-12 border-4 border-[#00A8A8] border-t-transparent rounded-full animate-spin mx-auto mb-3" />
+                            <p className="text-[10px] text-[#00A8A8] uppercase tracking-widest font-mono">
+                                Verifying...
+                            </p>
+                        </div>
+                    </div>
+                )}
+                <Scanner
+                    onScan={onScan}
+                    onError={onError}
+                    paused={isPaused || isProcessing}
+                    constraints={{
+                        facingMode: 'environment',
+                    }}
+                    formats={['qr_code']}
+                    components={{
+                        torch: true,
+                        finder: true,
+                    }}
+                    styles={{
+                        container: {
+                            width: '100%',
+                            height: '350px',
+                        },
+                    }}
+                    scanDelay={500}
+                />
+            </div>
+
+            {/* Instructions */}
+            <div className="mt-4 bg-[#00A8A8]/10 border border-[#00A8A8]/30 rounded-lg p-4">
+                <p className="text-[9px] text-[#00A8A8] uppercase tracking-widest font-bold mb-2">
+                    Instructions:
+                </p>
+                <ul className="text-[8px] text-gray-500 space-y-1 font-mono">
+                    <li>• Hold phone steady over QR code</li>
+                    <li>• Ensure good lighting conditions</li>
+                    <li>• Scan happens automatically</li>
+                </ul>
+            </div>
+        </ModalWrapper>
+    );
+}
diff --git a/sites/mainweb/components/portal/ScanResultModal.tsx b/sites/mainweb/components/portal/ScanResultModal.tsx
new file mode 100644
index 0000000..2b81680
--- /dev/null
+++ b/sites/mainweb/components/portal/ScanResultModal.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import React from 'react';
+import { ModalWrapper } from './ModalWrapper';
+
+interface ScanResultModalProps {
+    success: boolean;
+    message: string;
+    eventTitle?: string;
+    onClose: () => void;
+}
+
+export function ScanResultModal({
+    success,
+    message,
+    eventTitle,
+    onClose,
+}: ScanResultModalProps) {
+    return (
+        <ModalWrapper onClose={onClose} maxWidth="md">
+            <div className="text-center space-y-8">
+                {/* Status Icon */}
+                <div
+                    className={`inline-block p-6 rounded-full ${success
+                            ? 'bg-[#00A8A8]/10 border border-[#00A8A8]/20'
+                            : 'bg-red-500/10 border border-red-500/20'
+                        }`}
+                >
+                    {success ? (
+                        <svg className="w-12 h-12 text-[#00A8A8]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                    ) : (
+                        <svg className="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    )}
+                </div>
+
+                {/* Title */}
+                <div>
+                    <h3
+                        className={`text-3xl font-black uppercase tracking-tighter mb-2 ${success ? 'text-white' : 'text-red-400'
+                            }`}
+                    >
+                        {success ? 'Check-In Success' : 'Check-In Failed'}
+                    </h3>
+                    <p className="text-[10px] font-mono text-[#00A8A8] uppercase tracking-[0.3em]">
+                        {success ? 'Identity Verified' : 'Access Denied'}
+                    </p>
+                </div>
+
+                {/* Success Event Details */}
+                {success && eventTitle && (
+                    <div className="space-y-3">
+                        <div className="bg-white/[0.02] border border-white/5 rounded-xl p-6">
+                            <p className="text-[9px] text-gray-600 uppercase tracking-[0.4em] mb-3 font-mono">
+                                Event Payload:
+                            </p>
+                            <p className="text-xl text-white font-black uppercase italic tracking-tight">
+                                {eventTitle}
+                            </p>
+                        </div>
+                    </div>
+                )}
+
+                {/* Error Message */}
+                {!success && (
+                    <div className="bg-red-500/5 border border-red-500/20 rounded-xl p-6">
+                        <p className="text-[9px] text-red-500 uppercase tracking-[0.4em] mb-3 font-mono">
+                            Error Code:
+                        </p>
+                        <p className="text-sm text-red-300 font-mono italic">&gt; "{message}"</p>
+                    </div>
+                )}
+
+                {/* Close Button */}
+                <button
+                    onClick={onClose}
+                    className={`w-full px-8 py-5 font-black uppercase text-xs tracking-[0.4em] transition-all rounded-lg ${success
+                            ? 'bg-[#00A8A8] text-black hover:bg-[#00A8A8]/80 shadow-[0_0_20px_rgba(0,168,168,0.3)]'
+                            : 'bg-red-500/10 border border-red-500/30 text-red-500 hover:bg-red-500/20'
+                        }`}
+                >
+                    TERMINATE OVERLAY
+                </button>
+            </div>
+        </ModalWrapper>
+    );
+}
diff --git a/sites/mainweb/components/portal/StatusScreen.tsx b/sites/mainweb/components/portal/StatusScreen.tsx
new file mode 100644
index 0000000..cb9cba8
--- /dev/null
+++ b/sites/mainweb/components/portal/StatusScreen.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import React from 'react';
+
+type StatusVariant = 'denied' | 'waiting' | 'success';
+
+interface StatusScreenProps {
+    variant: StatusVariant;
+    title: string;
+    subtitle?: string;
+    message?: string;
+    onAction?: () => void;
+    actionLabel?: string;
+    actionVariant?: 'primary' | 'danger' | 'default';
+}
+
+const variantConfig = {
+    denied: {
+        iconBg: 'bg-red-500/10 border-red-500/30',
+        iconColor: 'text-red-500',
+        icon: (
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        ),
+    },
+    waiting: {
+        iconBg: 'bg-yellow-500/10 border-yellow-500/30',
+        iconColor: 'text-yellow-500',
+        icon: (
+            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        ),
+    },
+    success: {
+        iconBg: 'bg-[#00A8A8]/10 border-[#00A8A8]/30',
+        iconColor: 'text-[#00A8A8]',
+        icon: (
+            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+        ),
+    },
+};
+
+const actionVariantClasses = {
+    primary: 'px-12 py-5 bg-white text-black font-black text-[11px] uppercase tracking-[0.2em] rounded-sm hover:bg-[#00A8A8] hover:text-white transition-all active:scale-95 shadow-[0_0_30px_rgba(0,168,168,0.1)]',
+    danger: 'px-8 py-3 border border-red-500/20 text-red-500 font-mono text-[10px] uppercase tracking-[0.3em] hover:bg-red-500/10 transition-all',
+    default: 'px-8 py-3 border border-white/10 text-gray-400 font-mono text-[10px] uppercase tracking-[0.3em] hover:bg-white/5 transition-all',
+};
+
+export function StatusScreen({
+    variant,
+    title,
+    subtitle,
+    message,
+    onAction,
+    actionLabel = 'Continue',
+    actionVariant = 'default',
+}: StatusScreenProps) {
+    const config = variantConfig[variant];
+
+    return (
+        <div className="min-h-screen flex flex-col items-center justify-center px-6 text-center bg-[#050505] selection:bg-[#00A8A8]/30">
+            <div className={`w-16 h-16 ${variant === 'success' ? 'w-20 h-20' : ''} rounded-full flex items-center justify-center mb-6 ${variant === 'success' ? 'mb-8 shadow-[0_0_40px_rgba(0,168,168,0.2)]' : ''} ${config.iconBg} border ${config.iconColor}`}>
+                {config.icon}
+            </div>
+
+            {variant === 'success' ? (
+                <h1 className="text-4xl font-black text-white uppercase tracking-tighter mb-2">
+                    {title.split(' ')[0]}<br />
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A8A8] to-[#005a5a] italic">
+                        {title.split(' ').slice(1).join(' ')}
+                    </span>
+                </h1>
+            ) : (
+                <h1 className="text-2xl font-black text-white uppercase tracking-tight mb-2">{title}</h1>
+            )}
+
+            {subtitle && (
+                <p className="text-gray-500 font-mono text-sm mb-8">{subtitle}</p>
+            )}
+
+            {message && (
+                <p className="text-gray-500 font-mono text-sm mb-8">{message}</p>
+            )}
+
+            {onAction && (
+                <button
+                    onClick={onAction}
+                    className={actionVariantClasses[actionVariant]}
+                >
+                    {actionLabel}
+                </button>
+            )}
+        </div>
+    );
+}
diff --git a/sites/mainweb/components/portal/dashboard/FeatureCard.tsx b/sites/mainweb/components/portal/dashboard/FeatureCard.tsx
new file mode 100644
index 0000000..378c33b
--- /dev/null
+++ b/sites/mainweb/components/portal/dashboard/FeatureCard.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+
+interface FeatureCardProps {
+    href?: string;
+    title: string;
+    description?: string;
+    accessLevel?: string;
+    icon?: React.ReactNode;
+    variant?: 'admin' | 'member' | 'pending' | 'default';
+    disabled?: boolean;
+    statusBadge?: {
+        label: string;
+        color: 'green' | 'yellow' | 'red';
+    };
+}
+
+const variantClasses = {
+    admin: {
+        border: 'border-white/5 hover:border-[#00A8A8]/30',
+        accessColor: 'text-[#00A8A8]',
+        titleHover: 'group-hover:text-[#00A8A8]',
+        linkColor: 'text-[#00A8A8]',
+        hoverShadow: '',
+        gradient: '',
+        glow: '',
+    },
+    member: {
+        border: 'border-white/5 hover:border-green-500/50',
+        accessColor: 'text-green-500',
+        titleHover: 'group-hover:text-green-400',
+        linkColor: 'text-white',
+        hoverShadow: 'group-hover:shadow-[0_0_30px_rgba(34,197,94,0.15)]',
+        gradient: 'from-green-900/10 via-transparent to-transparent',
+        glow: 'bg-green-500/10 group-hover:bg-green-500/20',
+    },
+    pending: {
+        border: 'border-yellow-500/10 hover:border-yellow-500/20',
+        accessColor: 'text-yellow-600',
+        titleHover: '',
+        linkColor: 'text-yellow-500/60',
+        hoverShadow: '',
+        gradient: '',
+        glow: '',
+    },
+    default: {
+        border: 'border-white/5 hover:border-white/10',
+        accessColor: 'text-gray-500',
+        titleHover: 'group-hover:text-white',
+        linkColor: 'text-gray-400',
+        hoverShadow: '',
+        gradient: '',
+        glow: '',
+    },
+};
+
+
+export function FeatureCard({
+    href,
+    title,
+    description,
+    accessLevel,
+    icon,
+    variant = 'default',
+    disabled = false,
+    statusBadge,
+}: FeatureCardProps) {
+    const classes = variantClasses[variant];
+
+    const content = (
+        <div
+            className={`relative p-8 bg-black/40 border ${classes.border} transition-all duration-300 overflow-hidden ${!disabled ? 'group-hover:translate-y-[-2px]' : ''
+                } ${disabled ? 'cursor-default' : ''} ${variant === 'member' ? classes.hoverShadow : ''} rounded-lg flex flex-col h-full`}
+        >
+            {/* Background Effects for Member Variant */}
+            {variant === 'member' && (
+                <>
+                    <div className={`absolute inset-0 bg-gradient-to-br ${classes.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />
+                    <div className={`absolute -right-10 -top-10 w-40 h-40 ${classes.glow} rounded-full blur-3xl transition-all duration-500`} />
+                </>
+            )}
+
+            {/* Icon */}
+            {icon && (
+                <div className={`absolute top-0 right-0 p-4 ${variant === 'member' ? 'p-5 opacity-20 group-hover:opacity-40 transform group-hover:scale-105 group-hover:rotate-3' : 'opacity-10 group-hover:opacity-20'} transition-all duration-300`}>
+                    {icon}
+                </div>
+            )}
+
+            <div className="relative z-10 flex-1">
+                {/* Access Level / Status */}
+                {accessLevel && (
+                    <div className="flex items-center gap-2 mb-3">
+                        {variant === 'member' && (
+                            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+                        )}
+                        <p className={`text-xs uppercase tracking-[0.2em] font-bold ${classes.accessColor}`}>
+                            {accessLevel}
+                        </p>
+                    </div>
+                )}
+
+                {/* Title */}
+                <h3 className={`text-2xl font-bold text-white uppercase tracking-tight mb-2 ${classes.titleHover} transition-colors`}>
+                    {title}
+                </h3>
+
+                {/* Description */}
+                {description && (
+                    <p className={`text-sm ${variant === 'member' ? 'text-gray-500 font-mono group-hover:text-gray-400 transition-colors' : 'text-gray-500 font-mono'} mb-6 flex-1`}>
+                        {variant === 'member' && '> '}{description}
+                    </p>
+                )}
+
+                {/* Action Link */}
+                {!disabled && !statusBadge && (
+                    <div className={`mt-auto inline-flex items-center gap-3 text-sm font-mono ${classes.linkColor} ${variant === 'member' ? 'bg-green-500/10 border border-green-500/20 px-6 py-3 rounded-lg group-hover:bg-green-500/20 group-hover:border-green-500/40 transition-all' : ''}`}>
+                        <span className={`${variant === 'member' ? 'group-hover:text-green-300 transition-colors font-bold tracking-wider' : ''}`}>
+                            {variant === 'admin' ? 'INITIATE SESSION' : variant === 'member' ? 'ENTER SYSTEM' : 'VIEW'}
+                        </span>
+                        <svg className="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                        </svg>
+                    </div>
+                )}
+
+                {/* Status Badge */}
+                {statusBadge && (
+                    <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded bg-${statusBadge.color}-500/10 border border-${statusBadge.color}-500/20 self-start mt-auto`}>
+                        <div className={`h-2 w-2 rounded-full bg-${statusBadge.color}-500 animate-pulse`} />
+                        <span className={`text-[10px] font-mono text-${statusBadge.color}-500 font-bold uppercase tracking-wider`}>
+                            {statusBadge.label}
+                        </span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    if (href && !disabled) {
+        return (
+            <Link href={href} className="block group h-full">
+                {content}
+            </Link>
+        );
+    }
+
+    return <div className="h-full">{content}</div>;
+}
diff --git a/sites/mainweb/components/portal/dashboard/Sidebar.tsx b/sites/mainweb/components/portal/dashboard/Sidebar.tsx
new file mode 100644
index 0000000..89c0cb7
--- /dev/null
+++ b/sites/mainweb/components/portal/dashboard/Sidebar.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { signOut } from 'next-auth/react';
+import { LiquidGlass } from '../LiquidGlass';
+
+interface SidebarProps {
+    user: {
+        name?: string | null;
+        image?: string | null;
+    };
+    status: 'admin' | 'member' | 'guest';
+    activeTab: string;
+    onTabChange: (tab: string) => void;
+    tabs: Array<{
+        key: string;
+        label: string;
+    }>;
+}
+
+export function Sidebar({
+    user,
+    status,
+    activeTab,
+    onTabChange,
+    tabs,
+}: SidebarProps) {
+    const statusConfig = {
+        admin: {
+            color: 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]',
+            label: 'ADMIN',
+        },
+        member: {
+            color: 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]',
+            label: 'MEMBER',
+        },
+        guest: {
+            color: 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]',
+            label: 'GUEST',
+        },
+    };
+
+    return (
+        <LiquidGlass className="p-6 relative overflow-visible">
+            {/* User Profile Header */}
+            <div className="flex items-center gap-5 border-b border-white/5 pb-8 mb-8">
+                <div className="relative group">
+                    <div className="absolute -inset-0.5 bg-gradient-to-r from-[#00A8A8] to-blue-600 rounded-full opacity-50 blur group-hover:opacity-75 transition duration-1000 group-hover:duration-200" />
+                    <Image
+                        src={user.image || '/avatar-placeholder.png'}
+                        alt="Avatar"
+                        width={56}
+                        height={56}
+                        className="relative rounded-full border border-black bg-black object-cover h-14 w-14 transition-all duration-300"
+                    />
+                </div>
+                <div className="space-y-1">
+                    <p className="text-white font-bold uppercase tracking-tight text-base font-mono">
+                        {user.name || 'GUEST'}
+                    </p>
+                    <div className="flex items-center gap-2">
+                        <div className={`h-2 w-2 rounded-full ${statusConfig[status].color}`} />
+                        <p className="text-gray-500 text-xs uppercase tracking-widest font-bold">
+                            {statusConfig[status].label}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <nav className="space-y-2">
+                {tabs.map((tab) => (
+                    <button
+                        key={tab.key}
+                        onClick={() => onTabChange(tab.key)}
+                        className={`w-full group flex items-center justify-between px-6 py-4 rounded-xl text-sm font-bold tracking-widest transition-all duration-200 border border-transparent
+              ${activeTab === tab.key
+                                ? 'bg-white/[0.03] text-white border-white/5 shadow-[inset_0_0_20px_rgba(255,255,255,0.02)]'
+                                : 'text-gray-500 hover:text-white hover:bg-white/[0.02]'
+                            }`}
+                    >
+                        <span>{tab.label}</span>
+                        <span
+                            className={`h-2 w-2 rounded-full transition-all ${activeTab === tab.key ? 'bg-[#00A8A8]' : 'bg-transparent group-hover:bg-white/20'
+                                }`}
+                        />
+                    </button>
+                ))}
+            </nav>
+
+            {/* Sign Out */}
+            <div className="mt-8 pt-8 border-t border-white/5">
+                <button
+                    onClick={() => signOut({ callbackUrl: '/login' })}
+                    className="w-full py-4 px-6 rounded-xl bg-red-500/[0.05] border border-red-500/10 text-red-500/60 hover:bg-red-500/10 hover:text-red-400 hover:border-red-500/30 transition-all font-mono text-xs uppercase tracking-[0.2em] flex items-center justify-center gap-3 group"
+                >
+                    <span className="w-2 h-2 bg-red-500/40 rounded-full group-hover:bg-red-500 transition-colors" />
+                    Terminate Session
+                </button>
+            </div>
+        </LiquidGlass>
+    );
+}
diff --git a/sites/mainweb/components/portal/judge/RubricSlider.tsx b/sites/mainweb/components/portal/judge/RubricSlider.tsx
new file mode 100644
index 0000000..f855d73
--- /dev/null
+++ b/sites/mainweb/components/portal/judge/RubricSlider.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import React from 'react';
+
+interface RubricSliderProps {
+    label: string;
+    description: string;
+    value: number;
+    onChange: (value: number) => void;
+    isExpanded: boolean;
+    onToggleExpand: () => void;
+}
+
+export function RubricSlider({
+    label,
+    description,
+    value,
+    onChange,
+    isExpanded,
+    onToggleExpand,
+}: RubricSliderProps) {
+    return (
+        <div className="space-y-2">
+            <button
+                onClick={onToggleExpand}
+                className="w-full flex items-center justify-between text-left"
+            >
+                <span className="text-xs font-semibold text-white">{label}</span>
+                <div className="flex items-center gap-2">
+                    <span className="text-lg font-black text-[#00A8A8] min-w-[2rem] text-right">
+                        {value}
+                    </span>
+                    <svg
+                        className={`w-4 h-4 text-gray-500 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                </div>
+            </button>
+
+            {isExpanded && (
+                <p className="text-[10px] text-gray-400 font-mono pl-1 pb-1">{description}</p>
+            )}
+
+            {/* Slider */}
+            <div className="relative">
+                <input
+                    type="range"
+                    min="1"
+                    max="10"
+                    value={value}
+                    onChange={(e) => onChange(parseInt(e.target.value))}
+                    className="w-full h-12 appearance-none bg-transparent cursor-pointer touch-pan-y rubric-slider"
+                    style={{
+                        background: `linear-gradient(to right, #00A8A8 0%, #00A8A8 ${(value - 1) * 11.11}%, rgba(255,255,255,0.1) ${(value - 1) * 11.11}%, rgba(255,255,255,0.1) 100%)`,
+                        borderRadius: '8px',
+                    }}
+                />
+                <div className="flex justify-between text-[8px] text-gray-600 font-mono px-1 -mt-1">
+                    <span>1</span>
+                    <span>5</span>
+                    <span>10</span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// Slider styles component to be included in the page
+export function RubricSliderStyles() {
+    return (
+        <style jsx global>{`
+      .rubric-slider {
+        -webkit-appearance: none;
+        appearance: none;
+      }
+      .rubric-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 28px;
+        height: 28px;
+        background: white;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 0 20px rgba(0, 168, 168, 0.5), 0 2px 8px rgba(0,0,0,0.3);
+        border: 3px solid #00A8A8;
+      }
+      .rubric-slider::-moz-range-thumb {
+        width: 28px;
+        height: 28px;
+        background: white;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 0 20px rgba(0, 168, 168, 0.5), 0 2px 8px rgba(0,0,0,0.3);
+        border: 3px solid #00A8A8;
+      }
+      .rubric-slider:active::-webkit-slider-thumb {
+        transform: scale(1.1);
+      }
+      .rubric-slider:active::-moz-range-thumb {
+        transform: scale(1.1);
+      }
+    `}</style>
+    );
+}