diff --git a/apps.js b/apps.js
new file mode 100644
index 0000000..c88c4ff
--- /dev/null
+++ b/apps.js
@@ -0,0 +1,60 @@
+const baseURL ="https://lit-fortress-6467.herokuapp.com/object";
+document.querySelector('#choose').addEventListener('click',function(event){
+
+
+
+
+
+
+
+
+axios.get(baseURL)
+.then(function(event){
+  event.preventDefualt()
+  alert('sup')
+ })
+
+
+
+
+
+
+
+})
+
+
+axios.post(baseURL)
+.then(function(response){
+  console.log(response)
+})
+
+
+
+
+
+const button = querySelector('#submit').addEventListener('click',function(resopnse){
+
+
+axios.get(baseURL)
+.then(function(event){
+  event.preventDefualt()
+  alert('sup')
+
+
+
+ })
+})
+
+
+
+
+const button = querySelector('#clear').addEventListener('click',function(resopnse){
+
+
+
+axios.get(baseURL)
+.then(function(event){
+  event.preventDefualt()
+  alert('sup')
+ })
+})
diff --git a/index.html b/index.html
index 8e0abfd..207cd03 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,32 @@
 <!DOCTYPE html>
+
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <title>Music Playlist</title>
+    <link rel="stylesheet" href="./style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link
+      src="https://lit-fortress-6467.herokuapp.com/object"
+      alt src=" https://lit-fortress-6467.herokuapp.com/post"
+    />
+
+
   </head>
   <body>
-      
-
+    <div class='contentContainer'>
+      <header>
+        <h1>Selection page</h1>
+      </header>
+        <div class="text container" id="text"></div>
+        <div class="railroad" id="tracks"><img src="images/fadedTrack.jpg"/></div>
+          <label id="Track" class="Track">Track Bin
+         <button id="choose" class="choose">Choose tracks</button>
+       </label>
+       <a href="./playlist.html">Playlist Page</a>
+     </div>
+     <div>
+   <footer id="Copyright"> © 2018 Chelsea</footer>
+ </div>
   </body>
 </html>
diff --git a/playlist.html b/playlist.html
new file mode 100644
index 0000000..f38913e
--- /dev/null
+++ b/playlist.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Playlist selection</title>
+    <link href="style.css" rel="stylesheet">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link src="https://lit-fortress-6467.herokuapp.com/object" alt src=" https://lit-fortress-6467.herokuapp.com/post">
+
+
+  </head>
+  <body>
+    <div class='contentContainer'>
+      <h2>Click an album to add its tracks to the bin</h2>
+      <input type="album names" class=" albums" id="complete albums">
+      <div>
+        <button id="clear">Clear Tracks</button>
+        <button id="submit">Submit Bin</button>
+      </div>
+      <a href="./index.html">Selection Page</a>
+    </div>
+    <div>
+    <footer id="Copyright"> © 2018 Chelsea</footer>
+  </div>
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3fc44c3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,72 @@
+header{
+  position: absolute;
+  left: 0;
+  top:0;
+  padding:0px;
+  margin:0px;
+  background-color:grey;
+  color:white;
+  width:100%;
+  height: 90px;
+  font-size:1.5rem;
+}
+
+body > * {
+    display:flex;
+    flex-grow: 1;
+    font-family:"Avenir";
+    margin:13rem;
+    text-align:left;
+    height: 100%;
+}
+.contentcontainer {
+    min-height:100%;
+    display:flex;
+    flex-direction: column;
+}
+.tracks{
+  opacity:19%;
+display:flex;
+flex-grow:1;
+}
+
+button {
+  display: flex;
+ vertical-align: middle;
+  background-color:black;
+  color:white;
+  padding: .5rem;
+  border:none;
+  border-radius: 4px;
+}
+  label {
+    margin:9rem;
+    font-size:2rem;
+    color:purple;
+    display:block;
+}
+
+h2 {
+  position:absolute;
+  left:0;
+  top:0;
+  margin:0;
+  background-color:grey;
+  color:white;
+  width:100%;
+  font-size: 1.5rem;
+}
+
+footer{
+  position:absolute;
+  left:0;
+  right:0;
+  bottom:0;
+  background-color:grey;
+  color:white;
+  font-size: 1.5rem;
+}
+
+/* .contentContainer {
+  min-height: 100%;
+} */
