diff --git a/app/(app)/todo-detail.tsx b/app/(app)/todo-detail.tsx
index 6c209ec..b7e21f0 100644
--- a/app/(app)/todo-detail.tsx
+++ b/app/(app)/todo-detail.tsx
@@ -18,6 +18,13 @@ import { useKeyboardShift } from '@/hooks/useKeyboardShift';
 
 export default function TodoDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
+
+  if (!id) return null;
+
+  return <TodoDetailContent key={id} id={id} />;
+}
+
+function TodoDetailContent({ id }: { id: string }) {
   const { t } = useTranslation();
   const router = useRouter();
   const { colors } = useTheme();
diff --git a/providers/theme.tsx b/providers/theme.tsx
index ff51ddb..4fe454e 100644
--- a/providers/theme.tsx
+++ b/providers/theme.tsx
@@ -35,8 +35,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   );
 
   const toggleTheme = useCallback(() => {
-    setPreference(isDark ? 'light' : 'dark');
-  }, [isDark, setPreference]);
+    setPreference(preference !== 'system' ? 'system' : isDark ? 'light' : 'dark');
+  }, [preference, isDark, setPreference]);
 
   const value = useMemo<ThemeContextValue>(
     () => ({ colors, isDark, shadow, toggleTheme }),