diff --git a/assets/style.css b/assets/style.css
index ac4ee9f..6e58682 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -23,19 +23,19 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --background: 200 30% 8%;
-        --foreground: 200 20% 96%;
+        --foreground: 200 20% 85%;
         --card: 200 25% 15%;
-        --card-foreground: 200 15% 85%;
+        --card-foreground: 200 15% 75%;
         --popover: 200 50% 8%;
-        --popover-foreground: 200 20% 96%;
+        --popover-foreground: 200 20% 85%;
         --primary: 200 70% 40%;
-        --primary-foreground: 0 0% 100%;
+        --primary-foreground: 0 0% 95%;
         --secondary: 200 30% 20%;
-        --secondary-foreground: 200 20% 96%;
+        --secondary-foreground: 200 20% 85%;
         --muted: 200 30% 20%;
-        --muted-foreground: 200 30% 65%;
+        --muted-foreground: 200 30% 60%;
         --accent: 200 70% 40%;
-        --accent-foreground: 0 0% 100%;
+        --accent-foreground: 0 0% 95%;
         --border: 200 30% 20%;
         --ring: 200 70% 40%;
     }
@@ -55,6 +55,68 @@ body {
     background: hsl(var(--background));
     transition: background-color 0.3s ease;
     min-height: 100vh;
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* Background Elements */
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -2;
+    background: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--primary) / 0.1), hsl(var(--background)));
+}
+
+/* Gradient Orb */
+body::after {
+    content: '';
+    position: fixed;
+    width: 1200px;
+    height: 1200px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    background: radial-gradient(circle at center, 
+        hsl(var(--primary) / 0.3),
+        hsl(var(--secondary) / 0.3),
+        hsl(var(--background)) 70%
+    );
+    opacity: 0.6;
+    filter: blur(40px);
+    animation: gradient-move 30s ease-in-out infinite;
+}
+
+/* Dotted Pattern */
+.container::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    opacity: 0.35;
+    background-image: radial-gradient(circle at 1px 1px, hsl(var(--primary) / 0.5) 1px, transparent 0);
+    background-size: 32px 32px;
+    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
+    pointer-events: none;
+}
+
+@keyframes gradient-move {
+    0% {
+        transform: translate(-50%, -50%) scale(1) rotate(0deg);
+    }
+    25% {
+        transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(0.95) rotate(180deg);
+    }
+    75% {
+        transform: translate(-50%, -50%) scale(1.05) rotate(270deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(1) rotate(360deg);
+    }
 }
 
 /* Layout */
@@ -62,15 +124,17 @@ body {
     max-width: 80rem;
     margin: 0 auto;
     padding: 1.5rem;
+    position: relative;
 }
 
 .grid {
     display: grid;
     gap: 1.5rem;
+    align-items: stretch;
 }
 
 .grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 /* Components */
@@ -79,22 +143,255 @@ body {
     border: 1px solid hsl(var(--border));
     border-radius: var(--radius);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    transition: background-color 0.3s ease, border-color 0.3s ease;
     height: 100%;
     display: flex;
     flex-direction: column;
 }
 
+/* Add glass effect only to root card */
+.card:not(.card .card) {
+    background: hsl(var(--card) / 0.5);
+    backdrop-filter: blur(16px);
+    border: 1px solid hsl(var(--border) / 0.5);
+}
+
+/* Ensure nested cards remain solid */
+.card .card {
+    background: hsl(var(--card));
+    backdrop-filter: none;
+}
+
 .card-header {
-    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem; /* space-y-1.5 */
+    padding: 1.5rem; /* p-6 */
     border-bottom: 1px solid hsl(var(--border));
 }
 
+.card-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: -0.025em;
+    color: hsl(var(--foreground));
+}
+
 .card-content {
-    padding: 1.5rem;
+    padding: 1.5rem; /* p-6 */
     flex: 1;
 }
 
