diff --git a/pages/Jukebox.html b/pages/Jukebox.html
index eb0ac93..08641c7 100644
--- a/pages/Jukebox.html
+++ b/pages/Jukebox.html
@@ -8,106 +8,11 @@
+
+
Jukebox
diff --git a/stylesheets/jukebox.css b/stylesheets/jukebox.css
new file mode 100644
index 0000000..f153f2a
--- /dev/null
+++ b/stylesheets/jukebox.css
@@ -0,0 +1,98 @@
+body{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: rgb(52, 52, 146);
+}
+.jukeBox{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-style: solid;
+ padding: 5px;
+ width: 300px;
+ border-radius: 15px;
+ background-color: black;
+ border-color: cyan;
+}
+
+@media (min-width: 800px){
+ .jukeBox{
+ width: 500px;
+ }
+}
+.selected{
+ background-color: black;
+ color: white;
+}
+.songSelector{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height:100%;
+ width:100%;
+}
+.songList{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-style: solid;
+ border-width: 1px;
+ width: 100%;
+ height: 197px;
+ overflow: scroll;
+ background-color: lightblue;
+ border-top-left-radius: 15px;
+
+}
+.songChanger{
+ height:100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+}
+.jukeboxButton{
+ border: none;
+ padding-top:114%;
+ padding-bottom: 102%;
+ background-color: rgb(182, 155, 231);
+}
+#prevSong{
+ border-top-right-radius: 15px;
+}
+.jukeboxButton:hover{
+ background-color: lightcoral;
+}
+.jukeboxButton:active{
+ background-color: red;
+}
+.song{
+ margin: 5px;
+ width: 100%;
+ text-align: center;
+ height: 30px;
+
+}
+audio{
+ width:100%;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+.playing{
+ color: white;
+ display: flex;
+ justify-content: left;
+ flex-direction: row;
+ height: 30px;
+ align-items: center;
+}
+#currentlyPlaying{
+ color: pink;
+}
+audio{
+ background-color: black;
+ border-bottom-left-radius: 15px;
+ border-bottom-right-radius: 15px;
+}
\ No newline at end of file