From 3735be3e9b46e16fb7e9a4c01c40f7ed2228702c Mon Sep 17 00:00:00 2001
From: Tushar3099 <tusharneogi30@gmail.com>
Date: Wed, 10 Jun 2020 22:06:19 +0530
Subject: [PATCH] final changes

---
 Client/package-lock.json                |  14 ++
 Client/src/App.js                       |  83 ++++++--
 Client/src/components/AddSong.js        |  49 +++++
 Client/src/components/ListItems.js      |   4 +-
 Client/src/components/LoginPage.js      |  77 +++++--
 Client/src/components/ModList.js        |  18 ++
 Client/src/components/ModeratorPage.js  |  46 ++++
 Client/src/components/Navbar.js         | 154 ++++++++------
 Client/src/components/Playlist.js       | 103 +++------
 Client/src/components/PlaylistPage.js   | 121 +++++++----
 Client/src/components/Rating.js         |  94 ---------
 Client/src/components/Reviews.js        |  21 +-
 Client/src/components/Sidebar.js        | 128 ++++++++----
 Client/src/components/SignupPage.js     | 159 ++++++++++----
 Client/src/components/SongPage.js       | 202 +++++++++++-------
 Client/src/components/Upload.js         |  46 ++--
 Client/src/components/demo.js           | 160 +++++++-------
 Client/src/components/home.js           |  69 ++++++
 Client/src/components/search.js         |  92 ++++----
 Client/src/components/songlist.js       |  51 +++++
 Client/src/components/testsongs.js      |  90 --------
 Client/src/songContext.js               |  16 ++
 Client/src/stylesheet/addsong.css       | 133 ++++++++++++
 Client/src/stylesheet/loginpage.css     |  70 +++++--
 Client/src/stylesheet/moderatorpage.css | 114 ++++++++++
 Client/src/stylesheet/navbar.css        | 262 +++++++++++------------
 Client/src/stylesheet/playlist.css      |  74 +++----
 Client/src/stylesheet/reviews.css       |  71 +++++--
 Client/src/stylesheet/search.css        | 265 ++++++++++++------------
 Client/src/stylesheet/sidebar.css       | 244 +++++++++++-----------
 Client/src/stylesheet/signuppage.css    | 143 ++++++++-----
 Client/src/stylesheet/songpage.css      | 263 ++++++++++++-----------
 Client/src/stylesheet/styles.css        |   3 +-
 Client/src/stylesheet/upload.css        |  10 +-
 Client/src/userContext.js               |  40 ++--
 package-lock.json                       | 110 ----------
 36 files changed, 2101 insertions(+), 1498 deletions(-)
 create mode 100644 Client/src/components/AddSong.js
 create mode 100644 Client/src/components/ModList.js
 create mode 100644 Client/src/components/ModeratorPage.js
 delete mode 100644 Client/src/components/Rating.js
 create mode 100644 Client/src/components/home.js
 create mode 100644 Client/src/components/songlist.js
 delete mode 100644 Client/src/components/testsongs.js
 create mode 100644 Client/src/songContext.js
 create mode 100644 Client/src/stylesheet/addsong.css
 create mode 100644 Client/src/stylesheet/moderatorpage.css
 delete mode 100644 package-lock.json

diff --git a/Client/package-lock.json b/Client/package-lock.json
index 2b506d6e..eab99421 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -3550,6 +3550,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -11056,6 +11061,15 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-star-rating-component": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-star-rating-component/-/react-star-rating-component-1.4.1.tgz",
+      "integrity": "sha512-i0YEvQzToS0s0GDkxn01Jy4EeLpVEyh023NXJTJ+/1+xkvhpACyD4d1YeBhYWZab53ppUnUxs5gmp75gJr3khA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-transition-group": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
diff --git a/Client/src/App.js b/Client/src/App.js
index cc42d18b..abd0f7b5 100644
--- a/Client/src/App.js
+++ b/Client/src/App.js
@@ -1,5 +1,5 @@
-import React from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
+import React, { useContext } from "react";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
 import "./stylesheet/styles.css";
 import "./stylesheet/sidebar.css";
 import "./stylesheet/playlist.css";
@@ -10,39 +10,80 @@ import "./stylesheet/profilepage.css";
 import "./stylesheet/search.css";
 import "./stylesheet/loginpage.css";
 import "./stylesheet/signuppage.css";
+import "./stylesheet/moderatorpage.css";
+import AddSong from "./components/AddSong";
+import ModeratorPage from "./components/ModeratorPage";
+import Home from "./components/home";
+import "./stylesheet/addsong.css";
 import Sidebar from "./components/Sidebar";
 import Navbar from "./components/Navbar";
 import PlaylistPage from "./components/PlaylistPage";
 import SongPage from "./components/SongPage";
 import ProfilePage from "./components/ProfilePage";
-import Search from "./components/search";
 import LoginPage from "./components/LoginPage";
 import SignupPage from "./components/SignupPage";
+import { UserProvider, UserContext } from "./userContext";
+import { SongProvider } from "./songContext";
+
+const renderPlaylistPage = ({ match }) => {
+  const id = match.params.id;
+  return <PlaylistPage id={id} />;
+};
+const renderSongPage = ({ match }) => {
+  const id = match.params.id;
+  return <SongPage id={id} />;
+};
+
+const RenderUser = () => {
+  const [user, setUser] = useContext(UserContext);
+  if (user)
+    return (
+      <>
+        <Route path="/" component={Sidebar} />
+        <div className="midSection">
+          <Switch>
+            <Route path="/" exact component={Home} />
+
+            <Route path="/playlist/:id" component={renderPlaylistPage} />
+            <Route path="/profile/:id" component={ProfilePage} />
+            <Route path="/song/:id" component={renderSongPage} />
+          </Switch>
+        </div>
+      </>
+    );
+
+  return <Redirect to="/login" />;
+};
+
+const RenderAuth = () => {
+  const [user, setUser] = useContext(UserContext);
+  if (!user)
+    return (
+      <>
+        <Route path="/signup" component={SignupPage} />
+        <Route path="/login" component={ModeratorPage} />
+        <Redirect to="/login" />
+      </>
+    );
+
+  return <Redirect to="/" />;
+};
 
-import { UserProvider } from "./userContext";
 
 const App = () => {
   return (
     <UserProvider>
-      <BrowserRouter>
-        <Route path="/" component={Navbar} />
-
-        <div className="section">
-          <Route path="/" component={Sidebar} />
-
-          <div className="midSection">
-            <Switch>
-              <Route path="/" exact component={Search} />
-              <Route path="/playlist/:id" component={PlaylistPage} />
-              <Route path="/profile/:id" component={ProfilePage} />
-              <Route path="/song/:id" component={SongPage} />
-              <Route path="/login/:id" component={LoginPage} />
-              <Route path="/signup/:id" component={SignupPage} />
-            </Switch>
+
+      <SongProvider>
+        <BrowserRouter>
+          <Route path="/" component={Navbar} />
+          <div className="section">
+            <RenderAuth />
+            <RenderUser />
           </div>
+        </BrowserRouter>
+      </SongProvider>
 
-        </div>
-      </BrowserRouter>
     </UserProvider>
   );
 };