+.card-content h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+    margin-bottom: 1rem;
+}
+
+.card-content h3 svg {
+    width: 1rem;
+    height: 1rem;
+    color: hsl(var(--muted-foreground));
+}
+
+.card-section {
+    padding: 1rem;
+    border-radius: calc(var(--radius) - 0.25rem);
+    background: hsl(var(--secondary) / 0.7);
+    margin-bottom: 1rem;
+}
+
+.card-section:last-child {
+    margin-bottom: 0;
+}
+
+.card-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.card-row + .card-row {
+    margin-top: 0.5rem;
+}
+
+/* Remove the extra margin from the license row */
+.card-row[style*="margin-top"] {
+    margin-top: 0.5rem !important;
+}
+
+.card-row svg {
+    width: 1rem;
+    height: 1rem;
+    color: hsl(var(--muted-foreground));
+}
+
+.card-row span {
+    font-size: 0.875rem;
+    color: hsl(var(--foreground));
+}
+
+.card-row .label {
+    color: hsl(var(--muted-foreground));
+    margin-right: 0.25rem;
+}
+
+/* Update link styling */
+.card-row a {
+    color: hsl(var(--primary));
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.875rem;
+}
+
+.card-row a:hover {
+    text-decoration: underline;
+}
+
+/* Maintainers section styling */
+.maintainers-section {
+    width: 100%;
+    margin-top: 1.5rem;
+}
+
+.maintainers-section h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+    margin-bottom: 0.75rem;
+}
+
+.maintainers-section h3 svg {
+    width: 1rem;
+    height: 1rem;
+    color: hsl(var(--muted-foreground));
+}
+
+.maintainers-table {
+    width: 100%;
+    border-spacing: 0;
+    font-size: 0.875rem;
+}
+
+.maintainers-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid hsl(var(--border));
+}
+
+.maintainers-row:last-child {
+    border-bottom: none;
+}
+
+.maintainer-name {
+    color: hsl(var(--foreground));
+    font-weight: 500;
+}
+
+.maintainer-links {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.maintainer-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: hsl(var(--primary));
+    text-decoration: none;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.maintainer-link:hover {
+    text-decoration: underline;
+}
+
+.maintainer-link svg {
+    color: hsl(var(--muted-foreground));
+}
+
+/* Remove old maintainers styling */
+#maintainersList {
+    display: inline;
+    color: hsl(var(--foreground));
+    font-size: 0.875rem;
+}
+
+#maintainersList span + span::before {
+    content: ', ';
+}
+
+#maintainersContainer {
+    margin-top: 0.5rem;
+}
+
+#maintainersContainer .card-row {
+    display: flex;
+    align-items: flex-start;
+}
+
+#maintainersContainer .label {
+    margin-right: 0.5rem;
+}
+
+/* Update badge styling */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    padding: 0 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    background: hsl(var(--primary) / 0.1);
+    color: hsl(var(--primary));
+    white-space: nowrap;
+}
+
+.badge-secondary {
+    background: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+}
+
+/* Fix ROS2 distributions badges */
+#ros2Distributions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0;
+    padding-bottom: 0.5rem;
+}
+
+#ros2Distributions .badge {
+    margin: 0;
+}
+
+/* Fix tags badges */
+#tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0;
+}
+
+#tags .badge {
+    margin: 0;
+}
+
+/* Header */
 .header-banner {
     position: relative;
     width: 100%;
@@ -104,7 +401,6 @@ body {
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid hsl(var(--border));
-    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .header-banner img {
@@ -120,15 +416,14 @@ body {
     margin-bottom: 2rem;
 }
 
+/* Update header icon */
 .header-icon {
     width: 6rem;
     height: 6rem;
+    min-width: 6rem;
     border-radius: var(--radius);
     object-fit: contain;
     background: hsl(var(--secondary));
-    padding: 0.75rem;
-    border: 1px solid hsl(var(--border));
-    transition: background-color 0.3s ease;
 }
 
 .title {
@@ -136,14 +431,12 @@ body {
     font-weight: 600;
     margin-bottom: 0.5rem;
     color: hsl(var(--foreground));
-    transition: color 0.3s ease;
     line-height: 1.2;
 }
 
 .description {
     color: hsl(var(--muted-foreground));
     font-size: 1.125rem;
-    transition: color 0.3s ease;
 }
 
 /* Tabs */
@@ -154,49 +447,60 @@ body {
 }
 
 .tabs-list {
-    display: flex;
-    gap: 0.5rem;
-    border-bottom: 1px solid hsl(var(--border));
-    margin-bottom: 1.5rem;
-    padding: 0 0.5rem;
+    display: inline-flex;
+    height: 2.25rem; /* h-9 */
+    items-center: center;
+    justify-content: center;
+    background: hsl(var(--muted));
+    padding: 0.25rem; /* p-1 */
+    border-radius: var(--radius);
 }
 
 .tab {
     position: relative;
-    padding: 0.75rem 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    border-radius: calc(var(--radius) - 0.25rem); /* rounded-md */
+    padding: 0 0.75rem;
+    height: 100%;
+    font-family: inherit;
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500; /* font-medium */
+    line-height: inherit;
     color: hsl(var(--muted-foreground));
-    font-weight: 500;
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    background: none;
+    background: transparent;
     border: none;
     outline: none;
     user-select: none;
-    margin-bottom: -1px;
+    transition: all 0.15s ease;
+    cursor: pointer;
 }
 
 .tab:hover {
     color: hsl(var(--foreground));
 }
 
+.tab:focus-visible {
+    outline: none;
+    ring: 2px solid hsl(var(--ring));
+    ring-offset: 2px;
+}
+
 .tab[data-state="active"] {
+    background: hsl(var(--background));
     color: hsl(var(--foreground));
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .tab[data-state="active"]::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
-    background: hsl(var(--primary));
-    border-radius: var(--radius) var(--radius) 0 0;
+    display: none;
 }
 
 .tab-content {
     display: none;
+    margin-top: 0.5rem;
 }
 
 .tab-content[data-state="active"] {
@@ -207,18 +511,15 @@ body {
 .plugin-grid {
     display: grid;
     gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 }
 
 .plugin-card {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1.5rem;
     background: hsl(var(--card));
     border: 1px solid hsl(var(--border));
     border-radius: var(--radius);
-    transition: all 0.3s ease;
+    overflow: hidden;
+    transition: all 0.2s ease;
 }
 
 .plugin-card:hover {
@@ -228,33 +529,38 @@ body {
 
 .plugin-header {
     display: flex;
-    align-items: flex-start;
     gap: 1rem;
+    padding: 1rem;
+}
+
+.plugin-icon-wrapper {
+    position: relative;
+    width: 4rem;
+    height: 4rem;
+    flex-shrink: 0;
 }
 
 .plugin-icon {
-    width: 3rem;
-    height: 3rem;
-    min-width: 3rem;
+    width: 100%;
+    height: 100%;
     border-radius: calc(var(--radius) - 0.25rem);
     object-fit: contain;
     background: hsl(var(--secondary));
     padding: 0.5rem;
-    border: 1px solid hsl(var(--border));
 }
 
 .plugin-info {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
 .plugin-title {
     font-weight: 600;
     color: hsl(var(--foreground));
-    margin-bottom: 0.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    font-size: 1rem;
 }
 
 .plugin-description {
@@ -265,6 +571,45 @@ body {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.plugin-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+}
+
+.plugin-stats {
+    display: flex;
+    gap: 1rem;
+}
+
+.plugin-stat {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: hsl(var(--muted-foreground));
+    font-size: 0.75rem;
+}
+
+.plugin-stat svg {
+    color: hsl(var(--muted-foreground));
+}
+
+.install-button {
+    height: 1.75rem;
+    padding: 0 0.75rem;
+    font-size: 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+.install-button svg {
+    width: 0.875rem;
+    height: 0.875rem;
 }
 
 /* Images */
@@ -273,25 +618,6 @@ img {
     height: auto;
 }
 
-/* Badges */
-.badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    background: hsl(var(--primary) / 0.1);
-    color: hsl(var(--primary));
-    transition: all 0.3s ease;
-    margin: 0.25rem;
-}
-
-.badge-secondary {
-    background: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-}
-
 /* Loading state */
 #loading {
     display: flex;
@@ -300,15 +626,18 @@ img {
     min-height: 20rem;
     color: hsl(var(--muted-foreground));
     font-size: 1.125rem;
-    transition: color 0.3s ease;
 }
 
 .hidden { 
-    display: none; 
+    display: none !important;
 }
 
 /* Responsive */
 @media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+
     .grid-cols-2 {
         grid-template-columns: 1fr;
     }
@@ -326,4 +655,426 @@ img {
     .plugin-grid {
         grid-template-columns: 1fr;
     }
+}
+
+/* Button */
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-radius: calc(var(--radius) - 0.25rem);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    padding: 0.5rem 0.75rem;
+    transition: all 0.15s ease;
+    cursor: pointer;
+    white-space: nowrap;
+    text-decoration: none;
+}
+
+.button-outline {
+    background: transparent;
+    border: 1px solid hsl(var(--border));
+    color: hsl(var(--foreground));
+}
+
+.button-outline:hover {
+    background: hsl(var(--accent) / 0.1);
+    color: hsl(var(--accent));
+}
+
+.button-group {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Header content styling */
+.header-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.flex-1 {
+    flex: 1;
+    min-width: 0;
+}
+
+.flex {
+    display: flex;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+/* Plugin Layout */
+.plugin-layout {
+    display: grid;
+    grid-template-columns: 350px 1fr;
+    gap: 1.5rem;
+    height: calc(100vh - 24rem);
+    min-height: 400px;
+}
+
+/* Plugin List */
+.plugin-list {
+    border-right: 1px solid hsl(var(--border));
+    overflow-y: auto;
+    padding-right: 1rem;
+}
+
+.plugin-list-item {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    margin-bottom: 0.75rem;
+}
+
+.plugin-list-item:last-child {
+    margin-bottom: 0;
+}
+
+.plugin-list-item:hover {
+    background: hsl(var(--accent) / 0.05);
+    border-color: hsl(var(--accent) / 0.2);
+}
+
+.plugin-list-item.selected {
+    background: hsl(var(--card));
+    border-color: hsl(var(--primary));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.plugin-list-icon {
+    width: 3rem;
+    height: 3rem;
+    flex-shrink: 0;
+}
+
+.plugin-list-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.plugin-list-title {
+    font-weight: 600;
+    color: hsl(var(--foreground));
+    font-size: 0.875rem;
+}
+
+.plugin-list-description {
+    color: hsl(var(--muted-foreground));
+    font-size: 0.75rem;
+    line-height: 1.4;
+    margin-top: 0.25rem;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Plugin Details */
+.plugin-details {
+    overflow-y: auto;
+    position: relative;
+    height: 100%;
+    background: hsl(var(--card));
+}
+
+.plugin-details-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid hsl(var(--border));
+}
+
+.plugin-details-icon {
+    width: 4rem;
+    height: 4rem;
+    flex-shrink: 0;
+    border-radius: calc(var(--radius) - 0.25rem);
+    overflow: hidden;
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--secondary));
+}
+
+.plugin-details-icon .plugin-icon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    padding: 0.5rem;
+}
+
+/* Plugin Images */
+.image-grid {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+    padding-bottom: 1rem;
+    -webkit-overflow-scrolling: touch;
+}
+
+.image-item {
+    position: relative;
+    flex-shrink: 0;
+    border-radius: var(--radius);
+    overflow: hidden;
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--muted));
+}
+
+.image-item.main {
+    width: 500px;
+    height: 300px;
+}
+
+.image-item.angle {
+    width: 300px;
+    height: 300px;
+}
+
+.image-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.image-label {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.5rem 1rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+/* Plugin Details Tabs */
+.plugin-details-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.plugin-details-tabs-list {
+    display: inline-flex;
+    height: 2.25rem;
+    align-items: center;
+    justify-content: center;
+    background: hsl(var(--muted));
+    padding: 0.25rem;
+    border-radius: var(--radius);
+}
+
+.plugin-details-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    border-radius: calc(var(--radius) - 0.25rem);
+    padding: 0 0.75rem;
+    height: 100%;
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: inherit;
+    color: hsl(var(--muted-foreground));
+    background: transparent;
+    border: none;
+    outline: none;
+    user-select: none;
+    transition: all 0.15s ease;
+    cursor: pointer;
+}
+
+.plugin-details-tab:hover {
+    color: hsl(var(--foreground));
+}
+
+.plugin-details-tab:focus-visible {
+    outline: none;
+    ring: 2px solid hsl(var(--ring));
+    ring-offset: 2px;
+}
+
+.plugin-details-tab[data-state="active"] {
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.plugin-details-tab-content {
+    display: none;
+    padding: 1.5rem;
+    border-radius: var(--radius);
+    background: hsl(var(--secondary) / 0.7);
+    border: 1px solid hsl(var(--border));
+}
+
+.plugin-details-tab-content[data-state="active"] {
+    display: block;
+}
+
+/* ROS2 Configuration */
+#detailsTopics {
+    display: grid;
+    gap: 0.5rem;
+}
+
+/* Capabilities */
+#detailsCapabilities {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+/* Actions tab styling */
+#detailsActions {
+    margin: -1.5rem;
+    display: grid;
+    gap: 1px;
+    background: hsl(var(--border));
+}
+
+#detailsActions .card {
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    background: hsl(var(--card));
+}
+
+#detailsActions .card .card-content {
+    padding: 1.5rem;
+}
+
+/* Secondary Card Style */
+.card-secondary {
+    padding: 1rem;
+    border-radius: var(--radius);
+    background: hsl(var(--secondary) / 0.7);
+    border: 1px solid hsl(var(--border));
+}
+
+.card-secondary + .card-secondary {
+    margin-top: 1rem;
+}
+
+.card-secondary h4 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: hsl(var(--foreground));
+}
+
+/* Update image grid container to match new styling */
+#detailsImages {
+    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
+    padding: 1.5rem;
+    background: hsl(var(--card));
+    border-bottom: 1px solid hsl(var(--border));
+}
+
+/* Nested cards in tab content */
+.plugin-details-tab-content .card {
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    margin-top: 1rem;
+}
+
+.plugin-details-tab-content .card:first-child {
+    margin-top: 0;
+}
+
+/* Documentation section */
+.plugin-details-tab-content .card .card-header {
+    padding: 1rem;
+}
+
+.plugin-details-tab-content .card .card-content {
+    padding: 1rem;
+}
+
+/* Empty State */
+#emptyState {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    text-align: center;
+    background: hsl(var(--card));
+}
+
+/* Card Sections */
+.card-section {
+    padding: 1rem;
+    border-radius: calc(var(--radius) - 0.25rem);
+    background: hsl(var(--secondary) / 0.7);
+    margin-bottom: 1rem;
+}
+
+.card-section:last-child {
+    margin-bottom: 0;
+}
+
+.card-section h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+    margin-bottom: 1rem;
+}
+
+.card-section h3 svg {
+    width: 1rem;
+    height: 1rem;
+    color: hsl(var(--muted-foreground));
+}
+
+/* Code Blocks */
+code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 0.875rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .plugin-layout {
+        grid-template-columns: 1fr;
+        height: auto;
+    }
+
+    .plugin-list {
+        border-right: none;
+        border-bottom: 1px solid hsl(var(--border));
+        padding-right: 0;
+        padding-bottom: 1rem;
+        max-height: 400px;
+    }
+
+    .image-grid {
+        flex-direction: column;
+    }
+
+    .image-item.main,
+    .image-item.angle {
+        width: 100%;
+        height: 200px;
+    }
 } 
