commit 82cf9149a443fc8ba584995dfea68a3703761772
Author: Jan Pašek <janpasek97@gmail.com>
Date:   Wed May 12 12:07:29 2021 +0200

    Re #8701 - Design improvements of GUI

diff --git a/static/certificate.html b/static/certificate.html
index e4c12c9..8e30349 100644
--- a/static/certificate.html
+++ b/static/certificate.html
@@ -21,265 +21,267 @@
             </div>
             <a href="/" class="caret-left">Home</a>
         </div>
-        <div v-if="!loading && !error" v-cloak>
-            <div class="row">
-                <a href="/static/index.html"><div class="caret-left font-weight-bold ml-2 mb-2">Home</div></a>
-            </div>
-            <h1 class="mb-5 text-center">Certificate Detailed View</h1>
-            <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
-                {{ successMessage }}
-            </div>
-            <div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
-                {{ errorMessage }}
-            </div>
-            <div class="row">
-                <div class="col-xl-6">
-                    <table class="ml-auto mr-auto mb-4">
-                        <tr>
-                            <td>Status:</td>
-                            <td class="pl-3">
-                                <h5><span class="badge badge-success" v-if="certificate.status == 'valid'">Valid</span></h5>
-                                <h5><span class="badge badge-warning" v-if="certificate.status == 'revoked'">Revoked</span></h5>
-                                <h5><span class="badge badge-danger" v-if="certificate.status == 'expired'">Expired</span></h5>
-                            </td>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="validity_start">Validity start:</label></td>
-                                <td class="pl-3">
-                                    <input :value="startDate" type="text" id="validity_start" name="validity_start" class="form-control" disabled>
-                                </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="validity_end">Validity end:</label></td>
-                                <td class="pl-3">
-                                    <input :value="endDate" type="text" id="validity_end" name="validity_end" class="form-control" disabled>
-                                </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <td colspan="2"><h5>Subject</h5></td>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="subject_C">Country Code:</label></td>
-                                <td class="pl-3">
-                                    <input :value="certificate.subject.C" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
-                                </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="subject_ST">Province/State:</label></td>
-                                <td class="pl-3">
-                                    <input :value="certificate.subject.ST" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
-                                </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="subject_L">Locality:</label></td>
-                                <td class="pl-3">
-                                    <input :value="certificate.subject.L" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
-                                </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="subject_CN">Common Name:</label></td>
-                                <td class="pl-3">
-                                    <input :value="certificate.subject.CN" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
-                                </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="subject_O">Organization:</label></td>
-                                <td class="pl-3">
-                                    <input :value="certificate.subject.O" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
-                                </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="subject_OU">Organization Unit:</label></td>
-                                <td class="pl-3">
-                                    <input :value="certificate.subject.OU" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
-                                </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <div class="form-group">
-                                <td><label for="subject_emailAddress">Email Address:</label></td>
+        <div v-if="!loading && !error" v-cloak class="card">
+            <div class="card-body">
+                <div class="row">
+                    <a href="/static/index.html"><div class="caret-left font-weight-bold ml-2 mb-2">Home</div></a>
+                </div>
+                <h1 class="mb-5 text-center">Certificate Detailed View</h1>
+                <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
+                    {{ successMessage }}
+                </div>
+                <div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
+                    {{ errorMessage }}
+                </div>
+                <div class="row">
+                    <div class="col-xl-6">
+                        <table class="ml-auto mr-auto mb-4">
+                            <tr>
+                                <td>Status:</td>
                                 <td class="pl-3">
-                                    <input :value="certificate.subject.emailAddress" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
+                                    <h5><span class="badge badge-success" v-if="certificate.status == 'valid'">Valid</span></h5>
+                                    <h5><span class="badge badge-warning" v-if="certificate.status == 'revoked'">Revoked</span></h5>
+                                    <h5><span class="badge badge-danger" v-if="certificate.status == 'expired'">Expired</span></h5>
                                 </td>
-                            </div>
-                        </tr>
-                        <tr>
-                            <td>Usage:</td>
-                            <td class="form-check">
-                                <input class="form-check-input" v-model="certificate.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
-                                <label class="form-check-label" for="isCA">CA</label><br>
-
-                                <input class="form-check-input" v-model="certificate.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature" disabled>
-                                <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
-
-                                <input class="form-check-input" v-model="certificate.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication" disabled>
-                                <label class="form-check-label" for="isAuthentication">Authentication</label><br>
-
-                                <input class="form-check-input" v-model="certificate.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS" disabled>
-                                <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td colspan="2" v-if="certificate.CA != id">
-                                <button v-on:click="onShowIssuer()" class="btn btn-outline-secondary btn-block mt-5" type="button">
-                                    <span v-if="!displayIssuer">Show issuer</span>
-                                    <span v-if="displayIssuer">Hide issuer</span>
-                                </button>
-                            </td>
-                        </tr>
-                        <div id="issuerCollapse">
-                            <tr v-if="displayIssuer">
-                                <td colspan="2"><h5 class="mt-2"><a :href="issuerURL">Issuer</a></h5></td>
                             </tr>
-                            <tr v-if="displayIssuer" >
+                            <tr>
+                                <div class="form-group">
+                                    <td><label for="validity_start">Validity start:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="startDate" type="text" id="validity_start" name="validity_start" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr>
+                                <div class="form-group">
+                                    <td><label for="validity_end">Validity end:</label></td>
+                                    <td class="pl-3">
+                                        <input :value="endDate" type="text" id="validity_end" name="validity_end" class="form-control" disabled>
+                                    </td>
+                                </div>
+                            </tr>
+                            <tr>
+                                <td colspan="2"><h5>Subject</h5></td>
+                            </tr>
+                            <tr>
                                 <div class="form-group">
                                     <td><label for="subject_C">Country Code:</label></td>
                                     <td class="pl-3">
