working api connection

src/components/Layout.css

@@ -13,6 +13,8 @@
   align-items: center;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   position: relative;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .nav-brand {
@@ -33,6 +35,40 @@
   font-weight: 600;
 }
 
+/* API Status Indicator */
+.api-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #ecf0f1;
+}
+
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #95a5a6;
+}
+
+.status-checking {
+  background-color: #f39c12;
+  animation: pulse 1.5s infinite;
+}
+
+.status-available {
+  background-color: #27ae60;
+}
+
+.status-unavailable {
+  background-color: #e74c3c;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
 /* Desktop Navigation */
 .nav-links-desktop {
   display: flex;