diff --git a/src/App.js b/src/App.js
index 610e47d694..c5cd350d36 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,44 +4,53 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 
 //Code to import Budget.js
 import Budget from './components/Budget';
+import Remaining from './components/Remaining';
+import ExpenseTotal from './components/ExpenseTotal';
+import ExpenseList from './components/ExpenseList';
+import ExpenseItem from './components/ExpenseItem';
+import AllocationForm from './components/AllocationForm';
 
-// Add code to import the other components here under
 
 
 import { AppProvider } from './context/AppContext';
 const App = () => {
-    return (
-        <AppProvider>
-            <div className='container'>
-                <h1 className='mt-3'>Company's Budget Allocation</h1>
-                    <div className='row mt-3'>
-                        {
-                            /* Add Budget component here */
-                        }        
-
-                        {
-                            /* Add Remaining component here*/
-                        }        
-
-                        {
-                            /* Add ExpenseTotal component here */
-                        }        
-                       
-                        {
-                            /* Add ExpenseList component here */
-                        }         
-
-                        {
-                            /* Add ExpenseItem component here */
-                        }        
-
-                        {
-                            /* Add AllocationForm component here under */
-                        }        
-
-                </div>
-            </div>
-        </AppProvider>
-    );
+  return (
+  <AppProvider>
+    <div className='container'>
+      <h1 className='mt-3'>Company's Budget Allocation</h1>
+
+      <div className='row mt-3'>
+        <div className='col-sm'>
+          <Budget />
+        </div>
+        <div className='col-sm'>
+          <Remaining />
+        </div>
+        <div className='col-sm'>
+          <ExpenseTotal />
+        </div>
+      </div>
+
+      <div className='row mt-3'>
+        <div className='col-sm'>
+          <ExpenseList />
+        </div>
+      </div>
+
+      <div className='row mt-3'>
+        <div className='col-sm'>
+          <ExpenseItem />
+        </div>
+      </div>
+
+      <div className='row mt-3'>
+        <div className='col-sm'>
+          <AllocationForm />
+        </div>
+      </div>
+    </div>
+  </AppProvider>
+);
+
 };
 export default App;