\ No newline at end of file
diff --git a/index.html b/index.html
index 9148bb0..dfcf48b 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HRIStudio Robot Plugins</title>
     <link rel="stylesheet" href="assets/style.css">
+    <link rel="icon" type="image/png" id="favicon">
+    <script>
+        // Update favicon when logo is loaded
+        async function updateFavicon() {
+            try {
+                const response = await fetch('repository.json');
+                const data = await response.json();
+                if (data.assets?.logo) {
+                    document.getElementById('favicon').href = data.assets.logo;
+                }
+            } catch (error) {
+                console.error('Failed to load favicon:', error);
+            }
+        }
+        updateFavicon();
+    </script>
 </head>
 <body>
     <div class="container">
@@ -20,8 +36,11 @@
                 <div class="card-content">
                     <div class="header-content">
                         <img id="repoIcon" alt="Repository Icon" class="header-icon hidden">
-                        <div>
-                            <h1 id="repoName" class="title"></h1>
+                        <div class="flex-1">
+                            <div class="flex items-center justify-between">
+                                <h1 id="repoName" class="title"></h1>
+                                <div id="repoLinks" class="button-group"></div>
+                            </div>
                             <p id="repoDescription" class="description"></p>
                         </div>
                     </div>
@@ -42,16 +61,63 @@
                                         <h2>Author</h2>
                                     </div>
                                     <div class="card-content">
