diff --git a/lib/models/food_data.dart b/lib/models/food_data.dart
index 1c02ac7..4f046cf 100644
--- a/lib/models/food_data.dart
+++ b/lib/models/food_data.dart
@@ -62,10 +62,10 @@ class Aggregations {
 }
 
 class DataType {
-  int branded;
-  int surveyFndds;
-  int srLegacy;
-  int foundation;
+  int? branded;
+  int? surveyFndds;
+  int? srLegacy;
+  int? foundation;
 
   DataType({
     required this.branded,
diff --git a/lib/screens/food/details.dart b/lib/screens/food/details.dart
new file mode 100644
index 0000000..6def619
--- /dev/null
+++ b/lib/screens/food/details.dart
@@ -0,0 +1,45 @@
+import 'package:dietary_guard/models/food_data.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+class FoodDetailsScreen extends StatelessWidget {
+  final FoodData item;
+
+  const FoodDetailsScreen({super.key, required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(item.description),
+      ),
+      body: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text('nutrients'.tr).paddingOnly(left: 24, right: 24, bottom: 8),
+          Expanded(
+            child: ListView.builder(
+              itemCount: item.foodNutrients.length,
+              itemBuilder: (context, idx) {
+                final entry = item.foodNutrients[idx];
+                final unitName = unitNameValues.reverse[entry.unitName];
+                return ListTile(
+                  contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+                  title: Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      Text(entry.nutrientName),
+                      const SizedBox(width: 6),
+                      Badge(label: Text('#${entry.nutrientId}'))
+                    ],
+                  ),
+                  subtitle: Text('${entry.nutrientNumber} ${unitName}'),
+                );
+              },
+            ),
+          )
+        ],
+      ).paddingSymmetric(vertical: 24),
+    );
+  }
+}
diff --git a/lib/screens/query.dart b/lib/screens/query.dart
index b4389c3..2da575f 100644
--- a/lib/screens/query.dart
+++ b/lib/screens/query.dart
@@ -1,5 +1,7 @@
+import 'package:animations/animations.dart';
 import 'package:dietary_guard/controllers/food_data.dart';
 import 'package:dietary_guard/models/food_data.dart';
+import 'package:dietary_guard/screens/food/details.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:intl/intl.dart';
@@ -57,22 +59,31 @@ class _QueryScreenState extends State<QueryScreen> {
           ).paddingSymmetric(horizontal: 24),
           if (_isLoading)
             const SizedBox(
-              width: 20,
-              height: 20,
+              width: 28,
+              height: 28,
               child: CircularProgressIndicator(strokeWidth: 3),
-            ).paddingSymmetric(vertical: 16)
+            ).paddingSymmetric(vertical: 24)
           else
             Expanded(
               child: ListView.builder(
                 itemCount: _foodData.length,
                 itemBuilder: (context, index) {
                   final item = _foodData[index];
-                  return ListTile(
-                    contentPadding: const EdgeInsets.symmetric(horizontal: 24),
-                    title: Text(item.description),
-                    subtitle: Text(
-                      DateFormat("yyyy-MM-dd").format(item.publishedDate),
+                  return OpenContainer(
+                    closedBuilder: (_, open) => ListTile(
+                      contentPadding:
+                          const EdgeInsets.symmetric(horizontal: 24),
+                      title: Text(item.description),
+                      subtitle: Text(
+                        DateFormat("yyyy-MM-dd").format(item.publishedDate),
+                      ),
+                      onTap: () => open(),
                     ),
+                    openBuilder: (_, __) => FoodDetailsScreen(item: item),
+                    openElevation: 0,
+                    closedElevation: 0,
+                    closedColor: Colors.transparent,
+                    openColor: Colors.transparent,
                   );
                 },
               ).paddingOnly(top: 8),
diff --git a/lib/translations/en_us.dart b/lib/translations/en_us.dart
index 359d3d6..1814c75 100644
--- a/lib/translations/en_us.dart
+++ b/lib/translations/en_us.dart
@@ -5,4 +5,5 @@ const i18nEnglish = {
   'settingsApplied': 'Settings Applied',
   'apply': 'Apply',
   'searchHistoryNotIncluded': 'Search History not Included, yet',
+  'nutrients': 'Nutrients',
 };
diff --git a/lib/translations/zh_cn.dart b/lib/translations/zh_cn.dart
index a7c9fef..c3df39d 100644
--- a/lib/translations/zh_cn.dart
+++ b/lib/translations/zh_cn.dart
@@ -5,4 +5,5 @@ const i18nSimplifiedChinese = {
   'settingsApplied': '设置已应用',
   'apply': '应用',
   'searchHistoryNotIncluded': '搜索记录还没实现',
+  'nutrients': '营养物质',
 };
diff --git a/pubspec.lock b/pubspec.lock
index b903b39..f1861fd 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -1,6 +1,14 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  animations:
+    dependency: "direct main"
+    description:
+      name: animations
+      sha256: d3d6dcfb218225bbe68e87ccf6378bbb2e32a94900722c5f81611dad089911cb
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.11"
   async:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 1f0e183..fc3e524 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -41,6 +41,7 @@ dependencies:
   sqflite: ^2.3.3+1
   dio: ^5.6.0
   intl: ^0.19.0
+  animations: ^2.0.11
 
 dev_dependencies:
   flutter_test: