diff --git a/public/index.html b/public/index.html
index cd92541..d02911e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,9 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div id="root">
+     <!-- Component will be rendered here -->
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.js b/src/App.js
index 6472345..c608007 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,17 @@
-import React, { Component } from 'react';
-import './App.css';
-import Header from './Header';
-import SectionMain from './SectionMain';
-import Aside from './Aside';
-import Footer from './Footer';
+import React, { Component } from 'react'; // import react and component object
+import './App.css'; //for css style
+import Header from './Header'; // import Header component
+import SectionMain from './SectionMain'; // import SectionMain component
+import Aside from './Aside'; // import Aside component
+import Footer from './Footer'; // import Footer component
 
-class App extends Component {
+class App extends Component { // create App from Component
 
-  render() {
+  render() { //invoke render method
     return (
-      <div className="App">
-        <Header backColor="green" width="50%"></Header>
+      <div className="App"> //giving div a className of App. camelcase tells use this is JSX
+        <Header backColor="green" width="50%"></Header> 
+        // ^ Header with properties
         <SectionMain></SectionMain>
         <Aside></Aside>
         <Footer></Footer>
@@ -19,4 +20,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default App; // export App
diff --git a/src/Aside.js b/src/Aside.js
index 0698377..2a7afa0 100644
--- a/src/Aside.js
+++ b/src/Aside.js
@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import './Aside.css';
+import React, { Component } from 'react'; //import react and component
+import './Aside.css'; //import css styling
 
-class Aside extends Component {
+class Aside extends Component { //creating Aside object of Component
   render() {
     return (
         <aside className="Aside">
@@ -11,4 +11,4 @@ class Aside extends Component {
   }
 }
 
-export default Aside;
+export default Aside; //export Aside component
diff --git a/src/Footer.js b/src/Footer.js
index c116027..c0dd56f 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import './Footer.css';
+import React, { Component } from 'react'; // import react and component
+import './Footer.css'; //import css styling
 
-class Footer extends Component {
+class Footer extends Component { // creating Footer object of Component
   render() {
     return (
-        <footer className="Footer">
+        <footer className="Footer"> //give className to footer component
         </footer>
 
     );
   }
 }
 
-export default Footer;
+export default Footer; //export Footer component
diff --git a/src/Header.js b/src/Header.js
index 5c9495c..d34f525 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
-import './Header.css';
+import React, { Component } from 'react'; // import react and component
+import './Header.css'; //import styling
 
-class Header extends Component {
+class Header extends Component { //create Header object from Component
   render() {
-    const style = {
+    const style = { //create style properties on Header class
       width: this.props.width,
       backgroundColor: this.props.backColor
     }
-    return (
+    return ( //return Header with object style and className Header-main
         <header style={style} className="Header-main">
         </header>
 
@@ -15,7 +15,7 @@ class Header extends Component {
   }
 }
 
-export default Header;
+export default Header; // export Header component
 
 
 //document.querySelector("header").style.backgroundColor = "red"
diff --git a/src/SectionMain.js b/src/SectionMain.js
index cc07a5e..c27d944 100644
--- a/src/SectionMain.js
+++ b/src/SectionMain.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
-import './SectionMain.css';
+import React, { Component } from 'react'; //import react and component
+import './SectionMain.css'; //import styling
 
-class SectionMain extends Component {
+class SectionMain extends Component { //create class SectionMain from Component
   render() {
-    return (
+    return ( //return section with className SectionMain
         <section className="SectionMain">
         </section>
 
@@ -11,4 +11,4 @@ class SectionMain extends Component {
   }
 }
 
-export default SectionMain;
+export default SectionMain; //export SectionMain component
diff --git a/src/index.js b/src/index.js
index 726c418..f19a000 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import React from 'react'; //import react
+import ReactDOM from 'react-dom'; //importReactDOM
+import './index.css'; //import css
+import App from './App'; //import App
+import registerServiceWorker from './registerServiceWorker'; //import registerServiceWorker for measuring performance
 
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+ReactDOM.render(<App />, document.getElementById('root')); //render App component in DOM where div with 'root' class
+registerServiceWorker(); //invoke performance measure