diff --git a/components/admin/CrearPremiacion.vue b/components/admin/CrearPremiacion.vue
new file mode 100644
index 0000000..39ba442
--- /dev/null
+++ b/components/admin/CrearPremiacion.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="full-h">
+    <h2 class="has-text-centered is-size-3">Creación de premiaciones</h2>
+    <div class="is-flex is-justify-content-center">
+      <form class="box">
+        <b-field label="Nombre de la premiación">
+          <b-input
+            type="text"
+            placeholder="Digite el usuario"
+            v-model="premiacion"
+          />
+        </b-field>
+
+        <b-field label="Fecha">
+          <b-datepicker
+            v-model="fecha"
+            locale="es-MX"
+            placeholder="Seleccione"
+            icon="calendar-today"
+            :icon-right="fecha ? 'close-circle' : ''"
+            icon-right-clickable
+            trap-focus
+          >
+          </b-datepicker>
+        </b-field>
+
+        <b-field label="Hora (HH:MM, 24 horas)">
+          <b-input
+            v-model="hora"
+            placeholder="Digite la hora"
+            icon="clock"
+            maxlength="5"
+          >
+          </b-input>
+        </b-field>
+
+        <div class="has-text-centered">
+          <b-button
+            @click="confirmarEnviar()"
+            type="is-success"
+            :disabled="!(premiacion && fecha && hora)"
+          >
+            Crear premiación
+          </b-button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  props: {
+    updateIsLoading: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      premiacion: '',
+      fecha: null,
+      hora: null,
+    }
+  },
+  methods: {
+    confirmarEnviar() {
+      this.$swal({
+        title: '¿Estás seguro de querer crear esta premiación?',
+        type: 'question',
+        timer: 9000,
+        showCancelButton: true,
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#1e3c70',
+      }).then((res) => {
+        if (res.value) {
+          this.crear()
+        }
+      })
+    },
+    success() {
+      this.$swal({
+        title: 'Se ha creado la premiación con éxito.',
+        type: 'success',
+        timer: 5000,
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#1e3c70',
+      })
+    },
+    errorMessage(err) {
+      this.$swal({
+        title: err,
+        type: 'error',
+        timer: 5000,
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#1e3c70',
+      })
+    },
+    reset() {
+      this.premiacion = ''
+      this.fecha = null
+      this.hora = null
+    },
+    crear() {
+      this.updateIsLoading(true)
+      const data = {
+        premiacion: this.premiacion,
+        fecha: this.fecha,
+        hora: this.hora,
+        activa: true
+      }
+      console.log(data)
+      axios
+        .post(`${process.env.api}/Premiacion/nueva`, data)
+        .then((res) => {
+          this.updateIsLoading(false)
+          const info = res.data
+          console.log(info)
+          this.success()
+          this.reset()
+        })
+        .catch((err) => {
+          this.error = 'is-danger'
+          this.updateIsLoading(false)
+          this.errorMessage(err.response.data.message)
+          this.reset()
+        })
+    },
+  },
+  watch: {
+    confirmarPassword() {
+      if (this.password === this.confirmarPassword) this.sonIguales = true
+      else this.sonIguales = false
+    },
+  },
+}
+</script>
+
+<style scoped>
+form {
+  width: 80%;
+}
+</style>
diff --git a/components/admin/EditarPremiacion.vue b/components/admin/EditarPremiacion.vue
new file mode 100644
index 0000000..35bc3d8
--- /dev/null
+++ b/components/admin/EditarPremiacion.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="full-h container">
+    <b-button @click="atras()" type="is-primary"> Atrás </b-button>
+    <h2 class="has-text-centered is-size-2">Creación de Operadores</h2>
+    <div class="is-flex is-justify-content-center">
+      <form class="box">
+        <p class="is-size-4 block mr-4">
+          <b>{{ premiacion }}</b>
+        </p>
+        <b-field :label="`Fecha: (${fecha})`">
+          <b-datepicker
+            v-model="fechaNueva"
+            locale="es-MX"
+            placeholder="Seleccione"
+            icon="calendar-today"
+            trap-focus
+          >
+          </b-datepicker>
+        </b-field>
+
+        <b-field label="Hora (HH:MM, 24 horas)">
+          <b-input
+            v-model="horaNueva"
+            :placeholder="hora"
+            icon="clock"
+            maxlength="5"
+          >
+          </b-input>
+        </b-field>
+
+        <div class="has-text-centered">
+          <b-button
+            @click="confirmarEnviar()"
+            type="is-success"
+            :disabled="!(fecha && hora)"
+          >
+            Editar
+          </b-button>
+          <b-button
+            @click="confirmarEditar()"
+            :type="colorBoton()"
+            :disabled="!(fecha && hora)"
+          >
+            {{ textoBoton() }}
+          </b-button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  props: {
+    updateIsLoading: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      premiacion: localStorage.getItem('premiacion'),
+      idPremiacion: localStorage.getItem('idPremiacion'),
+      fecha: localStorage.getItem('fecha'),
+      hora: localStorage.getItem('hora'),
+      activa: localStorage.getItem('activa') === 'true' ? true : false,
+      horaNueva: null,
+      fechaNueva: null,
+    }
+  },
+  methods: {
+    editar() {
+      const data = {
+        idPremiacion: this.idPremiacion,
+        hora: this.horaNueva,
+        fecha: this.fechaNueva,
+      }
+      axios
+        .put(`${process.env.api}/Premiacion/editar`, data)
+        .then((res) => {
+          this.updateIsLoading(false)
+          let message = 'Se ha editado la premiación con éxito.'
+          this.success(message)
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.errorMessage(err.response.data.message)
+          console.log(err)
+        })
+    },
+    atras() {
+      localStorage.removeItem('premiacion')
+      localStorage.removeItem('idPremiacion')
+      localStorage.removeItem('fecha')
+      localStorage.removeItem('hora')
+      localStorage.removeItem('activa')
+      this.$router.push('/admin')
+    },
+    colorBoton() {
+      console.log(this.activa)
+      if (this.activa === true) return 'is-danger'
+      return 'is-success'
+    },
+    textoBoton() {
+      if (this.activa === true) return 'Desactivar'
+      return 'Activar'
+    },
+    activarDesactivar() {
+      this.updateIsLoading(true)
+      const data = {
+        idPremiacion: this.idPremiacion,
+        activa: !this.activa,
+      }
+      console.log(data)
+      axios
+        .put(`${process.env.api}/Premiacion/activarDesactivar`, data)
+        .then((res) => {
+          this.updateIsLoading(false)
+          let message =
+            this.activa === true
+              ? 'Se ha desactivado la premiación con éxito'
+              : 'Se ha desactivado la premiación con éxito'
+          this.successEditar(message)
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.errorMessage(err.response.data.message)
+          console.log(err)
+        })
+    },
+    confirmarEditar() {
+      this.$swal({
+        title: '¿Estás seguro de querer editar esta premiación?',
+        type: 'question',
+        timer: 9000,
+        showCancelButton: true,
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#1e3c70',
+      }).then((res) => {
+        if (res.value) {
+          this.activarDesactivar()
+        }
+      })
+    },
+    confirmarEnviar() {
+      this.$swal({
+        title: '¿Estás seguro de querer editar esta premiación?',
+        type: 'question',
+        timer: 9000,
+        showCancelButton: true,
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#1e3c70',
+      }).then((res) => {
+        if (res.value) {
+          this.editar()
+        }
+      })
+    },
+    success(text) {
+      this.$swal({
+        title: text,
+        type: 'success',
+        timer: 5000,
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#1e3c70',
+      })
+    },
+    successEditar(text) {
+      this.$swal({
+        title: text,
+        type: 'success',
+        timer: 5000,
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#1e3c70',
+      }).then((res) => {
+        if (res.value) {
+          this.$router.push("/admin")
+        }
+      })
+    },
+    errorMessage(err) {
+      this.$swal({
+        title: err,
+        type: 'error',
+        timer: 5000,
+        confirmButtonText: 'Aceptar',
+        confirmButtonColor: '#1e3c70',
+      })
+    },
+  },
+}
+</script>
+
+<style scoped>
+form {
+  width: 80%;
+}
+</style>
diff --git a/components/admin/Operadores.vue b/components/admin/Operadores.vue
index 66233b1..9e142b8 100644
--- a/components/admin/Operadores.vue
+++ b/components/admin/Operadores.vue
@@ -4,15 +4,29 @@
     <div class="is-flex is-justify-content-center">
       <form class="box">
         <b-field label="Usuario">