-                                        <input :value="issuer.subject.C" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
+                                        <input :value="certificate.subject.C" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
                                     </td>
                                 </div>
                             </tr>
-                            <tr v-if="displayIssuer" >
+                            <tr>
                                 <div class="form-group">
                                     <td><label for="subject_ST">Province/State:</label></td>
                                     <td class="pl-3">
-                                        <input :value="issuer.subject.ST" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
+                                        <input :value="certificate.subject.ST" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
                                     </td>
                                 </div>
                             </tr>
-                            <tr v-if="displayIssuer" >
+                            <tr>
                                 <div class="form-group">
                                     <td><label for="subject_L">Locality:</label></td>
                                     <td class="pl-3">
-                                        <input :value="issuer.subject.L" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
+                                        <input :value="certificate.subject.L" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
                                     </td>
                                 </div>
                             </tr>
-                            <tr v-if="displayIssuer" >
+                            <tr>
                                 <div class="form-group">
                                     <td><label for="subject_CN">Common Name:</label></td>
                                     <td class="pl-3">
-                                        <input :value="issuer.subject.CN" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
+                                        <input :value="certificate.subject.CN" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
                                     </td>
                                 </div>
                             </tr>
-                            <tr v-if="displayIssuer" >
+                            <tr>
                                 <div class="form-group">
                                     <td><label for="subject_O">Organization:</label></td>
                                     <td class="pl-3">
-                                        <input :value="issuer.subject.O" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
+                                        <input :value="certificate.subject.O" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
                                     </td>
                                 </div>
                             </tr>
-                            <tr v-if="displayIssuer" >
+                            <tr>
                                 <div class="form-group">
                                     <td><label for="subject_OU">Organization Unit:</label></td>
                                     <td class="pl-3">
-                                        <input :value="issuer.subject.OU" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
+                                        <input :value="certificate.subject.OU" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
                                     </td>
                                 </div>
                             </tr>
-                            <tr v-if="displayIssuer" >
+                            <tr>
                                 <div class="form-group">
                                     <td><label for="subject_emailAddress">Email Address:</label></td>
                                     <td class="pl-3">
-                                        <input :value="issuer.subject.emailAddress" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
+                                        <input :value="certificate.subject.emailAddress" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
                                     </td>
                                 </div>
                             </tr>
-                            <tr v-if="displayIssuer" >
+                            <tr>
                                 <td>Usage:</td>
                                 <td class="form-check">
-                                    <input class="form-check-input" v-model="issuer.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
+                                    <input class="form-check-input" v-model="certificate.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
                                     <label class="form-check-label" for="isCA">CA</label><br>
 
-                                    <input class="form-check-input" v-model="issuer.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature" disabled>
+                                    <input class="form-check-input" v-model="certificate.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature" disabled>
                                     <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
 
-                                    <input class="form-check-input" v-model="issuer.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication" disabled>
+                                    <input class="form-check-input" v-model="certificate.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication" disabled>
                                     <label class="form-check-label" for="isAuthentication">Authentication</label><br>
 
-                                    <input class="form-check-input" v-model="issuer.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS" disabled>
+                                    <input class="form-check-input" v-model="certificate.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS" disabled>
                                     <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
                                 </td>
                             </tr>
-                        </div>
-                    </table>
-                </div>
-                <div class="col-xl-5">
-                    <div class="row table-responsive">
-                        <table class="table">
-                            <thead class="thead-dark">
-                                <tr>
-                                    <th colspan="5" class="text-center">Manage certificate</th>
+                            <tr>
+                                <td colspan="2" v-if="certificate.CA != id">
+                                    <button v-on:click="onShowIssuer()" class="btn btn-outline-secondary btn-block mt-5" type="button">
+                                        <span v-if="!displayIssuer">Show issuer</span>
+                                        <span v-if="displayIssuer">Hide issuer</span>
+                                    </button>
+                                </td>
+                            </tr>
+                            <div id="issuerCollapse">
+                                <tr v-if="displayIssuer">
+                                    <td colspan="2"><h5 class="mt-2"><a :href="issuerURL">Issuer</a></h5></td>
                                 </tr>
-                            </thead>
-                            <tbody>
-                                <tr class="d-flex">
-                                    <td style="width: 30%" class="font-weight-bold">Certificate download:</td>
-                                    <td><button v-on:click="onCertificateDownload()" class="btn btn-primary btn-sm certificate-control" href="">Certificate</button></td>
-                                    <td><button v-on:click="onChainDownload()" class="btn btn-primary btn-sm certificate-control" href="">Chain of trust</button></td>
-                                    <td><button v-on:click="onRootDownload()" class="btn btn-primary btn-sm certificate-control" href="">Root</button></td>
+                                <tr v-if="displayIssuer" >
+                                    <div class="form-group">
+                                        <td><label for="subject_C">Country Code:</label></td>
+                                        <td class="pl-3">
+                                            <input :value="issuer.subject.C" type="text" id="subject_C" name="subject_C" class="form-control" disabled>
+                                        </td>
+                                    </div>
                                 </tr>
