diff --git a/frontend/src/app/(dashboard)/agents/config/[agentId]/page.tsx b/frontend/src/app/(dashboard)/agents/config/[agentId]/page.tsx
index 91124b07..a854fc20 100644
--- a/frontend/src/app/(dashboard)/agents/config/[agentId]/page.tsx
+++ b/frontend/src/app/(dashboard)/agents/config/[agentId]/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { Loader2, Save, Eye } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -13,7 +13,6 @@ import { toast } from 'sonner';
 import { AgentPreview } from '../../../../../components/agents/agent-preview';
 
 import { useAgentVersionData } from '../../../../../hooks/use-agent-version-data';
-import { useSearchParams } from 'next/navigation';
 import { useAgentVersionStore } from '../../../../../lib/stores/agent-version-store';
 
 import { AgentHeader, VersionAlert, ConfigurationTab } from '@/components/agents/config';
@@ -24,6 +23,7 @@ import { useAgentConfigTour } from '@/hooks/use-agent-config-tour';
 import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
 import { TourConfirmationDialog } from '@/components/tour/TourConfirmationDialog';
 
+// Tour steps for agent configuration
 const agentConfigTourSteps: Step[] = [
   {
     target: '[data-tour="agent-header"]',
@@ -76,20 +76,21 @@ const agentConfigTourSteps: Step[] = [
   },
   {
     target: '[data-tour="triggers-section"]',
-    content: 'Add various triggers to your agent to help it perform tasks and automate workflows.',
-    title: 'Triggers',
+    content: 'Set up automated triggers for your agent to run on schedules or events.',
+    title: 'Triggers & Automation',
     placement: 'right',
     disableBeacon: true,
   },
   {
     target: '[data-tour="preview-agent"]',
-    content: 'You can also build your agent here, just ask it what you need and watch it self configure.',
-    title: 'Build or Test Your Agent',
+    content: 'Test your agent configuration by previewing how it will behave and respond.',
+    title: 'Test Your Agent',
     placement: 'left',
     disableBeacon: true,
   },
 ];
 
+// Form data interface
 interface FormData {
   name: string;
   description: string;
@@ -134,8 +135,6 @@ function AgentConfigurationContent() {
   const [originalData, setOriginalData] = useState<FormData>(formData);
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
 
-
-
   useEffect(() => {
     if (!agent) return;
     let configSource = agent;
@@ -552,38 +551,38 @@ export default function AgentConfigurationPage() {
         disableScrollParentFix
         styles={{
           options: {
-            primaryColor: 'hsl(var(--primary))',
-            backgroundColor: 'hsl(var(--background))',
-            textColor: 'hsl(var(--foreground))',
+            primaryColor: '#000000',
+            backgroundColor: '#ffffff',
+            textColor: '#000000',
             overlayColor: 'rgba(0, 0, 0, 0.7)',
-            arrowColor: 'hsl(var(--background))',
+            arrowColor: '#ffffff',
             zIndex: 1000,
           },
           tooltip: {
-            backgroundColor: 'hsl(var(--background))',
+            backgroundColor: '#ffffff',
             borderRadius: 8,
             fontSize: 14,
             padding: 20,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px hsl(var(--border))',
-            border: '1px solid hsl(var(--border))',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            border: '1px solid #e5e7eb',
           },
           tooltipContainer: {
             textAlign: 'left',
           },
           tooltipTitle: {
-            color: 'hsl(var(--foreground))',
+            color: '#000000',
             fontSize: 16,
             fontWeight: 600,
             marginBottom: 8,
           },
           tooltipContent: {
-            color: 'hsl(var(--foreground))',
+            color: '#000000',
             fontSize: 14,
             lineHeight: 1.5,
           },
           buttonNext: {
-            backgroundColor: 'hsl(var(--primary))',
-            color: 'hsl(var(--primary-foreground))',
+            backgroundColor: '#000000',
+            color: '#ffffff',
             fontSize: 12,
             padding: '8px 16px',
             borderRadius: 6,
@@ -591,32 +590,30 @@ export default function AgentConfigurationPage() {
             fontWeight: 500,
           },
           buttonBack: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
             fontSize: 12,
             padding: '8px 16px',
-            border: '1px solid hsl(var(--border))',
+            border: '1px solid #e5e7eb',
             borderRadius: 6,
           },
           buttonSkip: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
             fontSize: 12,
             border: 'none',
           },
           buttonClose: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
           },
         }}
       />
-      
       <TourConfirmationDialog
         open={showWelcome}
         onAccept={handleWelcomeAccept}
         onDecline={handleWelcomeDecline}
       />
-      
       <AgentConfigurationContent />
     </>
   );
diff --git a/frontend/src/components/dashboard/dashboard-content.tsx b/frontend/src/components/dashboard/dashboard-content.tsx
index ef82b2f6..27fae900 100644
--- a/frontend/src/components/dashboard/dashboard-content.tsx
+++ b/frontend/src/components/dashboard/dashboard-content.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, Suspense, useCallback } from 'react';
+import React, { useState, Suspense, useCallback, useEffect } from 'react';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
@@ -34,6 +34,7 @@ import { toast } from 'sonner';
 import { ReleaseBadge } from '../auth/release-badge';
 import { useDashboardTour } from '@/hooks/use-dashboard-tour';
 import { TourConfirmationDialog } from '@/components/tour/TourConfirmationDialog';
+import { Calendar, MessageSquare, Plus, Sparkles, Zap } from 'lucide-react';
 
 const PENDING_PROMPT_KEY = 'pendingAgentPrompt';
 
@@ -266,38 +267,35 @@ export function DashboardContent() {
         disableScrollParentFix
         styles={{
           options: {
-            primaryColor: 'hsl(var(--primary))',
-            backgroundColor: 'hsl(var(--background))',
-            textColor: 'hsl(var(--foreground))',
+            primaryColor: '#000000',
+            backgroundColor: '#ffffff',
+            textColor: '#000000',
             overlayColor: 'rgba(0, 0, 0, 0.7)',
-            arrowColor: 'hsl(var(--background))',
+            arrowColor: '#ffffff',
             zIndex: 1000,
           },
           tooltip: {
-            backgroundColor: 'hsl(var(--background))',
+            backgroundColor: '#ffffff',
             borderRadius: 8,
             fontSize: 14,
             padding: 20,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px hsl(var(--border))',
-            border: '1px solid hsl(var(--border))',
-          },
-          tooltipContainer: {
-            textAlign: 'left',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            border: '1px solid #e5e7eb',
           },
           tooltipTitle: {
-            color: 'hsl(var(--foreground))',
+            color: '#000000',
             fontSize: 16,
             fontWeight: 600,
             marginBottom: 8,
           },
           tooltipContent: {
-            color: 'hsl(var(--foreground))',
+            color: '#000000',
             fontSize: 14,
             lineHeight: 1.5,
           },
           buttonNext: {
-            backgroundColor: 'hsl(var(--primary))',
-            color: 'hsl(var(--primary-foreground))',
+            backgroundColor: '#000000',
+            color: '#ffffff',
             fontSize: 12,
             padding: '8px 16px',
             borderRadius: 6,
@@ -305,21 +303,21 @@ export function DashboardContent() {
             fontWeight: 500,
           },
           buttonBack: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
             fontSize: 12,
             padding: '8px 16px',
-            border: '1px solid hsl(var(--border))',
+            border: '1px solid #e5e7eb',
             borderRadius: 6,
           },
           buttonSkip: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
             fontSize: 12,
             border: 'none',
           },
           buttonClose: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
           },
         }}