diff --git a/README.md b/README.md
index 5614db31c485058c8277b93c72a82d02c6d04a21..fb1d8ae8bf569045deb324657ad1ea8103806e95 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,161 @@
-## Panduan Pengerjaan
-Berikut adalah hal yang harus diperhatikan untuk pengumpulan tugas ini:
-1. Buatlah grup pada Gitlab dengan format "IF3110-2023-01-XX", dengan XX adalah nomor kelompok (untuk K1 dan K2) atau kode kelompok (untuk K3).
-2. Tambahkan anggota tim pada grup anda.
-3. **Fork** pada repository ini dengan organisasi yang telah dibuat.
-4. Ubah hak akses repository hasil Fork anda menjadi **private**.
-5. Hal-hal yang harus diperhatikan.
-    * Silakan commit pada repository anda (hasil fork)
-    * Lakukan beberapa commit dengan pesan yang bermakna, contoh: “add register form”, “fix logout bug”, jangan seperti “final”, “benerin dikit”, “fix bug”.
-    * Disarankan untuk tidak melakukan commit dengan perubahan yang besar karena akan mempengaruhi penilaian (contoh: hanya melakukan satu commit kemudian dikumpulkan).
-    * Commit dari setiap anggota tim akan mempengaruhi penilaian.
-    * Jadi, setiap anggota tim harus melakukan commit yang berpengaruh terhadap proses pembuatan aplikasi.
-    * Sebagai panduan bisa mengikuti [semantic commit](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716).
-6. Buatlah file README yang berisi:
-    * Deskripsi aplikasi web
-    * Daftar requirement
-    * Cara instalasi
-    * Cara menjalankan server
-    * Screenshot tampilan aplikasi (tidak perlu semua kasus, minimal 1 per halaman), dan 
-    * Penjelasan mengenai pembagian tugas masing-masing anggota (lihat formatnya pada bagian pembagian tugas).
+# BNMO BOXD
+BNMO BOXD merupakan aplikasi web review film yang monolitik dan dibuat dengan menggunakan PHP untuk server-side dan vanila HTML, CSS, dan JS untuk client-side. 
+Aplikasi ini dibuat untuk memenuhi Tugas Besar 1 mata kuliah Pengembangan Aplikasi Berbasis Web IF3110 2023/2024. 
+Aplikasi ini menggunakan docker untuk memudahkan penggunaan dan environment yang sama. 
+Aplikasi ini menggunakan MySQL sebagai RDBMS dari database.
+
+
+## Fitur
+Pada aplikasi ini terdapat dua role yang terautentikasi yaitu user dan admin.
+Untuk mengakses aplikasi sebagai user, pengguna biasa harus melakukan register terlebih dahulu. Jika sudah memiliki akun maka pengguna dapat langsung login ke aplikasi.
+Ada tiga level yang akan digunakan untuk mengklasifikasikan hak akses dari fitur, yaitu:
+1. All (Semua dapat mengakses)
+2. User (Hanya User dan Admin yang dapat mengakses)
+3. Admin (Hanya admin yang dapat mengkases)
+
+Berikut adalah fitur-fitur yang ada beserta klasifikasi hak aksesnya:
+
+All
+- Menampilkan rekomendasi film
+- Melihat detail film (judul, poster, deskripsi, review, genre, direktor, dan trailer)
+- Mencari film berdasarkan nama/direktor
+- Memfilter film berdasarkan genre/rating
+- Mengurutkan film berdasarkan judul/rating/tanggal rilis
+- Melakukan Register
+- Melakukan Login
+
+User
+- Mengubah detail akun (profil picture, first name, last name, email, username)
+- Menghapus akun
+- Menambahkan review pada film
+- Mengedit review pada film
+- Menghapus review pada film
+- Melihat daftar review yang pernah diberikan
+
+Admin
+- Menambahkan film - Admin
+- Mengedit film - Admin
+
+
+## Requirements
+1. Docker
+2. PHP 8 or later
+
+
+## Cara Instalasi
+1. Install requirements
+   - Untuk windows and mac user
+
+     - Download docker desktop [here](https://www.docker.com/products/docker-desktop/)
+
+   - Untuk UNIX like user jalankan command di bawah
+
+   ```sh
+    sudo apt-get update
+    sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin
+   ```
+
+   Untuk memverifikasi apakah docker telah terinstall, maka coba jalankan `docker run hello-world`.
+
+2. Clone repository
+3. Secara default, aplikasi ini menggunakan port `8080, 8002` dan jika pada komputer anda telah menggunakan port tersebut, maka ubahlah port pada file `docker-compose.yml`.
+
+
+## Cara Menjalankan Server
+1. Ubah directory ke root dari repo ini (sejajar dengan file README.md)
+2. Buat file `.env`
+3. Isi file `.env` dengan
+   ```env
+    MYSQL_USER=bnmo
+    MYSQL_PASSWORD=bnmo
+    MYSQL_ROOT_PASSWORD=root
+    MYSQL_DATABASE=bnmoboxd
+    MYSQL_PORT=3306
+    MYSQL_HOST=bnmoboxd-db
+   ```
+4. Buka terminal lalu jalankan `docker compose up -d`
+5. Buka browser dan buka `localhost:8080`
+
+
+## Screenshots
+### Tampilan Desktop
+![image](documentations/desktop-view/image1.png)
+![image](documentations/desktop-view/image2.png)
+![image](documentations/desktop-view/image3.png)
+![image](documentations/desktop-view/image4.png)
+![image](documentations/desktop-view/image5.png)
+![image](documentations/desktop-view/image6.png)
+![image](documentations/desktop-view/image7.png)
+![image](documentations/desktop-view/image8.png)
+![image](documentations/desktop-view/image9.png)
+![image](documentations/desktop-view/image10.png)
+
+### Tampilan Mobile
+![image](documentations/mobile-view/image1.png)
+![image](documentations/mobile-view/image2.png)
+![image](documentations/mobile-view/image3.png)
+![image](documentations/mobile-view/image4.png)
+![image](documentations/mobile-view/image5.png)
+![image](documentations/mobile-view/image6.png)
+![image](documentations/mobile-view/image7.png)
+![image](documentations/mobile-view/image8.png)
+![image](documentations/mobile-view/image9.png)
+![image](documentations/mobile-view/image10.png)
+
+### Google Lighthouse
+![image](documentations/lighthouse/image1.png)
+![image](documentations/lighthouse/image2.png)
+![image](documentations/lighthouse/image3.png)
+![image](documentations/lighthouse/image4.png)
+![image](documentations/lighthouse/image5.png)
+![image](documentations/lighthouse/image6.png)
+![image](documentations/lighthouse/image7.png)
+![image](documentations/lighthouse/image8.png)
+![image](documentations/lighthouse/image9.png)
+![image](documentations/lighthouse/image10.png)
+
+
+## Pembagian Tugas
+### Server Side
+| 13521044                                 | 13521047    | 13521107                |
+|------------------------------------------|-------------|-------------------------|
+| Set Up Architecture                      | Review CRUD | Film CRUD               |
+| Set Up Database                          | DB Seeding  | DB Seeding              |
+| Set Up Repository Base Functions         |             | Video Upload            |
+| Middlewares                              |             | Debugging auth services |
+| Exceptions and Exception Handling        |             | Debugging film services |
+| Search Films (Filter & Pagination)       |             |                         |
+| Auth Services (Login, logout & Register) |             |                         |
+| Form Validation                          |             |                         |
+| Profile CRUD                             |             |                         |
+| Review CRUD                              |             |                         |
+| Migrations                               |             |                         |
+| Utilities                                |             |                         |
+
+### Client Side
+| 13521044                                  | 13521047                    | 13521107                  |
+|-------------------------------------------|-----------------------------|---------------------------|
+| Home Page                                 | Reviews Page                | Film Details Page         |
+| Navbar                                    | Edit Reviews Page           | Edit Film Page            |
+| Base Layout                               | Delete Review Functionality | Add Film Page             |
+| Films Page (including filter, pagination) | Google Lighthouse           | Delete Film Functionality |
+| Edit Profile Page                         |                             |                           |
+| Login Page                                |                             |                           |
+| Register Page                             |                             |                           |
+| Show Trailer Modal                        |                             |                           |
+| Modal Functionalities                     |                             |                           |
+| Form Submitter                            |                             |                           |
+| Exception Page                            |                             |                           |
+
+
+## Bonus
+1. All Responsive Page
+2. Google Lighthouse 
+3. Docker
+
+## Authors
+|              Nama              |   NIM    |
+| :----------------------------: | :------: |
+| Rachel Gabriela Chen           | 13521044 |
+| Muhammad Equilibrie Fajria     | 13521047 |
+| Jericho Russel Sebastian       | 13521107 |
diff --git a/documentations/desktop-view/image1.png b/documentations/desktop-view/image1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f582722eabfad10d0c84cceaebd46e315ebca37e
Binary files /dev/null and b/documentations/desktop-view/image1.png differ
diff --git a/documentations/desktop-view/image10.png b/documentations/desktop-view/image10.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d6f0fb38ecbe6f3ad04d2120b3e324e55086bd4
Binary files /dev/null and b/documentations/desktop-view/image10.png differ
diff --git a/documentations/desktop-view/image2.png b/documentations/desktop-view/image2.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e48835bf689c7adf9941a1094f2ac6a0b57b7c6
Binary files /dev/null and b/documentations/desktop-view/image2.png differ
diff --git a/documentations/desktop-view/image3.png b/documentations/desktop-view/image3.png
new file mode 100644
index 0000000000000000000000000000000000000000..0270264cd0c16b3204d3226027277cb5cc9b6d88
Binary files /dev/null and b/documentations/desktop-view/image3.png differ
diff --git a/documentations/desktop-view/image4.png b/documentations/desktop-view/image4.png
new file mode 100644
index 0000000000000000000000000000000000000000..d02cd96edf07604e73d1181bccff00dd5e27330c
Binary files /dev/null and b/documentations/desktop-view/image4.png differ
diff --git a/documentations/desktop-view/image5.png b/documentations/desktop-view/image5.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9a7ba4aa7b06d0e76d2656f5f17df6622be0781
Binary files /dev/null and b/documentations/desktop-view/image5.png differ
diff --git a/documentations/desktop-view/image6.png b/documentations/desktop-view/image6.png
new file mode 100644
index 0000000000000000000000000000000000000000..842b2b1bb1b9713bb458f62e404370103670f0fc
Binary files /dev/null and b/documentations/desktop-view/image6.png differ
diff --git a/documentations/desktop-view/image7.png b/documentations/desktop-view/image7.png
new file mode 100644
index 0000000000000000000000000000000000000000..e115fa27fdf3b2360c66a0d95429821134cc6aff
Binary files /dev/null and b/documentations/desktop-view/image7.png differ
diff --git a/documentations/desktop-view/image8.png b/documentations/desktop-view/image8.png
new file mode 100644
index 0000000000000000000000000000000000000000..b056811b38773d782de8b2751dbf91b31a02379b
Binary files /dev/null and b/documentations/desktop-view/image8.png differ
diff --git a/documentations/desktop-view/image9.png b/documentations/desktop-view/image9.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7a2007600f3d48d0d0a21ebc56bdf42793e9dad
Binary files /dev/null and b/documentations/desktop-view/image9.png differ
diff --git a/documentations/lighthouse/image1.png b/documentations/lighthouse/image1.png
new file mode 100644
index 0000000000000000000000000000000000000000..41f3042839fe67603e589096fad3dd84420b7cce
Binary files /dev/null and b/documentations/lighthouse/image1.png differ
diff --git a/documentations/lighthouse/image10.png b/documentations/lighthouse/image10.png
new file mode 100644
index 0000000000000000000000000000000000000000..b19a5ba1075d754c7afa5b2b0219eb96fe9f6637
Binary files /dev/null and b/documentations/lighthouse/image10.png differ
diff --git a/documentations/lighthouse/image2.png b/documentations/lighthouse/image2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5cf4efe03a08dfed04db0c0f1720377e04a3b9d
Binary files /dev/null and b/documentations/lighthouse/image2.png differ
diff --git a/documentations/lighthouse/image3.png b/documentations/lighthouse/image3.png
new file mode 100644
index 0000000000000000000000000000000000000000..d23511ee3d382a3decec95415c26bb53187db0d0
Binary files /dev/null and b/documentations/lighthouse/image3.png differ
diff --git a/documentations/lighthouse/image4.png b/documentations/lighthouse/image4.png
new file mode 100644
index 0000000000000000000000000000000000000000..197aa86c6b9939f8ab4e41b35663af0bbf4f55a8
Binary files /dev/null and b/documentations/lighthouse/image4.png differ
diff --git a/documentations/lighthouse/image5.png b/documentations/lighthouse/image5.png
new file mode 100644
index 0000000000000000000000000000000000000000..363606ca53ad4e54972aac29df49311f9adf60da
Binary files /dev/null and b/documentations/lighthouse/image5.png differ
diff --git a/documentations/lighthouse/image6.png b/documentations/lighthouse/image6.png
new file mode 100644
index 0000000000000000000000000000000000000000..1807fd45cbb67f9b33e4c4d95350d54dd8ab49af
Binary files /dev/null and b/documentations/lighthouse/image6.png differ
diff --git a/documentations/lighthouse/image7.png b/documentations/lighthouse/image7.png
new file mode 100644
index 0000000000000000000000000000000000000000..88f6b235875410f2ab7575d031f1c14820920b3f
Binary files /dev/null and b/documentations/lighthouse/image7.png differ
diff --git a/documentations/lighthouse/image8.png b/documentations/lighthouse/image8.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7ce47f0c9a895162463f2e9568fdb1814c35135
Binary files /dev/null and b/documentations/lighthouse/image8.png differ
diff --git a/documentations/lighthouse/image9.png b/documentations/lighthouse/image9.png
new file mode 100644
index 0000000000000000000000000000000000000000..8340ceef85cb12883c6f692e4fda505907e931b0
Binary files /dev/null and b/documentations/lighthouse/image9.png differ
diff --git a/documentations/mobile-view/image1.png b/documentations/mobile-view/image1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e0346766e1bb1d54910dbf38782604da9503c7f
Binary files /dev/null and b/documentations/mobile-view/image1.png differ
diff --git a/documentations/mobile-view/image10.png b/documentations/mobile-view/image10.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d8c339f0a570f0039715567d17aab5c7d8b3f18
Binary files /dev/null and b/documentations/mobile-view/image10.png differ
diff --git a/documentations/mobile-view/image2.png b/documentations/mobile-view/image2.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ec10c6f56d17a5db18af571b50bd871020f30dc
Binary files /dev/null and b/documentations/mobile-view/image2.png differ
diff --git a/documentations/mobile-view/image3.png b/documentations/mobile-view/image3.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ac87dd6d13cd232d85f5264c1b032a4f84eb5f1
Binary files /dev/null and b/documentations/mobile-view/image3.png differ
diff --git a/documentations/mobile-view/image4.png b/documentations/mobile-view/image4.png
new file mode 100644
index 0000000000000000000000000000000000000000..6078437b334d371ef4bcafcf29755f742eb793b4
Binary files /dev/null and b/documentations/mobile-view/image4.png differ
diff --git a/documentations/mobile-view/image5.png b/documentations/mobile-view/image5.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb7f77cc816a591eeacdead2d433027abb916c71
Binary files /dev/null and b/documentations/mobile-view/image5.png differ
diff --git a/documentations/mobile-view/image6.png b/documentations/mobile-view/image6.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b85ffc0f0a5e2185307a22b4469b1551e13cc1d
Binary files /dev/null and b/documentations/mobile-view/image6.png differ
diff --git a/documentations/mobile-view/image7.png b/documentations/mobile-view/image7.png
new file mode 100644
index 0000000000000000000000000000000000000000..99c704a7bab182c9d76d33c495ea7b5581bc9769
Binary files /dev/null and b/documentations/mobile-view/image7.png differ
diff --git a/documentations/mobile-view/image8.png b/documentations/mobile-view/image8.png
new file mode 100644
index 0000000000000000000000000000000000000000..76e18b634bc015467f66146a3948b46e8b057408
Binary files /dev/null and b/documentations/mobile-view/image8.png differ
diff --git a/documentations/mobile-view/image9.png b/documentations/mobile-view/image9.png
new file mode 100644
index 0000000000000000000000000000000000000000..df72b112a25aa8271c4b93467ed5316d4a703e1b
Binary files /dev/null and b/documentations/mobile-view/image9.png differ
diff --git a/migrations/init.sql b/migrations/init.sql
index 5fd953ef767a379fc19f89c5f101cc90d441f2a3..48cd110231c7e5777705021dff28411017686410 100644
--- a/migrations/init.sql
+++ b/migrations/init.sql
@@ -67,7 +67,21 @@ VALUES
 
 INSERT INTO films (title, release_year, director, description, image_path, genre, video_path)
 VALUES
-    ('Barbie', 2023, 'Greta Gerwig', 'Barbie suffers a crisis that leads her to question her world and her existence.', 'barbie.jpg', 'Fantasy', 'barbie.mp4');
+    ('Barbie', 2023, 'Greta Gerwig', 'Barbie suffers a crisis that leads her to question her world and her existence.', 'barbie.jpg', 'Fantasy', 'barbie.mp4'),
+    ('Oppenheimer', 2022, 'Christopher Nolan', 'The story of American scientist, J. Robert Oppenheimer, and his role in the development of the atomic bomb.', 'oppenheimer.jpg', 'Drama', 'Oppenheimer.mp4'),
+    ('Spiderman: Into The Spiderverse', 2021, 'Rodney Rothman, Peter Ramsey, Bob Persichetti', 'Teen Miles Morales becomes the Spider-Man of his universe and must join with five spider-powered individuals from other dimensions to stop a threat for all realities.', 'spiderverse.jpg', 'Action', 'spiderman.mp4'),
+    ('Mission Impossible', 2023, 'Tom Cruise', 'Ethan Hunt and his IMF team must track down a dangerous weapon before it falls into the wrong hands.', 'mission-impossible.jpeg', 'Action', 'Mission Impossible.mp4'),
+    ('Infinity War', 2018, 'Russo Brothers', 'The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.', 'infinity-war.jpeg', 'Action', 'Infinity War.mp4'),
+    ('Inception', 2010, 'Christopher Nolan', 'A thief who enters the dreams of others to steal their secrets is hired for a final job: planting an idea in a person''s subconscious.', 'inception.jpeg', 'Sci-Fi', 'Inception.mp4'),
+    ('Jurassic Park', 1993, 'Steven Spielberg', 'A wealthy entrepreneur creates a theme park with cloned dinosaurs, but things go awry when the dinosaurs escape and wreak havoc.', 'jurassic-park.jpeg', 'Sci-Fi', 'Jurassic Park.mp4'),
+    ('Avatar', 2009, 'James Cameron', 'A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.', 'avatar.jpg', 'Sci-Fi', 'Avatar.mp4'),
+    ('Alien', 1979, 'Ridley Scott', 'A commercial spaceship crew discovers a deadly alien creature and must fight for their lives as it hunts them down.', 'alien.jpeg', 'Sci-Fi', 'Alien.mp4'),
+    ('Forrest Gump', 1994, 'Robert Zemeckis', 'The life journey of a man with low intelligence who inadvertently influences historical events in the United States.', 'forrest-gump.jpeg', 'Drama', 'Forrest Gump.mp4'),
+    ('The Shining', 1980, 'Stanley Kubrick', 'A family heads to an isolated hotel for the winter, where an evil and supernatural presence influences the father into violence.', 'the-shining.jpeg', 'Horror', 'The Shining.mp4'),
+    ('Interstellar', 2014, 'Christopher Nolan', 'A team of explorers travels through a wormhole in space in an attempt to ensure humanity''s survival.', 'interstellar.jpg', 'Sci-Fi', 'Interstellar.mp4'),
+    ('The Revenant', 2015, 'Alejandro González Iñárritu', 'A frontiersman on a fur trading expedition fights for survival after being mauled by a bear and left for dead by members of his own hunting team.', 'revenant.jpeg', 'Action', 'The Revenant.mp4'),
+    ('Pulp Fiction', 1994, 'Quentin Tarantino', 'The lives of two mob hitmen, a boxer, a gangster''s wife, and a pair of diner bandits intertwine in four tales of violence and redemption.', 'pulp-function.jpeg', 'Drama', 'Pulp Fiction.mp4'),
+    ('Gladiator', 2000, 'Ridley Scott', 'A betrayed Roman general seeks revenge against the corrupt emperor who murdered his family and sent him into slavery.', 'gladiator.jpeg', 'Action', 'GLADIATOR.mp4');
 
 
 -- Insert sample data for 'films' table
diff --git a/php.ini b/php.ini
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..44a023b103c9dc19f892ed51c90a0bd861c2bc93 100644
--- a/php.ini
+++ b/php.ini
@@ -0,0 +1,3 @@
+upload_max_filesize = 10M
+memory_limit = 64M  
+post_max_size = 16M
\ No newline at end of file
diff --git a/public/assets/videos/Alien.mp4 b/public/assets/videos/Alien.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..49c1dc2cee2230496351d133a75e98c18e87f868
Binary files /dev/null and b/public/assets/videos/Alien.mp4 differ
diff --git a/public/assets/videos/Avatar.mp4 b/public/assets/videos/Avatar.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..5eb851d69438fdf7152ee416727600d5b264a4dc
Binary files /dev/null and b/public/assets/videos/Avatar.mp4 differ
diff --git a/public/assets/videos/Forrest Gump.mp4 b/public/assets/videos/Forrest Gump.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..cacd616d4cdf4de8d3b1f9f25811020aef1c8af5
Binary files /dev/null and b/public/assets/videos/Forrest Gump.mp4 differ
diff --git a/public/assets/videos/GLADIATOR.mp4 b/public/assets/videos/GLADIATOR.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..b9f20cf564f20940615ba452e90d2f65074476ee
Binary files /dev/null and b/public/assets/videos/GLADIATOR.mp4 differ
diff --git a/public/assets/videos/Inception.mp4 b/public/assets/videos/Inception.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..48f4bf3d9e09ac4e576afa5e0248f9ea9a63f863
Binary files /dev/null and b/public/assets/videos/Inception.mp4 differ
diff --git a/public/assets/videos/Infinity War.mp4 b/public/assets/videos/Infinity War.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..fdc834ef5c39812171511750ddff38893536bc33
Binary files /dev/null and b/public/assets/videos/Infinity War.mp4 differ
diff --git a/public/assets/videos/Interstellar.mp4 b/public/assets/videos/Interstellar.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..d5750279da1d4277af8184091058d2f85294c488
Binary files /dev/null and b/public/assets/videos/Interstellar.mp4 differ
diff --git a/public/assets/videos/Jurassic Park.mp4 b/public/assets/videos/Jurassic Park.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..57b5f018bd320f9bd17a37162b80d4d7ee879d20
Binary files /dev/null and b/public/assets/videos/Jurassic Park.mp4 differ
diff --git a/public/assets/videos/Mission Impossible.mp4 b/public/assets/videos/Mission Impossible.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..e4c8beaee53d5dae271c7444eaaf45480f487bdb
Binary files /dev/null and b/public/assets/videos/Mission Impossible.mp4 differ
diff --git a/public/assets/videos/Oppenheimer.mp4 b/public/assets/videos/Oppenheimer.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..011cef963d8ef5c6263834f442065d54df9987c2
Binary files /dev/null and b/public/assets/videos/Oppenheimer.mp4 differ
diff --git a/public/assets/videos/Pulp Fiction.mp4 b/public/assets/videos/Pulp Fiction.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..1a46d090836f776496bfd94359e45c0a4530fd39
Binary files /dev/null and b/public/assets/videos/Pulp Fiction.mp4 differ
diff --git a/public/assets/videos/The Revenant.mp4 b/public/assets/videos/The Revenant.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..fb3e71e2dad5f9e1fdff8f6ef309949cfc3c613d
Binary files /dev/null and b/public/assets/videos/The Revenant.mp4 differ
diff --git a/public/assets/videos/The Shining.mp4 b/public/assets/videos/The Shining.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..7313e5524c3c73ce6fd5288e11110ed9fe96e19e
Binary files /dev/null and b/public/assets/videos/The Shining.mp4 differ
diff --git a/public/assets/videos/spiderman.mp4 b/public/assets/videos/spiderman.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..471e1a3a8c313438423154d3d0bf7793ee26f149
Binary files /dev/null and b/public/assets/videos/spiderman.mp4 differ
diff --git a/public/css/films.css b/public/css/films.css
index 66f4c2fd4f82ee1583b77192ea1c1fdda45835a1..6f8456a2d60b3ac5dff89088d2dbd463aeda9157 100644
--- a/public/css/films.css
+++ b/public/css/films.css
@@ -49,7 +49,6 @@
     height: auto;
     min-width: 180px;
     min-height: 240px;
-    margin-top: 30px;
 }
 
 .film-poster-col button {
@@ -152,4 +151,18 @@
     width: 80vw;
     height: auto;
     max-width: 500px;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 600px) {
+    .film-page-container {
+        flex-direction: column;
+    }
+
+    .film-poster-col {
+        width: 100%;
+    }
+
+    .film-details-col {
+        width: 100%;
+    }
+}
diff --git a/public/css/global.css b/public/css/global.css
index 6600a2d63deb9110b53f6f569e96660759b0b0b0..7b0bbc74d2bd63e52863d6b22fc18ef7c85bb8e3 100644
--- a/public/css/global.css
+++ b/public/css/global.css
@@ -502,6 +502,10 @@ a {
     display: grid;
 }
 
