From e94e7c03a348ac28fc2feac2dc93d3b7f9a94ec0 Mon Sep 17 00:00:00 2001
From: arpit1997 <solankiarpit1997@gmail.com>
Date: Thu, 24 Nov 2016 23:56:19 +0530
Subject: [PATCH 1/2] added css to homepage

---
 .../MusicApp/templates/MusicApp/homepage.html | 640 +++++++++++++++++-
 mysite/db.sqlite3                             | Bin 77824 -> 77824 bytes
 2 files changed, 638 insertions(+), 2 deletions(-)
diff --git a/mysite/MusicApp/templates/MusicApp/homepage.html b/mysite/MusicApp/templates/MusicApp/homepage.html
index 16341be..bf9e831 100644
--- a/mysite/MusicApp/templates/MusicApp/homepage.html
+++ b/mysite/MusicApp/templates/MusicApp/homepage.html
@@ -3,8 +3,8 @@
 
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="https://raw.githubusercontent.com/arpit1997/Pqusic/master/mysite/MusicApp/static/MusicApp/css/style.css" rel="stylesheet" type="text/css">
-    <link href="https://raw.githubusercontent.com/arpit1997/Pqusic/master/mysite/MusicApp/static/MusicApp/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
+    <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
     <link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/plyr.css">
 
@@ -12,6 +12,642 @@
 </head>
 
 <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
