diff --git a/public/images/tutorial/codesandbox-devtools.png b/public/images/tutorial/codesandbox-devtools.png
deleted file mode 100644
index 1f7ebd500ed..00000000000
Binary files a/public/images/tutorial/codesandbox-devtools.png and /dev/null differ
diff --git a/public/images/tutorial/codesandbox-preview-warning.png b/public/images/tutorial/codesandbox-preview-warning.png
new file mode 100644
index 00000000000..0df31c2552a
Binary files /dev/null and b/public/images/tutorial/codesandbox-preview-warning.png differ
diff --git a/public/images/tutorial/react-developer-tools-on-tictactoe-preview.png b/public/images/tutorial/react-developer-tools-on-tictactoe-preview.png
new file mode 100644
index 00000000000..5922a46d7fe
Binary files /dev/null and b/public/images/tutorial/react-developer-tools-on-tictactoe-preview.png differ
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index c80c7f5fe3b..b09bc4386e4 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -899,19 +899,21 @@ body {
 
 ### React Developer Tools {/*react-developer-tools*/}
 
-React DevTools let you check the props and the state of your React components. You can find the React DevTools tab at the bottom of the _browser_ section in CodeSandbox:
+React Developer Tools let you check the props and the state of your React components. It is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. Install it, and the *Components* tab will appear in your browser Developer Tools for sites using React.
 
-![React DevTools in CodeSandbox](../images/tutorial/codesandbox-devtools.png)
+After React Developer Tools installation, you can take the URL present in the _preview_ section of CodeSandbox (similar to "https://***.csb.app/") and open it in a new browser tab.
 
-To inspect a particular component on the screen, use the button in the top left corner of React DevTools:
+![Warning shown by CodeSandbox for preview in a new tab](../images/tutorial/codesandbox-preview-warning.png)
 
-![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
+For this warning by CodeSandbox, you may click "Yes, proceed to preview".
 
-<Note>
+On the preview page, open the *Components* tab in your browser Developer Tools.
 
-For local development, React DevTools is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. Install it, and the *Components* tab will appear in your browser Developer Tools for sites using React.
+![React DevTools in CodeSandbox](../images/tutorial/react-developer-tools-on-tictactoe-preview.png)
 
-</Note>
+To inspect a particular component on the screen, use the button in the top left corner of the *Components* tab:
+
+![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
 
 ## Completing the game {/*completing-the-game*/}