+.no-gap {
+    gap: 0;
+}
+
 .form-logo {
     width: 250px;
 }
diff --git a/public/css/reviews.css b/public/css/reviews.css
index 35992562555f630f934de0ed4a9da32fcbc8a929..9b1d6dc37715c1610cbb2b5e18336179a1fcf4b7 100644
--- a/public/css/reviews.css
+++ b/public/css/reviews.css
@@ -80,8 +80,11 @@
 } */
 
 .film-poster-edit {
-    width: 300px;
-    height: 500px;
+    width: 100%;
+    height: 100%;
+    min-width: 100px;
+    max-width: 300px;
+    max-height: 500px;
 }
 
 .review-button-container {
@@ -157,5 +160,65 @@ input[type="radio"] {
         width: 100%;
         height: auto;
         display: flex;
-    }
+    }    
 }
+
+@media screen and (max-width: 600px) {
+    .edit-review-container {
+        background: var(--clr-background-surface);
+        box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
+        padding: 0px;
+    }
+    
+    .review-details {
+        width: max-content;
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+
+    .review-upper-section {
+        display: flex;
+    }
+    
+    .film-poster-edit {
+        display: none;
+    }
+
+    .star-label {
+        margin-right: 5px;
+    }
+
+    .edit-star {
+        display: flex;
+        text-align: left;
+        margin-top: 40px;
+        margin-bottom: 10px;
+    }
+    
+    .review-radio {
+        margin-top: 8px;
+    }
+    
+    .stars-img {
+        margin-bottom: 4px;
+    }
+
+    .edit-textarea {
+        height: 70vw;
+        width:90vw;
+        background-color: var(--clr-background-disabled);
+        border:none;
+        color: white;
+        padding: 20px;
+    }
+
+    #save {
+        margin-right: 20px;
+        margin-bottom: 20px;
+    }
+
+    #delete {
+        margin-right: 20px;
+        margin-bottom: 20px;
+    }
+}
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 9cdb50206d8a11867a297236a7b1985658215cc8..de79bad016a491d1934f63b3c180a4be756a2bbc 100644
--- a/public/index.php
+++ b/public/index.php
@@ -57,16 +57,16 @@ $app->router->get('/film/:id', [FilmController::class, 'show']);
 $app->router->get('/films/new', [FilmController::class, 'createPage']);
 $app->router->get('/film/:id/edit', [FilmController::class, 'editPage']);
 $app->router->post('/films/new', [FilmController::class, 'create']);
