diff --git a/src/components/SignatureCard.tsx b/src/components/SignatureCard.tsx
index 9830509..a3ed70a 100644
--- a/src/components/SignatureCard.tsx
+++ b/src/components/SignatureCard.tsx
@@ -1,41 +1,27 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Zap, Shield, Coins, HelpCircle } from "lucide-react";
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
+import { getSignatureMeta } from "@/hooks/useSignatureCategories";
 
 interface SignatureCardProps {
   signature: Signature;
 }
 
 export const SignatureCard = ({ signature }: SignatureCardProps) => {
-  const getTypeIcon = (type: string) => {
-    const lowerType = type.toLowerCase();
-    if (lowerType.includes('combat')) return <Zap className="h-4 w-4" />;
-    if (lowerType.includes('exploration') || lowerType.includes('relic') || lowerType.includes('data')) return <Shield className="h-4 w-4" />;
-    if (lowerType.includes('ore') || lowerType.includes('gas')) return <Coins className="h-4 w-4" />;
-    return <HelpCircle className="h-4 w-4" />;
-  };
-
-  const getTypeColor = (type: string) => {
-    const lowerType = type.toLowerCase();
-    if (lowerType.includes('combat')) return 'bg-red-900/30 text-red-300 border-red-600';
-    if (lowerType.includes('exploration') || lowerType.includes('relic') || lowerType.includes('data')) return 'bg-blue-900/30 text-blue-300 border-blue-600';
-    if (lowerType.includes('ore') || lowerType.includes('gas')) return 'bg-yellow-900/30 text-yellow-300 border-yellow-600';
-    if (!type || type === '') return 'bg-slate-700 text-slate-300 border-slate-600';
-    return 'bg-purple-900/30 text-purple-300 border-purple-600';
-  };
+  const meta = getSignatureMeta(signature.type);
+  const isGasSite = signature.type?.toLowerCase().includes('gas');
 
   return (
-    <Card className="bg-slate-800/40 border-slate-700 hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600">
+    <Card className={`${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : 'bg-slate-800/40 border-slate-700'} hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600`}>
       <CardContent className="pt-6">
         <div className="space-y-3">
           {/* Type Badge - Most Important */}
           <div className="flex items-center justify-center">
             <Badge 
               variant="outline" 
-              className={`${getTypeColor(signature.type)} px-3 py-1 text-sm font-semibold flex items-center gap-2`}
+              className={`${meta.color} px-3 py-1 text-sm font-semibold flex items-center gap-2`}
             >
-              {getTypeIcon(signature.type)}
+              {meta.icon}
               {signature.type || 'Unknown Type'}
             </Badge>
           </div>
diff --git a/src/components/SignatureListItem.tsx b/src/components/SignatureListItem.tsx
index 6318dc5..5995e82 100644
--- a/src/components/SignatureListItem.tsx
+++ b/src/components/SignatureListItem.tsx
@@ -43,13 +43,14 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 	};
 
 	const meta = getSignatureMeta(signature.type || "");
-
+	const isGasSite = signature.type?.toLowerCase().includes('gas');
 	const oldEntry = isOld();
 
 	return (
 		<div
-			className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : ""
-				}`}
+			className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${
+				oldEntry ? "opacity-50" : ""
+			} ${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : ''}`}
 		>
 			<div className="flex items-center gap-4 flex-1">
 				{/* Type Badge - Most Important */}
diff --git a/src/hooks/useSignatureCategories.tsx b/src/hooks/useSignatureCategories.tsx
index ee09bd8..945a969 100644
--- a/src/hooks/useSignatureCategories.tsx
+++ b/src/hooks/useSignatureCategories.tsx
@@ -43,8 +43,8 @@ const allCategories = new Map<string, SignatureCategoryMeta>([
     matcher: /^gas/i,
     id: "gas",
     name: 'Gas Sites',
-    icon: <Gauge className="h-4 w-4 text-green-400" />,
-    color: "text-green-400 border-green-600"
+    icon: <Gauge className="h-4 w-4 text-emerald-400" />,
+    color: "bg-emerald-900/40 text-emerald-200 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)] transition-all duration-300"
   }],
   ["ore", {
     matcher: /^ore/i,