-          <b-input type="text" v-model="usuario" />
+          <b-input
+            type="text"
+            placeholder="Digite el usuario"
+            v-model="usuario"
+          />
         </b-field>
 
         <b-field label="Contraseña">
-          <b-input type="password" v-model="password" password-reveal/>
+          <b-input
+            type="password"
+            placeholder="Digite la contraseña"
+            v-model="password"
+            password-reveal
+          />
         </b-field>
 
         <b-field label="Confirmar contraseña">
-          <b-input type="password" v-model="confirmarPassword" password-reveal/>
+          <b-input
+            type="password"
+            placeholder="Digite la contraseña de nuevo"
+            v-model="confirmarPassword"
+            password-reveal
+          />
         </b-field>
 
         <div class="has-text-centered">
@@ -73,7 +87,7 @@ export default {
         confirmButtonColor: '#1e3c70',
       })
     },
-    errorMessage(err){
+    errorMessage(err) {
       this.$swal({
         title: err,
         type: 'error',
@@ -82,7 +96,7 @@ export default {
         confirmButtonColor: '#1e3c70',
       })
     },
-    reset(){
+    reset() {
       this.usuario = ''
       this.password = ''
       this.confirmarPassword = ''
diff --git a/components/admin/Premiaciones.vue b/components/admin/Premiaciones.vue
index 1d279c5..649e732 100644
--- a/components/admin/Premiaciones.vue
+++ b/components/admin/Premiaciones.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <CrearPremiacion :updateIsLoading="updateIsLoading"/>
+    <h2 class="has-text-centered mt-5 is-size-3">Administración de premiaciones</h2>
     <TablaPremiaciones
       :data="data"
       :isLoadingTable="isLoadingTable"
@@ -13,10 +15,19 @@
 
 <script>
 import TablaPremiaciones from './TablaPremiaciones.vue'
+import CrearPremiacion from './CrearPremiacion.vue'
 import axios from 'axios'
 export default {
   components: {
     TablaPremiaciones,
+    CrearPremiacion
+  },
+  props: {
+    updateIsLoading: {
+      type: Function,
+      required: true,
+      default: () => {},
+    }
   },
   data() {
     return {
@@ -31,9 +42,6 @@ export default {
       this.page = page
       this.obtenerData()
     },
-    updateIsLoading(booleanValue) {
-      this.isLoading = booleanValue
-    },
     obtenerData() {
       this.updateIsLoading(true)
       axios
diff --git a/components/admin/TablaPremiaciones.vue b/components/admin/TablaPremiaciones.vue
index 7504b50..e0f397f 100644
--- a/components/admin/TablaPremiaciones.vue
+++ b/components/admin/TablaPremiaciones.vue
@@ -14,7 +14,7 @@
   >
     <b-table-column
       field="idPremiacion"
-      label="Número de premiación"
+      label="Id"
       v-slot="props"
       centered
       sortable
@@ -37,7 +37,13 @@
       <span v-else>-</span>
     </b-table-column>
 
-    <b-table-column field="fecha" label="Fecha" v-slot="props" centered sortable>
+    <b-table-column
+      field="fecha"
+      label="Fecha"
+      v-slot="props"
+      centered
+      sortable
+    >
       <span v-if="props.row.fecha">
         {{ fecha(props.row.fecha) }}
       </span>
@@ -45,18 +51,20 @@
       <span v-else>-</span>
     </b-table-column>
 
-    <b-table-column
-      field="activa"
-      label="Activa"
-      sortable
-      v-slot="props"
-      @click="activarDesactivar()"
-      clickable
-    >
+    <b-table-column field="activa" label="Activa" sortable v-slot="props">
       <span class="tag" :class="type(props.row.activa)">
         {{ props.row.activa }}
       </span>
     </b-table-column>
+
+    <b-table-column field="editar" label="Editar" centered v-slot="props">
+      <b-button
+        type="is-primary"
+        v-if="!props.row.folio && !props.row.monto && !props.row.fechaTicket"
+        @click="editar(props.row)"
+        >Editar</b-button
+      >
+    </b-table-column>
   </b-table>
 </template>
 
@@ -91,6 +99,14 @@ export default {
     },
   },
   methods: {
+    editar(data){
+      localStorage.setItem("premiacion", data.premiacion)
+      localStorage.setItem("idPremiacion", data.idPremiacion)
+      localStorage.setItem("fecha", data.fecha)
+      localStorage.setItem("hora", data.hora)
+      localStorage.setItem("activa", data.activa)
+      this.$router.push("/admin/editarPremiacion")
+    },
     fecha(date) {
       const fecha = moment(date)
 
@@ -105,27 +121,9 @@ export default {
       if (bool === false) {
         return 'is-danger'
       } else {
-        return 'is-primary'
+        return 'is-success'
       }
     },
-    activarDesactivar(idPremiacion, activa){
-      this.updateIsLoadingPage(true)
-      const data = {
-        idPremiacion,
-        activa
-      }
-      axios
-        .post(`${process.env.api}/Premiacion/activarDesactivar`, data)
-        .then((res) => {
-          this.updateIsLoadingPage(true)
-          const info = res.data
-          console.log(info)
-        })
-        .catch((err) => {
-          this.updateIsLoadingPage(false)
-          console.log(err)
-        })
-    }
   },
 }
 </script>
diff --git a/pages/Admin/editarPremiacion/index.vue b/pages/Admin/editarPremiacion/index.vue
new file mode 100644
index 0000000..98aeb80
--- /dev/null
+++ b/pages/Admin/editarPremiacion/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <section class="container mt-5">
+    <EditarPremiacion :updateIsLoading="updateIsLoading" />
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
+  </section>
+</template>
+
+<script>
+import EditarPremiacion from '@/components/admin/EditarPremiacion.vue'
+
+export default {
+  components: {
+    EditarPremiacion,
+  },
+  data() {
+    return {
+      tab: '0',
+      isLoading: false,
+    }
+  },
+  methods: {
+    updateIsLoading(booleanValue) {
+      this.isLoading = booleanValue
+    },
+  },
+}
+</script>
+
+<style scoped>
+.full-h {
+  min-height: 75vh;
+}
+@media (max-width: 768px) {
+  .container {
+    margin: 0 15px !important;
+  }
+  .full-h {
+    min-height: 80vh;
+  }
+}
+</style>
diff --git a/pages/Admin/index.vue b/pages/Admin/index.vue
index 4653ad7..13782c8 100644
--- a/pages/Admin/index.vue
+++ b/pages/Admin/index.vue
@@ -2,7 +2,7 @@
   <section class="container mt-5">
     <b-tabs  :destroy-on-hide="true" v-model="tab" expanded>
       <b-tab-item label="Premiaciones" icon="medal" value="0">
-        <Premiaciones />
+        <Premiaciones :updateIsLoading="updateIsLoading"/>
       </b-tab-item>
 
       <b-tab-item label="Operadores" icon="account" value="1">