diff --git a/src/pages/Channels/index.tsx b/src/pages/Channels/index.tsx
index 176a09205..22a814b88 100644
--- a/src/pages/Channels/index.tsx
+++ b/src/pages/Channels/index.tsx
@@ -111,18 +111,20 @@ export function Channels() {
     );
   }
 
+  const safeChannels = Array.isArray(channels) ? channels : [];
+
   return (
     <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
       <div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
 
         {/* Header */}
-        <div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
+        <div className="flex flex-col md:flex-row md:items-start justify-between mb-8 shrink-0 gap-4">
           <div>
             <h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
-              {t('title', 'Messaging Channels')}
+              {t('title') || 'Channels'}
             </h1>
             <p className="text-[17px] text-foreground/80 font-medium">
-              {t('subtitle', 'Manage your messaging channels and connections')}
+              {t('subtitle') || 'Connect to messaging platforms.'}
             </p>
           </div>
 
@@ -133,15 +135,16 @@ export function Channels() {
                 void fetchChannels();
                 void fetchConfiguredTypes();
               }}
+              disabled={gatewayStatus.state !== 'running'}
               className="h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground transition-colors"
             >
-              <RefreshCw className="h-3.5 w-3.5 mr-2" />
+              <RefreshCw className={cn("h-3.5 w-3.5 mr-2", loading && "animate-spin")} />
               {t('refresh')}
             </Button>
           </div>
         </div>
         {/* Content Area */}
