diff --git a/components/RsTab.vue b/components/RsTab.vue
index cf9fc3b..7198969 100644
--- a/components/RsTab.vue
+++ b/components/RsTab.vue
@@ -25,11 +25,11 @@ const props = defineProps({
 // Slots
 const slots = useSlots();
 
-const tabs = ref(slots.default().map((tab) => tab.props));
-const selectedTitle = ref(tabs.value[0]["title"]);
+const tabs = ref(slots.default().map((tab) => tab.props).filter(Boolean));
+const selectedTitle = ref(tabs.value.length > 0 && tabs.value[0] ? tabs.value[0]["title"] : "");
 
 tabs.value.forEach((tab) => {
-  if (typeof tab.active !== "undefined") {
+  if (tab && typeof tab.active !== "undefined") {
     selectedTitle.value = tab.title;
   }
 });
diff --git a/navigation/index.js b/navigation/index.js
index ed66b1c..eef5bfa 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -75,6 +75,28 @@ export default [
         "path": "/devtool/api-editor",
         "icon": "material-symbols:api-rounded",
         "child": []
+      },
+      {
+        "title": "Plugin Manager",
+        "icon": "mdi:puzzle",
+        "child": [
+          {
+            "title": "Dashboard",
+            "path": "/devtool/plugin-manager"
+          },
+          {
+            "title": "Plugin Store",
+            "path": "/devtool/plugin-manager/store"
+          },
+          {
+            "title": "My Plugins",
+            "path": "/devtool/plugin-manager/installed"
+          },
+          {
+            "title": "Upload Plugin",
+            "path": "/devtool/plugin-manager/upload"
+          }
+        ]
       }
     ],
     "meta": {
diff --git a/pages/devtool/plugin-manager/index.vue b/pages/devtool/plugin-manager/index.vue
new file mode 100644
index 0000000..ed4d4c7
--- /dev/null
+++ b/pages/devtool/plugin-manager/index.vue
@@ -0,0 +1,396 @@
+<script setup>
+definePageMeta({
+  title: "Plugin Manager",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+// Quick stats for dashboard
+const pluginStats = ref({
+  installed: 3,
+  active: 3,
+  available: 4,
+  updates: 2
+});
+
+// Quick actions
+const quickActions = ref([
+  {
+    title: "Browse Store",
+    description: "Discover new plugins and applications",
+    icon: "mdi:store",
+    color: "blue",
+    path: "/devtool/plugin-manager/store"
+  },
+  {
+    title: "My Plugins",
+    description: "Manage installed plugins",
+    icon: "mdi:puzzle",
+    color: "green", 
+    path: "/devtool/plugin-manager/installed"
+  },
+  {
+    title: "Upload Plugin",
+    description: "Install custom plugin packages",
+    icon: "mdi:cloud-upload",
+    color: "purple",
+    path: "/devtool/plugin-manager/upload"
+  },
+  {
+    title: "Plugin Settings",
+    description: "Configure plugin system settings",
+    icon: "mdi:cog",
+    color: "gray",
+    path: "/devtool/plugin-manager/settings"
+  }
+]);
+
+// Recently installed plugins
+const recentPlugins = ref([
+  {
+    id: 1,
+    name: "notification-management",
+    displayName: "Notification Management System",
+    version: "1.2.0",
+    description: "Complete notification system with templates, scheduling, and analytics",
+    status: "active",
+    author: "CORRAD Team",
+    installDate: "2024-01-15",
+    icon: "mdi:bell-ring",
+    color: "orange",
+    authentik: {
+      applicationSlug: "notification-management",
+      requiredScopes: ["notifications:read", "notifications:write", "notifications:admin"],
+      groups: ["notification-users", "notification-admins"]
+    },
+    menuItems: 6,
+    apiEndpoints: 2,
+    migrations: 3
+  },
+  {
+    id: 2,
+    name: "report-management",
+    displayName: "Report Management System",
+    version: "1.0.0",
+    description: "Advanced reporting system integrated with Metabase for analytics and dashboards",
+    status: "active",
+    author: "CORRAD Team",
+    installDate: "2024-01-12",
+    icon: "mdi:chart-line",
+    color: "blue",
+    authentik: {
+      applicationSlug: "report-management",
+      requiredScopes: ["reports:read", "reports:write", "reports:admin"],
+      groups: ["report-users", "report-admins"]
+    },
+    menuItems: 5,
+    apiEndpoints: 3,
+    migrations: 2
+  },
+  {
+    id: 3,
+    name: "rbac",
+    displayName: "RBAC System",
+    version: "1.0.0",
+    description: "Role-Based Access Control system integrated with Authentik",
+    status: "active",
+    author: "CORRAD Team",
+    installDate: "2024-01-10",
+    icon: "mdi:shield-account",
+    color: "green",
+    authentik: {
+      applicationSlug: "rbac-system",
+      requiredScopes: ["rbac:read", "rbac:write", "rbac:admin"],
+      groups: ["rbac-users", "rbac-admins"]
+    },
+    menuItems: 4,
+    apiEndpoints: 4,
+    migrations: 1
+  }
+]);
+
+// Plugin updates available
+const availableUpdates = ref([
+  {
+    id: 4,
+    name: "audit-trail",
+    displayName: "Audit Trail System",
+    currentVersion: "1.0.0",
+    newVersion: "1.1.0",
+    updateSize: "2.1 MB",
+    icon: "mdi:file-document-alert",
+    color: "purple"
+  },
+  {
+    id: 5,
+    name: "queue-management", 
+    displayName: "Queue Management System",
+    currentVersion: "1.0.0",
+    newVersion: "1.0.1",
+    updateSize: "800 KB",
+    icon: "mdi:format-list-numbered",
+    color: "indigo"
+  }
+]);
+
+const getColorClasses = (color, type = 'bg') => {
+  const colorMap = {
+    bg: {
+      blue: 'bg-blue-100 text-blue-600',
+      green: 'bg-green-100 text-green-600', 
+      purple: 'bg-purple-100 text-purple-600',
+      orange: 'bg-orange-100 text-orange-600',
+      indigo: 'bg-indigo-100 text-indigo-600',
+      red: 'bg-red-100 text-red-600',
+      gray: 'bg-gray-100 text-gray-600'
+    },
+    hover: {
+      blue: 'hover:bg-blue-200',
+      green: 'hover:bg-green-200',
+      purple: 'hover:bg-purple-200', 
+      orange: 'hover:bg-orange-200',
+      indigo: 'hover:bg-indigo-200',
+      red: 'hover:bg-red-200',
+      gray: 'hover:bg-gray-200'
+    }
+  };
+  return colorMap[type][color] || colorMap[type]['gray'];
+};
+
+const navigateToAction = (path) => {
+  navigateTo(path);
+};
+
+const getStatusBadgeVariant = (status) => {
+  return status === 'active' ? 'success' : 'secondary';
+};
+</script>
+
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Welcome Header -->
+    <rs-card class="mb-6">
+      <template #body>
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-2xl font-bold text-gray-900 mb-2">Plugin Manager</h1>
+            <p class="text-gray-600">
+              Manage your application ecosystem. Install, configure, and organize plugins to extend functionality.
+            </p>
+          </div>
+          <div class="hidden md:block">
+            <Icon name="mdi:puzzle" size="64" class="text-primary/20" />
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Stats Overview -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+      <rs-card class="text-center">
+        <template #body>
+          <div class="p-4">
+            <div class="flex items-center justify-center mb-2">
+              <div class="bg-blue-100 text-blue-600 p-3 rounded-full">
+                <Icon name="mdi:puzzle" size="24" />
+              </div>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-900">{{ pluginStats.installed }}</h3>
+            <p class="text-sm text-gray-600">Installed</p>
+          </div>
+        </template>
+      </rs-card>
+
+      <rs-card class="text-center">
+        <template #body>
+          <div class="p-4">
+            <div class="flex items-center justify-center mb-2">
+              <div class="bg-green-100 text-green-600 p-3 rounded-full">
+                <Icon name="mdi:check-circle" size="24" />
+              </div>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-900">{{ pluginStats.active }}</h3>
+            <p class="text-sm text-gray-600">Active</p>
+          </div>
+        </template>
+      </rs-card>
+
+      <rs-card class="text-center">
+        <template #body>
+          <div class="p-4">
+            <div class="flex items-center justify-center mb-2">
+              <div class="bg-purple-100 text-purple-600 p-3 rounded-full">
+                <Icon name="mdi:store" size="24" />
+              </div>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-900">{{ pluginStats.available }}</h3>
+            <p class="text-sm text-gray-600">Available</p>
+          </div>
+        </template>
+      </rs-card>
+
+      <rs-card class="text-center">
+        <template #body>
+          <div class="p-4">
+            <div class="flex items-center justify-center mb-2">
+              <div class="bg-orange-100 text-orange-600 p-3 rounded-full">
+                <Icon name="mdi:update" size="24" />
+              </div>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-900">{{ pluginStats.updates }}</h3>
+            <p class="text-sm text-gray-600">Updates</p>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Quick Actions -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center">
+          <Icon name="mdi:lightning-bolt" class="mr-2" />
+          Quick Actions
+        </div>
+      </template>
+      <template #body>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div
+            v-for="action in quickActions"
+            :key="action.title"
+            class="group p-6 rounded-lg border-2 border-gray-200 hover:border-primary cursor-pointer transition-all duration-200 hover:shadow-md"
+            @click="navigateToAction(action.path)"
+          >
+            <div class="text-center">
+              <div 
+                :class="[getColorClasses(action.color), getColorClasses(action.color, 'hover')]"
+                class="w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4 transition-colors"
+              >
+                <Icon :name="action.icon" size="32" />
+              </div>
+              <h3 class="font-semibold text-lg text-gray-900 mb-2 group-hover:text-primary transition-colors">
+                {{ action.title }}
+              </h3>
+              <p class="text-gray-600 text-sm">{{ action.description }}</p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Recently Installed -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center">
+              <Icon name="mdi:history" class="mr-2" />
+              Recently Installed
+            </div>
+            <NuxtLink 
+              to="/devtool/plugin-manager/installed"
+              class="text-primary hover:text-primary/80 text-sm font-medium"
+            >
+              View All
+            </NuxtLink>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="plugin in recentPlugins"
+              :key="plugin.id"
+              class="flex items-center p-4 rounded-lg border border-gray-200 hover:shadow-sm transition-shadow"
+            >
+              <div 
+                :class="getColorClasses(plugin.color)"
+                class="w-12 h-12 rounded-lg flex items-center justify-center mr-4"
+              >
+                <Icon :name="plugin.icon" size="24" />
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center justify-between">
+                  <h4 class="font-medium text-gray-900 truncate">{{ plugin.displayName }}</h4>
+                  <rs-badge :variant="getStatusBadgeVariant(plugin.status)" size="sm">
+                    {{ plugin.status }}
+                  </rs-badge>
+                </div>
+                <p class="text-sm text-gray-600 mt-1">v{{ plugin.version }} • {{ plugin.author }}</p>
+                <div class="flex items-center space-x-3 mt-2 text-xs text-gray-500">
+                  <span class="flex items-center">
+                    <Icon name="mdi:menu" size="12" class="mr-1" />
+                    {{ plugin.menuItems }} menus
+                  </span>
+                  <span class="flex items-center">
+                    <Icon name="mdi:api" size="12" class="mr-1" />
+                    {{ plugin.apiEndpoints }} APIs
+                  </span>
+                  <span class="flex items-center">
+                    <Icon name="mdi:database" size="12" class="mr-1" />
+                    {{ plugin.migrations }} migrations
+                  </span>
+                </div>
+                <p class="text-xs text-gray-500 mt-1">Installed {{ plugin.installDate }}</p>
+              </div>
+            </div>
+
+            <div v-if="recentPlugins.length === 0" class="text-center py-8">
+              <Icon name="mdi:puzzle-outline" size="48" class="mx-auto text-gray-400 mb-2" />
+              <p class="text-gray-500">No plugins installed yet</p>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Available Updates -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center">
+              <Icon name="mdi:update" class="mr-2" />
+              Available Updates
+              <rs-badge v-if="availableUpdates.length > 0" variant="warning" size="sm" class="ml-2">
+                {{ availableUpdates.length }}
+              </rs-badge>
+            </div>
+            <rs-button size="sm" variant="outline" v-if="availableUpdates.length > 0">
+              Update All
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="update in availableUpdates"
+              :key="update.id"
+              class="flex items-center p-4 rounded-lg border border-gray-200 hover:shadow-sm transition-shadow"
+            >
+              <div 
+                :class="getColorClasses(update.color)"
+                class="w-12 h-12 rounded-lg flex items-center justify-center mr-4"
+              >
+                <Icon :name="update.icon" size="24" />
+              </div>
+              <div class="flex-1 min-w-0">
+                <h4 class="font-medium text-gray-900">{{ update.displayName }}</h4>
+                <p class="text-sm text-gray-600 mt-1">
+                  {{ update.currentVersion }} → {{ update.newVersion }}
+                </p>
+                <p class="text-xs text-gray-500 mt-1">{{ update.updateSize }}</p>
+              </div>
+              <rs-button size="sm" variant="primary">
+                Update
+              </rs-button>
+            </div>
+
+            <div v-if="availableUpdates.length === 0" class="text-center py-8">
+              <Icon name="mdi:check-circle" size="48" class="mx-auto text-green-400 mb-2" />
+              <p class="text-gray-500">All plugins are up to date</p>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+  </div>
+</template> 
\ No newline at end of file
diff --git a/pages/devtool/plugin-manager/installed/index.vue b/pages/devtool/plugin-manager/installed/index.vue
new file mode 100644
index 0000000..aee2d60
--- /dev/null
+++ b/pages/devtool/plugin-manager/installed/index.vue
@@ -0,0 +1,593 @@
+<script setup>
+definePageMeta({
+  title: "My Plugins",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+const nuxtApp = useNuxtApp();
+
+// Filters and search
+const searchQuery = ref('');
+const statusFilter = ref('all');
+const sortBy = ref('recent');
+
+// Modal states
+const showUninstallModal = ref(false);
+const showConfigModal = ref(false);
+const selectedPlugin = ref(null);
+
+// Installed plugins
+const installedPlugins = ref([
+  {
+    id: 1,
+    name: "rbac",
+    displayName: "RBAC System",
+    version: "1.0.0",
+    description: "Role-Based Access Control system integrated with Authentik for user management",
+    status: "active",
+    author: "CORRAD Team",
+    installDate: "2024-01-10",
+    lastUsed: "2024-01-23",
+    icon: "mdi:shield-account",
+    color: "green",
+    size: "3.2 MB",
+    menuItems: [
+      { title: "User Management", path: "/rbac/users" },
+      { title: "Role Management", path: "/rbac/roles" },
+      { title: "Permissions", path: "/rbac/permissions" }
+    ],
+    permissions: ["rbac.manage", "user.assign", "role.create"],
+    settings: {
+      authentikEnabled: true,
+      ssoEnabled: true,
+      autoSync: true
+    }
+  },
+  {
+    id: 2,
+    name: "notification-management",
+    displayName: "Notification Management System",
+    version: "1.0.0",
+    description: "Complete notification system with email, SMS, push notifications and templates",
+    status: "active",
+    author: "CORRAD Team",
+    installDate: "2024-01-15",
+    lastUsed: "2024-01-23",
+    icon: "mdi:bell-ring",
+    color: "orange",
+    size: "2.8 MB",
+    menuItems: [
+      { title: "Dashboard", path: "/notifications/dashboard" },
+      { title: "Templates", path: "/notifications/templates" },
+      { title: "Settings", path: "/notifications/settings" },
+      { title: "History", path: "/notifications/history" }
+    ],
+    permissions: ["notification.send", "template.manage", "delivery.track"],
+    settings: {
+      emailEnabled: true,
+      smsEnabled: true,
+      pushEnabled: true
+    }
+  },
+  {
+    id: 3,
+    name: "report-management",
+    displayName: "Report Management System",
+    version: "1.0.0",
+    description: "Advanced reporting system integrated with Metabase for analytics and dashboards",
+    status: "active",
+    author: "CORRAD Team",
+    installDate: "2024-01-12",
+    lastUsed: "2024-01-22",
+    icon: "mdi:chart-line",
+    color: "blue",
+    size: "3.8 MB",
+    menuItems: [
+      { title: "Dashboard", path: "/reports/dashboard" },
+      { title: "Report Builder", path: "/reports/builder" },
+      { title: "Analytics", path: "/reports/analytics" },
+      { title: "Scheduled Reports", path: "/reports/schedule" }
+    ],
+    permissions: ["report.create", "report.view", "dashboard.manage"],
+    settings: {
+      metabaseEnabled: true,
+      autoGenerate: false,
+      exportFormats: ["PDF", "Excel", "CSV"]
+    }
+  }
+]);
+
+// Computed properties
+const filteredPlugins = computed(() => {
+  let plugins = installedPlugins.value;
+
+  // Filter by status
+  if (statusFilter.value !== 'all') {
+    plugins = plugins.filter(plugin => plugin.status === statusFilter.value);
+  }
+
+  // Filter by search
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    plugins = plugins.filter(plugin => 
+      plugin.displayName.toLowerCase().includes(query) ||
+      plugin.description.toLowerCase().includes(query) ||
+      plugin.author.toLowerCase().includes(query)
+    );
+  }
+
+  // Sort plugins
+  switch (sortBy.value) {
+    case 'recent':
+      plugins.sort((a, b) => new Date(b.installDate) - new Date(a.installDate));
+      break;
+    case 'name':
+      plugins.sort((a, b) => a.displayName.localeCompare(b.displayName));
+      break;
+    case 'status':
+      plugins.sort((a, b) => b.status.localeCompare(a.status));
+      break;
+    case 'lastUsed':
+      plugins.sort((a, b) => new Date(b.lastUsed) - new Date(a.lastUsed));
+      break;
+  }
+
+  return plugins;
+});
+
+const pluginStats = computed(() => {
+  const total = installedPlugins.value.length;
+  const active = installedPlugins.value.filter(p => p.status === 'active').length;
+  const inactive = total - active;
+  return { total, active, inactive };
+});
+
+const getColorClasses = (color) => {
+  const colorMap = {
+    blue: 'bg-blue-100 text-blue-600',
+    green: 'bg-green-100 text-green-600',
+    purple: 'bg-purple-100 text-purple-600',
+    orange: 'bg-orange-100 text-orange-600',
+    indigo: 'bg-indigo-100 text-indigo-600',
+    red: 'bg-red-100 text-red-600'
+  };
+  return colorMap[color] || 'bg-gray-100 text-gray-600';
+};
+
+const getStatusBadgeVariant = (status) => {
+  return status === 'active' ? 'success' : 'secondary';
+};
+
+const togglePluginStatus = async (plugin) => {
+  try {
+    plugin.status = plugin.status === 'active' ? 'inactive' : 'active';
+    
+    nuxtApp.$swal.fire({
+      title: "Success",
+      text: `Plugin ${plugin.status === 'active' ? 'activated' : 'deactivated'} successfully`,
+      icon: "success",
+      timer: 2000,
+      showConfirmButton: false,
+    });
+  } catch (error) {
+    nuxtApp.$swal.fire({
+      title: "Error",
+      text: "Failed to toggle plugin status",
+      icon: "error",
+    });
+  }
+};
+
+const openConfigModal = (plugin) => {
+  selectedPlugin.value = plugin;
+  showConfigModal.value = true;
+};
+
+const openUninstallModal = (plugin) => {
+  selectedPlugin.value = plugin;
+  showUninstallModal.value = true;
+};
+
+const confirmUninstall = async () => {
+  try {
+    const plugin = selectedPlugin.value;
+    installedPlugins.value = installedPlugins.value.filter(p => p.id !== plugin.id);
+    
+    showUninstallModal.value = false;
+    selectedPlugin.value = null;
+    
+    nuxtApp.$swal.fire({
+      title: "Success",
+      text: "Plugin uninstalled successfully",
+      icon: "success",
+      timer: 2000,
+      showConfirmButton: false,
+    });
+  } catch (error) {
+    nuxtApp.$swal.fire({
+      title: "Error",
+      text: "Failed to uninstall plugin",
+      icon: "error",
+    });
+  }
+};
+
+const updatePluginSettings = async () => {
+  try {
+    showConfigModal.value = false;
+    nuxtApp.$swal.fire({
+      title: "Success",
+      text: "Plugin settings updated successfully",
+      icon: "success",
+      timer: 2000,
+      showConfirmButton: false,
+    });
+  } catch (error) {
+    nuxtApp.$swal.fire({
+      title: "Error",
+      text: "Failed to update plugin settings",
+      icon: "error",
+    });
+  }
+};
+
+const formatDate = (dateString) => {
+  return new Date(dateString).toLocaleDateString();
+};
+
+const viewPluginDetails = (plugin) => {
+  // Navigate to plugin details or open a detailed modal
+  navigateTo(`/devtool/plugin-manager/installed/${plugin.name}`);
+};
+</script>
+
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Header -->
+    <rs-card class="mb-6">
+      <template #body>
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-2xl font-bold text-gray-900 mb-2">My Plugins</h1>
+            <p class="text-gray-600">
+              Manage your installed plugins, configure settings, and control access
+            </p>
+          </div>
+          <div class="hidden md:block">
+            <Icon name="mdi:puzzle" size="64" class="text-primary/20" />
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Stats Overview -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+      <rs-card class="text-center">
+        <template #body>
+          <div class="p-4">
+            <div class="flex items-center justify-center mb-2">
+              <div class="bg-blue-100 text-blue-600 p-3 rounded-full">
+                <Icon name="mdi:puzzle" size="24" />
+              </div>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-900">{{ pluginStats.total }}</h3>
+            <p class="text-sm text-gray-600">Total Installed</p>
+          </div>
+        </template>
+      </rs-card>
+
+      <rs-card class="text-center">
+        <template #body>
+          <div class="p-4">
+            <div class="flex items-center justify-center mb-2">
+              <div class="bg-green-100 text-green-600 p-3 rounded-full">
+                <Icon name="mdi:check-circle" size="24" />
+              </div>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-900">{{ pluginStats.active }}</h3>
+            <p class="text-sm text-gray-600">Active</p>
+          </div>
+        </template>
+      </rs-card>
+
+      <rs-card class="text-center">
+        <template #body>
+          <div class="p-4">
+            <div class="flex items-center justify-center mb-2">
+              <div class="bg-gray-100 text-gray-600 p-3 rounded-full">
+                <Icon name="mdi:pause-circle" size="24" />
+              </div>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-900">{{ pluginStats.inactive }}</h3>
+            <p class="text-sm text-gray-600">Inactive</p>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Filters and Search -->
+    <rs-card class="mb-6">
+      <template #body>
+        <div class="flex flex-col md:flex-row gap-4">
+          <div class="flex-1">
+            <FormKit
+              type="search"
+              placeholder="Search plugins..."
+              v-model="searchQuery"
+              outer-class="mb-0"
+            >
+              <template #prefix>
+                <Icon name="mdi:magnify" class="text-gray-400" />
+              </template>
+            </FormKit>
+          </div>
+          <div class="w-full md:w-40">
+            <FormKit
+              type="select"
+              v-model="statusFilter"
+              :options="[
+                { label: 'All Status', value: 'all' },
+                { label: 'Active', value: 'active' },
+                { label: 'Inactive', value: 'inactive' }
+              ]"
+              outer-class="mb-0"
+            />
+          </div>
+          <div class="w-full md:w-48">
+            <FormKit
+              type="select"
+              v-model="sortBy"
+              :options="[
+                { label: 'Recently Installed', value: 'recent' },
+                { label: 'Name A-Z', value: 'name' },
+                { label: 'Status', value: 'status' },
+                { label: 'Last Used', value: 'lastUsed' }
+              ]"
+              outer-class="mb-0"
+            />
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Results Info -->
+    <div class="flex items-center justify-between mb-6">
+      <p class="text-gray-600">
+        {{ filteredPlugins.length }} plugin(s) found
+      </p>
+      <NuxtLink 
+        to="/devtool/plugin-manager/store" 
+        class="text-primary hover:text-primary/80 text-sm font-medium"
+      >
+        Browse Store →
+      </NuxtLink>
+    </div>
+
+    <!-- Plugin Grid -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+      <rs-card
+        v-for="plugin in filteredPlugins"
+        :key="plugin.id"
+        class="hover:shadow-lg transition-shadow"
+      >
+        <template #body>
+          <div class="space-y-4">
+            <!-- Plugin Header -->
+            <div class="flex items-start justify-between">
+              <div class="flex items-center space-x-4">
+                <div 
+                  :class="getColorClasses(plugin.color)"
+                  class="w-14 h-14 rounded-xl flex items-center justify-center"
+                >
+                  <Icon :name="plugin.icon" size="28" />
+                </div>
+                <div>
+                  <h3 class="font-semibold text-lg text-gray-900">
+                    {{ plugin.displayName }}
+                  </h3>
+                  <p class="text-sm text-gray-500">v{{ plugin.version }} • {{ plugin.author }}</p>
+                  <p class="text-xs text-gray-400 mt-1">{{ plugin.size }}</p>
+                </div>
+              </div>
+              <rs-badge :variant="getStatusBadgeVariant(plugin.status)" size="sm">
+                {{ plugin.status }}
+              </rs-badge>
+            </div>
+
+            <!-- Plugin Description -->
+            <p class="text-gray-600 text-sm">
+              {{ plugin.description }}
+            </p>
+
+            <!-- Plugin Info -->
+            <div class="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <span class="text-gray-500">Installed:</span>
+                <div class="font-medium">{{ formatDate(plugin.installDate) }}</div>
+              </div>
+              <div>
+                <span class="text-gray-500">Last Used:</span>
+                <div class="font-medium">{{ formatDate(plugin.lastUsed) }}</div>
+              </div>
+            </div>
+
+            <!-- Menu Items -->
+            <div v-if="plugin.menuItems.length > 0">
+              <span class="text-sm text-gray-500">Menu Items:</span>
+              <div class="flex flex-wrap gap-2 mt-1">
+                <NuxtLink
+                  v-for="item in plugin.menuItems"
+                  :key="item.path"
+                  :to="item.path"
+                  class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full hover:bg-gray-200 transition-colors"
+                >
+                  {{ item.title }}
+                </NuxtLink>
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="flex gap-2 pt-2 border-t">
+              <rs-button
+                size="sm"
+                :variant="plugin.status === 'active' ? 'outline' : 'primary'"
+                @click="togglePluginStatus(plugin)"
+              >
+                {{ plugin.status === 'active' ? 'Deactivate' : 'Activate' }}
+              </rs-button>
+              
+              <rs-button
+                size="sm"
+                variant="outline"
+                @click="openConfigModal(plugin)"
+              >
+                <Icon name="mdi:cog" class="mr-1" size="14" />
+                Settings
+              </rs-button>
+              
+              <rs-button
+                size="sm"
+                variant="outline"
+                @click="viewPluginDetails(plugin)"
+              >
+                <Icon name="mdi:information-outline" class="mr-1" size="14" />
+                Details
+              </rs-button>
+              
+              <rs-button
+                size="sm"
+                variant="danger"
+                @click="openUninstallModal(plugin)"
+              >
+                <Icon name="mdi:delete-outline" size="14" />
+              </rs-button>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Empty State -->
+    <div v-if="filteredPlugins.length === 0" class="text-center py-12">
+      <rs-card>
+        <template #body>
+          <div class="py-8">
+            <Icon name="mdi:puzzle-outline" size="64" class="mx-auto text-gray-400 mb-4" />
+            <h3 class="text-lg font-medium text-gray-900 mb-2">No plugins found</h3>
+            <p class="text-gray-500 mb-4">
+              Try adjusting your search terms or install plugins from the store
+            </p>
+            <rs-button variant="outline" @click="searchQuery = ''; statusFilter = 'all'">
+              Clear Filters
+            </rs-button>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Uninstall Confirmation Modal -->
+    <rs-modal 
+      title="Uninstall Plugin" 
+      v-model="showUninstallModal" 
+      ok-title="Uninstall"
+      ok-variant="danger"
+      :ok-callback="confirmUninstall"
+    >
+      <div v-if="selectedPlugin">
+        <p class="mb-4">
+          Are you sure you want to uninstall <strong>{{ selectedPlugin.displayName }}</strong>?
+        </p>
+        <div class="bg-red-50 border border-red-200 p-4 rounded-lg">
+          <p class="text-red-800 text-sm">
+            <Icon name="mdi:alert" class="mr-2" size="16" />
+            This action cannot be undone. All plugin data and configurations will be permanently removed.
+          </p>
+        </div>
+      </div>
+    </rs-modal>
+
+    <!-- Plugin Configuration Modal -->
+    <rs-modal 
+      title="Plugin Settings" 
+      v-model="showConfigModal"
+      ok-title="Save Settings"
+      :ok-callback="updatePluginSettings"
+      size="lg"
+    >
+      <div v-if="selectedPlugin">
+        <div class="space-y-6">
+          <!-- Plugin Info -->
+          <div class="flex items-center space-x-4 pb-4 border-b">
+            <div 
+              :class="getColorClasses(selectedPlugin.color)"
+              class="w-12 h-12 rounded-lg flex items-center justify-center"
+            >
+              <Icon :name="selectedPlugin.icon" size="24" />
+            </div>
+            <div>
+              <h3 class="font-semibold text-lg">{{ selectedPlugin.displayName }}</h3>
+              <p class="text-sm text-gray-500">v{{ selectedPlugin.version }}</p>
+            </div>
+          </div>
+
+          <!-- Settings Form -->
+          <FormKit type="form" :actions="false">
+            <div v-if="selectedPlugin.name === 'notification-system'">
+              <FormKit
+                type="checkbox"
+                label="Enable Email Notifications"
+                v-model="selectedPlugin.settings.emailEnabled"
+              />
+              <FormKit
+                type="checkbox"
+                label="Enable SMS Notifications"
+                v-model="selectedPlugin.settings.smsEnabled"
+              />
+              <FormKit
+                type="checkbox"
+                label="Enable Push Notifications"
+                v-model="selectedPlugin.settings.pushEnabled"
+              />
+            </div>
+
+            <div v-else-if="selectedPlugin.name === 'backup-system'">
+              <FormKit
+                type="checkbox"
+                label="Enable Automatic Backup"
+                v-model="selectedPlugin.settings.autoBackup"
+              />
+              <FormKit
+                type="select"
+                label="Backup Frequency"
+                v-model="selectedPlugin.settings.frequency"
+                :options="[
+                  { label: 'Daily', value: 'daily' },
+                  { label: 'Weekly', value: 'weekly' },
+                  { label: 'Monthly', value: 'monthly' }
+                ]"
+              />
+              <FormKit
+                type="select"
+                label="Cloud Storage"
+                v-model="selectedPlugin.settings.cloudStorage"
+                :options="[
+                  { label: 'Enabled', value: 'enabled' },
+                  { label: 'Disabled', value: 'disabled' }
+                ]"
+              />
+            </div>
+
+            <div v-else>
+              <p class="text-gray-500 text-center py-4">
+                No configurable settings available for this plugin.
+              </p>
+            </div>
+          </FormKit>
+        </div>
+      </div>
+    </rs-modal>
+  </div>
+</template> 
\ No newline at end of file
diff --git a/pages/devtool/plugin-manager/store/[slug].vue b/pages/devtool/plugin-manager/store/[slug].vue
new file mode 100644
index 0000000..60e9b35
--- /dev/null
+++ b/pages/devtool/plugin-manager/store/[slug].vue
@@ -0,0 +1,879 @@
+<script setup>
+definePageMeta({
+  title: "Plugin Details",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+const route = useRoute();
+const nuxtApp = useNuxtApp();
+const pluginSlug = route.params.slug;
+
+// Plugin installation state
+const isInstalling = ref(false);
+const installProgress = ref(0);
+const installationStep = ref('');
+const showInstallModal = ref(false);
+const installationLog = ref([]);
+
+// Mock plugin data - in real app, this would be fetched based on slug
+const pluginData = ref({
+  id: 1,
+  name: "notification-management",
+  displayName: "Notification Management System",
+  version: "1.2.0",
+  description: "Complete notification system with templates, scheduling, and analytics for enterprise-grade communication management.",
+  author: "CORRAD Team",
+  authorAvatar: "/img/avatar/1.svg",
+  category: "communication",
+  size: "2.8 MB",
+  rating: 4.8,
+  downloads: 1890,
+  price: "Free",
+  icon: "mdi:bell-ring",
+  color: "orange",
+  lastUpdated: "2024-01-18",
+  license: "MIT",
+  homepage: "https://corrad.dev/plugins/notification-management",
+  repository: "https://github.com/corrad/notification-management",
+  tags: ["Notifications", "Email", "SMS", "Templates", "Scheduling"],
+  isInstalled: false,
+  screenshots: [
+    "/img/template/form1.jpg",
+    "/img/template/form1.jpg",
+    "/img/template/form1.jpg"
+  ],
+  
+  // Technical details
+  menuStructure: [
+    { title: "Dashboard", route: "/notifications/dashboard", icon: "view-dashboard", permission: "notifications:read" },
+    { title: "Send Notification", route: "/notifications/send", icon: "send", permission: "notifications:write" },
+    { title: "Templates", route: "/notifications/templates", icon: "file-document-multiple", permission: "notifications:write" },
+    { title: "History", route: "/notifications/history", icon: "history", permission: "notifications:read" },
+    { title: "Settings", route: "/notifications/settings", icon: "cog", permission: "notifications:admin" },
+    { title: "Reports", route: "/notifications/reports", icon: "chart-line", permission: "notifications:admin" }
+  ],
+  
+  apiEndpoints: [
+    { path: "/api/notifications", methods: ["GET", "POST", "PUT", "DELETE"] },
+    { path: "/api/notifications/templates", methods: ["GET", "POST", "PUT", "DELETE"] },
+    { path: "/api/notifications/send", methods: ["POST"] },
+    { path: "/api/notifications/schedule", methods: ["GET", "POST", "PUT", "DELETE"] }
+  ],
+  
+  folderStructure: [
+    { type: "folder", name: "pages/notifications/", description: "All notification-related pages" },
+    { type: "folder", name: "components/notification/", description: "Notification Vue components" },
+    { type: "folder", name: "server/api/notifications/", description: "API endpoints for notifications" },
+    { type: "folder", name: "composables/", description: "Notification composables and utilities" },
+    { type: "file", name: "migrations/001_create_notifications.sql", description: "Creates notifications table" },
+    { type: "file", name: "migrations/002_create_templates.sql", description: "Creates notification templates table" },
+    { type: "file", name: "migrations/003_create_schedules.sql", description: "Creates notification schedules table" }
+  ],
+  
+  authentikIntegration: {
+    applicationSlug: "notification-management",
+    requiredScopes: ["notifications:read", "notifications:write", "notifications:admin"],
+    groups: ["notification-users", "notification-admins"],
+    permissions: [
+      { scope: "notifications:read", description: "View notifications and templates" },
+      { scope: "notifications:write", description: "Create and send notifications" },
+      { scope: "notifications:admin", description: "Manage settings and view reports" }
+    ]
+  },
+  
+  dependencies: {
+    corrad: "^2.0.0",
+    authentik: "^2023.10.0",
+    nodemailer: "^6.9.0",
+    twilio: "^4.19.0"
+  },
+  
+  features: [
+    "Multi-channel notifications (Email, SMS, Push)",
+    "Template management with variables",
+    "Scheduled and recurring notifications",
+    "Delivery tracking and analytics",
+    "Authentik integration for permissions",
+    "REST API with full CRUD operations",
+    "Real-time dashboard with statistics",
+    "Export reports in multiple formats"
+  ],
+  
+  // Mock markdown content
+  markdownContent: `# Notification Management System
+
+## Overview
+The Notification Management System is a comprehensive solution for managing all types of notifications in your CORRAD+ application. It provides a unified interface for sending emails, SMS, and push notifications with advanced templating and scheduling capabilities.
+
+## Key Features
+
+### 🔔 Multi-Channel Support
+- **Email Notifications**: Rich HTML templates with attachment support
+- **SMS Notifications**: Integrated with Twilio for reliable delivery
+- **Push Notifications**: Web and mobile push notification support
+
+### 📝 Template Management
+- Visual template editor with drag-and-drop interface
+- Variable substitution and dynamic content
+- Template versioning and approval workflow
+- Multi-language template support
+
+### ⏰ Advanced Scheduling
+- One-time and recurring notifications
+- Time-zone aware scheduling
+- Bulk notification processing
+- Queue management with priority levels
+
+### 📊 Analytics & Reporting
+- Real-time delivery tracking
+- Open and click-through rates
+- Bounce and unsubscribe management
+- Comprehensive analytics dashboard
+
+## Technical Specifications
+
+### Database Schema
+The plugin creates three main tables:
+- \`notifications\`: Stores all notification records
+- \`notification_templates\`: Template definitions and content
+- \`notification_schedules\`: Scheduling information
+
+### API Endpoints
+All endpoints are secured with Authentik permissions:
+- \`GET /api/notifications\`: List notifications
+- \`POST /api/notifications\`: Send new notification
+- \`PUT /api/notifications/{id}\`: Update notification
+- \`DELETE /api/notifications/{id}\`: Delete notification
+
+### Menu Integration
+The plugin adds a "Notifications" menu with the following items:
+- Dashboard (notifications:read)
+- Send Notification (notifications:write)
+- Templates (notifications:write)
+- History (notifications:read)
+- Settings (notifications:admin)
+- Reports (notifications:admin)
+
+## Installation Requirements
+
+### System Requirements
+- CORRAD Framework v2.0.0 or higher
+- Authentik v2023.10.0 or higher
+- Node.js v18+ for email processing
+- Database: PostgreSQL 12+ recommended
+
+### External Services
+- **Email**: SMTP server or service (SendGrid, Amazon SES, etc.)
+- **SMS**: Twilio account for SMS notifications
+- **Push**: Firebase Cloud Messaging for push notifications
+
+## Configuration
+
+After installation, configure the following in your environment:
+
+\`\`\`env
+# Email Configuration
+SMTP_HOST=your-smtp-host
+SMTP_PORT=587
+SMTP_USER=your-username
+SMTP_PASS=your-password
+
+# SMS Configuration (Twilio)
+TWILIO_ACCOUNT_SID=your-account-sid
+TWILIO_AUTH_TOKEN=your-auth-token
+TWILIO_PHONE_NUMBER=your-twilio-number
+
+# Push Notifications
+FCM_SERVER_KEY=your-fcm-server-key
+\`\`\`
+
+## Post-Installation Steps
+
+1. **Configure Authentik Groups**: Create notification-users and notification-admins groups
+2. **Set Up SMTP**: Configure email settings in the admin panel
+3. **SMS Setup**: Add Twilio credentials for SMS functionality
+4. **Template Import**: Import default notification templates
+5. **User Training**: Provide access to users based on their roles
+
+## Support & Documentation
+
+For detailed documentation and support:
+- Plugin Documentation: [Link to docs]
+- API Reference: [Link to API docs]
+- Community Forum: [Link to forum]
+- Bug Reports: [Link to issues]
+`
+});
+
+// Mock related plugins
+const relatedPlugins = ref([
+  {
+    id: 2,
+    name: "report-management",
+    displayName: "Report Management System",
+    icon: "mdi:chart-line",
+    color: "blue",
+    rating: 4.8,
+    price: "Free"
+  },
+  {
+    id: 3,
+    name: "rbac",
+    displayName: "RBAC System",
+    icon: "mdi:shield-account",
+    color: "green",
+    rating: 4.9,
+    price: "Free"
+  }
+]);
+
+// Remove activeTab since RsTab handles this internally
+
+// Simple markdown to HTML converter
+const markdownToHtml = (markdown) => {
+  let html = markdown
+    // Headers
+    .replace(/^### (.*$)/gim, '<h3 class="text-lg font-semibold mt-3 mb-2">$1</h3>')
+    .replace(/^## (.*$)/gim, '<h2 class="text-xl font-semibold mt-4 mb-2">$1</h2>')
+    .replace(/^# (.*$)/gim, '<h1 class="text-2xl font-bold mt-4 mb-3">$1</h1>')
+    // Bold text
+    .replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
+    // Italic text  
+    .replace(/\*(.*?)\*/gim, '<em>$1</em>')
+    // Code blocks
+    .replace(/```([^`]+?)```/gims, '<pre class="bg-gray-100 p-3 rounded-lg mt-2 mb-2 overflow-x-auto"><code>$1</code></pre>')
+    // Inline code
+    .replace(/`([^`]+?)`/gim, '<code class="bg-gray-100 px-1.5 py-0.5 rounded text-sm">$1</code>')
+    // Links
+    .replace(/\[([^\]]+)\]\(([^\)]+)\)/gim, '<a href="$2" class="text-blue-600 hover:underline">$1</a>')
+    // Line breaks
+    .replace(/\n/gim, '<br>');
+
+  // Handle bullet points as lists
+  const lines = html.split('<br>');
+  let inList = false;
+  let result = [];
+  
+  for (let line of lines) {
+    if (line.match(/^- /)) {
+      if (!inList) {
+        result.push('<ul class="list-disc pl-4 space-y-0.5 my-2">');
+        inList = true;
+      }
+      result.push('<li>' + line.replace(/^- /, '') + '</li>');
+    } else {
+      if (inList) {
+        result.push('</ul>');
+        inList = false;
+      }
+      if (line.trim()) {
+        result.push(line);
+      }
+    }
+  }
+  
+  if (inList) {
+    result.push('</ul>');
+  }
+  
+  return result.join('<br>').replace(/<br><br>/gim, '<br>');
+};
+
+const getColorClasses = (color) => {
+  const colorMap = {
+    blue: 'bg-blue-100 text-blue-600',
+    green: 'bg-green-100 text-green-600',
+    purple: 'bg-purple-100 text-purple-600',
+    orange: 'bg-orange-100 text-orange-600',
+    indigo: 'bg-indigo-100 text-indigo-600',
+    red: 'bg-red-100 text-red-600'
+  };
+  return colorMap[color] || 'bg-gray-100 text-gray-600';
+};
+
+const handleInstall = () => {
+  showInstallModal.value = true;
+};
+
+const confirmInstall = async () => {
+  showInstallModal.value = false;
+  isInstalling.value = true;
+  installationLog.value = [];
+  installProgress.value = 0;
+
+  const steps = [
+    { progress: 10, step: 'Validating plugin package...', message: 'Checking plugin structure and dependencies' },
+    { progress: 25, step: 'Setting up Authentik integration...', message: 'Creating application and configuring scopes' },
+    { progress: 40, step: 'Running database migrations...', message: 'Creating notification tables and indexes' },
+    { progress: 60, step: 'Installing menu structure...', message: 'Registering navigation menu items' },
+    { progress: 75, step: 'Configuring API routes...', message: 'Setting up API endpoints and permissions' },
+    { progress: 90, step: 'Running post-install hooks...', message: 'Executing plugin initialization scripts' },
+    { progress: 100, step: 'Installation complete!', message: 'Plugin installed successfully and ready to use' }
+  ];
+
+  for (const step of steps) {
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    installProgress.value = step.progress;
+    installationStep.value = step.step;
+    installationLog.value.push({
+      message: step.message,
+      timestamp: new Date().toLocaleTimeString(),
+      type: step.progress === 100 ? 'success' : 'info'
+    });
+  }
+
+  isInstalling.value = false;
+  pluginData.value.isInstalled = true;
+  
+  nuxtApp.$swal.fire({
+    title: "Success",
+    text: "Plugin installed successfully! You can now access it from the navigation menu.",
+    icon: "success",
+    timer: 3000,
+    showConfirmButton: false,
+  });
+};
+
+const goBack = () => {
+  navigateTo('/devtool/plugin-manager/store');
+};
+
+// In real app, you would fetch plugin data based on slug
+onMounted(async () => {
+  // Simulate API call
+  // const plugin = await $fetch(`/api/plugins/${pluginSlug}`);
+  // pluginData.value = plugin;
+});
+</script>
+
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Header with plugin info -->
+    <rs-card class="mb-6">
+      <template #body>
+        <div class="flex items-start space-x-6">
+          <!-- Plugin Icon -->
+          <div 
+            :class="getColorClasses(pluginData.color)"
+            class="w-20 h-20 rounded-xl flex items-center justify-center flex-shrink-0"
+          >
+            <Icon :name="pluginData.icon" size="40" />
+          </div>
+
+          <!-- Plugin Details -->
+          <div class="flex-1 min-w-0">
+            <div class="flex items-start justify-between">
+              <div>
+                <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ pluginData.displayName }}</h1>
+                <p class="text-gray-600 mb-3">{{ pluginData.description }}</p>
+                
+                <div class="flex items-center space-x-6 text-sm">
+                  <div class="flex items-center space-x-1">
+                    <Icon name="mdi:account" size="16" class="text-gray-400" />
+                    <span>{{ pluginData.author }}</span>
+                  </div>
+                  <div class="flex items-center space-x-1">
+                    <Icon name="mdi:star" size="16" class="text-yellow-500" />
+                    <span>{{ pluginData.rating }}</span>
+                  </div>
+                  <div class="flex items-center space-x-1">
+                    <Icon name="mdi:download" size="16" class="text-gray-400" />
+                    <span>{{ pluginData.downloads.toLocaleString() }} downloads</span>
+                  </div>
+                  <div class="flex items-center space-x-1">
+                    <Icon name="mdi:update" size="16" class="text-gray-400" />
+                    <span>Updated {{ pluginData.lastUpdated }}</span>
+                  </div>
+                </div>
+
+                <!-- Tags -->
+                <div class="flex flex-wrap gap-2 mt-3">
+                  <rs-badge 
+                    v-for="tag in pluginData.tags" 
+                    :key="tag" 
+                    variant="secondary" 
+                    size="sm"
+                  >
+                    {{ tag }}
+                  </rs-badge>
+                </div>
+              </div>
+
+              <!-- Action buttons -->
+              <div class="flex flex-col space-y-3">
+                <rs-button 
+                  v-if="!pluginData.isInstalled" 
+                  size="lg" 
+                  @click="handleInstall"
+                  :disabled="isInstalling"
+                  class="min-w-[120px]"
+                >
+                  <Icon v-if="!isInstalling" name="mdi:download" class="mr-2" />
+                  <Icon v-else name="mdi:loading" class="mr-2 animate-spin" />
+                  {{ isInstalling ? 'Installing...' : 'Install' }}
+                </rs-button>
+                <rs-badge v-else variant="success" size="lg" class="px-4 py-2">
+                  <Icon name="mdi:check" class="mr-2" />
+                  Installed
+                </rs-badge>
+                
+                <div class="text-center">
+                  <span class="text-2xl font-bold text-primary">{{ pluginData.price }}</span>
+                  <p class="text-xs text-gray-500">{{ pluginData.size }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Installation Progress -->
+    <rs-card v-if="isInstalling" class="mb-6">
+      <template #header>
+        <div class="flex items-center">
+          <Icon name="mdi:progress-upload" class="mr-2" />
+          Installation Progress
+        </div>
+      </template>
+      <template #body>
+        <div class="space-y-4">
+          <!-- Progress Bar -->
+          <div>
+            <div class="flex justify-between text-sm mb-2">
+              <span>{{ installationStep }}</span>
+              <span>{{ installProgress }}%</span>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-3">
+              <div 
+                class="bg-primary h-3 rounded-full transition-all duration-500"
+                :style="{ width: installProgress + '%' }"
+              ></div>
+            </div>
+          </div>
+
+          <!-- Installation Log -->
+          <div class="bg-gray-50 rounded-lg p-4 max-h-40 overflow-y-auto">
+            <div 
+              v-for="(log, index) in installationLog" 
+              :key="index"
+              class="flex items-start space-x-2 text-sm mb-2 last:mb-0"
+            >
+              <Icon 
+                :name="log.type === 'success' ? 'mdi:check-circle' : 'mdi:information'" 
+                :class="log.type === 'success' ? 'text-green-500' : 'text-blue-500'"
+                size="16"
+                class="mt-0.5"
+              />
+              <div class="flex-1">
+                <span class="text-gray-900">{{ log.message }}</span>
+                <span class="text-gray-500 ml-2">{{ log.timestamp }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Tabs with Content -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <!-- Main Content -->
+      <div class="lg:col-span-2">
+        <rs-tab class="mb-6">
+          <!-- Overview Tab -->
+          <rs-tab-item title="Overview" :active="true">
+            <rs-card class="mb-6">
+              <template #header>
+                <Icon name="mdi:information-outline" class="mr-2" />
+                Plugin Overview
+              </template>
+              <template #body>
+                <div class="space-y-4">
+                  <div>
+                    <h3 class="font-semibold text-lg mb-3">What's Included</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <div class="text-center p-4 bg-blue-50 rounded-lg">
+                        <Icon name="mdi:menu" size="32" class="text-blue-600 mx-auto mb-2" />
+                        <p class="font-medium">{{ pluginData.menuStructure.length }} Menu Items</p>
+                        <p class="text-sm text-gray-600">Navigation pages</p>
+                      </div>
+                      <div class="text-center p-4 bg-green-50 rounded-lg">
+                        <Icon name="mdi:api" size="32" class="text-green-600 mx-auto mb-2" />
+                        <p class="font-medium">{{ pluginData.apiEndpoints.length }} API Endpoints</p>
+                        <p class="text-sm text-gray-600">REST API routes</p>
+                      </div>
+                      <div class="text-center p-4 bg-purple-50 rounded-lg">
+                        <Icon name="mdi:database" size="32" class="text-purple-600 mx-auto mb-2" />
+                        <p class="font-medium">3 Database Tables</p>
+                        <p class="text-sm text-gray-600">SQL migrations</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 class="font-semibold text-lg mb-3">Screenshots</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div 
+                        v-for="(screenshot, index) in pluginData.screenshots" 
+                        :key="index"
+                        class="relative rounded-lg overflow-hidden border"
+                      >
+                        <img 
+                          :src="screenshot" 
+                          :alt="`Screenshot ${index + 1}`"
+                          class="w-full h-48 object-cover"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </rs-card>
+          </rs-tab-item>
+
+          <!-- Features Tab -->
+          <rs-tab-item title="Features">
+            <rs-card>
+              <template #header>
+                <Icon name="mdi:star" class="mr-2" />
+                Key Features
+              </template>
+              <template #body>
+                <div class="space-y-4">
+                  <div 
+                    v-for="(feature, index) in pluginData.features" 
+                    :key="index"
+                    class="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg"
+                  >
+                    <Icon name="mdi:check-circle" class="text-green-500 mt-0.5" size="20" />
+                    <span class="text-gray-900">{{ feature }}</span>
+                  </div>
+                </div>
+              </template>
+            </rs-card>
+          </rs-tab-item>
+
+          <!-- Technical Details Tab -->
+          <rs-tab-item title="Technical Details">
+            <div class="space-y-6">
+              <!-- Menu Structure -->
+              <rs-card>
+                <template #header>
+                  <Icon name="mdi:menu" class="mr-2" />
+                  Menu Structure
+                </template>
+                <template #body>
+                  <div class="space-y-3">
+                    <div 
+                      v-for="(menu, index) in pluginData.menuStructure" 
+                      :key="index"
+                      class="flex items-center justify-between p-3 border rounded-lg"
+                    >
+                      <div class="flex items-center space-x-3">
+                        <Icon :name="`mdi:${menu.icon}`" size="20" class="text-gray-600" />
+                        <div>
+                          <p class="font-medium">{{ menu.title }}</p>
+                          <p class="text-sm text-gray-600">{{ menu.route }}</p>
+                        </div>
+                      </div>
+                      <rs-badge variant="secondary" size="sm">{{ menu.permission }}</rs-badge>
+                    </div>
+                  </div>
+                </template>
+              </rs-card>
+
+              <!-- API Endpoints -->
+              <rs-card>
+                <template #header>
+                  <Icon name="mdi:api" class="mr-2" />
+                  API Endpoints
+                </template>
+                <template #body>
+                  <div class="space-y-3">
+                    <div 
+                      v-for="(endpoint, index) in pluginData.apiEndpoints" 
+                      :key="index"
+                      class="p-3 border rounded-lg"
+                    >
+                      <div class="flex items-center justify-between mb-2">
+                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ endpoint.path }}</code>
+                      </div>
+                      <div class="flex flex-wrap gap-2">
+                        <rs-badge 
+                          v-for="method in endpoint.methods" 
+                          :key="method"
+                          :variant="method === 'GET' ? 'success' : method === 'POST' ? 'primary' : method === 'PUT' ? 'warning' : 'danger'"
+                          size="sm"
+                        >
+                          {{ method }}
+                        </rs-badge>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </rs-card>
+
+              <!-- Folder Structure -->
+              <rs-card>
+                <template #header>
+                  <Icon name="mdi:folder" class="mr-2" />
+                  Folder Structure Changes
+                </template>
+                <template #body>
+                  <div class="space-y-2">
+                    <div 
+                      v-for="(item, index) in pluginData.folderStructure" 
+                      :key="index"
+                      class="flex items-start space-x-3 p-2"
+                    >
+                      <Icon 
+                        :name="item.type === 'folder' ? 'mdi:folder' : 'mdi:file'" 
+                        :class="item.type === 'folder' ? 'text-blue-500' : 'text-gray-500'"
+                        size="16"
+                        class="mt-1"
+                      />
+                      <div class="flex-1">
+                        <code class="text-sm">{{ item.name }}</code>
+                        <p class="text-xs text-gray-600 mt-1">{{ item.description }}</p>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </rs-card>
+            </div>
+          </rs-tab-item>
+
+          <!-- Documentation Tab -->
+          <rs-tab-item title="Documentation">
+            <rs-card>
+              <template #header>
+                <Icon name="mdi:book-open" class="mr-2" />
+                Documentation
+              </template>
+              <template #body>
+                <div class="prose max-w-none">
+                  <div class="markdown-content" v-html="markdownToHtml(pluginData.markdownContent)"></div>
+                </div>
+              </template>
+            </rs-card>
+          </rs-tab-item>
+        </rs-tab>
+      </div>
+
+      <!-- Sidebar -->
+      <div class="space-y-6">
+        <!-- Plugin Info -->
+        <rs-card>
+          <template #header>
+            <Icon name="mdi:information" class="mr-2" />
+            Plugin Information
+          </template>
+          <template #body>
+            <div class="space-y-3 text-sm">
+              <div class="flex justify-between">
+                <span class="text-gray-600">Version:</span>
+                <span class="font-medium">{{ pluginData.version }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-600">Size:</span>
+                <span class="font-medium">{{ pluginData.size }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-600">License:</span>
+                <span class="font-medium">{{ pluginData.license }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-600">Category:</span>
+                <span class="font-medium capitalize">{{ pluginData.category }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-gray-600">Homepage:</span>
+                <a :href="pluginData.homepage" target="_blank" class="text-primary hover:text-primary/80 text-xs">
+                  <Icon name="mdi:open-in-new" size="14" />
+                </a>
+              </div>
+            </div>
+          </template>
+        </rs-card>
+
+        <!-- Authentik Integration -->
+        <rs-card>
+          <template #header>
+            <Icon name="mdi:shield-account" class="mr-2" />
+            Authentik Integration
+          </template>
+          <template #body>
+            <div class="space-y-3 text-sm">
+              <div>
+                <p class="text-gray-600 mb-2">Required Scopes:</p>
+                <div class="space-y-1">
+                  <rs-badge 
+                    v-for="scope in pluginData.authentikIntegration.requiredScopes" 
+                    :key="scope"
+                    variant="secondary" 
+                    size="sm"
+                    class="block w-fit"
+                  >
+                    {{ scope }}
+                  </rs-badge>
+                </div>
+              </div>
+              <div>
+                <p class="text-gray-600 mb-2">User Groups:</p>
+                <div class="space-y-1">
+                  <rs-badge 
+                    v-for="group in pluginData.authentikIntegration.groups" 
+                    :key="group"
+                    variant="primary" 
+                    size="sm"
+                    class="block w-fit"
+                  >
+                    {{ group }}
+                  </rs-badge>
+                </div>
+              </div>
+            </div>
+          </template>
+        </rs-card>
+
+        <!-- Dependencies -->
+        <rs-card>
+          <template #header>
+            <Icon name="mdi:package" class="mr-2" />
+            Dependencies
+          </template>
+          <template #body>
+            <div class="space-y-2 text-sm">
+              <div 
+                v-for="(version, name) in pluginData.dependencies" 
+                :key="name"
+                class="flex justify-between items-center"
+              >
+                <span class="text-gray-900">{{ name }}</span>
+                <code class="text-xs bg-gray-100 px-2 py-1 rounded">{{ version }}</code>
+              </div>
+            </div>
+          </template>
+        </rs-card>
+
+        <!-- Related Plugins -->
+        <rs-card>
+          <template #header>
+            <Icon name="mdi:puzzle" class="mr-2" />
+            Related Plugins
+          </template>
+          <template #body>
+            <div class="space-y-3">
+              <div 
+                v-for="plugin in relatedPlugins" 
+                :key="plugin.id"
+                class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded-lg cursor-pointer"
+                @click="navigateTo(`/devtool/plugin-manager/store/${plugin.name}`)"
+              >
+                <div 
+                  :class="getColorClasses(plugin.color)"
+                  class="w-10 h-10 rounded-lg flex items-center justify-center"
+                >
+                  <Icon :name="plugin.icon" size="20" />
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="font-medium text-sm truncate">{{ plugin.displayName }}</p>
+                  <div class="flex items-center space-x-2">
+                    <div class="flex items-center">
+                      <Icon name="mdi:star" size="12" class="text-yellow-500 mr-1" />
+                      <span class="text-xs">{{ plugin.rating }}</span>
+                    </div>
+                    <span class="text-xs text-gray-600">{{ plugin.price }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </rs-card>
+      </div>
+    </div>
+
+    <!-- Back Button -->
+    <div class="mt-6">
+      <rs-button variant="outline" @click="goBack">
+        <Icon name="mdi:arrow-left" class="mr-2" />
+        Back to Store
+      </rs-button>
+    </div>
+
+    <!-- Install Confirmation Modal -->
+    <rs-modal v-model="showInstallModal" title="Confirm Installation">
+      <template #body>
+        <div class="space-y-4">
+          <div class="flex items-start space-x-3">
+            <Icon name="mdi:alert-circle" class="text-orange-500 mt-1" size="20" />
+            <div>
+              <h4 class="font-medium text-gray-900 mb-2">Install {{ pluginData.displayName }}?</h4>
+              <p class="text-gray-600 text-sm mb-3">
+                This will install the plugin and make the following changes to your system:
+              </p>
+              <ul class="text-sm text-gray-600 space-y-1">
+                <li>• Create {{ pluginData.menuStructure.length }} new menu items</li>
+                <li>• Add {{ pluginData.apiEndpoints.length }} API endpoints</li>
+                <li>• Run 3 database migrations</li>
+                <li>• Configure Authentik integration</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end space-x-3">
+          <rs-button variant="outline" @click="showInstallModal = false">
+            Cancel
+          </rs-button>
+          <rs-button @click="confirmInstall">
+            Install Plugin
+          </rs-button>
+        </div>
+      </template>
+    </rs-modal>
+  </div>
+</template>
+
+<style scoped>
+.markdown-content {
+  line-height: 1.6;
+}
+.markdown-content h1 {
+  font-size: 1.75rem;
+  font-weight: bold;
+  margin: 1.5rem 0 1rem 0;
+}
+.markdown-content h2 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 1.25rem 0 0.75rem 0;
+}
+.markdown-content h3 {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 1rem 0 0.5rem 0;
+}
+.markdown-content p {
+  margin: 0.75rem 0;
+}
+.markdown-content ul {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+  list-style-type: disc;
+}
+.markdown-content li {
+  margin: 0.25rem 0;
+}
+.markdown-content code {
+  background-color: #f3f4f6;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+</style> 
\ No newline at end of file
diff --git a/pages/devtool/plugin-manager/store/index.vue b/pages/devtool/plugin-manager/store/index.vue
new file mode 100644
index 0000000..ff0701f
--- /dev/null
+++ b/pages/devtool/plugin-manager/store/index.vue
@@ -0,0 +1,485 @@
+<script setup>
+definePageMeta({
+  title: "Plugin Store",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+const nuxtApp = useNuxtApp();
+
+// Categories
+const categories = ref([
+  { id: 'all', name: 'All', icon: 'mdi:apps', count: 7 },
+  { id: 'business', name: 'Business', icon: 'mdi:briefcase', count: 2 },
+  { id: 'communication', name: 'Communication', icon: 'mdi:message', count: 1 },
+  { id: 'productivity', name: 'Productivity', icon: 'mdi:chart-line', count: 2 },
+  { id: 'security', name: 'Security', icon: 'mdi:shield', count: 2 }
+]);
+
+const selectedCategory = ref('all');
+const searchQuery = ref('');
+const sortBy = ref('popularity');
+
+// Available plugins in store
+const storePlugins = ref([
+  {
+    id: 1,
+    name: "rbac",
+    displayName: "RBAC System",
+    version: "1.0.0",
+    description: "Role-Based Access Control system integrated with Authentik for user management and permissions",
+    author: "CORRAD Team",
+    category: "security",
+    size: "3.2 MB",
+    rating: 4.9,
+    downloads: 2450,
+    price: "Free",
+    icon: "mdi:shield-account",
+    color: "green",
+    images: [],
+    tags: ["RBAC", "Authentication", "Permissions", "Authentik"],
+    features: [
+      "User Management",
+      "Role Assignment",
+      "Permission Control",
+      "Authentik Integration",
+      "SSO Support"
+    ],
+    isInstalled: true,
+    lastUpdated: "2024-01-20"
+  },
+  {
+    id: 2,
+    name: "notification-management",
+    displayName: "Notification Management System",
+    version: "1.0.0",
+    description: "Complete notification system with email, SMS, push notifications, and template management",
+    author: "CORRAD Team",
+    category: "communication",
+    size: "2.8 MB",
+    rating: 4.8,
+    downloads: 1890,
+    price: "Free",
+    icon: "mdi:bell-ring",
+    color: "orange",
+    images: [],
+    tags: ["Notifications", "Email", "SMS", "Templates"],
+    features: [
+      "Multi-channel Notifications",
+      "Template Management",
+      "Delivery Tracking",
+      "Scheduling System",
+      "Analytics Dashboard"
+    ],
+    isInstalled: true,
+    lastUpdated: "2024-01-18"
+  },
+  {
+    id: 3,
+    name: "business-process-maker",
+    displayName: "Business Process Maker",
+    version: "1.0.0", 
+    description: "Visual business process designer and workflow automation system like ProcessMaker",
+    author: "CORRAD Team",
+    category: "productivity",
+    size: "4.5 MB",
+    rating: 4.7,
+    downloads: 1320,
+    price: "Free",
+    icon: "mdi:flowchart",
+    color: "blue",
+    images: [],
+    tags: ["BPM", "Workflow", "Automation", "Process"],
+    features: [
+      "Visual Process Designer",
+      "Workflow Automation",
+      "Task Assignment",
+      "Progress Tracking",
+      "Integration APIs"
+    ],
+    isInstalled: false,
+    lastUpdated: "2024-01-22"
+  },
+  {
+    id: 4,
+    name: "queue-management",
+    displayName: "Queue Management System",
+    version: "1.0.0",
+    description: "Complete queue management system for organizing and processing tasks efficiently",
+    author: "CORRAD Team",
+    category: "productivity",
+    size: "2.1 MB",
+    rating: 4.6,
+    downloads: 987,
+    price: "Free",
+    icon: "mdi:format-list-numbered",
+    color: "indigo",
+    images: [],
+    tags: ["Queue", "Tasks", "Processing", "Management"],
+    features: [
+      "Queue Organization",
+      "Task Processing",
+      "Priority Management",
+      "Real-time Monitoring",
+      "Performance Analytics"
+    ],
+    isInstalled: false,
+    lastUpdated: "2024-01-15"
+  },
+  {
+    id: 5,
+    name: "report-management",
+    displayName: "Report Management System",
+    version: "1.0.0",
+    description: "Advanced reporting system integrated with Metabase for analytics and dashboard creation",
+    author: "CORRAD Team",
+    category: "business",
+    size: "3.8 MB",
+    rating: 4.8,
+    downloads: 1567,
+    price: "Free",
+    icon: "mdi:chart-line",
+    color: "blue",
+    images: [],
+    tags: ["Reports", "Analytics", "Metabase", "Dashboard"],
+    features: [
+      "Custom Reports",
+      "Metabase Integration",
+      "Interactive Dashboards",
+      "Data Visualization",
+      "Scheduled Reports"
+    ],
+    isInstalled: true,
+    lastUpdated: "2024-01-19"
+  },
+  {
+    id: 6,
+    name: "audit-trail",
+    displayName: "Audit Trail System",
+    version: "1.0.0",
+    description: "Comprehensive audit logging system using Loki and Grafana with integrated Nuxt pages",
+    author: "CORRAD Team",
+    category: "security",
+    size: "3.5 MB",
+    rating: 4.7,
+    downloads: 1234,
+    price: "Free",
+    icon: "mdi:file-document-alert",
+    color: "purple",
+    images: [],
+    tags: ["Audit", "Logging", "Loki", "Grafana"],
+    features: [
+      "Activity Logging",
+      "Loki Integration",
+      "Grafana Dashboards",
+      "Search & Filter",
+      "Compliance Reports"
+    ],
+    isInstalled: false,
+    lastUpdated: "2024-01-16"
+  },
+  {
+    id: 7,
+    name: "edms",
+    displayName: "Electronic Document Management System",
+    version: "1.0.0",
+    description: "Complete document management system like Paperless-ngx for organizing and managing documents",
+    author: "CORRAD Team",
+    category: "business",
+    size: "4.2 MB",
+    rating: 4.6,
+    downloads: 892,
+    price: "Free",
+    icon: "mdi:file-document-multiple",
+    color: "red",
+    images: [],
+    tags: ["Documents", "Management", "OCR", "Archive"],
+    features: [
+      "Document Storage",
+      "OCR Processing",
+      "Search & Index",
+      "Version Control",
+      "Access Management"
+    ],
+    isInstalled: false,
+    lastUpdated: "2024-01-14"
+  }
+]);
+
+// Computed properties
+const filteredPlugins = computed(() => {
+  let plugins = storePlugins.value;
+
+  // Filter by category
+  if (selectedCategory.value !== 'all') {
+    plugins = plugins.filter(plugin => plugin.category === selectedCategory.value);
+  }
+
+  // Filter by search
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    plugins = plugins.filter(plugin => 
+      plugin.displayName.toLowerCase().includes(query) ||
+      plugin.description.toLowerCase().includes(query) ||
+      plugin.tags.some(tag => tag.toLowerCase().includes(query))
+    );
+  }
+
+  // Sort plugins
+  switch (sortBy.value) {
+    case 'popularity':
+      plugins.sort((a, b) => b.downloads - a.downloads);
+      break;
+    case 'rating':
+      plugins.sort((a, b) => b.rating - a.rating);
+      break;
+    case 'name':
+      plugins.sort((a, b) => a.displayName.localeCompare(b.displayName));
+      break;
+    case 'recent':
+      plugins.sort((a, b) => new Date(b.lastUpdated) - new Date(a.lastUpdated));
+      break;
+  }
+
+  return plugins;
+});
+
+const getColorClasses = (color) => {
+  const colorMap = {
+    blue: 'bg-blue-100 text-blue-600',
+    green: 'bg-green-100 text-green-600',
+    purple: 'bg-purple-100 text-purple-600',
+    orange: 'bg-orange-100 text-orange-600',
+    indigo: 'bg-indigo-100 text-indigo-600',
+    red: 'bg-red-100 text-red-600'
+  };
+  return colorMap[color] || 'bg-gray-100 text-gray-600';
+};
+
+const installPlugin = async (plugin) => {
+  if (plugin.isInstalled) return;
+  
+  try {
+    // Simulate installation
+    plugin.isInstalled = true;
+    plugin.downloads += 1;
+    
+    nuxtApp.$swal.fire({
+      title: "Success",
+      text: `${plugin.displayName} installed successfully`,
+      icon: "success",
+      timer: 2000,
+      showConfirmButton: false,
+    });
+  } catch (error) {
+    nuxtApp.$swal.fire({
+      title: "Error",
+      text: "Failed to install plugin",
+      icon: "error",
+    });
+  }
+};
+
+const viewPluginDetails = (plugin) => {
+  navigateTo(`/devtool/plugin-manager/store/${plugin.name}`);
+};
+
+const formatNumber = (num) => {
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'k';
+  }
+  return num.toString();
+};
+</script>
+
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Header -->
+    <rs-card class="mb-6">
+      <template #body>
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-2xl font-bold text-gray-900 mb-2">Plugin Store</h1>
+            <p class="text-gray-600">
+              Discover and install new plugins to extend your application's functionality
+            </p>
+          </div>
+          <div class="hidden md:block">
+            <Icon name="mdi:store" size="64" class="text-primary/20" />
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Search and Filters -->
+    <rs-card class="mb-6">
+      <template #body>
+        <div class="space-y-4">
+          <!-- Search Bar -->
+          <div class="flex flex-col md:flex-row gap-4">
+            <div class="flex-1">
+              <FormKit
+                type="search"
+                placeholder="Search plugins, features, or categories..."
+                v-model="searchQuery"
+                outer-class="mb-0"
+              >
+                <template #prefix>
+                  <Icon name="mdi:magnify" class="text-gray-400" />
+                </template>
+              </FormKit>
+            </div>
+            <div class="w-full md:w-48">
+              <FormKit
+                type="select"
+                v-model="sortBy"
+                :options="[
+                  { label: 'Most Popular', value: 'popularity' },
+                  { label: 'Highest Rated', value: 'rating' },
+                  { label: 'Name A-Z', value: 'name' },
+                  { label: 'Recently Updated', value: 'recent' }
+                ]"
+                outer-class="mb-0"
+              />
+            </div>
+          </div>
+
+          <!-- Categories -->
+          <div class="flex flex-wrap gap-2">
+            <button
+              v-for="category in categories"
+              :key="category.id"
+              @click="selectedCategory = category.id"
+              :class="[
+                'flex items-center px-4 py-2 rounded-full text-sm font-medium transition-colors',
+                selectedCategory === category.id
+                  ? 'bg-primary text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              ]"
+            >
+              <Icon :name="category.icon" class="mr-2" size="16" />
+              {{ category.name }}
+              <span class="ml-2 px-2 py-0.5 bg-white/20 rounded-full text-xs">
+                {{ category.count }}
+              </span>
+            </button>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Results Info -->
+    <div class="flex items-center justify-between mb-6">
+      <p class="text-gray-600">
+        {{ filteredPlugins.length }} plugin(s) found
+      </p>
+      <div class="flex items-center gap-2 text-sm text-gray-500">
+        <Icon name="mdi:information-outline" size="16" />
+        Click on a plugin to view details
+      </div>
+    </div>
+
+    <!-- Plugin Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
+      <rs-card
+        v-for="plugin in filteredPlugins"
+        :key="plugin.id"
+        class="group hover:shadow-lg transition-all duration-300 cursor-pointer relative"
+        @click="viewPluginDetails(plugin)"
+      >
+        <template #body>
+          <div class="space-y-4">
+            <!-- Plugin Header -->
+            <div class="flex items-start justify-between">
+              <div class="flex items-center space-x-3">
+                <div 
+                  :class="getColorClasses(plugin.color)"
+                  class="w-12 h-12 rounded-xl flex items-center justify-center"
+                >
+                  <Icon :name="plugin.icon" size="24" />
+                </div>
+                <div>
+                  <h3 class="font-semibold text-lg text-gray-900 group-hover:text-primary transition-colors">
+                    {{ plugin.displayName }}
+                  </h3>
+                  <p class="text-sm text-gray-500">v{{ plugin.version }}</p>
+                </div>
+              </div>
+              <rs-badge v-if="plugin.isInstalled" variant="success" size="sm">
+                Installed
+              </rs-badge>
+            </div>
+
+            <!-- Plugin Description -->
+            <p class="text-gray-600 text-sm line-clamp-2">
+              {{ plugin.description }}
+            </p>
+
+            <!-- Plugin Stats -->
+            <div class="flex items-center justify-between text-sm text-gray-500">
+              <div class="flex items-center space-x-4">
+                <div class="flex items-center">
+                  <Icon name="mdi:star" class="text-yellow-500 mr-1" size="16" />
+                  {{ plugin.rating }}
+                </div>
+                <div class="flex items-center">
+                  <Icon name="mdi:download" class="mr-1" size="16" />
+                  {{ formatNumber(plugin.downloads) }}
+                </div>
+              </div>
+              <div class="text-right">
+                <div class="font-medium text-gray-900">{{ plugin.price }}</div>
+                <div class="text-xs">{{ plugin.size }}</div>
+              </div>
+            </div>
+
+            <!-- Tags -->
+            <div class="flex flex-wrap gap-1">
+              <span
+                v-for="tag in plugin.tags.slice(0, 3)"
+                :key="tag"
+                class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full"
+              >
+                {{ tag }}
+              </span>
+              <span v-if="plugin.tags.length > 3" class="text-xs text-gray-400">
+                +{{ plugin.tags.length - 3 }}
+              </span>
+            </div>
+
+            <!-- Action Button -->
+            <div class="pt-2 border-t">
+              <rs-button
+                class="w-full"
+                @click.stop="viewPluginDetails(plugin)"
+              >
+                <Icon name="mdi:eye" class="mr-2" size="16" />
+                View Details
+              </rs-button>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Empty State -->
+    <div v-if="filteredPlugins.length === 0" class="text-center py-12">
+      <rs-card>
+        <template #body>
+          <div class="py-8">
+            <Icon name="mdi:store-remove" size="64" class="mx-auto text-gray-400 mb-4" />
+            <h3 class="text-lg font-medium text-gray-900 mb-2">No plugins found</h3>
+            <p class="text-gray-500 mb-4">
+              Try adjusting your search terms or browse a different category
+            </p>
+            <rs-button variant="outline" @click="searchQuery = ''; selectedCategory = 'all'">
+              Clear Filters
+            </rs-button>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+  </div>
+</template> 
\ No newline at end of file
diff --git a/pages/devtool/plugin-manager/upload/index.vue b/pages/devtool/plugin-manager/upload/index.vue
new file mode 100644
index 0000000..2ef32dd
--- /dev/null
+++ b/pages/devtool/plugin-manager/upload/index.vue
@@ -0,0 +1,516 @@
+<script setup>
+definePageMeta({
+  title: "Upload Plugin",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+const nuxtApp = useNuxtApp();
+
+// Upload states
+const isUploading = ref(false);
+const uploadProgress = ref(0);
+const uploadedFile = ref(null);
+const installationLog = ref([]);
+
+// Form data
+const uploadForm = ref({
+  file: null,
+  agreeToTerms: false,
+  overwriteExisting: false
+});
+
+// Upload methods
+const handleFileUpload = (files) => {
+  if (files && files.length > 0) {
+    uploadedFile.value = files[0];
+  }
+};
+
+const simulateUpload = async () => {
+  if (!uploadedFile.value || !uploadForm.value.agreeToTerms) {
+    nuxtApp.$swal.fire({
+      title: "Error",
+      text: "Please select a file and agree to terms",
+      icon: "error",
+    });
+    return;
+  }
+
+  isUploading.value = true;
+  uploadProgress.value = 0;
+  installationLog.value = [];
+
+  // Simulate upload progress
+  const steps = [
+    { progress: 20, message: "Uploading plugin package..." },
+    { progress: 40, message: "Validating plugin manifest..." },
+    { progress: 60, message: "Checking dependencies..." },
+    { progress: 80, message: "Installing plugin files..." },
+    { progress: 100, message: "Plugin installed successfully!" }
+  ];
+
+  for (const step of steps) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    uploadProgress.value = step.progress;
+    installationLog.value.push({
+      message: step.message,
+      timestamp: new Date().toLocaleTimeString(),
+      type: step.progress === 100 ? 'success' : 'info'
+    });
+  }
+
+  isUploading.value = false;
+  
+  nuxtApp.$swal.fire({
+    title: "Success",
+    text: "Plugin uploaded and installed successfully!",
+    icon: "success",
+    timer: 3000,
+    showConfirmButton: false,
+  }).then(() => {
+    navigateTo('/devtool/plugin-manager/installed');
+  });
+};
+
+const resetUpload = () => {
+  uploadedFile.value = null;
+  uploadProgress.value = 0;
+  isUploading.value = false;
+  installationLog.value = [];
+  uploadForm.value = {
+    file: null,
+    agreeToTerms: false,
+    overwriteExisting: false
+  };
+};
+
+const formatFileSize = (bytes) => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+// app.config.js example code
+const appConfigExample = ref(`export default {
+  // Application Identity
+  name: 'notification-management',
+  version: '1.2.0',
+  displayName: 'Notification Management System',
+  description: 'Complete notification system with templates, scheduling, and analytics',
+  
+  // Authentik Integration
+  authentik: {
+    applicationSlug: 'notification-management',
+    requiredScopes: ['notifications:read', 'notifications:write', 'notifications:admin'],
+    groups: ['notification-users', 'notification-admins']
+  },
+  
+  // CORRAD Menu Integration
+  menuStructure: {
+    title: 'Notifications',
+    icon: 'bell',
+    permission: 'notifications:read',
+    order: 100,
+    children: [
+      {
+        title: 'Dashboard',
+        route: '/notifications/dashboard',
+        icon: 'dashboard',
+        permission: 'notifications:read'
+      },
+      {
+        title: 'Send Notification',
+        route: '/notifications/send',
+        icon: 'send',
+        permission: 'notifications:write'
+      },
+      {
+        title: 'Templates',
+        route: '/notifications/templates',
+        icon: 'template',
+        permission: 'notifications:write'
+      },
+      {
+        title: 'History',
+        route: '/notifications/history',
+        icon: 'history',
+        permission: 'notifications:read'
+      },
+      {
+        title: 'Settings',
+        route: '/notifications/settings',
+        icon: 'settings',
+        permission: 'notifications:admin'
+      },
+      {
+        title: 'Reports',
+        route: '/notifications/reports',
+        icon: 'chart',
+        permission: 'notifications:admin'
+      }
+    ]
+  },
+  
+  // Database Schema
+  migrations: [
+    'migrations/001_create_notifications.sql',
+    'migrations/002_create_templates.sql',
+    'migrations/003_create_schedules.sql'
+  ],
+  
+  // API Endpoints
+  apiRoutes: [
+    {
+      path: '/api/notifications',
+      methods: ['GET', 'POST', 'PUT', 'DELETE'],
+      permissions: {
+        'GET': 'notifications:read',
+        'POST': 'notifications:write',
+        'PUT': 'notifications:write',
+        'DELETE': 'notifications:admin'
+      }
+    },
+    {
+      path: '/api/notifications/templates',
+      methods: ['GET', 'POST', 'PUT', 'DELETE'],
+      permissions: {
+        'GET': 'notifications:read',
+        'POST': 'notifications:write',
+        'PUT': 'notifications:write',
+        'DELETE': 'notifications:admin'
+      }
+    }
+  ],
+  
+  // Dependencies
+  dependencies: {
+    corrad: '^2.0.0',
+    authentik: '^2023.10.0'
+  },
+  
+  // Installation hooks
+  hooks: {
+    preInstall: 'scripts/pre-install.js',
+    postInstall: 'scripts/post-install.js',
+    preUninstall: 'scripts/pre-uninstall.js'
+  }
+}`);
+</script>
+
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Header -->
+    <rs-card class="mb-6">
+      <template #body>
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-2xl font-bold text-gray-900 mb-2">Upload Plugin</h1>
+            <p class="text-gray-600">
+              Install custom plugin packages to extend your application
+            </p>
+          </div>
+          <div class="hidden md:block">
+            <Icon name="mdi:cloud-upload" size="64" class="text-primary/20" />
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Security Warning -->
+    <rs-card class="mb-6">
+      <template #body>
+        <div class="flex items-start space-x-3">
+          <Icon name="mdi:security" class="text-orange-500 mt-1" size="20" />
+          <div>
+            <h3 class="font-medium text-orange-800 mb-2">Plugin Installation Guidelines</h3>
+            <p class="text-orange-700 text-sm mb-3">
+              Upload plugin packages for CORRAD+ applications. Each plugin should include app.config.js and proper folder structure.
+              Supported plugins: RBAC, Notification Management, Business Process Maker, Queue Management, Report Management, Audit Trail, and EDMS.
+            </p>
+            <div class="grid grid-cols-3 md:grid-cols-7 gap-2">
+              <div class="bg-green-100 rounded px-2 py-1 text-xs text-center">
+                <Icon name="mdi:shield-account" class="text-green-600 mb-1" size="12" />
+                <div class="text-green-800">RBAC</div>
+              </div>
+              <div class="bg-orange-100 rounded px-2 py-1 text-xs text-center">
+                <Icon name="mdi:bell-ring" class="text-orange-600 mb-1" size="12" />
+                <div class="text-orange-800">Notify</div>
+              </div>
+              <div class="bg-blue-100 rounded px-2 py-1 text-xs text-center">
+                <Icon name="mdi:flowchart" class="text-blue-600 mb-1" size="12" />
+                <div class="text-blue-800">BPM</div>
+              </div>
+              <div class="bg-indigo-100 rounded px-2 py-1 text-xs text-center">
+                <Icon name="mdi:format-list-numbered" class="text-indigo-600 mb-1" size="12" />
+                <div class="text-indigo-800">Queue</div>
+              </div>
+              <div class="bg-blue-100 rounded px-2 py-1 text-xs text-center">
+                <Icon name="mdi:chart-line" class="text-blue-600 mb-1" size="12" />
+                <div class="text-blue-800">Reports</div>
+              </div>
+              <div class="bg-purple-100 rounded px-2 py-1 text-xs text-center">
+                <Icon name="mdi:file-document-alert" class="text-purple-600 mb-1" size="12" />
+                <div class="text-purple-800">Audit</div>
+              </div>
+              <div class="bg-red-100 rounded px-2 py-1 text-xs text-center">
+                <Icon name="mdi:file-document-multiple" class="text-red-600 mb-1" size="12" />
+                <div class="text-red-800">EDMS</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Upload Form -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center">
+            <Icon name="mdi:upload" class="mr-2" />
+            Upload Plugin Package
+          </div>
+        </template>
+        <template #body>
+          <FormKit type="form" :actions="false" @submit="simulateUpload">
+            <!-- File Upload -->
+            <div class="mb-6">
+              <label class="block text-sm font-medium text-gray-700 mb-2">
+                Plugin Package (.zip)
+              </label>
+              <div 
+                class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-colors"
+                :class="{ 'border-primary bg-primary/5': uploadedFile }"
+              >
+                <div v-if="!uploadedFile">
+                  <Icon name="mdi:cloud-upload" class="mx-auto text-gray-400 mb-4" size="48" />
+                  <p class="text-gray-600 mb-2">Drag and drop your plugin file here, or</p>
+                  <FormKit
+                    type="file"
+                    accept=".zip"
+                    @change="handleFileUpload"
+                    wrapper-class="inline-block"
+                    outer-class="mb-0"
+                    input-class="hidden"
+                  >
+                    <template #label>
+                      <rs-button variant="outline" size="sm">
+                        Browse Files
+                      </rs-button>
+                    </template>
+                  </FormKit>
+                  <p class="text-xs text-gray-500 mt-2">Maximum file size: 50MB</p>
+                </div>
+                <div v-else class="space-y-2">
+                  <Icon name="mdi:file-check" class="mx-auto text-green-500 mb-2" size="32" />
+                  <p class="font-medium text-gray-900">{{ uploadedFile.name }}</p>
+                  <p class="text-sm text-gray-500">{{ formatFileSize(uploadedFile.size) }}</p>
+                  <rs-button variant="outline" size="sm" @click="resetUpload">
+                    Choose Different File
+                  </rs-button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Options -->
+            <div class="space-y-4 mb-6">
+              <FormKit
+                type="checkbox"
+                v-model="uploadForm.overwriteExisting"
+                label="Overwrite existing plugin if it exists"
+                help="This will replace any existing plugin with the same name"
+              />
+              
+              <FormKit
+                type="checkbox"
+                v-model="uploadForm.agreeToTerms"
+                label="I understand that this plugin will be installed as a complete CORRAD+ application"
+                validation="required"
+                :validation-messages="{ required: 'You must confirm to continue' }"
+              />
+            </div>
+
+            <!-- Upload Button -->
+            <div class="flex gap-3">
+              <rs-button 
+                btnType="submit" 
+                class="flex-1"
+                :disabled="!uploadedFile || isUploading"
+              >
+                <Icon v-if="!isUploading" name="mdi:upload" class="mr-2" size="16" />
+                <Icon v-else name="mdi:loading" class="mr-2 animate-spin" size="16" />
+                {{ isUploading ? 'Installing...' : 'Upload & Install' }}
+              </rs-button>
+              <rs-button variant="outline" @click="resetUpload" :disabled="isUploading">
+                Reset
+              </rs-button>
+            </div>
+          </FormKit>
+        </template>
+      </rs-card>
+
+      <!-- Upload Progress & Instructions -->
+      <div class="space-y-6">
+        <!-- Progress -->
+        <rs-card v-if="isUploading || uploadProgress > 0">
+          <template #header>
+            <div class="flex items-center">
+              <Icon name="mdi:progress-upload" class="mr-2" />
+              Installation Progress
+            </div>
+          </template>
+          <template #body>
+            <div class="space-y-4">
+              <!-- Progress Bar -->
+              <div>
+                <div class="flex justify-between text-sm mb-1">
+                  <span>Installing plugin...</span>
+                  <span>{{ uploadProgress }}%</span>
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-2">
+                  <div 
+                    class="bg-primary h-2 rounded-full transition-all duration-300"
+                    :style="{ width: uploadProgress + '%' }"
+                  ></div>
+                </div>
+              </div>
+
+              <!-- Installation Log -->
+              <div class="space-y-2 max-h-40 overflow-y-auto">
+                <div 
+                  v-for="(log, index) in installationLog" 
+                  :key="index"
+                  class="flex items-start space-x-2 text-sm"
+                >
+                  <Icon 
+                    :name="log.type === 'success' ? 'mdi:check-circle' : 'mdi:information'" 
+                    :class="log.type === 'success' ? 'text-green-500' : 'text-blue-500'"
+                    size="16"
+                    class="mt-0.5"
+                  />
+                  <div class="flex-1">
+                    <span class="text-gray-900">{{ log.message }}</span>
+                    <span class="text-gray-500 ml-2">{{ log.timestamp }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </rs-card>
+
+        <!-- Instructions -->
+        <rs-card>
+          <template #header>
+            <div class="flex items-center">
+              <Icon name="mdi:information-outline" class="mr-2" />
+              Plugin Requirements
+            </div>
+          </template>
+          <template #body>
+            <div class="space-y-4 text-sm">
+              <div>
+                <h4 class="font-medium text-gray-900 mb-2">Plugin Structure Requirements</h4>
+                <ul class="list-disc list-inside text-gray-600 space-y-1">
+                  <li>Must be a valid .zip file</li>
+                  <li>Include app.config.js with complete application metadata</li>
+                  <li>Authentik integration configuration (scopes, groups, permissions)</li>
+                  <li>CORRAD menu structure with proper routing and permissions</li>
+                  <li>Database migrations with SQL files</li>
+                  <li>API routes with method-specific permissions</li>
+                  <li>Installation hooks for pre/post install actions</li>
+                </ul>
+              </div>
+              
+              <div>
+                <h4 class="font-medium text-gray-900 mb-2">app.config.js Example</h4>
+                <RsCodeMirror 
+                  :model-value="appConfigExample"
+                  mode="javascript"
+                  height="300px"
+                  :disabled="true"
+                />
+              </div>
+
+              <div>
+                <h4 class="font-medium text-gray-900 mb-2">Complete Folder Structure</h4>
+                <div class="bg-gray-100 p-3 rounded text-xs font-mono">
+                  <pre>notification-management/
+├── app.config.js                 # Complete application config
+├── pages/
+│   ├── dashboard/
+│   ├── send/
+│   ├── templates/
+│   ├── history/
+│   ├── settings/
+│   └── reports/
+├── components/
+│   ├── NotificationSender.vue
+│   ├── NotificationList.vue
+│   └── NotificationStats.vue
+├── server/
+│   └── api/
+│       ├── notifications/
+│       └── templates/
+├── composables/
+│   └── useNotifications.js
+├── migrations/
+│   ├── 001_create_notifications.sql
+│   ├── 002_create_templates.sql
+│   └── 003_create_schedules.sql
+└── scripts/
+    ├── pre-install.js
+    ├── post-install.js
+    └── pre-uninstall.js</pre>
+                </div>
+              </div>
+            </div>
+          </template>
+        </rs-card>
+
+        <!-- Recent Uploads -->
+        <rs-card>
+          <template #header>
+            <div class="flex items-center">
+              <Icon name="mdi:history" class="mr-2" />
+              Recent Uploads
+            </div>
+          </template>
+          <template #body>
+            <div class="space-y-3">
+              <div class="flex items-center justify-between py-2 border-b">
+                <div class="flex items-center space-x-3">
+                  <Icon name="mdi:check-circle" class="text-green-500" size="16" />
+                  <div>
+                    <p class="text-sm font-medium">Report Management System</p>
+                    <p class="text-xs text-gray-500">Uploaded 3 days ago</p>
+                  </div>
+                </div>
+                <rs-badge variant="success" size="sm">Success</rs-badge>
+              </div>
+              
+              <div class="flex items-center justify-between py-2 border-b">
+                <div class="flex items-center space-x-3">
+                  <Icon name="mdi:check-circle" class="text-green-500" size="16" />
+                  <div>
+                    <p class="text-sm font-medium">Notification Management System</p>
+                    <p class="text-xs text-gray-500">Uploaded 1 week ago</p>
+                  </div>
+                </div>
+                <rs-badge variant="success" size="sm">Success</rs-badge>
+              </div>
+
+              <div class="text-center py-4 text-gray-500 text-sm">
+                Ready to upload your next CORRAD+ application
+              </div>
+            </div>
+          </template>
+        </rs-card>
+      </div>
+    </div>
+  </div>
+</template> 
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index f8ffc9f..34d2c01 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -99,14 +99,3 @@ model site_settings {
   settingModifiedDate  DateTime? @db.DateTime(0)
   siteLoginLogo        String?   @db.VarChar(500)
 }
-
-model ticket {
-  ticketId    Int      @id @default(autoincrement())
-  title       String
-  description String
-  dueDate     DateTime
-  priority    String   @default("medium")
-  status      String   @default("pending")
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime
-}