diff --git a/shopfloor_mobile_base/static/wms/src/components/detail/detail_card.js b/shopfloor_mobile_base/static/wms/src/components/detail/detail_card.js
index 711c87edafd..f771d0bb123 100644
--- a/shopfloor_mobile_base/static/wms/src/components/detail/detail_card.js
+++ b/shopfloor_mobile_base/static/wms/src/components/detail/detail_card.js
@@ -12,7 +12,7 @@ Vue.component("item-detail-card", {
     template: `
     <div :class="wrapper_klass">
         <v-card :color="card_color" tile :class="{'theme--dark': opts.theme_dark, 'main': opts.main, 'no-outline': opts.no_outline}" v-if="!_.isEmpty(record)">
-            <v-card-title v-if="!opts.no_title">
+            <v-card-title v-if="!opts.no_title" :class="opts.title_class">
                 <slot name="title">
                     <v-icon v-if="opts.title_icon" v-text="opts.title_icon" class="mr-2" />
                     <span v-text="_.result(record, opts.key_title)" />
diff --git a/shopfloor_mobile_base/static/wms/src/css/main.css b/shopfloor_mobile_base/static/wms/src/css/main.css
index 1dd3a41342c..b97b5293861 100644
--- a/shopfloor_mobile_base/static/wms/src/css/main.css
+++ b/shopfloor_mobile_base/static/wms/src/css/main.css
@@ -457,6 +457,10 @@ main.v-content > .v-content__wrap > .header .container {
     line-height: 1.1rem;
 }
 
+.v-card .v-card__title-smaller {
+    font-size: 0.9rem;
+}
+
 /* TODO: likely to be applied to all */
 .list .v-list-item {
     border-bottom: 1px solid #ccc;