diff --git a/apps/playground/ios/Podfile.lock b/apps/playground/ios/Podfile.lock
index 8003f8fa..770af2a8 100644
--- a/apps/playground/ios/Podfile.lock
+++ b/apps/playground/ios/Podfile.lock
@@ -1265,6 +1265,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-performance (5.1.4):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-safe-area-context (5.5.2):
     - DoubleConversion
     - glog
@@ -1598,6 +1619,27 @@ PODS:
     - React-logger (= 0.76.0)
     - React-perflogger (= 0.76.0)
     - React-utils (= 0.76.0)
+  - RNCAsyncStorage (2.2.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNScreens (4.4.0):
     - DoubleConversion
     - glog
@@ -1686,6 +1728,7 @@ DEPENDENCIES:
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
   - react-native-mmkv (from `../node_modules/react-native-mmkv`)
+  - react-native-performance (from `../node_modules/react-native-performance`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1714,6 +1757,7 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCodegen (from `build/generated/ios`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -1797,6 +1841,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-get-random-values"
   react-native-mmkv:
     :path: "../node_modules/react-native-mmkv"
+  react-native-performance:
+    :path: "../node_modules/react-native-performance"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
@@ -1853,6 +1899,8 @@ EXTERNAL SOURCES:
     :path: build/generated/ios
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-async-storage/async-storage"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   Yoga:
@@ -1896,6 +1944,7 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: cf1584fdc26003a6e7bf02b9d591e2d8353f7b75
   react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
   react-native-mmkv: d9af389b132ca3a56f93eb4225c92f397f435f33
+  react-native-performance: a98bf1c728aa26daae095f7a313153316016dce3
   react-native-safe-area-context: bb9dd7ee24674663cc345a423409e4542eabd1a9
   React-nativeconfig: 72c10ff34863148ef90df9c9c8eacba99d2faaaa
   React-NativeModulesApple: 71fd2cce69bcd2c46673cf6afedb4935b47bf230
@@ -1924,6 +1973,7 @@ SPEC CHECKSUMS:
   React-utils: e74516d5b9483c5530ec61e249e28b88729321d2
   ReactCodegen: ff7512e124e3dc1363a4930a209d033354d2042a
   ReactCommon: cde69a75746e8d7131f61c27155ee9dc42117003
+  RNCAsyncStorage: f27db574d8d0d56438ec4e9ba345872f2d0f29f4
   RNScreens: 351f431ef2a042a1887d4d90e1c1024b8ae9d123
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: f8ec45ce98bba1bc93dd28f2ee37215180e6d2b6
diff --git a/apps/playground/package.json b/apps/playground/package.json
index b6af578f..903366af 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -8,7 +8,9 @@
     "@react-navigation/elements": "^2.5.2",
     "@react-navigation/native": "^7.1.14",
     "@react-navigation/native-stack": "^7.3.21",
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@reduxjs/toolkit": "^2.8.2",
+    "@rozenite/async-storage-plugin": "workspace:*",
     "@rozenite/expo-atlas-plugin": "workspace:*",
     "@rozenite/mmkv-plugin": "workspace:*",
     "@rozenite/network-activity-plugin": "workspace:*",
diff --git a/apps/playground/src/app/App.tsx b/apps/playground/src/app/App.tsx
index e89e21d2..d61a2dd2 100644
--- a/apps/playground/src/app/App.tsx
+++ b/apps/playground/src/app/App.tsx
@@ -6,11 +6,14 @@ import { MMKVPluginScreen } from './screens/MMKVPluginScreen';
 import { NetworkTestScreen } from './screens/NetworkTestScreen';
 import { ReduxTestScreen } from './screens/ReduxTestScreen';
 import { PerformanceMonitorScreen } from './screens/PerformanceMonitorScreen';
+import { AsyncStoragePluginScreen } from './screens/AsyncStoragePluginScreen';
 import { ConfigScreen } from './screens/ConfigScreen';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useTanStackQueryDevTools } from '@rozenite/tanstack-query-plugin';
 import { useNetworkActivityDevTools } from '@rozenite/network-activity-plugin';
 import { useMMKVDevTools } from '@rozenite/mmkv-plugin';
+import { useAsyncStorageDevTools } from '@rozenite/async-storage-plugin';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { RootStackParamList } from './navigation/types';
 import { Provider } from 'react-redux';
 import { store } from './store';
@@ -27,6 +30,7 @@ const Wrapper = () => {
     storages: mmkvStorages,
     blacklist: /user-storage:sensitiveToken/,
   });
+  useAsyncStorageDevTools(AsyncStorage);
   usePerformanceMonitorDevTools();
 
   return (
@@ -45,6 +49,7 @@ const Wrapper = () => {
         name="PerformanceMonitor"
         component={PerformanceMonitorScreen}
       />
+      <Stack.Screen name="AsyncStorage" component={AsyncStoragePluginScreen} />
       <Stack.Screen
         name="Config"
         component={ConfigScreen}
diff --git a/apps/playground/src/app/navigation/types.ts b/apps/playground/src/app/navigation/types.ts
index 9c0883a6..d8c78410 100644
--- a/apps/playground/src/app/navigation/types.ts
+++ b/apps/playground/src/app/navigation/types.ts
@@ -6,6 +6,7 @@ export type RootStackParamList = {
   NetworkTest: undefined;
   ReduxTest: undefined;
   PerformanceMonitor: undefined;
+  AsyncStorage: undefined;
   Config: undefined;
 };
 
diff --git a/apps/playground/src/app/screens/AsyncStoragePluginScreen.tsx b/apps/playground/src/app/screens/AsyncStoragePluginScreen.tsx
new file mode 100644
index 00000000..dce5e07d
--- /dev/null
+++ b/apps/playground/src/app/screens/AsyncStoragePluginScreen.tsx
@@ -0,0 +1,460 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  FlatList,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+interface StorageItem {
+  key: string;
+  value: string;
+}
+
+export const AsyncStoragePluginScreen = () => {
+  const [items, setItems] = useState<StorageItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [key, setKey] = useState('');
+  const [value, setValue] = useState('');
+
+  // Add sample data on first load
+  useEffect(() => {
+    const addInitialData = async () => {
+      try {
+        // Check if data already exists
+        const keys = await AsyncStorage.getAllKeys();
+        if (keys.length === 0) {
+          // Add demo data
+          await AsyncStorage.setItem('username', 'john_doe');
+          await AsyncStorage.setItem('email', 'john@example.com');
+          await AsyncStorage.setItem('user_id', '12345');
+          await AsyncStorage.setItem('is_premium', 'true');
+          await AsyncStorage.setItem('last_login', Date.now().toString());
+          await AsyncStorage.setItem('profile', JSON.stringify({ 
+            bio: 'Software Developer',
+            location: 'San Francisco' 
+          }));
+          await AsyncStorage.setItem('app_settings', JSON.stringify({
+            theme: 'dark',
+            notifications: true,
+            language: 'en'
+          }));
+          console.log('AsyncStorage initial data added');
+        }
+      } catch (error) {
+        console.error('Failed to add initial AsyncStorage data:', error);
+      } finally {
+        // Load data regardless of whether initial data was added
+        loadData();
+      }
+    };
+
+    addInitialData();
+  }, []);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const keys = await AsyncStorage.getAllKeys();
+      const result = await AsyncStorage.multiGet(keys);
+      
+      const storageItems = result
+        .filter((item): item is [string, string] => item[1] !== null)
+        .map(([key, value]: [string, string]) => ({ key, value }));
+      
+      setItems(storageItems);
+    } catch (error) {
+      console.error('Failed to load AsyncStorage data:', error);
+      Alert.alert('Error', 'Failed to load storage data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const addItem = async () => {
+    if (!key || !value) {
+      Alert.alert('Error', 'Both key and value are required');
+      return;
+    }
+
+    try {
+      await AsyncStorage.setItem(key, value);
+      setKey('');
+      setValue('');
+      loadData();
+      Alert.alert('Success', 'Item added successfully');
+    } catch (error) {
+      console.error('Failed to add item:', error);
+      Alert.alert('Error', 'Failed to add item');
+    }
+  };
+
+  const removeItem = async (key: string) => {
+    try {
+      await AsyncStorage.removeItem(key);
+      loadData();
+    } catch (error) {
+      console.error('Failed to remove item:', error);
+      Alert.alert('Error', 'Failed to remove item');
+    }
+  };
+
+  const clearAll = async () => {
+    try {
+      await AsyncStorage.clear();
+      loadData();
+      Alert.alert('Success', 'All items cleared');
+    } catch (error) {
+      console.error('Failed to clear storage:', error);
+      Alert.alert('Error', 'Failed to clear storage');
+    }
+  };
+
+  // Helper function to detect value type
+  const detectValueType = (value: string): string => {
+    try {
+      // Try to parse JSON
+      if (value === 'true' || value === 'false') {
+        return 'boolean';
+      }
+      
+      const num = Number(value);
+      if (!isNaN(num) && value !== '') {
+        return 'number';
+      }
+      
+      // Check if it's valid JSON (object or array)
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) {
+        return 'array';
+      }
+      if (parsed && typeof parsed === 'object') {
+        return 'object';
+      }
+      
+      return 'string';
+    } catch {
+      return 'string';
+    }
+  };
+
+  const renderItem = ({ item }: { item: StorageItem }) => {
+    // Determine the entry type
+    const type = detectValueType(item.value);
+    
+    // Format the display value
+    let displayValue = item.value;
+    if (type === 'object' || type === 'array') {
+      try {
+        displayValue = JSON.stringify(JSON.parse(item.value), null, 2).substring(0, 100);
+        if (displayValue.length >= 100) displayValue += '...';
+      } catch {
+        // Keep original value if parsing fails
+      }
+    }
+    
+    return (
+      <View style={styles.item}>
+        <View style={styles.itemHeader}>
+          <Text style={styles.key}>{item.key}</Text>
+          <View style={[
+            styles.entryType,
+            type === 'string' ? styles.stringType :
+            type === 'number' ? styles.numberType :
+            type === 'boolean' ? styles.booleanType :
+            type === 'array' ? styles.arrayType : styles.objectType
+          ]}>
+            <Text style={styles.entryTypeText}>{type}</Text>
+          </View>
+        </View>
+        
+        <View style={styles.itemContent}>
+          <Text style={styles.value} numberOfLines={10} ellipsizeMode="tail">
+            {displayValue}
+          </Text>
+          
+          <View style={styles.itemFooter}>
+            <View style={styles.spacer} />
+            <TouchableOpacity
+              style={styles.deleteButton}
+              onPress={() => removeItem(item.key)}
+            >
+              <Text style={styles.deleteButtonText}>Delete</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>AsyncStorage Explorer</Text>
+        <Text style={styles.subtitle}>Inspect and manage your persistent data</Text>
+      </View>
+      
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          placeholder="Key"
+          placeholderTextColor="#666666"
+          value={key}
+          onChangeText={setKey}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Value"
+          placeholderTextColor="#666666"
+          value={value}
+          onChangeText={setValue}
+        />
+        <TouchableOpacity style={styles.addButton} onPress={addItem}>
+          <Text style={styles.buttonText}>Add Item</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.contentHeader}>
+        <Text style={styles.contentTitle}>
+          Storage Entries ({items.length})
+        </Text>
+        <View style={styles.contentActions}>
+          <TouchableOpacity style={styles.button} onPress={loadData}>
+            <Text style={styles.buttonText}>Refresh</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.button} onPress={clearAll}>
+            <Text style={styles.buttonText}>Clear All</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {loading ? (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color="#007AFF" />
+          <Text style={styles.loadingText}>Loading storage entries...</Text>
+        </View>
+      ) : items.length === 0 ? (
+        <View style={styles.emptyState}>
+          <Text style={styles.emptyStateText}>
+            No items in storage
+          </Text>
+          <Text style={styles.emptyStateSubtext}>
+            Tap "Add Item" or "Add Sample Data" to create entries
+          </Text>
+        </View>
+      ) : (
+        <FlatList
+          data={items}
+          keyExtractor={(item) => item.key}
+          renderItem={renderItem}
+          style={styles.list}
+          contentContainerStyle={styles.listContainer}
+          ItemSeparatorComponent={() => <View style={styles.separator} />}
+          showsVerticalScrollIndicator={false}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0a0a0a',
+  },
+  header: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 40,
+    paddingTop: 60,
+    paddingBottom: 20,
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: 'bold',
+    color: '#ffffff',
+    textAlign: 'center',
+    marginBottom: 16,
+    letterSpacing: 1,
+    fontFamily: 'System',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#a0a0a0',
+    textAlign: 'center',
+    lineHeight: 24,
+    fontWeight: '400',
+  },
+  contentHeader: {
+    gap: 8,
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginBottom: 20,
+    paddingHorizontal: 20,
+  },
+  contentTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#ffffff',
+  },
+  contentActions: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  inputContainer: {
+    marginBottom: 20,
+    paddingHorizontal: 20,
+  },
+  input: {
+    backgroundColor: '#1a1a1a',
+    borderWidth: 1,
+    borderColor: '#333333',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8,
+    color: '#ffffff',
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    borderRadius: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+  },
+  addButton: {
+    backgroundColor: '#52c41a',
+    borderRadius: 8,
+    padding: 12,
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  list: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+  listContainer: {
+    paddingVertical: 10,
+  },
+  item: {
+    backgroundColor: '#1a1a1a',
+    borderRadius: 12,
+    padding: 16,
+    flexDirection: 'column',
+    borderWidth: 1,
+    borderColor: '#333333',
+  },
+  itemHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  itemContent: {
+    flex: 1,
+  },
+  itemFooter: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 8,
+  },
+  spacer: {
+    flex: 1,
+  },
+  entryType: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    minWidth: 50,
+    alignItems: 'center',
+    marginLeft: 8,
+  },
+  stringType: {
+    backgroundColor: '#007AFF', // blue
+  },
+  numberType: {
+    backgroundColor: '#32CD32', // green
+  },
+  booleanType: {
+    backgroundColor: '#FF7F00', // orange
+  },
+  objectType: {
+    backgroundColor: '#9932CC', // purple
+  },
+  arrayType: {
+    backgroundColor: '#DC143C', // crimson
+  },
+  entryTypeText: {
+    fontSize: 12,
+    color: '#ffffff',
+    fontWeight: '600',
+  },
+  entryActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginLeft: 8,
+  },
+  key: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    color: '#ffffff',
+    flex: 1,
+  },
+  value: {
+    fontSize: 14,
+    color: '#a0a0a0',
+    marginTop: 4,
+    fontFamily: 'monospace',
+    marginBottom: 4,
+  },
+  deleteButton: {
+    backgroundColor: '#ff3b30',
+    borderRadius: 4,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    alignItems: 'center',
+  },
+  deleteButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 12,
+  },
+  separator: {
+    height: 12,
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 40,
+  },
+  emptyStateText: {
+    fontSize: 18,
+    color: '#a0a0a0',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  emptyStateSubtext: {
+    fontSize: 14,
+    color: '#666666',
+    textAlign: 'center',
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    color: '#a0a0a0',
+    marginTop: 16,
+    fontSize: 16,
+  },
+});
diff --git a/apps/playground/src/app/screens/LandingScreen.tsx b/apps/playground/src/app/screens/LandingScreen.tsx
index 12a249fd..61210e41 100644
--- a/apps/playground/src/app/screens/LandingScreen.tsx
+++ b/apps/playground/src/app/screens/LandingScreen.tsx
@@ -51,6 +51,13 @@ export const LandingScreen = () => {
               <Text style={styles.buttonText}>Performance Monitor</Text>
             </TouchableOpacity>
 
+            <TouchableOpacity
+              style={styles.navigationButton}
+              onPress={() => navigation.navigate('AsyncStorage' as never)}
+            >
+              <Text style={styles.buttonText}>AsyncStorage</Text>
+            </TouchableOpacity>
+
             <TouchableOpacity
               style={styles.configButton}
               onPress={() => navigation.navigate('Config' as never)}
diff --git a/apps/playground/tsconfig.app.json b/apps/playground/tsconfig.app.json
index 42f51d48..9e7787e5 100644
--- a/apps/playground/tsconfig.app.json
+++ b/apps/playground/tsconfig.app.json
@@ -51,6 +51,9 @@
     },
     {
       "path": "../../packages/metro/tsconfig.lib.json"
+    },
+    {
+      "path": "../../packages/async-storage-plugin"
     }
   ]
 }
