diff --git a/src/ui/Xenon.tsx b/src/ui/Xenon.tsx
index 0b6f117..2ab2b1d 100644
--- a/src/ui/Xenon.tsx
+++ b/src/ui/Xenon.tsx
@@ -1,5 +1,12 @@
 import { enableMapSet } from 'immer';
-import { createRef, memo, useImperativeHandle, useRef, type NamedExoticComponent } from 'react';
+import {
+  createRef,
+  memo,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  type NamedExoticComponent,
+} from 'react';
 import { Animated, StyleSheet, useWindowDimensions } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { useImmer } from 'use-immer';
@@ -48,6 +55,11 @@ const XenonComponent = memo<XenonComponentProps>(
       selectedPanel: DebuggerPanel.Network,
     });
 
+    const detailsShown = useMemo(
+      () => !debuggerState.selectedPanel && !!detailsData.value,
+      [debuggerState.selectedPanel],
+    );
+
     const networkInterceptor = useNetworkInterceptor({
       autoEnabled: autoInspectNetworkEnabled,
     });
@@ -103,10 +115,10 @@ const XenonComponent = memo<XenonComponentProps>(
               ]}
             >
               <SafeAreaView style={styles.safeArea}>
-                <DebuggerHeader />
+                <DebuggerHeader detailsShown={detailsShown} />
                 {debuggerState.selectedPanel === DebuggerPanel.Network && <NetworkPanel />}
                 {debuggerState.selectedPanel === DebuggerPanel.Console && <ConsolePanel />}
-                {!debuggerState.selectedPanel && !!detailsData.value && <DetailsViewer />}
+                {detailsShown && <DetailsViewer />}
               </SafeAreaView>
             </SafeAreaProvider>
           );
diff --git a/src/ui/components/headers/DebuggerHeader.tsx b/src/ui/components/headers/DebuggerHeader.tsx
index 8b2edc6..00e702e 100644
--- a/src/ui/components/headers/DebuggerHeader.tsx
+++ b/src/ui/components/headers/DebuggerHeader.tsx
@@ -1,15 +1,23 @@
-import { useContext } from 'react';
+import { useContext, useRef } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import { MainContext } from '../../../contexts';
+import colors from '../../../theme/colors';
+import icons from '../../../theme/icons';
 import { DebuggerPanel } from '../../../types';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
-import icons from '../../../theme/icons';
-import colors from '../../../theme/colors';
 
-export default function DebuggerHeader() {
+interface DebuggerHeaderProps {
+  detailsShown: boolean;
+}
+
+export default function DebuggerHeader({ detailsShown }: DebuggerHeaderProps) {
   const { debuggerState, setDebuggerState, networkInterceptor, logInterceptor } =
     useContext(MainContext)!;
 
+  const lastSelectedPanel = useRef<DebuggerPanel>(
+    debuggerState.selectedPanel ?? DebuggerPanel.Network,
+  );
+
   const hideDebugger = () => {
     setDebuggerState(draft => {
       draft.visibility = 'bubble';
@@ -34,17 +42,29 @@ export default function DebuggerHeader() {
     });
   };
 
-  const switchToNetworkPanel = () => {
+  const switchTo = (debuggerPanel: DebuggerPanel) => {
     setDebuggerState(draft => {
-      draft.selectedPanel = DebuggerPanel.Network;
+      draft.selectedPanel = debuggerPanel;
+      lastSelectedPanel.current = debuggerPanel;
     });
   };
 
-  const switchToConsolePanel = () => {
-    setDebuggerState(draft => {
-      draft.selectedPanel = DebuggerPanel.Console;
-    });
-  };
+  if (detailsShown) {
+    return (
+      <View style={styles.contentContainer}>
+        <DebuggerHeaderItem
+          isLabel
+          isActive
+          content="Go Back"
+          onPress={() => {
+            setDebuggerState(draft => {
+              draft.selectedPanel = lastSelectedPanel.current;
+            });
+          }}
+        />
+      </View>
+    );
+  }
 
   return (
     <ScrollView
@@ -61,7 +81,7 @@ export default function DebuggerHeader() {
         isLabel
         isActive={debuggerState.selectedPanel === DebuggerPanel.Network}
         content="Network Panel"
-        onPress={switchToNetworkPanel}
+        onPress={() => switchTo(DebuggerPanel.Network)}
       />
 
       <DebuggerHeaderItem
@@ -81,7 +101,7 @@ export default function DebuggerHeader() {
         isLabel
         isActive={debuggerState.selectedPanel === DebuggerPanel.Console}
         content="Log Panel"
-        onPress={switchToConsolePanel}
+        onPress={() => switchTo(DebuggerPanel.Console)}
       />
 
       <DebuggerHeaderItem
diff --git a/src/ui/components/items/DebuggerHeaderItem.tsx b/src/ui/components/items/DebuggerHeaderItem.tsx
index 193920a..4240085 100644
--- a/src/ui/components/items/DebuggerHeaderItem.tsx
+++ b/src/ui/components/items/DebuggerHeaderItem.tsx
@@ -46,6 +46,8 @@ const styles = StyleSheet.create({
     backgroundColor: colors.gray,
     borderWidth: 1,
     borderColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   labelContainer: {
     backgroundColor: 'transparent',