diff --git a/src/nginxconfig/templates/domain_sections/logging.vue b/src/nginxconfig/templates/domain_sections/logging.vue
index e8ad5ff..df69e79 100644
--- a/src/nginxconfig/templates/domain_sections/logging.vue
+++ b/src/nginxconfig/templates/domain_sections/logging.vue
@@ -1,8 +1,45 @@
 <template>
-    <div>Hello world logging</div>
+    <div>
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">access_log by domain</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${accessLogChanged ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="accessLog" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable for each domain
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">error_log by domain</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${errorLogChanged ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="errorLog" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable for each domain
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+    import PrettyCheck from 'pretty-checkbox-vue/check';
     import i18n from '../../i18n';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
@@ -19,18 +56,21 @@
     };
 
     export default {
-        name: 'DomainLogging',                      // Component name
-        display: 'Logging',                         // Display name for tab
-        key: 'logging',                             // Key for data in parent
-        delegated: delegatedFromDefaults(defaults), // Data the parent will present here
+        name: 'DomainLogging',                                      // Component name
+        display: 'Logging',                                         // Display name for tab
+        key: 'logging',                                             // Key for data in parent
+        delegated: delegatedFromDefaults(defaults),                 // Data the parent will present here
+        components: {
+            PrettyCheck,
+        },
         props: {
-            data: Object,                           // Data delegated back to us from parent
+            data: Object,                                           // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
             };
         },
-        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
+        computed: computedFromDefaults(defaults, 'logging'),    // Getters & setters for the delegated data
     };
 </script>