diff --git a/to-do/src/App.js b/to-do/src/App.js
index 5f3bdd7..f1ef814 100644
--- a/to-do/src/App.js
+++ b/to-do/src/App.js
@@ -1,11 +1,12 @@
-import React, { useReducer } from 'react'
+import React, { useReducer, Suspense } from 'react'
 import { Container } from 'reactstrap';
 import "bootstrap/dist/css/bootstrap.min.css";
 import './App.css';
 import { TodoContext } from './context/TodoContext';
 import todoReducer from './context/reducer';
-import TodoForm from './components/TodoForm'
-import Todos from './components/Todos';
+// importing these components with react lazy for improving initial loading time 
+const TodoForm= React.lazy(()=>import("./components/TodoForm"))
+const Todos= React.lazy(()=>import("./components/Todos"))
 
 const App = () => {
   const [todos, dispatch] = useReducer(todoReducer, [])
@@ -15,8 +16,10 @@ const App = () => {
     <TodoContext.Provider value={{ todos, dispatch }}>
       <Container fluid>
         <h1>Todo Application</h1>
+        <Suspense fallback={<div>loading...</div>}>
         <Todos />
         <TodoForm />
+      </Suspense>
       </Container>
     </TodoContext.Provider>
   );