-                                <tr class="d-flex">
-                                    <td style="width: 30%" class="font-weight-bold">Key/Identity download:</td>
-                                    <td><button v-on:click="onPublicKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Public key</button></td>
-                                    <td><button v-on:click="onPrivateKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Private key</button></td>
-                                    <td><button data-toggle="modal" data-target="#identityModal" class="btn btn-success btn-sm certificate-control" href="">PKCS #12</button></td>
+                                <tr v-if="displayIssuer" >
+                                    <div class="form-group">
+                                        <td><label for="subject_ST">Province/State:</label></td>
+                                        <td class="pl-3">
+                                            <input :value="issuer.subject.ST" type="text" id="subject_ST" name="subject_ST" class="form-control" disabled>
+                                        </td>
+                                    </div>
                                 </tr>
-                                <tr class="d-flex">
-                                    <td style="width: 30%" class="font-weight-bold">Actions:</td>
-                                    <td><button data-toggle="modal" data-target="#deleteModal" class="btn btn-danger btn-sm certificate-control" href="">Delete</button></td>
-                                    <td><button data-toggle="modal" data-target="#revokeModal" class="btn btn-warning btn-sm certificate-control" href="">Revoke</button></td>
-                                    <td> </td>
+                                <tr v-if="displayIssuer" >
+                                    <div class="form-group">
+                                        <td><label for="subject_L">Locality:</label></td>
+                                        <td class="pl-3">
+                                            <input :value="issuer.subject.L" type="text" id="subject_L" name="subject_L" class="form-control" disabled>
+                                        </td>
+                                    </div>
                                 </tr>
-                                <tr class="d-flex">
-                                    <td style="width: 30%" class="font-weight-bold">Endpoints:</td>
-                                    <td><a class="certificate-control font-weight-bold" :href="crlEndpoint">CRL</a></td>
-                                    <td><a class="certificate-control font-weight-bold" :href="ocspEndpoint">OCSP</a></td>
-                                    <td> </td>
+                                <tr v-if="displayIssuer" >
+                                    <div class="form-group">
+                                        <td><label for="subject_CN">Common Name:</label></td>
+                                        <td class="pl-3">
+                                            <input :value="issuer.subject.CN" type="text" id="subject_CN" name="subject_CN" class="form-control" disabled>
+                                        </td>
+                                    </div>
                                 </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="row table-responsive">
-                        <table class="table table-striped table-hover">
-                            <thead class="thead-dark text-center">
-                                <tr>
-                                    <th scope="col" colspan="2">Issued Certificates</th>
+                                <tr v-if="displayIssuer" >
+                                    <div class="form-group">
+                                        <td><label for="subject_O">Organization:</label></td>
+                                        <td class="pl-3">
+                                            <input :value="issuer.subject.O" type="text" id="subject_O" name="subject_O" class="form-control" disabled>
+                                        </td>
+                                    </div>
                                 </tr>
-                                <tr>
-                                    <th class="w-65" scope="col">Common Name</th>
-                                    <th class="w-35" scope="col">Type</th>
+                                <tr v-if="displayIssuer" >
+                                    <div class="form-group">
+                                        <td><label for="subject_OU">Organization Unit:</label></td>
+                                        <td class="pl-3">
+                                            <input :value="issuer.subject.OU" type="text" id="subject_OU" name="subject_OU" class="form-control" disabled>
+                                        </td>
+                                    </div>
                                 </tr>
-                            </thead>
-                            <tbody>
-                                <tr class="text-center font-italic">
-                                    <td v-if="issuedCertificates.length == 0" colspan="2">No issued certificates</td>
+                                <tr v-if="displayIssuer" >
+                                    <div class="form-group">
+                                        <td><label for="subject_emailAddress">Email Address:</label></td>
+                                        <td class="pl-3">
+                                            <input :value="issuer.subject.emailAddress" type="text" id="subject_emailAddress" name="subject_emailAddress" class="form-control" disabled>
+                                        </td>
+                                    </div>
                                 </tr>
-                                <tr is="issued-by-list-item"
-                                    v-for="certificate in issuedCertificates"
-                                    v-bind:certificate="certificate"
-                                    v-bind:key="certificate.id">
+                                <tr v-if="displayIssuer" >
+                                    <td>Usage:</td>
+                                    <td class="form-check">
+                                        <input class="form-check-input" v-model="issuer.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA" disabled>
+                                        <label class="form-check-label" for="isCA">CA</label><br>
+
+                                        <input class="form-check-input" v-model="issuer.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature" disabled>
+                                        <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
+
+                                        <input class="form-check-input" v-model="issuer.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication" disabled>
+                                        <label class="form-check-label" for="isAuthentication">Authentication</label><br>
+
+                                        <input class="form-check-input" v-model="issuer.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS" disabled>
+                                        <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
+                                    </td>
                                 </tr>
-                            </tbody>
+                            </div>
                         </table>
                     </div>
