diff --git a/app/medications/[medicationId].tsx b/app/medications/[medicationId].tsx
index 3e8d00a..92afc12 100644
--- a/app/medications/[medicationId].tsx
+++ b/app/medications/[medicationId].tsx
@@ -22,6 +22,7 @@ import Voice from '@react-native-voice/voice';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
@@ -571,8 +572,20 @@ export default function MedicationDetailScreen() {
 
   if (!medicationId) {
     return (
-      <View style={[styles.container, { backgroundColor: colors.pageBackgroundEmphasis }]}>
-        <HeaderBar title="药品详情" variant="minimal" />
+      <View style={styles.container}>
+        {/* 背景渐变 */}
+        <LinearGradient
+          colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']}
+          style={styles.gradientBackground}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}
+        />
+
+        {/* 装饰性圆圈 */}
+        <View style={styles.decorativeCircle1} />
+        <View style={styles.decorativeCircle2} />
+
+        <HeaderBar title="药品详情" variant="minimal" transparent />
         <View style={[styles.centered, { paddingTop: insets.top + 72, paddingHorizontal: 24 }]}>
           <ThemedText style={styles.emptyTitle}>未找到药品信息</ThemedText>
           <ThemedText style={styles.emptySubtitle}>请从用药列表重新进入此页面。</ThemedText>
@@ -585,7 +598,19 @@ export default function MedicationDetailScreen() {
   const contentBottomPadding = Math.max(insets.bottom, 16) + 140;
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.pageBackgroundEmphasis}]}>
+    <View style={styles.container}>
+      {/* 背景渐变 */}
+      <LinearGradient
+        colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']}
+        style={styles.gradientBackground}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      />
+
+      {/* 装饰性圆圈 */}
+      <View style={styles.decorativeCircle1} />
+      <View style={styles.decorativeCircle2} />
+
       <HeaderBar title="药品详情" variant="minimal" transparent />
       {isLoadingState ? (
         <View style={[styles.centered, { paddingTop: insets.top + 48 }]}>
@@ -1067,6 +1092,33 @@ const styles = StyleSheet.create({
     flex: 1,
     position: 'relative',
   },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  decorativeCircle1: {
+    position: 'absolute',
+    top: 40,
+    right: 20,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#0EA5E9',
+    opacity: 0.1,
+  },
+  decorativeCircle2: {
+    position: 'absolute',
+    bottom: -15,
+    left: -15,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#0EA5E9',
+    opacity: 0.05,
+  },
   content: {
     paddingHorizontal: 20,
     gap: 24,
diff --git a/app/medications/manage-medications.tsx b/app/medications/manage-medications.tsx
index f346db2..38b096f 100644
--- a/app/medications/manage-medications.tsx
+++ b/app/medications/manage-medications.tsx
@@ -14,7 +14,9 @@ import {
 import type { Medication, MedicationForm } from '@/types/medication';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
+import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useMemo, useState } from 'react';
 import {
@@ -199,7 +201,19 @@ export default function ManageMedicationsScreen() {
   );
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <View style={styles.container}>
+      {/* 背景渐变 */}
+      <LinearGradient
+        colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']}
+        style={styles.gradientBackground}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      />
+
+      {/* 装饰性圆圈 */}
+      <View style={styles.decorativeCircle1} />
+      <View style={styles.decorativeCircle2} />
+
       <HeaderBar
         title="药品管理"
         onBack={() => router.back()}
@@ -224,11 +238,23 @@ export default function ManageMedicationsScreen() {
             </ThemedText>
           </View>
           <TouchableOpacity
-            style={[styles.addButton, { backgroundColor: colors.primary }]}
             activeOpacity={0.85}
             onPress={() => router.push('/medications/add-medication')}
           >
-            <IconSymbol name="plus" size={20} color={colors.onPrimary} />
+            {isLiquidGlassAvailable() ? (
+              <GlassView
+                style={styles.addButton}
+                glassEffectStyle="clear"
+                tintColor="rgba(255, 255, 255, 0.3)"
+                isInteractive={true}
+              >
+                <IconSymbol name="plus" size={20} color="#333" />
+              </GlassView>
+            ) : (
+              <View style={[styles.addButton, styles.fallbackAddButton]}>
+                <IconSymbol name="plus" size={20} color="#333" />
+              </View>
+            )}
           </TouchableOpacity>
         </View>
 
@@ -301,6 +327,34 @@ export default function ManageMedicationsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    position: 'relative',
+  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  decorativeCircle1: {
+    position: 'absolute',
+    top: 40,
+    right: 20,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#0EA5E9',
+    opacity: 0.1,
+  },
+  decorativeCircle2: {
+    position: 'absolute',
+    bottom: -15,
+    left: -15,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#0EA5E9',
+    opacity: 0.05,
   },
   content: {
     paddingHorizontal: 20,
@@ -325,6 +379,12 @@ const styles = StyleSheet.create({
     borderRadius: 22,
     alignItems: 'center',
     justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  fallbackAddButton: {
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.3)',
   },
   segmented: {
     flexDirection: 'row',
diff --git a/components/ui/InfoCard.tsx b/components/ui/InfoCard.tsx
index aac2d6a..5695c90 100644
--- a/components/ui/InfoCard.tsx
+++ b/components/ui/InfoCard.tsx
@@ -1,6 +1,5 @@
 import type { Colors } from '@/constants/Colors';
 import { Ionicons } from '@expo/vector-icons';
-import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
@@ -11,9 +10,6 @@ export interface InfoCardProps {
   colors: (typeof Colors)[keyof typeof Colors];
   onPress?: () => void;
   clickable?: boolean;
-  glassEffectStyle?: 'clear' | 'regular';
-  tintColor?: string;
-  className?: string;
 }
 
 export const InfoCard: React.FC<InfoCardProps> = ({
@@ -23,26 +19,9 @@ export const InfoCard: React.FC<InfoCardProps> = ({
   colors,
   onPress,
   clickable = false,
-  glassEffectStyle = 'clear',
-  tintColor,
 }) => {
-  const isGlassAvailable = isLiquidGlassAvailable();
-
-  // 渲染图标按钮 - 只在可点击时应用 GlassView
+  // 渲染图标 - 始终使用普通 View
   const renderIcon = () => {
-    if (clickable && isGlassAvailable) {
-      return (
-        <GlassView
-          style={styles.infoCardIcon}
-          glassEffectStyle={glassEffectStyle}
-          tintColor={tintColor || 'rgba(76, 110, 245, 0.2)'}
-          isInteractive={true}
-        >
-          <Ionicons name={icon} size={16} color="#4C6EF5" />
-        </GlassView>
-      );
-    }
-    
     return (
       <View style={[
         styles.infoCardIcon,
@@ -53,25 +32,12 @@ export const InfoCard: React.FC<InfoCardProps> = ({
     );
   };
 
-  // 渲染箭头 - 只在可点击时显示并应用 GlassView
+  // 渲染箭头 - 只在可点击时显示
   const renderArrow = () => {
     if (!clickable) return null;
 
-    if (isGlassAvailable) {
-      return (
-        <GlassView
-          style={styles.infoCardArrow}
-          glassEffectStyle={glassEffectStyle}
-          tintColor={tintColor || 'rgba(255, 255, 255, 0.3)'}
-          isInteractive={true}
-        >
-          <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
-        </GlassView>
-      );
-    }
-
     return (
-      <View style={[styles.infoCardArrow, styles.arrowFallback]}>
+      <View style={styles.infoCardArrow}>
         <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
       </View>
     );
@@ -140,12 +106,6 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     alignItems: 'center',
     justifyContent: 'center',
-    overflow: 'hidden', // 保证玻璃边界圆角效果
-  },
-  arrowFallback: {
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
   },
   infoCardIcon: {
     width: 28,
@@ -154,7 +114,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#EEF1FF',
     alignItems: 'center',
     justifyContent: 'center',
-    overflow: 'hidden', // 保证玻璃边界圆角效果
   },
   clickableIconFallback: {
     borderWidth: 1,