-        <div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2">
+        <div className="flex-1 overflow-y-auto min-h-0 pr-2 -mr-2 space-y-8 pb-10">
 
           {/* Gateway Warning */}
           {gatewayStatus.state !== 'running' && (
@@ -164,13 +167,13 @@ export function Channels() {
           )}
 
           {/* Available Channels (Configured) */}
-          {channels.length > 0 && (
+          {safeChannels.length > 0 && (
             <div className="mb-12">
               <h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
                 Available Channels
               </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
-                {channels.map((channel) => (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {safeChannels.map((channel) => (
                   <ChannelCard
                     key={channel.id}
                     channel={channel}
@@ -190,7 +193,7 @@ export function Channels() {
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
               {displayedChannelTypes.map((type) => {
                 const meta = CHANNEL_META[type];
-                const isConfigured = channels.some(c => c.type === type) || configuredTypes.includes(type);
+                const isConfigured = safeChannels.some(c => c.type === type) || configuredTypes.includes(type);
 
                 // Hide already configured channels from "Supported Channels" section
                 if (isConfigured) return null;
diff --git a/src/pages/Cron/index.tsx b/src/pages/Cron/index.tsx
index d74dcd1ef..f3e28a22a 100644
--- a/src/pages/Cron/index.tsx
+++ b/src/pages/Cron/index.tsx
@@ -284,8 +284,8 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
                     onClick={() => setSchedule(preset.value)}
                     className={cn(
                       "justify-start h-10 rounded-xl font-medium text-[13px] transition-all",
-                      schedule === preset.value 
-                        ? "bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border-transparent" 
+                      schedule === preset.value
+                        ? "bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border-transparent"
                         : "bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground"
                     )}
                   >
@@ -387,7 +387,7 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
   };
 
   return (
-    <div 
+    <div
       className="group flex flex-col p-5 rounded-2xl bg-transparent border border-transparent hover:bg-black/5 dark:hover:bg-white/5 transition-all relative overflow-hidden cursor-pointer"
       onClick={onEdit}
     >
@@ -399,11 +399,11 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
           <div className="flex flex-col min-w-0">
             <div className="flex items-center gap-2 mb-1">
               <h3 className="text-[16px] font-semibold text-foreground truncate">{job.name}</h3>
-              <div 
+              <div
                 className={cn(
                   "w-2 h-2 rounded-full shrink-0",
                   job.enabled ? "bg-green-500" : "bg-muted-foreground"
-                )} 
+                )}
                 title={job.enabled ? t('stats.active') : t('stats.paused')}
               />
             </div>
@@ -413,7 +413,7 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
             </p>
           </div>
         </div>
-        
+
         <div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
           <Switch
             checked={job.enabled}
@@ -421,7 +421,7 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
           />
         </div>
       </div>
-      
+
       <div className="flex-1 flex flex-col justify-end mt-2 pl-[62px]">
         <div className="flex items-start gap-2 mb-3">
           <MessageSquare className="h-3.5 w-3.5 mt-0.5 text-muted-foreground shrink-0" />
@@ -483,9 +483,9 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
             )}
             {t('card.runNow')}
           </Button>
-          <Button 
-            variant="ghost" 
-            size="sm" 
+          <Button
+            variant="ghost"
+            size="sm"
             onClick={handleDelete}
             className="h-8 px-3 text-destructive/70 hover:text-destructive hover:bg-destructive/10 rounded-lg text-[13px] font-medium transition-colors"
           >
@@ -516,9 +516,10 @@ export function Cron() {
   }, [fetchJobs, isGatewayRunning]);
 
   // Statistics
-  const activeJobs = jobs.filter((j) => j.enabled);
-  const pausedJobs = jobs.filter((j) => !j.enabled);
-  const failedJobs = jobs.filter((j) => j.lastRun && !j.lastRun.success);
+  const safeJobs = Array.isArray(jobs) ? jobs : [];
+  const activeJobs = safeJobs.filter((j) => j.enabled);
+  const pausedJobs = safeJobs.filter((j) => !j.enabled);
+  const failedJobs = safeJobs.filter((j) => j.lastRun && !j.lastRun.success);
 
   const handleSave = useCallback(async (input: CronJobCreateInput) => {
     if (editingJob) {
@@ -615,11 +616,11 @@ export function Cron() {
                 </div>
               </div>
               <div className="mt-4 flex items-baseline gap-3">
-                <p className="text-[40px] leading-none font-serif text-foreground">{jobs.length}</p>
+                <p className="text-[40px] leading-none font-serif text-foreground">{safeJobs.length}</p>
                 <p className="text-[14px] font-medium text-muted-foreground">{t('stats.total')}</p>
               </div>
             </div>
-            
+
             <div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
               <div className="flex items-center justify-between">
                 <div className="h-11 w-11 rounded-full bg-green-500/10 flex items-center justify-center">
@@ -658,7 +659,7 @@ export function Cron() {
           </div>
 
           {/* Jobs List */}
-          {jobs.length === 0 ? (
+          {safeJobs.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
               <Clock className="h-10 w-10 mb-4 opacity-50" />
               <h3 className="text-lg font-medium mb-2 text-foreground">{t('empty.title')}</h3>
@@ -679,7 +680,7 @@ export function Cron() {
             </div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
-              {jobs.map((job) => (
+              {safeJobs.map((job) => (
                 <CronJobCard
                   key={job.id}
                   job={job}
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 4887ac0c1..8f2e4d6b1 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -225,7 +225,7 @@ export function Dashboard() {
             <CardTitle className="text-lg">{t('connectedChannels')}</CardTitle>
           </CardHeader>
           <CardContent>
-            {channels.length === 0 ? (
+            {(!Array.isArray(channels) || channels.length === 0) ? (
               <FeedbackState
                 state="empty"
                 title={t('noChannels')}
@@ -269,7 +269,7 @@ export function Dashboard() {
             <CardTitle className="text-lg">{t('activeSkills')}</CardTitle>
           </CardHeader>
           <CardContent>
-            {skills.filter((s) => s.enabled).length === 0 ? (
+            {(!Array.isArray(skills) || skills.filter((s) => s.enabled).length === 0) ? (
               <FeedbackState
                 state="empty"
                 title={t('noSkills')}
diff --git a/src/pages/Skills/index.tsx b/src/pages/Skills/index.tsx
index 5700b48f3..10b7919be 100644
--- a/src/pages/Skills/index.tsx
+++ b/src/pages/Skills/index.tsx
@@ -56,7 +56,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
   // Initialize config from skill
   useEffect(() => {
     if (!skill) return;
-    
+
     // API Key
     if (skill.config?.apiKey) {
       setApiKey(String(skill.config.apiKey));
@@ -88,14 +88,14 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
         method: 'POST',
         body: JSON.stringify({ slug: skill.slug }),
       });
-        if (result.success) {
-          toast.success(t('toast.openedEditor'));
-        } else {
-          toast.error(result.error || t('toast.failedEditor'));
-        }
-      } catch (err) {
-        toast.error(t('toast.failedEditor') + ': ' + String(err));
+      if (result.success) {
+        toast.success(t('toast.openedEditor'));
+      } else {
+        toast.error(result.error || t('toast.failedEditor'));
       }
+    } catch (err) {
+      toast.error(t('toast.failedEditor') + ': ' + String(err));
+    }
   };
 
   const handleAddEnv = () => {
@@ -157,20 +157,20 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
 
   return (
     <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <SheetContent 
-        className="w-full sm:max-w-[450px] p-0 flex flex-col border-l border-black/10 dark:border-white/10 bg-[#f3f1e9] dark:bg-[#1a1a19] shadow-[0_0_40px_rgba(0,0,0,0.2)]" 
+      <SheetContent
+        className="w-full sm:max-w-[450px] p-0 flex flex-col border-l border-black/10 dark:border-white/10 bg-[#f3f1e9] dark:bg-[#1a1a19] shadow-[0_0_40px_rgba(0,0,0,0.2)]"
         side="right"
       >
         {/* Scrollable Content */}
         <div className="flex-1 overflow-y-auto px-8 py-10">
           <div className="flex flex-col items-center mb-8">
             <div className="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-[#2c2c2a] border border-black/5 dark:border-white/5 shrink-0 mb-4 relative shadow-sm">
-               <span className="text-3xl">{skill.icon || '🔧'}</span>
-               {skill.isCore && (
-                 <div className="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-[#1a1a19] rounded-full p-1 shadow-sm border border-black/5 dark:border-white/5">
-                   <Lock className="h-3 w-3 text-muted-foreground shrink-0" />
-                 </div>
-               )}
+              <span className="text-3xl">{skill.icon || '🔧'}</span>
+              {skill.isCore && (
+                <div className="absolute -bottom-1 -right-1 bg-[#f3f1e9] dark:bg-[#1a1a19] rounded-full p-1 shadow-sm border border-black/5 dark:border-white/5">
+                  <Lock className="h-3 w-3 text-muted-foreground shrink-0" />
+                </div>
+              )}
             </div>
             <h2 className="text-[28px] font-serif text-foreground font-normal mb-3 text-center tracking-tight">
               {skill.name}
@@ -239,7 +239,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
 
                 <div className="space-y-2">
                   {envVars.length === 0 && (
-                     <div className="text-[13px] text-foreground/50 font-medium italic flex items-center bg-[#eeece3] dark:bg-[#151514] border border-black/5 dark:border-white/5 rounded-xl px-4 py-3 shadow-sm">
+                    <div className="text-[13px] text-foreground/50 font-medium italic flex items-center bg-[#eeece3] dark:bg-[#151514] border border-black/5 dark:border-white/5 rounded-xl px-4 py-3 shadow-sm">
                       {t('detail.noEnvVars', 'No environment variables configured.')}
                     </div>
                   )}
@@ -286,14 +286,14 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
               </div>
             )}
           </div>
-          
+
           {/* Centered Footer Buttons */}
           <div className="pt-8 pb-4 flex items-center justify-center gap-4 w-full px-2 max-w-[340px] mx-auto">
             {!skill.isCore && (
-              <Button 
-                onClick={handleSaveConfig} 
+              <Button
+                onClick={handleSaveConfig}
                 className={cn(
-                  "flex-1 h-[42px] text-[13px] rounded-full font-semibold shadow-sm border border-transparent transition-all", 
+                  "flex-1 h-[42px] text-[13px] rounded-full font-semibold shadow-sm border border-transparent transition-all",
                   "bg-[#0a84ff] hover:bg-[#007aff] text-white"
                 )}
                 disabled={isSaving}
@@ -301,7 +301,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
                 {isSaving ? t('detail.saving', 'Saving...') : 'Save Configuration'}
               </Button>
             )}
-            
+
             {!skill.isCore && (
               <Button
                 variant="outline"
@@ -315,8 +315,8 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall }: Sk
                   }
                 }}
               >
-                {!skill.isBundled && onUninstall 
-                  ? 'Uninstall' 
+                {!skill.isBundled && onUninstall
+                  ? 'Uninstall'
                   : (skill.enabled ? t('detail.disable', 'Disable') : t('detail.enable', 'Enable'))}
               </Button>
             )}
@@ -380,7 +380,8 @@ export function Skills() {
   }, [fetchSkills, isGatewayRunning]);
 
   // Filter skills
-  const filteredSkills = skills.filter((skill) => {
+  const safeSkills = Array.isArray(skills) ? skills : [];
+  const filteredSkills = safeSkills.filter((skill) => {
     const matchesSearch = skill.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
       skill.description.toLowerCase().includes(searchQuery.toLowerCase());
 
@@ -404,9 +405,9 @@ export function Skills() {
   });
 
   const sourceStats = {
-    all: skills.length,
-    builtIn: skills.filter(s => s.isBundled).length,
-    marketplace: skills.filter(s => !s.isBundled).length,
+    all: safeSkills.length,
+    builtIn: safeSkills.filter(s => s.isBundled).length,
+    marketplace: safeSkills.filter(s => !s.isBundled).length,
   };
 
   const bulkToggleVisible = useCallback(async (enable: boolean) => {
@@ -453,7 +454,7 @@ export function Skills() {
     }
   }, [enableSkill, disableSkill, t]);
 
-  const hasInstalledSkills = skills.some(s => !s.isBundled);
+  const hasInstalledSkills = safeSkills.some(s => !s.isBundled);
 
   const handleOpenSkillsFolder = useCallback(async () => {
     try {
@@ -548,7 +549,7 @@ export function Skills() {
   return (
     <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
       <div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
-        
+
         {/* Header */}
         <div className="flex flex-col md:flex-row md:items-start justify-between mb-6 shrink-0 gap-4">
           <div>
@@ -559,11 +560,11 @@ export function Skills() {
               {t('subtitle') || 'Browse and manage AI capabilities.'}
             </p>
           </div>
-          
+
           <div className="flex items-center gap-3 md:mt-2">
             {hasInstalledSkills && (
-              <button 
-                onClick={handleOpenSkillsFolder} 
+              <button
+                onClick={handleOpenSkillsFolder}
                 className="hover:bg-black/5 dark:hover:bg-white/5 transition-colors shrink-0 text-[13px] font-medium px-4 h-8 rounded-full border border-black/10 dark:border-white/10 flex items-center justify-center text-foreground/80 hover:text-foreground"
               >
                 <FolderOpen className="h-4 w-4 mr-2" />
@@ -678,56 +679,56 @@ export function Skills() {
           )}
 
           <div className="flex flex-col gap-1">
-          {activeTab === 'all' && (
-            filteredSkills.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
-                <Puzzle className="h-10 w-10 mb-4 opacity-50" />
-                <p>{searchQuery ? t('noSkillsSearch') : t('noSkillsAvailable')}</p>
-              </div>
-            ) : (
-              filteredSkills.map((skill) => (
-                <div
-                  key={skill.id}
-                  className="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer border-b border-black/5 dark:border-white/5 last:border-0"
-                  onClick={() => setSelectedSkill(skill)}
-                >
-                  <div className="flex items-start gap-4 flex-1 overflow-hidden pr-4">
-                    <div className="h-10 w-10 shrink-0 flex items-center justify-center text-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl overflow-hidden">
-                      {skill.icon || '🧩'}
-                    </div>
-                    <div className="flex flex-col overflow-hidden">
-                      <div className="flex items-center gap-2 mb-1">
-                        <h3 className="text-[15px] font-semibold text-foreground truncate">{skill.name}</h3>
-                        {skill.isCore ? (
-                          <Lock className="h-3 w-3 text-muted-foreground" />
-                        ) : skill.isBundled ? (
-                          <Puzzle className="h-3 w-3 text-blue-500/70" />
-                        ) : null}
-                      </div>
-                      <p className="text-[13.5px] text-muted-foreground line-clamp-1 pr-6 leading-relaxed">
-                        {skill.description}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-6 shrink-0" onClick={e => e.stopPropagation()}>
-                    {skill.version && (
-                      <span className="text-[13px] font-mono text-muted-foreground">
-                        v{skill.version}
-                      </span>
-                    )}
-                    <Switch
-                      checked={skill.enabled}
-                      onCheckedChange={(checked) => handleToggle(skill.id, checked)}
-                      disabled={skill.isCore}
-                    />
-                  </div>
+            {activeTab === 'all' && (
+              filteredSkills.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+                  <Puzzle className="h-10 w-10 mb-4 opacity-50" />
+                  <p>{searchQuery ? t('noSkillsSearch') : t('noSkillsAvailable')}</p>
                 </div>
-              ))
-            )
-          )}
+              ) : (
+                filteredSkills.map((skill) => (
+                  <div
+                    key={skill.id}
+                    className="group flex flex-row items-center justify-between py-3.5 px-3 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer border-b border-black/5 dark:border-white/5 last:border-0"
+                    onClick={() => setSelectedSkill(skill)}
+                  >
+                    <div className="flex items-start gap-4 flex-1 overflow-hidden pr-4">
+                      <div className="h-10 w-10 shrink-0 flex items-center justify-center text-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-xl overflow-hidden">
+                        {skill.icon || '🧩'}
+                      </div>
+                      <div className="flex flex-col overflow-hidden">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h3 className="text-[15px] font-semibold text-foreground truncate">{skill.name}</h3>
+                          {skill.isCore ? (
+                            <Lock className="h-3 w-3 text-muted-foreground" />
+                          ) : skill.isBundled ? (
+                            <Puzzle className="h-3 w-3 text-blue-500/70" />
+                          ) : null}
+                        </div>
+                        <p className="text-[13.5px] text-muted-foreground line-clamp-1 pr-6 leading-relaxed">
+                          {skill.description}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-6 shrink-0" onClick={e => e.stopPropagation()}>
+                      {skill.version && (
+                        <span className="text-[13px] font-mono text-muted-foreground">
+                          v{skill.version}
+                        </span>
+                      )}
+                      <Switch
+                        checked={skill.enabled}
+                        onCheckedChange={(checked) => handleToggle(skill.id, checked)}
+                        disabled={skill.isCore}
+                      />
+                    </div>
+                  </div>
+                ))
+              )
+            )}
 
-          {activeTab === 'marketplace' && (
-             <div className="flex flex-col gap-1 mt-2">
+            {activeTab === 'marketplace' && (
+              <div className="flex flex-col gap-1 mt-2">
                 {searchError && (
                   <div className="mb-4 p-4 rounded-xl border border-destructive/50 bg-destructive/10 text-destructive text-sm font-medium flex items-center gap-2">
                     <AlertCircle className="h-5 w-5 shrink-0" />
@@ -738,7 +739,7 @@ export function Skills() {
                     </span>
                   </div>
                 )}
-                
+
                 {activeTab === 'marketplace' && marketplaceQuery && searching && (
                   <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
                     <LoadingSpinner size="lg" />
@@ -748,9 +749,9 @@ export function Skills() {
 
                 {searchResults.length > 0 ? (
                   searchResults.map((skill) => {
-                    const isInstalled = skills.some(s => s.id === skill.slug || s.name === skill.name);
+                    const isInstalled = safeSkills.some(s => s.id === skill.slug || s.name === skill.name);
                     const isInstallLoading = !!installing[skill.slug];
-                    
+
                     return (
                       <div
                         key={skill.slug}
@@ -774,32 +775,32 @@ export function Skills() {
                           </div>
                         </div>
                         <div className="flex items-center gap-4 shrink-0" onClick={e => e.stopPropagation()}>
-                           {skill.version && (
-                             <span className="text-[13px] font-mono text-muted-foreground mr-2">
-                               v{skill.version}
-                             </span>
-                           )}
-                           {isInstalled ? (
-                             <Button
-                               variant="destructive"
-                               size="sm"
-                               onClick={() => handleUninstall(skill.slug)}
-                               disabled={isInstallLoading}
-                               className="h-8 shadow-none"
-                             >
-                               {isInstallLoading ? <LoadingSpinner size="sm" /> : <Trash2 className="h-3.5 w-3.5" />}
-                             </Button>
-                           ) : (
-                             <Button
-                               variant="default"
-                               size="sm"
-                               onClick={() => handleInstall(skill.slug)}
-                               disabled={isInstallLoading}
-                               className="h-8 px-4 rounded-full shadow-none font-medium text-xs"
-                             >
-                               {isInstallLoading ? <LoadingSpinner size="sm" /> : t('marketplace.install', 'Install')}
-                             </Button>
-                           )}
+                          {skill.version && (
+                            <span className="text-[13px] font-mono text-muted-foreground mr-2">
+                              v{skill.version}
+                            </span>
+                          )}
+                          {isInstalled ? (
+                            <Button
+                              variant="destructive"
+                              size="sm"
+                              onClick={() => handleUninstall(skill.slug)}
+                              disabled={isInstallLoading}
+                              className="h-8 shadow-none"
+                            >
+                              {isInstallLoading ? <LoadingSpinner size="sm" /> : <Trash2 className="h-3.5 w-3.5" />}
+                            </Button>
+                          ) : (
+                            <Button
+                              variant="default"
+                              size="sm"
+                              onClick={() => handleInstall(skill.slug)}
+                              disabled={isInstallLoading}
+                              className="h-8 px-4 rounded-full shadow-none font-medium text-xs"
+                            >
+                              {isInstallLoading ? <LoadingSpinner size="sm" /> : t('marketplace.install', 'Install')}
+                            </Button>
+                          )}
                         </div>
                       </div>
                     );