diff --git a/frontend/src/assets/css/style.css b/frontend/src/assets/css/style.css
index 3936f2f..0565370 100644
--- a/frontend/src/assets/css/style.css
+++ b/frontend/src/assets/css/style.css
@@ -589,7 +589,13 @@ select {
 .totals-card__kcal {
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--space-sm);
+}
+
+.totals-card__row {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-md);
 }
 
 .totals-card__kcal-label {
@@ -623,18 +629,30 @@ select {
   justify-content: flex-end;
 }
 
+.macro-badge-group--nowrap {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  max-width: 100%;
+  scrollbar-width: thin;
+}
+
 .macro-badge {
   display: inline-flex;
   align-items: center;
+  gap: 0.2rem;
   border-radius: 999px;
   padding: 0.24rem 0.56rem;
   border: 1px solid transparent;
   font-size: 0.76rem;
-  font-weight: 600;
+  font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 }
 
+.macro-badge__value {
+  font-weight: 700;
+}
+
 .macro-badge--protein {
   color: var(--macro-protein);
   border-color: color-mix(in srgb, var(--macro-protein) 30%, var(--color-border));
diff --git a/frontend/src/components/common/MacroBadge.vue b/frontend/src/components/common/MacroBadge.vue
index 37c37fe..62e6e3b 100644
--- a/frontend/src/components/common/MacroBadge.vue
+++ b/frontend/src/components/common/MacroBadge.vue
@@ -23,6 +23,7 @@ const formattedGrams = computed(() => {
 
 <template>
 	<span :class="['macro-badge', `macro-badge--${macro}`]">
-		{{ label }} {{ formattedGrams }}g
+		<span>{{ label }}</span>
+		<strong class="macro-badge__value">{{ formattedGrams }}g</strong>
 	</span>
 </template>
diff --git a/frontend/src/components/today/DayTotalsCard.vue b/frontend/src/components/today/DayTotalsCard.vue
index e43cd8d..b821bca 100644
--- a/frontend/src/components/today/DayTotalsCard.vue
+++ b/frontend/src/components/today/DayTotalsCard.vue
@@ -13,15 +13,17 @@ const { t } = useI18n()
 <template>
 	<section class="card totals-card">
 		<h3>{{ t('today.dayTotals') }}</h3>
-		<div class="totals-card__kcal">
-			<span class="totals-card__kcal-label">{{ t('common.kcalUnit') }}</span>
-			<strong class="totals-card__kcal-value">{{ totals.kcal }}</strong>
-		</div>
-		<div class="macro-badge-group">
-			<MacroBadge macro="protein" :label="t('nutrition.short.protein')" :grams="totals.protein_g" />
-			<MacroBadge macro="carbs" :label="t('nutrition.short.carbs')" :grams="totals.carbs_g" />
-			<MacroBadge macro="fat" :label="t('nutrition.short.fat')" :grams="totals.fat_g" />
-			<MacroBadge macro="fiber" :label="t('nutrition.short.fiber')" :grams="totals.fiber_g" />
+		<div class="totals-card__row">
+			<div class="totals-card__kcal">
+				<span class="totals-card__kcal-label">{{ t('common.kcalUnit') }}</span>
+				<strong class="totals-card__kcal-value">{{ totals.kcal }}</strong>
+			</div>
+			<div class="macro-badge-group macro-badge-group--right macro-badge-group--compact macro-badge-group--nowrap">
+				<MacroBadge macro="protein" :label="t('nutrition.short.protein')" :grams="totals.protein_g" />
+				<MacroBadge macro="carbs" :label="t('nutrition.short.carbs')" :grams="totals.carbs_g" />
+				<MacroBadge macro="fat" :label="t('nutrition.short.fat')" :grams="totals.fat_g" />
+				<MacroBadge macro="fiber" :label="t('nutrition.short.fiber')" :grams="totals.fiber_g" />
+			</div>
 		</div>
 	</section>
 </template>