diff --git a/src/components/SignatureCategories.tsx b/src/components/SignatureCategories.tsx
index 7ec57dc..5ee18ce 100644
--- a/src/components/SignatureCategories.tsx
+++ b/src/components/SignatureCategories.tsx
@@ -2,7 +2,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { ChevronDown, ChevronRight, Zap, Shield, Coins, HelpCircle, Pickaxe, Fuel } from "lucide-react";
+import { ChevronDown, ChevronRight, Zap, Shield, Coins, HelpCircle, Pickaxe, Fuel, Gauge } from "lucide-react";
 import { SignatureListItem } from "@/components/SignatureListItem";
 import { SignatureCategory } from "@/hooks/useSignatureCategories";
 
@@ -11,14 +11,14 @@ interface SignatureCategoriesProps {
   onToggleCategory: (categoryId: string) => void;
 }
 
-const getCategoryIcon = (categoryId: string) => {
+export const getCategoryIcon = (categoryId: string) => {
   switch (categoryId) {
     case 'combat':
       return <Zap className="h-4 w-4 text-red-400" />;
     case 'data_relic':
       return <Shield className="h-4 w-4 text-blue-400" />;
     case 'gas':
-      return <Fuel className="h-4 w-4 text-yellow-400" />;
+      return <Gauge className="h-4 w-4 text-green-400" />;
     case 'ore':
       return <Pickaxe className="h-4 w-4 text-yellow-400" />;
     case 'wormhole':
@@ -28,14 +28,14 @@ const getCategoryIcon = (categoryId: string) => {
   }
 };
 
-const getCategoryColor = (categoryId: string) => {
+export const getCategoryColor = (categoryId: string) => {
   switch (categoryId) {
     case 'combat':
       return 'text-red-400 border-red-600';
     case 'data_relic':
       return 'text-blue-400 border-blue-600';
     case 'gas':
-      return 'text-yellow-400 border-yellow-600';
+      return 'text-green-400 border-green-600';
     case 'ore':
       return 'text-yellow-400 border-yellow-600';
     case 'wormhole':
@@ -73,8 +73,8 @@ export const SignatureCategories = ({ categories, onToggleCategory }: SignatureC
                     {getCategoryIcon(category.id)}
                     <span className="text-base font-medium">{category.name}</span>
                   </div>
-                  <Badge 
-                    variant="outline" 
+                  <Badge
+                    variant="outline"
                     className={`bg-slate-700 border-slate-600 ${getCategoryColor(category.id)} px-2 py-1`}
                   >
                     {category.signatures.length}
diff --git a/src/components/SignatureListItem.tsx b/src/components/SignatureListItem.tsx
index 09c55fc..8f5fc8c 100644
--- a/src/components/SignatureListItem.tsx
+++ b/src/components/SignatureListItem.tsx
@@ -1,41 +1,17 @@
 import { Badge } from "@/components/ui/badge";
-import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull, Fuel, Pickaxe } from "lucide-react";
+import { Zap, Shield, Coins, HelpCircle, Clock, AlertTriangle, Skull } from "lucide-react";
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
+import { getCategoryColor, getCategoryIcon } from "./SignatureCategories";
 
 interface SignatureListItemProps {
 	signature: Signature;
 }
 
 export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
-	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("gas")) return <Fuel className="h-4 w-4" />;
-		if (lowerType.includes("ore")) return <Pickaxe className="h-4 w-4" />;
-		return <HelpCircle className="h-4 w-4" />;
-	};
-
-	const getTypeColor = (type: string, dangerous: boolean = false) => {
-		if (dangerous) return "bg-red-900/50 text-red-200 border-red-500";
-
-		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("gas"))
-			return "bg-gradient-to-r from-yellow-900/40 to-amber-900/40 text-yellow-200 border-yellow-500 shadow-lg shadow-yellow-500/20";
-		if (lowerType.includes("ore"))
-			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 isOld = () => {
 		if (!signature.updated) return false;
 		const updatedTime = new Date(signature.updated);
-		if (isNaN(updatedTime.getTime())) return false;
+		if (isNaN(updatedTime.getTime())) return false; // Handle invalid date
 		const now = new Date();
 		const diffHours = (now.getTime() - updatedTime.getTime()) / (1000 * 60 * 60);
 		return diffHours > 3;
@@ -44,11 +20,12 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 	const formatDate = (dateStr: string | undefined) => {
 		if (!dateStr) return "Unknown";
 		const date = new Date(dateStr);
-		if (isNaN(date.getTime())) return "Invalid date";
+		if (isNaN(date.getTime())) return "Invalid date"; // Handle invalid date
 
 		const now = new Date();
 		const diffMs = now.getTime() - date.getTime();
 
+		// Handle cases where the time difference is very small or negative
 		if (diffMs < 0) return "Just now";
 
 		const diffMinutes = Math.max(0, Math.floor(diffMs / (1000 * 60)));
@@ -66,43 +43,32 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 	};
 
 	const oldEntry = isOld();
-	const isGasSite = signature.type?.toLowerCase().includes("gas");
 
 	return (
 		<div
-			className={`flex items-center justify-between p-3 border-b border-slate-700 hover:bg-slate-800/40 transition-all duration-300 ${
-				oldEntry ? "opacity-50" : ""
-			} ${
-				isGasSite 
-					? "bg-gradient-to-r from-yellow-500/20 via-amber-400/20 to-yellow-500/20 border-l-4 border-l-yellow-500 shadow-xl shadow-yellow-500/20 hover:shadow-yellow-500/30 animate-pulse backdrop-blur-sm" 
-					: ""
-			}`}
+			className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : ""
+				}`}
 		>
-			<div className="flex items-center gap-3 flex-1">
-				{/* Type Badge */}
+			<div className="flex items-center gap-4 flex-1">
+				{/* Type Badge - Most Important */}
 				<Badge
 					variant="outline"
-					className={`${getTypeColor(
+					className={`${getCategoryColor(
 						signature.type,
-						signature.dangerous
-					)} px-2 py-1 font-semibold flex items-center gap-1 min-w-[100px] justify-center ${
-						isGasSite ? "animate-pulse" : ""
-					}`}
+					)} px-3 py-1 text-sm font-semibold flex items-center gap-2 min-w-[120px] justify-center`}
 				>
-					{signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getTypeIcon(signature.type)}
-					{signature.type || "Unknown"}
+					{signature.dangerous ? <Skull className="h-4 w-4 text-red-400 animate-pulse" /> : getCategoryIcon(signature.type)}
+					{signature.type || "Unknown Type"}
 				</Badge>
 
 				{/* Signature Name and ID */}
-				<div className="flex-1 min-w-[150px]">
+				<div className="flex-1 min-w-[200px]">
 					<div className="flex items-center gap-2">
-						<span className="font-mono text-sm text-slate-400 min-w-[50px]">{signature.identifier}</span>
-						<h3 className={`font-medium flex items-center gap-2 ${
-							isGasSite ? "text-yellow-200 font-bold" : "text-white"
-						}`}>
+						<span className="font-mono text-sm text-slate-400 min-w-[60px]">{signature.identifier}</span>
+						<h3 className="text-white font-medium flex items-center gap-2">
 							{signature.signame || "Unnamed Signature"}
 							{signature.dangerous && (
-								<Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-1 py-0 text-xs">
+								<Badge variant="outline" className="bg-red-900/50 text-red-200 border-red-500 px-2 py-0.5 text-xs">
 									DANGEROUS
 								</Badge>
 							)}
@@ -111,16 +77,16 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
 				</div>
 
 				{/* Dates */}
-				<div className="flex flex-col gap-0.5 text-sm text-slate-400 min-w-[150px]">
+				<div className="flex flex-col gap-1 text-sm text-slate-400 min-w-[200px]">
 					{signature.updated && (
-						<div className="flex items-center gap-1">
+						<div className="flex items-center gap-2">
 							{oldEntry && <AlertTriangle className="h-4 w-4 text-yellow-500" />}
 							<Clock className="h-4 w-4" />
 							<span>Updated: {formatDate(signature.updated)}</span>
 						</div>
 					)}
 					{signature.created && (
-						<div className="flex items-center gap-1 text-xs text-slate-500">
+						<div className="flex items-center gap-2 text-xs text-slate-500">
 							<span>Created: {formatDate(signature.created)}</span>
 						</div>
 					)}