diff --git a/package-lock.json b/package-lock.json
index 274f82a..e285cd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -806,6 +806,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
       "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
       "peerDependencies": {
         "react": ">= 16 || ^19.0.0-rc"
       }
diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx
index 39a8614..8e07cbf 100644
--- a/src/components/dashboard/Dashboard.tsx
+++ b/src/components/dashboard/Dashboard.tsx
@@ -11,6 +11,7 @@ import FootprintChart from "@/components/charts/FootprintChart";
 import ComparisonSection from "@/components/dashboard/ComparisonSection";
 import ShareButton from "@/components/ui/ShareButton";
 import { getUserFootprints } from "@/lib/firebase/firestore";
+import { ActivityIcon, getActivityIconConfig } from "@/utils/activityIcons";
 
 type SortOption = "newest" | "oldest" | "highest_impact" | "lowest_impact";
 
@@ -38,12 +39,13 @@ function StatCard({ title, value, change, icon, color }: StatCardProps) {
           <p className={`text-2xl font-bold ${color}`}>{value}</p>
           {change !== undefined && (
             <p
-              className={`text-sm mt-1 ${change > 0
+              className={`text-sm mt-1 ${
+                change > 0
                   ? "text-red-600"
                   : change < 0
-                    ? "text-green-600"
-                    : "text-gray-600"
-                }`}
+                  ? "text-green-600"
+                  : "text-gray-600"
+              }`}
             >
               {change > 0 ? "↗" : change < 0 ? "↘" : "→"}{" "}
               {Math.abs(change).toFixed(1)}% from last week
@@ -322,14 +324,14 @@ export default function Dashboard({
           </div>
         )}
 
-        {/* Recent Activities / Activity History (UPDATED SECTION) */}
+        {/* Recent Activities / Activity History (UPDATED WITH ICONS) */}
         {activityHistory.length > 0 && (
           <div className="bg-white rounded-xl shadow-lg p-8">
             <div className="flex justify-between items-center mb-6">
               <h3 className="text-2xl font-bold text-gray-900">
                 Activity History
               </h3>
-              {/* NEW: Sort Dropdown UI */}
+              {/* Sort Dropdown UI */}
               <div className="flex items-center space-x-2">
                 <span className="text-sm font-medium text-gray-700">Sort by:</span>
                 <div className="relative">
@@ -344,38 +346,77 @@ export default function Dashboard({
                       </option>
                     ))}
                   </select>
-                  {/* Custom chevron/sort icon */}
                   <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4h18M3 8h18m-6 4h6m-6 4h6M3 16h6m-6 4h6"></path></svg>
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4h18M3 8h18m-6 4h6m-6 4h6M3 16h6m-6 4h6"></path>
+                    </svg>
                   </div>
                 </div>
               </div>
             </div>
 
-            {/* Sorted Activity List */}
+            {/* Sorted Activity List with Icons */}
             <div className="space-y-4">
               {activityHistory.map((entry: any) => (
-                <div key={entry.id} className="bg-gray-50 rounded-lg p-4">
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm text-gray-600">
-                      {/* Using toLocaleString for better date/time display */}
-                      {entry.timestamp.toLocaleString()}
-                    </span>
-                    <span className="font-bold text-green-600">
-                      +{formatCO2Amount(entry.result.totalCO2)}
+                <div 
+                  key={entry.id} 
+                  className="bg-gradient-to-r from-gray-50 to-white rounded-lg p-5 border border-gray-200 hover:shadow-md transition-shadow"
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="text-sm text-gray-600 font-medium">
+                      {entry.timestamp.toLocaleString('en-US', {
+                        weekday: 'short',
+                        month: 'short', 
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                      })}
                     </span>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-xs text-gray-500">Total CO₂:</span>
+                      <span className="font-bold text-green-600 text-lg">
+                        +{formatCO2Amount(entry.result.totalCO2)}
+                      </span>
+                    </div>
                   </div>
+                  
                   <div className="flex flex-wrap gap-2">
                     {Object.entries(entry.activities).map(
-                      ([activity, value]) =>
-                        (value as number) > 0 ? (
-                          <span
+                      ([activity, value]) => {
+                        if ((value as number) <= 0) return null;
+
+                        // Map activity input names to ActivityType
+                        const activityType = 
+                          activity === 'streamingHours' ? 'streaming' :
+                          activity === 'codingHours' ? 'coding' :
+                          activity === 'videoCallHours' ? 'video_calls' :
+                          activity === 'cloudStorageGB' ? 'cloud_storage' :
+                          activity === 'gamingHours' ? 'gaming' :
+                          activity === 'socialMediaHours' ? 'social_media' : 
+                          'emails';
+
+                        const config = getActivityIconConfig(activityType as ActivityType);
+
+                        return (
+                          <div
                             key={activity}
-                            className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full"
+                            className="flex items-center space-x-2 bg-white px-3 py-2 rounded-full border-2 hover:shadow-sm transition-all"
+                            style={{
+                              borderColor: config.borderColor.replace('border-', '#').replace('200', 'e5e7eb')
+                            }}
                           >
-                            {activity}: {value as number}
-                          </span>
-                        ) : null
+                            <ActivityIcon 
+                              activity={activityType as ActivityType}
+                              size={16}
+                            />
+                            <span className="text-sm font-medium text-gray-700">
+                              {activity.replace(/Hours|GB/, '')}: {value as number}
+                              {activity.includes('Hours') ? 'h' : 
+                               activity.includes('GB') ? 'GB' : ''}
+                            </span>
+                          </div>
+                        );
+                      }
                     )}
                   </div>
                 </div>
diff --git a/src/components/forms/ActivityForm.tsx b/src/components/forms/ActivityForm.tsx
index 48684d4..5bcde20 100644
--- a/src/components/forms/ActivityForm.tsx
+++ b/src/components/forms/ActivityForm.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { ActivityInput } from '@/types';
 import { calculateCarbonFootprint } from '@/lib/calculations/carbonFootprint';
 import { ACTIVITY_LABELS, ACTIVITY_DESCRIPTIONS } from '@/constants/co2Factors';
+import { ActivityIcon, getActivityIconConfig } from '@/utils/activityIcons';
 
 interface ActivityFormProps {
   onSubmit: (
@@ -13,7 +14,7 @@ interface ActivityFormProps {
       breakdown: Record<string, number>;
       equivalents: Array<{ description: string; value: number; unit: string }>;
     },
-    customToastMessage?: string // <-- Add this optional property
+    customToastMessage?: string
   ) => void;
   initialValues?: Partial<ActivityInput>;
 }
@@ -131,59 +132,59 @@ export default function ActivityForm({ onSubmit, initialValues }: ActivityFormPr
   const formFields = [
     {
       key: 'emails' as keyof ActivityInput,
+      activityType: 'emails' as const,
       label: ACTIVITY_LABELS.emails,
       description: ACTIVITY_DESCRIPTIONS.emails,
       max: 500,
       step: 1,
-      icon: '📧',
     },
     {
       key: 'streamingHours' as keyof ActivityInput,
+      activityType: 'streaming' as const,
       label: ACTIVITY_LABELS.streaming,
       description: ACTIVITY_DESCRIPTIONS.streaming,
       max: 24,
       step: 0.5,
-      icon: '📺',
     },
     {
       key: 'codingHours' as keyof ActivityInput,
+      activityType: 'coding' as const,
       label: ACTIVITY_LABELS.coding,
       description: ACTIVITY_DESCRIPTIONS.coding,
       max: 24,
       step: 0.5,
-      icon: '💻',
     },
     {
       key: 'videoCallHours' as keyof ActivityInput,
+      activityType: 'video_calls' as const,
       label: ACTIVITY_LABELS.video_calls,
       description: ACTIVITY_DESCRIPTIONS.video_calls,
       max: 24,
       step: 0.5,
-      icon: '📹',
     },
     {
       key: 'cloudStorageGB' as keyof ActivityInput,
+      activityType: 'cloud_storage' as const,
       label: ACTIVITY_LABELS.cloud_storage,
       description: ACTIVITY_DESCRIPTIONS.cloud_storage,
       max: 1000,
       step: 1,
-      icon: '☁️',
     },
     {
       key: 'gamingHours' as keyof ActivityInput,
+      activityType: 'gaming' as const,
       label: ACTIVITY_LABELS.gaming,
       description: ACTIVITY_DESCRIPTIONS.gaming,
       max: 24,
       step: 0.5,
-      icon: '🎮',
     },
     {
       key: 'socialMediaHours' as keyof ActivityInput,
+      activityType: 'social_media' as const,
       label: ACTIVITY_LABELS.social_media,
       description: ACTIVITY_DESCRIPTIONS.social_media,
       max: 24,
       step: 0.5,
-      icon: '📱',
     },
   ];
 
@@ -197,98 +198,137 @@ export default function ActivityForm({ onSubmit, initialValues }: ActivityFormPr
           <p className="text-gray-600">
             Enter your digital activities for today to calculate your carbon footprint
           </p>
+          <div className="flex justify-center items-center gap-4 mt-4 text-sm">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-green-500"></div>
+              <span className="text-gray-600">Low Impact</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+              <span className="text-gray-600">Medium Impact</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-red-500"></div>
+              <span className="text-gray-600">High Impact</span>
+            </div>
+          </div>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="grid md:grid-cols-2 gap-6">
-            {formFields.map((field) => (
-              <div key={field.key} className="space-y-3">
-                <div className="flex items-center space-x-2">
-                  <span className="text-2xl">{field.icon}</span>
-                  <label className="text-lg font-medium text-gray-900">
-                    {field.label}
-                  </label>
-                </div>
-                
-                <p className="text-sm text-gray-600 ml-10">
-                  {field.description}
-                </p>
-
-                <div className="ml-10">
-                  <div className="flex items-center space-x-4">
-                    <input
-                      type="range"
-                      min="0"
-                      max={field.max}
-                      step={field.step}
-                      value={activities[field.key]}
-                      onChange={(e) => handleInputChange(field.key, parseFloat(e.target.value))}
-                      onBlur={() => handleBlur(field.key)}
-                      className={`flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider ${
-                        errors[field.key] ? 'border border-red-500' : ''
-                      }`}
-                      aria-invalid={!!errors[field.key]}
-                      aria-describedby={`${field.key}-error ${field.key}-hint`}
+            {formFields.map((field) => {
+              const iconConfig = getActivityIconConfig(field.activityType);
+              
+              return (
+                <div 
+                  key={field.key} 
+                  className={`
+                    space-y-3 p-4 rounded-lg border-2 transition-all
+                    ${errors[field.key] ? 'border-red-500' : iconConfig.borderColor}
+                    hover:shadow-md
+                  `}
+                >
+                  <div className="flex items-center space-x-3">
+                    <ActivityIcon 
+                      activity={field.activityType} 
+                      size={28}
+                      showBackground={true}
                     />
-                    <div className="flex items-center space-x-2">
+                    <div className="flex-1">
+                      <label className="text-lg font-medium text-gray-900">
+                        {field.label}
+                      </label>
+                      <p className="text-xs text-gray-500 mt-0.5">
+                        {iconConfig.impactLevel.charAt(0).toUpperCase() + 
+                         iconConfig.impactLevel.slice(1)} carbon impact
+                      </p>
+                    </div>
+                  </div>
+                  
+                  <p className="text-sm text-gray-600">
+                    {field.description}
+                  </p>
+
+                  <div>
+                    <div className="flex items-center space-x-4">
                       <input
-                        type="number"
+                        type="range"
                         min="0"
                         max={field.max}
                         step={field.step}
                         value={activities[field.key]}
-                        onChange={(e) => handleInputChange(field.key, parseFloat(e.target.value) || 0)}
+                        onChange={(e) => handleInputChange(field.key, parseFloat(e.target.value))}
                         onBlur={() => handleBlur(field.key)}
-                        className={`w-20 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 text-gray-900 ${
-                          errors[field.key] 
-                            ? 'border-red-500 focus:ring-red-500' 
-                            : 'border-gray-300 focus:ring-green-500'
+                        className={`flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider ${
+                          errors[field.key] ? 'border border-red-500' : ''
                         }`}
+                        style={{
+                          background: `linear-gradient(to right, 
+                            ${iconConfig.impactLevel === 'low' ? '#10b981' : 
+                              iconConfig.impactLevel === 'medium' ? '#f59e0b' : '#ef4444'} 
+                            ${(activities[field.key] / field.max) * 100}%, 
+                            #e5e7eb ${(activities[field.key] / field.max) * 100}%)`
+                        }}
                         aria-invalid={!!errors[field.key]}
                         aria-describedby={`${field.key}-error ${field.key}-hint`}
                       />
-                      <span className="text-sm text-gray-500 min-w-fit">
-                        {field.key.includes('Hours') ? 'hrs' : 
-                         field.key.includes('GB') ? 'GB' : 
-                         field.key === 'emails' ? 'emails' : 'units'}
-                      </span>
+                      <div className="flex items-center space-x-2">
+                        <input
+                          type="number"
+                          min="0"
+                          max={field.max}
+                          step={field.step}
+                          value={activities[field.key]}
+                          onChange={(e) => handleInputChange(field.key, parseFloat(e.target.value) || 0)}
+                          onBlur={() => handleBlur(field.key)}
+                          className={`
+                            w-20 px-3 py-2 border-2 rounded-md 
+                            focus:outline-none focus:ring-2 transition-all text-gray-900
+                            ${errors[field.key] 
+                              ? 'border-red-500 focus:ring-red-500' 
+                              : `${iconConfig.borderColor} focus:ring-${iconConfig.color.replace('text-', '').replace('-600', '-500')}`
+                            }
+                          `}
+                          aria-invalid={!!errors[field.key]}
+                          aria-describedby={`${field.key}-error ${field.key}-hint`}
+                        />
+                        <span className="text-sm text-gray-500 min-w-fit">
+                          {field.key.includes('Hours') ? 'hrs' : 
+                           field.key.includes('GB') ? 'GB' : 
+                           field.key === 'emails' ? '' : 'units'}
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                  
-                  {/* Progress bar */}
-                  <div className="mt-2 w-full bg-gray-200 rounded-full h-1">
-                    <div
-                      className="bg-green-500 h-1 rounded-full transition-all duration-300"
-                      style={{ width: `${(activities[field.key] / field.max) * 100}%` }}
-                    ></div>
-                  </div>
 
-                  {/* Hint */}
-                  <p id={`${field.key}-hint`} className="text-xs text-gray-500 mt-1">
-                    {field.key.includes('Hours') 
-                      ? `Enter duration in ${field.key.includes('streaming') || field.key.includes('gaming') ? 'hours' : 'hours'} (e.g., 2.5)` 
-                      : field.key === 'emails' 
-                      ? 'Enter number of emails sent today' 
-                      : field.key === 'cloudStorageGB' 
-                      ? 'Enter storage used in GB' 
-                      : 'Enter quantity'}
-                  </p>
-
-                  {/* Error message */}
-                  {errors[field.key] && (
-                    <p id={`${field.key}-error`} className="text-sm text-red-600 mt-1" role="alert">
-                      {errors[field.key]}
+                    {/* Hint */}
+                    <p id={`${field.key}-hint`} className="text-xs text-gray-500 mt-2">
+                      {field.key.includes('Hours') 
+                        ? `Enter duration in hours (e.g., 2.5)` 
+                        : field.key === 'emails' 
+                        ? 'Enter number of emails sent today' 
+                        : field.key === 'cloudStorageGB' 
+                        ? 'Enter storage used in GB' 
+                        : 'Enter quantity'}
                     </p>
-                  )}
+
+                    {/* Error message */}
+                    {errors[field.key] && (
+                      <p id={`${field.key}-error`} className="text-sm text-red-600 mt-1 flex items-center gap-1" role="alert">
+                        <span>⚠️</span>
+                        {errors[field.key]}
+                      </p>
+                    )}
+                  </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
 
           {/* Form error message */}
           {errors.form && (
-            <div className="text-center">
-              <p className="text-sm text-red-600" role="alert">
+            <div className="text-center bg-red-50 border border-red-200 rounded-lg p-3">
+              <p className="text-sm text-red-600 flex items-center justify-center gap-2" role="alert">
+                <span>⚠️</span>
                 {errors.form}
               </p>
             </div>
@@ -298,7 +338,7 @@ export default function ActivityForm({ onSubmit, initialValues }: ActivityFormPr
             <button
               type="submit"
               disabled={isSubmitting || Object.keys(errors).length > 0}
-              className="px-8 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:scale-105"
+              className="px-8 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:scale-105 shadow-lg"
             >
               {isSubmitting ? (
                 <div className="flex items-center space-x-2">
@@ -319,22 +359,22 @@ export default function ActivityForm({ onSubmit, initialValues }: ActivityFormPr
       <style jsx>{`
         .slider::-webkit-slider-thumb {
           appearance: none;
-          height: 20px;
-          width: 20px;
+          height: 18px;
+          width: 18px;
           border-radius: 50%;
-          background: #059669;
+          background: #ffffff;
           cursor: pointer;
-          border: 2px solid #ffffff;
+          border: 3px solid;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
         }
         
         .slider::-moz-range-thumb {
-          height: 20px;
-          width: 20px;
+          height: 18px;
+          width: 18px;
           border-radius: 50%;
-          background: #059669;
+          background: #ffffff;
           cursor: pointer;
-          border: 2px solid #ffffff;
+          border: 3px solid;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
         }
       `}</style>
diff --git a/src/utils/activityIcons.tsx b/src/utils/activityIcons.tsx
new file mode 100644
index 0000000..aefde6e
--- /dev/null
+++ b/src/utils/activityIcons.tsx
@@ -0,0 +1,177 @@
+// src/utils/activityIcons.tsx
+import { 
+  EnvelopeIcon,
+  TvIcon,
+  CodeBracketIcon,
+  VideoCameraIcon,
+  CloudIcon,
+  PuzzlePieceIcon,
+  ShareIcon,
+} from '@heroicons/react/24/outline';
+import { ActivityType } from '@/types';
+
+// Impact levels based on CO2 emissions per unit
+export type ImpactLevel = 'low' | 'medium' | 'high';
+
+interface ActivityIconConfig {
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  impactLevel: ImpactLevel;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+}
+
+// CO2 impact classification (grams per typical unit)
+// Low: < 10g, Medium: 10-50g, High: > 50g
+export const ACTIVITY_ICONS: Record<ActivityType, ActivityIconConfig> = {
+  emails: {
+    icon: EnvelopeIcon,
+    impactLevel: 'low',
+    color: 'text-green-600',
+    bgColor: 'bg-green-100',
+    borderColor: 'border-green-200',
+  },
+  streaming: {
+    icon: TvIcon,
+    impactLevel: 'high',
+    color: 'text-red-600',
+    bgColor: 'bg-red-100',
+    borderColor: 'border-red-200',
+  },
+  coding: {
+    icon: CodeBracketIcon,
+    impactLevel: 'medium',
+    color: 'text-yellow-600',
+    bgColor: 'bg-yellow-100',
+    borderColor: 'border-yellow-200',
+  },
+  video_calls: {
+    icon: VideoCameraIcon,
+    impactLevel: 'high',
+    color: 'text-red-600',
+    bgColor: 'bg-red-100',
+    borderColor: 'border-red-200',
+  },
+  cloud_storage: {
+    icon: CloudIcon,
+    impactLevel: 'low',
+    color: 'text-green-600',
+    bgColor: 'bg-green-100',
+    borderColor: 'border-green-200',
+  },
+  gaming: {
+    icon: PuzzlePieceIcon,
+    impactLevel: 'high',
+    color: 'text-red-600',
+    bgColor: 'bg-red-100',
+    borderColor: 'border-red-200',
+  },
+  social_media: {
+    icon: ShareIcon,
+    impactLevel: 'medium',
+    color: 'text-yellow-600',
+    bgColor: 'bg-yellow-100',
+    borderColor: 'border-yellow-200',
+  },
+};
+
+interface ActivityIconProps {
+  activity: ActivityType;
+  size?: number;
+  showBackground?: boolean;
+  className?: string;
+}
+
+/**
+ * Renders an activity icon with consistent styling and color coding
+ */
+export function ActivityIcon({ 
+  activity, 
+  size = 24, 
+  showBackground = false,
+  className = '' 
+}: ActivityIconProps) {
+  const config = ACTIVITY_ICONS[activity];
+  const Icon = config.icon;
+
+  if (showBackground) {
+    return (
+      <div 
+        className={`
+          inline-flex items-center justify-center 
+          rounded-lg p-2
+          ${config.bgColor} 
+          ${config.borderColor} 
+          border-2
+          ${className}
+        `}
+      >
+        <Icon 
+          className={`${config.color}`}
+          style={{ width: size, height: size }}
+          strokeWidth={2}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Icon 
+      className={`${config.color} ${className}`}
+      style={{ width: size, height: size }}
+      strokeWidth={2}
+    />
+  );
+}
+
+/**
+ * Returns the icon configuration for an activity
+ */
+export function getActivityIconConfig(activity: ActivityType): ActivityIconConfig {
+  return ACTIVITY_ICONS[activity];
+}
+
+/**
+ * Returns all activities sorted by impact level
+ */
+export function getActivitiesByImpact(): Record<ImpactLevel, ActivityType[]> {
+  const grouped: Record<ImpactLevel, ActivityType[]> = {
+    low: [],
+    medium: [],
+    high: [],
+  };
+
+  Object.entries(ACTIVITY_ICONS).forEach(([activity, config]) => {
+    grouped[config.impactLevel].push(activity as ActivityType);
+  });
+
+  return grouped;
+}
+
+/**
+ * Returns the impact level color classes
+ */
+export function getImpactColors(level: ImpactLevel) {
+  const colors = {
+    low: {
+      text: 'text-green-600',
+      bg: 'bg-green-100',
+      border: 'border-green-200',
+      ring: 'ring-green-500',
+    },
+    medium: {
+      text: 'text-yellow-600',
+      bg: 'bg-yellow-100',
+      border: 'border-yellow-200',
+      ring: 'ring-yellow-500',
+    },
+    high: {
+      text: 'text-red-600',
+      bg: 'bg-red-100',
+      border: 'border-red-200',
+      ring: 'ring-red-500',
+    },
+  };
+
+  return colors[level];
+}
\ No newline at end of file