+                    <div class="col-xl-5">
+                        <div class="row table-responsive">
+                            <table class="table">
+                                <thead class="thead-dark">
+                                    <tr>
+                                        <th colspan="5" class="text-center">Manage certificate</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr class="d-flex">
+                                        <td style="width: 30%" class="font-weight-bold">Certificate download:</td>
+                                        <td><button v-on:click="onCertificateDownload()" class="btn btn-primary btn-sm certificate-control" href="">Certificate</button></td>
+                                        <td><button v-on:click="onChainDownload()" class="btn btn-primary btn-sm certificate-control" href="">Chain of trust</button></td>
+                                        <td><button v-on:click="onRootDownload()" class="btn btn-primary btn-sm certificate-control" href="">Root</button></td>
+                                    </tr>
+                                    <tr class="d-flex">
+                                        <td style="width: 30%" class="font-weight-bold">Key/Identity download:</td>
+                                        <td><button v-on:click="onPublicKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Public key</button></td>
+                                        <td><button v-on:click="onPrivateKeyDownload()" class="btn btn-success btn-sm certificate-control" href="">Private key</button></td>
+                                        <td><button data-toggle="modal" data-target="#identityModal" class="btn btn-success btn-sm certificate-control" href="">PKCS #12</button></td>
+                                    </tr>
+                                    <tr class="d-flex">
+                                        <td style="width: 30%" class="font-weight-bold">Actions:</td>
+                                        <td><button data-toggle="modal" data-target="#deleteModal" class="btn btn-danger btn-sm certificate-control" href="">Delete</button></td>
+                                        <td><button data-toggle="modal" data-target="#revokeModal" class="btn btn-warning btn-sm certificate-control" href="">Revoke</button></td>
+                                        <td> </td>
+                                    </tr>
+                                    <tr class="d-flex">
+                                        <td style="width: 30%" class="font-weight-bold">Endpoints:</td>
+                                        <td><a class="certificate-control font-weight-bold" :href="crlEndpoint">CRL</a></td>
+                                        <td><a class="certificate-control font-weight-bold" :href="ocspEndpoint">OCSP</a></td>
+                                        <td> </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="row table-responsive">
+                            <table class="table table-striped table-hover">
+                                <thead class="thead-dark text-center">
+                                    <tr>
+                                        <th scope="col" colspan="2">Issued Certificates</th>
+                                    </tr>
+                                    <tr>
+                                        <th class="w-65" scope="col">Common Name</th>
+                                        <th class="w-35" scope="col">Type</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr class="text-center font-italic">
+                                        <td v-if="issuedCertificates.length == 0" colspan="2">No issued certificates</td>
+                                    </tr>
+                                    <tr is="issued-by-list-item"
+                                        v-for="certificate in issuedCertificates"
+                                        v-bind:certificate="certificate"
+                                        v-bind:key="certificate.id">
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/static/create_certificate.html b/static/create_certificate.html
index 7bd7cf4..af3033f 100644
--- a/static/create_certificate.html
+++ b/static/create_certificate.html
@@ -7,234 +7,244 @@
     <link rel="stylesheet" href="/static/css/bootstrap.min.css">
 </head>
 <body class="p-4">
-    <div id="create-certificate-content" class="container">
-        <h1 class="text-center">Create Certificate</h1>
+    <div id="create-certificate-content" class="container-lg">
+        <div class="row">
+            <div class="col-lg-2"></div>
+            <div class="col-lg card">
+                <div class="card-body">
+                    <h1 class="text-center">Create Certificate</h1>
 
-        <div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
-            {{ errorMessage }}
-        </div>
+                    <div v-if="errorMessage !== ''" class="alert alert-danger" v-cloak role="alert">
+                        {{ errorMessage }}
+                    </div>
 
