diff --git a/frontend/app/firewall/page.tsx b/frontend/app/firewall/page.tsx
index edf3baf..da129bf 100644
--- a/frontend/app/firewall/page.tsx
+++ b/frontend/app/firewall/page.tsx
@@ -952,14 +952,22 @@ export default function FirewallPage() {
                                 {rule.state && (
                                   <div className="flex flex-col gap-1">
                                     <span className="text-slate-400 font-medium">State Tracking:</span>
-                                    {Object.entries(rule.state).map(([key, value]) => (
-                                      <div key={`state-${key}`} className="flex items-center gap-2 ml-2">
-                                        <span className="text-slate-400">{key}:</span>
+                                    {typeof rule.state === 'string' ? (
+                                      <div className="flex items-center gap-2 ml-2">
                                         <span className="text-white font-mono bg-slate-800 px-2 py-1 rounded text-xs">
-                                          {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                                          {rule.state}
                                         </span>
                                       </div>
-                                    ))}
+                                    ) : (
+                                      Object.entries(rule.state).map(([key, value]) => (
+                                        <div key={`state-${key}`} className="flex items-center gap-2 ml-2">
+                                          <span className="text-slate-400">{key}:</span>
+                                          <span className="text-white font-mono bg-slate-800 px-2 py-1 rounded text-xs">
+                                            {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                                          </span>
+                                        </div>
+                                      ))
+                                    )}
                                   </div>
                                 )}
                               </div>
diff --git a/frontend/app/routing/page.tsx b/frontend/app/routing/page.tsx
index 49ecef2..43ad463 100644
--- a/frontend/app/routing/page.tsx
+++ b/frontend/app/routing/page.tsx
@@ -1322,26 +1322,62 @@ export default function RoutingPage() {
                                 </TableCell>
                                 <TableCell>
                                   <div className="space-y-1">
-                                    {Object.entries(rule.match).map(([key, value], j) => (
-                                      <div key={j} className="flex items-center gap-1">
-                                        <span className="text-xs text-slate-400">{key}:</span>
-                                        <Badge variant="outline" className="border-purple-700 text-purple-400">
-                                          {value as string}
-                                        </Badge>
-                                      </div>
-                                    ))}
+                                    {Object.entries(rule.match || {}).map(([key, value], j) => {
+                                      // Format the value into a readable string
+                                      let displayValue = value;
+                                      if (typeof value === 'object' && value !== null) {
+                                        // Handle nested objects by getting all key-value pairs
+                                        const formatNestedObject = (obj: any, parentKey?: string): string => {
+                                          const entries = Object.entries(obj);
+                                          if (entries.length === 0) return '';
+                                          
+                                          const [k, v] = entries[0];
+                                          if (typeof v === 'object' && v !== null) {
+                                            return formatNestedObject(v, k);
+                                          }
+                                          return `${parentKey ? `${parentKey} ` : ''}${k} ${v}`;
+                                        };
+                                        displayValue = formatNestedObject(value);
+                                      }
+                                      return (
+                                        <div key={j} className="flex items-center gap-1">
+                                          <span className="text-xs text-muted-foreground">{key}:</span>
+                                          <Badge variant="secondary">
+                                            {String(displayValue)}
+                                          </Badge>
+                                        </div>
+                                      );
+                                    })}
                                   </div>
                                 </TableCell>
                                 <TableCell>
                                   <div className="space-y-1">
-                                    {Object.entries(rule.set).map(([key, value], j) => (
-                                      <div key={j} className="flex items-center gap-1">
-                                        <span className="text-xs text-slate-400">{key}:</span>
-                                        <Badge variant="outline" className="border-blue-700 text-blue-400">
-                                          {value as string}
-                                        </Badge>
-                                      </div>
-                                    ))}
+                                    {Object.entries(rule.set || {}).map(([key, value], j) => {
+                                      // Format the value into a readable string
+                                      let displayValue = value;
+                                      if (typeof value === 'object' && value !== null) {
+                                        // Handle nested objects by getting all key-value pairs
+                                        const formatNestedObject = (obj: any, parentKey?: string): string => {
+                                          const entries = Object.entries(obj);
+                                          if (entries.length === 0) return '';
+                                          
+                                          const [k, v] = entries[0];
+                                          if (typeof v === 'object' && v !== null) {
+                                            return formatNestedObject(v, k);
+                                          }
+                                          return `${parentKey ? `${parentKey} ` : ''}${k} ${v}`;
+                                        };
+                                        displayValue = formatNestedObject(value);
+                                      }
+                                      return (
+                                        <div key={j} className="flex items-center gap-1">
+                                          <span className="text-xs text-muted-foreground">{key}:</span>
+                                          <Badge variant="outline">
+                                            {String(displayValue)}
+                                          </Badge>
+                                        </div>
+                                      );
+                                    })}
                                   </div>
                                 </TableCell>
                               </TableRow>
@@ -1480,4 +1516,4 @@ export default function RoutingPage() {
       </Dialog>
     </div>
   )
-} 
\ No newline at end of file
+} 
diff --git a/start.sh b/start.sh
old mode 100644
new mode 100755