diff --git a/components/LoadingState.test.tsx b/components/LoadingState.test.tsx
new file mode 100644
index 0000000..1085487
--- /dev/null
+++ b/components/LoadingState.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import LoadingState from './LoadingState'
+
+describe('LoadingState Component', () => {
+  describe('Basic Rendering', () => {
+    it('should render ActivityIndicator', () => {
+      const { UNSAFE_root } = render(<LoadingState />)
+      expect(UNSAFE_root).toBeTruthy()
+    })
+
+    it('should render with optional message', () => {
+      const { getByText } = render(<LoadingState message="Loading..." />)
+      expect(getByText('Loading...')).toBeTruthy()
+    })
+
+    it('should render without message when not provided', () => {
+      const { queryByText } = render(<LoadingState />)
+      expect(queryByText(/./)).toBeNull()
+    })
+  })
+
+  describe('Theme Support', () => {
+    it('should use light color by default', () => {
+      const { UNSAFE_root } = render(<LoadingState />)
+      expect(UNSAFE_root).toBeTruthy()
+    })
+
+    it('should accept custom color', () => {
+      const { UNSAFE_root } = render(<LoadingState color="#FF0000" />)
+      expect(UNSAFE_root).toBeTruthy()
+    })
+  })
+
+  describe('Props', () => {
+    it('should accept testID prop', () => {
+      const { getByTestId } = render(<LoadingState testID="loading-test" />)
+      expect(getByTestId('loading-test')).toBeTruthy()
+    })
+  })
+})
diff --git a/components/LoadingState.tsx b/components/LoadingState.tsx
new file mode 100644
index 0000000..58586a9
--- /dev/null
+++ b/components/LoadingState.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { View, ActivityIndicator, ViewProps } from 'react-native'
+import Text from './ui/Text'
+
+interface LoadingStateProps extends ViewProps {
+  message?: string
+  color?: string
+}
+
+export default function LoadingState({ message, color = '#F5F5F5', testID, ...props }: LoadingStateProps) {
+  return (
+    <View testID={testID} className="flex-1 items-center justify-center" {...props}>
+      <ActivityIndicator size="large" color={color} />
+      {message && <Text className="mt-4">{message}</Text>}
+    </View>
+  )
+}