diff --git a/courses/react-js/begginer-level/building-user-interfaces/IfElseExample.js b/courses/react-js/begginer-level/building-user-interfaces/IfElseExample.js
deleted file mode 100644
index ad860680a..000000000
--- a/courses/react-js/begginer-level/building-user-interfaces/IfElseExample.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useState } from "react";
-
-function IfElseExample() {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-  const handleLogin = () => {
-    setIsLoggedIn(true);
-  };
-
-  const handleLogout = () => {
-    setIsLoggedIn(false);
-  };
-
-  if (isLoggedIn) {
-    return (
-      <div>
-        <p>Welcome, user!</p>
-        <button onClick={handleLogout}>Logout</button>
-      </div>
-    );
-  } else
-    return (
-      <div>
-        <button onClick={handleLogin}>Login</button>
-      </div>
-    );
-}
-
-export default IfElseExample;
diff --git a/courses/react-js/begginer-level/building-user-interfaces/KeyPropExample.js b/courses/react-js/begginer-level/building-user-interfaces/KeyPropExample.js
deleted file mode 100644
index c8e550e06..000000000
--- a/courses/react-js/begginer-level/building-user-interfaces/KeyPropExample.js
+++ /dev/null
@@ -1,18 +0,0 @@
-function KeyPropExample() {
-  const items = [
-    { id: 1, name: "Apple" },
-    { id: 2, name: "Banana" },
-    { id: 3, name: "Cherry" },
-    { id: 4, name: "Date" },
-  ];
-
-  return (
-    <ul>
-      {items.map((item) => (
-        <li key={item.id}>{item.name}</li>
-      ))}
-    </ul>
-  );
-}
-
-export default KeyPropExample;
\ No newline at end of file
diff --git a/courses/react-js/begginer-level/building-user-interfaces/ListExample.js b/courses/react-js/begginer-level/building-user-interfaces/ListExample.js
deleted file mode 100644
index 344e49e77..000000000
--- a/courses/react-js/begginer-level/building-user-interfaces/ListExample.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function ListExample() {
-  const items = ["Apple", "Banana", "Cherry", "Date"];
-
-  return (
-    <ul>
-      {items.map((item, index) => (
-        <li key={index}>{item}</li>
-      ))}
-    </ul>
-  );
-}
-
-export default ListExample;
\ No newline at end of file
diff --git a/courses/react-js/begginer-level/building-user-interfaces/TernaryOperatorExample.js b/courses/react-js/begginer-level/building-user-interfaces/TernaryOperatorExample.js
deleted file mode 100644
index 295b9b658..000000000
--- a/courses/react-js/begginer-level/building-user-interfaces/TernaryOperatorExample.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useState } from "react";
-
-function TernaryOperatorExample() {
-  const [isError, setIsError] = useState(false);
-
-  const handleError = () => {
-    setIsError(true);
-  };
-
-  return (
-    <div>
-      {isError ? (
-        <p style={{ color: "red" }}>An error occurred!</p>
-      ) : (
-        <button onClick={handleError}>Trigger Error</button>
-      )}
-    </div>
-  );
-}
-
-export default TernaryOperatorExample;
\ No newline at end of file
diff --git a/courses/react-js/begginer-level/building-user-interfaces/lesson_1.md b/courses/react-js/begginer-level/building-user-interfaces/lesson_1.md
index e9a5c5a02..916bc7dd7 100644
--- a/courses/react-js/begginer-level/building-user-interfaces/lesson_1.md
+++ b/courses/react-js/begginer-level/building-user-interfaces/lesson_1.md
@@ -7,9 +7,6 @@ description: "Learn how to conditionally render content in React based on compon
 tags: [courses, react-js, beginner-level, building-user-interfaces, conditional-rendering, if-else, ternary-operator, logical-operators]
 ---
 
-import IfElseExample from "./IfElseExample";
-import TernaryOperatorExample from "./TernaryOperatorExample";
-
 In this lesson, you will learn how to conditionally render content in React based on component state. Conditional rendering allows you to display different elements or components based on certain conditions, such as user interactions, API responses, or internal component state.
 
 ## Introduction to conditional rendering in React
