diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/pom.xml b/pom.xml
index e45147d..960ac00 100644
--- a/pom.xml
+++ b/pom.xml
@@ -11,21 +11,31 @@
 
   <properties>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-<junit.version>5.10.2</junit.version>  </properties>
+    <junit.version>5.10.2</junit.version>
+
+    <maven.compiler.release>21</maven.compiler.release>
+    <javafx.version>21.0.4</javafx.version>
+  </properties>
 
   <dependencies>
     <dependency>
       <groupId>org.openjfx</groupId>
       <artifactId>javafx-controls</artifactId>
-      <version>21</version>
+      <version>${javafx.version}</version>
     </dependency>
     <dependency>
       <groupId>org.openjfx</groupId>
       <artifactId>javafx-fxml</artifactId>
-      <version>21</version>
+      <version>${javafx.version}</version>
+    </dependency>
+    <dependency>
+      <groupId>org.openjfx</groupId>
+      <artifactId>javafx-media</artifactId>
+      <version>${javafx.version}</version>
     </dependency>
 
-<dependency>
+    <!-- JUnit -->
+    <dependency>
       <groupId>org.junit.jupiter</groupId>
       <artifactId>junit-jupiter-api</artifactId>
       <version>${junit.version}</version>
@@ -36,39 +46,30 @@
       <artifactId>junit-jupiter-engine</artifactId>
       <version>${junit.version}</version>
       <scope>test</scope>
-    </dependency>  </dependencies>
+    </dependency>
+  </dependencies>
 
   <build>
     <plugins>
+
       <plugin>
         <groupId>org.apache.maven.plugins</groupId>
         <artifactId>maven-compiler-plugin</artifactId>
         <version>3.13.0</version>
         <configuration>
-          <source>23</source>
-          <target>23</target>
+          <release>${maven.compiler.release}</release>
         </configuration>
       </plugin>
+
       <plugin>
         <groupId>org.openjfx</groupId>
         <artifactId>javafx-maven-plugin</artifactId>
         <version>0.0.8</version>
-        <executions>
-          <execution>
-            <!-- Default configuration for running with: mvn clean javafx:run -->
-            <id>default-cli</id>
-            <configuration>
-              <mainClass>sbu.javafx/sbu.javafx.MusicApp</mainClass>
-              <launcher>app</launcher>
-              <jlinkZipName>app</jlinkZipName>
-              <jlinkImageName>app</jlinkImageName>
-              <noManPages>true</noManPages>
-              <stripDebug>true</stripDebug>
-              <noHeaderFiles>true</noHeaderFiles>
-            </configuration>
-          </execution>
-        </executions>
+        <configuration>
+          <mainClass>sbu.javafx/sbu.javafx.MusicApp</mainClass>
+        </configuration>
       </plugin>
+
     </plugins>
   </build>
 </project>
\ No newline at end of file
diff --git a/src/main/java/sbu/javafx/Launcher.java b/src/main/java/sbu/javafx/Launcher.java
index c288d10..6351bdc 100644
--- a/src/main/java/sbu/javafx/Launcher.java
+++ b/src/main/java/sbu/javafx/Launcher.java
@@ -2,7 +2,10 @@ package sbu.javafx;
 
 import javafx.application.Application;
 
