diff --git a/courses/react-js/intermidiate-level/managing-complex-uis/App.js b/courses/react-js/intermidiate-level/managing-complex-uis/App.js
deleted file mode 100644
index 5739fcd09..000000000
--- a/courses/react-js/intermidiate-level/managing-complex-uis/App.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useState } from "react";
-import ParentComponent from "./ParentComponent";
-
-function App() {
-  const [count, setCount] = useState(0);
-
-  const incrementCount = () => {
-    setCount(count + 1);
-  };
-
-  return (
-    <div>
-      <h1>Count: {count}</h1>
-      <ParentComponent count={count} incrementCount={incrementCount} />
-    </div>
-  );
-}
-
-export default App;
\ No newline at end of file
diff --git a/courses/react-js/intermidiate-level/managing-complex-uis/ChildComponent.js b/courses/react-js/intermidiate-level/managing-complex-uis/ChildComponent.js
deleted file mode 100644
index f417fc64a..000000000
--- a/courses/react-js/intermidiate-level/managing-complex-uis/ChildComponent.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-function ChildComponent({ incrementCount }) {
-  return (
-    <div>
-      <h3>Child Component</h3>
-      <button onClick={incrementCount}>Increment Count</button>
-    </div>
-  );
-}
-
-export default ChildComponent;
\ No newline at end of file
diff --git a/courses/react-js/intermidiate-level/managing-complex-uis/ParentComponent.js b/courses/react-js/intermidiate-level/managing-complex-uis/ParentComponent.js
deleted file mode 100644
index 1c2f0cb91..000000000
--- a/courses/react-js/intermidiate-level/managing-complex-uis/ParentComponent.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import ChildComponent from "./ChildComponent";
-
-function ParentComponent({ count, incrementCount }) {
-  return (
-    <div>
-      <h2>Parent Component</h2>
-      <p>Count: {count}</p>
-      <ChildComponent incrementCount={incrementCount} />
-    </div>
-  );
-}
-
-export default ParentComponent;
\ No newline at end of file
diff --git a/courses/react-js/intermidiate-level/managing-complex-uis/TodoApp.js b/courses/react-js/intermidiate-level/managing-complex-uis/TodoApp.js
deleted file mode 100644
index c41fd0802..000000000
--- a/courses/react-js/intermidiate-level/managing-complex-uis/TodoApp.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState } from "react";
-import TodoList from "./TodoList";
-
-function TodoApp() {
-  const [todos, setTodos] = useState([
-    { id: 1, text: "Learn React", completed: false },
-    { id: 2, text: "Build a project", completed: false },
-    { id: 3, text: "Deploy to production", completed: false },
-  ]);
-  const [newTodoText, setNewTodoText] = useState("");
-
-  const toggleTodo = (id) => {
-    setTodos((prevTodos) =>
-      prevTodos.map((todo) =>
-        todo.id === id ? { ...todo, completed: !todo.completed } : todo
-      )
-    );
-  };
-
-  const handleAddTodo = () => {
-    if (newTodoText.trim() !== "") {
-      setTodos((prevTodos) => [
-        ...prevTodos,
-        {
-          id: prevTodos.length + 1,
-          text: newTodoText,
-          completed: false,
-        },
-      ]);
-      setNewTodoText("");
-    }
-  };
-
-  return (
-    <div style={{ border: "1px solid #ccc", padding: "20px", borderRadius: "5px" }}>
-      <h1>Todo App</h1>
-      <div>
-        <input
-          type="text"
-          placeholder="Enter a new todo"
-          value={newTodoText}
-          onChange={(e) => setNewTodoText(e.target.value)}
-          style={{ marginRight: "10px", padding: "5px"}}
-        />
-        <button onClick={handleAddTodo} style={{ padding: "5px 10px", cursor: "pointer" }}> Add Todo </button>
-      </div>
-      <TodoList todos={todos} toggleTodo={toggleTodo} />
-    </div>
-  );
-}
-
-export default TodoApp;
\ No newline at end of file
diff --git a/courses/react-js/intermidiate-level/managing-complex-uis/TodoItem.js b/courses/react-js/intermidiate-level/managing-complex-uis/TodoItem.js
deleted file mode 100644
index 6f22a80a9..000000000
--- a/courses/react-js/intermidiate-level/managing-complex-uis/TodoItem.js
+++ /dev/null
@@ -1,33 +0,0 @@
-function TodoItem({ todo, toggleTodo }) {
-  const { id, text, completed } = todo;
-
-  const handleToggle = () => {
-    toggleTodo?.(id);
-  };
-
-  const handleKeyPress = (event) => {
-    if (event.key === 'Enter') {
-      handleToggle();
-    }
-  };
-
-  return (
-    <div style={{ marginBottom: "5px" }}>
-      <span
-        style={{
-          textDecoration: completed ? "line-through" : "none",
-          marginLeft: "10px",
-          cursor: "pointer",
-          color: completed ? "var(--ifm-task-complete-color)" : "var(--ifm-task-incomplete-color)",
-        }}
-        onClick={handleToggle}
-        onKeyDown={handleKeyPress} 
-        tabIndex={0}
-      >
-        {text}
-      </span>
-    </div>
-  );
-}
-
-export default TodoItem;
diff --git a/courses/react-js/intermidiate-level/managing-complex-uis/TodoList.js b/courses/react-js/intermidiate-level/managing-complex-uis/TodoList.js
deleted file mode 100644
index 7f7c77d58..000000000
--- a/courses/react-js/intermidiate-level/managing-complex-uis/TodoList.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import TodoItem from "./TodoItem";
-
-function TodoList({ todos, toggleTodo }) {
-  return (
-    <div style={{ marginTop: "20px", border: "1px solid #ccc", padding: "20px", borderRadius: "5px" }}>
-      <h2 style={{ marginBottom: "20px" }}>Todo List</h2>
-      {todos.map((todo) => (
-        <TodoItem key={todo.id} todo={todo} toggleTodo={toggleTodo} />
-      ))}
-    </div>
-  );
-}
-
-export default TodoList;
\ No newline at end of file
diff --git a/courses/react-js/intermidiate-level/managing-complex-uis/lesson_1.md b/courses/react-js/intermidiate-level/managing-complex-uis/lesson_1.md
index e50c7d5a5..783ed32f7 100644
--- a/courses/react-js/intermidiate-level/managing-complex-uis/lesson_1.md
+++ b/courses/react-js/intermidiate-level/managing-complex-uis/lesson_1.md
@@ -7,8 +7,6 @@ description: "Learn how to lift state up in React to manage shared state across
 tags: [courses, react-js, intermediate-level, state-management, lifting-state-up]
 ---
 