@@ -52,10 +49,6 @@ function IfElseExample() {
 export default IfElseExample;
 ```
 
-<BrowserWindow minHeight="300px">
-  <IfElseExample />
-</BrowserWindow>
-
 In this example, we define a functional component called `IfElseExample` that conditionally renders content based on the `isLoggedIn` state. If the user is logged in (`isLoggedIn` is `true`), we display a welcome message and a "Logout" button. Otherwise, we show a "Login" button to allow the user to log in.
 
 ## Using the ternary operator for conditional rendering
@@ -86,10 +79,6 @@ function TernaryOperatorExample() {
 export default TernaryOperatorExample;
 ```
 
-<BrowserWindow minHeight="300px">
-  <TernaryOperatorExample />
-</BrowserWindow>
-
 In this example, we define a functional component called `TernaryOperatorExample` that uses the ternary operator to conditionally render content based on the `isError` state. If an error occurs (`isError` is `true`), we display an error message in red text. Otherwise, we show a button that triggers the error when clicked.
 
 ## Differences between if/else statements and the ternary operator
diff --git a/courses/react-js/begginer-level/building-user-interfaces/lesson_2.md b/courses/react-js/begginer-level/building-user-interfaces/lesson_2.md
index 7e96d9ec9..894aa2200 100644
--- a/courses/react-js/begginer-level/building-user-interfaces/lesson_2.md
+++ b/courses/react-js/begginer-level/building-user-interfaces/lesson_2.md
@@ -16,9 +16,6 @@ tags:
   ]
 ---
 
-import ListExample from "./ListExample";
-import KeyPropExample from "./KeyPropExample";
-
 In this lesson, you will learn how to render dynamic lists in React using arrays and the `map()` function. Dynamic lists allow you to display a collection of items in your components, such as a list of products, blog posts, or user comments. By iterating over an array of data and generating list items, you can create dynamic and interactive user interfaces.
 
 ## Introduction to rendering dynamic lists
@@ -50,7 +47,10 @@ export default ListExample;
 ```
 
 <BrowserWindow minHeight="300px">
-  <ListExample />
+  - Apple
+  - Banana
+  - Cherry
+  - Date
 </BrowserWindow>
 
 In this example, we define a functional component called `ListExample` that renders a list of items using the `map()` function. The `items` array contains four fruit names, and we use the `map()` function to generate a list item for each element in the array. The `key` prop is used to provide a unique identifier for each list item.
@@ -85,7 +85,10 @@ export default KeyPropExample;
 ```
 
 <BrowserWindow minHeight="300px">
-  <KeyPropExample />
+  - Apple
+  - Banana
+  - Cherry
+  - Date
 </BrowserWindow>
 
 In this example, we define a list of items as an array of objects, where each object contains an `id` and a `name` property. We use the `id` property as the `key` prop for each list item to ensure that React can identify and track the items correctly.
@@ -124,5 +127,4 @@ In this example, we define a list of products as an array of objects, where each
 
 ## Conclusion
 
-Rendering dynamic lists in React using arrays and the `map()` function is a powerful technique for displaying collections of data in your components. By iterating over an array of data and generating list items dynamically, you can create interactive and data-driven user interfaces. Remember to provide a unique `key` prop for each list item to optimize list rendering and maintain component state effectively.
-```
+Rendering dynamic lists in React using arrays and the `map()` function is a powerful technique for displaying collections of data in your components. By iterating over an array of data and generating list items dynamically, you can create interactive and data-driven user interfaces. Remember to provide a unique `key` prop for each list item to optimize list rendering and maintain component state effectively.
\ No newline at end of file
diff --git a/courses/react-js/begginer-level/building-your-first-react-app/Counter.js b/courses/react-js/begginer-level/building-your-first-react-app/Counter.js
deleted file mode 100644
index 1935c23f0..000000000
--- a/courses/react-js/begginer-level/building-your-first-react-app/Counter.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from "react";
-
-class Counter extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { count: 0 };
-  }
-
-  incrementCount = () => {
-    this.setState({ count: this.state.count + 1 });
-  };
-
-  render() {
-    return (
-      <div>
-        <p>Count: {this.state.count}</p>
-        <button onClick={this.incrementCount}>Increment</button>
-      </div>
-    );
-  }
-}
-
-export default Counter;
diff --git a/courses/react-js/begginer-level/building-your-first-react-app/MyComponent.js b/courses/react-js/begginer-level/building-your-first-react-app/MyComponent.js
deleted file mode 100644
index 6d2ed0efe..000000000
--- a/courses/react-js/begginer-level/building-your-first-react-app/MyComponent.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-// Define a functional component using JSX
-const MyComponent = () => {
-  // Define some variables to use in JSX expressions
-  const name = "Ajay";
-  const isLoggedIn = true;
-  const fruits = ["apple", "banana", "orange"];
-
-  // JSX component rendering
-  return (
-    <div>
-      <h1>Hello, {name}!</h1>
-      
-      {/* Embedding expressions */}
-      <p>{isLoggedIn ? "You are logged in" : "Please log in"}</p>
-
-      {/* Defining attributes */}
-      <img src="https://github.com/ajay-dhangar.png" alt="Ajay" style={{ width: "100px", borderRadius: "50%" }} />
-
-      {/* Conditionally render elements */}
-      {isLoggedIn && <p>Welcome back, {name}!</p>}
-
-      {/* Mapping over arrays */}
-      <ul>
-        {fruits.map((fruit, index) => (
-          <li key={index}>{fruit}</li>
-        ))}
-      </ul>
-
-      {/* Compose components */}
-      <Button text="Click me" onClick={() => alert("Button clicked!")} />
-    </div>
-  );
-}
-
-// Another component to compose
-const Button = ({ text, onClick }) => {
-  return <button onClick={onClick}>{text}</button>;
-}
-
-export default MyComponent;
\ No newline at end of file
diff --git a/courses/react-js/begginer-level/building-your-first-react-app/WelcomeMessage.js b/courses/react-js/begginer-level/building-your-first-react-app/WelcomeMessage.js
deleted file mode 100644
index 78fd4f26f..000000000
--- a/courses/react-js/begginer-level/building-your-first-react-app/WelcomeMessage.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function WelcomeMessage() {
-  return <div>Welcome to React!</div>;
-}
-
-export default WelcomeMessage;
diff --git a/courses/react-js/begginer-level/building-your-first-react-app/lesson_2.md b/courses/react-js/begginer-level/building-your-first-react-app/lesson_2.md
index 488ff07bc..6b687f1e2 100644
--- a/courses/react-js/begginer-level/building-your-first-react-app/lesson_2.md
+++ b/courses/react-js/begginer-level/building-your-first-react-app/lesson_2.md
@@ -16,9 +16,6 @@ tags:
   ]
 ---
 
-import WelcomeMessage from "./WelcomeMessage";
-import Counter from "./Counter";
-
 In this lesson, we will explore the concept of components in React and understand the structure and usage of functional and class-based components. Components are the building blocks of a React application, and they encapsulate the UI elements and logic of the application.
 
 ## What are components in React?
@@ -143,14 +140,30 @@ In this practice session, you will create a new functional component and a class
    export default App;
    ```
 
