diff --git a/src/App.js b/src/App.js
index 610e47d694..62456bfba7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,47 +1,44 @@
 import React from 'react';
-
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-//Code to import Budget.js
+import { AppProvider } from './context/AppContext';
 import Budget from './components/Budget';
+import ExpenseTotal from './components/ExpenseTotal';
+import ExpenseList from './components/ExpenseList';
+import AllocationForm from './components/AllocationForm';
+import RemainingBudget from './components/Remaining';
 
-// 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 className='row mt-3'>
+                    <div className='col-sm'>
+                        <Budget />
+                    </div>
+                    <div className='col-sm'>
+                        <RemainingBudget />
+                    </div>
+                    <div className='col-sm'>
+                        <ExpenseTotal />
+                    </div>
+                </div>
+                <h3 className='mt-3'>Allocation</h3>
+                <div className='row '>
+                    <div className='col-sm'>
+                        <ExpenseList />
+                    </div>
+                </div>
+                <h3 className='mt-3'>Change allocation</h3>
+                <div className='row mt-3'>
+                    <div className='col-sm'>
+                        <AllocationForm/>
+                    </div>
                 </div>
             </div>
         </AppProvider>
     );
 };
+
 export default App;