diff --git a/docs/STYLE_OPTIMIZATION.md b/docs/STYLE_OPTIMIZATION.md
new file mode 100644
index 0000000..75eefe5
--- /dev/null
+++ b/docs/STYLE_OPTIMIZATION.md
@@ -0,0 +1,99 @@
+# Styling Optimization & Atomic CSS Guide
+
+This document describes the CSS-in-JS style audit, NativeWind atomic CSS verification, and styling optimization results implemented for teachLink Mobile.
+
+## 1. Style Audit Overview
+
+Our audit of the teachLink Mobile codebase identified a hybrid styling architecture:
+- **Newer layouts and navigation components** utilized utility-first Tailwind classes via **NativeWind**.
+- **Core interactive widgets and form elements** heavily relied on traditional React Native `StyleSheet.create` declarations and inline style objects.
+
+### Performance Impact of Mixed Styles
+Traditional React Native `StyleSheet.create` rules are resolved dynamically at runtime and compiled into individual JavaScript style objects. Having dozens of components declaring near-identical properties (e.g., `flexDirection: 'row'`, `alignItems: 'center'`, padding, margins, colors) results in:
+1. **Bloated JS Bundle**: Repetitive JavaScript objects are duplicated throughout the compiled bundle.
+2. **Dynamic Style Overhead**: The React Native bridge must process and transfer duplicate style dictionaries at runtime.
+3. **Poorer Cache-ability**: Styles cannot be effectively cached as individual, atomic instructions.
+
+---
+
+## 2. NativeWind Atomic Styling Verification
+
+NativeWind v4 implements an **atomic CSS** compiler. It parses tailwind classes (e.g., `flex-row`, `items-center`, `bg-white`) inside JSX `className` properties at compile-time and maps them to a single, shared sheet of atomic React Native style definitions.
+
+### Advantages of the Atomic Approach
+- **De-duplication**: The style `items-center` is defined exactly once in the NativeWind global registry and shared by all components.
+- **Smaller Payload**: Instead of bundling massive stylesheet objects, components only bundle a string of class names (e.g., `"flex-row items-center px-4"`).
+- **Fast Application**: Resolving pre-cached atomic styles is significantly faster than parsing and applying large nested style dictionaries.
+
+---
+
+## 3. Style Refactoring Strategy
+
+We systematically refactored core components from `StyleSheet.create` to utility classes. We established a strict separation of concerns for styling:
+
+1. **Static Styles (Tailwind Classes)**: All layout, alignment, structure, flexbox, border widths, static background colors, and margins are defined via `className`.
+2. **Dynamic Styles (Inline style)**: Runtime values computed dynamically (e.g., layout values scaled with `useDynamicFontSize`, theme-dependent colors, animated translations/opacities) are kept as minimal inline `style` objects.
+
+### Example Refactoring (`AccessibleButton.tsx`)
+**Before (CSS-in-JS):**
+```tsx
+const AccessibleButton = ({ style, children }) => (
+  <TouchableOpacity style={[styles.base, style]}>
+    {children}
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  base: {
+    minWidth: 44,
+    minHeight: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+```
+
+**After (Atomic NativeWind):**
+```tsx
+const AccessibleButton = ({ className, style, children }) => (
+  <TouchableOpacity 
+    className={`min-touch-target justify-center items-center ${className || ''}`}
+    style={style}
+  >
+    {children}
+  </TouchableOpacity>
+);
+```
+
+---
+
+## 4. Optimization Metrics & Results
+
+To measure the impact, we analyzed the codebase before and after our refactoring using a style-auditing script.
+
+| Metric | Before Optimization | After Optimization | Change |
+| :--- | :---: | :---: | :---: |
+| **StyleSheet.create() Calls** | 54 | 47 | **-7 (-13.0%)** |
+| **Estimated CSS-in-JS Style Rules** | 3,769 | 3,488 | **-281 (-7.5%)** |
+| **NativeWind className Attributes** | 157 | 234 | **+77 (+49.0%)** |
+
+### Optimized Components
+The following heavy components were migrated completely away from local stylesheets:
+1. `AccessibleButton.tsx` (Touch target sizing, centering)
+2. `MobileFormInput.tsx` (Labels, icons, inputs, errors, focused/dark-mode colors)
+3. `PrimaryButton.tsx` (Sizes, solid/outline/gradient layouts, text weight)
+4. `PullToRefresh.tsx` (Containers, animated refresh indicators, accessibility fallbacks)
+5. `VoiceSearch.tsx` (Compact/full mic triggers, action buttons, transcript bars)
+6. `SearchResultCard.tsx` (List card layout, icon wraps, text sizing, metadata tags)
+7. `VideoControls.tsx` (Seek bars, progress overlays, control bars, playback speed menus)
+
+---
+
+## 5. Developer Best Practices
+
+To maintain styling consistency and performance, developers should adhere to the following guidelines:
+
+- **Prefer Tailwind Classes**: Always check if a design style can be represented by a Tailwind utility class before resorting to a stylesheet or inline style.
+- **Support `className` in Shared Wrappers**: When writing reusable wrappers or atomic components, expose a `className` prop to allow consumers to pass custom utility classes.
+- **Isolate Dynamic Styles**: Keep inline style values strictly limited to dynamic runtime parameters (e.g., animation outputs, scaled fonts, colors loaded from backend).
+- **Consult Design Tokens**: Refer to `tailwind.config.js` for custom color palettes, font weights, and spacing scales.
diff --git a/scripts/measure_styles.js b/scripts/measure_styles.js
new file mode 100644
index 0000000..5489d62
--- /dev/null
+++ b/scripts/measure_styles.js
@@ -0,0 +1,72 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcDir = path.join(__dirname, '..', 'src');
+const appDir = path.join(__dirname, '..', 'app');
+
+function walkDir(dir, filter) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+  list.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(walkDir(filePath, filter));
+    } else if (filter(filePath)) {
+      results.push(filePath);
+    }
+  });
+  return results;
+}
+
+const files = [
+  ...walkDir(srcDir, f => /\.(tsx|ts|jsx|js)$/.test(f)),
+  ...walkDir(appDir, f => /\.(tsx|ts|jsx|js)$/.test(f))
+];
+
+let totalStyleSheetCalls = 0;
+let totalStyleRules = 0;
+let totalClassNames = 0;
+let stylesheetDetails = [];
+
+files.forEach(file => {
+  const content = fs.readFileSync(file, 'utf8');
+  const relPath = path.relative(path.join(__dirname, '..'), file);
+
+  // Match StyleSheet.create(...)
+  if (content.includes('StyleSheet.create')) {
+    totalStyleSheetCalls++;
+    // Simple estimation of number of rules inside StyleSheet.create
+    const ssMatch = content.match(/StyleSheet\.create\(\s*\{([\s\S]*?)\}\s*\)/g);
+    if (ssMatch) {
+      ssMatch.forEach(match => {
+        // Count top-level properties inside the object
+        const innerContent = match.replace(/StyleSheet\.create\(\s*\{/, '').replace(/\}\s*\)/, '');
+        // Match properties like name: { ... } or "name": { ... }
+        // We can approximate by counting blocks of braces or keys
+        const keys = innerContent.match(/^\s*[\w"']+\s*:/gm) || [];
+        totalStyleRules += keys.length;
+        stylesheetDetails.push({ file: relPath, rules: keys.length });
+      });
+    }
+  }
+
+  // Match className="..." or className={`...`}
+  const classNameMatches = content.match(/className\s*=\s*(?:['"]([^'"]+)['"]|\{[\s\S]*?\})/g) || [];
+  totalClassNames += classNameMatches.length;
+});
+
+console.log('\n📊  STYLING AUDIT REPORT  📊');
+console.log('============================');
+console.log(`Total Files Audited: ${files.length}`);
+console.log(`StyleSheet.create() Calls: ${totalStyleSheetCalls}`);
+console.log(`Estimated CSS-in-JS Style Rules: ${totalStyleRules}`);
+console.log(`NativeWind className Attributes: ${totalClassNames}`);
+console.log('\nTop CSS-in-JS Stylesheets (by number of rules):');
+stylesheetDetails
+  .sort((a, b) => b.rules - a.rules)
+  .slice(0, 15)
+  .forEach(item => {
+    console.log(`- ${item.file}: ${item.rules} rules`);
+  });
+console.log('============================\n');
diff --git a/src/components/common/PrimaryButton.tsx b/src/components/common/PrimaryButton.tsx
index 297d2d5..b9450a4 100644
--- a/src/components/common/PrimaryButton.tsx
+++ b/src/components/common/PrimaryButton.tsx
@@ -6,7 +6,6 @@ import {
   View,
   ViewStyle,
   TextStyle,
-  StyleSheet,
 } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useDynamicFontSize } from '../../hooks';
@@ -93,15 +92,12 @@ export default function PrimaryButton({
           colors={['#20afe7', '#2c8aec', '#586ce9']}
           start={{ x: 0, y: 0 }}
           end={{ x: 1, y: 0 }}
-          style={[
-            styles.button,
-            styles.gradientButton,
-            {
-              paddingHorizontal: config.paddingHorizontal,
-              paddingVertical: config.paddingVertical,
-              borderRadius: config.borderRadius,
-            },
-          ]}
+          className="flex-row items-center justify-center gap-2 shadow-sm shadow-[#20afe7]/30 elevation-4"
+          style={{
+            paddingHorizontal: config.paddingHorizontal,
+            paddingVertical: config.paddingVertical,
+            borderRadius: config.borderRadius,
+          }}
         >
           {loading ? (
             <ActivityIndicator color="white" size="small" />
@@ -110,8 +106,8 @@ export default function PrimaryButton({
               {icon}
               <Text
                 allowFontScaling={false}
+                className="font-semibold"
                 style={[
-                  styles.buttonText,
                   { fontSize: config.fontSize, color: '#ffffff' },
                   textStyle,
                 ]}
@@ -135,8 +131,8 @@ export default function PrimaryButton({
         accessibilityLabel={buttonLabel}
         accessibilityHint={accessibilityHint}
         accessibilityState={{ disabled: isDisabled, busy: loading }}
+        className="flex-row items-center justify-center gap-2"
         style={[
-          styles.button,
           {
             backgroundColor: '#19c3e6',
             paddingHorizontal: config.paddingHorizontal,
@@ -154,8 +150,8 @@ export default function PrimaryButton({
             {icon}
             <Text
               allowFontScaling={false}
+              className="font-semibold"
               style={[
-                styles.buttonText,
                 { fontSize: config.fontSize, color: '#ffffff' },
                 textStyle,
               ]}
@@ -178,8 +174,8 @@ export default function PrimaryButton({
       accessibilityLabel={buttonLabel}
       accessibilityHint={accessibilityHint}
       accessibilityState={{ disabled: isDisabled, busy: loading }}
+      className="flex-row items-center justify-center gap-2"
       style={[
-        styles.button,
         {
           borderWidth: 2,
           borderColor: '#19c3e6',
@@ -199,7 +195,11 @@ export default function PrimaryButton({
           {icon}
           <Text
             allowFontScaling={false}
-            style={[styles.buttonText, { fontSize: config.fontSize, color: '#19c3e6' }, textStyle]}
+            className="font-semibold"
+            style={[
+              { fontSize: config.fontSize, color: '#19c3e6' },
+              textStyle,
+            ]}
           >
             {title}
           </Text>
@@ -209,21 +209,3 @@ export default function PrimaryButton({
   );
 }
 
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 8,
-  },
-  gradientButton: {
-    shadowColor: '#20afe7',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 4,
-  },
-  buttonText: {
-    fontWeight: '600',
-  },
-});
diff --git a/src/components/mobile/AccessibleButton.tsx b/src/components/mobile/AccessibleButton.tsx
index c113908..21df836 100644
--- a/src/components/mobile/AccessibleButton.tsx
+++ b/src/components/mobile/AccessibleButton.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import {
   TouchableOpacity,
   TouchableOpacityProps,
-  StyleSheet,
-  ViewStyle,
   StyleProp,
+  ViewStyle,
 } from 'react-native';
 import { getAccessibilityProps } from '../../utils/accessibility';
 
@@ -20,6 +19,8 @@ interface AccessibleButtonProps extends TouchableOpacityProps {
   role?: 'button' | 'link';
   /** Optional custom styles for the button container */
   containerStyle?: StyleProp<ViewStyle>;
+  /** Optional NativeWind className */
+  className?: string;
 }
 
 /**
@@ -35,6 +36,7 @@ export const AccessibleButton: React.FC<AccessibleButtonProps> = ({
   containerStyle,
   disabled,
   activeOpacity = 0.7,
+  className,
   ...rest
 }: AccessibleButtonProps) => {
   const accessibilityProps = getAccessibilityProps(label, role as 'button' | 'link', hint, {
@@ -47,18 +49,11 @@ export const AccessibleButton: React.FC<AccessibleButtonProps> = ({
       {...accessibilityProps}
       disabled={disabled}
       activeOpacity={activeOpacity}
-      style={[styles.base, containerStyle, style]}
+      className={`min-touch-target justify-center items-center ${className || ''}`}
+      style={[containerStyle, style]}
     >
       {children}
     </TouchableOpacity>
   );
 };
 
-const styles = StyleSheet.create({
-  base: {
-    minWidth: 44,
-    minHeight: 44,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
diff --git a/src/components/mobile/MobileFormInput.tsx b/src/components/mobile/MobileFormInput.tsx
index e34cfb5..d33a8ec 100644
--- a/src/components/mobile/MobileFormInput.tsx
+++ b/src/components/mobile/MobileFormInput.tsx
@@ -1,6 +1,6 @@
 import { Eye, EyeOff, AlertCircle } from 'lucide-react-native';
 import React, { useCallback, useEffect, useState } from 'react';
-import { View, TextInput, TextInputProps, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, TextInput, TextInputProps, TouchableOpacity } from 'react-native';
 
 import { useDynamicFontSize } from '../../hooks';
 import {
@@ -105,44 +105,46 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
   const labelColor = error ? '#ef4444' : isDark ? '#94a3b8' : '#64748b';
 
   return (
-    <View style={styles.container}>
-      <View style={styles.labelRow}>
-        <Text style={[styles.label, { color: labelColor, fontSize: scale(14) }]}>
+    <View className="mb-4 w-full">
+      <View className="flex-row justify-between items-center mb-1.5">
+        <Text
+          className="font-semibold tracking-[0.1px]"
+          style={{ color: labelColor, fontSize: scale(14) }}
+        >
           {label}
-          {required && <Text style={[styles.required, { fontSize: scale(14) }]}> *</Text>}
+          {required && (
+            <Text className="text-red-500" style={{ fontSize: scale(14) }}>
+              {' '}
+              *
+            </Text>
+          )}
         </Text>
         {hint && !error && (
-          <Text
-            style={[styles.hint, { color: isDark ? '#475569' : '#94a3b8', fontSize: scale(12) }]}
-          >
+          <Text style={{ color: isDark ? '#475569' : '#94a3b8', fontSize: scale(12) }}>
             {hint}
           </Text>
         )}
       </View>
 
       <View
-        style={[
-          styles.inputWrapper,
-          {
-            borderColor,
-            backgroundColor: isDark ? '#1e293b' : '#fff',
-            minHeight: multiline ? scale(100) : scale(52),
-          },
-        ]}
+        className="flex-row items-center border-[1.5px] rounded-xl overflow-hidden"
+        style={{
+          borderColor,
+          backgroundColor: isDark ? '#1e293b' : '#fff',
+          minHeight: multiline ? scale(100) : scale(52),
+        }}
       >
-        {leftIcon && <View style={styles.leftIconWrapper}>{leftIcon}</View>}
+        {leftIcon && <View className="px-3.5 justify-center items-center">{leftIcon}</View>}
 
         <TextInput
-          style={[
-            styles.input,
-            {
-              color: isDark ? '#f1f5f9' : '#1e293b',
-              paddingLeft: leftIcon ? 0 : scale(16),
-              textAlignVertical: multiline ? 'top' : 'center',
-              paddingTop: multiline ? scale(14) : 0,
-              fontSize: scale(15),
-            },
-          ]}
+          className="flex-1 py-3.5 pr-4"
+          style={{
+            color: isDark ? '#f1f5f9' : '#1e293b',
+            paddingLeft: leftIcon ? 0 : scale(16),
+            textAlignVertical: multiline ? 'top' : 'center',
+            paddingTop: multiline ? scale(14) : 0,
+            fontSize: scale(15),
+          }}
           placeholder={placeholder}
           placeholderTextColor={isDark ? '#475569' : '#94a3b8'}
           value={value}
@@ -157,7 +159,7 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
         />
 
         {isPassword && (
-          <TouchableOpacity onPress={handleTogglePassword} style={styles.rightIcon}>
+          <TouchableOpacity onPress={handleTogglePassword} className="px-3.5">
             {showPassword ? (
               <EyeOff size={scale(20)} color={isDark ? '#64748b' : '#94a3b8'} />
             ) : (
@@ -169,30 +171,24 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
 
       {suggestion && !error && (
         <TouchableOpacity
-          style={[
-            styles.suggestionRow,
-            {
-              backgroundColor: isDark ? '#0f172a' : '#f0f9ff',
-              borderColor: isDark ? '#334155' : '#bae6fd',
-            },
-          ]}
+          className="flex-row items-center gap-1.5 mt-1.5 px-3 py-2 rounded-xl border"
+          style={{
+            backgroundColor: isDark ? '#0f172a' : '#f0f9ff',
+            borderColor: isDark ? '#334155' : '#bae6fd',
+          }}
           onPress={handleApplySuggestion}
           accessibilityRole="button"
           accessibilityLabel={`Use cached value ${suggestion}`}
         >
           <Text
-            style={[
-              styles.suggestionLabel,
-              { color: isDark ? '#94a3b8' : '#64748b', fontSize: scale(12) },
-            ]}
+            className="font-medium"
+            style={{ color: isDark ? '#94a3b8' : '#64748b', fontSize: scale(12) }}
           >
             Use saved:
           </Text>
           <Text
-            style={[
-              styles.suggestionValue,
-              { color: isDark ? '#38bdf8' : '#0284c7', fontSize: scale(12) },
-            ]}
+            className="flex-1 font-semibold"
+            style={{ color: isDark ? '#38bdf8' : '#0284c7', fontSize: scale(12) }}
             numberOfLines={1}
           >
             {suggestion}
@@ -201,86 +197,14 @@ export const MobileFormInput: React.FC<MobileFormInputProps> = ({
       )}
 
       {error && (
-        <View style={styles.errorRow}>
+        <View className="flex-row items-center gap-1 mt-1">
           <AlertCircle size={scale(14)} color="#ef4444" />
-          <Text style={[styles.errorText, { fontSize: scale(12) }]}>{error}</Text>
+          <Text className="text-red-500 flex-1" style={{ fontSize: scale(12) }}>
+            {error}
+          </Text>
         </View>
       )}
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 16,
-    width: '100%',
-  },
-  labelRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 6,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '600',
-    letterSpacing: 0.1,
-  },
-  required: {
-    color: '#ef4444',
-  },
-  hint: {
-    fontSize: 12,
-  },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1.5,
-    borderRadius: 12,
-    overflow: 'hidden',
-  },
-  leftIconWrapper: {
-    paddingHorizontal: 14,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  input: {
-    flex: 1,
-    fontSize: 15,
-    paddingVertical: 14,
-    paddingRight: 16,
-  },
-  rightIcon: {
-    paddingHorizontal: 14,
-  },
-  errorRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    marginTop: 4,
-  },
-  errorText: {
-    fontSize: 12,
-    color: '#ef4444',
-    flex: 1,
-  },
-  suggestionRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    marginTop: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 10,
-    borderWidth: 1,
-  },
-  suggestionLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-  },
-  suggestionValue: {
-    flex: 1,
-    fontSize: 12,
-    fontWeight: '600',
-  },
-});
diff --git a/src/components/mobile/PullToRefresh.tsx b/src/components/mobile/PullToRefresh.tsx
index 0cf9469..8acb0f3 100644
--- a/src/components/mobile/PullToRefresh.tsx
+++ b/src/components/mobile/PullToRefresh.tsx
@@ -6,7 +6,6 @@ import {
   Easing,
   Pressable,
   StyleProp,
-  StyleSheet,
   View,
   ViewStyle,
 } from 'react-native';
@@ -211,9 +210,9 @@ export function PullToRefresh(props: PullToRefreshProps) {
   });
 
   return (
-    <View style={[styles.container, style]} {...responderHandlers}>
+    <View className="flex-1 overflow-hidden" style={style} {...responderHandlers}>
       {showA11yFallbackButton && screenReaderEnabled ? (
-        <View style={styles.a11yRow}>
+        <View className="px-3 pt-2 pb-1">
           <Pressable
             accessibilityRole="button"
             accessibilityLabel={refreshA11yLabel}
@@ -221,17 +220,17 @@ export function PullToRefresh(props: PullToRefreshProps) {
               if (refreshing) return;
               void runRefresh();
             }}
-            style={styles.a11yButton}
+            className="self-start px-3 py-2 rounded-xl bg-gray-200"
           >
-            <Animated.Text style={styles.a11yButtonText}>Refresh</Animated.Text>
+            <Animated.Text className="text-sm font-semibold text-gray-900">Refresh</Animated.Text>
           </Pressable>
         </View>
       ) : null}
 
       <Animated.View
         pointerEvents="none"
+        className="absolute -top-11 left-0 right-0 h-11 items-center justify-center"
         style={[
-          styles.indicator,
           indicatorStyle,
           {
             transform: [{ translateY: pullY }],
@@ -257,36 +256,3 @@ export function PullToRefresh(props: PullToRefreshProps) {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    overflow: 'hidden',
-  },
-  indicator: {
-    position: 'absolute',
-    top: -44,
-    left: 0,
-    right: 0,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  a11yRow: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 4,
-  },
-  a11yButton: {
-    alignSelf: 'flex-start',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 10,
-    backgroundColor: '#e5e7eb',
-  },
-  a11yButtonText: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#111827',
-  },
-});
diff --git a/src/components/mobile/SearchResultCard.tsx b/src/components/mobile/SearchResultCard.tsx
index 829f200..1348ce2 100644
--- a/src/components/mobile/SearchResultCard.tsx
+++ b/src/components/mobile/SearchResultCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 import { BookOpen, Clock } from 'lucide-react-native';
 
 export interface SearchResultItem {
@@ -31,31 +31,31 @@ export const SearchResultCard = React.memo(function SearchResultCard({
 
   return (
     <TouchableOpacity
-      style={styles.card}
+      className="flex-row items-start bg-white rounded-xl p-3.5 mx-4 mb-2.5 border border-gray-200 shadow-sm shadow-black/5 elevation-1"
       onPress={onPress}
       activeOpacity={0.7}
       accessibilityRole="button"
       accessibilityLabel={screenReaderDescription}
       accessibilityHint="Opens course details"
     >
-      <View style={styles.iconWrap}>
+      <View className="w-11 h-11 rounded-lg bg-sky-100 items-center justify-center mr-3">
         <BookOpen size={24} color="#19c3e6" />
       </View>
-      <View style={styles.body}>
-        <Text style={styles.title} numberOfLines={2}>
+      <View className="flex-1 min-w-0">
+        <Text className="text-base font-semibold text-gray-900 mb-1" numberOfLines={2}>
           {item.title}
         </Text>
         {(item.description || item.subtitle) && (
-          <Text style={styles.description} numberOfLines={2}>
+          <Text className="text-[13px] text-gray-500 leading-[18px] mb-1.5" numberOfLines={2}>
             {item.description || item.subtitle}
           </Text>
         )}
-        <View style={styles.metaRow}>
-          {metaText ? <Text style={styles.meta}>{metaText}</Text> : null}
+        <View className="flex-row items-center flex-wrap gap-2">
+          {metaText ? <Text className="text-xs text-gray-500 font-medium">{metaText}</Text> : null}
           {item.duration != null && item.duration > 0 && (
-            <View style={styles.durationWrap}>
+            <View className="flex-row items-center gap-1">
               <Clock size={12} color="#6B7280" />
-              <Text style={styles.duration}>{item.duration} min</Text>
+              <Text className="text-xs text-gray-500">{item.duration} min</Text>
             </View>
           )}
         </View>
@@ -72,66 +72,3 @@ export const SearchResultCard = React.memo(function SearchResultCard({
     && prev.item.level === next.item.level;
 });
 
-const styles = StyleSheet.create({
-  card: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 14,
-    marginHorizontal: 16,
-    marginBottom: 10,
-    borderWidth: 1,
-    borderColor: '#E5E7EB',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  iconWrap: {
-    width: 44,
-    height: 44,
-    borderRadius: 10,
-    backgroundColor: '#E0F2FE',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-  },
-  body: {
-    flex: 1,
-    minWidth: 0,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-    marginBottom: 4,
-  },
-  description: {
-    fontSize: 13,
-    color: '#6B7280',
-    lineHeight: 18,
-    marginBottom: 6,
-  },
-  metaRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    gap: 8,
-  },
-  meta: {
-    fontSize: 12,
-    color: '#6B7280',
-    fontWeight: '500',
-  },
-  durationWrap: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-  },
-  duration: {
-    fontSize: 12,
-    color: '#6B7280',
-  },
-});
diff --git a/src/components/mobile/VideoControls.tsx b/src/components/mobile/VideoControls.tsx
index 577fecc..5dc2953 100644
--- a/src/components/mobile/VideoControls.tsx
+++ b/src/components/mobile/VideoControls.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Animated, Pressable, Text, View } from 'react-native';
 import type { QualityOption } from '../../services/videoQuality';
 
 type VideoControlsProps = {
@@ -156,55 +156,59 @@ const VideoControls = ({
   }, [onSelectQuality]);
 
   return (
-    <Animated.View pointerEvents={visible ? 'auto' : 'none'} style={[styles.overlay, { opacity }]}>
-      <View style={styles.topRow}>
-        <View style={styles.topSpacer} />
+    <Animated.View
+      pointerEvents={visible ? 'auto' : 'none'}
+      className="absolute inset-0 justify-between bg-black/35"
+      style={{ opacity }}
+    >
+      <View className="flex-row items-center px-3 pt-2.5">
+        <View className="flex-1" />
         {isPiPSupported ? (
           <Pressable
             accessibilityLabel={
               isPiPActive ? 'Exit picture in picture' : 'Enter picture in picture'
             }
             onPress={onTogglePiP}
-            style={styles.controlButton}
+            className="px-2.5 py-1.5"
           >
-            <Text style={styles.controlText}>{isPiPActive ? 'PiP On' : 'PiP'}</Text>
+            <Text className="text-white text-xs font-semibold">{isPiPActive ? 'PiP On' : 'PiP'}</Text>
           </Pressable>
         ) : null}
         <Pressable
           accessibilityLabel={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
           onPress={onToggleFullscreen}
-          style={styles.controlButton}
+          className="px-2.5 py-1.5"
         >
-          <Text style={styles.controlText}>{isFullscreen ? 'Exit' : 'Full'}</Text>
+          <Text className="text-white text-xs font-semibold">{isFullscreen ? 'Exit' : 'Full'}</Text>
         </Pressable>
       </View>
 
-      <View style={styles.centerRow}>
+      <View className="items-center justify-center">
         <Pressable
           accessibilityLabel={isPlaying ? 'Pause' : 'Play'}
           onPress={onPlayPause}
-          style={styles.playButton}
+          className="bg-black/55 px-4.5 py-2.5 rounded-full"
         >
-          <Text style={styles.playText}>{isPlaying ? 'Pause' : 'Play'}</Text>
+          <Text className="text-white text-base font-semibold">{isPlaying ? 'Pause' : 'Play'}</Text>
         </Pressable>
       </View>
 
-      <View style={styles.bottomRow}>
+      <View className="px-3 pb-3">
         {previewPositionMillis != null ? (
-          <View style={styles.previewBubble}>
-            <Text style={styles.previewText}>
+          <View className="self-center bg-black/65 px-2.5 py-1 rounded-xl mb-2">
+            <Text className="text-white text-xs">
               {formatTime(displayPosition)} / {formatTime(durationMillis)}
             </Text>
           </View>
         ) : null}
 
-        <View style={styles.timeRow}>
-          <Text style={styles.timeText}>{formatTime(displayPosition)}</Text>
-          <Text style={styles.timeText}>{formatTime(durationMillis)}</Text>
+        <View className="flex-row justify-between mb-1.5">
+          <Text className="text-[#f1f1f1] text-xs">{formatTime(displayPosition)}</Text>
+          <Text className="text-[#f1f1f1] text-xs">{formatTime(durationMillis)}</Text>
         </View>
 
         <View
-          style={styles.seekBar}
+          className="h-5.5 rounded-lg bg-white/15 justify-center mb-2.5 overflow-hidden"
           onLayout={handleSeekBarLayout}
           onStartShouldSetResponder={() => true}
           onResponderGrant={handleSeekGrant}
@@ -212,25 +216,33 @@ const VideoControls = ({
           onResponderRelease={handleSeekRelease}
           onResponderTerminate={handleSeekTerminate}
         >
-          <View style={[styles.seekBuffered, { width: bufferedWidth }]} />
-          <View style={[styles.seekProgress, { width: progressWidth }]} />
-          <View style={[styles.seekThumb, { left: thumbLeft }]} />
+          <View className="absolute left-0 top-0 bottom-0 bg-white/30" style={{ width: bufferedWidth }} />
+          <View className="absolute left-0 top-0 bottom-0 bg-white" style={{ width: progressWidth }} />
+          <View
+            className="absolute bg-white"
+            style={{
+              left: thumbLeft,
+              width: SEEK_THUMB_SIZE,
+              height: SEEK_THUMB_SIZE,
+              borderRadius: SEEK_THUMB_SIZE / 2,
+            }}
+          />
         </View>
 
-        <View style={styles.controlsRow}>
+        <View className="flex-row items-center justify-between">
           <Pressable
             accessibilityLabel="Playback speed"
             onPress={handleToggleSpeedMenu}
-            style={styles.controlButton}
+            className="px-2.5 py-1.5"
           >
-            <Text style={styles.controlText}>{formatRate(playbackRate)}</Text>
+            <Text className="text-white text-xs font-semibold">{formatRate(playbackRate)}</Text>
           </Pressable>
           <Pressable
             accessibilityLabel="Quality"
             onPress={handleToggleQualityMenu}
-            style={styles.controlButton}
+            className="px-2.5 py-1.5"
           >
-            <Text style={styles.controlText}>{qualityLabel}</Text>
+            <Text className="text-white text-xs font-semibold">{qualityLabel}</Text>
           </Pressable>
           {isPiPSupported ? (
             <Pressable
@@ -238,36 +250,35 @@ const VideoControls = ({
                 isPiPActive ? 'Exit picture in picture' : 'Enter picture in picture'
               }
               onPress={onTogglePiP}
-              style={styles.controlButton}
+              className="px-2.5 py-1.5"
             >
-              <Text style={styles.controlText}>{isPiPActive ? 'PiP On' : 'PiP'}</Text>
+              <Text className="text-white text-xs font-semibold">{isPiPActive ? 'PiP On' : 'PiP'}</Text>
             </Pressable>
           ) : null}
           <Pressable
             accessibilityLabel={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
             onPress={onToggleFullscreen}
-            style={styles.controlButton}
+            className="px-2.5 py-1.5"
           >
-            <Text style={styles.controlText}>{isFullscreen ? 'Exit' : 'Full'}</Text>
+            <Text className="text-white text-xs font-semibold">{isFullscreen ? 'Exit' : 'Full'}</Text>
           </Pressable>
         </View>
 
         {(isSpeedMenuOpen || isQualityMenuOpen) && (
-          <View style={styles.menuBackdrop}>
+          <View className="mt-2">
             {isSpeedMenuOpen ? (
-              <View style={styles.menu}>
+              <View className="bg-black/85 rounded-lg py-1.5">
                 {rateOptions.map(rate => (
                   <Pressable
                     key={rate}
                     accessibilityLabel={`Set playback speed ${formatRate(rate)}`}
                     onPress={() => handleSelectRate(rate)}
-                    style={styles.menuItem}
+                    className="px-3 py-2"
                   >
                     <Text
-                      style={[
-                        styles.menuText,
-                        rate === playbackRate ? styles.menuTextActive : null,
-                      ]}
+                      className={`text-[#dcdcdc] text-[13px] ${
+                        rate === playbackRate ? 'text-white font-bold' : ''
+                      }`}
                     >
                       {formatRate(rate)}
                     </Text>
@@ -277,19 +288,18 @@ const VideoControls = ({
             ) : null}
 
             {isQualityMenuOpen ? (
-              <View style={styles.menu}>
+              <View className="bg-black/85 rounded-lg py-1.5">
                 {qualityOptions.map(option => (
                   <Pressable
                     key={option.id}
                     accessibilityLabel={`Set quality ${option.label}`}
                     onPress={() => handleSelectQualityOption(option.id)}
-                    style={styles.menuItem}
+                    className="px-3 py-2"
                   >
                     <Text
-                      style={[
-                        styles.menuText,
-                        option.id === selectedQualityId ? styles.menuTextActive : null,
-                      ]}
+                      className={`text-[#dcdcdc] text-[13px] ${
+                        option.id === selectedQualityId ? 'text-white font-bold' : ''
+                      }`}
                     >
                       {option.label}
                     </Text>
@@ -301,8 +311,8 @@ const VideoControls = ({
         )}
 
         {(isLoading || isBuffering || isSwitchingQuality) && (
-          <View style={styles.statusRow}>
-            <Text style={styles.statusText}>
+          <View className="mt-1.5">
+            <Text className="text-white text-[11px]">
               {isSwitchingQuality ? 'Switching quality' : isBuffering ? 'Buffering' : 'Loading'}
             </Text>
           </View>
@@ -338,131 +348,5 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
 }
 
-const styles = StyleSheet.create({
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'space-between',
-    backgroundColor: 'rgba(0, 0, 0, 0.35)',
-  },
-  topRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingTop: 10,
-  },
-  topSpacer: {
-    flex: 1,
-  },
-  centerRow: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  bottomRow: {
-    paddingHorizontal: 12,
-    paddingBottom: 12,
-  },
-  playButton: {
-    backgroundColor: 'rgba(0, 0, 0, 0.55)',
-    paddingHorizontal: 18,
-    paddingVertical: 10,
-    borderRadius: 22,
-  },
-  playText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  timeRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 6,
-  },
-  timeText: {
-    color: '#f1f1f1',
-    fontSize: 12,
-  },
-  seekBar: {
-    height: 22,
-    borderRadius: 10,
-    backgroundColor: 'rgba(255, 255, 255, 0.15)',
-    justifyContent: 'center',
-    marginBottom: 10,
-    overflow: 'hidden',
-  },
-  seekBuffered: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(255, 255, 255, 0.3)',
-  },
-  seekProgress: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: '#fff',
-  },
-  seekThumb: {
-    position: 'absolute',
-    width: SEEK_THUMB_SIZE,
-    height: SEEK_THUMB_SIZE,
-    borderRadius: SEEK_THUMB_SIZE / 2,
-    backgroundColor: '#fff',
-  },
-  controlsRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  controlButton: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-  },
-  controlText: {
-    color: '#fff',
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  menuBackdrop: {
-    marginTop: 8,
-  },
-  menu: {
-    backgroundColor: 'rgba(0, 0, 0, 0.85)',
-    borderRadius: 8,
-    paddingVertical: 6,
-  },
-  menuItem: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  menuText: {
-    color: '#dcdcdc',
-    fontSize: 13,
-  },
-  menuTextActive: {
-    color: '#fff',
-    fontWeight: '700',
-  },
-  previewBubble: {
-    alignSelf: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.65)',
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 12,
-    marginBottom: 8,
-  },
-  previewText: {
-    color: '#fff',
-    fontSize: 12,
-  },
-  statusRow: {
-    marginTop: 6,
-  },
-  statusText: {
-    color: '#fff',
-    fontSize: 11,
-  },
-});
-
 export default VideoControls;
+
diff --git a/src/components/mobile/VoiceSearch.tsx b/src/components/mobile/VoiceSearch.tsx
index af5ff0f..8d51206 100644
--- a/src/components/mobile/VoiceSearch.tsx
+++ b/src/components/mobile/VoiceSearch.tsx
@@ -1,6 +1,6 @@
 import { Mic, Square } from 'lucide-react-native';
 import React, { useEffect } from 'react';
-import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
 
 import * as hooks from '../../hooks';
 
@@ -74,7 +74,7 @@ export const VoiceSearch = ({
       <TouchableOpacity
         onPress={handlePress}
         disabled={disabled}
-        style={[styles.micBtn, disabled && styles.buttonDisabled]}
+        className={`p-2.5 justify-center items-center ${disabled ? 'opacity-50' : ''}`}
         accessibilityLabel={isListening ? 'Stop voice search' : 'Start voice search'}
         activeOpacity={0.8}
       >
@@ -88,38 +88,42 @@ export const VoiceSearch = ({
   }
 
   return (
-    <View style={styles.wrapper}>
+    <View className="items-center">
       {error ? (
-        <Text style={styles.error} numberOfLines={2}>
+        <Text className="text-[11px] text-red-500 mb-1 text-center max-w-[140px]" numberOfLines={2}>
           {error}
         </Text>
       ) : null}
       <TouchableOpacity
         onPress={handlePress}
         disabled={disabled}
-        style={[
-          styles.button,
-          isListening && styles.buttonActive,
-          disabled && styles.buttonDisabled,
-        ]}
+        className={`flex-row items-center justify-center gap-1.5 py-2.5 px-4 rounded-xl min-w-[88px] ${
+          isListening ? 'bg-[#19c3e6]' : 'bg-gray-100'
+        } ${disabled ? 'opacity-50' : ''}`}
         activeOpacity={0.8}
       >
         {isListening ? (
           <>
             <Square size={20} color="#fff" fill="#fff" />
-            <Text style={styles.buttonLabel}>Stop</Text>
+            <Text className="text-sm font-semibold text-white">Stop</Text>
           </>
         ) : (
           <>
             <Mic size={22} color={isAvailable ? '#19c3e6' : '#9CA3AF'} />
-            <Text style={[styles.buttonLabel, !isAvailable && styles.buttonLabelMuted]}>Voice</Text>
+            <Text
+              className={`text-sm font-semibold ${
+                isAvailable ? 'text-gray-900' : 'text-gray-400'
+              }`}
+            >
+              Voice
+            </Text>
           </>
         )}
       </TouchableOpacity>
       {isListening && (
-        <View style={styles.listeningBar}>
+        <View className="flex-row items-center gap-2 mt-2 px-3 py-1.5 bg-sky-100 rounded-lg max-w-full">
           <ActivityIndicator size="small" color="#19c3e6" />
-          <Text style={styles.listeningText} numberOfLines={1}>
+          <Text className="text-[13px] text-sky-700 flex-1" numberOfLines={1}>
             {transcript || 'Listening...'}
           </Text>
         </View>
@@ -128,61 +132,3 @@ export const VoiceSearch = ({
   );
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    alignItems: 'center',
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 6,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    borderRadius: 12,
-    backgroundColor: '#F3F4F6',
-    minWidth: 88,
-  },
-  buttonActive: {
-    backgroundColor: '#19c3e6',
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-  },
-  buttonLabel: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#111827',
-  },
-  buttonLabelMuted: {
-    color: '#9CA3AF',
-  },
-  error: {
-    fontSize: 11,
-    color: '#EF4444',
-    marginBottom: 4,
-    textAlign: 'center',
-    maxWidth: 140,
-  },
-  listeningBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    marginTop: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    backgroundColor: '#E0F2FE',
-    borderRadius: 8,
-    maxWidth: '100%',
-  },
-  listeningText: {
-    fontSize: 13,
-    color: '#0369A1',
-    flex: 1,
-  },
-  micBtn: {
-    padding: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});