-public class Launcher{
-    public static void main(String[] args) {
-        // TODO: Launch the JavaFX application by calling Application.launch(Main.class)    }
-}
+public class Launcher
+{
+    public static void main(String[] args)
+    {
+        Application.launch(MusicApp.class, args);
+    }
+}
\ No newline at end of file
diff --git a/src/main/java/sbu/javafx/MusicApp.java b/src/main/java/sbu/javafx/MusicApp.java
index a50badc..9810d80 100644
--- a/src/main/java/sbu/javafx/MusicApp.java
+++ b/src/main/java/sbu/javafx/MusicApp.java
@@ -7,8 +7,8 @@ import javafx.stage.Stage;
 
 import java.io.IOException;
 
-public class MusicApp extends Application {
-
+public class MusicApp extends Application
+{
     @Override
     public void start(Stage stage) throws IOException
     {
@@ -16,8 +16,7 @@ public class MusicApp extends Application {
         Scene scene = new Scene(fxmlLoader.load());
         stage.setTitle("Music Player");
         stage.setScene(scene);
-        //TODO: add icon to the stage
+        stage.setResizable(false);
         stage.show();
     }
-
-}
+}
\ No newline at end of file
diff --git a/src/main/java/sbu/javafx/MusicController.java b/src/main/java/sbu/javafx/MusicController.java
index 5da27a9..b19baeb 100644
--- a/src/main/java/sbu/javafx/MusicController.java
+++ b/src/main/java/sbu/javafx/MusicController.java
@@ -1,31 +1,176 @@
 package sbu.javafx;
 
 import javafx.fxml.FXML;
-import javafx.event.ActionEvent;
+import javafx.scene.Scene;
+import javafx.scene.control.Button;
 import javafx.scene.control.Label;
-import javafx.scene.input.MouseEvent;
+import javafx.scene.control.ListView;
 import javafx.scene.layout.VBox;
+import javafx.scene.media.Media;
+import javafx.scene.media.MediaPlayer;
+import javafx.stage.Stage;
 
-public class MusicController {
+import java.net.URL;
+import java.util.ArrayList;
+import java.util.List;
 
-    // TODO: Define your UI components using the @FXML annotation.
+public class MusicController
+{
+    @FXML private VBox rootPane;
+    @FXML private Label titleLabel;
+    @FXML private Label nowPlayingLabel;
 
-    //TODO: Implement the logic to play a song. This method should update the UI to show which song is currently playing.
+    @FXML private Button playBtn1;
+    @FXML private Button playBtn2;
+    @FXML private Button playBtn3;
+
+    private final List<String> playlist = new ArrayList<>();
+    private MediaPlayer mediaPlayer;
+    private boolean darkTheme = false;
+
+    private final String song1 = "Careless Whisper";
+    private final String song2 = "Adore You";
+    private final String song3 = "Wildflower";
+
+    private final String song1File = "/sbu/javafx/audio/careless_whisper.mp3";
+    private final String song2File = "/sbu/javafx/audio/adore_you.mp3";
+    private final String song3File = "/sbu/javafx/audio/wildflower.mp3";
 
     @FXML
-    public void handlePlayAction() {
-        //Update labels, change button icons, etc.
+    private void initialize() {updateNowPlaying("None");applyLightTheme();}
+
+    @FXML
+    public void handlePlay1() {playSong(song1, song1File, playBtn1);}
+
+    @FXML
+    public void handlePlay2() {playSong(song2, song2File, playBtn2);}
+
+    @FXML
+    public void handlePlay3() {playSong(song3, song3File, playBtn3);}
+
+    @FXML
+    public void handleAdd1() {addToPlaylist(song1);}
+
+    @FXML
+    public void handleAdd2() {addToPlaylist(song2);}
+
+    @FXML
+    public void handleAdd3() {addToPlaylist(song3);}
+
+    @FXML
+    public void handleViewPlaylist()
+    {
+        Stage stage = new Stage();
+
+        VBox root = new VBox(10);
+        root.setStyle("-fx-padding: 16; -fx-background-color: white;");
+
+        Label title = new Label("My Playlist");
+        title.setStyle("-fx-font-size: 18px; -fx-font-weight: bold;");
+
+        ListView<String> listView = new ListView<>();
+        listView.getItems().addAll(playlist);
+
+        root.getChildren().addAll(title, listView);
+
+        Scene scene = new Scene(root, 300, 400);
+        stage.setScene(scene);
+        stage.setTitle("Playlist");
+        stage.show();
     }
 
-    //TODO: Logic to add a specific song to the user's playlist.
+    @FXML
+    public void handleToggleTheme()
+    {
+        darkTheme = !darkTheme;
 
-    public void addToPlaylist(String songName) {
-        //Add the song to a list or update a ListView.
+        if (darkTheme) {applyDarkTheme();}
+        else {applyLightTheme();}
     }
 
-    // TODO:This method should open a new window or change the current scene  to display the "Playlist" page.
+    private void playSong(String songName, String resourcePath, Button playButton)
+    {
+        try
+        {
+            if (mediaPlayer != null)
+            {
+                mediaPlayer.stop();
+                mediaPlayer.dispose();
+            }
 
-    public void openPlaylistWindow() {
-        //Create a new stage and show the playlist UI.
+            URL url = getClass().getResource(resourcePath);
+            if (url == null)
+            {
+                updateNowPlaying(songName + " (file not found)");
+                return;
+            }
+
+            Media media = new Media(url.toExternalForm());
+            mediaPlayer = new MediaPlayer(media);
+            mediaPlayer.play();
+
+            updateNowPlaying(songName);
+
+            if (playBtn1 != null) playBtn1.setText("Play");
+            if (playBtn2 != null) playBtn2.setText("Play");
+            if (playBtn3 != null) playBtn3.setText("Play");
+
+            if (playButton != null) {playButton.setText("Playing");}
+
+        }
+        catch (Exception e)
+        {
+            updateNowPlaying(songName + " (error)");
+            e.printStackTrace();
+        }
     }
-}
+
+    private void addToPlaylist(String songName)
+    {
+        if (!playlist.contains(songName)) {playlist.add(songName);}
+    }
+
+    private void updateNowPlaying(String text)
+    {
+        if (nowPlayingLabel != null)
+        {
+            nowPlayingLabel.setText("Now Playing: " + text);
+        }
+    }
+
+    private void applyDarkTheme()
+    {
+        if (rootPane != null)
+        {
+            rootPane.setStyle("-fx-padding: 24;" + "-fx-background-color: #121212;");
+        }
+
+        if (titleLabel != null)
+        {
+            titleLabel.setStyle("-fx-font-size: 26px;" + "-fx-font-weight: bold;" + "-fx-text-fill: white;");
+        }
+
+        if (nowPlayingLabel != null)
+        {
+            nowPlayingLabel.setStyle("-fx-padding: 12;" + "-fx-background-color: #1E1E1E;" + "-fx-background-radius: 10;" + "-fx-border-color: #444444;" + "-fx-border-radius: 10;" + "-fx-text-fill: white;");
+        }
+    }
+
+    private void applyLightTheme()
+    {
+        if (rootPane != null)
+        {
+            rootPane.setStyle("-fx-padding: 24;" + "-fx-background-color: #F8F8F8;");
+        }
+
+        if (titleLabel != null)
+        {
+            titleLabel.setStyle("-fx-font-size: 26px;" + "-fx-font-weight: bold;" + "-fx-text-fill: #222222;");
+        }
+
+        if (nowPlayingLabel != null)
+        {
+            nowPlayingLabel.setStyle("-fx-padding: 12;" + "-fx-background-color: white;" + "-fx-background-radius: 10;" + "-fx-border-color: rgba(0,0,0,0.15);" + "-fx-border-radius: 10;" + "-fx-text-fill: black;");
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/sbu/javafx/App-view.fxml b/src/main/resources/sbu/javafx/App-view.fxml
index 306c8d3..c1a5184 100644
--- a/src/main/resources/sbu/javafx/App-view.fxml
+++ b/src/main/resources/sbu/javafx/App-view.fxml
@@ -1,8 +1,114 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Separator?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.VBox?>
-<VBox xmlns="http://javafx.com/fxml" alignment="CENTER" spacing="10">
 
-    <!-- TODO: Add your code here! -->
+<VBox fx:id="rootPane"
+      xmlns:fx="http://javafx.com/fxml"
+      fx:controller="sbu.javafx.MusicController"
+      spacing="20"
+      alignment="TOP_CENTER"
+      prefWidth="500"
+      prefHeight="700"
+      style="-fx-padding: 30; -fx-background-color: #F4F4F4;">
 
-</VBox>
+    <Label fx:id="titleLabel" text="JavaFX Music Player"
+           style="-fx-font-size: 26px; -fx-font-weight: bold; -fx-text-fill: #333;" />
+
+    <Label fx:id="nowPlayingLabel"
+           text="Now Playing: None"
+           maxWidth="Infinity"
+           alignment="CENTER"
+           style="-fx-padding: 15; -fx-background-color: white; -fx-background-radius: 12; -fx-border-color: #DDD; -fx-border-radius: 12; -fx-font-size: 14px;" />
+
+    <HBox spacing="15" alignment="CENTER">
+        <Button fx:id="themeBtn" onAction="#handleToggleTheme" prefWidth="60" prefHeight="60" style="-fx-background-radius: 30;">
+            <graphic>
+                <ImageView fitWidth="28" fitHeight="28" preserveRatio="true">
+                    <image>
+                        <Image url="@images/theme.png"/>
+                    </image>
+                </ImageView>
+            </graphic>
+        </Button>
+
+        <Button fx:id="playlistBtn" onAction="#handleViewPlaylist" prefWidth="60" prefHeight="60" style="-fx-background-radius: 30;">
+            <graphic>
+                <ImageView fitWidth="28" fitHeight="28" preserveRatio="true">
+                    <image>
+                        <Image url="@images/playlist.png"/>
+                    </image>
+                </ImageView>
+            </graphic>
+        </Button>
+    </HBox>
+
+    <Separator />
+
+    <VBox spacing="15" VBox.vgrow="ALWAYS">
+
+        <HBox fx:id="songCard1" spacing="15" alignment="CENTER_LEFT"
+              style="-fx-padding: 15; -fx-background-color: white; -fx-background-radius: 10; -fx-border-color: #EEE; -fx-border-radius: 10;">
+            <VBox spacing="5" HBox.hgrow="ALWAYS">
+                <Label text="Careless Whisper" style="-fx-font-weight: bold; -fx-font-size: 16px;" />
+                <Label text="George Michael" style="-fx-text-fill: #777;" />
+            </VBox>
+            <Button onAction="#handlePlay1" prefWidth="45" prefHeight="45">
+                <graphic>
+                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/play.png"/></image></ImageView>
+                </graphic>
+            </Button>
+            <Button onAction="#handleAdd1" prefWidth="45" prefHeight="45">
+                <graphic>
+                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/add.png"/></image></ImageView>
+                </graphic>
+            </Button>
+        </HBox>
+
+        <HBox fx:id="songCard2" spacing="15" alignment="CENTER_LEFT"
+              style="-fx-padding: 15; -fx-background-color: white; -fx-background-radius: 10; -fx-border-color: #EEE; -fx-border-radius: 10;">
+            <VBox spacing="5" HBox.hgrow="ALWAYS">
+                <Label text="Adore You" style="-fx-font-weight: bold; -fx-font-size: 16px;" />
+                <Label text="Harry Styles" style="-fx-text-fill: #777;" />
+            </VBox>
+            <Button onAction="#handlePlay2" prefWidth="45" prefHeight="45">
+                <graphic>
+                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/play.png"/></image></ImageView>
+                </graphic>
+            </Button>
+            <Button onAction="#handleAdd2" prefWidth="45" prefHeight="45">
+                <graphic>
+                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/add.png"/></image></ImageView>
+                </graphic>
+            </Button>
+        </HBox>
+
+        <HBox fx:id="songCard3" spacing="15" alignment="CENTER_LEFT"
+              style="-fx-padding: 15; -fx-background-color: white; -fx-background-radius: 10; -fx-border-color: #EEE; -fx-border-radius: 10;">
+            <VBox spacing="5" HBox.hgrow="ALWAYS">
+                <Label text="Wildflower" style="-fx-font-weight: bold; -fx-font-size: 16px;" />
+                <Label text="Billie Eilish" style="-fx-text-fill: #777;" />
+            </VBox>
+            <Button onAction="#handlePlay3" prefWidth="45" prefHeight="45">
+                <graphic>
+                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/play.png"/></image></ImageView>
+                </graphic>
+            </Button>
+            <Button onAction="#handleAdd3" prefWidth="45" prefHeight="45">
+                <graphic>
+                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/add.png"/></image></ImageView>
+                </graphic>
+            </Button>
+        </HBox>
+
+    </VBox>
+
+    <Label text="SBU JavaFX Project - 2024" style="-fx-text-fill: #AAA; -fx-font-size: 10px;" />
+
+</VBox>
\ No newline at end of file
diff --git a/src/main/resources/sbu/javafx/audio/adore_you.mp3 b/src/main/resources/sbu/javafx/audio/adore_you.mp3
new file mode 100644
index 0000000..274dac2
Binary files /dev/null and b/src/main/resources/sbu/javafx/audio/adore_you.mp3 differ
diff --git a/src/main/resources/sbu/javafx/audio/careless_whisper.mp3 b/src/main/resources/sbu/javafx/audio/careless_whisper.mp3
new file mode 100644
index 0000000..aaa81e6
Binary files /dev/null and b/src/main/resources/sbu/javafx/audio/careless_whisper.mp3 differ
diff --git a/src/main/resources/sbu/javafx/audio/wildflower.mp3 b/src/main/resources/sbu/javafx/audio/wildflower.mp3
new file mode 100644
index 0000000..4085864
Binary files /dev/null and b/src/main/resources/sbu/javafx/audio/wildflower.mp3 differ
diff --git a/src/main/resources/sbu/javafx/css/dark.css b/src/main/resources/sbu/javafx/css/dark.css
new file mode 100644
index 0000000..7c0a993
--- /dev/null
+++ b/src/main/resources/sbu/javafx/css/dark.css
@@ -0,0 +1,12 @@
+.root {
+    -fx-background-color: #1e1e1e;
+}
+
+.label {
+    -fx-text-fill: white;
+}
+
+.button {
+    -fx-background-color: #444;
+    -fx-text-fill: white;
+}
\ No newline at end of file
diff --git a/src/main/resources/sbu/javafx/css/light.css b/src/main/resources/sbu/javafx/css/light.css
new file mode 100644
index 0000000..de63139
--- /dev/null
+++ b/src/main/resources/sbu/javafx/css/light.css
@@ -0,0 +1,12 @@
+.root {
+    -fx-background-color: white;
+}
+
+.label {
+    -fx-text-fill: black;
+}
+
+.button {
+    -fx-background-color: #e0e0e0;
+    -fx-text-fill: black;
+}
\ No newline at end of file
diff --git a/src/main/resources/sbu/javafx/images/add.png b/src/main/resources/sbu/javafx/images/add.png
new file mode 100644
index 0000000..10691a8
Binary files /dev/null and b/src/main/resources/sbu/javafx/images/add.png differ
diff --git a/src/main/resources/sbu/javafx/images/play.png b/src/main/resources/sbu/javafx/images/play.png
new file mode 100644
index 0000000..b49f598
Binary files /dev/null and b/src/main/resources/sbu/javafx/images/play.png differ
diff --git a/src/main/resources/sbu/javafx/images/playlist.png b/src/main/resources/sbu/javafx/images/playlist.png
new file mode 100644
index 0000000..f409e15
Binary files /dev/null and b/src/main/resources/sbu/javafx/images/playlist.png differ
diff --git a/src/main/resources/sbu/javafx/images/theme.png b/src/main/resources/sbu/javafx/images/theme.png
new file mode 100644
index 0000000..ed7e928
Binary files /dev/null and b/src/main/resources/sbu/javafx/images/theme.png differ