diff --git a/commitlint.config.js b/commitlint.config.js
index d4836849..5d225942 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -21,6 +21,7 @@ export default {
         'repack',
         'performance-monitor-plugin',
         'tools',
+        'async-storage-plugin',
         '',
       ],
     ],
diff --git a/nx.json b/nx.json
index 8575a8ac..48960d29 100644
--- a/nx.json
+++ b/nx.json
@@ -54,7 +54,8 @@
         "packages/network-activity-plugin/**/*",
         "packages/tanstack-query-plugin/**/*",
         "packages/redux-devtools-plugin/**/*",
-        "packages/performance-monitor-plugin/**/*"
+        "packages/performance-monitor-plugin/**/*",
+        "packages/async-storage-plugin/**/*"
       ]
     },
     {
diff --git a/packages/async-storage-plugin/README.md b/packages/async-storage-plugin/README.md
new file mode 100644
index 00000000..b194e380
--- /dev/null
+++ b/packages/async-storage-plugin/README.md
@@ -0,0 +1,75 @@
+![rozenite-banner](https://www.rozenite.dev/rozenite-banner.jpg)
+
+### A Rozenite plugin that provides comprehensive AsyncStorage inspection for React Native applications.
+
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)](https://github.com/callstackincubator/rozenite/blob/main/CONTRIBUTING.md)
+[![MIT License](https://img.shields.io/npm/l/rozenite?style=for-the-badge)](https://github.com/callstackincubator/rozenite/blob/main/LICENSE)
+
+The Rozenite AsyncStorage Plugin provides real-time storage inspection, data visualization, and management capabilities for AsyncStorage within your React Native DevTools environment.
+
+## Features
+
+- **Real-time Storage Inspection**: View all AsyncStorage entries and their contents in real-time
+- **Data Type Detection**: Automatically detects and displays different data types (string, number, boolean, object, array)
+- **Search & Filter**: Quickly find specific keys or values with real-time search functionality
+- **Data Management**: Add, edit, and delete entries directly from the DevTools interface
+- **Visual Data Representation**: Color-coded type indicators and formatted value display
+
+## Installation
+
+Install the AsyncStorage plugin as a dependency:
+
+```bash
+npm install @rozenite/async-storage-plugin
+```
+
+**Note**: This plugin requires `@react-native-async-storage/async-storage` as a peer dependency. Make sure you have it installed:
+
+```bash
+npm install @react-native-async-storage/async-storage
+```
+
+## Quick Start
+
+### 1. Install the Plugin
+
+```bash
+npm install @rozenite/async-storage-plugin @react-native-async-storage/async-storage
+```
+
+### 2. Integrate with Your App
+
+Add the DevTools hook to your React Native app:
+
+```typescript
+// App.tsx
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useAsyncStorageDevTools } from '@rozenite/async-storage-plugin';
+
+function App() {
+  // Enable AsyncStorage DevTools in development
+  useAsyncStorageDevTools(AsyncStorage);
+
+  return <YourApp />;
+}
+```
+
+### 3. Access DevTools
+
+Start your development server and open React Native DevTools. You'll find the "AsyncStorage" panel in the DevTools interface.
+
+## Usage
+
+The AsyncStorage plugin automatically connects to your app's AsyncStorage instance and provides:
+
+- **Storage Inspection**: View all stored keys with their types and values
+- **Search Functionality**: Filter entries by key or value
+- **Type Indicators**: Visual indicators for different data types (string, number, boolean, object, array)
+- **Real-time Updates**: See changes to your AsyncStorage as they happen
+- **Data Management**: Add, edit, and delete entries directly from the DevTools interface
+
+## Made with ❤️ at Callstack
+
+`rozenite` is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.
+
+[Callstack](https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=rozenite&utm_term=readme-with-love) is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!
diff --git a/packages/async-storage-plugin/package.json b/packages/async-storage-plugin/package.json
new file mode 100644
index 00000000..f3285e6d
--- /dev/null
+++ b/packages/async-storage-plugin/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@rozenite/async-storage-plugin",
+  "version": "1.0.0-alpha.11",
+  "description": "react native async storage dev-tools plugin",
+  "type": "module",
+  "main": "./dist/react-native.cjs",
+  "module": "./dist/react-native.js",
+  "types": "./dist/react-native.d.ts",
+  "scripts": {
+    "build": "rozenite build",
+    "dev": "rozenite dev"
+  },
+  "dependencies": {
+    "@rozenite/plugin-bridge": "1.0.0-alpha.3",
+    "nanoevents": "^9.1.0"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0",
+    "@rozenite/vite-plugin": "1.0.0-alpha.3",
+    "typescript": "^5.7.3",
+    "rozenite": "1.0.0-alpha.3",
+    "react-native-web": "0.21.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.0",
+    "react-native": "0.76.0",
+    "@types/react": "~18.3.12",
+    "@react-native-async-storage/async-storage": "^2.2.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@react-native-async-storage/async-storage": "*"
+  },
+  "license": "MIT"
+}
diff --git a/packages/async-storage-plugin/project.json b/packages/async-storage-plugin/project.json
new file mode 100644
index 00000000..765da4d6
--- /dev/null
+++ b/packages/async-storage-plugin/project.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "name": "@rozenite/async-storage-plugin",
+  "targets": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["{projectRoot}/src/**/*"],
+      "outputs": ["{projectRoot}/dist"]
+    }
+  }
+}
diff --git a/packages/async-storage-plugin/react-native.ts b/packages/async-storage-plugin/react-native.ts
new file mode 100644
index 00000000..030dbf75
--- /dev/null
+++ b/packages/async-storage-plugin/react-native.ts
@@ -0,0 +1,19 @@
+/**
+ * AsyncStorage Plugin for Rozenite DevTools
+ * 
+ * This plugin provides a powerful interface for inspecting and managing
+ * AsyncStorage data in your React Native application.
+ */
+
+import { useAsyncStorageDevTools as useDevToolsImpl } from './src/react-native/useAsyncStorageDevTools';
+export type { AsyncStorageAPI } from './src/react-native/async-storage-container';
+
+const isWeb = typeof window !== 'undefined' && window.navigator.product !== 'ReactNative';
+const isDev = process.env.NODE_ENV !== 'production';
+const isServer = typeof window === 'undefined';
+
+// In development and in a React Native environment, use the real implementation
+export const useAsyncStorageDevTools = (!isWeb && !isServer && isDev) 
+  ? useDevToolsImpl 
+  : () => null;
+  
\ No newline at end of file
diff --git a/packages/async-storage-plugin/rozenite.config.ts b/packages/async-storage-plugin/rozenite.config.ts
new file mode 100644
index 00000000..09084a3f
--- /dev/null
+++ b/packages/async-storage-plugin/rozenite.config.ts
@@ -0,0 +1,8 @@
+export default {
+  panels: [
+    {
+      name: 'AsyncStorage',
+      source: './src/ui/panel.tsx',
+    },
+  ],
+};
diff --git a/packages/async-storage-plugin/src/css-modules.d.ts b/packages/async-storage-plugin/src/css-modules.d.ts
new file mode 100644
index 00000000..3d673e2e
--- /dev/null
+++ b/packages/async-storage-plugin/src/css-modules.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
diff --git a/packages/async-storage-plugin/src/hello-world.tsx b/packages/async-storage-plugin/src/hello-world.tsx
new file mode 100644
index 00000000..35683809
--- /dev/null
+++ b/packages/async-storage-plugin/src/hello-world.tsx
@@ -0,0 +1,162 @@
+import { Text, View, StyleSheet, ScrollView, SafeAreaView } from 'react-native';
+
+export default function HelloWorldPanel() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <View style={styles.header}>
+          <View style={styles.logoContainer}>
+            <Text style={styles.logo}>💎</Text>
+          </View>
+          <Text style={styles.title}>Welcome to Rozenite</Text>
+          <Text style={styles.subtitle}>React Native DevTools Framework</Text>
+        </View>
+
+        <View style={styles.featuresContainer}>
+          <Text style={styles.sectionTitle}>✨ Features</Text>
+          <View style={styles.featureGrid}>
+            <View style={styles.featureCard}>
+              <Text style={styles.featureIcon}>🔧</Text>
+              <Text style={styles.featureTitle}>Plugin System</Text>
+              <Text style={styles.featureDescription}>
+                Extensible architecture for custom dev tools
+              </Text>
+            </View>
+            <View style={styles.featureCard}>
+              <Text style={styles.featureIcon}>⚡</Text>
+              <Text style={styles.featureTitle}>Fast & Lightweight</Text>
+              <Text style={styles.featureDescription}>
+                Optimized for performance and developer experience
+              </Text>
+            </View>
+            <View style={styles.featureCard}>
+              <Text style={styles.featureIcon}>🎨</Text>
+              <Text style={styles.featureTitle}>Modern UI</Text>
+              <Text style={styles.featureDescription}>
+                Beautiful, responsive interface built with React Native
+              </Text>
+            </View>
+            <View style={styles.featureCard}>
+              <Text style={styles.featureIcon}>🔌</Text>
+              <Text style={styles.featureTitle}>Easy Integration</Text>
+              <Text style={styles.featureDescription}>
+                Simple setup and configuration process
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={styles.footer}>
+          <Text style={styles.footerText}>
+            Built with ❤️ for the React Native community
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 20,
+  },
+  header: {
+    alignItems: 'center',
+    paddingVertical: 40,
+    paddingHorizontal: 20,
+    backgroundColor: '#ffffff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e9ecef',
+  },
+  logoContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#8232FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  logo: {
+    fontSize: 40,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#1a1a1a',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  featuresContainer: {
+    padding: 20,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#1a1a1a',
+    marginBottom: 16,
+  },
+  featureGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  featureCard: {
+    width: '48%',
+    backgroundColor: '#ffffff',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  featureIcon: {
+    fontSize: 24,
+    marginBottom: 8,
+  },
+  featureTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#1a1a1a',
+    marginBottom: 4,
+  },
+  featureDescription: {
+    fontSize: 12,
+    color: '#666',
+    lineHeight: 16,
+  },
+
+  footer: {
+    alignItems: 'center',
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+  },
+  footerText: {
+    fontSize: 12,
+    color: '#999',
+    textAlign: 'center',
+  },
+});
diff --git a/packages/async-storage-plugin/src/react-native/async-storage-container.ts b/packages/async-storage-plugin/src/react-native/async-storage-container.ts
new file mode 100644
index 00000000..868d07d2
--- /dev/null
+++ b/packages/async-storage-plugin/src/react-native/async-storage-container.ts
@@ -0,0 +1,204 @@
+// Define a simple event emitter since we can't use nanoevents
+type Unsubscribe = () => void;
+type Callback = (...args: unknown[]) => void;
+
+// Simple event emitter implementation
+function createEventEmitter<T extends Record<string, unknown>>() {
+  const events = new Map<keyof T, Callback[]>();
+  
+  return {
+    on<K extends keyof T>(event: K, callback: Callback): Unsubscribe {
+      if (!events.has(event)) {
+        events.set(event, []);
+      }
+      
+      const callbacks = events.get(event);
+      if (callbacks) {
+        callbacks.push(callback);
+      }
+      
+      return () => {
+        const callbackList = events.get(event);
+        if (callbackList) {
+          const index = callbackList.indexOf(callback);
+          if (index !== -1) {
+            callbackList.splice(index, 1);
+          }
+        }
+      };
+    },
+    
+    emit<K extends keyof T>(event: K, ...args: unknown[]): void {
+      const callbacks = events.get(event);
+      if (callbacks) {
+        [...callbacks].forEach(callback => callback(...args));
+      }
+    }
+  };
+}
+
+import { AsyncStorageEntry } from '../shared/types';
+
+export type AsyncStorageContainerEvents = {
+  'value-changed': (key: string, value: string) => void;
+  'value-removed': (key: string) => void;
+  'storage-cleared': () => void;
+};
+
+export type AsyncStorageAPI = {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+  getAllKeys: () => Promise<readonly string[]>;
+  multiGet: (keys: readonly string[]) => Promise<readonly [string, string | null][]>;
+  clear: () => Promise<void>;
+};
+
+export type AsyncStorageContainer = {
+  getAllKeys: () => Promise<string[]>;
+  getEntries: (keys?: string[]) => Promise<AsyncStorageEntry[]>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+  clear: () => Promise<void>;
+  on: <T extends keyof AsyncStorageContainerEvents>(
+    event: T,
+    listener: AsyncStorageContainerEvents[T]
+  ) => Unsubscribe;
+};
+
+// Detect and parse the value into a specific type
+const detectValueType = (value: string): {type: AsyncStorageEntry['type']; parsedValue?: unknown} => {
+  if (value === null || value === undefined) {
+    return { type: 'null' };
+  }
+  
+  try {
+    // Try to parse JSON
+    const parsed = JSON.parse(value);
+    
+    if (parsed === null) {
+      return { type: 'null', parsedValue: null };
+    }
+    
+    if (Array.isArray(parsed)) {
+      return { type: 'array', parsedValue: parsed };
+    }
+    
+    if (typeof parsed === 'object') {
+      return { type: 'object', parsedValue: parsed };
+    }
+    
+    if (typeof parsed === 'number') {
+      return { type: 'number', parsedValue: parsed };
+    }
+    
+    if (typeof parsed === 'boolean') {
+      return { type: 'boolean', parsedValue: parsed };
+    }
+    
+    return { type: 'string', parsedValue: parsed };
+  } catch {
+    // If JSON parsing fails, it's a plain string
+    return { type: 'string', parsedValue: value };
+  }
+};
+
+export const getAsyncStorageContainer = (
+  asyncStorage: AsyncStorageAPI
+): AsyncStorageContainer => {
+  const eventEmitter = createEventEmitter<AsyncStorageContainerEvents>();
+
+  // Override setItem to emit events when values change
+  const originalSetItem = asyncStorage.setItem;
+  asyncStorage.setItem = async (key: string, value: string) => {
+    await originalSetItem.call(asyncStorage, key, value);
+    eventEmitter.emit('value-changed', key, value);
+  };
+
+  // Override removeItem to emit events when values are removed
+  const originalRemoveItem = asyncStorage.removeItem;
+  asyncStorage.removeItem = async (key: string) => {
+    await originalRemoveItem.call(asyncStorage, key);
+    eventEmitter.emit('value-removed', key);
+  };
+
+  // Override clear to emit events when storage is cleared
+  const originalClear = asyncStorage.clear;
+  asyncStorage.clear = async () => {
+    await originalClear.call(asyncStorage);
+    eventEmitter.emit('storage-cleared');
+  };
+
+  return {
+    getAllKeys: async () => {
+      try {
+        const keys = await asyncStorage.getAllKeys();
+        // Convert readonly string[] to string[]
+        return [...keys];
+      } catch (error) {
+        console.error('AsyncStorage getAllKeys error:', error);
+        return [];
+      }
+    },
+
+    getEntries: async (keys?: string[]) => {
+      try {
+        let keysToGet: readonly string[];
+        
+        if (!keys || keys.length === 0) {
+          keysToGet = await asyncStorage.getAllKeys();
+        } else {
+          keysToGet = keys;
+        }
+        
+        const entriesPairs = await asyncStorage.multiGet(keysToGet);
+        
+        return entriesPairs
+          .filter((pair): pair is [string, string] => pair[1] !== null)
+          .map(([key, value]) => {
+            const { type, parsedValue } = detectValueType(value);
+            return {
+              key,
+              value,
+              type,
+              parsedValue
+            };
+          });
+      } catch (error) {
+        console.error('AsyncStorage getEntries error:', error);
+        return [];
+      }
+    },
+
+    setItem: async (key: string, value: string) => {
+      try {
+        await asyncStorage.setItem(key, value);
+      } catch (error) {
+        console.error('AsyncStorage setItem error:', error);
+        throw error;
+      }
+    },
+
+    removeItem: async (key: string) => {
+      try {
+        await asyncStorage.removeItem(key);
+      } catch (error) {
+        console.error('AsyncStorage removeItem error:', error);
+        throw error;
+      }
+    },
+
+    clear: async () => {
+      try {
+        await asyncStorage.clear();
+      } catch (error) {
+        console.error('AsyncStorage clear error:', error);
+        throw error;
+      }
+    },
+
+    on: (event, listener) => {
+      return eventEmitter.on(event, listener as Callback);
+    },
+  };
+};
diff --git a/packages/async-storage-plugin/src/react-native/useAsyncStorageDevTools.ts b/packages/async-storage-plugin/src/react-native/useAsyncStorageDevTools.ts
new file mode 100644
index 00000000..689a8955
--- /dev/null
+++ b/packages/async-storage-plugin/src/react-native/useAsyncStorageDevTools.ts
@@ -0,0 +1,88 @@
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { useEffect } from 'react';
+import { AsyncStorageEventMap } from '../shared/messaging';
+import { getAsyncStorageContainer, AsyncStorageAPI } from './async-storage-container';
+
+// Accept AsyncStorage instance as a parameter
+export const useAsyncStorageDevTools = (
+  asyncStorageInstance: AsyncStorageAPI
+) => {
+  const client = useRozeniteDevToolsClient<AsyncStorageEventMap>({
+    pluginId: '@rozenite/async-storage-plugin',
+  });
+
+  useEffect(() => {
+    if (!client || !asyncStorageInstance) {
+      return;
+    }
+
+    const container = getAsyncStorageContainer(asyncStorageInstance);
+
+    // Setup event listeners for changes in AsyncStorage
+    const valueChangedSubscription = container.on('value-changed', async (key, value) => {
+      // When a value changes, notify the DevTools panel
+      client.send('host-entry-updated', { key, value });
+      
+      // Also update all keys list
+      const allKeys = await container.getAllKeys();
+      client.send('host-all-keys', allKeys);
+    });
+
+    const valueRemovedSubscription = container.on('value-removed', async () => {
+      // When a value is removed, update the keys list
+      const allKeys = await container.getAllKeys();
+      client.send('host-all-keys', allKeys);
+    });
+
+    const storageClearedSubscription = container.on('storage-cleared', async () => {
+      // When storage is cleared, update the keys list
+      const allKeys = await container.getAllKeys();
+      client.send('host-all-keys', allKeys);
+    });
+
+    // Handle DevTools panel requests
+    const getAllKeysSubscription = client.onMessage('guest-get-all-keys', async () => {
+      const allKeys = await container.getAllKeys();
+      client.send('host-all-keys', allKeys);
+    });
+
+    const getEntriesSubscription = client.onMessage('guest-get-entries', async (event) => {
+      const entries = await container.getEntries(event.keys);
+      client.send('host-entries', entries);
+    });
+
+    const updateEntrySubscription = client.onMessage('guest-update-entry', async (event) => {
+      await container.setItem(event.key, event.value);
+      // The value-changed subscription will handle notifying DevTools
+    });
+
+    const removeEntrySubscription = client.onMessage('guest-remove-entry', async (event) => {
+      await container.removeItem(event.key);
+      // The value-removed subscription will handle notifying DevTools
+    });
+
+    const clearAllSubscription = client.onMessage('guest-clear-all', async () => {
+      await container.clear();
+      // The storage-cleared subscription will handle notifying DevTools
+    });
+
+    // Send initial keys list
+    container.getAllKeys().then((keys) => {
+      client.send('host-all-keys', keys);
+    });
+
+    // Cleanup function
+    return () => {
+      valueChangedSubscription();
+      valueRemovedSubscription();
+      storageClearedSubscription();
+      getAllKeysSubscription.remove();
+      getEntriesSubscription.remove();
+      updateEntrySubscription.remove();
+      removeEntrySubscription.remove();
+      clearAllSubscription.remove();
+    };
+  }, [client, asyncStorageInstance]);
+
+  return client;
+};
diff --git a/packages/async-storage-plugin/src/shared/messaging.ts b/packages/async-storage-plugin/src/shared/messaging.ts
new file mode 100644
index 00000000..07f9d81c
--- /dev/null
+++ b/packages/async-storage-plugin/src/shared/messaging.ts
@@ -0,0 +1,25 @@
+import { AsyncStorageEntry } from './types';
+
+export type AsyncStorageEventMap = {
+  // Host (React Native) to DevTools events
+  'host-all-keys': string[];
+  'host-entries': AsyncStorageEntry[];
+  'host-entry-updated': {
+    key: string;
+    value: string;
+  };
+  
+  // DevTools to Host (React Native) events
+  'guest-get-all-keys': unknown;
+  'guest-get-entries': {
+    keys?: string[];
+  };
+  'guest-update-entry': {
+    key: string;
+    value: string;
+  };
+  'guest-remove-entry': {
+    key: string;
+  };
+  'guest-clear-all': unknown;
+};
diff --git a/packages/async-storage-plugin/src/shared/types.ts b/packages/async-storage-plugin/src/shared/types.ts
new file mode 100644
index 00000000..f74c58c9
--- /dev/null
+++ b/packages/async-storage-plugin/src/shared/types.ts
@@ -0,0 +1,9 @@
+export type AsyncStorageEntry = {
+  key: string;
+  value: string;
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null' | 'unknown';
+  parsedValue?: any;
+};
+
+export type AsyncStorageEntryType = AsyncStorageEntry['type'];
+export type AsyncStorageEntryValue = AsyncStorageEntry['value'];
diff --git a/packages/async-storage-plugin/src/ui/add-entry-modal.tsx b/packages/async-storage-plugin/src/ui/add-entry-modal.tsx
new file mode 100644
index 00000000..73508ba7
--- /dev/null
+++ b/packages/async-storage-plugin/src/ui/add-entry-modal.tsx
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import './modal.css';
+
+interface AddEntryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAdd: (key: string, value: string) => void;
+  existingKeys: string[];
+}
+
+export function AddEntryModal({ isOpen, onClose, onAdd, existingKeys }: AddEntryModalProps) {
+  const [key, setKey] = useState<string>('');
+  const [value, setValue] = useState<string>('');
+  const [keyError, setKeyError] = useState<string>('');
+  const [valueError, setValueError] = useState<string>('');
+
+  if (!isOpen) return null;
+
+  const validateKey = (key: string) => {
+    if (!key.trim()) {
+      setKeyError('Key cannot be empty');
+      return false;
+    }
+    
+    if (existingKeys.includes(key)) {
+      setKeyError('Key already exists');
+      return false;
+    }
+    
+    setKeyError('');
+    return true;
+  };
+
+  const validateValue = (value: string) => {
+    // Value can be empty, but we should warn
+    if (!value.trim()) {
+      setValueError('Warning: Empty value will be stored as empty string');
+      // Still return true as this is just a warning
+      return true;
+    }
+    
+    setValueError('');
+    return true;
+  };
+
+  const handleAdd = () => {
+    const isKeyValid = validateKey(key);
+    const isValueValid = validateValue(value);
+    
+    if (isKeyValid && isValueValid) {
+      onAdd(key, value);
+      setKey('');
+      setValue('');
+      onClose();
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-container" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">Add New Entry</h2>
+          <button className="modal-close" onClick={onClose}>&times;</button>
+        </div>
+        
+        <div className="modal-body">
+          <div className="form-group">
+            <label className="form-label">Key</label>
+            <input
+              className="form-control"
+              type="text"
+              value={key}
+              onChange={(e) => {
+                setKey(e.target.value);
+                validateKey(e.target.value);
+              }}
+              placeholder="Enter key name"
+            />
+            {keyError && <div style={{ color: '#dc2626', fontSize: '0.75rem', marginTop: '0.25rem' }}>{keyError}</div>}
+          </div>
+          
+          <div className="form-group">
+            <label className="form-label">Value</label>
+            <textarea
+              className="form-control form-textarea"
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+                validateValue(e.target.value);
+              }}
+              placeholder="Enter value (strings, numbers, JSON objects, etc.)"
+            />
+            {valueError && <div style={{ color: '#f59e0b', fontSize: '0.75rem', marginTop: '0.25rem' }}>{valueError}</div>}
+          </div>
+        </div>
+        
+        <div className="modal-footer">
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={handleAdd}>Add</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/async-storage-plugin/src/ui/edit-modal.tsx b/packages/async-storage-plugin/src/ui/edit-modal.tsx
new file mode 100644
index 00000000..bbc81c76
--- /dev/null
+++ b/packages/async-storage-plugin/src/ui/edit-modal.tsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import './modal.css';
+import { AsyncStorageEntry } from '../shared/types';
+
+interface EditModalProps {
+  isOpen: boolean;
+  entry: AsyncStorageEntry | null;
+  onClose: () => void;
+  onSave: (key: string, value: string) => void;
+  onDelete: (key: string) => void;
+}
+
+export function EditModal({ isOpen, entry, onClose, onSave, onDelete }: EditModalProps) {
+  const [editValue, setEditValue] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    if (entry) {
+      setEditValue(entry.value);
+      setError('');
+    }
+  }, [entry]);
+
+  if (!isOpen || !entry) return null;
+
+  const handleSave = () => {
+    try {
+      // For object/array types, validate JSON
+      if (entry.type === 'object' || entry.type === 'array') {
+        JSON.parse(editValue);
+      }
+      
+      onSave(entry.key, editValue);
+      onClose();
+    } catch (e) {
+      setError('Invalid JSON format');
+    }
+  };
+
+  const handleDelete = () => {
+    if (window.confirm(`Are you sure you want to delete "${entry.key}"?`)) {
+      onDelete(entry.key);
+      onClose();
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-container" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">Edit Value</h2>
+          <button className="modal-close" onClick={onClose}>&times;</button>
+        </div>
+        
+        <div className="modal-body">
+          <div className="form-group">
+            <label className="form-label">Key</label>
+            <input
+              className="form-control"
+              type="text"
+              value={entry.key}
+              disabled
+            />
+          </div>
+          
+          <div className="form-group">
+            <label className="form-label">Type</label>
+            <input
+              className="form-control"
+              type="text"
+              value={entry.type}
+              disabled
+            />
+          </div>
+          
+          <div className="form-group">
+            <label className="form-label">Value</label>
+            <textarea
+              className="form-control form-textarea"
+              value={editValue}
+              onChange={(e) => {
+                setEditValue(e.target.value);
+                setError('');
+              }}
+            />
+            {error && <div style={{ color: '#dc2626', fontSize: '0.75rem', marginTop: '0.25rem' }}>{error}</div>}
+          </div>
+        </div>
+        
+        <div className="modal-footer">
+          <button className="btn btn-danger" onClick={handleDelete}>Delete</button>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={handleSave}>Save</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/async-storage-plugin/src/ui/entries-table.css b/packages/async-storage-plugin/src/ui/entries-table.css
new file mode 100644
index 00000000..84374eb8
--- /dev/null
+++ b/packages/async-storage-plugin/src/ui/entries-table.css
@@ -0,0 +1,218 @@
+/* Table Container */
+.table-container {
+  flex: 1;
+  background: #ffffff;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: auto;
+}
+
+.entries-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.entries-table thead {
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+.entries-table th {
+  padding: 0.875rem 1.25rem;
+  text-align: left;
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.th-key {
+  width: 30%;
+}
+
+.th-type {
+  width: 15%;
+}
+
+.th-value {
+  width: 45%;
+}
+
+.th-actions {
+  width: 10%;
+}
+
+.entries-table td {
+  padding: 0.875rem 1.25rem;
+  border-bottom: 1px solid #f3f4f6;
+  vertical-align: top;
+}
+
+.entry-row {
+  transition: background-color 0.15s ease;
+}
+
+.entry-row:hover {
+  background-color: #f9fafb;
+}
+
+.entry-key {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
+  font-size: 0.875rem;
+  color: #111827;
+  font-weight: 500;
+  word-break: break-all;
+}
+
+.entry-key code {
+  background: #f3f4f6;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
+  color: #374151;
+  border: 1px solid #e5e7eb;
+}
+
+.entry-type {
+  width: 100px;
+}
+
+.type-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  color: white;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  min-width: 50px;
+  text-align: center;
+}
+
+.type-string {
+  background-color: #10b981;
+}
+
+.type-number {
+  background-color: #3b82f6;
+}
+
+.type-boolean {
+  background-color: #f59e0b;
+}
+
+.type-object {
+  background-color: #8b5cf6;
+}
+
+.type-array {
+  background-color: #ec4899;
+}
+
+.type-null {
+  background-color: #6b7280;
+}
+
+.type-unknown {
+  background-color: #6b7280;
+}
+
+.entry-value {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
+  font-size: 0.875rem;
+  word-break: break-all;
+  max-width: 100%;
+  line-height: 1.5;
+  position: relative;
+  cursor: pointer;
+}
+
+.entry-value:hover::after {
+  content: '✏️';
+  position: absolute;
+  right: -20px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.value-container {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid transparent;
+}
+
+.value-string {
+  color: #059669;
+  background: #ecfdf5;
+  border-color: #d1fae5;
+}
+
+.value-number {
+  color: #2563eb;
+  background: #eff6ff;
+  border-color: #dbeafe;
+}
+
+.value-boolean {
+  font-weight: 700;
+}
+
+.value-boolean.true {
+  color: #059669;
+  background: #ecfdf5;
+  border-color: #d1fae5;
+}
+
+.value-boolean.false {
+  color: #dc2626;
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+.value-object, .value-array {
+  color: #7c3aed;
+  background: #f5f3ff;
+  border-color: #ddd6fe;
+}
+
+.value-null, .value-unknown {
+  color: #6b7280;
+  font-style: italic;
+  background: #f9fafb;
+  border-color: #f3f4f6;
+}
+
+.entry-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.action-icon {
+  padding: 0.25rem;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  color: #6b7280;
+  transition: all 0.15s ease;
+}
+
+.action-icon:hover {
+  color: #dc2626;
+  background-color: #fee2e2;
+}
diff --git a/packages/async-storage-plugin/src/ui/entries-table.tsx b/packages/async-storage-plugin/src/ui/entries-table.tsx
new file mode 100644
index 00000000..c02ca810
--- /dev/null
+++ b/packages/async-storage-plugin/src/ui/entries-table.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import { AsyncStorageEntry } from '../shared/types';
+import './entries-table.css';
+
+interface EntriesTableProps {
+  entries: AsyncStorageEntry[];
+  onEditEntry: (entry: AsyncStorageEntry) => void;
+  loading?: boolean;
+}
+
+export function EntriesTable({ entries, onEditEntry, loading = false }: EntriesTableProps) {
+  if (loading) {
+    return (
+      <div className="loading-state">
+        <div className="loading-spinner"></div>
+        <p>Loading entries...</p>
+      </div>
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <div className="empty-state">
+        <div className="empty-icon">🔍</div>
+        <h3>No entries found</h3>
+        <p>No AsyncStorage entries match your search criteria.</p>
+      </div>
+    );
+  }
+
+  const formatValue = (entry: AsyncStorageEntry) => {
+    switch (entry.type) {
+      case 'string':
+        return (
+          <div className="value-container value-string">
+            "{entry.parsedValue || entry.value}"
+          </div>
+        );
+      case 'number':
+        return (
+          <div className="value-container value-number">
+            {entry.parsedValue}
+          </div>
+        );
+      case 'boolean':
+        return (
+          <div className={`value-container value-boolean ${entry.parsedValue ? 'true' : 'false'}`}>
+            {String(entry.parsedValue)}
+          </div>
+        );
+      case 'object':
+        return (
+          <div className="value-container value-object">
+            {JSON.stringify(entry.parsedValue, null, 2).substring(0, 50)}
+            {JSON.stringify(entry.parsedValue, null, 2).length > 50 ? '...' : ''}
+          </div>
+        );
+      case 'array':
+        return (
+          <div className="value-container value-array">
+            {JSON.stringify(entry.parsedValue, null, 2).substring(0, 50)}
+            {JSON.stringify(entry.parsedValue, null, 2).length > 50 ? '...' : ''}
+          </div>
+        );
+      case 'null':
+        return <div className="value-container value-null">null</div>;
+      default:
+        return <div className="value-container value-unknown">{entry.value}</div>;
+    }
+  };
+
+  return (
+    <div className="table-container">
+      <div className="table-wrapper">
+        <table className="entries-table">
+          <thead>
+            <tr>
+              <th className="th-key">Key</th>
+              <th className="th-type">Type</th>
+              <th className="th-value">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((entry) => (
+              <tr key={entry.key} className="entry-row">
+                <td className="entry-key">
+                  <code>{entry.key}</code>
+                </td>
+                <td className="entry-type">
+                  <span className={`type-badge type-${entry.type}`}>
+                    {entry.type}
+                  </span>
+                </td>
+                <td 
+                  className="entry-value" 
+                  onClick={() => onEditEntry(entry)}
+                  title="Click to edit"
+                >
+                  {formatValue(entry)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/async-storage-plugin/src/ui/modal.css b/packages/async-storage-plugin/src/ui/modal.css
new file mode 100644
index 00000000..52bb125e
--- /dev/null
+++ b/packages/async-storage-plugin/src/ui/modal.css
@@ -0,0 +1,136 @@
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal-container {
+  background-color: #ffffff;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 1rem;
+}
+
+.modal-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  padding: 0.25rem;
+  cursor: pointer;
+  color: #6b7280;
+  font-size: 1.25rem;
+  transition: color 0.15s ease;
+}
+
+.modal-close:hover {
+  color: #111827;
+}
+
+.modal-body {
+  margin-bottom: 1rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  transition: all 0.15s ease;
+  background-color: #ffffff;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-textarea {
+  min-height: 100px;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+  padding-top: 1rem;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: all 0.15s ease;
+}
+
+.btn-secondary {
+  background-color: #f3f4f6;
+  border-color: #d1d5db;
+  color: #374151;
+}
+
+.btn-secondary:hover {
+  background-color: #e5e7eb;
+}
+
+.btn-primary {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+.btn-primary:hover {
+  background-color: #2563eb;
+}
+
+.btn-danger {
+  background-color: #ef4444;
+  color: #ffffff;
+}
+
+.btn-danger:hover {
+  background-color: #dc2626;
+}
diff --git a/packages/async-storage-plugin/src/ui/panel.css b/packages/async-storage-plugin/src/ui/panel.css
new file mode 100644
index 00000000..fe6bdacf
--- /dev/null
+++ b/packages/async-storage-plugin/src/ui/panel.css
@@ -0,0 +1,195 @@
+/* AsyncStorage Panel Styles */
+.async-storage-panel {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', sans-serif;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #fafbfc;
+  color: #1a1a1a;
+  overflow: hidden;
+}
+
+/* Header Styles */
+.panel-header {
+  background: #ffffff;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 0;
+  position: relative;
+  z-index: 10;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  max-width: 100%;
+}
+
+.header-left {
+  flex: 1;
+}
+
+.header-title {
+  margin: 0 0 0.125rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #111827;
+}
+
+.title-icon {
+  font-size: 1.25rem;
+  opacity: 0.8;
+}
+
+.header-subtitle {
+  margin: 0;
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-weight: 400;
+}
+
+.header-right {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Actions Bar */
+.actions-bar {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.action-button {
+  padding: 0.375rem 0.625rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: #ffffff;
+  color: #111827;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.action-button:hover {
+  border-color: #9ca3af;
+  background-color: #f9fafb;
+}
+
+.action-button:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #f9fafb;
+}
+
+.action-button.danger {
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
+.action-button.danger:hover {
+  background-color: #fee2e2;
+}
+
+/* Main Content */
+.panel-content {
+  flex: 1;
+  padding: 0.75rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Search Section */
+.search-section {
+  background: #ffffff;
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid #e5e7eb;
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.search-input-wrapper {
+  flex: 1;
+  position: relative;
+  display: flex;
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.875rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem 0.625rem 0.5rem 2rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  background: #ffffff;
+  color: #111827;
+  transition: all 0.15s ease;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 82, 246, 0.1);
+}
+
+.search-input::placeholder {
+  color: #9ca3af;
+}
+
+.stats-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background: #f3f4f6;
+  border-radius: 0.25rem;
+  border: 1px solid #e5e7eb;
+  font-size: 0.75rem;
+  color: #6b7280;
+  white-space: normal;
+  font-weight: 500;
+  flex-shrink: 0;
+  width: auto;
+}
+
+.stats-count {
+  font-weight: 600;
+  color: #111827;
+}
+
+.stats-label {
+  font-weight: 400;
+}
diff --git a/packages/async-storage-plugin/src/ui/panel.tsx b/packages/async-storage-plugin/src/ui/panel.tsx
new file mode 100644
index 00000000..8abc68b8
--- /dev/null
+++ b/packages/async-storage-plugin/src/ui/panel.tsx
@@ -0,0 +1,247 @@
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { useEffect, useState } from 'react';
+import { AsyncStorageEventMap } from '../shared/messaging';
+import { AsyncStorageEntry } from '../shared/types';
+import { EntriesTable } from './entries-table';
+import { EditModal } from './edit-modal';
+import { AddEntryModal } from './add-entry-modal';
+import './panel.css';
+import './states.css';
+
+export default function AsyncStoragePanel() {
+  const [entries, setEntries] = useState<AsyncStorageEntry[]>([]);
+  const [allKeys, setAllKeys] = useState<string[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [editingEntry, setEditingEntry] = useState<AsyncStorageEntry | null>(null);
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
+  const [isAddModalOpen, setIsAddModalOpen] = useState<boolean>(false);
+
+  const client = useRozeniteDevToolsClient<AsyncStorageEventMap>({
+    pluginId: '@rozenite/async-storage-plugin',
+  });
+
+  // Initialize - get all keys and entries
+  useEffect(() => {
+    if (!client) return;
+
+    const allKeysSubscription = client.onMessage('host-all-keys', (keys) => {
+      setAllKeys(keys);
+      
+      if (keys.length > 0 && entries.length === 0) {
+        // Request entries for these keys
+        client.send('guest-get-entries', { keys });
+      } else if (keys.length === 0) {
+        // If no keys, clear entries and stop loading
+        setEntries([]);
+        setLoading(false);
+      }
+    });
+
+    const entriesSubscription = client.onMessage('host-entries', (newEntries) => {
+      setEntries(newEntries);
+      setLoading(false);
+    });
+
+    const entryUpdatedSubscription = client.onMessage('host-entry-updated', (updatedEntry) => {
+      setEntries((prevEntries) => {
+        const index = prevEntries.findIndex(entry => entry.key === updatedEntry.key);
+        if (index !== -1) {
+          // Entry exists, update it
+          const newEntries = [...prevEntries];
+          newEntries[index] = {
+            ...newEntries[index],
+            value: updatedEntry.value,
+            // We'll need to re-detect the type and re-parse
+            // In a full implementation, the host would send this
+          };
+          return newEntries;
+        } else {
+          // New entry, append it
+          // In a full implementation, we'd get the entry type from the host
+          return [...prevEntries, {
+            key: updatedEntry.key,
+            value: updatedEntry.value,
+            type: 'string'
+          }];
+        }
+      });
+    });
+
+    // Initial request for keys
+    client.send('guest-get-all-keys', {});
+
+    return () => {
+      allKeysSubscription.remove();
+      entriesSubscription.remove();
+      entryUpdatedSubscription.remove();
+    };
+  }, [client, entries.length]);
+
+  // Filter entries based on search term
+  const filteredEntries = searchTerm
+    ? entries.filter((entry) =>
+        entry.key.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        entry.value.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : entries;
+
+  // Handle editing an entry
+  const handleEditEntry = (entry: AsyncStorageEntry) => {
+    setEditingEntry(entry);
+    setIsEditModalOpen(true);
+  };
+
+  // Handle saving an edited entry
+  const handleSaveEntry = (key: string, newValue: string) => {
+    if (!client) return;
+
+    client.send('guest-update-entry', {
+      key,
+      value: newValue
+    });
+  };
+
+  // Handle deleting an entry
+  const handleDeleteEntry = (key: string) => {
+    if (!client) return;
+
+    client.send('guest-remove-entry', { key });
+  };
+
+  // Handle adding a new entry
+  const handleAddEntry = (key: string, value: string) => {
+    if (!client) return;
+
+    client.send('guest-update-entry', {
+      key,
+      value
+    });
+  };
+
+  // Handle clearing all entries
+  const handleClearAll = () => {
+    if (!client) return;
+
+    if (window.confirm('Are you sure you want to clear all AsyncStorage data? This cannot be undone.')) {
+      client.send('guest-clear-all', {});
+      setLoading(true);
+    }
+  };
+
+  // Handle refreshing entries
+  const handleRefresh = () => {
+    if (!client) return;
+
+    setLoading(true);
+    client.send('guest-get-all-keys', {});
+    client.send('guest-get-entries', {});
+  };
+
+  return (
+    <div className="async-storage-panel">
+      <header className="panel-header">
+        <div className="header-content">
+          <div className="header-left">
+            <h1 className="header-title">
+              <span className="title-icon">💾</span>
+              AsyncStorage
+            </h1>
+            <p className="header-subtitle">
+              Inspect and manage your AsyncStorage data
+            </p>
+          </div>
+          <div className="header-right">
+            <div className="actions-bar">
+              <button 
+                className="action-button" 
+                onClick={() => setIsAddModalOpen(true)}
+                disabled={loading}
+              >
+                Add Entry
+              </button>
+              <button 
+                className="action-button" 
+                onClick={handleRefresh}
+                disabled={loading}
+              >
+                Refresh
+              </button>
+              <button 
+                className="action-button danger" 
+                onClick={handleClearAll}
+                disabled={loading || entries.length === 0}
+              >
+                Clear All
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="panel-content">
+        <div className="search-section">
+          <div className="search-container">
+            <div className="search-input-wrapper">
+              <svg className="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+              <input
+                type="text"
+                placeholder="Search keys and values..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="search-input"
+                disabled={loading}
+              />
+            </div>
+            <div className="stats-badge">
+              <span className="stats-count">{filteredEntries.length}</span>
+              <span className="stats-label">
+                of {entries.length} entries
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {entries.length === 0 && !loading ? (
+          <div className="welcome-state">
+            <div className="welcome-icon">📱</div>
+            <h2>No AsyncStorage Data Found</h2>
+            <p>
+              Your app doesn't have any AsyncStorage entries yet, or the React Native connection hasn't been established.
+            </p>
+          </div>
+        ) : (
+          <EntriesTable
+            entries={filteredEntries}
+            onEditEntry={handleEditEntry}
+            loading={loading}
+          />
+        )}
+      </main>
+
+      {/* Edit Modal */}
+      <EditModal
+        isOpen={isEditModalOpen}
+        entry={editingEntry}
+        onClose={() => setIsEditModalOpen(false)}
+        onSave={handleSaveEntry}
+        onDelete={handleDeleteEntry}
+      />
+
+      {/* Add Modal */}
+      <AddEntryModal
+        isOpen={isAddModalOpen}
+        onClose={() => setIsAddModalOpen(false)}
+        onAdd={handleAddEntry}
+        existingKeys={allKeys}
+      />
+    </div>
+  );
+}
diff --git a/packages/async-storage-plugin/src/ui/states.css b/packages/async-storage-plugin/src/ui/states.css
new file mode 100644
index 00000000..6b831a44
--- /dev/null
+++ b/packages/async-storage-plugin/src/ui/states.css
@@ -0,0 +1,93 @@
+/* Loading State */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: #6b7280;
+  gap: 1rem;
+}
+
+.loading-spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid #e5e7eb;
+  border-top: 2px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-state p {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: #6b7280;
+  text-align: center;
+  gap: 1rem;
+}
+
+.empty-icon {
+  font-size: 2.5rem;
+  opacity: 0.5;
+}
+
+.empty-state h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+  max-width: 300px;
+}
+
+/* Welcome State */
+.welcome-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6b7280;
+  text-align: center;
+  gap: 1.25rem;
+}
+
+.welcome-icon {
+  font-size: 3rem;
+  opacity: 0.5;
+}
+
+.welcome-state h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.welcome-state p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+  max-width: 350px;
+  line-height: 1.5;
+}
diff --git a/packages/async-storage-plugin/tsconfig.json b/packages/async-storage-plugin/tsconfig.json
new file mode 100644
index 00000000..a9ea94bd
--- /dev/null
+++ b/packages/async-storage-plugin/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*", "react-native.ts", "rozenite.config.ts"],
+  "exclude": ["node_modules", "dist", "build"],
+  "references": [
+    {
+      "path": "../plugin-bridge"
+    },
+    {
+      "path": "../cli"
+    },
+    {
+      "path": "../vite-plugin"
+    }
+  ]
+}
diff --git a/packages/async-storage-plugin/tsconfig.tsbuildinfo b/packages/async-storage-plugin/tsconfig.tsbuildinfo
new file mode 100644
index 00000000..c9298cc4
--- /dev/null
+++ b/packages/async-storage-plugin/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/css-modules.d.ts","./src/react-native/async-storage-container.ts","./src/react-native/useAsyncStorageDevTools.ts","./src/shared/messaging.ts","./src/shared/types.ts","./src/ui/add-entry-modal.tsx","./src/ui/edit-modal.tsx","./src/ui/entries-table.tsx","./src/ui/panel.tsx","./react-native.ts","./rozenite.config.ts"],"errors":false,"version":"5.7.3"}
diff --git a/packages/async-storage-plugin/vite.config.ts b/packages/async-storage-plugin/vite.config.ts
new file mode 100644
index 00000000..7db548c7
--- /dev/null
+++ b/packages/async-storage-plugin/vite.config.ts
@@ -0,0 +1,20 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import { rozenitePlugin } from '@rozenite/vite-plugin';
+
+export default defineConfig({
+  root: __dirname,
+  plugins: [rozenitePlugin()],
+  base: './',
+  build: {
+    outDir: './dist',
+    emptyOutDir: false,
+    reportCompressedSize: false,
+    minify: true,
+    sourcemap: false,
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+});
diff --git a/plugin-directory.json b/plugin-directory.json
index 6e937433..3f89a9c8 100644
--- a/plugin-directory.json
+++ b/plugin-directory.json
@@ -26,5 +26,9 @@
   {
     "npmUrl": "https://www.npmjs.com/package/@rozenite/mmkv-plugin",
     "githubUrl": "https://github.com/callstackincubator/rozenite/tree/main/packages/mmkv-plugin"
+  },
+  {
+    "npmUrl": "https://www.npmjs.com/package/@rozenite/async-storage-plugin",
+    "githubUrl": "https://github.com/callstackincubator/rozenite/tree/main/packages/async-storage-plugin"
   }
 ]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58b94637..8b71872a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -172,6 +172,9 @@ importers:
 
   apps/playground:
     dependencies:
+      '@react-native-async-storage/async-storage':
+        specifier: ^2.2.0
+        version: 2.2.0(react-native@0.76.0(@babel/core@7.28.0)(@babel/preset-env@7.28.0(@babel/core@7.28.0))(@react-native-community/cli-server-api@15.0.1)(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1))
       '@react-navigation/elements':
         specifier: ^2.5.2
         version: 2.5.2(@react-navigation/native@7.1.14(react-native@0.76.0(@babel/core@7.28.0)(@babel/preset-env@7.28.0(@babel/core@7.28.0))(@react-native-community/cli-server-api@15.0.1)(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1))(react@18.3.1))(react-native-safe-area-context@5.5.2(react-native@0.76.0(@babel/core@7.28.0)(@babel/preset-env@7.28.0(@babel/core@7.28.0))(@react-native-community/cli-server-api@15.0.1)(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1))(react@18.3.1))(react-native@0.76.0(@babel/core@7.28.0)(@babel/preset-env@7.28.0(@babel/core@7.28.0))(@react-native-community/cli-server-api@15.0.1)(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1))(react@18.3.1)
@@ -184,6 +187,9 @@ importers:
       '@reduxjs/toolkit':
         specifier: ^2.8.2
         version: 2.8.2(react-redux@9.2.0(@types/react@18.3.23)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
+      '@rozenite/async-storage-plugin':
+        specifier: workspace:*
+        version: link:../../packages/async-storage-plugin
       '@rozenite/expo-atlas-plugin':
         specifier: workspace:*
         version: link:../../packages/expo-atlas-plugin
@@ -252,6 +258,46 @@ importers:
         specifier: workspace:*
         version: link:../../packages/cli
 
+  packages/async-storage-plugin:
+    dependencies:
+      '@rozenite/plugin-bridge':
+        specifier: 1.0.0-alpha.3
+        version: 1.0.0-alpha.3(react@18.3.1)
+      nanoevents:
+        specifier: ^9.1.0
+        version: 9.1.0
+    devDependencies:
+      '@react-native-async-storage/async-storage':
+        specifier: ^2.2.0
+        version: 2.2.0(react-native@0.76.0(@babel/core@7.28.0)(@babel/preset-env@7.28.0(@babel/core@7.28.0))(@react-native-community/cli-server-api@15.0.1)(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1))
+      '@rozenite/vite-plugin':
+        specifier: 1.0.0-alpha.3
+        version: 1.0.0-alpha.3(@types/node@22.17.0)(rollup@4.44.1)(typescript@5.8.3)(vite@6.3.5(@types/node@22.17.0)(jiti@2.4.2)(terser@5.43.1)(yaml@2.8.0))
+      '@types/react':
+        specifier: ~18.3.12
+        version: 18.3.23
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: 18.3.0
+        version: 18.3.0(react@18.3.1)
+      react-native:
+        specifier: 0.76.0
+        version: 0.76.0(@babel/core@7.28.0)(@babel/preset-env@7.28.0(@babel/core@7.28.0))(@react-native-community/cli-server-api@15.0.1)(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1)
+      react-native-web:
+        specifier: 0.21.0
+        version: 0.21.0(encoding@0.1.13)(react-dom@18.3.0(react@18.3.1))(react@18.3.1)
+      rozenite:
+        specifier: 1.0.0-alpha.3
+        version: 1.0.0-alpha.3
+      typescript:
+        specifier: ^5.7.3
+        version: 5.8.3
+      vite:
+        specifier: ^6.0.0
+        version: 6.3.5(@types/node@22.17.0)(jiti@2.4.2)(terser@5.43.1)(yaml@2.8.0)
+
   packages/cli:
     dependencies:
       '@clack/prompts':
@@ -3489,6 +3535,11 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@react-native-async-storage/async-storage@2.2.0':
+    resolution: {integrity: sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==}
+    peerDependencies:
+      react-native: 0.76.0
+
   '@react-native-community/cli-clean@15.0.1':
     resolution: {integrity: sha512-flGTfT005UZvW2LAXVowZ/7ri22oiiZE4pPgMvc8klRxO5uofKIRuohgiHybHtiCo/HNqIz45JmZJvuFrhc4Ow==}
 
@@ -3935,6 +3986,18 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rozenite/plugin-bridge@1.0.0-alpha.3':
+    resolution: {integrity: sha512-TpY/pGfCyuGbzCa3+Ug9IcXeCWmTl/vvjcN1XfPrSpV3JdIskOP92xVAa/7HWz/FresBU+3JRwLoJPARMsgjEA==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      react: '>=17'
+
+  '@rozenite/vite-plugin@1.0.0-alpha.3':
+    resolution: {integrity: sha512-Q4vEkYnfz+ErxEsY3orxsHZLW6rJSndxOuz968mQIfPOxcIGdJtMof/EWtN8cdtWm06CvU/per+uqJRg/rIP2w==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      vite: ^6.0.0
+
   '@rsbuild/core@1.3.22':
     resolution: {integrity: sha512-FGB7m8Tn/uiOhvqk0lw+NRMyD+VYJ+eBqVfpn0X11spkJDiPWn8UkMRvfzCX4XFcNZwRKYuuKJaZK1DNU8UG+w==}
     engines: {node: '>=16.10.0'}
@@ -7541,6 +7604,10 @@ packages:
     resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
     engines: {node: '>=8'}
 
+  is-plain-obj@2.1.0:
+    resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==}
+    engines: {node: '>=8'}
+
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -8319,6 +8386,10 @@ packages:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
 
+  merge-options@3.0.4:
+    resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
+    engines: {node: '>=10'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -9977,6 +10048,11 @@ packages:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
 
+  rozenite@1.0.0-alpha.3:
+    resolution: {integrity: sha512-h7T04XdijRSr3RPA3/hDuSQrWfT/8kqWhf2dfRCIYuNZZ2GFgk9nc4X72Tc2lgC6So+7nl7RpwjjOvBjwjuMgw==}
+    engines: {node: '>=22'}
+    hasBin: true
+
   rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
 
@@ -15159,6 +15235,11 @@ snapshots:
       '@types/react': 18.3.23
       '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
+  '@react-native-async-storage/async-storage@2.2.0(react-native@0.76.0(@babel/core@7.28.0)(@babel/preset-env@7.28.0(@babel/core@7.28.0))(@react-native-community/cli-server-api@15.0.1)(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1))':
+    dependencies:
+      merge-options: 3.0.4
+      react-native: 0.76.0(@babel/core@7.28.0)(@babel/preset-env@7.28.0(@babel/core@7.28.0))(@react-native-community/cli-server-api@15.0.1)(@types/react@18.3.23)(encoding@0.1.13)(react@18.3.1)
+
   '@react-native-community/cli-clean@15.0.1':
     dependencies:
       '@react-native-community/cli-tools': 15.0.1
@@ -16160,6 +16241,24 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.44.1':
     optional: true
 
+  '@rozenite/plugin-bridge@1.0.0-alpha.3(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+
+  '@rozenite/vite-plugin@1.0.0-alpha.3(@types/node@22.17.0)(rollup@4.44.1)(typescript@5.8.3)(vite@6.3.5(@types/node@22.17.0)(jiti@2.4.2)(terser@5.43.1)(yaml@2.8.0))':
+    dependencies:
+      '@vitejs/plugin-react': 4.6.0(vite@6.3.5(@types/node@22.17.0)(jiti@2.4.2)(terser@5.43.1)(yaml@2.8.0))
+      ejs: 3.1.10
+      vite: 6.3.5(@types/node@22.17.0)(jiti@2.4.2)(terser@5.43.1)(yaml@2.8.0)
+      vite-plugin-dts: 4.5.4(@types/node@22.17.0)(rollup@4.44.1)(typescript@5.8.3)(vite@6.3.5(@types/node@22.17.0)(jiti@2.4.2)(terser@5.43.1)(yaml@2.8.0))
+      vite-plugin-react-native-web: 2.1.1
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+      - typescript
+
   '@rsbuild/core@1.3.22':
     dependencies:
       '@rspack/core': 1.3.12(@swc/helpers@0.5.17)
@@ -20365,6 +20464,8 @@ snapshots:
 
   is-obj@2.0.0: {}
 
+  is-plain-obj@2.1.0: {}
+
   is-plain-obj@4.1.0: {}
 
   is-plain-object@2.0.4:
@@ -21529,6 +21630,10 @@ snapshots:
 
   merge-descriptors@2.0.0: {}
 
+  merge-options@3.0.4:
+    dependencies:
+      is-plain-obj: 2.1.0
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -24073,6 +24178,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  rozenite@1.0.0-alpha.3:
+    dependencies:
+      '@clack/prompts': 0.11.0
+      commander: 14.0.0
+      ejs: 3.1.10
+      is-unicode-supported: 2.1.0
+      nano-spawn: 1.0.2
+      picocolors: 1.1.1
+      validate-npm-package-name: 6.0.1
+
   rrweb-cssom@0.6.0: {}
 
   rsbuild-plugin-open-graph@1.0.2(@rsbuild/core@1.4.7):
diff --git a/website/src/docs/official-plugins/_meta.json b/website/src/docs/official-plugins/_meta.json
index c099db86..bc56d814 100644
--- a/website/src/docs/official-plugins/_meta.json
+++ b/website/src/docs/official-plugins/_meta.json
@@ -4,6 +4,11 @@
     "name": "overview",
     "label": "Overview"
   },
+  {
+    "type": "file",
+    "name": "async-storage",
+    "label": "Async Storage"
+  },
   {
     "type": "file",
     "name": "expo-atlas",
diff --git a/website/src/docs/official-plugins/async-storage.mdx b/website/src/docs/official-plugins/async-storage.mdx
new file mode 100644
index 00000000..1fadc3c3
--- /dev/null
+++ b/website/src/docs/official-plugins/async-storage.mdx
@@ -0,0 +1,97 @@
+import { PackageManagerTabs } from 'rspress/theme';
+
+# Async Storage Plugin
+
+The Async Storage plugin for Rozenite provides comprehensive inspection and management capabilities for [React Native's AsyncStorage](https://github.com/react-native-async-storage/async-storage) within the DevTools environment.
+
+![AsyncStorage plugin screenshot](/async-storage-plugin.jpg)
+
+## Features
+
+- **Real-time Storage Inspection**: View all AsyncStorage entries and their contents in real-time
+- **Data Type Detection**: Automatically detects and displays different data types (string, number, boolean, object, array)
+- **Search & Filter**: Quickly find specific keys or values with real-time search functionality
+- **Data Management**: Add, edit, and delete entries directly from the DevTools interface
+- **Visual Data Representation**: Color-coded type indicators and formatted value display
+
+## Installation
+
+1. Install the AsyncStorage plugin as a development dependency:
+
+<PackageManagerTabs command="install -D @rozenite/async-storage-plugin" />
+
+2. Install the AsyncStorage library if you haven't already:
+
+<PackageManagerTabs command="install @react-native-async-storage/async-storage" />
+
+## Setup
+
+Add the DevTools hook to your React Native app's entry point:
+
+```tsx
+// App.tsx
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useAsyncStorageDevTools } from '@rozenite/async-storage-plugin';
+
+function App() {
+  // Enable AsyncStorage DevTools in development
+  useAsyncStorageDevTools(AsyncStorage);
+  
+  return <YourApp />;
+}
+```
+
+## Usage
+
+The AsyncStorage plugin automatically connects to your app's AsyncStorage instance and provides the following capabilities:
+
+### Storage Inspection
+
+View all stored keys with their types and values in a well-organized table format. The plugin automatically detects different data types:
+- Strings (green)
+- Numbers (blue)
+- Booleans (yellow/red)
+- Objects (purple)
+- Arrays (pink)
+
+### Search and Filter
+
+Filter entries by key or value using the search box. This allows you to quickly find specific data in large storage collections.
+
+### Data Management
+
+- **Add Entries**: Add new key-value pairs to AsyncStorage
+- **Edit Entries**: Modify existing values directly from the UI
+- **Delete Entries**: Remove specific entries from AsyncStorage
+- **Clear All**: Wipe all AsyncStorage data (with confirmation prompt)
+
+### Real-time Updates
+
+The plugin monitors your AsyncStorage for changes and updates the UI in real-time. This is useful for debugging and understanding how your app interacts with stored data.
+
+## How It Works
+
+The AsyncStorage plugin works by:
+
+1. Intercepting all AsyncStorage operations (get, set, remove, clear)
+2. Creating a bridge between your app and the DevTools panel
+3. Providing UI tools to visualize and manipulate the stored data
+4. Automatically detecting and formatting different data types
+
+## Best Practices
+
+- Use the plugin only in development mode, as it adds some overhead to AsyncStorage operations
+- Be cautious when editing sensitive data like authentication tokens
+- Use the "Clear All" function carefully as it cannot be undone
+
+## Troubleshooting
+
+If the plugin is not working as expected:
+
+1. Ensure you've called `useAsyncStorageDevTools(AsyncStorage)` in your app
+2. Check that you're using the official AsyncStorage package
+3. Restart your development server and the DevTools
+
+## Contributing
+
+If you'd like to improve the AsyncStorage plugin, please check our [contributing guidelines](https://github.com/callstackincubator/rozenite/blob/main/CONTRIBUTING.md).
diff --git a/website/src/docs/official-plugins/overview.mdx b/website/src/docs/official-plugins/overview.mdx
index 10df4e58..16c7c573 100644
--- a/website/src/docs/official-plugins/overview.mdx
+++ b/website/src/docs/official-plugins/overview.mdx
@@ -10,6 +10,15 @@ Our official plugins are also in beta and may not work in all possible use-cases
 
 ## Available Plugins
 
+### [Async Storage](./async-storage.md)
+
+Inspect and manage AsyncStorage data in your React Native app with a comprehensive storage inspector. This plugin provides:
+
+- **Real-time Storage Inspection**: View all AsyncStorage entries and their contents in real-time
+- **Data Type Detection**: Automatically detects and displays different data types (string, number, boolean, object, array)
+- **Search & Filter**: Quickly find specific keys or values with real-time search functionality
+- **Data Management**: Add, edit, and delete entries directly from the DevTools interface
+
 ### [Expo Atlas](./expo-atlas.md)
 
 Integrate Expo Atlas directly into your React Native DevTools for bundle analysis and optimization. This plugin provides:
@@ -73,6 +82,8 @@ Inspect and manage MMKV storage instances in your React Native app with comprehe
 
 Plugins should be installed as development dependencies since they are only needed during development:
 
+<PackageManagerTabs command="install -D @rozenite/async-storage-plugin" />
+
 <PackageManagerTabs command="install -D @rozenite/expo-atlas-plugin" />
 
 <PackageManagerTabs command="install -D @rozenite/tanstack-query-plugin" />
@@ -101,4 +112,4 @@ Want to contribute to plugins or suggest new ones? Check out our [Plugin Develop
 
 ---
 
-**Next**: Learn about the [Expo Atlas plugin](./expo-atlas.md), [TanStack Query plugin](./tanstack-query.md), [Network Activity Inspector](./network-activity.md), [Redux DevTools plugin](./redux-devtools.md), [Performance Monitor plugin](./performance-monitor.md), or [MMKV plugin](./mmkv.md).
+**Next**: Learn about the [Expo Atlas plugin](./expo-atlas.md), [TanStack Query plugin](./tanstack-query.md), [Network Activity Inspector](./network-activity.md), [Redux DevTools plugin](./redux-devtools.md), [Performance Monitor plugin](./performance-monitor.md), [MMKV plugin](./mmkv.md) or [Async Storage plugin](./async-storage.md)