-        <table class="ml-auto mr-auto">
-            <tr>
-                <div class="form-group">
-                    <td><label for="CA">Certificate Authority:</label></td>
-                    <td class="pl-3">
-                        <select v-model="certificateData.CA" name="CA" id="CA" class="form-control" :disabled="isSelfSigned">
-                            <option value=null disabled selected>-- Select issuer --</option>
-                            <option is="ca-select-item"
-                                    v-for="ca in authorities"
-                                    v-bind:ca="ca"
-                                    v-bind:key="ca.id"></option>
-                        </select>
-                    </td>
-                    <td style="padding-left: 37px">
-                        <input class="form-check-input" :disabled="authorities.length === 0" v-model="isSelfSigned" type="checkbox" id="isSelfSigned" name="isSelfSigned" value="self-signed">
-                        <label class="form-check-label" for="isSelfSigned">Self-signed</label><br>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="validity_start">Validity start:</label></td>
-                    <td class="pl-3"><input v-bind:value="notBefore" type="date" id="validity_start" name="validity_start" class="form-control" disabled></td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="validity_end">Validity end:</label></td>
-                    <td class="pl-3"><input v-bind:value="notAfter" type="date" id="validity_end" name="validity_end" class="form-control" disabled></td>
-                    <td class="pl-3">
-                        <span>
-                            <input v-model="certificateData.validityDays" type="number" min="1" id="validity_days" name="validity_days" class="form-control custom-control-inline" style="width: 70px; margin-right: 0">
-                            <label for="validity_days">days</label>
-                        </span>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <td colspan="2"><h5>Issuer</h5></td>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="issuer_CN">Common Name:</label></td>
-                    <td class="pl-3">
-                        <input type="text" id="issuer_CN" name="issuer_CN" class="form-control" v-bind:value="selectedCAData.CN" disabled>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="issuer_C">Country Code:</label></td>
-                    <td class="pl-3">
-                        <input type="text" id="issuer_C" name="issuer_C" class="form-control" v-bind:value="selectedCAData.C" disabled>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="issuer_L">Locality:</label></td>
-                    <td class="pl-3">
-                        <input type="text" id="issuer_L" name="issuer_L" class="form-control" v-bind:value="selectedCAData.L" disabled>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="issuer_ST">Province/State:</label></td>
-                    <td class="pl-3">
-                        <input type="text" id="issuer_ST" name="issuer_ST" class="form-control" v-bind:value="selectedCAData.ST" disabled>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="issuer_O">Organization:</label></td>
-                    <td class="pl-3">
-                        <input type="text" id="issuer_O" name="issuer_O" class="form-control" v-bind:value="selectedCAData.O" disabled>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="issuer_OU">Organization Unit:</label></td>
-                    <td class="pl-3">
-                        <input type="text" id="issuer_OU" name="issuer_OU" class="form-control" v-bind:value="selectedCAData.OU" disabled>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="issuer_emailAddress">Email:</label></td>
-                    <td class="pl-3">
-                        <input type="email" id="issuer_emailAddress" name="issuer_emailAddress" class="form-control" v-bind:value="selectedCAData.emailAddress" disabled>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <td colspan="2"><h5>Subject</h5></td>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="subject_CN">Common Name:</label></td>
-                    <td class="pl-3">
-                        <input type="text" v-bind:class="{ 'is-invalid': invalidCN }" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="subject_C">Country Code:</label></td>
-                    <td class="pl-3">
-                        <input type="text"  v-model:value="certificateData.subject.C" id="subject_C" name="subject_C" class="form-control">
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="subject_L">Locality:</label></td>
-                    <td class="pl-3">
-                        <input type="text" v-model:value="certificateData.subject.L" id="subject_L" name="subject_L" class="form-control">
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="subject_ST">Province/State:</label></td>
-                    <td class="pl-3">
-                        <input type="text" v-model:value="certificateData.subject.ST" id="subject_ST" name="subject_ST" class="form-control">
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="subject_O">Organization:</label></td>
-                    <td class="pl-3">
-                        <input type="text" v-model:value="certificateData.subject.O" id="subject_O" name="subject_O" class="form-control">
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="subject_OU">Organization Unit:</label></td>
-                    <td class="pl-3">
-                        <input type="text" v-model:value="certificateData.subject.OU" id="subject_OU" name="subject_OU" class="form-control">
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group">
-                    <td><label for="subject_emailAddress">Email:</label></td>
-                    <td class="pl-3">
-                        <input type="email" v-model:value="certificateData.subject.emailAddress" id="subject_emailAddress" name="subject_emailAddress" class="form-control">
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <td>Usage:</td>
-                <td class="form-check">
-                    <input class="form-check-input" :disabled="isSelfSigned" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA">
-                    <label class="form-check-label" for="isCA">CA</label><br>
+                    <table class="ml-auto mr-auto">
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="CA">Certificate Authority:</label></td>
+                                <td class="pl-3">
+                                    <select v-model="certificateData.CA" name="CA" id="CA" class="form-control" :disabled="isSelfSigned">
+                                        <option value=null disabled selected>-- Select issuer --</option>
+                                        <option is="ca-select-item"
+                                                v-for="ca in authorities"
+                                                v-bind:ca="ca"
+                                                v-bind:key="ca.id"></option>
+                                    </select>
+                                </td>
+                                <td style="padding-left: 37px">
+                                    <input class="form-check-input" :disabled="authorities.length === 0" v-model="isSelfSigned" type="checkbox" id="isSelfSigned" name="isSelfSigned" value="self-signed">
+                                    <label class="form-check-label" for="isSelfSigned">Self-signed</label><br>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="validity_start">Validity start:</label></td>
+                                <td class="pl-3"><input v-bind:value="notBefore" type="date" id="validity_start" name="validity_start" class="form-control" disabled></td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="validity_end">Validity end:</label></td>
+                                <td class="pl-3"><input v-bind:value="notAfter" type="date" id="validity_end" name="validity_end" class="form-control" disabled></td>
+                                <td class="pl-3">
+                                    <span>
+                                        <input v-model="certificateData.validityDays" type="number" min="1" id="validity_days" name="validity_days" class="form-control custom-control-inline" style="width: 70px; margin-right: 0">
+                                        <label for="validity_days">days</label>
+                                    </span>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <td colspan="2"><h5>Issuer</h5></td>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="issuer_CN">Common Name:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" id="issuer_CN" name="issuer_CN" class="form-control" v-bind:value="selectedCAData.CN" disabled>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="issuer_C">Country Code:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" id="issuer_C" name="issuer_C" class="form-control" v-bind:value="selectedCAData.C" disabled>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="issuer_L">Locality:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" id="issuer_L" name="issuer_L" class="form-control" v-bind:value="selectedCAData.L" disabled>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="issuer_ST">Province/State:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" id="issuer_ST" name="issuer_ST" class="form-control" v-bind:value="selectedCAData.ST" disabled>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="issuer_O">Organization:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" id="issuer_O" name="issuer_O" class="form-control" v-bind:value="selectedCAData.O" disabled>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="issuer_OU">Organization Unit:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" id="issuer_OU" name="issuer_OU" class="form-control" v-bind:value="selectedCAData.OU" disabled>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="issuer_emailAddress">Email:</label></td>
+                                <td class="pl-3">
+                                    <input type="email" id="issuer_emailAddress" name="issuer_emailAddress" class="form-control" v-bind:value="selectedCAData.emailAddress" disabled>
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <td colspan="2"><h5>Subject</h5></td>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="subject_CN">Common Name:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" v-bind:class="{ 'is-invalid': invalidCN }" v-model:value="certificateData.subject.CN" id="subject_CN" name="subject_CN" class="form-control">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="subject_C">Country Code:</label></td>
+                                <td class="pl-3">
+                                    <input type="text"  v-model:value="certificateData.subject.C" id="subject_C" name="subject_C" class="form-control">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="subject_L">Locality:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" v-model:value="certificateData.subject.L" id="subject_L" name="subject_L" class="form-control">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="subject_ST">Province/State:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" v-model:value="certificateData.subject.ST" id="subject_ST" name="subject_ST" class="form-control">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="subject_O">Organization:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" v-model:value="certificateData.subject.O" id="subject_O" name="subject_O" class="form-control">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="subject_OU">Organization Unit:</label></td>
+                                <td class="pl-3">
+                                    <input type="text" v-model:value="certificateData.subject.OU" id="subject_OU" name="subject_OU" class="form-control">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group">
+                                <td><label for="subject_emailAddress">Email:</label></td>
+                                <td class="pl-3">
+                                    <input type="email" v-model:value="certificateData.subject.emailAddress" id="subject_emailAddress" name="subject_emailAddress" class="form-control">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <td>Usage:</td>
+                            <td class="form-check">
+                                <input class="form-check-input" :disabled="isSelfSigned" v-model="certificateData.usage.CA" type="checkbox" id="isCA" name="isCA" value="CA">
+                                <label class="form-check-label" for="isCA">CA</label><br>
 