-                                        <div>
-                                            <span>Name:</span>
+                                        <div class="card-row">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                                                <circle cx="12" cy="7" r="4"></circle>
+                                            </svg>
+                                            <span class="label">Name:</span>
                                             <span id="authorName"></span>
                                         </div>
-                                        <div id="authorOrgContainer" class="hidden">
-                                            <span>Organization:</span>
+                                        <div id="authorOrgContainer" class="card-row hidden">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
+                                                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
+                                            </svg>
+                                            <span class="label">Organization:</span>
                                             <span id="authorOrg"></span>
                                         </div>
-                                        <div id="authorUrlContainer" class="hidden">
-                                            <a id="authorUrl" target="_blank">View Profile</a>
+                                        <div id="authorEmailContainer" class="card-row hidden">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                                                <polyline points="22,6 12,13 2,6"></polyline>
+                                            </svg>
+                                            <span class="label">Email:</span>
+                                            <a id="authorEmail" target="_blank" class="text-primary hover:underline"></a>
+                                        </div>
+                                        <div id="authorUrlContainer" class="card-row hidden">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                                                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                                            </svg>
+                                            <span class="label">Website:</span>
+                                            <a id="authorUrl" target="_blank" class="text-primary hover:underline">View</a>
+                                        </div>
+                                        <div id="maintainersContainer" class="card-row hidden">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                                                <circle cx="9" cy="7" r="4"></circle>
+                                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                                            </svg>
+                                            <span class="label">Maintainers:</span>
+                                            <div id="maintainersList"></div>
+                                        </div>
+                                        <div class="card-row">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+                                                <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
+                                            </svg>
+                                            <span class="label">License:</span>
+                                            <span id="license"></span>
+                                        </div>
+                                        <div class="card-row">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                <circle cx="12" cy="12" r="10"></circle>
+                                                <polyline points="12 6 12 12 16 14"></polyline>
+                                            </svg>
+                                            <span class="label">Last Updated:</span>
+                                            <span id="lastUpdated"></span>
                                         </div>
                                     </div>
                                 </div>