+
     input[type=text] {
         width: 100%;
         box-sizing: border-box;
diff --git a/mysite/db.sqlite3 b/mysite/db.sqlite3
index 68a92e210123228f677a9f49f8d4b7849c4f9de3..e2c1a6f9e59ebd28580f72ff10403e290bd7d9e1 100644
GIT binary patch
delta 733
zcmZY4Pe>F|90%}u`yJQ6v!j_HB=N9AhuX#c>*yucBz4WQEW?wHyR+`p?#{9^n;C-E
ztyAfubgA2hhZJPW$c&;eD1tJA>{3F12q}>YgNo?w>?P_Qe!mCr_x<pDW2^kwDt~bs
zSs$<4OV;O(-zg^J=Jt|an_aB0K?ljs?XRAgD9>IhQ;3-TU3NZ%MXrpq&elpeNmoW!
z!@*RlKc?!2mL9fM+p&wt86(!8Qql=k*HtaKlg-x@LVs0rx!g-lzI7A3c@S`=0(%rO
z$>9gS;uGHEHD2Nw9^pQ2<2q)L!(~jGRTUa)?IO<+ViWBSt2^w1)dh3LdrUI<_B?6>
zN=x(0ikRZ?6W{O|AMge%SjJ;Kz#?v77FTfvQw&X^wwNb*Q!I3cqtFE*JFE9n5hjOU
z_>M1(`G~h{yH|LDr;J*{UEIo6*5yoEv1Z#+guG%^hgAi0X=o2$FJd|`Y+?gzc*pW9
zc#bD{h<jLI|C_}$TjLz8ylCYeR$dUyh0)NpN;}DMxPTJdyseFFkeul*87HG1Vi6bI
z(dlV$2b^xV)8nIVskx!4xxwp_{DDTFC*J27J`s!zoQfRkiOEAr+NC5TicX#MNLrB%
z+NWh`i((i``lusMh5w<XX20a}`rJ}uU_eSVorxU?4tDB?Wrg;nmBeTwla4T}B`$|g
zGDkMz%#Io^+Lj52RoW#dm4skt?%AsUU~iMl?U$s0|8(m>T<eyjUftKNX$d(kCuonB
w9HhN!MA7IzgLcYsH6rUYBoAA!BeXDB%_c`EJs6FuVO5T^dwc86c^3(hKLDP?-~a#s

delta 325
zcmXxcPbh<N7zgm*@BO~bynBV-oGdLD2XWbD2PHXKT<18_YVU!)?cI`-T^;<}dy%_x
z@V>QvOwE*NiWHMFms$DK5+y{j<e7Nt>G{*=c~TWQRgst4d3o78$jh0r-3Fc)9qy3i
zQajr)#I4M*mQH)D6(zz|>sy%%GRAzAe}QVfY5pInYA$s1@nj+zHX`v!-8A*sRF~F*
zp2m@+sZR_TMmVaQiCBC_6g_^QkOMXNn&?o4&G3m=JmL;zT;dEz*vAewVT)FE9>VsI
z287&4UitM7!x!H0gnL}0gd&b{fIPO~kY9l1m?5u<0z(ZScp+EC4Sl}C1y0EpNUcE>
vru$`LxjK8tGahhDsDyKz;1GMr5nF}G%?39VNLhwOxTP#D*QM=jFAwq`^x<bV


From 86b7b14fb380cd1241b4d993ea6e5cf241cda2a8 Mon Sep 17 00:00:00 2001
From: arpit1997 <solankiarpit1997@gmail.com>
Date: Fri, 25 Nov 2016 00:31:03 +0530
Subject: [PATCH 2/2] added css for pages

---
 .../templates/MusicApp/activation_form.html   | 638 ++++++++++++++++-
 .../templates/MusicApp/add_to_playlist.html   | 637 ++++++++++++++++-
 .../templates/MusicApp/change_password.html   | 639 ++++++++++++++++-
 .../templates/MusicApp/create_playlist.html   | 641 +++++++++++++++++-
 .../MusicApp/templates/MusicApp/homepage.html |   3 +-
 mysite/MusicApp/templates/MusicApp/main.html  | 640 ++++++++++++++++-
 .../templates/MusicApp/password_reset.html    | 638 ++++++++++++++++-
 .../MusicApp/templates/MusicApp/playlist.html | 640 ++++++++++++++++-
 .../MusicApp/templates/MusicApp/profile.html  | 638 ++++++++++++++++-
 .../templates/MusicApp/song_list.html         | 640 ++++++++++++++++-
 .../templates/MusicApp/user_login.html        | 640 ++++++++++++++++-
 .../templates/MusicApp/user_playlist.html     | 639 ++++++++++++++++-
 .../templates/MusicApp/user_signup.html       | 640 ++++++++++++++++-
 .../templates/MusicApp/user_song_list.html    | 639 ++++++++++++++++-
 .../templates/MusicApp/users_list.html        | 639 ++++++++++++++++-
 15 files changed, 8924 insertions(+), 27 deletions(-)

diff --git a/mysite/MusicApp/templates/MusicApp/activation_form.html b/mysite/MusicApp/templates/MusicApp/activation_form.html
index a11501f..3a93d24 100644
--- a/mysite/MusicApp/templates/MusicApp/activation_form.html
+++ b/mysite/MusicApp/templates/MusicApp/activation_form.html
@@ -3,12 +3,646 @@
     
     <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-     <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-     <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
     </head>
     
+    <style type="text/css">
+    	body{
+height: 100%;
+    width: 100%;
     
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+    </style>
     
         {% if messages %}
         <ul class="messages">
diff --git a/mysite/MusicApp/templates/MusicApp/add_to_playlist.html b/mysite/MusicApp/templates/MusicApp/add_to_playlist.html
index 01e5c29..e1b1e5a 100644
--- a/mysite/MusicApp/templates/MusicApp/add_to_playlist.html
+++ b/mysite/MusicApp/templates/MusicApp/add_to_playlist.html
@@ -5,11 +5,644 @@
     <meta charset="UTF-8">
     <title>add to Playlist</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-    <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 </head>
 <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
     p{
         font-size: 18px;
         font-weight: 400;
diff --git a/mysite/MusicApp/templates/MusicApp/change_password.html b/mysite/MusicApp/templates/MusicApp/change_password.html
index 9a996aa..606296b 100644
--- a/mysite/MusicApp/templates/MusicApp/change_password.html
+++ b/mysite/MusicApp/templates/MusicApp/change_password.html
@@ -3,10 +3,645 @@
     
     <head>
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-        <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-         <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
     </head>
+    <style type="text/css">
+    	body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+    </style>
        {% if messages %}
         <ul class="messages">
             {% for message in messages %}
diff --git a/mysite/MusicApp/templates/MusicApp/create_playlist.html b/mysite/MusicApp/templates/MusicApp/create_playlist.html
index 9f78e04..2b2442a 100644
--- a/mysite/MusicApp/templates/MusicApp/create_playlist.html
+++ b/mysite/MusicApp/templates/MusicApp/create_playlist.html
@@ -3,8 +3,7 @@
     
     <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-    <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     </head>
     
     <script>
@@ -16,6 +15,644 @@
         document.getElementById("mySidenav").style.width = "0";
     }
 </script>
+<style type="text/css">
+	body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
+	
+</style>
     
     
     <body class="wraper">
diff --git a/mysite/MusicApp/templates/MusicApp/homepage.html b/mysite/MusicApp/templates/MusicApp/homepage.html
index bf9e831..5332654 100644
--- a/mysite/MusicApp/templates/MusicApp/homepage.html
+++ b/mysite/MusicApp/templates/MusicApp/homepage.html
@@ -3,8 +3,7 @@
 
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-    <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
     <link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/plyr.css">
 
diff --git a/mysite/MusicApp/templates/MusicApp/main.html b/mysite/MusicApp/templates/MusicApp/main.html
index 4a3898c..1290f11 100644
--- a/mysite/MusicApp/templates/MusicApp/main.html
+++ b/mysite/MusicApp/templates/MusicApp/main.html
@@ -3,13 +3,649 @@
     
     <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-     <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-     <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
      <link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/plyr.css">
 
     </head>
  <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
+
+ 
          #search-preloader {
     display: none;
     margin-bottom: 4rem;
diff --git a/mysite/MusicApp/templates/MusicApp/password_reset.html b/mysite/MusicApp/templates/MusicApp/password_reset.html
index bcd7e59..c3c09e7 100644
--- a/mysite/MusicApp/templates/MusicApp/password_reset.html
+++ b/mysite/MusicApp/templates/MusicApp/password_reset.html
@@ -3,12 +3,646 @@
     
     <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-        <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-        <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
     </head>
     
+   <style type="text/css">
+   	body{
+height: 100%;
+    width: 100%;
     
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+   </style> 
     
     
     <body class="wraper">
diff --git a/mysite/MusicApp/templates/MusicApp/playlist.html b/mysite/MusicApp/templates/MusicApp/playlist.html
index 6fdcbc7..bcde6f8 100644
--- a/mysite/MusicApp/templates/MusicApp/playlist.html
+++ b/mysite/MusicApp/templates/MusicApp/playlist.html
@@ -3,12 +3,648 @@
 
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-    <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 </head>
 
 <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
+
+
     input[type=text] {
         width: 100%;
         box-sizing: border-box;
diff --git a/mysite/MusicApp/templates/MusicApp/profile.html b/mysite/MusicApp/templates/MusicApp/profile.html
index eb94454..fa512f8 100644
--- a/mysite/MusicApp/templates/MusicApp/profile.html
+++ b/mysite/MusicApp/templates/MusicApp/profile.html
@@ -2,11 +2,645 @@
 <html>
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-      <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-    <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
     </head>
 <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
 
 .tabs1 {
   margin: 0px auto;
diff --git a/mysite/MusicApp/templates/MusicApp/song_list.html b/mysite/MusicApp/templates/MusicApp/song_list.html
index 5f51760..6f8744b 100644
--- a/mysite/MusicApp/templates/MusicApp/song_list.html
+++ b/mysite/MusicApp/templates/MusicApp/song_list.html
@@ -3,12 +3,648 @@
     
     <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-     <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css" rel="stylesheet" type="text/css">
-     <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
      <link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/plyr.css">
     </head>
   <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
+  
       #search-preloader {
     display: none;
     margin-bottom: 4rem;
diff --git a/mysite/MusicApp/templates/MusicApp/user_login.html b/mysite/MusicApp/templates/MusicApp/user_login.html
index 17f348e..b0f3ab7 100644
--- a/mysite/MusicApp/templates/MusicApp/user_login.html
+++ b/mysite/MusicApp/templates/MusicApp/user_login.html
@@ -4,8 +4,646 @@
 	<title>Login Page</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-     <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
 </head>
+<style type="text/css">
+	
+	body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+</style>
 
 <body class="wraper">
 
diff --git a/mysite/MusicApp/templates/MusicApp/user_playlist.html b/mysite/MusicApp/templates/MusicApp/user_playlist.html
index f501171..8d87e37 100644
--- a/mysite/MusicApp/templates/MusicApp/user_playlist.html
+++ b/mysite/MusicApp/templates/MusicApp/user_playlist.html
@@ -4,11 +4,648 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-    <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 </head>
 
 <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
+
+
     input[type=text] {
         width: 100%;
         box-sizing: border-box;
diff --git a/mysite/MusicApp/templates/MusicApp/user_signup.html b/mysite/MusicApp/templates/MusicApp/user_signup.html
index cb43428..7069308 100644
--- a/mysite/MusicApp/templates/MusicApp/user_signup.html
+++ b/mysite/MusicApp/templates/MusicApp/user_signup.html
@@ -3,9 +3,645 @@
 <head>
 	<title>Sign up</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-     <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-     <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
 </head>
+<style type="text/css">
+	body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+</style>
 <body class="wraper">
        {% if messages %}
         <ul class="messages">
diff --git a/mysite/MusicApp/templates/MusicApp/user_song_list.html b/mysite/MusicApp/templates/MusicApp/user_song_list.html
index b2c854a..c0d35c8 100644
--- a/mysite/MusicApp/templates/MusicApp/user_song_list.html
+++ b/mysite/MusicApp/templates/MusicApp/user_song_list.html
@@ -4,12 +4,649 @@
     <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css" rel="stylesheet" type="text/css">
-     <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
         <link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/plyr.css">
 
     </head>
   <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
+  
      #search-preloader {
     display: none;
     margin-bottom: 4rem;
diff --git a/mysite/MusicApp/templates/MusicApp/users_list.html b/mysite/MusicApp/templates/MusicApp/users_list.html
index 5cb870f..544a77f 100644
--- a/mysite/MusicApp/templates/MusicApp/users_list.html
+++ b/mysite/MusicApp/templates/MusicApp/users_list.html
@@ -3,10 +3,645 @@
     
     <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-     <link href="{% static "MusicApp/css/style.css" %}" rel="stylesheet" type="text/css">
-     <link href="{% static "MusicApp/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     </head>
     <style>
+body{
+height: 100%;
+    width: 100%;
+    
+}
+
+.wraper {
+    /*background: transparent;
+  background: #e1e3e4;*/
+    background: linear-gradient(to bottom, rgba(51,51,51,1) 25%,rgba(34,34,34,1) 100%);
+    height: auto;
+    max-height: inherit;
+ 
+}
+
+.header{
+height: 80px;
+    width: auto;
+    background: #000;
+    overflow: hidden;
+}
+
+.main_body{
+height: 600px;
+    width: auto;
+    overflow: hidden;
+    background-image: url("music.jpg");
+    background-size: 1350px 500px;
+    background-repeat: no-repeat;
+}
+.row.footer{
+height: 80px;
+    margin-top: 15px;
+    width: auto;
+}
+#pqusic p{
+float: left;
+    color: green;
+    font-size: 35px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    padding-left: 100px;
+    padding-bottom: 20px;
+}
+div.scrollmenu {
+    background-color: #000;
+    overflow: hidden;
+    height: auto;
+    width: 400px;
+    float: right;
+    padding-top: 20px;
+    white-space: nowrap;
+    font-size: 20px;
+
+}
+div.scrollmenu a {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+div.scrollmenu a:hover {
+    color: green;
+    cursor: pointer;
+}
+div.scrollmenu a:active {
+    color: green;
+    cursor: pointer;
+}
+
+
+.container{
+}
+
+input[type=text], input[type=password] {
+    
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: list-item;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: rgba(137, 141, 140, 0.99);
+    color: black;
+    padding: 15px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: 15px !important;
+    display: list-item;
+}
+
+div.cancel button{
+width: 25%;
+    display: inline;
+}
+.forget{
+float: right;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: 30%;
+    float: left;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 20px 0 10px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    width: 85% !important;
+    padding: 16px;
+    position: relative;
+}
+.container1 {
+    padding: 0px 16px;
+    position: relative;
+}
+div.num{
+background: #fefefe;
+    
+    position: absolute;
+    width: 100%;
+}
+
+span.psw {
+    float: right;
+    padding-top: 0px 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 10px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #fefefe;
+    margin: 0px auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 100%;/* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)}
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)}
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}
+
+.middle{
+position: relative;
+    margin-top: 180px;
+    margin-left: 300px;
+    width: auto;
+    height: auto;
+}
+
+.middle #search{
+    position: absolute;
+    border: 1px solid #ddd;
+    width: 40%;
+     border-radius: 3px;
+    background-image: url(search.png);
+    background-position: 2px 12px;
+  background-repeat: no-repeat;
+    background-size: 20px 20px;
+    font-size: 16px;
+    display: inline-block;
+}
+.middle #search_button{
+    position: absolute;
+    background-color: white;
+    color: black;
+    border-radius: 3px;
+    font-size: 14px;
+    margin-left: 430px;
+    width: 10%;
+    font-weight: bold;
+}
+
+#search_button:hover{
+background-color: gray;
+}
+
+
+.row.Hheader,.row.Mheader,.row.Mmiddle,.row.Lheader{
+padding-top: 5px;
+
+}
+.row.logo{
+padding-top: 0px !important;
+}
+.row.logo .col-md-4{
+    text-align: center;
+    padding-top: 25px;
+    padding-left: 30px;
+}
+.row.Hheader .col-md-5,.col-md-8{
+    padding-left: 100px;
+    color: #30b55a;
+    /*font-size: 40px;*/
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    
+}
+.pqusic{
+    font-size: 55px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    font-weight: bold;
+}
+.pqusic a{
+    text-decoration: none !important;
+    color: #30b55a !important;
+}
+.webApp{
+    font-size: 15px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+color: white;
+    letter-spacing: 1px;
+}
+.row.Hheader .col-md-2{
+    text-align: center;
+    color: white;
+    font-size: 15px;
+    /*font-family: fantasy;*/
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    display: inline-block;
+}
+.row.song_list .col-md-8.col-md-offset-2{
+    padding-left: 0px;
+}
+.row.Hheight,.row.login_body,.row.Mmiddle,.middle_content{
+    background: #fdfdfd;
+    border-top: 2px solid rgb(223, 223, 223);
+}
+.row.Hheader1,.row.Lheader1{
+padding-top: 20px;
+font-size: 18px;
+}
+.row.Hheader1 a,.row.Mheader2 a{
+    color: black !important;
+}
+.row.Hheader1 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-left: 40px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Hheader1 .col-md-3{
+    padding-right: 0px !important;
+    padding-top: 20px;
+}
+.row.Hheader1 button{
+    padding: 20px 40% 20px 40%;
+    text-align: center;
+    background-color: #30b55a;
+    font-size: 20px;
+    line-height: 22px;
+    padding: .75em 1.5em;
+    text-transform: none;
+    border: 0;
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: pointer;
+}
+
+
+.row.Mheader2 .col-md-5.col-md-offset-1{
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.Mheader2 .col-md-6{
+    padding-left: 5px;
+    font-size: 20px !important;
+    padding-top: 20px;
+    text-align: center;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+
+
+
+
+.row.Hheight{
+width: auto;
+    height: auto;
+   
+}
+.row.Hmiddle1{
+    width: auto;
+    height: auto;
+}
+.row.Hmiddle .col-md-12{
+padding-top: 0px;
+}
+.row.Hmiddle1 .col-md-1{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+    background-image: url(search_icon.png);
+    background-size: 10px 10px;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.row.Hmiddle1 .col-md-7.col-md-offset-2 input[type=text] {
+    
+    padding: 12px 20px 19px 20px !important;
+    }
+.row.header a{
+color: white !important;
+}
+.row.OR{
+    text-align: left;
+    padding-top: 0px;
+    padding-left: 40px;
+}
+
+.row.Mheader1 .col-md-2{
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    margin-top: 8px !important;
+}
+.row.Mheader1 .col-md-10{
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+}
+.Mheader1{
+    margin-top: 20px;
+}
+.row.Mheader1 .col-md-2 button {
+    padding: 14px 20px 11px 20px !important;
+    }
+.row.Mheader1 .col-md-2{
+    color: black !important;
+}
+
+table{
+    width: 100% !important;
+}
+
+.table1 td:nth-child(1) {
+  width: 18%;
+}
+.table1 td:nth-child(2) {
+  width: 82%;
+} 
+
+.table1 tr .table2{
+padding-top: 0px !important;
+    float: right;
+}
+.row.stream_list{
+    margin-top: 30px;
+    font-size: 15px !important;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; !important;
+}
+.row.stream_list .col-md-4{
+    padding-left: 70px;
+}
+.row.stream_list .col-md-4 p{
+    margin-bottom: 0px !important;
+    color: black;
+}
+
+/*----- side navigation bar---------  */
+.sidenav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 20px;
+    color: #f2eded;
+    display: block;
+    transition: 0.3s
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 50px;}
+  .sidenav a {font-size: 18px;}
+}
+
+/* ---Side Navigation bar------------*/
+
+.row.search_stream_list{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+    border: 1px solid #c4c3c3;
+    padding-bottom: 20px;
+    margin-bottom: 10px;
+    background: #ffffff;
+}
+
+.row.search_stream_list .col-md-3,.col-md-9{
+    margin-top: 30px;
+    padding-right: 0px !important;
+}
+
+.row.search_stream_list .col-md-9{
+    padding-left: 10px;
+    
+    margin-bottom: 0px !important;
+}
+.row.search_stream_list .col-md-9 p{
+    font-size: 18px;
+    color: #000;
+    margin-bottom: 0px !important;
+}
+.song_level{
+    margin-top: 30px;
+}
+.song_level pre{
+    width: 75%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+.Psong_level{
+    margin-top: 20px;
+}
+.Psong_level pre{
+    width: 80%;
+    text-align: center;
+    margin: 5px auto;
+    background-color: #cccdce;
+}
+
+
+.playlist_song{
+    min-height: 450px;
+    width: 100%;
+    margin-top: 15px;
+}
+.playlist_song .table{
+    width: 75% !important;
+    margin: 5px auto;
+    border: 1px solid #ccc;
+}
+
+.playlist_song button{
+    width: 15% !important;
+    margin-left: 13%;
+}
+.playlist_song a{
+    color: black !important;
+}
+.playlist_song .btn-primary {
+    background-color: #a7a6a6;
+    border-color: #a7a6a6;
+}
+.playlist_song .table .T_tr td.td1{
+    width: 5% !important;
+}
+.playlist_song .table .T_tr td.td2{
+    width: 65% !important;
+}
+.playlist_song .table .T_tr td.td3{
+    width: 15% !important;
+}
+.table tr:hover{
+    background-color: #DDDDDD;
+}
+.table tr th{
+    background-color: #e1e6ef;
+}
+
+.row.Pheader{
+    width: 80%;
+    margin: 0px auto;
+}
+.row.Pheader .col-md-12{
+    padding: 0px;
+}
+.P-image{
+    width: 80%;
+    margin: 0px auto;
+}
+.P-image img{
+    border-radius: 50%;
+    margin: 0px auto;
+}
+
+.panel-primary {
+    border-color: #ccc !important;
+}
+
+.panel-primary>.panel-heading {
+    color: #0a0808 !important;
+    background-color: #ccc !important;
+    border-color: #ccc !important;
+}
+.btn-default {
+    background-color: #9b9fa2 !important;
+    border-color: #767b80 !important;}
+.form-group {
+     margin-bottom: 10px !important;
+}
+.form-horizontal .control-label {
+    padding-top: 15px !important;
+}
+.pull-right {
+    margin-right: 20px !important;
+    margin-top: -42px !important;
+}
+.panel-heading {
+    padding: 20px 15px !important;
+}
+
+.table>thead:first-child>tr:first-child>th {
+       width: 90% !important;
+}
+.table-condensed a {
+    color: black !important;
+}
+table{
+    background-color: white !important;
+}
+.middle_content{
+    min-height: 550px;
+}
+.sideIcon{
+    color: white !important;
+}
+p {
+    margin: 0 0 0px !important;
+}
+.model{
+    margin-top: 20px;
+}
+.error{
+    color: red;
+    text-align: center;
+}
+.following{
+    margin: 40px 20%;
+}
+.Mheader1 .following{
+    margin: 0px 0px !important;
+}
+user_list{
+    width: 100%;
+}
+.user_list .table{
+    width: 70% !important;
+    margin: 0px auto;
+}
+.user_list table td,th{
+    padding-left: 20px !important;
+}
+.panel-body table td,th{
+    padding-left: 0px !important;
+}
+
+
 input[type=text] {
     width: 100%;
     box-sizing: border-box;
