diff --git a/.gitignore b/.gitignore
index b7dc12f..c1ef091 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,4 @@ next-env.d.ts
 package-lock.json
 /*.yaml
 /*.env
+/.env.development
diff --git a/package.json b/package.json
index 41e13f5..619a377 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "class-variance-authority": "^0.7.0",
diff --git a/src/app/(routes)/interview/page.tsx b/src/app/(routes)/interview/page.tsx
index 663e40d..34a303a 100644
--- a/src/app/(routes)/interview/page.tsx
+++ b/src/app/(routes)/interview/page.tsx
@@ -1,640 +1,98 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { Badge } from '@/components/ui/badge'
-import { Separator } from '@/components/ui/separator'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import {
-  Loader2,
-  CheckCircle,
-  AlertCircle,
-  ArrowRight,
-  Upload,
-  Send,
-  Link as LinkIcon,
-  Mic,
-  Video,
-  ArrowLeft
-} from 'lucide-react'
-
-interface WorkExperience {
-  company: string
-  position: string
-  duration: string
-  highlights: string[]
-}
-
-interface Language {
-  name: string
-  proficiency: string
-}
-
-interface DeveloperAnalysis {
-  name: string
-  technicalSkills: string[]
-  mainTechnologies: string[]
-  workExperiences: WorkExperience[]
-  languages: Language[]
-  education: string
-  certifications: string[]
-  softSkills: string[]
-}
-
-interface JobOffer {
-  title: string
-  profile: string
-  seniority: string
-  description: string
-  companyName: string
-  country: string
-}
-
-interface Message {
-  role: 'user' | 'ai'
-  content: string
-}
-
-const mockDeveloperAIAnalysis = (): DeveloperAnalysis => {
-  return {
-    name: 'Alex Johnson',
-    technicalSkills: ['JavaScript', 'React', 'Node.js', 'Python', 'SQL', 'Git'],
-    mainTechnologies: ['React', 'Node.js', 'Express', 'MongoDB'],
-    workExperiences: [
-      {
-        company: 'Tech Innovators Inc.',
-        position: 'Senior Frontend Developer',
-        duration: '2019 - Present',
-        highlights: [
-          "Led a team of 5 developers in redesigning the company's main product UI",
-          'Implemented CI/CD pipeline, reducing deployment time by 40%',
-          'Mentored junior developers and conducted code reviews'
-        ]
-      },
-      {
-        company: 'DataSoft Solutions',
-        position: 'Full Stack Developer',
-        duration: '2016 - 2019',
-        highlights: [
-          'Developed and maintained multiple client-facing web applications',
-          'Optimized database queries, improving application performance by 30%',
-          'Collaborated with UX team to implement responsive designs'
-        ]
-      }
-    ],
-    languages: [
-      { name: 'English', proficiency: 'Native' },
-      { name: 'Spanish', proficiency: 'Intermediate' }
-    ],
-    education: 'B.S. in Computer Science, Tech University (2016)',
-    certifications: ['AWS Certified Developer', 'MongoDB Certified Developer'],
-    softSkills: ['Team leadership', 'Problem-solving', 'Communication', 'Agile methodologies']
-  }
-}
-
-const mockGetAIResponse = async (message: string): Promise<string> => {
-  await new Promise(resolve => setTimeout(resolve, 1000))
-  return `This is a mock AI response to: "${message}". In a real implementation, this would be an actual response from an AI model based on the CV analysis and job offer details.`
-}
-
-export default function AIInterviewProcess() {
-  const [file, setFile] = useState<File | null>(null)
-  const [analysis, setAnalysis] = useState<DeveloperAnalysis | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [step, setStep] = useState(1)
-  const [jobOffer, setJobOffer] = useState<JobOffer>({
-    title: '',
-    profile: '',
-    seniority: '',
-    description: '',
-    companyName: '',
-    country: ''
-  })
-  const [jobOfferLink, setJobOfferLink] = useState('')
-  const [messages, setMessages] = useState<Message[]>([])
-  const [input, setInput] = useState('')
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const [isListening, setIsListening] = useState(false)
-  const [transcript, setTranscript] = useState('')
-  const [animationKey, setAnimationKey] = useState(0)
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }
-
-  useEffect(scrollToBottom, [messages])
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files && event.target.files[0]) {
-      setFile(event.target.files[0])
-      setAnalysis(null)
-      setError(null)
-    }
-  }
-
-  const handleAnalyze = async () => {
-    if (!file) {
-      setError('Please upload a CV file first.')
-      return
-    }
-
-    setIsLoading(true)
-    setError(null)
-
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+//import { loadStripe } from '@stripe/stripe-js'
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Check } from "lucide-react"
+
+const plans = [
+  {
+    name: "Básico",
+    price: "9.99",
+    description: "Perfecto para empezar",
+    features: ["Acceso básico", "Soporte por email", "1 usuario"],
+    badge: "Popular",
+    priceId: "price_1234567890" // Reemplaza con tu Stripe Price ID real
+  },
+  {
+    name: "Pro",
+    price: "19.99",
+    description: "Ideal para equipos pequeños",
+    features: ["Acceso completo", "Soporte prioritario", "5 usuarios"],
+    priceId: "price_0987654321" // Reemplaza con tu Stripe Price ID real
+  },
+  {
+    name: "Empresa",
+    price: "49.99",
+    description: "Para grandes organizaciones",
+    features: ["Acceso completo", "Soporte 24/7", "Usuarios ilimitados"],
+    priceId: "price_1122334455" // Reemplaza con tu Stripe Price ID real
+  }
+]
+
+export default function PricingPage() {
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubscription = async (priceId: string) => {
+    setLoading(true)
     try {
-      const result = mockDeveloperAIAnalysis()
-      setAnalysis(result)
-      setStep(2)
-      setAnimationKey(prev => prev + 1)
-    } catch (err) {
-      setError('An error occurred during analysis. Please try again.')
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const handleContinue = () => {
-    setStep(step + 1)
-    setAnimationKey(prev => prev + 1)
-  }
-
-  const handleJobOfferChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target
-    setJobOffer(prev => ({ ...prev, [name]: value }))
-  }
-
-  const handleSeniorityChange = (value: string) => {
-    setJobOffer(prev => ({ ...prev, seniority: value }))
-  }
+      const response = await fetch('/api/create-checkout-session', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ priceId }),
+      })
+      const { sessionId } = await response.json()
 
-  const handleJobOfferSubmit = () => {
-    if (
-      jobOffer.title &&
-      jobOffer.profile &&
-      jobOffer.seniority &&
-      jobOffer.description &&
-      jobOffer.companyName &&
-      jobOffer.country
-    ) {
-      console.log('Job offer submitted:', jobOffer)
-      setStep(4)
-      setAnimationKey(prev => prev + 1)
-      initializeChat()
-    } else {
-      setError('Please fill in all fields for the job offer.')
-    }
-  }
-
-  const handleJobOfferLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setJobOfferLink(e.target.value)
-  }
-
-  const handleJobOfferLinkSubmit = async () => {
-    if (!jobOfferLink) {
-      setError('Please enter a job offer link.')
-      return
-    }
-
-    setIsLoading(true)
-    setError(null)
-
-    try {
-      // Simulating fetching job offer from link
-      const result: JobOffer = {
-        title: 'Senior Frontend Developer',
-        profile: 'Experienced React developer',
-        seniority: 'senior',
-        description: 'We are looking for a senior frontend developer with strong React skills...',
-        companyName: 'Tech Innovators Inc.',
-        country: 'United States'
-      }
-      setJobOffer(result)
-      setStep(4)
-      setAnimationKey(prev => prev + 1)
-      initializeChat()
-    } catch (err) {
-      setError('An error occurred while fetching the job offer. Please try again.')
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const initializeChat = () => {
-    setMessages([
-      {
-        role: 'ai',
-        content: `Hello! I'm your AI interviewer. Based on your CV and the job offer for ${jobOffer.title} at ${jobOffer.companyName}, let's start the interview. What made you interested in this position?`
-      }
-    ])
-  }
-
-  const handleSend = async () => {
-    if (input.trim() === '') return
-
-    const userMessage: Message = { role: 'user', content: input }
-    setMessages(prev => [...prev, userMessage])
-    setInput('')
-    setIsLoading(true)
-
-    try {
-      const aiResponse = await mockGetAIResponse(input)
-      const aiMessage: Message = { role: 'ai', content: aiResponse }
-      setMessages(prev => [...prev, aiMessage])
     } catch (error) {
-      console.error('Error getting AI response:', error)
-      const errorMessage: Message = {
-        role: 'ai',
-        content: "I'm sorry, I encountered an error. Can you please try again?"
-      }
-      setMessages(prev => [...prev, errorMessage])
+      console.error('Error:', error)
     } finally {
-      setIsLoading(false)
+      setLoading(false)
     }
   }
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSend()
-    }
-  }
-
-  const toggleListening = () => {
-    if (!isListening) {
-      setStep(5)
-      setAnimationKey(prev => prev + 1)
-      setIsListening(true)
-      // Simulating speech recognition
-      setTimeout(() => {
-        setTranscript(
-          'This is a simulated voice transcript. In a real implementation, this would be the result of speech recognition.'
-        )
-        setIsListening(false)
-      }, 5000)
-    } else {
-      setIsListening(false)
-    }
-  }
-
-  const handleVideoCall = () => {
-    setStep(6)
-    setAnimationKey(prev => prev + 1)
-  }
-
-  const handleBackToChat = () => {
-    setStep(4)
-    setAnimationKey(prev => prev + 1)
-    setTranscript('')
-  }
-
   return (
-    <div className='container mx-auto px-4 py-8'>
-      <style jsx global>{`
-        @keyframes fadeIn {
-          from {
-            opacity: 0;
-            transform: translateY(10px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-        .animate-fadeIn {
-          animation: fadeIn 0.5s ease-out;
-        }
-      `}</style>
-      <Card className='w-full max-w-4xl mx-auto'>
-        <CardHeader>
-          <CardTitle className='text-2xl md:text-3xl font-bold text-center'>AI Interview Process</CardTitle>
-        </CardHeader>
-        <CardContent className='space-y-6'>
-          <div key={animationKey} className='animate-fadeIn'>
-            {step === 1 && (
-              <div className='space-y-4'>
-                <h2 className='text-xl font-semibold'>Upload Your CV</h2>
-                <div className='flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2'>
-                  <Input type='file' accept='.pdf,.doc,.docx' onChange={handleFileChange} className='flex-grow' />
-                  <Button onClick={handleAnalyze} disabled={isLoading} className='w-full md:w-auto'>
-                    {isLoading ? (
-                      <>
-                        <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                        Analyzing...
-                      </>
-                    ) : (
-                      'Analyze CV'
-                    )}
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {error && (
-              <Alert variant='destructive'>
-                <AlertCircle className='h-4 w-4' />
-                <AlertTitle>Error</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            )}
-
-            {step === 2 && analysis && (
-              <div className='space-y-6'>
-                <Alert>
-                  <CheckCircle className='h-4 w-4' />
-                  <AlertTitle>Analysis Complete</AlertTitle>
-                  <AlertDescription>Here's the detailed analysis of your CV:</AlertDescription>
-                </Alert>
-
-                <div>
-                  <h3 className='text-xl font-semibold'>{analysis.name}</h3>
-                  <p className='text-muted-foreground'>{analysis.education}</p>
-                </div>
-
-                <div>
-                  <h4 className='text-lg font-semibold mb-2'>Technical Skills</h4>
-                  <div className='flex flex-wrap gap-2'>
-                    {analysis.technicalSkills.map((skill, index) => (
-                      <Badge key={index} variant='secondary'>
-                        {skill}
-                      </Badge>
-                    ))}
-                  </div>
-                </div>
-
-                <div>
-                  <h4 className='text-lg font-semibold mb-2'>Main Technologies</h4>
-                  <div className='flex flex-wrap gap-2'>
-                    {analysis.mainTechnologies.map((tech, index) => (
-                      <Badge key={index} variant='default'>
-                        {tech}
-                      </Badge>
-                    ))}
-                  </div>
-                </div>
-
-                <div>
-                  <h4 className='text-lg font-semibold mb-2'>Work Experience</h4>
-                  {analysis.workExperiences.map((exp, index) => (
-                    <div key={index} className='mb-4'>
-                      <h5 className='font-semibold'>{exp.position}</h5>
-                      <p className='text-sm text-muted-foreground'>
-                        {exp.company} | {exp.duration}
-                      </p>
-                      <ul className='list-disc list-inside mt-2'>
-                        {exp.highlights.map((highlight, hIndex) => (
-                          <li key={hIndex} className='text-sm'>
-                            {highlight}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  ))}
-                </div>
-
-                <div>
-                  <h4 className='text-lg font-semibold mb-2'>Languages</h4>
-                  {analysis.languages.map((lang, index) => (
-                    <p key={index}>
-                      {lang.name}: {lang.proficiency}
-                    </p>
-                  ))}
-                </div>
-
-                <Separator />
-
-                <div>
-                  <h4 className='text-lg font-semibold mb-2'>Additional Information</h4>
-                  <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-                    <div>
-                      <h5 className='font-semibold'>Certifications</h5>
-                      <ul className='list-disc list-inside'>
-                        {analysis.certifications.map((cert, index) => (
-                          <li key={index} className='text-sm'>
-                            {cert}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                    <div>
-                      <h5 className='font-semibold'>Soft Skills</h5>
-                      <ul className='list-disc list-inside'>
-                        {analysis.softSkills.map((skill, index) => (
-                          <li key={index} className='text-sm'>
-                            {skill}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {step === 3 && (
-              <Tabs defaultValue='manual' className='w-full'>
-                <TabsList className='grid w-full grid-cols-2'>
-                  <TabsTrigger value='manual'>Manual Entry</TabsTrigger>
-                  <TabsTrigger value='link'>Job Offer Link</TabsTrigger>
-                </TabsList>
-                <TabsContent value='manual' className='space-y-4'>
-                  <h3 className='text-xl font-semibold'>Enter Job Offer Details</h3>
-                  <div className='space-y-2'>
-                    <Input
-                      type='text'
-                      name='title'
-                      placeholder='Job Title'
-                      value={jobOffer.title}
-                      onChange={handleJobOfferChange}
-                    />
-                  </div>
-                  <div className='space-y-2'>
-                    <Input
-                      type='text'
-                      name='profile'
-                      placeholder='Profile'
-                      value={jobOffer.profile}
-                      onChange={handleJobOfferChange}
-                    />
-                  </div>
-                  <div className='space-y-2'>
-                    <Select onValueChange={handleSeniorityChange}>
-                      <SelectTrigger>
-                        <SelectValue placeholder='Select Seniority' />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value='junior'>Junior</SelectItem>
-                        <SelectItem value='mid-level'>Mid-Level</SelectItem>
-                        <SelectItem value='senior'>Senior</SelectItem>
-                        <SelectItem value='lead'>Lead</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className='space-y-2'>
-                    <Textarea
-                      name='description'
-                      placeholder='Job Description'
-                      value={jobOffer.description}
-                      onChange={handleJobOfferChange}
-                      rows={5}
-                    />
-                  </div>
-                  <div className='space-y-2'>
-                    <Input
-                      type='text'
-                      name='companyName'
-                      placeholder='Company Name'
-                      value={jobOffer.companyName}
-                      onChange={handleJobOfferChange}
-                    />
-                  </div>
-                  <div className='space-y-2'>
-                    <Input
-                      type='text'
-                      name='country'
-                      placeholder='Country'
-                      value={jobOffer.country}
-                      onChange={handleJobOfferChange}
-                    />
-                  </div>
-                  <Button onClick={handleJobOfferSubmit} className='w-full'>
-                    Submit Job Offer <Upload className='ml-2 h-4 w-4' />
-                  </Button>
-                </TabsContent>
-                <TabsContent value='link' className='space-y-4'>
-                  <h3 className='text-xl font-semibold'>Enter Job Offer Link</h3>
-                  <div className='flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2'>
-                    <Input
-                      type='url'
-                      placeholder='https://example.com/job-offer'
-                      value={jobOfferLink}
-                      onChange={handleJobOfferLinkChange}
-                      className='flex-grow'
-                    />
-                    <Button onClick={handleJobOfferLinkSubmit} disabled={isLoading} className='w-full md:w-auto'>
-                      {isLoading ? (
-                        <>
-                          <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                          Loading...
-                        </>
-                      ) : (
-                        <>
-                          Load Offer <LinkIcon className='ml-2 h-4 w-4' />
-                        </>
-                      )}
-                    </Button>
-                  </div>
-                </TabsContent>
-              </Tabs>
-            )}
-
-            {step === 4 && (
-              <div className='h-[400px] md:h-[500px] flex flex-col'>
-                <ScrollArea className='flex-grow pr-4 mb-4'>
-                  {messages.map((message, index) => (
-                    <div
-                      key={index}
-                      className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'} mb-4`}
-                    >
-                      <div className={`flex items-start ${message.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
-                        <Avatar className='w-8 h-8'>
-                          <AvatarFallback>{message.role === 'user' ? 'U' : 'AI'}</AvatarFallback>
-                          {message.role === 'ai' && <AvatarImage src='/placeholder.svg' alt='AI' />}
-                        </Avatar>
-                        <div
-                          className={`mx-2 p-3 rounded-lg ${
-                            message.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'
-                          }`}
-                        >
-                          {message.content}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                  <div ref={messagesEndRef} />
-                </ScrollArea>
-                <div className='flex items-center space-x-2'>
-                  <Input
-                    type='text'
-                    placeholder='Type your message...'
-                    value={input}
-                    onChange={e => setInput(e.target.value)}
-                    onKeyPress={handleKeyPress}
-                    disabled={isLoading}
-                    className='flex-grow'
-                  />
-                  <Button onClick={handleSend} disabled={isLoading}>
-                    {isLoading ? <Loader2 className='h-4 w-4 animate-spin' /> : <Send className='h-4 w-4' />}
-                  </Button>
-                  <Button onClick={toggleListening} variant='outline'>
-                    <Mic className='h-4 w-4' />
-                  </Button>
-                  <Button onClick={handleVideoCall} variant='outline'>
-                    <Video className='h-4 w-4' />
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {step === 5 && (
-              <div className='h-[400px] md:h-[500px] flex flex-col items-center justify-center space-y-4'>
-                <div className='text-center'>
-                  <h3 className='text-xl font-semibold mb-2'>Voice Detection</h3>
-                  {isListening ? (
-                    <div className='animate-pulse'>
-                      <Mic className='h-16 w-16 text-primary' />
-                      <p>Listening...</p>
-                    </div>
-                  ) : (
-                    <div>
-                      <CheckCircle className='h-16 w-16 text-green-500 mx-auto' />
-                      <p>Voice detected!</p>
-                    </div>
-                  )}
-                </div>
-                {transcript && (
-                  <div className='w-full max-w-md'>
-                    <h4 className='font-semibold mb-2'>Transcript:</h4>
-                    <p className='bg-muted p-3 rounded-lg'>{transcript}</p>
-                  </div>
-                )}
-                <Button onClick={handleBackToChat}>
-                  <ArrowLeft className='mr-2 h-4 w-4' /> Back to Chat
-                </Button>
-              </div>
-            )}
-
-            {step === 6 && (
-              <div className='h-[400px] md:h-[500px] flex flex-col items-center justify-center space-y-4'>
-                <div className='text-center'>
-                  <h3 className='text-xl font-semibold mb-2'>Video Call</h3>
-                  <div className='bg-gray-200 w-full max-w-md h-64 rounded-lg flex items-center justify-center'>
-                    <Video className='h-16 w-16 text-gray-400' />
-                  </div>
-                  <p className='mt-2'>Video call interface would be implemented here.</p>
-                </div>
-                <Button onClick={handleBackToChat}>
-                  <ArrowLeft className='mr-2 h-4 w-4' /> Back to Chat
-                </Button>
+    <div className="container mx-auto py-10">
+      <h1 className="text-3xl font-bold text-center mb-4">Planes de Suscripción</h1>
+      <p className="text-center text-muted-foreground mb-10">Elige el plan que mejor se adapte a tus necesidades</p>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {plans.map((plan) => (
+          <Card key={plan.name} className="flex flex-col">
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>{plan.name}</CardTitle>
+                {plan.badge && <Badge variant="secondary">{plan.badge}</Badge>}
               </div>
-            )}
-          </div>
-        </CardContent>
-        <CardFooter className='flex justify-end'>
-          {(step === 2 || step === 3) && (
-            <Button onClick={handleContinue} className='mt-4'>
-              Continue <ArrowRight className='ml-2 h-4 w-4' />
-            </Button>
-          )}
-        </CardFooter>
-      </Card>
+              <CardDescription>{plan.description}</CardDescription>
+            </CardHeader>
+            <CardContent className="flex-grow">
+              <p className="text-3xl font-bold mb-4">${plan.price}<span className="text-sm font-normal">/mes</span></p>
+              <ul className="space-y-2">
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex items-center">
+                    <Check className="mr-2 h-4 w-4 text-primary" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+            <CardFooter>
+              <Button 
+                className="w-full" 
+                onClick={() => handleSubscription(plan.priceId)} 
+                disabled={loading}
+              >
+                {loading ? 'Procesando...' : 'Suscribirse'}
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/src/app/(routes)/suscriptions/page.tsx b/src/app/(routes)/suscriptions/page.tsx
new file mode 100644
index 0000000..4709afb
--- /dev/null
+++ b/src/app/(routes)/suscriptions/page.tsx
@@ -0,0 +1,170 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Switch } from "@/components/ui/switch"
+
+interface PricingPlan {
+    name: string;
+    features: string[];
+    recommended?: boolean;
+    variants: {
+      monthly: {
+        price: number;
+        variantId: string;
+      };
+      annual: {
+        price: number;
+        variantId: string;
+      };
+    };
+  }
+
+const pricingPlans: PricingPlan[] = [
+    {
+        name: "Básico",
+        features: [
+          "5 entrevistas AI al mes",
+          "Acceso a avatares básicos",
+          "Soporte por email"
+        ],
+        variants: {
+          monthly: {
+            price: 9.99,
+            variantId: "87bc566a-5bdb-491b-9656-ce0e298a9fe6"
+          },
+          annual: {
+            price: 99.99,
+            variantId: "c5d82d42-bf16-45c4-bf8c-b6bfd855cc11"
+          }
+        }
+      },
+  {
+    name: "Pro",
+    features: [
+      "20 entrevistas AI al mes",
+      "Acceso a todos los avatares",
+      "Análisis de rendimiento básico",
+      "Soporte prioritario"
+    ],
+    recommended: true,
+    variants: {
+      monthly: {
+        price: 19.99,
+        variantId: "YOUR_PRO_MONTHLY_VARIANT_ID"
+      },
+      annual: {
+        price: 199.99,
+        variantId: "YOUR_PRO_ANNUAL_VARIANT_ID"
+      }
+    }
+  },
+  {
+    name: "Empresarial",
+    features: [
+      "Entrevistas AI ilimitadas",
+      "Avatares personalizados",
+      "Análisis de rendimiento avanzado",
+      "Soporte 24/7",
+      "API access"
+    ],
+    variants: {
+      monthly: {
+        price: 49.99,
+        variantId: "YOUR_ENTERPRISE_MONTHLY_VARIANT_ID"
+      },
+      annual: {
+        price: 499.99,
+        variantId: "YOUR_ENTERPRISE_ANNUAL_VARIANT_ID"
+      }
+    }
+  }
+]
+
+enum SubscriptionFrequency {
+  month = 'monthly',
+  year = 'annual'
+}
+
+declare global {
+    interface Window {
+      createLemonSqueezy: () => {
+        Setup: (config: any) => any;
+        Url: {
+          Close: () => void;
+        };
+      };
+    }
+  }
+  
+  export default function PricingPage() {
+    const [isAnnual, setIsAnnual] = useState(false);
+    const [isLemonSqueezyLoaded, setIsLemonSqueezyLoaded] = useState(false);
+  
+    useEffect(() => {
+      const script = document.createElement('script');
+      script.src = 'https://assets.lemonsqueezy.com/lemon.js';
+      script.async = true;
+      script.onload = () => {
+        setIsLemonSqueezyLoaded(true);
+        if (typeof window.createLemonSqueezy !== 'undefined') {
+          window.createLemonSqueezy();
+        }
+      };
+      document.body.appendChild(script);
+  
+      return () => {
+        document.body.removeChild(script);
+      };
+    }, []);
+  
+    const handleSubscribe = (plan: PricingPlan, isAnnual: boolean) => {
+      const variantId = isAnnual
+        ? plan.variants.annual.variantId
+        : plan.variants.monthly.variantId;
+
+      // Redirigir al usuario a la página de checkout de Lemon Squeezy
+      window.location.href = `https://kahop.lemonsqueezy.com/buy/${variantId}`;
+    };
+
+    return (
+      <div className="container mx-auto py-12">
+        <h1 className="text-3xl font-bold text-center mb-10">Planes de Suscripción</h1>
+        <div className="flex justify-center items-center mb-8">
+          <span className="mr-2">Mensual</span>
+          <Switch checked={isAnnual} onCheckedChange={setIsAnnual} />
+          <span className="ml-2">Anual</span>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {pricingPlans.map((plan, index) => (
+            <Card key={index} className={`flex flex-col ${plan.recommended ? 'border-primary' : ''}`}>
+              <CardHeader>
+                <CardTitle>{plan.name}</CardTitle>
+                <CardDescription>
+                  ${isAnnual ? plan.variants.annual.price : plan.variants.monthly.price}/
+                  {isAnnual ? 'año' : 'mes'}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="flex-grow">
+                <ul className="list-disc list-inside space-y-2">
+                  {plan.features.map((feature, idx) => (
+                    <li key={idx}>{feature}</li>
+                  ))}
+                </ul>
+              </CardContent>
+              <CardFooter>
+                <Button 
+                  className="w-full" 
+                  onClick={() => handleSubscribe(plan, isAnnual)}
+                  disabled={!isLemonSqueezyLoaded}
+                >
+                  {isLemonSqueezyLoaded ? 'Seleccionar Plan' : 'Cargando...'}
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
+  }
\ No newline at end of file
diff --git a/src/app/api/webhooks/lemonsqueezy/route.ts b/src/app/api/webhooks/lemonsqueezy/route.ts
new file mode 100644
index 0000000..72c7fe0
--- /dev/null
+++ b/src/app/api/webhooks/lemonsqueezy/route.ts
@@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from 'next/server';
+import crypto from 'crypto';
+
+import { createUserRepositoryAdapter } from '@/modules/interview_manager/infrastructure/adapter/userManagerRepositoryAdapter';
+import { createUserService } from '@/modules/interview_manager/application/service/userManagerService';
+
+function verifyWebhookSignature(payload: string, signature: string, secret: string): boolean {
+  const hmac = crypto.createHmac('sha256', secret);
+  const digest = hmac.update(payload).digest('hex');
+  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(digest));
+}
+
+export async function POST(req: NextRequest) {
+  const body = await req.text();
+  const signature = req.headers.get('X-Signature');
+
+//   if (!signature || !verifyWebhookSignature(body, signature, process.env.WEBHOOK_SECRET!)) {
+//     return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
+//   }
+
+  const event = JSON.parse(body);
+
+  switch (event.meta.event_name) {
+    case 'subscription_created':
+      await handleSubscriptionCreated(event.data.attributes.user_email, event.data.attributes.product_name);
+      break;
+    case 'subscription_updated':
+      await handleSubscriptionEvent(event.data);
+      break;
+    case 'subscription_cancelled':
+      await handleSubscriptionCancelled(event.data);
+      break;
+    // Manejar otros eventos según sea necesario
+  }
+
+  return NextResponse.json({ success: true });
+}
+
+async function handleSubscriptionEvent(subscriptionData: any) {
+  console.log(subscriptionData);
+  const { user_email, product_name, status } = subscriptionData.attributes;
+  let newRole = 'user'; // Default role
+
+  // Assign role based on subscription plan
+  switch (product_name.toLowerCase()) {
+    case 'básico':
+      newRole = 'basic_subscriber';
+      break;
+    case 'pro':
+      newRole = 'pro_subscriber';
+      break;
+    case 'empresarial':
+      newRole = 'enterprise_subscriber';
+      break;
+  }
+
+  // Only update if the subscription is active
+  if (status === 'active') {
+    try {
+      const updatedUser = await userService.updateUserRole(user_email, newRole);
+      console.log('User role updated:', updatedUser);
+    } catch (error) {
+      console.error('Failed to update user role:', error);
+    }
+  }
+}
+
+async function handleSubscriptionCancelled(subscriptionData: any) {
+  const { user_email } = subscriptionData.attributes;
+  try {
+    const updatedUser = await userService.updateUserRole(user_email, 'user'); // Revert to basic role
+    console.log('User role reverted to basic:', updatedUser);
+  } catch (error) {
+    console.error('Failed to revert user role:', error);
+  }
+}
+
+const userRepositoryAdapter = createUserRepositoryAdapter();
+const userService = createUserService(userRepositoryAdapter);
+
+// En tu componente o donde manejes la lógica de suscripción
+async function handleSubscriptionCreated(email: string, plan: string) {
+  let newRole;
+  switch (plan.toLowerCase()) {
+    case 'básico':
+      newRole = 'basic_subscriber';
+      break;
+    case 'pro':
+      newRole = 'pro_subscriber';
+      break;
+    case 'empresarial':
+      newRole = 'enterprise_subscriber';
+      break;
+    default:
+      newRole = 'user';
+  }
+
+  try {
+    const updatedUser = await userService.updateUserRole(email, newRole);
+    console.log('User role updated:', updatedUser);
+  } catch (error) {
+    console.error('Failed to update user role:', error);
+  }
+}
\ No newline at end of file
diff --git a/src/components/custom/interview/video-call/dialog.tsx b/src/components/custom/interview/video-call/dialog.tsx
new file mode 100644
index 0000000..e98ce9b
--- /dev/null
+++ b/src/components/custom/interview/video-call/dialog.tsx
@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
+
+interface DeviceInfo {
+  deviceId: string;
+  label: string;
+}
+
+interface OptionsDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedAvatar: any;
+  onStartInterview: (cameraId: string, microphoneId: string) => void;
+  isChecked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+export const OptionsDialog: React.FC<OptionsDialogProps> = ({
+  isOpen,
+  onOpenChange,
+  selectedAvatar,
+  onStartInterview,
+  isChecked,
+  onCheckedChange
+}) => {
+  const [cameraDevices, setCameraDevices] = useState<DeviceInfo[]>([]);
+  const [microphoneDevices, setMicrophoneDevices] = useState<DeviceInfo[]>([]);
+  const [selectedCamera, setSelectedCamera] = useState<string>('');
+  const [selectedMicrophone, setSelectedMicrophone] = useState<string>('');
+  const [isCameraReady, setIsCameraReady] = useState(false);
+  const [cameraError, setCameraError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      requestPermissions();
+    }
+  }, [isOpen]);
+
+  const requestPermissions = async () => {
+    try {
+      await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+      await getDevices();
+    } catch (err) {
+      console.error('Error requesting permissions:', err);
+      setCameraError('Failed to get camera and microphone permissions. Please allow access and try again.');
+    }
+  };
+
+  const getDevices = async () => {
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const cameras = devices.filter(device => device.kind === 'videoinput');
+      const microphones = devices.filter(device => device.kind === 'audioinput');
+      setCameraDevices(cameras.map(camera => ({ deviceId: camera.deviceId, label: camera.label })));
+      setMicrophoneDevices(microphones.map(mic => ({ deviceId: mic.deviceId, label: mic.label })));
+      if (cameras.length > 0) setSelectedCamera(cameras[0].deviceId);
+      if (microphones.length > 0) setSelectedMicrophone(microphones[0].deviceId);
+    } catch (err) {
+      console.error('Error getting devices:', err);
+      setCameraError('Failed to get camera and microphone devices. Please check your permissions.');
+    }
+  };
+
+  const initializeCamera = async () => {
+    if (!selectedCamera) {
+      console.error('No camera selected');
+      setCameraError('No camera selected. Please choose a camera from the list.');
+      return;
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { deviceId: { exact: selectedCamera } },
+        audio: false
+      });
+
+      // We're just testing if we can get the stream, then stopping it immediately
+      stream.getTracks().forEach(track => track.stop());
+      setIsCameraReady(true);
+      setCameraError(null);
+    } catch (err) {
+      console.error('Error initializing camera:', err);
+      let errorMessage = 'Failed to initialize camera. ';
+      if (err instanceof DOMException) {
+        switch (err.name) {
+          case 'NotFoundError':
+            errorMessage += 'Camera not found. Please ensure your camera is connected and not in use by another application.';
+            break;
+          case 'NotAllowedError':
+            errorMessage += 'Camera access denied. Please grant permission to use the camera.';
+            break;
+          case 'NotReadableError':
+            errorMessage += 'Could not start video source. Please try closing other applications that might be using the camera.';
+            break;
+          default:
+            errorMessage += 'Please check your camera permissions and try again.';
+        }
+      }
+      setCameraError(errorMessage);
+      setIsCameraReady(false);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedCamera) {
+      initializeCamera();
+    }
+  }, [selectedCamera]);
+
+  const handleStartInterview = () => {
+    onStartInterview(selectedCamera, selectedMicrophone);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Start Interview with {selectedAvatar?.avatar_name}?</DialogTitle>
+        </DialogHeader>
+        <p>Are you ready to begin your AI-powered interview experience?</p>
+        {selectedAvatar && (
+          <video
+            src={selectedAvatar.preview_video_url}
+            className="w-full rounded-lg my-4"
+            controls
+            autoPlay
+            loop
+            muted
+          >
+            Your browser does not support the video tag.
+          </video>
+        )}
+        <div className="space-y-4">
+          {cameraDevices.length > 0 && (
+            <div>
+              <label htmlFor="camera-select" className="block text-sm font-medium text-gray-700">Camera</label>
+              <Select onValueChange={setSelectedCamera} value={selectedCamera}>
+                <SelectTrigger id="camera-select">
+                  <SelectValue placeholder="Select a camera" />
+                </SelectTrigger>
+                <SelectContent>
+                  {cameraDevices.map((device) => (
+                    <SelectItem key={device.deviceId} value={device.deviceId}>
+                      {device.label || `Camera ${device.deviceId.substr(0, 5)}`}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          {microphoneDevices.length > 0 && (
+            <div>
+              <label htmlFor="microphone-select" className="block text-sm font-medium text-gray-700">Microphone</label>
+              <Select onValueChange={setSelectedMicrophone} value={selectedMicrophone}>
+                <SelectTrigger id="microphone-select">
+                  <SelectValue placeholder="Select a microphone" />
+                </SelectTrigger>
+                <SelectContent>
+                  {microphoneDevices.map((device) => (
+                    <SelectItem key={device.deviceId} value={device.deviceId}>
+                      {device.label || `Microphone ${device.deviceId.substr(0, 5)}`}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          <Button
+            onClick={handleStartInterview}
+            className="w-full bg-black text-white hover:bg-gray-800"
+            disabled={!isCameraReady || !!cameraError}
+          >
+            {isCameraReady ? 'Begin Interview' : 'Initializing Camera...'}
+          </Button>
+          {cameraError && (
+            <p className="text-red-500 text-sm">{cameraError}</p>
+          )}
+          <div className="bg-black p-4 rounded-md w-full">
+            <label className="flex items-center space-x-3 cursor-pointer">
+              <Checkbox
+                id="expression-permission"
+                checked={isChecked}
+                onCheckedChange={onCheckedChange}
+                className="form-checkbox h-5 w-5 text-blue-600 transition duration-150 ease-in-out"
+              />
+                <span className="text-gray-300 text-sm font-medium">
+                  Permitir leer mis expresiones
+                </span>
+            </label>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+);
+};
\ No newline at end of file
diff --git a/src/components/custom/interview/video-call/interviewerListProps .tsx b/src/components/custom/interview/video-call/interviewerListProps .tsx
new file mode 100644
index 0000000..bc56576
--- /dev/null
+++ b/src/components/custom/interview/video-call/interviewerListProps .tsx	
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Card, CardContent } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface Avatar {
+  avatar_id: string;
+  avatar_name: string;
+  gender: string;
+  preview_image_url: string;
+  preview_video_url: string;
+}
+
+interface InterviewerListProps {
+  avatars: Avatar[];
+  onSelectAvatar: (avatar: Avatar) => void;
+}
+
+export const InterviewerList: React.FC<InterviewerListProps> = ({ avatars, onSelectAvatar }) => {
+  return (
+    <Card className="flex-grow overflow-hidden">
+      <CardContent className="p-6 h-full">
+        <ScrollArea className="h-full">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {avatars.map((avatar) => (
+              <Card key={avatar.avatar_id} className="flex flex-col">
+                <CardContent className="p-4 flex-grow flex flex-col justify-between">
+                  <div>
+                    <Avatar className="w-32 h-32 mx-auto mb-4">
+                      <AvatarImage src={avatar.preview_image_url} alt={avatar.avatar_name} />
+                      <AvatarFallback>{avatar.avatar_name[0]}</AvatarFallback>
+                    </Avatar>
+                    <h2 className="text-xl font-semibold text-center mb-4">{avatar.avatar_name}</h2>
+                  </div>
+                  <Button 
+                    className="w-full"
+                    onClick={() => onSelectAvatar(avatar)}
+                  >
+                    Select
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/src/components/custom/interview/video-call/videoCall.tsx b/src/components/custom/interview/video-call/videoCall.tsx
new file mode 100644
index 0000000..2012f80
--- /dev/null
+++ b/src/components/custom/interview/video-call/videoCall.tsx
@@ -0,0 +1,193 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { RefreshCcw, SquareIcon } from 'lucide-react'
+import { Configuration, NewSessionData, StreamingAvatarApi } from '@heygen/streaming-avatar'
+import * as faceapi from 'face-api.js'
+import { createFaceRepositoryAdapter } from '@/modules/face_proccesor/infrastructure/adapter/faceRepositoryAdapter'
+import { createFaceService } from '@/modules/face_proccesor/application/service/faceService'
+
+interface VideoCallProps {
+  selectedAvatar: any;
+  streamingToken: string;
+  cameraId: string;
+  microphoneId: string;
+  onEndInterview: () => void;
+  isAllowSave: boolean;
+}
+
+type FaceDataState = {
+  expressions: faceapi.FaceExpressions;
+}
+
+const faceRepository = createFaceRepositoryAdapter()
+const faceService = createFaceService(faceRepository)
+
+export const VideoCall: React.FC<VideoCallProps> = ({
+  selectedAvatar,
+  streamingToken,
+  cameraId,
+  microphoneId,
+  onEndInterview,
+  isAllowSave
+}) => {
+  const userVideoRef = useRef<HTMLVideoElement>(null);
+  const avatarVideoRef = useRef<HTMLVideoElement>(null);
+  const [userStream, setUserStream] = useState<MediaStream | null>(null);
+  const [avatarStream, setAvatarStream] = useState<MediaStream | null>(null);
+  const [cameraError, setCameraError] = useState<string | null>(null);
+  const [sessionData, setSessionData] = useState<NewSessionData | null>(null);
+  const [faceData, setFaceData] = useState<FaceDataState[]>([]);
+  const avatarApiRef = useRef<StreamingAvatarApi | null>(null);
+
+  useEffect(() => {
+    initializeStreams();
+    return () => {
+      stopStreams();
+    };
+  }, []);
+
+  const initializeStreams = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { deviceId: { exact: cameraId } },
+        audio: { deviceId: { exact: microphoneId } }
+      });
+      setUserStream(stream);
+
+      avatarApiRef.current = new StreamingAvatarApi(
+        new Configuration({
+          accessToken: streamingToken,
+        })
+      );
+
+      const res = await avatarApiRef.current.createStartAvatar({
+        newSessionRequest: {
+          quality: 'high',
+          avatarName: selectedAvatar.avatar_id,
+          voice: { voiceId: '077ab11b14f04ce0b49b5f6e5cc20979' },
+        },
+      });
+
+      setSessionData(res);
+      setAvatarStream(avatarApiRef.current.mediaStream);
+    } catch (err) {
+      console.error('Error initializing streams:', err);
+      setCameraError('Failed to start video call. Please try again.');
+    }
+  };
+
+  const stopStreams = () => {
+    if (userStream) {
+      userStream.getTracks().forEach(track => track.stop());
+    }
+    if (avatarApiRef.current && sessionData) {
+      avatarApiRef.current.stopAvatar({
+        stopSessionRequest: { sessionId: sessionData.sessionId },
+      });
+    }
+  };
+
+  const retryCamera = () => {
+    setCameraError(null);
+    initializeStreams();
+  };
+
+  const loadModels = () => {
+    Promise.all([
+      faceapi.nets.tinyFaceDetector.loadFromUri('/weights'),
+      faceapi.nets.faceLandmark68Net.loadFromUri('/weights'),
+      faceapi.nets.faceRecognitionNet.loadFromUri('/weights'),
+      faceapi.nets.faceExpressionNet.loadFromUri('/weights')
+    ]).then(() => {
+      detectFace()
+    });
+  }
+
+  const detectFace = () => {
+    setInterval(async () => {
+      if (userVideoRef.current && isAllowSave) {
+        const detections = await faceapi.detectAllFaces(userVideoRef.current,
+          new faceapi.TinyFaceDetectorOptions())
+          .withFaceExpressions();
+        if (detections.length > 0) {
+          const newFaceData = detections
+            .map(detection => ({
+              expressions: detection.expressions
+            }))
+          setFaceData((prevState) => [...prevState, ...newFaceData]);
+        }
+      }
+    }, 300);
+  }
+
+  useEffect(() => {
+    if (userStream && userVideoRef.current) {
+      userVideoRef.current.srcObject = userStream;
+    }
+  }, [userStream]);
+
+  useEffect(() => {
+    if (avatarStream && avatarVideoRef.current) {
+      avatarVideoRef.current.srcObject = avatarStream;
+      loadModels();
+    }
+  }, [avatarStream]);
+
+  const handleEndInterview = async () => {
+    stopStreams();
+    onEndInterview();
+    if (isAllowSave) {
+      await faceService.save(faceData);
+    }
+  };
+
+  return (
+    <div className="flex-grow relative bg-gray-200 rounded-lg overflow-hidden">
+      <div className="absolute top-4 left-4 z-10 md:w-1/4 w-1/3">
+        {cameraError ? (
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+            <strong className="font-bold">Camera Error:</strong>
+            <span className="block sm:inline"> {cameraError}</span>
+            <button
+              className="absolute top-0 right-0 px-4 py-3"
+              onClick={retryCamera}
+            >
+              <RefreshCcw className="h-5 w-5 text-red-500"/>
+            </button>
+          </div>
+        ) : (
+          <video
+            ref={userVideoRef}
+            className="w-full rounded-lg"
+            autoPlay
+            playsInline
+            muted
+          />
+        )}
+      </div>
+      <div className="w-full h-full flex items-center justify-center">
+        {avatarStream ? (
+          <video
+            ref={avatarVideoRef}
+            className="w-full h-full object-cover"
+            autoPlay
+            playsInline
+          >
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <p>Waiting for avatar stream...</p>
+        )}
+      </div>
+      <div className="absolute bottom-4 right-4 space-x-2">
+        <Button
+          className="bg-black text-white hover:bg-gray-800"
+          onClick={handleEndInterview}
+        >
+          <SquareIcon className="size-4 mr-2"/>
+          End Interview
+        </Button>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..bc69cf2
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/modules/interview_manager/application/service/userManagerService.ts b/src/modules/interview_manager/application/service/userManagerService.ts
new file mode 100644
index 0000000..7fea388
--- /dev/null
+++ b/src/modules/interview_manager/application/service/userManagerService.ts
@@ -0,0 +1,10 @@
+import { UserRepositoryPort } from "../../domain/port/userRepositoryPort";
+
+
+export const createUserService = (userRepositoryPort: UserRepositoryPort) => {
+  return {
+    updateUserRole: async (email: string, newRole: string) => {
+      return userRepositoryPort.updateUserRole(email, newRole);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/modules/interview_manager/domain/model/user.ts b/src/modules/interview_manager/domain/model/user.ts
new file mode 100644
index 0000000..ea98267
--- /dev/null
+++ b/src/modules/interview_manager/domain/model/user.ts
@@ -0,0 +1,5 @@
+export type User = {
+  id: string;
+  email: string;
+  role: string;
+}
\ No newline at end of file
diff --git a/src/modules/interview_manager/domain/port/userRepositoryPort.ts b/src/modules/interview_manager/domain/port/userRepositoryPort.ts
new file mode 100644
index 0000000..85db2a3
--- /dev/null
+++ b/src/modules/interview_manager/domain/port/userRepositoryPort.ts
@@ -0,0 +1,5 @@
+import { User } from "../model/user";
+
+export interface UserRepositoryPort {
+  updateUserRole: (email: string, newRole: string) => Promise<User>;
+}
\ No newline at end of file
diff --git a/src/modules/interview_manager/infrastructure/adapter/userManagerRepositoryAdapter.ts b/src/modules/interview_manager/infrastructure/adapter/userManagerRepositoryAdapter.ts
new file mode 100644
index 0000000..d263bcf
--- /dev/null
+++ b/src/modules/interview_manager/infrastructure/adapter/userManagerRepositoryAdapter.ts
@@ -0,0 +1,94 @@
+import { User } from 'next-auth';
+import { UserRepositoryPort } from '../../domain/port/userRepositoryPort';
+
+const KEYCLOAK_BASE_URL = 'https://keycloak.pruebas-entrevistador-inteligente.site';
+const REALM = 'entrevistador';
+const CLIENT_ID ="admin-cli";
+const CLIENT_SECRET = "KcJhk4pyGHSyvlfUhk2SDbEfbqrRP4qh";
+
+export const createUserRepositoryAdapter = (): UserRepositoryPort => {
+  return {
+    updateUserRole: async (email: string, newRole: string): Promise<User> => {
+      try {
+        // 1. Obtener token de acceso
+        const tokenResponse = await fetch(
+          `${KEYCLOAK_BASE_URL}/realms/${REALM}/protocol/openid-connect/token`,
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: new URLSearchParams({
+              grant_type: 'client_credentials',
+              client_id: CLIENT_ID!,
+              client_secret: CLIENT_SECRET!,
+            }),
+          }
+        );
+        const tokenData = await tokenResponse.json();
+        console.log("TOKEN_DATA", tokenData)
+        if (!tokenData.access_token) {
+          throw new Error('Failed to obtain access token');
+        }
+        const accessToken = tokenData.access_token;
+        console.log("Email", email)
+        // 2. Buscar usuario por email
+        const userResponse = await fetch(
+          `${KEYCLOAK_BASE_URL}/admin/realms/${REALM}/users?email=${encodeURIComponent(email)}`,
+          {
+            headers: { Authorization: `Bearer ${accessToken}` },
+          }
+        );
+        if (!userResponse.ok) {
+          const errorData = await userResponse.json();
+          console.error("User search error:", errorData);
+          throw new Error(`Failed to search user: ${userResponse.status} ${userResponse.statusText}`);
+        }
+        const userData = await userResponse.json();
+
+        if (!Array.isArray(userData) || userData.length === 0) {
+          throw new Error('User not found');
+        }
+
+        const userId = userData[0].id;
+
+        console.log("newRole", newRole)
+
+        // 3. Actualizar rol del usuario
+        const updateResponse = await fetch(
+          `${KEYCLOAK_BASE_URL}/admin/realms/${REALM}/users/${userId}`,
+          {
+            method: 'PUT',
+            headers: {
+              Authorization: `Bearer ${accessToken}`,
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ attributes: { role: [newRole] } }),
+          }
+        );
+        if (!updateResponse.ok) {
+          const errorData = await updateResponse.json();
+          console.error("Update role error:", errorData);
+          throw new Error(`Failed to update user role: ${updateResponse.status} ${updateResponse.statusText}`);
+        }
+
+        // 4. Obtener usuario actualizado
+        const updatedUserResponse = await fetch(
+          `${KEYCLOAK_BASE_URL}/admin/realms/${REALM}/users/${userId}`,
+          {
+            headers: { Authorization: `Bearer ${accessToken}` },
+          }
+        );
+        if (!updatedUserResponse.ok) {
+          const errorData = await updatedUserResponse.json();
+          console.error("Get updated user error:", errorData);
+          throw new Error(`Failed to get updated user: ${updatedUserResponse.status} ${updatedUserResponse.statusText}`);
+        }
+        const updatedUserData = await updatedUserResponse.json();
+
+        return updatedUserData as User;
+      } catch (error) {
+        console.error('Error updating user role in Keycloak:', error);
+        throw error;
+      }
+    }
+  }
+}
\ No newline at end of file