diff --git a/Client/src/components/AddSong.js b/Client/src/components/AddSong.js
new file mode 100644
index 00000000..593f7f96
--- /dev/null
+++ b/Client/src/components/AddSong.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import Upload from "./Upload";
+import '../stylesheet/upload.css';
+
+const AddSong = () => {
+
+    return(
+        <div className = 'songbox'>
+            <h1 className = 'addst'>New Song</h1>
+            <div className = 'coverblock'>
+            <h3 className = 'songcov'>Song Cover</h3>
+            <div><Upload /></div>
+            </div>
+            <div className = 'inct'>
+            <input className = 'addsi' type = 'text' name = 'songname' required/>
+            <label for = 'songname' className = 'addslab'>
+            <span className = 'addsl'>Song</span>
+            </label>
+            </div>
+            <div className = 'inct'>
+            <input className = 'addsi' type = 'text' name = 'genre' required/>
+            <label for = 'genre' className = 'addslab'>
+            <span className = 'addsl'>Genre</span>
+            </label>
+            </div>
+            <div className = 'inct'>
+            <input className = 'addsi' type = 'text' name = 'mood' required/>
+            <label for = 'mood' className = 'addslab'>
+            <span className = 'addsl'>Mood</span>
+            </label>
+            </div>
+            <div className = 'inct'>
+            <input className = 'addsi' type = 'number' step = '.01' min = '0' name = 'duration' required/>        
+            <label for = 'duration' className = 'addslab'>
+            <span className = 'addsl'>Playtime</span>
+            </label>
+            </div>
+            <div className = 'inct2'>
+            <textarea className = 'addsi' name = 'lyrics' required/>
+            <label for = 'lyrics' className = 'addslab'>
+            <span className = 'addsl'>Lyrics</span>
+            </label>
+            </div>
+            <button className = 'clickme4'>Submit</button>
+        </div>
+    );
+}
+
+export default AddSong;
\ No newline at end of file
diff --git a/Client/src/components/ListItems.js b/Client/src/components/ListItems.js
index 356f503a..e91c614e 100644
--- a/Client/src/components/ListItems.js
+++ b/Client/src/components/ListItems.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
-const ListItems = ({ artist, name, id, duration, mood, genre }) => {
+const ListItems = ({ artist, songname, duration, mood, genre }) => {
 	return(
 		<div className ='listitems'>
 		<div className = 'entrylist'>
-		<h2 className = 'listentry le'>{name}</h2>
+		<h2 className = 'listentry le'>{songname}</h2>
 		<h2 className = 'listentry le2'>{artist}</h2>
 		<h2 className = 'listentry le3'>{mood}</h2>
 		<h2 className = 'listentry le4'>{genre}</h2>
diff --git a/Client/src/components/LoginPage.js b/Client/src/components/LoginPage.js
index 397114ed..e73cfa62 100644
--- a/Client/src/components/LoginPage.js
+++ b/Client/src/components/LoginPage.js
@@ -1,21 +1,60 @@
-import React from 'react';
+import React from "react";
+import { Link } from "react-router-dom";
 
-const LoginPage = () =>{
-    return(
-        <div className = 'loginbox'>
-                <h1 className = 'formtop'>Login</h1>
-                <div>
-                <h2 className = 'formfield'>Username</h2>
-                <input className = 'forminput' type = 'text' placeholder = 'Username' name = 'username'/>
-                </div>
-                <div>
-                <h2 className = 'formfield'>Password</h2>
-                <input className = 'forminput' type = 'password' name = 'pass' placeholder = '********'/>
-                </div>
-                <button className = 'clickme3 bt2'>New User</button>
-                <button className = 'clickme3 bt3'>Login</button>
-        </div>
-    );
-}
+const initialFormData = Object.freeze({
+  fullname: "",
+  password: ""
+});
 
-export default LoginPage;
\ No newline at end of file
+const LoginPage = () => {
+  const [formData, setFormData] = React.useState(initialFormData);
+
+  const handleInputChange = e => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+    // console.log(e.target.value);
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    console.log(formData);
+    // ... submit to API or something
+  };
+
+  return (
+    <div className="loginbox">
+      <h1>Login</h1>
+      <label for="username">Username</label>
+      <input
+        className="forminput"
+        type="text"
+        placeholder="Username"
+        name="fullname"
+        value={formData.username}
+        onChange={handleInputChange}
+      />
+
+      <label for="password">Password</label>
+      <input
+        className="forminput"
+        type="password"
+        name="password"
+        placeholder="Password..."
+        value={formData.password}
+        onChange={handleInputChange}
+      />
+      <div className="buttons">
+        <button className="bt" onClick={handleSubmit}>
+          Login
+        </button>
+        <Link to="/signup">
+          <button className="bt">New User</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/Client/src/components/ModList.js b/Client/src/components/ModList.js
new file mode 100644
index 00000000..61244f85
--- /dev/null
+++ b/Client/src/components/ModList.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const ModList = ({ artist, songname, duration, mood, genre }) => {
+	return(
+		<div className = 'modlistent'>
+                <h3 className = 'modetext pd1'>{songname}</h3>
+                <h3 className = 'modetext pd2'>{artist}</h3>
+                <h3 className = 'modetext pd3'>{genre}</h3>
+                <h3 className = 'modetext pd4'>{mood}</h3>
+                <h3 className = 'modetext pd5'>{duration}</h3>
+                <button className = 'clickme5 but1'>Approve</button>
+                <button className = 'clickme5 but2'>Decline</button>
+            </div>
+		);
+
+} 
+
+export default ModList;
\ No newline at end of file
diff --git a/Client/src/components/ModeratorPage.js b/Client/src/components/ModeratorPage.js
new file mode 100644
index 00000000..1a173a80
--- /dev/null
+++ b/Client/src/components/ModeratorPage.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import ModList from './ModList';
+
+const ModeratorPage = () =>{
+    return(
+        <div className = 'modpagecont'>
+        <div className = 'moderator'>
+            <div className = 'modheader'>
+                <h1 className = 'modheadtext'>Moderator Console</h1>
+            </div>
+            <div className = 'modlisttop'>
+                <h3 className = 'modhtext pd1'>Song Title</h3>
+                <h3 className = 'modhtext pd2'>Artist</h3>
+                <h3 className = 'modhtext pd3'>Genre</h3>
+                <h3 className = 'modhtext pd4'>Mood</h3>
+                <h3 className = 'modhtext pd5'>Playtime</h3>
+                <h3 className = 'modhtext pd6'>Approve</h3>
+            </div>
+            <div className = 'modlist'>
+            <ModList
+            songname = 'Way Down We Go'
+            artist = 'Kaleo'
+            genre = 'Indie'
+            mood = 'Sad'
+            duration = '2.45'
+            />
+            <ModList
+            songname = 'Way Down We Go'
+            artist = 'Kaleo'
+            genre = 'Indie'
+            mood = 'Sad'
+            duration = '2.45'
+            />
+            <ModList
+            songname = 'Way Down We Go'
+            artist = 'Kaleo'
+            genre = 'Indie'
+            mood = 'Sad'
+            duration = '2.45'
+            />
+            </div>
+        </div>
+        </div>
+    );
+}
+ export default ModeratorPage;
\ No newline at end of file
diff --git a/Client/src/components/Navbar.js b/Client/src/components/Navbar.js
index 31560808..fc8a766d 100644
--- a/Client/src/components/Navbar.js
+++ b/Client/src/components/Navbar.js
@@ -1,68 +1,86 @@
-import React, { useContext } from "react";
-import { Link } from "react-router-dom";
-import { Headset } from "@material-ui/icons";
-import { UserContext } from "../userContext";
-
-const toggleSidebar = () => {
-  const sidebar = document.querySelector(".sidebar");
-  const midSection = document.querySelector(".midSection");
-  sidebar.classList.toggle("sidebar-active");
-  midSection.classList.toggle("section-active");
-};
-
-const toggleProfile = () => {
-  const dropdown = document.querySelector(".dropdown");
-  dropdown.classList.toggle("dropdown-active");
-};
-
-const Navbar = () => {
-  const [user, setUser] = useContext(UserContext);
-
-  return (
-    <>
-      <div className="navbar navbar-active">
-        <div
-          className="hamburger"
-          onClick={() => {
-            toggleSidebar();
-          }}
-        >
-          <div className="rect slideDown" />
-          <div className="rect slideLeft" />
-          <div className="rect slideUp" />
-        </div>
-        <div className="left item">
-          <Link to="/">
-            <div className="brand">
-              <div className="logo">
-                <Headset style={{ height: "40px", width: "40px" }} />
-              </div>
-              <h5>hwani</h5>
-            </div>
-          </Link>
-        </div>
-
-        <div className="center item">
-          {/* <input type="text" placeholder="Search..." /> */}
-        </div>
-
-        <div className="right item">
-          <div className="profile" onClick={toggleProfile}>
-            <img src={user.image} alt="user" />
-            <h5>{user.name}</h5>
-            <div className="dropdown">
-              <Link to="/profile/:id">
-                <li>Profile</li>
-              </Link>
-              <Link>
-                <li>Logout</li>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Navbar;
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { Headset } from "@material-ui/icons";
+import { UserContext } from "../userContext";
+
+const toggleSidebar = () => {
+  const sidebar = document.querySelector(".sidebar");
+  const midSection = document.querySelector(".midSection");
+  sidebar.classList.toggle("sidebar-active");
+  midSection.classList.toggle("section-active");
+};
+
+const toggleProfile = () => {
+  const dropdown = document.querySelector(".dropdown");
+  dropdown.classList.toggle("dropdown-active");
+};
+
+const User = ({ user }) => {
+  if (user)
+    return (
+      <div className="profile" onClick={toggleProfile}>
+        <img src={user.image} alt="user" />
+        <h5>{user.name}</h5>
+        <div className="dropdown">
+          <Link to="/profile/:id">
+            <li>Profile</li>
+          </Link>
+          <Link>
+            <li>Logout</li>
+          </Link>
+        </div>
+      </div>
+    );
+
+  return <></>;
+};
+
+const Hamburger = ({ user }) => {
+  if (user)
+    return (
+      <div
+        className="hamburger"
+        onClick={() => {
+          toggleSidebar(user);
+        }}
+      >
+        <div className="rect slideDown" />
+        <div className="rect slideLeft" />
+        <div className="rect slideUp" />
+      </div>
+    );
+
+  return <></>;
+};
+
+const Navbar = () => {
+  const [user, setUser] = useContext(UserContext);
+
+  return (
+    <>
+      <div className="navbar navbar-active">
+        <Hamburger user={user} />
+        <div className="left item">
+          <Link to="/">
+            <div className="brand">
+              <div className="logo">
+                <Headset style={{ height: "40px", width: "40px" }} />
+              </div>
+              <h5>hwani</h5>
+            </div>
+          </Link>
+        </div>
+
+        <div className="center item">
+          {/* <input type="text" placeholder="Search..." /> */}
+        </div>
+
+        <div className="right item">
+          <User user={user} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Navbar;
diff --git a/Client/src/components/Playlist.js b/Client/src/components/Playlist.js
index 3e1e2de6..c6db5051 100644
--- a/Client/src/components/Playlist.js
+++ b/Client/src/components/Playlist.js
@@ -1,77 +1,26 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-const Playlist = () => {
-  const playlist = [
-    {
-      img:
-        "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
-      name: "Sad Sufi",
-      id: 11238872784
-    },
-    {
-      img:
-        "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
-      name: "Happy Birthday",
-      id: 11238888498
-    },
-    {
-      img:
-        "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
-      name: "Happy Birthday",
-      id: 11238888498
-    },
-    {
-      img:
-        "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
-      name: "Happy Birthday",
-      id: 11238888498
-    },
-    {
-      img:
-        "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
-      name: "Happy Birthday",
-      id: 11238888498
-    },
-    {
-      img:
-        "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
-      name: "Happy Birthday",
-      id: 11238888498
-    },
-    {
-      img:
-        "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
-      name: "Rocking NIghts",
-      id: 11238465982
-    },
-    {
-      img:
-        "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
-      name: "Soothing Daylights",
-      id: 11238823982
-    }
-  ];
-
-  const renderPlaylist = playlist.map(playlist => {
-    return (
-      <>
-        <Link to={`/playlist/${playlist.id}`}>
-          <div className="item" key={playlist.id}>
-            <img src={playlist.img} alt="img" />
-            <div className="name">{playlist.name}</div>
-          </div>
-        </Link>
-      </>
-    );
-  });
-
-  return (
-    <>
-      <div className="heading">Playlist</div>
-      <div className="playlist">{renderPlaylist}</div>
-    </>
-  );
-};
-
-export default Playlist;
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Playlist = ({ playlist }) => {
+  const renderPlaylist = playlist.map(playlist => {
+    return (
+      <>
+        <Link to={`/playlist/${playlist.id}`}>
+          <div className="item" key={playlist.id}>
+            <img src={playlist.img} alt="img" />
+            <div className="name">{playlist.name}</div>
+          </div>
+        </Link>
+      </>
+    );
+  });
+
+  return (
+    <>
+      <div className="heading">Playlist</div>
+      <div className="playlist">{renderPlaylist}</div>
+    </>
+  );
+};
+
+export default Playlist;
diff --git a/Client/src/components/PlaylistPage.js b/Client/src/components/PlaylistPage.js
index c8af8593..13bc9bb3 100644
--- a/Client/src/components/PlaylistPage.js
+++ b/Client/src/components/PlaylistPage.js
@@ -1,52 +1,83 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
 import PlaylistInfo from "./PlaylistInfo";
 import ListHead from "./ListHead";
 import ListItems from "./ListItems";
 import "../stylesheet/playlistinfo.css";
 import "../stylesheet/listitems.css";
-const PlaylistPage = ({ songs }) => {
-	return(
-		<div className='playlistcont'>
-			<PlaylistInfo 
-		   	playlistname='Spider Man'
-		   	id='123'
-		   	author='Aayush'
-		   	/>
-		   	<ListHead/>
-		   <ListItems 
-		   	artist = 'Post Malone'
-			name = 'Sunflower'
-			id = 'abc123'
-			duration = '4:00'
-			mood = 'Chill'
-			genre = 'Pop'
-		   />
-		   <ListItems 
-		   	artist = 'Post Malone'
-			name = 'Sunflower'
-			id = 'abc123'
-			duration = '4:00'
-			mood = 'Chill'
-			genre = 'Pop'
-		   />
-		   <ListItems 
-		   	artist = 'Post Malone'
-			name = 'Sunflower'
-			id = 'abc123'
-			duration = '4:00'
-			mood = 'Chill'
-			genre = 'Pop'
-		   />
-		   <ListItems 
-		   	artist = 'Post Malone'
-			name = 'Sunflower'
-			id = 'abc123'
-			duration = '4:00'
-			mood = 'Chill'
-			genre = 'Pop'
-		   />
-		</div>
-	);
-}
+const PlaylistPage = ({ id }) => {
+  const [playlist, setPlaylist] = useState({
+    name: "",
+    createdby: "",
+    image: "",
+    song: [{}]
+  });
+
+  useEffect(() => {
+    setPlaylist({
+      name: "SpiderMan",
+      createdBy: "Aayush",
+      image:
+        "https://upload.wikimedia.org/wikipedia/en/thumb/8/87/Into_the_Spider-Verse_Cover.jpg/220px-Into_the_Spider-Verse_Cover.jpg",
+      song: [
+        {
+          artist: ["Post Malone"],
+          name: "Sunflower",
+          id: "123148198173",
+          duration: "4:00",
+          mood: "Chill",
+          genre: "pop"
+        },
+        {
+          artist: ["Ed Sheeran"],
+          name: "Shape of You",
+          id: "123148198173",
+          duration: "4:00",
+          mood: "Chill",
+          genre: "pop"
+        },
+        {
+          artist: ["Camila Camilo"],
+          name: "Senorita",
+          id: "123148198173",
+          duration: "4:00",
+          mood: "Chill",
+          genre: "pop"
+        },
+        {
+          artist: ["Post Malone"],
+          name: "Sunflower",
+          id: "123148198173",
+          duration: "4:00",
+          mood: "Chill",
+          genre: "pop"
+        }
+      ]
+    });
+  }, []);
+
+  const renderSong = playlist.song.map(song => {
+    return (
+      <Link to={`/song/${song.id}`}>
+        <ListItems
+          artist={song.artist}
+          name={song.name}
+          duration={song.duration}
+          mood={song.mood}
+          genre={song.genre}
+        />
+      </Link>
+    );
+  });
+
+  return (
+    <div className="playlistcont">
+      <PlaylistInfo playlistname={playlist.name} author={playlist.createdBy} />
+      <ListHead />
+      {renderSong}
+    </div>
+  );
+};
+
 
 export default PlaylistPage;
diff --git a/Client/src/components/Rating.js b/Client/src/components/Rating.js
deleted file mode 100644
index 1cdbba0a..00000000
--- a/Client/src/components/Rating.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-
-const Rating = () => {
-    return(
-        <form class="rating">
-        <label>
-            <input type="radio" name="stars" value="1" />
-            <span class="icon">★</span>
-        </label>
-        <label>
-            <input type="radio" name="stars" value="2" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-        </label>
-        <label>
-            <input type="radio" name="stars" value="3" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>   
-        </label>
-        <label>
-            <input type="radio" name="stars" value="4" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-        </label>
-        <label>
-            <input type="radio" name="stars" value="5" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-        </label>
-        <label>
-            <input type="radio" name="stars" value="6" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-        </label>
-        <label>
-            <input type="radio" name="stars" value="7" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-        </label>
-        <label>
-            <input type="radio" name="stars" value="8" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-        </label>
-        <label>
-            <input type="radio" name="stars" value="9" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-        </label>
-        <label>
-            <input type="radio" name="stars" value="10" />
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-            <span class="icon">★</span>
-        </label>       
-    </form>
-    );
-}
- export default Rating;
diff --git a/Client/src/components/Reviews.js b/Client/src/components/Reviews.js
index 6e9eca24..9f31c1f0 100644
--- a/Client/src/components/Reviews.js
+++ b/Client/src/components/Reviews.js
@@ -1,15 +1,20 @@
 import React from "react";
 
-const Reviews = ({ username, review }) => {
+const Reviews = ({ username, review, date, image }) => {
   return (
     <div className="reviews">
-      <img
-        className="reviewpic"
-        alt="Profile Pic"
-        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
-      />
-      <h3 className="songtext2">{username}</h3>
-      <p className="reviewtext">{review}</p>
+      <div className="reviewpic">
+        <img alt="Profile Pic" src={image} />
+      </div>
+      <div className="reviewSection">
+        <div className="head">
+          <h3 className="name">{username}</h3>
+          <h5 className="date">{date}</h5>
+        </div>
+        <div className="content">
+          <p>{review}</p>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/Client/src/components/Sidebar.js b/Client/src/components/Sidebar.js
index 3c76b07a..3746428a 100644
--- a/Client/src/components/Sidebar.js
+++ b/Client/src/components/Sidebar.js
@@ -1,44 +1,84 @@
-import React, { useEffect } from "react";
-import Icon from "@material-ui/core/Icon";
-import Playlist from "./Playlist";
-
-const Sidebar = () => {
-  useEffect(() => {
-    const lightbox = document.querySelector(".lightbox");
-    lightbox.addEventListener("click", e => {
-      if (e.target !== e.currentTarget) return;
-
-      lightbox.classList.remove("active");
-    });
-  });
-
-  const clickPlaylist = e => {
-    const lightbox = document.querySelector(".lightbox");
-    lightbox.classList.add("active");
-  };
-
-  return (
-    <>
-      <div className="lightbox">
-        <div className="form">
-          <input type="text" placeholder="Playlist Name..." />
-          <button>Add</button>
-        </div>
-      </div>
-      <div className="sidebar">
-        <div className="head" />
-        <div className="content">
-          <Playlist />
-        </div>
-        <div className="foot">
-          <div className="add" onClick={clickPlaylist}>
-            <h3>Add Playlist</h3>
-            <Icon style={{ fontSize: 50, color: "white" }}>add_circle</Icon>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Sidebar;
+import React, { useEffect, useState } from "react";
+import Icon from "@material-ui/core/Icon";
+import Playlist from "./Playlist";
+
+const clickPlaylist = e => {
+  const lightbox = document.querySelector(".lightbox");
+  lightbox.classList.add("active");
+};
+const clickLightbox = e => {
+  const lightbox = document.querySelector(".lightbox");
+
+  if (e.target !== e.currentTarget) return;
+
+  lightbox.classList.remove("active");
+};
+
+const Sidebar = () => {
+  const [playlist, setPlaylist] = useState([]);
+  const [playlistName, setPlaylistName] = useState("");
+
+  useEffect(() => {
+    setPlaylist([
+      {
+        img:
+          "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
+        name: "Sad Sufi",
+        id: 11238872784
+      },
+      {
+        img:
+          "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
+        name: "Happy Birthday",
+        id: 11238888498
+      },
+      {
+        img:
+          "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
+        name: "Happy Birthday",
+        id: 11238888498
+      },
+      {
+        img:
+          "https://images.squarespace-cdn.com/content/v1/518c10f0e4b03bb726afb55b/1386192990293-3WOYETVWFC0GJMFWH4BU/ke17ZwdGBToddI8pDm48kEYCq63vK5QS_A9RzvEPj41Zw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIihyGJh09w428tOY5g-FioOhFDyb8wchSiZQN0Pk_Z2c/SP-Website-Music-Editing-Thumbnail.png?format=1000w",
+        name: "Happy Birthday",
+        id: 11238888498
+      }
+    ]);
+  }, []);
+
+  const addPlaylist = () => {
+    const lightbox = document.querySelector(".lightbox");
+    lightbox.classList.remove("active");
+  };
+
+  return (
+    <>
+      <div className="lightbox" onClick={clickLightbox}>
+        <div className="form">
+          <input
+            type="text"
+            value={playlistName}
+            onChange={e => setPlaylistName(e.target.value)}
+            placeholder="Playlist Name..."
+          />
+          <button onClick={addPlaylist}>Add</button>
+        </div>
+      </div>
+      <div className="sidebar">
+        <div className="head" />
+        <div className="content">
+          <Playlist playlist={playlist} />
+        </div>
+        <div className="foot">
+          <div className="add" onClick={clickPlaylist}>
+            <h3>Add Playlist</h3>
+            <Icon style={{ fontSize: 50, color: "white" }}>add_circle</Icon>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Sidebar;
diff --git a/Client/src/components/SignupPage.js b/Client/src/components/SignupPage.js
index 0f278a50..c05526a7 100644
--- a/Client/src/components/SignupPage.js
+++ b/Client/src/components/SignupPage.js
@@ -1,43 +1,118 @@
-import React from 'react';
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import Upload from "./Upload";
-import '../stylesheet/upload.css';
-
-const SignupPage = () =>{
-    return(
-        <div className = 'signupbox'>
-                <h1 className = 'formtop'>Create Account</h1>
-                <div>
-                <h2 className = 'formfield'>New Username</h2>
-                <input className = 'forminput' type = 'text' placeholder = 'Username' name = 'username'/>
-                </div>
-                <div>
-                <h2 className = 'formfield'>Add a Bio</h2>
-                <input className = 'forminput' type = 'text' placeholder = 'Something about You!' name = 'bio'/>
-                </div>
-                <h2 className = 'formfield'>Profile Picture</h2>
-                <div><Upload /></div>
-                <div>
-                <h2 className = 'formfield'>Enter Email</h2>
-                <input className = 'forminput' type = 'email' placeholder = 'abc@dhwani.co.in' name = 'email'/>
-                </div>
-                <div>
-                <h2 className = 'formfield'>Select Account Type</h2>
-                <select className = 'seltype'>
-                <option value="0">Enthusiast</option>
-                <option value="1">Artist</option>
-                </select>
-                </div>
-                <div>
-                <h2 className = 'formfield'>New Password</h2>
-                <input className = 'forminput' type = 'password' name = 'pass' placeholder = '********'/>
-                </div>
-                <div>
-                <h2 className = 'formfield'>Retype Password</h2>
-                <input className = 'forminput' type = 'password' name = 'repass' placeholder = '********'/>
-                </div>
-                <button className = 'clickme3 bt1'>Create Account</button>
-        </div>
-    );
-}
-
-export default SignupPage;
\ No newline at end of file
+import "../stylesheet/upload.css";
+
+const initialFormData = Object.freeze({
+  fullname: "",
+  password: "",
+  info: "",
+  email: "",
+  image: "",
+  type: ""
+});
+
+const SignupPage = () => {
+  const [file, setFile] = useState("");
+  const [formData, setFormData] = React.useState(initialFormData);
+
+  const handleInputChange = e => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+    // console.log(e.target.value);
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    console.log(formData);
+    // ... submit to API or something
+  };
+
+  const handleChange = e => {
+    setFormData({
+      ...formData,
+      [e.target.name]: URL.createObjectURL(e.target.files[0])
+    });
+
+    // setFile(URL.createObjectURL(event.target.files[0]));
+    // console.log(e.target.name);
+  };
+
+  return (
+    <div className="signupbox">
+      <h1 className="formtop">Create Account</h1>
+      <div>
+        <h2 className="formfield">New Username</h2>
+        <input
+          className="forminput"
+          type="text"
+          placeholder="Username"
+          name="fullname"
+          value={formData.fullname}
+          onChange={handleInputChange}
+        />
+      </div>
+      <div>
+        <h2 className="formfield">Add a Bio</h2>
+        <input
+          className="forminput"
+          type="text"
+          placeholder="Something about You!"
+          name="info"
+          value={formData.info}
+          onChange={handleInputChange}
+        />
+      </div>
+      <h2 className="formfield">Profile Picture</h2>
+      <div className="profImage">
+        <Upload file={formData.image} onchange={handleChange} />
+      </div>
+      <div>
+        <h2 className="formfield">Enter Email</h2>
+        <input
+          className="forminput"
+          type="email"
+          placeholder="abc@dhwani.co.in"
+          name="email"
+          value={formData.email}
+          onChange={handleInputChange}
+        />
+      </div>
+      <div>
+        <h2 className="formfield">Select Account Type</h2>
+        <select
+          className="seltype"
+          value={formData.type}
+          name="type"
+          onClick={handleInputChange}
+        >
+          <option value="user">Enthusiast</option>
+          <option value="artist">Artist</option>
+        </select>
+      </div>
+      <div>
+        <h2 className="formfield">New Password</h2>
+        <input
+          className="forminput"
+          type="password"
+          name="password"
+          placeholder="Password..."
+          value={formData.password}
+          onChange={handleInputChange}
+        />
+      </div>
+      <div className="buttons">
+        <button className="bt" onClick={handleSubmit}>
+          Create Account
+        </button>
+        <Link to="/login">
+          <button className="bt">Already have an Account?</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPage;
diff --git a/Client/src/components/SongPage.js b/Client/src/components/SongPage.js
index 77325971..f5bdd516 100644
--- a/Client/src/components/SongPage.js
+++ b/Client/src/components/SongPage.js
@@ -1,79 +1,131 @@
-import React from 'react';
-import Rating from './Rating';
-import Reviews from './Reviews';
+import React, { useState, useEffect } from "react";
+import Reviews from "./Reviews";
 import "../stylesheet/rating.css";
 import "../stylesheet/reviews.css";
-const SongPage = ({songname, artistname, avgrating, songlyrics, genre, mood}) => {
-    return(
-		<div className = 'songpage'>
-            <div className = 'song1'>
-                <img className = 'songart' alt = 'Song Cover' src = {require('./playlistimage.jpeg')} />
-                <div className = 'songconta'>
-                    <h2 className = 'songtag'>Song</h2>
-                    <h1 className = 'songname'>{songname}</h1>
-                    <h3 className = 'songtext1'>By</h3>
-                    <h3 className = 'songtext2'>{artistname}</h3>
-                    <div className = 'block'>
-                        <h3 className = 'songtext1'>Ratings</h3>
-                        <h3 className = 'songtext2'>{avgrating}/10</h3>
-                    </div>
-                    <div className = 'block'>
-                        <h3 className = 'songtext1'>Genre</h3>
-                        <h3 className = 'songtext2'>{genre}</h3>
-                        
-                    </div>
-                    <div className = 'block'>
-                        <h3 className = 'songtext1'>Mood</h3>
-                        <h3 className = 'songtext2'>{mood}</h3>
-                    </div>
-                    <button className = 'clickme'>Add to Playlist</button>
-                    </div>
-            </div>
-            <div className = 'song1'>
-                <div className = 'conta3'>
-                <h2 className = 'songtag'>Lyrics</h2>
-                <div className = 'lyrics'>
-                    <p className = 'songtext3'>{songlyrics}</p>
-                </div>
-                </div>
-                <div className = 'conta4'>
-                    <h2 className = 'songtag'>Reviews</h2>
-                    <div className = 'reviewscroll'>
-                        <Reviews 
-                        username = 'Robert Downey'
-                        review = 'Cool Music'
-                        />
-                        <Reviews 
-                        username = 'Robert Downey'
-                        review = 'Cool Music'
-                        />
-                        <Reviews 
-                        username = 'Robert Downey'
-                        review = 'Cool Music'
-                        />
-                        <Reviews 
-                        username = 'Robert Downey'
-                        review = 'Cool Music'
-                        />
-                        <Reviews 
-                        username = 'Robert Downey'
-                        review = 'Cool Music'
-                        />
-                    </div>
-                    <h2 className = 'songtag'>Rate and Review</h2>
-                    <Rating />
-                    <div className = 'addreview'>
-                        <textarea className = 'revinput' placeholder = 'Add Review'/>
-                    </div>
-                    <button className = 'clickme2'>Submit</button>
-                </div>
-                       
-            
-            
-            
-            </div>
+import StarRatingComponent from "react-star-rating-component";
+
+const SongPage = () => {
+  const [song, setSong] = useState({ review: [{}] });
+  const [rating, setRating] = useState(1);
+  const [review, setReview] = useState("");
+
+  const handleClick = (next, prev) => {
+    setRating(next);
+  };
+  const handleSubmit = () => {
+    console.log(review);
+  };
+
+  useEffect(() => {
+    const demo = {
+      songname: "Jo bheji thi dua",
+      artistname: "Arijit Singh",
+      avgrating: "4.5",
+      songlyrics:
+        "Jo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalalJo bheji thi dua la lalalalal",
+      genre: "classic",
+      mood: "sad",
+      image: "https://miro.medium.com/max/2560/1*bqNsZ6GB2aMsZE20m8tcJw.jpeg",
+      rating: 2,
+      review: [
+        {
+          name: "Vedant Tripathi",
+          image:
+            "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+          text: "This is nice Song",
+          date: "14 Jan,20"
+        },
+        {
+          name: "Vedant Tripathi",
+          image:
+            "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+          text: "This is nice Song",
+          date: "14 Jan,20"
+        },
+        {
+          name: "Vedant Tripathi",
+          image:
+            "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
+          text: "This is nice Song",
+          date: "14 Jan,20"
+        }
+      ]
+    };
+
+    setSong(demo);
+  }, []);
+
+  useEffect(() => {
+    setRating(song.rating);
+  }, []);
+
+  const renderReview = song.review.map(review => (
+    <Reviews
+      username={review.name}
+      review={review.text}
+      date={review.date}
+      image={review.image}
+    />
+  ));
+
+  return (
+    <div className="songpage">
+      <div className="container1">
+        <img alt="Song Cover" src={song.image} />
+        <div className="info">
+          <div className="block head">
+            {/* <h2 className="item1">Song</h2> */}
+            <h1 className="item2">{song.songname}</h1>
+          </div>
+          <div className="block">
+            <h3 className="item1">By</h3>
+            <h3 className="item2">{song.artistname}</h3>
+          </div>
+          <div className="block">
+            <h3 className="item1">Ratings</h3>
+            <h3 className="item2">{song.avgrating}/10</h3>
+          </div>
+          <div className="block">
+            <h3 className="item1">Genre</h3>
+            <h3 className="item2">{song.genre}</h3>
+          </div>
+          <div className="block">
+            <h3 className="item1">Mood</h3>
+            <h3 className="item2">{song.mood}</h3>
+          </div>
+          <button className="addPlaylist">Add to Playlist</button>
+        </div>
+      </div>
+      <div className="container2">
+        <div className="lyrics">
+          <h2>Lyrics</h2>
+          <div>
+            <p>{song.songlyrics}</p>
+          </div>
+        </div>
+        <div className="reviewsTab">
+          <h2>Reviews</h2>
+          <div className="reviewscroll">{renderReview}</div>
+          <div className="rateTab">
+            <h2>Rate and Review</h2>
+            <StarRatingComponent
+              name="rating"
+              value={rating}
+              starCount={10}
+              onStarClick={handleClick}
+            />
+            <textarea
+              placeholder="Add Review"
+              onChange={e => setReview(e.target.value)}
+            />
+            <button className="addReview" onClick={handleSubmit}>
+              Submit
+            </button>
+          </div>
         </div>
-		);
-}
+      </div>
+    </div>
+  );
+};
 
-export default SongPage;
\ No newline at end of file
+export default SongPage;
diff --git a/Client/src/components/Upload.js b/Client/src/components/Upload.js
index 5abb3cd8..89a38588 100644
--- a/Client/src/components/Upload.js
+++ b/Client/src/components/Upload.js
@@ -1,27 +1,21 @@
-import React from 'react';
+import React, { useState } from "react";
 
-class Upload extends React.Component {
-    constructor(props){
-      super(props)
-      this.state = {
-        file: null
-      }
-      this.handleChange = this.handleChange.bind(this)
-    }
-    handleChange(event) {
-      this.setState({
-        file: URL.createObjectURL(event.target.files[0])
-      })
-    }
-    render() {
-      return (
-        <div>
-          <input className = 'forminput' type="file" onChange={this.handleChange}/>
-          <div>
-          <img className = 'uppic' src={this.state.file}/>
-          </div>
-        </div>
-      );
-    }
-  }
-  export default Upload;
\ No newline at end of file
+
+const Upload = ({ file, onchange }) => {
+  return (
+    <>
+      <input
+        className="forminput"
+        type="file"
+        name="image"
+        onChange={onchange}
+      />
+      <div class="img">
+        <img className="pic" src={file} />
+
+      </div>
+    </>
+  );
+};
+
+export default Upload;
diff --git a/Client/src/components/demo.js b/Client/src/components/demo.js
index 4b480b65..a032fa20 100644
--- a/Client/src/components/demo.js
+++ b/Client/src/components/demo.js
@@ -1,80 +1,80 @@
-import React, { Component } from "react";
-import { Media } from "reactstrap";
-
-class Menu extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      dishes: [
-        {
-          id: 0,
-          name: "Uthappizza",
-          image: "assets/images/uthappizza.png",
-          category: "mains",
-          label: "Hot",
-          price: "4.99",
-          description:
-            "A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer."
-        },
-        {
-          id: 1,
-          name: "Zucchipakoda",
-          image: "assets/images/zucchipakoda.png",
-          category: "appetizer",
-          label: "",
-          price: "1.99",
-          description:
-            "Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce"
-        },
-        {
-          id: 2,
-          name: "Vadonut",
-          image: "assets/images/vadonut.png",
-          category: "appetizer",
-          label: "New",
-          price: "1.99",
-          description:
-            "A quintessential ConFusion experience, is it a vada or is it a donut?"
-        },
-        {
-          id: 3,
-          name: "ElaiCheese Cake",
-          image: "assets/images/elaicheesecake.png",
-          category: "dessert",
-          label: "",
-          price: "2.99",
-          description:
-            "A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms"
-        }
-      ]
-    };
-  }
-
-  render() {
-    const menu = this.state.dishes.map(dish => {
-      return (
-        <div key={dish.id} className="col-12 mt-5">
-          <Media tag="li">
-            <Media left middle>
-              <Media object src={dish.image} alt={dish.name} />
-            </Media>
-            <Media body className="ml-5">
-              <Media heading>{dish.name}</Media>
-              <p>{dish.description}</p>
-            </Media>
-          </Media>
-        </div>
-      );
-    });
-
-    return (
-      <div className="container">
-        <div className="row">
-          <Media list>{menu}</Media>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Menu;
+import React, { Component } from "react";
+import { Media } from "reactstrap";
+
+class Menu extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dishes: [
+        {
+          id: 0,
+          name: "Uthappizza",
+          image: "assets/images/uthappizza.png",
+          category: "mains",
+          label: "Hot",
+          price: "4.99",
+          description:
+            "A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer."
+        },
+        {
+          id: 1,
+          name: "Zucchipakoda",
+          image: "assets/images/zucchipakoda.png",
+          category: "appetizer",
+          label: "",
+          price: "1.99",
+          description:
+            "Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce"
+        },
+        {
+          id: 2,
+          name: "Vadonut",
+          image: "assets/images/vadonut.png",
+          category: "appetizer",
+          label: "New",
+          price: "1.99",
+          description:
+            "A quintessential ConFusion experience, is it a vada or is it a donut?"
+        },
+        {
+          id: 3,
+          name: "ElaiCheese Cake",
+          image: "assets/images/elaicheesecake.png",
+          category: "dessert",
+          label: "",
+          price: "2.99",
+          description:
+            "A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms"
+        }
+      ]
+    };
+  }
+
+  render() {
+    const menu = this.state.dishes.map(dish => {
+      return (
+        <div key={dish.id} className="col-12 mt-5">
+          <Media tag="li">
+            <Media left middle>
+              <Media object src={dish.image} alt={dish.name} />
+            </Media>
+            <Media body className="ml-5">
+              <Media heading>{dish.name}</Media>
+              <p>{dish.description}</p>
+            </Media>
+          </Media>
+        </div>
+      );
+    });
+
+    return (
+      <div className="container">
+        <div className="row">
+          <Media list>{menu}</Media>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Menu;
diff --git a/Client/src/components/home.js b/Client/src/components/home.js
new file mode 100644
index 00000000..5a27ee2c
--- /dev/null
+++ b/Client/src/components/home.js
@@ -0,0 +1,69 @@
+import React, { useState, useEffect, useContext } from "react";
+import { Link } from "react-router-dom";
+import Search from "./search";
+import SongList from "./songlist";
+import { SongContext } from "../songContext";
+
+const Home = () => {
+  const { songText, songType } = useContext(SongContext);
+  const [type, setType] = songType;
+  const [text, setText] = songText;
+
+  const [songArr, setSongArr] = useState([{}]);
+
+  // const handleItemClick = () => {
+  //   console.log("Hurrrdfasfaskjdfkjjhsdkfjky");
+  // };
+  const handleSearch = () => {
+    const songarr = [
+      {
+        id: "asdassdadsassd",
+        image:
+          "data:image/jpeg;base64,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",
+        name: "Jo bhi hua",
+        artist: ["ARIJIT SINGH", " ARMAN MALIK"]
+      },
+      {
+        id: "asdassdadsassd",
+        image:
+          "data:image/jpeg;base64,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",
+        name: "Jo bhi hua",
+        artist: ["ARIJIT SINGH", " ARMAN MALIK"]
+      },
+      {
+        id: "asdassdadsassd",
+        image:
+          "data:image/jpeg;base64,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",
+        name: "Jo bhi hua",
+        artist: ["ARIJIT SINGH", " ARMAN MALIK"]
+      },
+      {
+        id: "asdassdadsassd",
+        image:
+          "data:image/jpeg;base64,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",
+        name: "Jo bhi hua",
+        artist: ["ARIJIT SINGH", " ARMAN MALIK"]
+      }
+    ];
+    setSongArr(songarr);
+
+    console.log("Hurrrrraaaay");
+  };
+
+  const renderSong = songArr.map(song => {
+    console.log(song);
+    return (
+      <Link to="/song/:id">
+        <SongList song={song} />
+      </Link>
+    );
+  });
+
+  return (
+    <>
+      <Search onsearch={handleSearch} />
+      <div className="songlist">{renderSong}</div>
+    </>
+  );
+};
+export default Home;
diff --git a/Client/src/components/search.js b/Client/src/components/search.js
index c558dc41..a35c275d 100644
--- a/Client/src/components/search.js
+++ b/Client/src/components/search.js
@@ -1,45 +1,47 @@
-import React, { useState } from "react";
-import "../stylesheet/search.css";
-import { KeyboardArrowDown } from "@material-ui/icons";
-
-const Search = () => {
-  const typeClick = () => {
-    const options = document.querySelector(".options");
-    const svg = document.querySelector(".type svg");
-
-    options.classList.toggle("active");
-    svg.classList.toggle("active");
-  };
-
-  const data = [
-    {
-      name: "Jo bheji thi Dua",
-      artist: "Arijit Singh"
-    }
-  ];
-
-  const [type, setType] = useState("Song");
-
-  return (
-    <div className="search">
-      <div className="searchBox">
-        <input placeholder="Search..." type="text" />
-        <div className="optionBox">
-          <div className="type" onClick={() => typeClick()}>
-            <h3>{type}</h3>
-            <KeyboardArrowDown />
-          </div>
-          <div className="options">
-            <li onClick={e => setType("Song")}>Song</li>
-            <li onClick={e => setType("Artist")}>Artist</li>
-            <li onClick={e => setType("Mood")}>Mood</li>
-            <li onClick={e => setType("Genre") ()}>Genre</li>
-          </div>
-        </div>
-      </div>
-      <button>Search</button>
-    </div>
-  );
-};
-
-export default Search;
+import React, { useState, useContext } from "react";
+import "../stylesheet/search.css";
+import { KeyboardArrowDown } from "@material-ui/icons";
+import { SongContext } from "../songContext";
+
+const Search = ({ onsearch }) => {
+  const typeClick = () => {
+    const options = document.querySelector(".options");
+    const svg = document.querySelector(".type svg");
+
+    options.classList.toggle("active");
+    svg.classList.toggle("active");
+  };
+
+  const { songText, songType } = useContext(SongContext);
+
+  const [type, setType] = songType;
+  const [text, setText] = songText;
+
+  return (
+    <div className="search">
+      <div className="searchBox">
+        <input
+          placeholder="Search..."
+          value={text}
+          onChange={e => setText(e.target.value)}
+          type="text"
+        />
+        <div className="optionBox">
+          <div className="type" onClick={() => typeClick()}>
+            <h3>{type}</h3>
+            <KeyboardArrowDown />
+          </div>
+          <div className="options">
+            <li onClick={e => setType("Song")}>Song</li>
+            <li onClick={e => setType("Artist")}>Artist</li>
+            <li onClick={e => setType("Mood")}>Mood</li>
+            <li onClick={e => setType("Genre")}>Genre</li>
+          </div>
+        </div>
+      </div>
+      <button onClick={onsearch}>Search</button>
+    </div>
+  );
+};
+
+export default Search;
diff --git a/Client/src/components/songlist.js b/Client/src/components/songlist.js
new file mode 100644
index 00000000..b76ed77f
--- /dev/null
+++ b/Client/src/components/songlist.js
@@ -0,0 +1,51 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import Divider from "@material-ui/core/Divider";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItemAvatar from "@material-ui/core/ListItemAvatar";
+import Avatar from "@material-ui/core/Avatar";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: "90%",
+    maxWidth: "677px",
+    minWidth: "300px",
+    cursor: "pointer",
+    borderRadius: "10px"
+    // backgroundColor: "red"
+  },
+  inline: {
+    display: "inline"
+  }
+}));
+
+export default function SongList({ song }) {
+  const classes = useStyles();
+
+  return (
+    <List className={classes.root}>
+      <ListItem button alignItems="flex-start" onClick={onclick}>
+        <ListItemAvatar>
+          <Avatar variant="rounded" alt="Travis Howard" src={song.image} />
+        </ListItemAvatar>
+        <ListItemText
+          primary={song.name}
+          secondary={
+            <React.Fragment>
+              <Typography
+                component="span"
+                variant="body2"
+                className={classes.inline}
+                color="textPrimary"
+              />
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+    </List>
+  );
+}
diff --git a/Client/src/components/testsongs.js b/Client/src/components/testsongs.js
deleted file mode 100644
index 28541ccd..00000000
--- a/Client/src/components/testsongs.js
+++ /dev/null
@@ -1,90 +0,0 @@
-export const songs = [
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  },
-  {
-    artist: "Post Malone",
-    name: "Sunflower",
-    id: "abc123",
-    duration: "4:00",
-    mood: "Chill",
-    genre: "Indie"
-  }
-];
diff --git a/Client/src/songContext.js b/Client/src/songContext.js
new file mode 100644
index 00000000..5dda86d5
--- /dev/null
+++ b/Client/src/songContext.js
@@ -0,0 +1,16 @@
+import React, { useState, createContext } from "react";
+
+export const SongContext = createContext();
+
+export const SongProvider = props => {
+  const [text, setText] = useState("");
+  const [type, setType] = useState("Song");
+
+  return (
+    <SongContext.Provider
+      value={{ songText: [text, setText], songType: [type, setType] }}
+    >
+      {props.children}
+    </SongContext.Provider>
+  );
+};
diff --git a/Client/src/stylesheet/addsong.css b/Client/src/stylesheet/addsong.css
new file mode 100644
index 00000000..aba50e8a
--- /dev/null
+++ b/Client/src/stylesheet/addsong.css
@@ -0,0 +1,133 @@
+.songbox{
+    position: absolute;
+    background: #000000;
+    padding: 30px;
+    top: 8%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 500px;
+    min-width: 350px;
+    display: flex;
+    justify-content: center; 
+    flex-direction: column;
+    align-items: center;
+    border-radius: 10px;   
+}
+.songcov{
+    color: white;
+    font-size: 18px;
+	font-family: 'Quicksand', sans-serif;
+}
+.coverblock{
+    position: relative;
+    height: 180px;
+    width: 80%;
+
+}
+.inct{
+    position: relative;
+    height: 50px;
+    width: 80%;
+    margin-top: 10px;
+    overflow: hidden;
+}
+.inct2{
+    margin-top: 10px;
+    position: relative;
+    height: 130px;
+    width: 80%;
+    overflow: hidden;
+}
+.addst{
+    color: #ffffff;
+	font-family: 'Abel', sans-serif;
+    font-size: 40px;   
+}
+
+.inct input,.inct2 textarea{
+    width: 100%;
+    height: 100%;
+    color: #ffffff;
+    padding-top: 20px;
+    border: none;
+    outline: none;
+    background: black;
+    font-size: 18px;
+	font-family: 'Quicksand', sans-serif;
+    
+}
+
+.inct label,.inct2 label{
+    position: absolute;
+    bottom: 0px;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    color: #ffffff;
+    border-bottom: 1px solid #ffffff;
+    font-size: 18px;
+	font-family: 'Quicksand', sans-serif;
+}
+
+.inct label::after, .inct2 label::after{
+    content:"";
+    position: absolute;
+    left: 0px;
+    bottom: -1px;
+    height: 100%;
+    width: 100%;
+    border-bottom: 3px solid blueviolet;
+    transform: translateX(-100%);
+    transition: all 0.3s ease;
+}
+
+.addsl{
+    position: absolute;
+    bottom: 5px;
+    left: 0px;
+    transition: all 0.3s ease;
+}
+
+.inct input:focus + .addslab .addsl,
+.inct input:valid + .addslab .addsl
+{
+    transform: translateY(-150%);
+    font-size: 14px;
+}
+
+.inct2 textarea:focus + .addslab .addsl,
+.inct2 textarea:valid + .addslab .addsl
+{
+    transform: translateY(-560%);
+    font-size: 14px;
+    background: #000000;
+    width:100%;
+}
+
+
+.inct input:focus + .addslab::after,
+.inct input:valid + .addslab::after{
+    transform: translateX(0%);
+}
+
+.inct2 textarea:focus + .addslab::after,
+.inct2 textarea:valid + .addslab::after{
+    transform: translateX(0%);
+    
+}
+.clickme4{
+    margin-top: 20px;
+    width: 80%;
+    padding: 10px 20px 10px 20px;
+    border-radius: 3px;
+    border-width: 0px;
+    color: #ffffff;
+    background-color: blueviolet;
+    font-size: 15px;
+    font-weight: 400;
+    font-family: 'Quicksand', sans-serif;
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/Client/src/stylesheet/loginpage.css b/Client/src/stylesheet/loginpage.css
index 47a971c0..0f109c83 100644
--- a/Client/src/stylesheet/loginpage.css
+++ b/Client/src/stylesheet/loginpage.css
@@ -1,14 +1,56 @@
-.loginbox{
-    padding: 50px;
-    color: #ffffff;
-    background: black;
-    top: 18%;
-    left : 67%;
-    position: fixed;
-}
-.bt2{
-    margin: 5px 0px 10px 210px ;
-}
-.bt3{
-    margin: 5px 0px 10px 5px ;
-}
\ No newline at end of file
+.loginbox {
+  padding: 50px;
+  color: #ffffff;
+  background: black;
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 400px;
+  min-width: 350px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.loginbox .buttons {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.loginbox .buttons .bt {
+  width: 100%;
+  margin: 10px 0;
+  padding: 10px 20px 10px 20px;
+  border-radius: 3px;
+  border: none;
+  color: #ffffff;
+  background-color: blueviolet;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: "Quicksand", sans-serif;
+}
+
+.loginbox input {
+  padding: 5px 10px 5px 10px;
+  height: 35px;
+  width: 100%;
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+
+.loginbox label {
+  font-size: 15px;
+  margin-bottom: 3px;
+  font-family: "Quicksand", sans-serif;
+  padding: 10px 0;
+}
+
+.loginbox h1 {
+  font-family: "Abel", sans-serif;
+  font-size: 40px;
+}
diff --git a/Client/src/stylesheet/moderatorpage.css b/Client/src/stylesheet/moderatorpage.css
new file mode 100644
index 00000000..1ab56691
--- /dev/null
+++ b/Client/src/stylesheet/moderatorpage.css
@@ -0,0 +1,114 @@
+.modpagecont{
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+.moderator{
+    border: 5px solid #ffffff;
+    border-radius: 30px;
+    position: relative;
+    display: flex;
+    height: 90%;
+    width: 100%;
+    max-width: 1400px;
+    min-width: 900px;
+    background: #000000;
+    flex-direction: column;
+    overflow-x: hidden;
+}
+.modheadtext{
+    position: absolute;
+    color: #ffffff;
+    left: 50%;
+    transform: translateX(-50%);
+    padding-top: 50px;
+	font-family: 'Abel', sans-serif;
+    font-size: 60px;
+}
+
+
+.modlisttop{
+    position: absolute;
+    display: flex;
+    top: 150px;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    background-color: #3e3f40;
+}
+
+.modhtext{
+    color: #ffffff;
+    text-transform: uppercase;
+    font-size: 22px;
+    font-family: "Rajdhani", sans-serif;
+}
+.modlist{
+    position: relative;
+    top:200px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.modlistent{
+    display: flex;
+    top: 30%;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    border-bottom: 1px solid white;
+}
+
+.modetext{
+    color: #ffffff;
+    font-size: 18px;
+    font-family: 'Quicksand', sans-serif;
+}
+
+.pd1{
+    margin-left: 30px;
+    width: 29%;
+}
+
+.pd2{
+    width: 18%;
+}
+
+.pd3{
+    width: 9%;
+}
+
+.pd4{
+    width: 9%;
+}
+.pd5{
+    width: 9%;
+}
+.pd6{
+    padding-left: 8%;
+    width: 20%;
+}
+.clickme5{
+    width: 8%;
+    padding: 5px 10px 5px 10px;
+    border-radius: 3px;
+    border-width: 0px;
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 400;
+    font-family: 'Quicksand', sans-serif;
+    display: flex;
+    justify-content: center;
+}
+.but1{
+    background-color: #1da82d;
+    margin-left: 2%;
+}
+.but2{
+    background-color: #e05c34;
+    margin-left: 2%;
+}
\ No newline at end of file
diff --git a/Client/src/stylesheet/navbar.css b/Client/src/stylesheet/navbar.css
index 38edbe73..ac27d46d 100644
--- a/Client/src/stylesheet/navbar.css
+++ b/Client/src/stylesheet/navbar.css
@@ -1,131 +1,131 @@
-.navbar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  z-index: 5;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.479), black);
-  height: 80px;
-  color: white;
-  font-family: "Montserrat", sans-serif;
-  letter-spacing: 1px;
-  border-bottom: 2px solid white;
-}
-
-.navbar .item {
-  padding: 10px;
-  flex-grow: 1;
-  height: 100%;
-}
-
-.navbar .right {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  position: relative;
-}
-.navbar .left {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.navbar .center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.navbar .right div,
-.left div,
-.centre div {
-  padding: 5px;
-  font-weight: 500;
-  font-size: 1.06em;
-}
-
-.navbar .right .profile {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50px;
-  transition: 0.5s;
-  position: relative;
-}
-
-.navbar .right .dropdown {
-  display: none;
-  background: rgba(61, 61, 61, 0.9);
-  position: absolute;
-  top: 65px;
-  left: 0;
-  right: 0;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  border-radius: 5px;
-}
-
-.navbar .right .profile .dropdown-active {
-  display: flex;
-}
-
-.navbar .right .dropdown li {
-  list-style: none;
-  padding: 5px;
-  font-size: 0.85em;
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.navbar .right .profile:hover {
-  background: rgb(58, 58, 58);
-}
-
-.navbar .right .profile img {
-  width: 40px;
-  margin: 5px;
-  border-radius: 50%;
-  box-shadow: 20px 20px 60px #0d0b14, -20px -20px 60px #000000;
-  cursor: pointer;
-}
-
-.navbar .right .profile h5 {
-  padding: 5px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.navbar .left .brand {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.navbar .left .brand h5 {
-  font-size: 1.25em;
-  letter-spacing: 2px;
-}
-
-.navbar .left .brand .logo {
-  transform: rotateZ(90deg);
-}
-
-.navbar .center input {
-  width: 80%;
-  height: 35px;
-  padding: 5px 20px;
-  border: none;
-  border-radius: 8px;
-  /* background: #0f0f53; */
-  font-family: "Montserrat", sans-serif;
-  color: rgb(0, 0, 0);
-  font-weight: 500;
-  font-size: 1.05em;
-  min-width: 200px;
-}
-
-.navbar .center input:focus {
-  outline: none;
-  box-shadow: #0404d8 0 0 10px;
-}
+.navbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.479), black);
+  height: 80px;
+  color: white;
+  font-family: "Montserrat", sans-serif;
+  letter-spacing: 1px;
+  border-bottom: 2px solid white;
+}
+
+.navbar .item {
+  padding: 10px;
+  flex-grow: 1;
+  height: 100%;
+}
+
+.navbar .right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: relative;
+}
+.navbar .left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.navbar .center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.navbar .right div,
+.left div,
+.centre div {
+  padding: 5px;
+  font-weight: 500;
+  font-size: 1.06em;
+}
+
+.navbar .right .profile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  transition: 0.5s;
+  position: relative;
+}
+
+.navbar .right .dropdown {
+  display: none;
+  background: rgba(61, 61, 61, 0.9);
+  position: absolute;
+  top: 65px;
+  left: 0;
+  right: 0;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border-radius: 5px;
+}
+
+.navbar .right .profile .dropdown-active {
+  display: flex;
+}
+
+.navbar .right .dropdown li {
+  list-style: none;
+  padding: 5px;
+  font-size: 0.85em;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.navbar .right .profile:hover {
+  background: rgb(58, 58, 58);
+}
+
+.navbar .right .profile img {
+  width: 40px;
+  margin: 5px;
+  border-radius: 50%;
+  box-shadow: 20px 20px 60px #0d0b14, -20px -20px 60px #000000;
+  cursor: pointer;
+}
+
+.navbar .right .profile h5 {
+  padding: 5px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.navbar .left .brand {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navbar .left .brand h5 {
+  font-size: 1.25em;
+  letter-spacing: 2px;
+}
+
+.navbar .left .brand .logo {
+  transform: rotateZ(90deg);
+}
+
+.navbar .center input {
+  width: 80%;
+  height: 35px;
+  padding: 5px 20px;
+  border: none;
+  border-radius: 8px;
+  /* background: #0f0f53; */
+  font-family: "Montserrat", sans-serif;
+  color: rgb(0, 0, 0);
+  font-weight: 500;
+  font-size: 1.05em;
+  min-width: 200px;
+}
+
+.navbar .center input:focus {
+  outline: none;
+  box-shadow: #0404d8 0 0 10px;
+}
diff --git a/Client/src/stylesheet/playlist.css b/Client/src/stylesheet/playlist.css
index e4263fac..e62a4e6d 100644
--- a/Client/src/stylesheet/playlist.css
+++ b/Client/src/stylesheet/playlist.css
@@ -1,37 +1,37 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
-.heading {
-  font-family: "Montserrat", sans-serif;
-  padding: 10px;
-  font-weight: 600;
-  margin: 0 15px 20px 15px;
-  border-bottom: 2px solid rgb(179, 179, 179);
-  font-size: 1.5em;
-  text-align: center;
-  color: white;
-}
-
-.playlist .item {
-  display: flex;
-  margin: 10px;
-  padding: 5px;
-  align-items: center;
-  border-radius: 5px;
-  transition: 0.3s all;
-  cursor: pointer;
-}
-
-.playlist .item:hover {
-  background: rgb(49, 49, 49);
-}
-
-.playlist .item .name {
-  font-family: "Montserrat", sans-serif;
-  padding: 10px;
-  color: white;
-}
-
-.playlist .item img {
-  width: 50px;
-  border-radius: 5px;
-}
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+.heading {
+  font-family: "Montserrat", sans-serif;
+  padding: 10px;
+  font-weight: 600;
+  margin: 0 15px 20px 15px;
+  border-bottom: 2px solid rgb(179, 179, 179);
+  font-size: 1.5em;
+  text-align: center;
+  color: white;
+}
+
+.playlist .item {
+  display: flex;
+  margin: 10px;
+  padding: 5px;
+  align-items: center;
+  border-radius: 5px;
+  transition: 0.3s all;
+  cursor: pointer;
+}
+
+.playlist .item:hover {
+  background: rgb(49, 49, 49);
+}
+
+.playlist .item .name {
+  font-family: "Montserrat", sans-serif;
+  padding: 10px;
+  color: white;
+}
+
+.playlist .item img {
+  width: 50px;
+  border-radius: 5px;
+}
diff --git a/Client/src/stylesheet/reviews.css b/Client/src/stylesheet/reviews.css
index b348563f..8c4f061d 100644
--- a/Client/src/stylesheet/reviews.css
+++ b/Client/src/stylesheet/reviews.css
@@ -1,20 +1,51 @@
-@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@1,300&display=swap');
-.reviews{
-    height: 70px;
-    width: 400px;
-    border: 1px solid #ffffff;
-    
-}
-.reviewpic{
-    float: left;
-    height:68px;
-    width:68px;
-}
-.reviewtext{
-    padding-top: 8px;
-    padding-left: 5px;
-    height:40px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    font-family: 'Merriweather Sans', sans-serif;
-}
\ No newline at end of file
+@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@1,300&display=swap");
+.reviews {
+  display: flex;
+
+  width: 100%;
+  border: 1px solid #ffffff;
+  border-radius: 5px;
+  margin: 10px 0;
+  position: relative;
+}
+.reviewpic {
+  height: 100%;
+  width: 20%;
+  padding: 5px;
+  /* background: blue; */
+  border-right: 1px solid rgb(201, 201, 201);
+}
+
+.reviewpic img {
+  border-radius: 5px;
+  width: 100%;
+}
+
+.reviews .reviewSection {
+  flex-grow: 1;
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+}
+
+.reviews .reviewSection .head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  width: 100%;
+  border-radius: 5px;
+  /* background: blue; */
+}
+
+.reviews .reviewSection .head h3 {
+  font-family: "Quicksand", sans-serif;
+  font-size: 1em;
+}
+
+.reviews .reviewSection .content {
+  width: 100%;
+}
+.reviews .reviewSection .content p {
+  height: 100%;
+}
diff --git a/Client/src/stylesheet/search.css b/Client/src/stylesheet/search.css
index 112abef2..a38829a0 100644
--- a/Client/src/stylesheet/search.css
+++ b/Client/src/stylesheet/search.css
@@ -1,131 +1,134 @@
-.search {
-  background: rgba(0, 0, 0, 0.775);
-  width: 90%;
-  max-width: 677px;
-  font-family: "Montserrat", sans-serif;
-  font-weight: 500;
-  border-radius: 70px;
-  position: relative;
-}
-
-.search .searchBox {
-  background: white;
-  border-radius: 50px;
-  padding-left: 10px;
-  height: 50px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 80%;
-}
-
-.search .searchBox input {
-  border: none;
-  font-size: 1.25em;
-  font-family: "Roboto Condensed", sans-serif;
-  background: white;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 5%;
-  width: 70%;
-}
-
-.search .searchBox input:focus {
-  outline: none;
-}
-
-.search .searchBox .optionBox {
-  position: absolute;
-  right: 0;
-  width: 22.5%;
-  min-width: 100px;
-}
-
-.search .searchBox .optionBox .type {
-  background: black;
-  color: white;
-  height: 50px;
-  border-radius: 50px;
-  border: 2px solid white;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  cursor: pointer;
-  width: 100%;
-}
-
-.search .searchBox .optionBox .type h3 {
-  font-size: 1em;
-  font-weight: 600;
-}
-
-.search .searchBox .optionBox .type svg {
-  transition: 0.3s all;
-}
-
-.search .searchBox .optionBox .type svg.active {
-  transform: rotateZ(180deg);
-}
-
-.search .searchBox .optionBox .options {
-  position: absolute;
-  background: white;
-  top: 50px;
-  list-style: none;
-  width: 100%;
-  display: none;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-}
-
-.search .searchBox .optionBox .options li:hover {
-  background: rgb(117, 117, 117);
-  color: white;
-}
-
-.search .searchBox .optionBox .options li {
-  padding: 10px;
-  width: 100%;
-  text-align: center;
-  border-radius: 10px;
-  transition: 0.2s all;
-}
-
-.search button {
-  background: white;
-  font-family: "Montserrat", sans-serif;
-  font-weight: 600;
-  font-size: 1.15em;
-  height: 50px;
-  border-radius: 50px;
-  border: 2px solid black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: 0.3s all;
-  cursor: pointer;
-  position: absolute;
-  right: 0;
-  width: 20%;
-}
-
-.search button:hover {
-  background: black;
-  color: white;
-}
-.search button:focus {
-  outline: none;
-}
-
-.search .searchBox .optionBox .options.active {
-  display: flex;
-}
-
-@media screen and (max-width: 700px) {
-  .search {
-  }
-}
+.search {
+  background: rgba(0, 0, 0, 0.775);
+  width: 90%;
+  height: 50px;
+  max-width: 677px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 500;
+  border-radius: 70px;
+  position: relative;
+  margin: 50px;
+}
+
+.search .searchBox {
+  background: white;
+  border-radius: 50px;
+  padding-left: 10px;
+  height: 50px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 80%;
+}
+
+.search .searchBox input {
+  border: none;
+  font-size: 1.25em;
+  font-family: "Roboto Condensed", sans-serif;
+  background: white;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 5%;
+  width: 70%;
+}
+
+.search .searchBox input:focus {
+  outline: none;
+}
+
+.search .searchBox .optionBox {
+  position: absolute;
+  right: 0;
+  width: 22.5%;
+  min-width: 100px;
+}
+
+.search .searchBox .optionBox .type {
+  background: black;
+  color: white;
+  height: 50px;
+  border-radius: 50px;
+  border: 2px solid white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.search .searchBox .optionBox .type h3 {
+  font-size: 1em;
+  font-weight: 600;
+}
+
+.search .searchBox .optionBox .type svg {
+  transition: 0.3s all;
+}
+
+.search .searchBox .optionBox .type svg.active {
+  transform: rotateZ(180deg);
+}
+
+.search .searchBox .optionBox .options {
+  z-index: 3;
+  position: absolute;
+  background: white;
+  top: 50px;
+  list-style: none;
+  width: 100%;
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+}
+
+.search .searchBox .optionBox .options li:hover {
+  background: rgb(117, 117, 117);
+  color: white;
+}
+
+.search .searchBox .optionBox .options li {
+  padding: 10px;
+  width: 100%;
+  text-align: center;
+  border-radius: 10px;
+  transition: 0.2s all;
+}
+
+.search button {
+  background: white;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 600;
+  font-size: 1.15em;
+  height: 50px;
+  border-radius: 50px;
+  border: 2px solid black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s all;
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  width: 20%;
+}
+
+.search button:hover {
+  background: black;
+  color: white;
+}
+.search button:focus {
+  outline: none;
+}
+
+.search .searchBox .optionBox .options.active {
+  display: flex;
+}
+
+@media screen and (max-width: 700px) {
+  .search {
+  }
+}
diff --git a/Client/src/stylesheet/sidebar.css b/Client/src/stylesheet/sidebar.css
index 4e8393a2..559da1b1 100644
--- a/Client/src/stylesheet/sidebar.css
+++ b/Client/src/stylesheet/sidebar.css
@@ -1,122 +1,122 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
-.sidebar {
-  width: 20%;
-  height: 100vh;
-  top: 0;
-  min-width: 250px;
-  min-height: 400px;
-  position: fixed;
-  background: rgba(0, 0, 0, 0.8);
-  transform: translateX(-100%);
-  transition: transform 0.3s ease-in;
-}
-
-.sidebar .head {
-  width: 100%;
-  height: 80px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: 000084;
-  box-shadow: rgba(0, 0, 0, 0.863) 0 3 10px;
-}
-
-.sidebar .foot {
-  width: 100%;
-  height: 80px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  /* background: rgba(0, 0, 0, 0.8); */
-  box-shadow: rgba(0, 0, 0, 0.863) 0 3 10px;
-}
-
-.sidebar .foot .add {
-  position: absolute;
-  width: 80%;
-  height: 60%;
-  top: 50%;
-  left: 50%;
-  border-radius: 55px;
-  transform: translateX(-50%) translateY(-50%);
-  background: rgba(0, 0, 0, 0);
-  cursor: pointer;
-  transition: 0.5s all;
-}
-
-.sidebar .foot span {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  transition: 0.5s all;
-}
-
-.sidebar .foot h3 {
-  font-family: "Montserrat", sans-serif;
-  font-weight: 300;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  opacity: 0;
-  transform: translateY(-50%);
-  transition: 0.5s all;
-}
-
-.sidebar .foot .add:hover span {
-  top: 50%;
-  left: 100%;
-  transform: translateX(-100%) translateY(-50%);
-}
-
-.sidebar .foot .add:hover {
-  background: rgba(34, 32, 32, 0.986);
-}
-
-.sidebar .foot .add:hover h3 {
-  top: 50%;
-  left: 10%;
-  opacity: 1;
-  transform: translateY(-50%);
-  color: white;
-}
-
-.sidebar .content {
-  position: absolute;
-  top: 80px;
-  bottom: 80px;
-  right: 0px;
-  left: 0px;
-  overflow-y: scroll;
-}
-
-.sidebar-active {
-  transform: translateX(0);
-}
-
-.sidebar ::-webkit-scrollbar {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 10px;
-  background: rgb(0, 0, 0);
-  border-radius: 6px;
-}
-
-.sidebar ::-webkit-scrollbar-track {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(54, 54, 54, 0.411);
-  opacity: 0.5;
-  /* box-shadow: #162447 0 0 4px; */
-  border-radius: 6px;
-}
-
-.sidebar ::-webkit-scrollbar-thumb {
-  background: rgb(44, 44, 44);
-  border-radius: 6px;
-}
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+.sidebar {
+  width: 20%;
+  height: 100vh;
+  top: 0;
+  min-width: 250px;
+  min-height: 400px;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.8);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in;
+}
+
+.sidebar .head {
+  width: 100%;
+  height: 80px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: 000084;
+  box-shadow: rgba(0, 0, 0, 0.863) 0 3 10px;
+}
+
+.sidebar .foot {
+  width: 100%;
+  height: 80px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  /* background: rgba(0, 0, 0, 0.8); */
+  box-shadow: rgba(0, 0, 0, 0.863) 0 3 10px;
+}
+
+.sidebar .foot .add {
+  position: absolute;
+  width: 80%;
+  height: 60%;
+  top: 50%;
+  left: 50%;
+  border-radius: 55px;
+  transform: translateX(-50%) translateY(-50%);
+  background: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  transition: 0.5s all;
+}
+
+.sidebar .foot span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  transition: 0.5s all;
+}
+
+.sidebar .foot h3 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 300;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: 0.5s all;
+}
+
+.sidebar .foot .add:hover span {
+  top: 50%;
+  left: 100%;
+  transform: translateX(-100%) translateY(-50%);
+}
+
+.sidebar .foot .add:hover {
+  background: rgba(34, 32, 32, 0.986);
+}
+
+.sidebar .foot .add:hover h3 {
+  top: 50%;
+  left: 10%;
+  opacity: 1;
+  transform: translateY(-50%);
+  color: white;
+}
+
+.sidebar .content {
+  position: absolute;
+  top: 80px;
+  bottom: 80px;
+  right: 0px;
+  left: 0px;
+  overflow-y: scroll;
+}
+
+.sidebar-active {
+  transform: translateX(0);
+}
+
+.sidebar ::-webkit-scrollbar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 10px;
+  background: rgb(0, 0, 0);
+  border-radius: 6px;
+}
+
+.sidebar ::-webkit-scrollbar-track {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(54, 54, 54, 0.411);
+  opacity: 0.5;
+  /* box-shadow: #162447 0 0 4px; */
+  border-radius: 6px;
+}
+
+.sidebar ::-webkit-scrollbar-thumb {
+  background: rgb(44, 44, 44);
+  border-radius: 6px;
+}
diff --git a/Client/src/stylesheet/signuppage.css b/Client/src/stylesheet/signuppage.css
index 722b5542..0a73c336 100644
--- a/Client/src/stylesheet/signuppage.css
+++ b/Client/src/stylesheet/signuppage.css
@@ -1,56 +1,87 @@
-.signupbox{
-    padding: 50px;
-    color: #ffffff;
-    background: black;
-    top: 18%;
-    left : 67%;
-    position: fixed;
-}
-.clickme3{
-    padding: 10px 20px 10px 20px;
-    border-radius: 3px;
-    border-width: 0px;
-    color: #ffffff;
-    background-color: blueviolet;
-    font-size: 15px;
-    font-weight: 400;
-    font-family: 'Quicksand', sans-serif;
-    display: inline-block;
-}
-.bt1{
-    margin: 5px 0px 10px 254px ;
-}
-
-.formtop{
-	font-family: 'Abel', sans-serif;
-    font-size: 40px;
-    
-   
-}
-.formfield{
-    font-size: 15px;
-    margin-bottom: 3px;
-	font-family: 'Quicksand', sans-serif;
-}
-.forminput{
-    padding: 5px 10px 5px 10px;
-    height: 35px;
-    width: 400px;
-    font-size: 18px;
-    margin-bottom: 12px;
-}
-.seltype{
-    color: #ffffff;
-    background: #000000;
-    height: 35px;
-    width: 400px;
-    font-size: 15px;
-    margin-bottom: 12px;
-}
-select:focus{
-    border: 3px solid blueviolet;
-}
-
-input:focus{
-    border: 3px solid blueviolet;
-}
\ No newline at end of file
+.signupbox {
+  padding: 50px;
+  color: #ffffff;
+  background: black;
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  margin-bottom: 50px;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 500px;
+  min-width: 350px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.bt1 {
+  margin: 5px 0px 10px 254px;
+}
+
+.signupbox h1 {
+  font-family: "Abel", sans-serif;
+  font-size: 40px;
+}
+.formfield {
+  font-size: 15px;
+  margin-bottom: 3px;
+  font-family: "Quicksand", sans-serif;
+}
+.forminput {
+  padding: 5px 10px 5px 10px;
+  height: 35px;
+  width: 100%;
+  font-size: 18px;
+  margin-bottom: 12px;
+  border: none;
+  border-radius: 5px;
+}
+.seltype {
+  height: 35px;
+  width: 100%;
+  font-size: 15px;
+  margin-bottom: 12px;
+  border-radius: 5px;
+}
+
+.seltype option {
+  height: 50px;
+}
+select:focus {
+  border: 3px solid blueviolet;
+}
+
+input:focus {
+  border: 3px solid blueviolet;
+}
+
+.loginbox .buttons {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.signupbox .buttons .bt {
+  width: 100%;
+  margin: 10px 0;
+  padding: 10px 20px 10px 20px;
+  border-radius: 3px;
+  border: none;
+  color: #ffffff;
+  background-color: blueviolet;
+  font-size: 15px;
+  font-weight: 400;
+  font-family: "Quicksand", sans-serif;
+}
+
+.signupbox .profImage {
+  width: 100%;
+  /* background: red; */
+}
+
+.signupbox .profImage .img img {
+  width: 100%;
+}
diff --git a/Client/src/stylesheet/songpage.css b/Client/src/stylesheet/songpage.css
index 49a871c5..d10ba62f 100644
--- a/Client/src/stylesheet/songpage.css
+++ b/Client/src/stylesheet/songpage.css
@@ -1,121 +1,150 @@
-@import url('https://fonts.googleapis.com/css2?family=Abel&family=Quicksand:wght@300;500&family=Rajdhani:wght@300&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@1,300&display=swap');
-.songpage{
-    position: absolute;
-	top: 8%;
-    left: 12%;
-    width:77%;
-    text-align: center;
-}
-.song1{
-	background-image: linear-gradient(to bottom , rgba(76,76,76,1) 10%, rgba(64,64,64,1) 20%, rgba(5,4,5,1) 55%, rgba(72,73,74,1) 100%);
-	padding: 50px;
-	color: #ffffff;
-    overflow: auto;
-    text-align: left;
-    display: inline-block;
-}
-.block{
-    padding-top: 4px;
-}
-.songtext3{
-    font-family: 'Merriweather Sans', sans-serif;
-    font-size: 16px;
-}
-.songart{
-	float:left;
-	height: 300px;
-	width: 300px;
-	box-shadow: 0px 0px 18px 1px rgba(0,0,0,1);
-}
-.songconta{
-    float:left;
-    padding-left: 60px;
-    padding-top: 20px;
-	
-}
-.songtag{
-	text-transform: uppercase;
-	font-size: 22px;
-    font-family: 'Rajdhani', sans-serif;
-}
-.songname{
-	font-family: 'Abel', sans-serif;
-    font-size: 70px;
-   
-}
-.songtext1{
-	font-family: 'Quicksand', sans-serif;		
-	font-weight: 300;
-	font-size:19px;
-	padding-left: 5px;
-	display: inline;
-}
-.songtext2{
-	display:inline;
-	font-family: 'Quicksand', sans-serif;
-	padding-left: 6px;
-}
-.clickme{
-    display: block;
-    margin: 10px 20px 10px 400px ;
-    padding: 12px 24px 12px 24px;
-    border-radius: 30px;
-    border-width: 0px;
-    color: #ffffff;
-    background-color: blueviolet;
-    font-size: 20px;
-    font-weight: 400;
-    font-family: 'Quicksand', sans-serif;
-}
-.conta2{
-    padding-top: 150px;
-    left: 80%;
-    color: #ffffff;
-}
-.conta3{
-    float: left;
-    color: #ffffff;
-    padding-left: 20px;
-    
-}
-.conta4{
-    float: left;
-    padding-left: 124px;
+@import url("https://fonts.googleapis.com/css2?family=Abel&family=Quicksand:wght@300;500&family=Rajdhani:wght@300&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@1,300&display=swap");
+.songpage {
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 77%;
+  max-width: 900px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+.container1,
+.container2 {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(76, 76, 76, 1) 10%,
+    rgba(64, 64, 64, 1) 20%,
+    rgba(5, 4, 5, 1) 55%,
+    rgba(72, 73, 74, 1) 100%
+  );
+  padding: 50px;
+  color: #ffffff;
+  margin: 10px 0;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.container1 img {
+  width: 25%;
+  min-width: 250px;
+  border-radius: 10px;
+}
+
+.container1 .info {
+  flex-grow: 1;
+  padding: 30px;
+  height: 300px;
+  margin: 20px;
+  background: rgba(14, 14, 14, 0.692);
+  position: relative;
+  display: flex;
+  border-radius: 20px;
+  border: 2px solid black;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.container1 .info .block {
+  display: flex;
+}
+
+.container1 .info .block .item1 {
+  text-transform: uppercase;
+  font-size: 22px;
+  font-family: "Rajdhani", sans-serif;
+  width: 80px;
+  text-align: left;
+  margin: 0 10px;
+}
+
+.container1 .info .block .item2 {
+  text-transform: uppercase;
+  font-size: 22px;
+  font-family: "Rajdhani", sans-serif;
+}
+
+.container1 .info .head .item1,
+.container1 .info .head .item2 {
+  font-size: 40px;
+}
 
+.container1 .info button {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(50%);
+  bottom: 0;
+  display: block;
+  padding: 12px 24px 12px 24px;
+  border-radius: 30px;
+  border-width: 0px;
+  color: #ffffff;
+  background-color: blueviolet;
+  font-size: 20px;
+  font-weight: 400;
+  font-family: "Quicksand", sans-serif;
 }
-.lyrics{
-    margin-top: 8px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width:400px;
-    height:450px;
 
+.container2 .lyrics,
+.reviewsTab {
+  flex-grow: 1;
+  height: 650px;
+  background: rgba(0, 0, 0, 0.295);
+  border-radius: 20px;
+  margin: 10px;
+  width: 50%;
+}
+
+.container2 .lyrics h2,
+.reviewsTab h2 {
+  font-family: "Abel", sans-serif;
+  font-size: 40px;
+  /* background: red; */
+  padding: 10px;
+}
+
+.container2 .lyrics div p {
+  padding: 20px;
+  overflow-y: scroll;
+  height: 450px;
+  font-family: "Quicksand", sans-serif;
+}
+.container2 .reviewsTab .reviewscroll {
+  /* background: red; */
+  padding: 10px;
+  height: 350px;
+  overflow-y: scroll;
+}
+
+.container2 .reviewsTab .rateTab {
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+}
+.container2 .reviewsTab .rateTab button {
+  padding: 5px;
+  font-size: 1.15em;
+}
+
+.container2 .reviewsTab .rateTab textarea {
+  padding: 5px;
+}
+
+@media screen and (max-width: 995px) {
+  .container1 {
+    flex-direction: column;
+  }
+
+  .container2 {
+    flex-direction: column;
+    align-items: initial;
+  }
+
+  .container2 .lyrics,
+  .reviewsTab {
+    width: 100%;
+  }
 }
-.reviewscroll{
-    height: 245px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin-bottom: 20px;
-    margin-top: 8px;
-}
-.revinput{
-    margin-top: 10px;
-    width: 400px;
-    height: 70px;
-    padding: 10px 20px 10px 20px;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-.clickme2{
-    display: block;
-    margin: 5px 20px 10px 310px ;
-    padding: 10px 20px 10px 20px;
-    border-radius: 3px;
-    border-width: 0px;
-    color: #ffffff;
-    background-color: blueviolet;
-    font-size: 15px;
-    font-weight: 400;
-    font-family: 'Quicksand', sans-serif;
-}
\ No newline at end of file
diff --git a/Client/src/stylesheet/styles.css b/Client/src/stylesheet/styles.css
index ce57bf45..6c65e9f4 100644
--- a/Client/src/stylesheet/styles.css
+++ b/Client/src/stylesheet/styles.css
@@ -146,7 +146,8 @@ a {
   height: 500px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  flex-direction: column;
   /* background: red; */
   transition: 0.5s all;
 }
diff --git a/Client/src/stylesheet/upload.css b/Client/src/stylesheet/upload.css
index 6caef40a..c652030e 100644
--- a/Client/src/stylesheet/upload.css
+++ b/Client/src/stylesheet/upload.css
@@ -1,4 +1,6 @@
-.uppic{
-    max-height: 200px;
-    max-width: 200px;
-}
\ No newline at end of file
+
+.uppic {
+  max-height: 200px;
+  max-width: 200px;
+
+}
diff --git a/Client/src/userContext.js b/Client/src/userContext.js
index e455c8a5..ee00d486 100644
--- a/Client/src/userContext.js
+++ b/Client/src/userContext.js
@@ -1,19 +1,21 @@
-import React, { useState, createContext } from "react";
-
-export const UserContext = createContext();
-
-export const UserProvider = props => {
-  const [user, setUser] = useState({
-    name: "Tushar",
-    email: "tush@gmail.com",
-    bio: "Be confident in whatever you do...",
-    image:
-      "https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png"
-  });
-
-  return (
-    <UserContext.Provider value={[user, setUser]}>
-      {props.children}
-    </UserContext.Provider>
-  );
-};
+import React, { useState, createContext } from "react";
+
+export const UserContext = createContext();
+
+export const UserProvider = props => {
+  const detail = {
+    name: "Tushar",
+    email: "tush@gmail.com",
+    bio: "i am fine",
+    image:
+      "https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png"
+  };
+
+  const [user, setUser] = useState(null);
+
+  return (
+    <UserContext.Provider value={[user, setUser]}>
+      {props.children}
+    </UserContext.Provider>
+  );
+};
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 25e28f9c..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,110 +0,0 @@
-{
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "bcryptjs": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
-      "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms="
-    },
-    "buffer-equal-constant-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
-    },
-    "ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "jsonwebtoken": {
-      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
-      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
-      "requires": {
-        "jws": "^3.2.2",
-        "lodash.includes": "^4.3.0",
-        "lodash.isboolean": "^3.0.3",
-        "lodash.isinteger": "^4.0.4",
-        "lodash.isnumber": "^3.0.3",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.isstring": "^4.0.1",
-        "lodash.once": "^4.0.0",
-        "ms": "^2.1.1",
-        "semver": "^5.6.0"
-      }
-    },
-    "jwa": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
-      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
-      "requires": {
-        "buffer-equal-constant-time": "1.0.1",
-        "ecdsa-sig-formatter": "1.0.11",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "jws": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-      "requires": {
-        "jwa": "^1.4.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "lodash.includes": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
-    },
-    "lodash.isboolean": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
-    },
-    "lodash.isinteger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
-    },
-    "lodash.isnumber": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
-    },
-    "lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
-    },
-    "lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-    },
-    "lodash.once": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
-    },
-    "ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
-    },
-    "semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-    }
-  }
-}