-$app->router->put('/film/:id/edit', [FilmController::class, 'edit']);
+$app->router->post('/film/:id/edit', [FilmController::class, 'edit']);
 $app->router->delete('/film/:id/delete', [FilmController::class, 'delete']);
 $app->router->get('/my-reviews', [ReviewsController::class, 'index']);
 $app->router->get('/my-reviews/search', [ReviewsController::class, 'search']);
 $app->router->post('/my-reviews', [ReviewsController::class, 'create']);
 $app->router->get('/my-reviews/:id', [ReviewsController::class, 'show']);
-$app->router->put('/my-reviews/:id', [ReviewsController::class, 'edit']);
+$app->router->post('/my-reviews/:id', [ReviewsController::class, 'edit']);
 $app->router->delete('/my-reviews/:id', [ReviewsController::class, 'delete']);
 $app->router->get('/profile', [ProfileController::class, 'index']);
-$app->router->put('/profile/edit', [ProfileController::class, 'edit']);
+$app->router->post('/profile/edit', [ProfileController::class, 'edit']);
 $app->router->delete('/profile/delete', [ProfileController::class, 'delete']);
 $app->router->get('/api/films', [ApiController::class, 'search']);
 $app->run();
\ No newline at end of file
diff --git a/public/js/film-update.js b/public/js/film-update.js
index 88fddcbb571f315fb68e440e7b43a514dac6ff69..06cfcf151d653f0c32b967953a502288fda399fa 100644
--- a/public/js/film-update.js
+++ b/public/js/film-update.js
@@ -44,7 +44,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 });
                 break;
             case CTX_UPDATE:
