diff --git a/songs-redux/src/components/App.js b/songs-redux/src/components/App.js
index d97371e..83d45f2 100644
--- a/songs-redux/src/components/App.js
+++ b/songs-redux/src/components/App.js
@@ -1,9 +1,19 @@
 import React from 'react';
+import SongsList from './SongsList';
+import SongDetail from './SongDetails';
+
 
 const App = () => {
   return (
-    <div>
-      App
+    <div className="ui container grid">
+      <div className="ui row">
+        <div className="column eight wide">
+          <SongsList />
+        </div>
+        <div className="column eight wide">
+          <SongDetail />
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/songs-redux/src/components/SongDetails.js b/songs-redux/src/components/SongDetails.js
new file mode 100644
index 0000000..5d08702
--- /dev/null
+++ b/songs-redux/src/components/SongDetails.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+const SongDetail = (props) => {
+  if (props.selected) {
+    return (
+      <div className="ui card">
+        <div className="content">
+          <div className="header">Song Details: </div>
+        </div>
+        <div className="content">
+          <h4 className="ui sub header">Title : {props.selected.title}</h4>
+          <div className="ui small feed">
+            <div className="event">
+              <div className="content">
+                <div className="summary">
+                  An Umm-Kalthoum Song with A duration of { props.selected.duration }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <div>Select A song to get its details.</div>
+}
+
+const mapStateToProps = state => {
+  return { selected: state.selectedSong }
+}
+
+export default connect(mapStateToProps)(SongDetail);
\ No newline at end of file
diff --git a/songs-redux/src/components/SongsList.js b/songs-redux/src/components/SongsList.js
new file mode 100644
index 0000000..70e9e44
--- /dev/null
+++ b/songs-redux/src/components/SongsList.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { selectSong } from '../actions';
+class SongsList extends React.Component {
+
+  render () {
+    console.log(" > render")
+    const renderedList = this.props.songs.map(s => {
+      return (
+        <div key={s.title} className="item">
+          <div className="right floated content">
+            <button
+              onClick={() => this.props.selectSong(s)}
+              className="ui button primary" 
+            >
+              Select
+            </button>
+          </div>
+          <div className="content">
+            {s.title}
+          </div>
+        </div>
+      )
+    })    
+    return (
+      <div className="ui divided list">
+        {renderedList}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => {
+  return { songs: state.songs };
+}
+
+export default connect(mapStateToProps, { selectSong })(SongsList);
\ No newline at end of file