-import App from './App';
-
 In React applications, managing shared state between components can be challenging, especially when components are not directly related in the component tree. Lifting state up is a common pattern in React that allows you to manage shared state in a parent component and pass it down to child components as props. This lesson will introduce you to the concept of lifting state up and show you how to use it to share state between components in your React applications.
 
 ## What is lifting state up?
@@ -79,10 +77,6 @@ Here's an example of lifting state up in a React application:
 
 In this example, we have an `App` component that manages the `count` state using the `useState` hook. The `App` component passes the `count` state and an `incrementCount` function down to the `ParentComponent` as props. The `ParentComponent` then passes the `incrementCount` function down to the `ChildComponent` as a prop. When the `ChildComponent` button is clicked, it calls the `incrementCount` function to update the `count` state in the `App` component.
 
-<BrowserWindow>
-    <App />
-</BrowserWindow>
-
 By lifting the `count` state up to the `App` component, we can share the state between the `ParentComponent` and `ChildComponent` without having to pass the state through multiple levels of components. This pattern helps keep the application's data in sync and makes it easier to manage shared state across components.
 
 ## Benefits of lifting state up
diff --git a/courses/react-js/intermidiate-level/managing-complex-uis/lesson_2.md b/courses/react-js/intermidiate-level/managing-complex-uis/lesson_2.md
index 7cde70851..a246002ad 100644
--- a/courses/react-js/intermidiate-level/managing-complex-uis/lesson_2.md
+++ b/courses/react-js/intermidiate-level/managing-complex-uis/lesson_2.md
@@ -7,8 +7,6 @@ description: "Learn about the challenges of prop drilling in React applications
 tags: [courses, react-js, intermediate-level, state-management, prop-drilling, context-api, redux, state-management-libraries]
 ---
 
-import TodoApp from './TodoApp';
-
 In React applications, passing data through multiple levels of components using props can become cumbersome and lead to prop drilling. Prop drilling refers to the process of passing props down the component tree to child components that do not directly use the props, resulting in complex and hard-to-maintain code. This lesson will explore the challenges of prop drilling in React applications and discuss strategies to avoid them using context, Redux, or other state management libraries.
 
 ## What is prop drilling?
@@ -175,10 +173,6 @@ Let's look at an example of prop drilling in a React application for Todo list m
 
 In this example, the `TodoApp` component manages the state of todos and new todo text using the `useState` hook. It passes the todos array and `toggleTodo` function to the `TodoList` component as props. The `TodoList` component then maps over the todos array and renders a `TodoItem` component for each todo, passing the todo object and `toggleTodo` function as props.
 
-<BrowserWindow>
-    <TodoApp />
-</BrowserWindow>
-
 This example demonstrates prop drilling, as the `TodoApp` component passes down the todos array and `toggleTodo` function through the `TodoList` component to the `TodoItem` component. While this approach works for small applications, it can become cumbersome and hard to maintain as the application grows in complexity.
 
 ## Conclusion
diff --git a/docs/react/back-end-integration/DataFetcher.jsx b/docs/react/back-end-integration/DataFetcher.jsx
index 7fa44fd68..8e7b5360d 100644
--- a/docs/react/back-end-integration/DataFetcher.jsx
+++ b/docs/react/back-end-integration/DataFetcher.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import axios from 'axios';
 
 const DataFetcher = () => {
diff --git a/docs/react/back-end-integration/FetchDataComponent.jsx b/docs/react/back-end-integration/FetchDataComponent.jsx
index 6c80cc734..371e6a2e1 100644
--- a/docs/react/back-end-integration/FetchDataComponent.jsx
+++ b/docs/react/back-end-integration/FetchDataComponent.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 function FetchDataComponent() {
   const [userData, setUserData] = useState(null);
@@ -8,6 +8,9 @@ function FetchDataComponent() {
     async function fetchData() {
       try {
         const response = await fetch('https://api.github.com/users/Ajay-Dhangar');
+        if (!response.ok) {
+          throw new Error('Failed to fetch data');
+        }
         const data = await response.json();
         setUserData(data);
       } catch (error) {