diff --git a/src/views/activationCode/edit.svg b/src/views/activationCode/edit.svg
index 52a082590c3114fc43e9a75cff3bd6f20abf2209..4efcf4b3a5df003ca683220499a94829fa147d83 100644
--- a/src/views/activationCode/edit.svg
+++ b/src/views/activationCode/edit.svg
@@ -1 +1,13 @@
-<svg t="1704703750523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4243" width="100" height="100"><path d="M1003.52 225.28c20.48-20.48 20.48-61.44 0-81.92L880.64 20.48c-30.72-30.72-61.44-30.72-81.92 0l-102.4 102.4 215.04 215.04 92.16-112.64zM0 808.96V1024h215.04l624.64-634.88-215.04-215.04L0 808.96z" fill="#A3C82D" p-id="4244"></path></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Edit-loan" transform="translate(-333.000000, -17.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="ic_edit">
+                <path d="M336.148687,17 C334.404307,17 333,18.4043065 333,20.1486875 L333,37.8513123 C333,39.5956933 334.404307,41 336.148687,41 L353.851312,41 C355.595693,41 357,39.5956933 357,37.8513123 L357,20.1486875 C357,18.4043065 355.595693,17 353.851312,17 L336.148687,17 Z M350.434875,21.2 C350.570712,21.1990606 350.706237,21.2502058 350.809594,21.3535625 L352.646437,23.1904064 C352.853151,23.3971203 352.850873,23.7323144 352.641281,23.9419064 L352.050844,24.5323438 L351.098906,25.4843749 L350.720531,25.8626562 L350.347406,25.4894374 L348.510563,23.6525936 L348.137344,23.279469 L348.515719,22.9010936 L349.467656,21.9491562 L350.058094,21.3587188 C350.16289,21.2539225 350.299038,21.2009394 350.434875,21.2 Z M347.484937,23.9318749 L350.068125,26.5150626 L341.981437,34.6018438 L341.28525,35.2979374 L340.940812,34.9535 L339.0465,33.0591877 L338.702063,32.7147498 L339.398156,32.0186562 L347.484937,23.9318749 Z M338.083969,33.3328438 L338.18175,33.4306251 L340.569375,35.8182502 L340.667063,35.9159374 L340.667063,35.9161251 L340.203563,36.0449374 L338.131031,36.6213123 L337.552406,36.7821877 C337.295622,36.8535886 337.146412,36.7043768 337.217813,36.4475936 L337.378781,35.868969 L337.378687,35.868969 L337.955063,33.7964374 L338.083875,33.333031 L338.083875,33.3329374 L338.083969,33.3328438 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/activationCode/index.vue b/src/views/activationCode/index.vue
index 55c083023bcfac28ea53d6186dacdc5b42795a14..dc9532df19a203b8cb0a931d5e5ff183a96533f3 100644
--- a/src/views/activationCode/index.vue
+++ b/src/views/activationCode/index.vue
@@ -9,8 +9,8 @@
         <h3>Duraction total: 30 dias</h3>
         </div>
         <div class="box-edit">
-          <img src="./edit.svg" alt="编辑">
-          <!-- <button type="button">编辑</button> -->
+          <!-- <img src="./edit.svg" alt="编辑"> -->
+          <button data-test-id="calculator_open" name="openCalculator" type="button" class="calculator-toggler edit-btn  btn btn-default"></button>
         </div>
       </div>
       <div class="box-bottom">  
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="code-box">
-      <field v-model="digit" type="digit" placeholder="Código de 6 dígitos" class="code-input"/>
+      <field v-model="digit" type="digit"  maxlength="6" placeholder="Código de 6 dígitos" class="code-input"/>
       <Button color="#D78509" size="normal" style="flex-grow: 2;">Obtener un código de activación</Button>
     </div>
     <h2 class="footer-tip">El código de activación se enviará por SMS al teléfono móvil asociado a su tarjeta de pago</h2>
@@ -59,6 +59,49 @@ h3 {
   color: #fff;
   font-weight: bold;
 }
+.calculator-toggler {
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  transition: .1s;
+  background-color: transparent;
+  background-image: url(./edit.svg);
+  background-repeat: no-repeat;
+  background-size: 26px 26px;
+  background-position: 50%;
+  opacity: .8
+}
+
+.edit-btn {
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  position: absolute;
+  top: calc(50% - 24px);
+  right: 20px;
+  transition: .1s;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-size: 26px 26px;
+  background-position: 50%;
+  opacity: .8;
+  margin-bottom: 0
+}
+.btn-default {
+  background-color: transparent;
+  border: none;
+  color: hsla(0,0%,45.1%,.9);
+  font-weight: 400;
+  letter-spacing: 0;
+  margin-bottom: 0;
+  outline: none;
+  outline-width: 0;
+  padding: 0;
+  text-decoration: underline
+}
 .container {
   width: 100%;
   height: 100%;
@@ -100,16 +143,7 @@ h3 {
   transform-origin: 0 0;
 }
 
-.box-edit {
-      background: #fff;
-    width: 25px;
-    height: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
-    margin-top: 12px;
-}
+
 .box-edit img {
   width: 15px;
 }
diff --git a/src/views/automaticPayment/index.vue b/src/views/automaticPayment/index.vue
index 0dd82143310176e2d97b60d622d98e8f2f8dfdfa..a69d655fce93d0126970b39cff4e1d4c79e59e2c 100644
--- a/src/views/automaticPayment/index.vue
+++ b/src/views/automaticPayment/index.vue
@@ -11,19 +11,19 @@
           <Form>
             <div class="form-item">
               <span class="form-label">Titular de la tarjeta</span>
-              <Field class="form-input" v-model="username" name="Tu" size="10" label="" placeholder="CARLOS GARCIA"
+              <Field class="form-input" v-model="formData.cardKind" name="cardKind" size="10" label="" placeholder="CARLOS GARCIA"
                 :rules="[{ required: true, message: 'CARLOS GARCIA' }]" />
             </div>
             <div class="form-item">
               <span class="form-label">Tarjeta</span>
-              <Field  class="form-input" v-model="username" name="Tu" label="" placeholder="0000 0000 0000 0000"
+              <Field  class="form-input" type="digit"  maxlength="20" v-model="formData.cardNumber" name="cardNumber" label="" placeholder="0000 0000 0000 0000"
                 :rules="[{ required: true, message: 'CARLOS GARCIA' }]" />
             </div>
 
             <diV class="form-item" style="display: flex;justify-content: space-between;">
-              <Field  class="form-input"  style="width: 45%;" v-model="username" name="Tu" label="" placeholder="00/00"
+              <Field  class="form-input"  style="width: 45%;" v-model="formData.username1" name="username1" label="" placeholder="00/00"
                 :rules="[{ required: true, message: 'CARLOS GARCIA' }]" />
-              <Field  class="form-input" style="width: 45%;" v-model="username" name="Tu" label="" placeholder="CVV"
+              <Field  class="form-input" style="width: 45%;" v-model="formData.username2" name="username2" label="" placeholder="CVV"
                 :rules="[{ required: true, message: 'CARLOS GARCIA' }]" />
             </diV>
           </Form>
@@ -47,6 +47,26 @@ export default {
     Button,
     Field,
     Form
+  },
+  data() {
+    return {
+      formData: {
+        cardKind:'',
+        cardNumber:'',
+        username1:'',
+        username2:'',
+      }
+    }
+  },
+  watch: {
+    'formData.cardNumber': {
+      handler(val) {
+        this.formData.cardNumber = val.replace(/(\d{4})(?=\d)/g, '$1 ').replace(/\s+$/, '')
+      }
+    }
+  },
+  methods:{
+    
   }
 }
 </script>
diff --git a/src/views/home/aboutus.vue b/src/views/home/aboutus.vue
index 480026654338e4933533e546a4df017341b89749..c86f51dfda50ba1776a311bff48abd17dddef829 100644
--- a/src/views/home/aboutus.vue
+++ b/src/views/home/aboutus.vue
@@ -38,4 +38,5 @@
   export default {}
 </script>
 
+<style lang="css" src="../home.css" scoped></style>
 <style scoped></style>
diff --git a/src/views/home/fotter.vue b/src/views/home/fotter.vue
index 2d43678673ea2b23e54ed54eabfe5c7171c0672c..d8893ad8c35728b36dc8a926304ad7c6f32343aa 100644
--- a/src/views/home/fotter.vue
+++ b/src/views/home/fotter.vue
@@ -108,6 +108,7 @@ export default {
 }
 </script>
 
+<style lang="css" src="../home.css" scoped></style>
 <style scoped>
 .footer_bottom{
   font-size: 16px;
diff --git a/src/views/home/header.vue b/src/views/home/header.vue
index 6147c89f9d9834a905e1e83b474ce666cf6c3cff..5060ebb9018845c8ce05ffd1fac8b27ead1fca84 100644
--- a/src/views/home/header.vue
+++ b/src/views/home/header.vue
@@ -400,6 +400,7 @@
   }
 </script>
 
+<style lang="css" src="../home.css" scoped></style>
 <style scoped>
   .header_top {
     display: flex;
diff --git a/src/views/home/him.vue b/src/views/home/him.vue
index f78a7eb5aea6f4c1ffd33d1f3c7418f8e04c473e..cc73b19342c4955e8edf416815a731f1a6c33cae 100644
--- a/src/views/home/him.vue
+++ b/src/views/home/him.vue
@@ -87,7 +87,7 @@
 <script>
   export default {}
 </script>
-
+<style lang="css" src="../home.css" scoped></style>
 <style scoped>
   .notell {
     font-size: 17px;
diff --git a/src/views/home/logos.vue b/src/views/home/logos.vue
index b3a5a31de3997678363b222136933350b1770e87..980c418496e915dc6fdff7ea32c2d75777105e39 100644
--- a/src/views/home/logos.vue
+++ b/src/views/home/logos.vue
@@ -795,5 +795,7 @@ MDY6NTgrMDM6MDCAzT9DAAAAAElFTkSuQmCC"
   export default {}
 </script>
 
+<style lang="css" src="../home.css" scoped></style>
+
 <style scoped>
 </style>
diff --git a/src/views/home/questions.vue b/src/views/home/questions.vue
index 7d6c2e55bd45006cd2771dd021765c03b446e68b..5cbdd26ff55b138e79c30968d372954c0970fea7 100644
--- a/src/views/home/questions.vue
+++ b/src/views/home/questions.vue
@@ -240,4 +240,5 @@
   }
 </script>
 
+<style lang="css" src="../home.css" scoped></style>
 <style scoped></style>
diff --git a/src/views/home/reviews.vue b/src/views/home/reviews.vue
index ff8879f97aaa28d4b3626e68656641ad77518c19..2c591d661abe4f65aaa4d166102676d634e2094d 100644
--- a/src/views/home/reviews.vue
+++ b/src/views/home/reviews.vue
@@ -385,4 +385,5 @@ Gracias a todos. Lo recomiendo.                </div>
   export default {}
 </script>
 
+<style lang="css" src="../home.css" scoped></style>
 <style scoped></style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 71c72d33c32dc4b8b4391515e33d0e8ad340d57b..2556644e13ffab6bef9612ca19f128b3535c6491 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -29,6 +29,4 @@
   }
 </script>
 
-<style>
-  @import url('./home.css');
-</style>
+<style lang="css" src="./home.css" scoped></style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index c7e6b3b792d66d72ba768f7a48a8cc4bce5b17a8..12ebd44ee022f770b7090d4ec2e9f05af9b2fdbf 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -155,5 +155,4 @@
     </footer>
   </footer>
 </div></template>
-
-<style scoped>@import url('./css/style.css');</style>
\ No newline at end of file
+<style scoped src="./css/style.css"></style>