-                putForm(form, window.location.href, function(responseText){
+                submitForm(form, window.location.href, function(responseText){
                     window.location.href = window.location.href.replace('/edit', '');
                 });
                 break;
diff --git a/public/js/profile.js b/public/js/profile.js
index a838dacf4024d669df3641d551d6b0545d6bd330..8b5be2c8283688610db542d5b2b9caa36f26c08e 100644
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -15,7 +15,7 @@ document.addEventListener("DOMContentLoaded", function () {
     confirmEditButton.addEventListener('click', function (e) {
         e.preventDefault();
         const form = document.querySelector("#profile-form");
-        putForm(form, "/profile/edit", function (responseText) {
+        submitForm(form, "/profile/edit", function (responseText) {
             window.location.href = "/profile"
         })
         handleClose('#confirm-edit-modal');
diff --git a/public/js/reviews.js b/public/js/reviews.js
index 7d2f7ea0ea7f8d7e048f71b844c641ce59e36973..e94b5b6fa50cf3ec5a4ed5ec0d78497ce0b86373 100644
--- a/public/js/reviews.js
+++ b/public/js/reviews.js
@@ -15,7 +15,7 @@ document.addEventListener("DOMContentLoaded", function () {
     confirmEditButton?.addEventListener('click', function (e) {
         e.preventDefault();
         const form = document.querySelector("#review-form");
-        putForm(form, window.location.href, function (responseText) {
+        submitForm(form, window.location.href, function (responseText) {
             window.location.href = "/my-reviews";
         })
         handleClose('#confirm-edit-modal');
diff --git a/src/controllers/ProfileController.php b/src/controllers/ProfileController.php
index 9334df50dd0d847536e23d5ef5e98b67e67b0168..37b8ad1510a0be7f5b880878bdceba1a99c92e96 100644
--- a/src/controllers/ProfileController.php
+++ b/src/controllers/ProfileController.php
@@ -45,7 +45,7 @@ class ProfileController extends Controller
      * @throws NotFoundException
      */
     public function delete() {
-        $userId = $_SESSION['user_id'];
-        $this->userService->deleteUser($userId);
+        $username = $_SESSION['username'];
+        $this->userService->deleteUser($username);
     }
 }
\ No newline at end of file
diff --git a/src/services/UserService.php b/src/services/UserService.php
index 3ca1b6b0b8204c82e254d98bb884a724a8725aa5..1f28f68ea0c4a44531f73bf053186fde71cb4af2 100644
--- a/src/services/UserService.php
+++ b/src/services/UserService.php
@@ -74,6 +74,7 @@ class UserService extends Service
             throw new NotFoundException();
         }
         return [
+            'id' => $user['id'],
             'username' => $user['username'],
             'email' => $user['email'],
             'firstName' => $user['first_name'],
@@ -168,14 +169,17 @@ class UserService extends Service
             $profilePicturePath = saveFile($_FILES['profile_picture'], Application::$BASE_DIR . '/public/assets/users/');
         }
         $this->userRepository->updateUser((int)$updateData['user_id'], $updateData['username'], $updateData['email'], $updateData['first_name'], $updateData['last_name'], $profilePicturePath);
+        
+        $newProfile = $this->userRepository->getUserById($updateData['user_id']);
+        $this->setSession($newProfile);
     }
 
     /**
      * @throws NotFoundException
      */
-    public function deleteUser($userId)
+    public function deleteUser($username)
     {
-        $currentUser = $this->getUserProfile($userId);
+        $currentUser = $this->getUserProfile($username);
         $this->userRepository->deleteUser((int)$currentUser['id']);
         $this->logout();
     }
diff --git a/src/views/auth/register.php b/src/views/auth/register.php
index 1521cede7882d90d07d6a02bf15f118aa43e1399..ebdaa0d6ad1a37b25e7d7b607cd6f0160e035e62 100644
--- a/src/views/auth/register.php
+++ b/src/views/auth/register.php
@@ -5,7 +5,7 @@
         <form class="form-container" id="register-form">
             <div class="form-group">
                 <label for="first_name">First Name</label>
-                <input type="text" id="first-name" name="first_name" formnovalidate>
+                <input type="text" id="first_name" name="first_name" formnovalidate>
                 <label class="form-error" id="first-name-form-error"></label>
             </div>
             <div class="form-group">
diff --git a/src/views/components/dashboard/film-card.php b/src/views/components/dashboard/film-card.php
index ec33caf129378421355ab875341d563a6eb35e86..6eb9f376c1467920754fc8b97bd4d11afb69cd55 100644
--- a/src/views/components/dashboard/film-card.php
+++ b/src/views/components/dashboard/film-card.php
@@ -4,6 +4,7 @@ function filmCard($data){
     if (!empty($data)){
         foreach($data as $film){
             $title = strlen($film['title']) > 30 ? substr($film['title'],0, 30) . '...'  : $film['title'];
+            $id = $film['id'];
             $imagePath = '/assets/films/' . $film['image_path'];
             $releaseYear = $film['release_year'];
             $name = $film['first_name'] . ' ' . $film['last_name'];
@@ -13,7 +14,7 @@ function filmCard($data){
             // Loop to add star images based on the rating value
             $starsHtml = str_repeat('<img src="/assets/app/star.png" alt="star" class="stars-img">', $rating);
             $html = <<<"EOT"
-            <a href="#" class="film-container">
+            <a href="/film/$id" class="film-container">
                 <img src="$imagePath" alt="$imagePath" class="poster-image">
                 <div class="film-details-container">
                     <h5 class="film-title">$title<span class="release-year"> $releaseYear </span></h5>
diff --git a/src/views/components/review-list.php b/src/views/components/review-list.php
index 1b1865b8795214f51dcdad299e1d5c6ed4391cd7..11a97db42e012250171ea19cd33c7633748af53a 100644
--- a/src/views/components/review-list.php
+++ b/src/views/components/review-list.php
@@ -20,7 +20,7 @@ if(!empty($data['reviews'])){
         $starsHtml = str_repeat('<img src="/assets/app/star.png" alt="star" class="stars-img">', $rating);
         $html = <<<EOT
 <a href="/my-reviews/$id" class="review-container" id="review-container-flex">                                                                                                                                     
-    <img src="$filmPosterPath" class="poster-image">
+    <img alt="film poster" src="$filmPosterPath" class="poster-image">
     <div class="review-details">
         <h6>
             $name
diff --git a/src/views/films/index.php b/src/views/films/index.php
index 0171cab8f8fcf36689e40c1bd297aa4dd70161b1..cd1ed4454a010edae2548a48d1f6cbf21ec8f788 100644
--- a/src/views/films/index.php
+++ b/src/views/films/index.php
@@ -20,9 +20,10 @@ include_once Application::$BASE_DIR . '/src/views/components/navbar.php';
                     <option value="Action">Action</option>
                     <option value="Comedy">Comedy</option>
                     <option value="Drama">Drama</option>
+                    <option value="Sci-Fi">Sci-Fi</option>
                     <option value="Horror">Horror</option>
                     <option value="Fantasy">Fantasy</option>
-                    <option value="Fantasy">Other</option>
+                    <option value="Other">Other</option>
                 </select>
                 <select id="ratingFilter">
                     <option value="" disabled selected>Rating</option>
diff --git a/src/views/films/show.php b/src/views/films/show.php
index 696121a35f6b86afa86414b3cc8d44b0617b5ad6..931848d5fed01ec18d88a793f1560243e60493b4 100644
--- a/src/views/films/show.php
+++ b/src/views/films/show.php
@@ -53,7 +53,7 @@ function createReviewModal($filmId) {
                         <label class="form-error" id="rating-form-error"></label>
                     </div>
                     <div class="form-group">
-                        <label for="">Review</label>
+                        <label for="review">Review</label>
                         <textarea id="review" name="review" rows="8"></textarea>
                         <label class="form-error" id="review-form-error"></label>
                     </div>
@@ -85,7 +85,7 @@ function reviewList($reviews){
             $html = <<<"EOT"
                 <div class="review-container">
                     <div class="profile-picture">
-                        <img src="$profilePicturePath">
+                        <img src="$profilePicturePath" alt="$name">
                     </div>
                     <div class="review-details">
                         <h6>
diff --git a/src/views/films/update.php b/src/views/films/update.php
index 7f23d6486030a5bd150e5e1f01790191ec7662f5..db7ffc45e402558e3cd2b6c0b5f7f9ff9277e26b 100644
--- a/src/views/films/update.php
+++ b/src/views/films/update.php
@@ -27,7 +27,7 @@ function filmUpdateForm($data){
         $videoPath = $videoPath . $film['video_path'];
     }
 
-    $html = $newFilm ? '' : "<div class=\"film-poster-col\"><img src=\"$imagePath\" class=\"poster-image\"></div>";
+    $html = $newFilm ? '' : "<div class=\"film-poster-col\"><img src=\"$imagePath\" class=\"poster-image\" alt=\"Current film poster\"></div>";
 
     $html .= <<<"EOT"
         <div class="film-details-col">
@@ -38,7 +38,7 @@ function filmUpdateForm($data){
                     <label class="form-error" id="title-form-error"></label>
                 </div>
                 <div class="form-group">
-                    <label for="release-year">Release Year</label>
+                    <label for="release_year">Release Year</label>
                     <input type="text" id="release_year" name="release_year" formnovalidate value="$releaseYear">
                     <label class="form-error" id="release-year-form-error"></label>
                 </div>
@@ -59,12 +59,12 @@ function filmUpdateForm($data){
                     </select>
                 </div>
                 <div class="form-group">
-                    <label for="film-poster">Poster</label>
+                    <label for="film_poster">Poster</label>
                     <input type="file" id="film_poster" name="film_poster" accept="image/*">
                     <label class="form-error" id="film-poster-form-error"></label>
                 </div>
                 <div class="form-group">
-                    <label for="film-trailer">Trailer</label>
+                    <label for="film_trailer">Trailer</label>
                     <input type="file" id="film_trailer" name="film_trailer" accept="video/*">
                 </div>
                 <div class="btn-group">
@@ -122,7 +122,7 @@ function filmUpdateForm($data){
     return $html;
 }
 ?>
-<div class="base-container display-grid">
+<div class="base-container display-grid no-gap">
     <h5 class="section-title"><?php echo isset($data['film']) ? 'Edit Film' : 'New Film'; ?></h5>
     <div class="film-page-container">
         <?php echo filmUpdateForm($data); ?>
diff --git a/src/views/profile/index.php b/src/views/profile/index.php
index 683829651c4912b874bb4732b45fab0c73f7dfd4..f7d25a7c09c6419aec3a2e216b99a294b00e1afc 100644
--- a/src/views/profile/index.php
+++ b/src/views/profile/index.php
@@ -14,12 +14,12 @@ $html = <<<EOT
     <div class="form-card">
         <h2>Profile</h2>
         <div class="user-profile">
-            <img src="$profilePicturePath">
+            <img alt="Profile picture" src="$profilePicturePath">
         </div>
         <form class="form-container" id="profile-form">
             <div class="form-group">
                 <label for="first_name">First Name</label>
-                <input type="text" id="first-name" name="first_name" formnovalidate value="$firstName">
+                <input type="text" id="first_name" name="first_name" formnovalidate value="$firstName">
                 <label class="form-error" id="first-name-form-error"></label>
             </div>
             <div class="form-group">
@@ -42,15 +42,15 @@ $html = <<<EOT
                 <input type="file" id="profile-picture" name="profile_picture" accept="image/*">
             </div>
             <div class="btn-group">
-                <button class="btn-primary" id="save-btn">Save Changes</button>
-                <button class = "btn-danger" id="delete-btn"">Delete Account</button>
+                <button type="button" class="btn-primary" id="save-btn">Save Changes</button>
+                <button type="button" class="btn-danger" id="delete-btn"">Delete Account</button>
             </div>
             <div class="modal-container" id="confirm-edit-modal">
                 <div class="confirmation-modal">
                     <h2>Are you sure you want to edit your profile?</h2>
                     <div class="btn-group">
-                        <button class="btn-primary" id="confirm-edit-btn">Yes</button>
-                        <button class="btn-danger" onclick="handleClose('#confirm-edit-modal')">Cancel</button>
+                        <button type="button" class="btn-primary" id="confirm-edit-btn">Yes</button>
+                        <button type="button" class="btn-danger" onclick="handleClose('#confirm-edit-modal')">Cancel</button>
                     </div>
                  </div>
             </div>
@@ -58,8 +58,8 @@ $html = <<<EOT
                 <div class="confirmation-modal">
                     <h2>Are you sure you want to delete your account?</h2>
                     <div class="btn-group">
-                        <button class="btn-primary" id="confirm-delete-btn">Yes</button>
-                        <button class="btn-danger" onclick="handleClose('#confirm-delete-modal')">Cancel</button>
+                        <button type="button" class="btn-primary" id="confirm-delete-btn">Yes</button>
+                        <button type="button" class="btn-danger" onclick="handleClose('#confirm-delete-modal')">Cancel</button>
                     </div>
                  </div>
             </div>
diff --git a/src/views/reviews/edit.php b/src/views/reviews/edit.php
index 60e1428ac03475578669e787213fd407f105fa49..00ccd9295066be9d7d5d134affdc1984fe99cac4 100644
--- a/src/views/reviews/edit.php
+++ b/src/views/reviews/edit.php
@@ -19,7 +19,7 @@ function showReview($review){
         <div class="edit-review-container">
             <form class="review-upper-section" id="review-form">
                 <input type="hidden" id="film_id" name="film_id" value="$filmId">
-                <img class="film-poster-edit" src="$posterImagePath">
+                <img alt="film poster" class="film-poster-edit" src="$posterImagePath">
                 <div class="review-details">
                     <h6 class="film-title" id="ftr1">$title</h6>
                     <h6>
@@ -32,13 +32,13 @@ function showReview($review){
                         {{star_radio}}
                     </div>
                     <div class="edit-text-box">
-                        <textarea class="edit-textarea" id="review" name="review">$reviewText</textarea>
+                        <textarea class="edit-textarea" id="review" name="review" aria-label="Edit Review">$reviewText</textarea>
                     </div>
                 </div>
             </form>
             <div class="btn-group">
                 <button type="button" class="btn-primary" id="save">Save</button>
-                <button type="button" class="btn-danger" id="save">Delete</button>
+                <button type="button" class="btn-danger" id="delete">Delete</button>
                 <!-- <button src="/assets/app/edit.png" class="review-button">Edit</button> -->
                 <!-- <button class="review-button">Delete</button> -->
             </div>
diff --git a/src/views/reviews/index.php b/src/views/reviews/index.php
index 0d1c703994ff2513335d14d4de61a052a30f3180..76343b17bca2916427f800ef46a6e16506248a21 100644
--- a/src/views/reviews/index.php
+++ b/src/views/reviews/index.php
@@ -17,7 +17,7 @@ function reviewList($reviews){
             $starsHtml = str_repeat('<img src="/assets/app/star.png" alt="star" class="stars-img">', $rating);
             $html = <<<EOT
                 <a href="/my-reviews/$id" class="review-container" id="review-container-flex">                                                                                                                                     
-                    <img src="$filmPosterPath" class="poster-image">
+                    <img alt="film poster" src="$filmPosterPath" class="poster-image">
                     <div class="review-details">
                         <h6>
                             $name