-                    <input class="form-check-input" v-model="certificateData.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature">
-                    <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
+                                <input class="form-check-input" v-model="certificateData.usage.digitalSignature" type="checkbox" id="isDigitalSignature" name="isDigitalSignature" value="DigitalSignature">
+                                <label class="form-check-label" for="isDigitalSignature">Digital Signature</label><br>
 
-                    <input class="form-check-input" v-model="certificateData.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication">
-                    <label class="form-check-label" for="isAuthentication">Authentication</label><br>
+                                <input class="form-check-input" v-model="certificateData.usage.authentication" type="checkbox" id="isAuthentication" name="isAuthentication" value="Authentication">
+                                <label class="form-check-label" for="isAuthentication">Authentication</label><br>
 
-                    <input class="form-check-input" v-model="certificateData.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS">
-                    <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
-                </td>
-            </tr>
-            <tr>
-                <div class="form-group form-check">
-                    <td><label class="form-check-label" for="specifyPasswordCheckbox" style="margin-top: 15px">Custom key:</label></td>
-                    <td class="pl-3">
-                        <input type="checkbox" v-model="customKey" id="specifyPasswordCheckbox" name="specifyPassword" class="mb-2 form-check-input form-check">
-                    </td>
+                                <input class="form-check-input" v-model="certificateData.usage.SSL" type="checkbox" id="isSSL_TLS" name="isSSL_TLS" value="SSL_TLS">
+                                <label class="form-check-label" for="isSSL_TLS">SSL/TLS</label><br>
+                            </td>
+                        </tr>
+                        <tr>
+                            <div class="form-group form-check">
+                                <td><label class="form-check-label" for="specifyPasswordCheckbox" style="margin-top: 15px">Custom key:</label></td>
+                                <td class="pl-3">
+                                    <input type="checkbox" v-model="customKey" id="specifyPasswordCheckbox" name="specifyPassword" class="mb-2 form-check-input form-check">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr v-if="customKey" v-cloak>
+                            <div class="form-group">
+                                <td class="pl-5"><label for="key_password">Password:</label></td>
+                                <td class="pl-3">
+                                    <input type="password" v-model:value="key.password" id="key_password" name="key_password" class="form-control">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr v-if="customKey" v-cloak>
+                            <div class="form-group">
+                                <td class="pl-5"><label for="key_pem">Private key:</label></td>
+                                <td class="pl-3">
+                                    <input type="file" v-on:change="onKeyFileChange" id="key_pem" name="key_pem" class="form-control-file">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr>
+                            <div class="form-group form-check">
+                                <td><label class="form-check-label" for="specifyExtensionsCheckbox" style="margin-top: 15px">Custom extensions:</label></td>
+                                <td class="pl-3">
+                                    <input type="checkbox" v-model="customExtensions" id="specifyExtensionsCheckbox" name="specifyExtensions" class="mb-2 form-check-input form-check">
+                                </td>
+                            </div>
+                        </tr>
+                        <tr v-if="customExtensions" v-cloak>
+                            <div class="form-group">
+                                <td class="pl-5"><label for="extensions">Extensions:</label></td>
+                                <td cla ss="pl-3">
+                                    <textarea v-model:value="extensions" id="extensions" name="extensions" class="form-control mt-2">
+                                    </textarea>
+                                </td>
+                            </div>
+                        </tr>
+                    </table>
+                    <div class="container">
+                        <div class="">
+                            <div class="col">
+                                <button class="btn btn-success mt-3 w-100" v-on:click="onCreateCertificate">Create certificate</button>
+                            </div>
+                            <div class="col">
+                                <button class="btn btn-secondary mt-3 w-100" onclick="window.location.href = '/static/index.html'">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-            </tr>
-            <tr v-if="customKey" v-cloak>
-                <div class="form-group">
-                    <td class="pl-5"><label for="key_password">Password:</label></td>
-                    <td class="pl-3">
-                        <input type="password" v-model:value="key.password" id="key_password" name="key_password" class="form-control">
-                    </td>
-                </div>
-            </tr>
-            <tr v-if="customKey" v-cloak>
-                <div class="form-group">
-                    <td class="pl-5"><label for="key_pem">Private key:</label></td>
-                    <td class="pl-3">
-                        <input type="file" v-on:change="onKeyFileChange" id="key_pem" name="key_pem" class="form-control-file">
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <div class="form-group form-check">
-                    <td><label class="form-check-label" for="specifyExtensionsCheckbox" style="margin-top: 15px">Custom extensions:</label></td>
-                    <td class="pl-3">
-                        <input type="checkbox" v-model="customExtensions" id="specifyExtensionsCheckbox" name="specifyExtensions" class="mb-2 form-check-input form-check">
-                    </td>
-                </div>
-            </tr>
-            <tr v-if="customExtensions" v-cloak>
-                <div class="form-group">
-                    <td class="pl-5"><label for="extensions">Extensions:</label></td>
-                    <td cla ss="pl-3">
-                        <textarea v-model:value="extensions" id="extensions" name="extensions" class="form-control mt-2">
-                        </textarea>
-                    </td>
-                </div>
-            </tr>
-            <tr>
-                <td align="center">
-                    <button class="btn btn-success mt-3 w-auto" v-on:click="onCreateCertificate">Create certificate</button>
-                </td>
-                <td align="center">
-                    <button class="btn btn-secondary mt-3 w-75" onclick="window.location.href = '/static/index.html'">Cancel</button>
-                </td>
-            </tr>
-        </table>
+            </div>
+            <div class="col-lg-2"></div>
+        </div>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
diff --git a/static/css/app.css b/static/css/app.css
index eca8d06..b70a73d 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -1,3 +1,19 @@
+html, body {
+    min-height: 100%;
+}
+
+body {
+background-repeat: no-repeat;
+background-attachment: fixed;
+background: #085078;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to bottom, #85D8CE, #085078);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to bottom, #85D8CE, #085078); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+
+.filtering-box {
+    background-color: ghostwhite;
+}
+
 [v-cloak] {
   display: none;
 }
diff --git a/static/index.html b/static/index.html
index f842e5b..3ec5e47 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3,137 +3,139 @@
 <head>
     <meta charset="UTF-8">
     <title>X.509 Certificate Management</title>
-    <link rel="stylesheet" href="/static/css/app.css">
     <link rel="stylesheet" href="/static/css/bootstrap.min.css">
     <link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/app.css">
 </head>
 <body>
-    <div id="certificateListingPage" class="p-4">
+    <div id="certificateListingPage" class="p-5 h-100">
         <div v-if="loading">
             <loading :active.sync="loading"
                      :can-cancel="false"
                       loader="dots"
                      :is-full-page="true"></loading>
         </div>
-        <div v-if="!loading" v-cloak>
-            <div>
-                <h1 class="d-inline-block">Certificate Listing</h1>
-            </div>
-            <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
-                {{ successMessage }}
-            </div>
-            <div class="mt-2 mb-2">
-                <a class="btn btn-success mb-3 text-center" href="/static/create_certificate.html"><b>+</b></a>
-                <button v-on:click="toggleFilters" v-if="!displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Show filtering</button>
-                <button v-on:click="toggleFilters" v-if="displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Hide filtering</button>
-                <div class="collapse mt-2" id="filteringCollapse">
-                    <div class="card card-body">
-                        <div class="container">
-                            <div class="row align-items-center">
-                                <div class="col-3">
-                                    <div class="form-group mb-0">
-                                        <h5>Usage:</h5>
-                                        <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="usageCA" v-model="filtering.usage.CA">
-                                            <label class="form-check-label" for="usageCA">
-                                                CA
-                                            </label>
-                                        </div>
-                                        <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="usageSignature" v-model="filtering.usage.digitalSignature">
-                                            <label class="form-check-label" for="usageSignature">
-                                                Digital signature
-                                            </label>
-                                        </div>
-                                        <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="usageAuth" v-model="filtering.usage.authentication">
-                                            <label class="form-check-label" for="usageAuth">
-                                                Authentication
-                                            </label>
-                                        </div>
-                                        <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="usageSSL" v-model="filtering.usage.SSL">
-                                            <label class="form-check-label" for="usageSSL">
-                                                SSL/TLS
-                                            </label>
+        <div v-if="!loading" v-cloak class="card h-100">
+            <div class="card-body">
+                <div>
+                    <h1 class="d-inline-block">Certificate Listing</h1>
+                </div>
+                <div class="alert alert-success" v-if="successMessage !== ''" role="alert" v-cloak>
+                    {{ successMessage }}
+                </div>
+                <div class="mt-2 mb-2">
+                    <a class="btn btn-success mb-3 text-center" href="/static/create_certificate.html"><b>+</b></a>
+                    <button v-on:click="toggleFilters" v-if="!displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Show filtering</button>
+                    <button v-on:click="toggleFilters" v-if="displayFilters" class="btn btn-outline-primary ml-4 mb-3" data-toggle="collapse" data-target="#filteringCollapse">Hide filtering</button>
+                    <div class="collapse mt-2" id="filteringCollapse">
+                        <div class="card card-body filtering-box">
+                            <div class="container">
+                                <div class="row align-items-center">
+                                    <div class="col-3">
+                                        <div class="form-group mb-0">
+                                            <h5>Usage:</h5>
+                                            <div class="form-check ml-4">
+                                                <input class="form-check-input" type="checkbox" id="usageCA" v-model="filtering.usage.CA">
+                                                <label class="form-check-label" for="usageCA">
+                                                    CA
+                                                </label>
+                                            </div>
+                                            <div class="form-check ml-4">
+                                                <input class="form-check-input" type="checkbox" id="usageSignature" v-model="filtering.usage.digitalSignature">
+                                                <label class="form-check-label" for="usageSignature">
+                                                    Digital signature
+                                                </label>
+                                            </div>
+                                            <div class="form-check ml-4">
+                                                <input class="form-check-input" type="checkbox" id="usageAuth" v-model="filtering.usage.authentication">
+                                                <label class="form-check-label" for="usageAuth">
+                                                    Authentication
+                                                </label>
+                                            </div>
+                                            <div class="form-check ml-4">
+                                                <input class="form-check-input" type="checkbox" id="usageSSL" v-model="filtering.usage.SSL">
+                                                <label class="form-check-label" for="usageSSL">
+                                                    SSL/TLS
+                                                </label>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="col-3">
-                                    <div class="form-group mb-0">
-                                        <h5>Type:</h5>
-                                        <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="rootCA" v-model="filtering.type.RootCA">
-                                            <label class="form-check-label" for="rootCA">
-                                                Root CA
-                                            </label>
-                                        </div>
-                                        <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="intermediateCA" v-model="filtering.type.IntermediateCA">
-                                            <label class="form-check-label" for="intermediateCA">
-                                                Intermediate CA
-                                            </label>
-                                        </div>
-                                        <div class="form-check ml-4">
-                                            <input class="form-check-input" type="checkbox" id="endCertificate" v-model="filtering.type.EndCertificate">
-                                            <label class="form-check-label" for="endCertificate">
-                                                End certificate
-                                            </label>
+                                    <div class="col-3">
+                                        <div class="form-group mb-0">
+                                            <h5>Type:</h5>
+                                            <div class="form-check ml-4">
+                                                <input class="form-check-input" type="checkbox" id="rootCA" v-model="filtering.type.RootCA">
+                                                <label class="form-check-label" for="rootCA">
+                                                    Root CA
+                                                </label>
+                                            </div>
+                                            <div class="form-check ml-4">
+                                                <input class="form-check-input" type="checkbox" id="intermediateCA" v-model="filtering.type.IntermediateCA">
+                                                <label class="form-check-label" for="intermediateCA">
+                                                    Intermediate CA
+                                                </label>
+                                            </div>
+                                            <div class="form-check ml-4">
+                                                <input class="form-check-input" type="checkbox" id="endCertificate" v-model="filtering.type.EndCertificate">
+                                                <label class="form-check-label" for="endCertificate">
+                                                    End certificate
+                                                </label>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="col-3">
-                                    <div class="form-group mb-0">
-                                        <h5>Common name:</h5>
-                                        <div>
-                                            <input class="form-control" type="text" id="commonName" placeholder="Enter common name"  v-model="filtering.CN">
+                                    <div class="col-3">
+                                        <div class="form-group mb-0">
+                                            <h5>Common name:</h5>
+                                            <div>
+                                                <input class="form-control" type="text" id="commonName" placeholder="Enter common name"  v-model="filtering.CN">
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="col-3">
-                                    <button class="btn btn-primary mb-2" style="width: 115px;" v-on:click="reloadData">Apply filters</button>
-                                    <button class="btn btn-secondary mb-2" style="width: 115px;" v-on:click="clearFilters">Clear filters</button>
+                                    <div class="col-3">
+                                        <button class="btn btn-primary mb-2" style="width: 115px;" v-on:click="reloadData">Apply filters</button>
+                                        <button class="btn btn-secondary mb-2" style="width: 115px;" v-on:click="clearFilters">Clear filters</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <table class="table table-striped table-hover text-center">
-                <thead class="thead-dark">
-                    <tr>
-                        <th class="align-middle" scope="col" rowspan="2">Common name</th>
-                        <th class="align-middle" scope="col" colspan="2">Validity</th>
-                        <th class="align-middle" scope="col" rowspan="2">Usage</th>
-                        <th class="align-middle" scope="col" rowspan="2">Certificate</th>
-                        <th class="align-middle" scope="col" rowspan="2">Chain of trust</th>
-                        <th class="align-middle" scope="col" rowspan="2">Root</th>
-                        <th class="align-middle" scope="col" rowspan="2">Private key</th>
-                        <th class="align-middle" scope="col" rowspan="2">Issuer</th>
-                    </tr>
-                    <tr>
-                        <th scope="col">Start</th>
-                        <th scope="col">End</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr is="certificate-item"
-                        v-for="certificate in certificates"
-                        v-bind:certificate="certificate"
-                        v-bind:key="certificate.id">
-                    </tr>
-                </tbody>
-            </table>
-            <div v-if="hasNextPage || hasPreviousPage">
-              <ul class="pagination justify-content-center">
-                    <li class="page-item" v-bind:class="{disabled: !hasPreviousPage}">
-                        <button v-on:click="onPreviousPage" class="page-link"><<</button>
-                    </li>
-                    <li class="page-item"><button class="page-link">{{ currentPage }}</button></li>
-                    <li class="page-item" v-bind:class="{disabled: !hasNextPage}">
-                        <button v-on:click="onNextPage" class="page-link">>></button>
-                    </li>
-              </ul>
+                <table class="table table-striped table-hover text-center">
+                    <thead class="thead-dark">
+                        <tr>
+                            <th class="align-middle" scope="col" rowspan="2">Common name</th>
+                            <th class="align-middle" scope="col" colspan="2">Validity</th>
+                            <th class="align-middle" scope="col" rowspan="2">Usage</th>
+                            <th class="align-middle" scope="col" rowspan="2">Certificate</th>
+                            <th class="align-middle" scope="col" rowspan="2">Chain of trust</th>
+                            <th class="align-middle" scope="col" rowspan="2">Root</th>
+                            <th class="align-middle" scope="col" rowspan="2">Private key</th>
+                            <th class="align-middle" scope="col" rowspan="2">Issuer</th>
+                        </tr>
+                        <tr>
+                            <th scope="col">Start</th>
+                            <th scope="col">End</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr is="certificate-item"
+                            v-for="certificate in certificates"
+                            v-bind:certificate="certificate"
+                            v-bind:key="certificate.id">
+                        </tr>
+                    </tbody>
+                </table>
+                <div v-if="hasNextPage || hasPreviousPage">
+                  <ul class="pagination justify-content-center">
+                        <li class="page-item" v-bind:class="{disabled: !hasPreviousPage}">
+                            <button v-on:click="onPreviousPage" class="page-link"><<</button>
+                        </li>
+                        <li class="page-item"><button class="page-link">{{ currentPage }}</button></li>
+                        <li class="page-item" v-bind:class="{disabled: !hasNextPage}">
+                            <button v-on:click="onNextPage" class="page-link">>></button>
+                        </li>
+                  </ul>
+                </div>
             </div>
         </div>
     </div>
