diff --git a/resources/js/components/PedidosAdminCaracteristicasOpcionales.vue b/resources/js/components/PedidosAdminCaracteristicasOpcionales.vue
new file mode 100644
index 0000000..50d72e7
--- /dev/null
+++ b/resources/js/components/PedidosAdminCaracteristicasOpcionales.vue
@@ -0,0 +1,45 @@
+<script>
+import axios from "axios";
+import PedidosAdminFilaCaracteristica from "./PedidosAdminFilaCaracteristica.vue";
+
+export default {
+    name: "PedidosAdminCaracteristicasOpcionales",
+    components: {PedidosAdminFilaCaracteristica},
+    data() {
+        return {
+            caracteristicas: [
+                {
+                    id: "devoluciones",
+                    nombre: "Devoluciones",
+                    habilitada: false
+                },
+            ]
+        }
+    },
+}
+</script>
+
+<template>
+    <div class="block">
+
+        <table class="table is-fullwidth is-striped is-bordered">
+            <thead>
+                <tr>
+                    <th> Característica </th>
+                    <th> Habilitada </th>
+                </tr>
+            </thead>
+            <tbody>
+                <pedidos-admin-fila-caracteristica
+                    v-for="(c,i) in caracteristicas"
+                    :key="i"
+                    :caracteristica="c">
+                </pedidos-admin-fila-caracteristica>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/PedidosAdminFilaCaracteristica.vue b/resources/js/components/PedidosAdminFilaCaracteristica.vue
new file mode 100644
index 0000000..a747fb9
--- /dev/null
+++ b/resources/js/components/PedidosAdminFilaCaracteristica.vue
@@ -0,0 +1,68 @@
+<script>
+import axios from "axios";
+
+export default {
+    name: "PedidosAdminFilaCaracteristica",
+    props: {
+        caracteristica: Object
+    },
+    data: {
+        gdc: undefined
+    },
+    watch: {
+        '$root.gdc' : {
+            handler(newValue) {
+                if (newValue) {
+                    this.gdc = newValue;
+                    this.obtenerValor();
+                }
+            }
+        },
+    },
+    methods: {
+        toggleActivacion() {
+            const id = this.caracteristica.id;
+            axios.post(`/api/grupos-de-compra/${this.gdc}/${id}`)
+                .then(response => {
+                    this.caracteristica.habilitada = response.data[id];
+                    this.$root[id] = response.data[id];
+                });
+        },
+        obtenerValor() {
+            const id = this.caracteristica.id;
+            axios.get(`/api/grupos-de-compra/${this.gdc}/${id}`)
+                .then(response => {
+                    this.caracteristica.habilitada = response.data[id];
+                    this.$root[id] = response.data[id];
+                });
+        },
+    },
+    mounted() {
+        if (this.$root.gdc) {
+            this.gdc = this.$root.gdc;
+            this.obtenerValor(this);
+        }
+    }
+}
+</script>
+
+<template>
+    <tr>
+        <td>{{ caracteristica.nombre }}</td>
+        <td>
+            <div class="field">
+                <input type="checkbox" class="switch is-rounded is-success"
+                       :id="'switch-'+caracteristica.id"
+                       :checked="caracteristica.habilitada"
+                       @change="toggleActivacion(caracteristica)">
+                <label :for="'switch-'+caracteristica.id">
+                    <span class="is-hidden-mobile">{{ caracteristica.habilitada ? 'Habilitada' : 'Deshabilitada' }}</span>
+                </label>
+            </div>
+        </td>
+    </tr>
+</template>
+
+<style scoped>
+
+</style>