diff --git a/src/components/asignaturas/detalle/BibliographyItem.tsx b/src/components/asignaturas/detalle/BibliographyItem.tsx
new file mode 100644
index 0000000..21c5bde
--- /dev/null
+++ b/src/components/asignaturas/detalle/BibliographyItem.tsx
@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import { Pencil, BookOpen } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+type Props = {
+  value: string
+  onSave: (value: string) => void
+}
+
+export function BibliographyItem({ value, onSave }: Props) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [draft, setDraft] = useState(value)
+
+  function handleCancel() {
+    setDraft(value)
+    setIsEditing(false)
+  }
+
+  function handleSave() {
+    onSave(draft)
+    setIsEditing(false)
+  }
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border p-4 transition',
+        isEditing
+          ? 'border-yellow-400 bg-yellow-50'
+          : 'border-gray-200 bg-white'
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <BookOpen className="w-5 h-5 text-yellow-500 mt-1" />
+
+        <div className="flex-1">
+          {!isEditing ? (
+            <>
+              <p className="text-sm leading-relaxed">{value}</p>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                className="mt-2 text-muted-foreground"
+                onClick={() => setIsEditing(true)}
+              >
+                <Pencil className="w-4 h-4 mr-1" />
+                Editar
+              </Button>
+            </>
+          ) : (
+            <>
+              <Textarea
+                value={draft}
+                onChange={(e) => setDraft(e.target.value)}
+                className="min-h-[90px]"
+              />
+
+              <div className="flex justify-end gap-2 mt-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleCancel}
+                >
+                  Cancelar
+                </Button>
+
+                <Button
+                  size="sm"
+                  className="bg-green-600 hover:bg-green-700"
+                  onClick={handleSave}
+                >
+                  Guardar
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/asignaturas/detalle/ContenidoTematico.tsx b/src/components/asignaturas/detalle/ContenidoTematico.tsx
new file mode 100644
index 0000000..efc1e57
--- /dev/null
+++ b/src/components/asignaturas/detalle/ContenidoTematico.tsx
@@ -0,0 +1,40 @@
+import { Button } from '@/components/ui/button'
+import { UnidadCard } from './contenido-tematico/UnidadCard'
+
+
+export function ContenidoTematico() {
+  return (
+    <div className="max-w-5xl mx-auto py-10 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-xl font-semibold">Contenido Temático</h2>
+          <p className="text-sm text-muted-foreground">
+            Unidades, temas y subtemas de la materia
+          </p>
+        </div>
+
+        <div className="flex gap-2">
+          <Button variant="outline">Nueva unidad</Button>
+          <Button>Guardar</Button>
+        </div>
+      </div>
+
+      <UnidadCard
+        numero={1}
+        titulo="Fundamentos de Inteligencia Artificial"
+        temas={[
+          {
+            id: 't1',
+            titulo: 'Tipos de IA y aplicaciones',
+            horas: 6,
+          },
+          {
+            id: 't2',
+            titulo: 'Ética en IA',
+            horas: 3,
+          },
+        ]}
+      />
+    </div>
+  )
+}
diff --git a/src/components/asignaturas/detalle/MateriaDetailPage.tsx b/src/components/asignaturas/detalle/MateriaDetailPage.tsx
new file mode 100644
index 0000000..52ba7a0
--- /dev/null
+++ b/src/components/asignaturas/detalle/MateriaDetailPage.tsx
@@ -0,0 +1,227 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+  ArrowLeft,
+  GraduationCap,
+
+} from 'lucide-react'
+import { ContenidoTematico } from './ContenidoTematico'
+import { BibliographyItem } from './BibliographyItem'
+
+export default function MateriaDetailPage() {
+
+
+  return (
+    <div className="w-full">
+      {/* ================= HEADER ================= */}
+      <section className="bg-gradient-to-b from-[#0b1d3a] to-[#0e2a5c] text-white">
+        <div className="max-w-7xl mx-auto px-6 py-10">
+          <Link
+            to="/materias"
+            className="flex items-center gap-2 text-sm text-blue-200 hover:text-white mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Volver al plan
+          </Link>
+
+          <div className="flex items-start justify-between gap-6">
+            <div className="space-y-3">
+              <Badge className="bg-blue-900/50 border border-blue-700">
+                IA-401
+              </Badge>
+
+              <h1 className="text-3xl font-bold">
+                Inteligencia Artificial Aplicada
+              </h1>
+
+              <div className="flex flex-wrap gap-4 text-sm text-blue-200">
+                <span className="flex items-center gap-1">
+                  <GraduationCap className="w-4 h-4" />
+                  Ingeniería en Sistemas Computacionales
+                </span>
+
+                <span>Facultad de Ingeniería</span>
+              </div>
+
+              <p className="text-sm text-blue-300">
+                Pertenece al plan:{' '}
+                <span className="underline cursor-pointer">
+                  Licenciatura en Ingeniería en Sistemas Computacionales 2024
+                </span>
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-2 items-end">
+              <Badge variant="secondary">8 créditos</Badge>
+              <Badge variant="secondary">7° semestre</Badge>
+              <Badge variant="secondary">Sistemas Inteligentes</Badge>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ================= TABS ================= */}
+      <section className="bg-white border-b">
+        <div className="max-w-7xl mx-auto px-6">
+          <Tabs defaultValue="datos">
+            <TabsList className="h-auto bg-transparent p-0 gap-6">
+              <TabsTrigger value="datos">Datos generales</TabsTrigger>
+              <TabsTrigger value="contenido">Contenido temático</TabsTrigger>
+              <TabsTrigger value="bibliografia">Bibliografía</TabsTrigger>
+              <TabsTrigger value="ia">IA de la materia</TabsTrigger>
+              <TabsTrigger value="sep">Documento SEP</TabsTrigger>
+              <TabsTrigger value="historial">Historial</TabsTrigger>
+            </TabsList>
+
+            <Separator className="mt-2" />
+
+            {/* ================= TAB: DATOS GENERALES ================= */}
+            <TabsContent value="datos">
+              <DatosGenerales />
+            </TabsContent>
+
+            <TabsContent value="contenido">
+              <ContenidoTematico></ContenidoTematico>
+            </TabsContent>
+
+            <TabsContent value="bibliografia">
+              <BibliographyItem 
+                value="Russell, S., & Norvig, P. (2021). Artificial Intelligence: A Modern Approach (4th ed.). Pearson."
+              onSave={(newValue) => {
+                console.log('Guardar en API:', newValue)
+              }}
+              />
+            </TabsContent>
+
+            <TabsContent value="ia">
+              <EmptyTab title="IA de la materia" />
+            </TabsContent>
+
+            <TabsContent value="sep">
+              <EmptyTab title="Documento SEP" />
+            </TabsContent>
+
+            <TabsContent value="historial">
+              <EmptyTab title="Historial" />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+/* ================= TAB CONTENT ================= */
+
+function DatosGenerales() {
+  return (
+    <div className="max-w-5xl mx-auto py-10 space-y-6">
+      <HeaderTab />
+
+      <InfoCard
+        title="Objetivo General"
+        content="Formar profesionales capaces de diseñar, implementar y evaluar sistemas de inteligencia artificial que resuelvan problemas complejos del mundo real."
+      />
+
+      <InfoCard
+        title="Competencias a Desarrollar"
+        content={
+          <ul className="list-disc list-inside space-y-1">
+            <li>Diseñar algoritmos de machine learning</li>
+            <li>Implementar redes neuronales profundas</li>
+            <li>Evaluar modelos de IA considerando métricas</li>
+            <li>Aplicar principios éticos en sistemas inteligentes</li>
+          </ul>
+        }
+      />
+
+      <InfoCard
+        title="Justificación"
+        content="La inteligencia artificial es una de las tecnologías más disruptivas del siglo XXI..."
+      />
+
+      <InfoCard
+        title="Requisitos y Seriación"
+        content="Programación Avanzada (PA-301), Matemáticas Discretas (MAT-201)"
+      />
+
+      <InfoCard
+        title="Estrategias Didácticas"
+        content={
+          <ul className="list-disc list-inside space-y-1">
+            <li>Aprendizaje basado en proyectos</li>
+            <li>Talleres prácticos con datasets reales</li>
+            <li>Estudios de caso</li>
+          </ul>
+        }
+      />
+
+      <InfoCard
+        title="Sistema de Evaluación"
+        content={
+          <ul className="list-disc list-inside space-y-1">
+            <li>Exámenes parciales: 30%</li>
+            <li>Proyecto integrador: 35%</li>
+            <li>Prácticas de laboratorio: 20%</li>
+            <li>Participación: 15%</li>
+          </ul>
+        }
+      />
+
+      <InfoCard
+        title="Perfil del Docente"
+        content="Profesional con maestría o doctorado en áreas afines a IA, con experiencia mínima de 3 años."
+      />
+    </div>
+  )
+}
+
+function HeaderTab() {
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h2 className="text-xl font-semibold">Datos Generales</h2>
+        <p className="text-sm text-muted-foreground">
+          Información basada en la plantilla SEP Licenciatura
+        </p>
+      </div>
+
+      <Button size="sm">Guardar todo</Button>
+    </div>
+  )
+}
+
+function InfoCard({
+  title,
+  content,
+}: {
+  title: string
+  content: React.ReactNode
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          {title}
+          <Badge variant="outline">Obligatorio</Badge>
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="text-sm text-muted-foreground">
+        {content}
+      </CardContent>
+    </Card>
+  )
+}
+
+function EmptyTab({ title }: { title: string }) {
+  return (
+    <div className="py-16 text-center text-muted-foreground">
+      {title} (pendiente)
+    </div>
+  )
+}
diff --git a/src/components/asignaturas/detalle/contenido-tematico/EditTemaDialog.tsx b/src/components/asignaturas/detalle/contenido-tematico/EditTemaDialog.tsx
new file mode 100644
index 0000000..4ff57ba
--- /dev/null
+++ b/src/components/asignaturas/detalle/contenido-tematico/EditTemaDialog.tsx
@@ -0,0 +1,61 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import { useState } from 'react'
+
+export function EditTemaDialog({
+  children,
+  temaId,
+  defaultValue,
+  horas,
+}: {
+  children: React.ReactNode
+  temaId: string
+  defaultValue: string
+  horas: number
+}) {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState(defaultValue)
+
+  function handleSave() {
+    console.log('Guardar tema', temaId, value)
+    setOpen(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div onClick={() => setOpen(true)}>{children}</div>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Editar tema</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Textarea
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            rows={4}
+          />
+
+          <p className="text-sm text-muted-foreground">
+            Horas asignadas: {horas}
+          </p>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancelar
+          </Button>
+          <Button onClick={handleSave}>Guardar</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/components/asignaturas/detalle/contenido-tematico/TemaItem.tsx b/src/components/asignaturas/detalle/contenido-tematico/TemaItem.tsx
new file mode 100644
index 0000000..78fb2a5
--- /dev/null
+++ b/src/components/asignaturas/detalle/contenido-tematico/TemaItem.tsx
@@ -0,0 +1,28 @@
+import { Pencil } from 'lucide-react'
+import { EditTemaDialog } from './EditTemaDialog'
+
+export function TemaItem({
+  id,
+  titulo,
+  horas,
+}: {
+  id: string
+  titulo: string
+  horas: number
+}) {
+  return (
+    <EditTemaDialog
+      temaId={id}
+      defaultValue={titulo}
+      horas={horas}
+    >
+      <button className="w-full flex items-center justify-between rounded-md border px-4 py-2 text-left hover:bg-gray-50">
+        <span>{titulo}</span>
+        <div className="flex items-center gap-3 text-sm text-muted-foreground">
+          <span>{horas} hrs</span>
+          <Pencil className="w-4 h-4" />
+        </div>
+      </button>
+    </EditTemaDialog>
+  )
+}
diff --git a/src/components/asignaturas/detalle/contenido-tematico/UnidadCard.tsx b/src/components/asignaturas/detalle/contenido-tematico/UnidadCard.tsx
new file mode 100644
index 0000000..215c9b0
--- /dev/null
+++ b/src/components/asignaturas/detalle/contenido-tematico/UnidadCard.tsx
@@ -0,0 +1,34 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { TemaItem } from './TemaItem'
+
+export function UnidadCard({
+  numero,
+  titulo,
+  temas,
+}: {
+  numero: number
+  titulo: string
+  temas: {
+    id: string
+    titulo: string
+    horas: number
+  }[]
+}) {
+  return (
+    <Card>
+      <CardContent className="p-6 space-y-4">
+        <div className="flex items-center gap-3">
+          <Badge>Unidad {numero}</Badge>
+          <h3 className="font-semibold">{titulo}</h3>
+        </div>
+
+        <div className="space-y-2">
+          {temas.map((tema) => (
+            <TemaItem key={tema.id} {...tema} />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx b/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
index b001a97..53d85fa 100644
--- a/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+++ b/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
@@ -1,3 +1,4 @@
+import MateriaDetailPage from '@/components/asignaturas/detalle/MateriaDetailPage'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute(
@@ -7,12 +8,11 @@ export const Route = createFileRoute(
 })
 
 function RouteComponent() {
-  const { planId, asignaturaId } = Route.useParams()
+  //const { planId, asignaturaId } = Route.useParams()
 
   return (
     <div>
-      Plan: {planId} <br />
-      Asignatura: {asignaturaId}
+     <MateriaDetailPage></MateriaDetailPage>
     </div>
   )
 }