-

kms/web/src/App.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Box, Title, Tabs, Stack, Text } from '@mantine/core';
+import { Box, Title, Tabs, Stack, Text, ActionIcon, Group, Select } from '@mantine/core';
 import { 
   IconApps, 
   IconKey, 
   IconTestPipe, 
   IconFileText,
-  IconDashboard 
+  IconDashboard,
+  IconStar,
+  IconStarFilled 
 } from '@tabler/icons-react';
 import Applications from './components/Applications';
 import Tokens from './components/Tokens';
@@ -25,6 +27,8 @@ const App: React.FC = () => {
   };
 
   const [currentRoute, setCurrentRoute] = React.useState(getCurrentRoute());
+  const [isFavorited, setIsFavorited] = React.useState(false);
+  const [selectedColor, setSelectedColor] = React.useState('');
 
   // Listen for URL changes (for when the shell navigates)
   React.useEffect(() => {
@@ -51,6 +55,21 @@ const App: React.FC = () => {
     }
   };
 
+  const toggleFavorite = () => {
+    setIsFavorited(prev => !prev);
+  };
+
+  const colorOptions = [
+    { value: 'red', label: 'Red' },
+    { value: 'blue', label: 'Blue' },
+    { value: 'green', label: 'Green' },
+    { value: 'purple', label: 'Purple' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'pink', label: 'Pink' },
+    { value: 'teal', label: 'Teal' },
+  ];
+
+
   const renderContent = () => {
     switch (currentRoute) {
       case 'applications':
@@ -67,15 +86,45 @@ const App: React.FC = () => {
   };
 
   return (
-    <Box w="100%">
+    <Box w="100%" pos="relative">
       <Stack gap="lg">
         <div>
-          <Title order={1} size="h2" mb="xs">
-            Key Management System
-          </Title>
-          <Text c="dimmed" size="sm">
-            Manage API keys, tokens, and access permissions
-          </Text>
+          <Group justify="space-between" align="flex-start">
+            <div>
+              <Group align="center" gap="sm" mb="xs">
+                <Title order={1} size="h2">
+                  Key Management System
+                </Title>
+                <ActionIcon
+                  variant="subtle"
+                  size="lg"
+                  onClick={toggleFavorite}
+                  aria-label={isFavorited ? "Remove from favorites" : "Add to favorites"}
+                >
+                  {isFavorited ? (
+                    <IconStarFilled size={20} color="gold" />
+                  ) : (
+                    <IconStar size={20} />
+                  )}
+                </ActionIcon>
+              </Group>
+            </div>
+
+            {/* Right-side controls */}
+            <Group align="flex-start" gap="lg">
+              <div>
+                <Select
+                  placeholder="Choose a color"
+                  data={colorOptions}
+                  value={selectedColor}
+                  onChange={(value) => setSelectedColor(value || '')}
+                  size="sm"
+                  w={150}
+                />
+              </div>
+            </Group>
+
+          </Group>
         </div>
 
         <Tabs value={currentRoute} onChange={handleTabChange}>

kms/web/src/components/Applications.tsx

@@ -233,9 +233,6 @@ const Applications: React.FC = () => {
           <Title order={2} mb="xs">
             Applications
           </Title>
-          <Text c="dimmed">
-            Manage your registered applications and their configurations
-          </Text>
         </div>
         <Button
           leftSection={<IconPlus size={16} />}

kms/web/src/components/Audit.tsx

@@ -202,9 +202,6 @@ const Audit: React.FC = () => {
           <Title order={2} mb="xs">
             Audit Log
           </Title>
-          <Text c="dimmed">
-            View and search system audit events and security logs
-          </Text>
         </div>
         <Button
           leftSection={<IconRefresh size={16} />}

kms/web/src/components/Dashboard.tsx

@@ -110,15 +110,6 @@ const Dashboard: React.FC = () => {
 
   return (
     <Stack gap="lg">
-      <div>
-        <Title order={2} mb="xs">
-          Dashboard Overview
-        </Title>
-        <Text c="dimmed">
-          Monitor your key management system status and metrics
-        </Text>
-      </div>
-
       <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
         {statCards.map((stat) => (
           <Card key={stat.title} shadow="sm" radius="md" withBorder p="lg">

kms/web/src/components/TokenTester.tsx

@@ -136,15 +136,6 @@ const TokenTester: React.FC = () => {
 
   return (
     <Stack gap="lg">
-      <div>
-        <Title order={2} mb="xs">
-          Token Tester
-        </Title>
-        <Text c="dimmed">
-          Test and verify API tokens against your applications
-        </Text>
-      </div>
-
       <Grid>
         <Grid.Col span={{ base: 12, md: 6 }}>
           <Card shadow="sm" radius="md" withBorder p="lg">

kms/web/src/components/Tokens.tsx

@@ -242,9 +242,6 @@ const Tokens: React.FC = () => {
           <Title order={2} mb="xs">
             API Tokens
           </Title>
-          <Text c="dimmed">
-            Manage static API tokens for your applications
-          </Text>
         </div>
         <Button
           leftSection={<IconPlus size={16} />}