@@ -62,22 +128,32 @@
                                         <h2>Compatibility</h2>
                                     </div>
                                     <div class="card-content">
-                                        <div>
-                                            <h3>HRIStudio</h3>
-                                            <div>
-                                                <span>Min Version:</span>
+                                        <div class="card-section">
+                                            <h3>
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
+                                                HRIStudio
+                                            </h3>
+                                            <div class="card-row">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-minus"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/></svg>
+                                                <span class="label">Minimum Version:</span>
                                                 <span id="hriMin"></span>
                                             </div>
-                                            <div id="hriRecommendedContainer" class="hidden">
-                                                <span>Recommended:</span>
+                                            <div id="hriRecommendedContainer" class="card-row hidden">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
+                                                <span class="label">Recommended:</span>
                                                 <span id="hriRecommended"></span>
                                             </div>
                                         </div>
-                                        <div id="ros2Container" class="hidden">
-                                            <h3>ROS 2</h3>
-                                            <div id="ros2Distributions" style="margin: 0.5rem 0;"></div>
-                                            <div id="ros2RecommendedContainer" class="hidden">
-                                                <span>Recommended:</span>
+
+                                        <div id="ros2Container" class="card-section hidden">
+                                            <h3>
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip"><circle cx="12" cy="5" r="1"/><circle cx="19" cy="5" r="1"/><circle cx="5" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="12" cy="19" r="1"/><circle cx="19" cy="19" r="1"/><circle cx="5" cy="19" r="1"/></svg>
+                                                ROS 2
+                                            </h3>
+                                            <div id="ros2Distributions" class="flex flex-wrap gap-1 mb-2"></div>
+                                            <div id="ros2RecommendedContainer" class="card-row hidden">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
+                                                <span class="label">Recommended:</span>
                                                 <span id="ros2Recommended"></span>
                                             </div>
                                         </div>
@@ -100,14 +176,157 @@
                         <div class="tab-content" role="tabpanel" data-tab="plugins" aria-hidden="true">
                             <div class="card">
                                 <div class="card-header">
-                                    <div style="display: flex; justify-content: space-between; align-items: center;">
-                                        <h2 style="margin: 0;">Available Plugins</h2>
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <h2>Available Plugins</h2>
+                                            <p class="text-sm text-muted-foreground mt-1">
+                                                Browse robot plugins from this repository
+                                            </p>
+                                        </div>
                                         <span class="badge badge-secondary" id="pluginCount"></span>
                                     </div>
                                 </div>
                                 <div class="card-content">
