diff --git a/src/app/pages/concesiones/concesiones.component.html b/src/app/pages/concesiones/concesiones.component.html
index 952cb99..8231d40 100644
--- a/src/app/pages/concesiones/concesiones.component.html
+++ b/src/app/pages/concesiones/concesiones.component.html
@@ -1 +1,144 @@
-<p>concesiones works!</p>
+<div class="p-3">
+  <!-- Tabla1 -->
+  <div class="font-bold my-2">Cronogramas cargados:</div>
+  <p-table
+    [value]="products"
+    showGridlines>
+        <ng-template #header>
+            <tr>
+                <th class="bg-blue-400 font-bold">Empresa</th>
+                <th class="bg-blue-400 font-bold">Código de cronograma</th>
+                <th class="bg-blue-400 font-bold">Código cronograma de ajuste</th>
+                <th class="bg-blue-400 font-bold">Tipo de carga</th>
+                <th class="bg-green-400 font-bold">Estado de revisión</th>
+                <th class="bg-green-400 font-bold">Analista</th>
+                <th class="bg-green-400 font-bold">Fecha ingreso</th>
+                <th class="bg-green-400 font-bold">Semáforo</th>
+            </tr>
+        </ng-template>
+        <ng-template #body let-product>
+            <tr>
+                <td>{{ product.empresa }}</td>
+                <td>{{ product.codigoCronograma }}</td>
+                <td>{{ product.codigoCronogramaAjuste }}</td>
+                <td>{{ product.tipoCarga }}</td>
+                <td>{{ product.estadoRevision }}</td>
+                <td>
+                  <!-- analista -->
+                    <input
+                    type="analista"
+                    pInputText
+                    [(ngModel)]="product.analista"
+                    placeholder="Analista"
+                    name="analista"
+                    class="input-with-icon w-full"
+                    style="background-color: white; color: black;width: 228px !important;"
+                  />
+                </td>
+                <td>{{ product.fechaIngreso }}</td>
+                <td>
+                  <!-- {{ product.semaforo }} -->
+                  <div class="text-center">
+                    <i class="pi pi-circle-fill" style="font-size: 24px;"
+                    [style.color]="product.semaforo === 'green' ? '#00bb00' : product.semaforo === 'yellow' ? 'yellow' : product.semaforo === 'red' ? 'red' : ''"></i>
+                  </div>
+                </td>
+            </tr>
+        </ng-template>
+</p-table>
+
+
+
+<div class="flex justify-content-between flex-wrap border-round border-blue-400 bg-blue-200 my-5 lg:px-0 md:px-8 py-3">
+  <div class="col-12 md:col-6 lg:col-2">
+      <div class="border-round font-bold">
+        <div class="h-4rem">Filtro Empresa</div>
+        <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
+          <option selected>Seleccione...</option>
+          <option value="1">Opcion 1</option>
+          <option value="2">Opcion 2</option>
+          <option value="3">Opcion 3</option>
+        </select>
+      </div>
+  </div>
+  <div class="col-12 md:col-6 lg:col-2">
+      <div class="border-round font-bold">
+        <div class="h-4rem">Filtro Código Cronograma SINAR</div>
+        <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
+          <option selected>Seleccione...</option>
+          <option value="1">Opcion 1</option>
+          <option value="2">Opcion 2</option>
+          <option value="3">Opcion 3</option>
+      </select>
+      </div>
+  </div>
+  <div class="col-12 md:col-6 lg:col-2">
+      <div class="border-round font-bold">
+        <div class="h-4rem">Filtro tipo de carga</div>
+        <select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
+          <option selected>Seleccione...</option>
+          <option value="actualizacion">Actualización</option>
+          <option value="nueva">Nueva</option>
+          <option value="concesion">Concesión</option>
+          <option value="ajuste">Ajuste</option>
+          <option value="ato">ATO</option>
+      </select>
+      </div>
+  </div>
+  <div class="col-12 md:col-6 lg:col-2">
+      <div class="border-round font-bold">
+        <div class="h-4rem">¿Contiene obras del año?</div>
+        <select id="selectContieneObras" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
+            <option selected>Seleccione...</option>
+            <option value="true">SI</option>
+            <option value="false">NO</option>
+        </select>
+      </div>
+  </div>
+  <div class="col-12 md:col-12 lg:col-2">
+    <div class="border-round font-bold">
+      <div class="h-4rem">N° Oficio que aprueba</div>
+      <!-- Numero Oficio -->
+      <input
+      type="number"
+      pInputText
+      placeholder="xxxxx"
+      name="numeroOficio"
+      class="input-with-icon w-full mt-1 text-center sm:text-start"
+      style="background-color: white; color: black;"
+    />
+    </div>
+  </div>
+  <div class="col-12 text-center">
+    <button type="button" class="bg-primary border-primary-500 mt-3 px-5 py-3 text-base border-1 border-solid border-round cursor-pointer transition-all transition-duration-200 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-700 active:border-primary-700">Crear solicitud</button>
+  </div>
+</div>
+
+<!-- Tabla2 -->
+<div class="font-bold my-2">Cronogramas solicitados y pendientes de carga:</div>
+<p-table
+    [value]="products"
+    showGridlines>
+        <ng-template #header>
+            <tr>
+                <th class="bg-blue-400 font-bold">Empresa</th>
+                <th class="bg-blue-400 font-bold">Código de cronograma SINAR</th>
+                <th class="bg-blue-400 font-bold">Contiene obras del año</th>
+                <th class="bg-blue-400 font-bold">N° Oficio que aprueba</th>
+                <th class="bg-blue-400 font-bold">Tipo de carga</th>
+                <th class="bg-blue-400 font-bold">Fecha de solicitud</th>
+            </tr>
+        </ng-template>
+        <ng-template #body let-product>
+            <tr>
+                <td>{{ product.empresa }}</td>
+                <td>{{ product.codigoCronograma }}</td>
+                <td>{{ product.codigoCronogramaAjuste }}</td>
+                <td>{{ product.tipoCarga }}</td>
+                <td>{{ product.estadoRevision }}</td>
+                <td>{{ product.fechaIngreso }}</td>
+            </tr>
+        </ng-template>
+</p-table>
+
+</div>
diff --git a/src/app/pages/concesiones/concesiones.component.scss b/src/app/pages/concesiones/concesiones.component.scss
index e69de29..668b250 100644
--- a/src/app/pages/concesiones/concesiones.component.scss
+++ b/src/app/pages/concesiones/concesiones.component.scss
@@ -0,0 +1,4 @@
+.input-with-icon {
+  background-size: 20px 20px;
+  padding-right: 35px; /* espacio para que el texto no choque con el ícono */
+}
diff --git a/src/app/pages/concesiones/concesiones.component.ts b/src/app/pages/concesiones/concesiones.component.ts
index 7d18369..5d23561 100644
--- a/src/app/pages/concesiones/concesiones.component.ts
+++ b/src/app/pages/concesiones/concesiones.component.ts
@@ -1,11 +1,58 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TableModule } from 'primeng/table';
+import { InputTextModule } from 'primeng/inputtext';
 
 @Component({
   selector: 'app-concesiones',
-  imports: [],
+  imports: [FormsModule, TableModule, InputTextModule],
   templateUrl: './concesiones.component.html',
   styleUrl: './concesiones.component.scss'
 })
 export class ConcesionesComponent {
+  pageTitle: string = 'Cronogramas cargados:';
+
+  products: any[] = [
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Ingresado',
+      analista: 'No asignado',
+      fechaIngreso: '2025-04-29',
+      semaforo: 'green'
+    },
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'En revisión',
+      analista: 'Gabriel Torres',
+      fechaIngreso: '2025-04-29',
+      semaforo: 'yellow'
+    },
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Rechazado',
+      analista: 'Jorge Muñoz',
+      fechaIngreso: '2025-04-29',
+      semaforo: 'red'
+    },
+    {
+      empresa: 'Empresa A',
+      codigoCronograma: '123',
+      codigoCronogramaAjuste: '456',
+      tipoCarga: 'Inicial',
+      estadoRevision: 'Aprobado',
+      analista: 'Jarolt Matamoros',
+      fechaIngreso: '2025-04-29',
+      semaforo: 'green'
+    },
+  ];
 
 }