diff --git a/frontend/src/components/ListSecrets.vue b/frontend/src/components/ListSecrets.vue
index c2944fd..1382f5a 100644
--- a/frontend/src/components/ListSecrets.vue
+++ b/frontend/src/components/ListSecrets.vue
@@ -17,25 +17,21 @@
         </el-button-group>
         <div>
           <el-form-item label="Show OTPs">
-            <el-switch v-model="showSecrets" active-value="yes" inactive-value="no" />
+            <el-switch
+              v-model="showSecrets"
+              active-value="yes"
+              inactive-value="no"
+              style="--el-switch-on-color: #67c23a"
+            />
           </el-form-item>
         </div>
         <div class="sort-options">
           <span>
             <el-form-item label="Sort">
-              <el-select
-                v-model="currentSort"
-                placeholder="Select"
-                style="width: 80px"
-                @change="sortItems"
-              >
-                <el-option
-                  v-for="item in sortOptions"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.key"
-                />
-              </el-select>
+              <el-radio-group v-model="currentSort" @change="sortItems" fill="#67c23a">
+                <el-radio-button label="A > Z" value="asc" />
+                <el-radio-button label="Z > A" value="desc" />
+              </el-radio-group>
             </el-form-item>
           </span>
         </div>
diff --git a/frontend/src/components/SecretCard.vue b/frontend/src/components/SecretCard.vue
index 522099d..07b735c 100644
--- a/frontend/src/components/SecretCard.vue
+++ b/frontend/src/components/SecretCard.vue
@@ -107,6 +107,7 @@ export default {
 
 .issuer {
   font-weight: 700;
+  /* max-width: 140px; */
 }
 
 .user {
@@ -122,6 +123,8 @@ export default {
 .card-top {
   display: flex;
   justify-content: space-between;
+  max-width: 140px;
+  overflow: hidden;
 }
 .card-button {
   position: relative;