-                                    <div id="pluginGrid" class="plugin-grid">
-                                        <!-- Plugins will be loaded here -->
+                                    <div class="plugin-layout">
+                                        <!-- Plugin List -->
+                                        <div class="plugin-list">
+                                            <div id="pluginList"></div>
+                                        </div>
+
+                                        <!-- Plugin Details -->
+                                        <div class="plugin-details">
+                                            <div id="pluginDetails" class="hidden">
+                                                <div class="plugin-details-header">
+                                                    <div class="mb-4 flex items-start justify-between">
+                                                        <div class="flex items-center gap-4">
+                                                            <div class="plugin-details-icon">
+                                                                <img id="detailsIcon" alt="" class="plugin-icon">
+                                                            </div>
+                                                            <div class="flex-1 min-w-0">
+                                                                <h3 id="detailsTitle" class="text-xl font-semibold"></h3>
+                                                                <p id="detailsDescription" class="mt-1 text-muted-foreground"></p>
+                                                                <div class="mt-4 flex items-center gap-2">
+                                                                    <span id="detailsSpeed" class="badge badge-secondary"></span>
+                                                                    <span id="detailsBattery" class="badge badge-secondary"></span>
+                                                                    <span id="detailsWeight" class="badge badge-secondary"></span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="flex items-center gap-2">
+                                                            <a id="detailsDocsButton" href="#" target="_blank" rel="noopener noreferrer" class="button button-outline">
+                                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                                    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+                                                                    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+                                                                </svg>
+                                                                Documentation
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div class="p-6">
+                                                    <div class="plugin-details-tabs">
+                                                        <div class="plugin-details-tabs-list" role="tablist">
+                                                            <button class="plugin-details-tab" role="tab" aria-selected="true" data-state="active" data-plugin-tab="plugin-overview">Overview</button>
+                                                            <button class="plugin-details-tab" role="tab" aria-selected="false" data-plugin-tab="plugin-specs">Specifications</button>
+                                                            <button class="plugin-details-tab" role="tab" aria-selected="false" data-plugin-tab="plugin-actions">Actions</button>
+                                                        </div>
+
+                                                        <div class="plugin-details-tab-content" data-state="active" role="tabpanel" data-plugin-tab="plugin-overview">
+                                                            <div id="detailsImages" class="relative mb-6">
+                                                                <!-- Images will be loaded here -->
+                                                            </div>
+                                                            <div class="card-secondary">
+                                                                <h4>Documentation</h4>
+                                                                <div class="grid gap-2 text-sm">
+                                                                    <a id="detailsMainDocs" href="#" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">
+                                                                        User Manual
+                                                                    </a>
+                                                                    <a id="detailsApiDocs" href="#" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline hidden">
+                                                                        API Reference
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div class="plugin-details-tab-content" role="tabpanel" data-plugin-tab="plugin-specs">
+                                                            <div class="space-y-6">
+                                                                <div class="card-secondary">
+                                                                    <h4>Physical Specifications</h4>
+                                                                    <div class="grid gap-4 md:grid-cols-2">
+                                                                        <div class="flex items-center gap-2">
+                                                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                                                <path d="M19 21l2-2v-6"/><path d="M12 3v18"/><path d="m5 21-2-2v-6"/>
+                                                                                <path d="M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2"/>
+                                                                                <path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
+                                                                            </svg>
+                                                                            <span id="detailsDimensions" class="text-sm"></span>
+                                                                        </div>
+                                                                        <div class="flex items-center gap-2">
+                                                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                                                <path d="m5 8 6 6"/><path d="m4 14 6 6 10-10-6-6-10 10z"/>
+                                                                            </svg>
+                                                                            <span id="detailsSpeedFull" class="text-sm"></span>
+                                                                        </div>
+                                                                        <div class="flex items-center gap-2">
+                                                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                                                <path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/>
+                                                                            </svg>
+                                                                            <span id="detailsBatteryFull" class="text-sm"></span>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+
+                                                                <div class="card-secondary">
+                                                                    <h4>Capabilities</h4>
+                                                                    <div id="detailsCapabilities" class="flex flex-wrap gap-2">
+                                                                        <!-- Capabilities will be loaded here -->
+                                                                    </div>
+                                                                </div>
+
+                                                                <div class="card-secondary">
+                                                                    <h4>ROS 2 Configuration</h4>
+                                                                    <div class="grid gap-3 text-sm">
+                                                                        <div>
+                                                                            <span class="text-muted-foreground">Namespace: </span>
+                                                                            <code id="detailsNamespace" class="rounded bg-muted px-1.5 py-0.5"></code>
+                                                                        </div>
+                                                                        <div>
+                                                                            <span class="text-muted-foreground">Node Prefix: </span>
+                                                                            <code id="detailsNodePrefix" class="rounded bg-muted px-1.5 py-0.5"></code>
+                                                                        </div>
+                                                                        <div class="grid gap-2">
+                                                                            <span class="text-muted-foreground">Default Topics:</span>
+                                                                            <div id="detailsTopics" class="pl-4">
+                                                                                <!-- Topics will be loaded here -->
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+
+                                                        <div class="plugin-details-tab-content" role="tabpanel" data-plugin-tab="plugin-actions">
+                                                            <div id="detailsActions" class="space-y-4">
+                                                                <!-- Actions will be loaded here -->
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div id="emptyState" class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
+                                                <div class="flex h-16 w-16 items-center justify-center rounded-lg bg-muted mb-4">
+                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground">
+                                                        <path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/>
+                                                        <path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>
+                                                    </svg>
+                                                </div>
+                                                <h3 class="text-lg font-medium">No Plugin Selected</h3>
+                                                <p class="text-sm text-muted-foreground mt-1">
+                                                    Select a plugin from the list to view its details
+                                                </p>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -119,10 +338,10 @@
     </div>
 
     <script>