-    Now, run your React application and test the `WelcomeMessage` and `Counter` components to see how they work.
+   Now, run your React application and test the `WelcomeMessage` and `Counter` components to see how they work.
 
-    <BrowserWindow>
-        <div>
-            <WelcomeMessage />
-            <Counter />
-        </div>
-    </BrowserWindow>
+     <BrowserWindow>
+         <div>
+             Welcome to React!
+             <div>
+                <p>Count: <span id="count">0</span></p>
+                <button
+                style={{
+                  marginTtop: "10px",                  
+                  paddingTop: "15px",
+                  paddingBottom: "0",
+                  fontSize: "16px"}}
+                    onClick={
+                      () => {
+                        let count = parseInt(document.getElementById('count').textContent); document.getElementById('count').textContent = count + 1;
+                      }
+                    }
+                >
+                  Increment
+                </button>
+              </div>
+         </div>
+     </BrowserWindow>
 
 4. Experiment with the `WelcomeMessage` and `Counter` components by customizing their content and functionality. Try adding new features or modifying the existing components to enhance your React application. After making changes, test the components to see the updated behavior. And share your experience with us on our [Discord Community](https://discord.gg/5VjTyJcf).
 
@@ -165,7 +178,6 @@ In this practice session, you will create a new functional component and a class
 
 :::
 
-
 :::tip Quick Recap
 
 - Components are the building blocks of a React application that encapsulate UI elements and logic.
diff --git a/courses/react-js/begginer-level/building-your-first-react-app/lesson_3.md b/courses/react-js/begginer-level/building-your-first-react-app/lesson_3.md
index 07707ba15..a4f45de33 100644
--- a/courses/react-js/begginer-level/building-your-first-react-app/lesson_3.md
+++ b/courses/react-js/begginer-level/building-your-first-react-app/lesson_3.md
@@ -15,9 +15,6 @@ tags:
   ]
 ---
 
-import MyComponent from "./MyComponent.js";
-
-
 In this lesson, we will explore JSX (JavaScript XML) and learn how to use it to build UI elements in React. JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. It provides a more readable and concise way to define UI components in React.
 
 ## What is JSX?
@@ -117,10 +114,6 @@ export default MyComponent;
 
 In this example, we define a functional component called `MyComponent` that renders a greeting message, conditional text, an image, a conditional paragraph, a list of fruits, and a composed `Button` component. We use JSX features like embedding expressions, defining attributes, conditional rendering, mapping arrays, and composing components to build the UI structure.
 
-<BrowserWindow>
-  <MyComponent />
-</BrowserWindow>
-
 Try modifying the JSX code and exploring different features to understand how JSX works and how you can use it to build UI elements in React.
 
 :::