-        // Tab management
+        // Separate tab management for root and plugin details
         document.querySelectorAll('.tab').forEach(tab => {
             tab.addEventListener('click', () => {
-                // Update tab states
+                // Update root tab states
                 document.querySelectorAll('.tab').forEach(t => {
                     t.setAttribute('data-state', '');
                     t.setAttribute('aria-selected', 'false');
@@ -130,7 +349,7 @@
                 tab.setAttribute('data-state', 'active');
                 tab.setAttribute('aria-selected', 'true');
 
-                // Update content states
+                // Update root content states
                 const tabId = tab.getAttribute('data-tab');
                 document.querySelectorAll('.tab-content').forEach(content => {
                     const isActive = content.getAttribute('data-tab') === tabId;
@@ -140,6 +359,27 @@
             });
         });
 
+        // Add separate tab management for plugin details
+        document.querySelectorAll('.plugin-details-tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                // Update plugin details tab states
+                document.querySelectorAll('.plugin-details-tab').forEach(t => {
+                    t.setAttribute('data-state', '');
+                    t.setAttribute('aria-selected', 'false');
+                });
+                tab.setAttribute('data-state', 'active');
+                tab.setAttribute('aria-selected', 'true');
+
+                // Update plugin details content states
+                const tabId = tab.getAttribute('data-plugin-tab');
+                document.querySelectorAll('.plugin-details-tab-content').forEach(content => {
+                    const isActive = content.getAttribute('data-plugin-tab') === tabId;
+                    content.setAttribute('data-state', isActive ? 'active' : '');
+                    content.setAttribute('aria-hidden', isActive ? 'false' : 'true');
+                });
+            });
+        });
+
         // Repository data loading
         async function loadRepositoryData() {
             try {
@@ -153,8 +393,175 @@
                 document.getElementById('repoName').textContent = data.name;
                 document.getElementById('repoDescription').textContent = data.description || '';
                 
-                // Update stats
-                document.getElementById('pluginCount').textContent = `${data.stats?.plugins || 0} plugins`;
+                // Add repository links
+                const repoLinks = document.getElementById('repoLinks');
+                if (data.urls?.git) {
+                    const gitButton = document.createElement('a');
+                    gitButton.href = data.urls.git;
+                    gitButton.target = '_blank';
+                    gitButton.rel = 'noopener noreferrer';
+                    gitButton.className = 'button button-outline';
+                    gitButton.innerHTML = `
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-git-2"><path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5"/><circle cx="13" cy="12" r="2"/><path d="M18 19c-2.8 0-5-2.2-5-5v8"/><circle cx="20" cy="19" r="2"/></svg>
+                        View Git Repository
+                    `;
+                    repoLinks.appendChild(gitButton);
+                }
+                
+                // Load plugins
+                const pluginsResponse = await fetch('plugins/index.json');
+                const pluginFiles = await pluginsResponse.json();
+                
+                // Update plugin count
+                document.getElementById('pluginCount').textContent = `${pluginFiles.length} ${pluginFiles.length === 1 ? 'plugin' : 'plugins'}`;
+
+                // Clear existing plugins
+                const pluginList = document.getElementById('pluginList');
+                pluginList.innerHTML = '';
+
+                // Load each plugin
+                for (const pluginFile of pluginFiles) {
+                    const pluginResponse = await fetch(`plugins/${pluginFile}`);
+                    const plugin = await pluginResponse.json();
+
+                    const card = document.createElement('div');
+                    card.className = 'plugin-list-item';
+                    card.innerHTML = `
+                        <div class="plugin-list-icon">
+                            <img src="${plugin.assets.thumbnailUrl}" alt="${plugin.name}" class="plugin-icon">
+                        </div>
+                        <div class="plugin-list-info">
+                            <div class="flex items-center justify-between">
+                                <div class="plugin-list-title">${plugin.name}</div>
+                                <span class="badge badge-secondary">${plugin.platform}</span>
+                            </div>
+                            <div class="plugin-list-description">${plugin.description || ''}</div>
+                        </div>
+                    `;
+
+                    // Add click handler
+                    card.addEventListener('click', () => {
+                        // Remove selected class from all items
+                        document.querySelectorAll('.plugin-list-item').forEach(item => {
+                            item.classList.remove('selected');
+                        });
+                        // Add selected class to clicked item
+                        card.classList.add('selected');
+                        
+                        // Show plugin details
+                        document.getElementById('pluginDetails').classList.remove('hidden');
+                        document.getElementById('emptyState').classList.add('hidden');
+                        
+                        // Update details
+                        document.getElementById('detailsIcon').src = plugin.assets.thumbnailUrl;
+                        document.getElementById('detailsTitle').textContent = plugin.name;
+                        document.getElementById('detailsDescription').textContent = plugin.description || '';
+                        document.getElementById('detailsDocsButton').href = plugin.documentation.mainUrl;
+                        document.getElementById('detailsSpeed').textContent = `${plugin.specs.maxSpeed}m/s`;
+                        document.getElementById('detailsBattery').textContent = `${plugin.specs.batteryLife}h`;
+                        document.getElementById('detailsWeight').textContent = `${plugin.specs.dimensions.weight}kg`;
+                        
+                        // Load images in the overview tab
+                        const imagesContainer = document.getElementById('detailsImages');
+                        imagesContainer.innerHTML = `
+                            <div class="image-grid">
+                                <div class="image-item main">
+                                    <img src="${plugin.assets.images.main}" alt="${plugin.name} main view">
+                                </div>
+                                ${plugin.assets.images.angles ? Object.entries(plugin.assets.images.angles)
+                                    .filter(([_, url]) => url)
+                                    .map(([angle, url]) => `
+                                        <div class="image-item angle">
+                                            <img src="${url}" alt="${plugin.name} ${angle} view">
+                                            <div class="image-label">${angle} View</div>
+                                        </div>
+                                    `).join('') : ''}
+                            </div>
+                        `;
+                        
+                        // Update specifications
+                        document.getElementById('detailsDimensions').textContent = 
+                            `${plugin.specs.dimensions.length}m × ${plugin.specs.dimensions.width}m × ${plugin.specs.dimensions.height}m`;
+                        document.getElementById('detailsSpeedFull').textContent = `${plugin.specs.maxSpeed}m/s`;
+                        document.getElementById('detailsBatteryFull').textContent = `${plugin.specs.batteryLife}h`;
+                        
+                        // Update capabilities
+                        const capsContainer = document.getElementById('detailsCapabilities');
+                        capsContainer.innerHTML = '';
+                        plugin.specs.capabilities.forEach(cap => {
+                            const badge = document.createElement('span');
+                            badge.className = 'badge badge-secondary';
+                            badge.textContent = cap;
+                            capsContainer.appendChild(badge);
+                        });
+                        
+                        // Update ROS2 config
+                        document.getElementById('detailsNamespace').textContent = plugin.ros2Config.namespace;
+                        document.getElementById('detailsNodePrefix').textContent = plugin.ros2Config.nodePrefix;
+                        
+                        const topicsContainer = document.getElementById('detailsTopics');
+                        topicsContainer.innerHTML = '';
+                        Object.entries(plugin.ros2Config.defaultTopics).forEach(([name, topic]) => {
+                            const div = document.createElement('div');
+                            div.innerHTML = `
+                                <span class="text-muted-foreground">${name}: </span>
+                                <code class="rounded bg-muted px-1.5 py-0.5">${topic}</code>
+                            `;
+                            topicsContainer.appendChild(div);
+                        });
+                        
+                        // Update documentation links
+                        document.getElementById('detailsMainDocs').href = plugin.documentation.mainUrl;
+                        const apiDocs = document.getElementById('detailsApiDocs');
+                        if (plugin.documentation.apiReference) {
+                            apiDocs.href = plugin.documentation.apiReference;
+                            apiDocs.classList.remove('hidden');
+                        } else {
+                            apiDocs.classList.add('hidden');
+                        }
+                        
+                        // Update actions
+                        const actionsContainer = document.getElementById('detailsActions');
+                        actionsContainer.innerHTML = '';
+                        plugin.actions.forEach(action => {
+                            const div = document.createElement('div');
+                            div.className = 'card';
+                            div.innerHTML = `
+                                <div class="card-content">
+                                    <div class="mb-3 flex items-center justify-between">
+                                        <h4 class="font-medium">${action.title}</h4>
+                                        <span class="badge badge-secondary">${action.type}</span>
+                                    </div>
+                                    <p class="mb-4 text-sm text-muted-foreground">
+                                        ${action.description}
+                                    </p>
+                                    <div class="grid gap-2">
+                                        <h5 class="text-sm font-medium text-muted-foreground">Parameters:</h5>
+                                        <div class="grid gap-2 pl-4">
+                                            ${Object.entries(action.parameters.properties).map(([name, prop]) => `
+                                                <div class="text-sm">
+                                                    <span class="font-medium">${prop.title}</span>
+                                                    ${prop.unit ? `<span class="text-muted-foreground"> (${prop.unit})</span>` : ''}
+                                                    ${prop.description ? `<p class="mt-0.5 text-muted-foreground">${prop.description}</p>` : ''}
+                                                </div>
+                                            `).join('')}
+                                        </div>
+                                    </div>
+                                </div>
+                            `;
+                            actionsContainer.appendChild(div);
+                        });
+
+                        // Trigger click on the Overview tab to show it by default
+                        document.querySelector('.plugin-details-tabs-list .plugin-details-tab[data-plugin-tab="plugin-overview"]').click();
+                    });
+
+                    pluginList.appendChild(card);
+                }
+
+                // Show empty state initially
+                document.getElementById('pluginDetails').classList.add('hidden');
+                document.getElementById('emptyState').classList.remove('hidden');
                 
                 // Update author info
                 document.getElementById('authorName').textContent = data.author.name;
@@ -162,11 +569,28 @@
                     document.getElementById('authorOrgContainer').classList.remove('hidden');
                     document.getElementById('authorOrg').textContent = data.author.organization;
                 }
+                if (data.author.email) {
+                    document.getElementById('authorEmailContainer').classList.remove('hidden');
+                    const emailLink = document.getElementById('authorEmail');
+                    emailLink.href = `mailto:${data.author.email}`;
+                    emailLink.textContent = data.author.email;
+                }
                 if (data.author.url) {
                     document.getElementById('authorUrlContainer').classList.remove('hidden');
                     document.getElementById('authorUrl').href = data.author.url;
                 }
                 
+                // Update maintainers
+                if (data.maintainers && data.maintainers.length > 0) {
+                    document.getElementById('maintainersContainer').classList.remove('hidden');
+                    const maintainersList = document.getElementById('maintainersList');
+                    maintainersList.innerHTML = data.maintainers.map(maintainer => 
+                        `<span>${maintainer.name}${maintainer.url ? 
+                            ` (<a href="${maintainer.url}" target="_blank" rel="noopener noreferrer">Git</a>)` : 
+                            ''}</span>`
+                    ).join('');
+                }
+                
                 // Update compatibility
                 document.getElementById('hriMin').textContent = data.compatibility.hristudio.min;
                 if (data.compatibility.hristudio.recommended) {
@@ -212,31 +636,14 @@
                     banner.querySelector('img').src = data.assets.banner;
                 }
 
-                // Load plugins
-                const pluginGrid = document.getElementById('pluginGrid');
-                const pluginsResponse = await fetch('plugins/index.json');
-                const pluginFiles = await pluginsResponse.json();
-
-                for (const pluginFile of pluginFiles) {
-                    const pluginResponse = await fetch(`plugins/${pluginFile}`);
-                    const plugin = await pluginResponse.json();
-
-                    const card = document.createElement('div');
-                    card.className = 'plugin-card';
-                    card.innerHTML = `
-                        <div class="plugin-header">
-                            <img src="${plugin.assets.thumbnailUrl}" alt="${plugin.name}" class="plugin-icon">
-                            <div class="plugin-info">
-                                <div class="plugin-title">${plugin.name}</div>
-                                <div class="plugin-description">${plugin.description || ''}</div>
-                            </div>
-                        </div>
-                        <div>
-                            <span class="badge badge-secondary">${plugin.platform}</span>
-                        </div>
-                    `;
-                    pluginGrid.appendChild(card);
-                }
+                // Update license and last updated
+                document.getElementById('license').textContent = data.license;
+                const lastUpdated = new Date(data.lastUpdated);
+                document.getElementById('lastUpdated').textContent = lastUpdated.toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric'
+                });
                 
                 // Show content
                 document.getElementById('loading').classList.add('hidden');
diff --git a/repository.json b/repository.json
index 7b9fd54..4f5c3d0 100644
--- a/repository.json
+++ b/repository.json
@@ -3,14 +3,15 @@
   "name": "HRIStudio Official Robot Plugins",
   "description": "Official collection of robot plugins maintained by the HRIStudio team",
   "urls": {
-    "repository": "https://soconnor0919.github.io/robot-plugins"
+    "git": "https://github.com/soconnor0919/robot-plugins",
+    "repository": "https://repo.hristudio.com"
   },
   "official": true,
   "trust": "official",
   "author": {
     "name": "HRIStudio Team",
-    "email": "team@hristudio.org",
-    "url": "https://hristudio.org",
+    "email": "support@hristudio.com",
+    "url": "https://hristudio.com",
     "organization": "HRIStudio"
   },
   "maintainers": [