diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000000000000000000000000000000000000..7e292c8a835c4dcf9430708ec4993a9c36058044
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,8 @@
+POSTGRES_HOST=php-db
+POSTGRES_DB=postgres
+POSTGRES_PORT=5432
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=postgres
+REST_API_URL="http://localhost:8080"
+SOAP_API_URL="http://localhost:3030"
+SOAP_KEY=9a86dee90e0c2b1696b5545047d4ee44
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 752c4f1ba9640e510c6061e65c06a5e164ad9dd3..8cfa8b446190ec79691c3bd6b65882f37c317317 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,7 +2,8 @@ FROM php:8.0-apache
 WORKDIR /var/www/html
 COPY src/public/index.php .
 RUN apt-get update && \
-    apt-get install -y libpq-dev && \
+    apt-get install -y libpq-dev libxml2-dev && \
     docker-php-ext-install pdo pdo_pgsql pgsql
+RUN docker-php-ext-install soap
 RUN a2enmod rewrite
 EXPOSE 80
\ No newline at end of file
diff --git a/README.md b/README.md
index f9c670897dec570b82ca748122b62f2c7de859fa..1d164f90c8aab179203144a0dce09dabcd43ab6e 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,10 @@ Aplikasi ini dibangun menggunakan vanilla PHP, Javascript, HTML dan CSS dengan m
 14. Add Genre
 15. Delete Genre
 16. Edit profile
+### New Feature
+17. Premium Film
+18. Watch Premium Film
+19. Request Premium Subscription
 
 # Cara instalasi
 1. Clone repository ini dengan perintah `git clone https://gitlab.informatika.org/if3110-2023-01-34/tugas-besar-1.git`
@@ -66,7 +70,10 @@ atau dari github `git clone https://github.com/dhanikanovlisa/Tubes-1-WBD.git`
 ![image](screenshots/admin_mode.jpg)
 ![image](screenshots/responsive_homepage.jpg)
 ![image](screenshots/responsive_login.jpg)
-
+![image](screenshots/profile_pending.jpg)
+![image](screenshots/profile_premium.jpg)
+![image](screenshots/premium_film.jpg)
+![image](screenshots/watch_premium.jpg)
 
 # Pembagian Tugas
 ## Server Side
@@ -88,7 +95,9 @@ atau dari github `git clone https://github.com/dhanikanovlisa/Tubes-1-WBD.git`
 | **Add Genre**       | 13521132     |
 | **Delete Genre**    | 13521132     |
 | **Edit Profile**    | 13521132     |
-
+| **Premium Film**    | 13521130     |
+| **Watch Premium Film**    | 13521130     |
+| **Request Premium Subscription**    | 13521165     |
 
 
 ## Client Side
@@ -110,3 +119,6 @@ atau dari github `git clone https://github.com/dhanikanovlisa/Tubes-1-WBD.git`
 | **Add Genre**       | 13521132     |
 | **Delete Genre**    | 13521132     |
 | **Edit Profile**    | 13521132     |
+| **Premium Film**    | 13521130     |
+| **Watch Premium Film**    | 13521130     |
+| **Request Premium Subscription**    | 13521165     |
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 3a789c6284f439a128cd64b4d61cefc9e37f0a3b..0a679aae8150b8e09694fc0d6d10a13cb37dfd6f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,30 +1,26 @@
 version: '3.3'
 services:
-  web:
+  notflix-app:
     image: tubes-1:latest
+    build: .
     env_file: .env
     ports:
       - 8080:80
     volumes:
       - ./src/app:/var/www/app
       - ./src/public:/var/www/html
-  postgres:
+    depends_on:
+      php-db:
+        condition: service_healthy
+  php-db:
     image: postgres:latest
     env_file: .env
     ports:
       - 5431:5432
     volumes:
-      -  ./db:/var/lib/postgres/data
       - ./migrations:/docker-entrypoint-initdb.d
-  pgadmin:
-    image: dpage/pgadmin4
-    environment:
-      PGADMIN_DEFAULT_EMAIL: admin@test.com
-      PGADMIN_DEFAULT_PASSWORD: password
-    ports:
-      - 8081:80
-
-
-networks:
-  web-postgres:
-    driver: bridge
\ No newline at end of file
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 10s
+      retries: 10
+      timeout: 5s
diff --git a/migrations/01_notflixapp.sql b/migrations/01_notflixapp.sql
new file mode 100644
index 0000000000000000000000000000000000000000..ce5dc65e53d5eb4b6c7c80ec14cf923cf4c4eb0c
--- /dev/null
+++ b/migrations/01_notflixapp.sql
@@ -0,0 +1,371 @@
+--
+-- PostgreSQL database dump
+--
+
+-- Dumped from database version 16.0
+-- Dumped by pg_dump version 16.0
+
+SET statement_timeout = 0;
+SET lock_timeout = 0;
+SET idle_in_transaction_session_timeout = 0;
+SET client_encoding = 'UTF8';
+SET standard_conforming_strings = on;
+SELECT pg_catalog.set_config('search_path', '', false);
+SET check_function_bodies = false;
+SET xmloption = content;
+SET client_min_messages = warning;
+SET row_security = off;
+
+SET default_tablespace = '';
+
+SET default_table_access_method = heap;
+
+--
+-- Name: film; Type: TABLE; Schema: public; Owner: postgres
+--
+
+CREATE TABLE public.film (
+    film_id integer NOT NULL,
+    title character varying(256) NOT NULL,
+    description text,
+    film_path character varying(256) NOT NULL,
+    film_poster character varying(256) NOT NULL,
+    film_header character varying(256) NOT NULL,
+    date_release date NOT NULL,
+    duration integer NOT NULL,
+    likes_count integer DEFAULT 0 NOT NULL
+);
+
+
+ALTER TABLE public.film OWNER TO postgres;
+
+--
+-- Name: film_film_id_seq; Type: SEQUENCE; Schema: public; Owner: postgres
+--
+
+CREATE SEQUENCE public.film_film_id_seq
+    AS integer
+    START WITH 1
+    INCREMENT BY 1
+    NO MINVALUE
+    NO MAXVALUE
+    CACHE 1;
+
+
+ALTER SEQUENCE public.film_film_id_seq OWNER TO postgres;
+
+--
+-- Name: film_film_id_seq; Type: SEQUENCE OWNED BY; Schema: public; Owner: postgres
+--
+
+ALTER SEQUENCE public.film_film_id_seq OWNED BY public.film.film_id;
+
+
+--
+-- Name: film_genre; Type: TABLE; Schema: public; Owner: postgres
+--
+
+CREATE TABLE public.film_genre (
+    film_id integer,
+    genre_id integer
+);
+
+
+ALTER TABLE public.film_genre OWNER TO postgres;
+
+--
+-- Name: genre; Type: TABLE; Schema: public; Owner: postgres
+--
+
+CREATE TABLE public.genre (
+    genre_id integer NOT NULL,
+    name character varying(256) NOT NULL
+);
+
+
+ALTER TABLE public.genre OWNER TO postgres;
+
+--
+-- Name: genre_genre_id_seq; Type: SEQUENCE; Schema: public; Owner: postgres
+--
+
+CREATE SEQUENCE public.genre_genre_id_seq
+    AS integer
+    START WITH 1
+    INCREMENT BY 1
+    NO MINVALUE
+    NO MAXVALUE
+    CACHE 1;
+
+
+ALTER SEQUENCE public.genre_genre_id_seq OWNER TO postgres;
+
+--
+-- Name: genre_genre_id_seq; Type: SEQUENCE OWNED BY; Schema: public; Owner: postgres
+--
+
+ALTER SEQUENCE public.genre_genre_id_seq OWNED BY public.genre.genre_id;
+
+
+--
+-- Name: users; Type: TABLE; Schema: public; Owner: postgres
+--
+
+CREATE TABLE public.users (
+    user_id integer NOT NULL,
+    username character varying(128) NOT NULL,
+    first_name character varying(128) NOT NULL,
+    last_name character varying(128) NOT NULL,
+    email character varying(128) NOT NULL,
+    password character varying(256) NOT NULL,
+    phone_number character varying(30) NOT NULL,
+    photo_profile character varying(256),
+    is_admin boolean NOT NULL,
+    is_premium boolean DEFAULT false
+);
+
+
+ALTER TABLE public.users OWNER TO postgres;
+
+--
+-- Name: users_user_id_seq; Type: SEQUENCE; Schema: public; Owner: postgres
+--
+
+CREATE SEQUENCE public.users_user_id_seq
+    AS integer
+    START WITH 1
+    INCREMENT BY 1
+    NO MINVALUE
+    NO MAXVALUE
+    CACHE 1;
+
+
+ALTER SEQUENCE public.users_user_id_seq OWNER TO postgres;
+
+--
+-- Name: users_user_id_seq; Type: SEQUENCE OWNED BY; Schema: public; Owner: postgres
+--
+
+ALTER SEQUENCE public.users_user_id_seq OWNED BY public.users.user_id;
+
+
+--
+-- Name: watchlist; Type: TABLE; Schema: public; Owner: postgres
+--
+
+CREATE TABLE public.watchlist (
+    user_id integer,
+    film_id integer
+);
+
+
+ALTER TABLE public.watchlist OWNER TO postgres;
+
+--
+-- Name: film film_id; Type: DEFAULT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.film ALTER COLUMN film_id SET DEFAULT nextval('public.film_film_id_seq'::regclass);
+
+
+--
+-- Name: genre genre_id; Type: DEFAULT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.genre ALTER COLUMN genre_id SET DEFAULT nextval('public.genre_genre_id_seq'::regclass);
+
+
+--
+-- Name: users user_id; Type: DEFAULT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.users ALTER COLUMN user_id SET DEFAULT nextval('public.users_user_id_seq'::regclass);
+
+
+--
+-- Data for Name: film; Type: TABLE DATA; Schema: public; Owner: postgres
+--
+
+COPY public.film (film_id, title, description, film_path, film_poster, film_header, date_release, duration, likes_count) FROM stdin;
+1	Fast X	Over many missions and against impossible odds, Dom Toretto and his family have outsmarted, out-nerved and outdriven every foe in their path. Now, they confront the most lethal opponent theyve ever faced: A terrifying threat emerging from the shadows of the past who s fueled by blood revenge, and who is determined to shatter this family and destroy everything—and everyone—that Dom loves, forever.	film1.mp4	film1_poster.jpg	film1_header.jpg	2023-05-19	142	99
+2	Mission: Impossible - Dead Reckoning Part One	Ethan Hunt and his IMF team embark on their most dangerous mission yet: To track down a terrifying new weapon that threatens all of humanity before it falls into the wrong hands. With control of the future and the world s fate at stake and dark forces from Ethan s past closing in, a deadly race around the globe begins.	film2.mp4	film2_poster.jpg	film2_header.jpg	2023-07-12	164	0
+3	The Flash	When his attempt to save his family inadvertently alters the future, Barry Allen becomes trapped in a reality in which General Zod has returned and there are no Super Heroes to turn to. In order to save the world that he is in and return to the future that he knows, Barry s only hope is to race for his life. But will making the ultimate sacrifice be enough to reset the universe?	film3.mp4	film3_poster.jpg	film3_header.jpg	2023-06-14	144	0
+4	The Meg 2: The Trench	An exploratory dive into the deepest depths of the ocean of a daring research team spirals into chaos when a malevolent mining operation threatens their mission and forces them into a high-stakes battle for survival.	film4.mp4	film4_poster.jpg	film4_header.jpg	2023-08-14	116	0
+5	The Equalizer 2	Robert McCall serves an unflinching justice for the exploited and oppressed, but how far will he go when that is someone he loves?	film5.mp4	film5_poster.jpg	film5_header.jpg	2022-08-18	121	0
+6	Barbie	A doll living in Barbieland is expelled for not being perfect enough and sets off on an adventure in the real world. A Live-action feature film based on the popular line of Barbie toys.	film6.mp4	film6_poster.jpg	film6_header.jpg	2023-06-30	120	0
+7	Elemental	After a childhood accident, college student Addie is plagued by guilt and doubts. After meeting a mysterious stranger in the forest, she unearths supernatural abilities that she can t explain. And with her life on the line, she must harness these powers to uncover the truth about her past and the sinister forces conspiring against her.	film7.mp4	film7_poster.jpg	film7_header.jpg	2023-04-20	110	0
+8	The Little Mermaid	A young mermaid gives up her life in the sea to be with the man she loves.	film8.mp4	film8_poster.jpg	film8_header.jpg	2023-07-21	109	0
+9	Coco	Aspiring musician Miguel, confronted with his family s ancestral ban on music, enters the Land of the Dead to find his great-great-grandfather, a legendary singer.	film9.mp4	film9_poster.jpg	film9_header.jpg	2017-11-22	105	0
+10	Doctor Strange in the Multiverse of Madness	After the events of Avengers: Endgame, Dr. Stephen Strange continues his research on the Time Stone. But an old friend turned enemy seeks to destroy every sorcerer on Earth, messing with Strange s plan and also causing him to unleash an unspeakable evil.	film10.mp4	film10_poster.jpg	film10_header.jpg	2022-05-06	150	0
+11	Shang-Chi and the Legend of the Ten Rings	Shang-Chi, the master of unarmed weaponry-based Kung Fu, is forced to confront his past after being drawn into the Ten Rings organization.	film11.mp4	film11_poster.jpg	film11_header.jpg	2021-09-03	132	0
+12	Oppenheimer	A look at the life and work of the influential physicist Albert Einstein.	film12.mp4	film12_poster.jpg	film12_header.jpg	2023-12-31	160	0
+13	Interstellar	A team of explorers travel through a wormhole in space in an attempt to ensure humanity s survival.	film13.mp4	film13_poster.jpg	film13_header.jpg	2014-11-07	169	0
+14	Me Before You	A girl in a small town forms an unlikely bond with a recently-paralyzed man she s taking care of.	film14.mp4	film14_poster.jpg	film14_header.jpg	2016-06-03	110	0
+15	Cinderella	A modern movie musical with a bold take on the classic fairy tale. Our ambitious heroine has big dreams and with the help of her fab Godmother, she perseveres to make them come true.	film15.mp4	film15_poster.jpg	film15_header.jpg	2021-09-03	113	0
+16	Parasite	Greed and class discrimination threaten the newly formed symbiotic relationship between the wealthy Park family and the destitute Kim clan.	film16.mp4	film16_poster.jpg	film16_header.jpg	2019-10-11	132	0
+17	A Haunting in Venice	A group of friends are terrorized by a vengeful spirit who uses her deadly Black Rose touch to kill them one by one.	film17.mp4	film17_poster.jpg	film17_header.jpg	2023-10-27	98	0
+18	Gone Girl	With his wife s disappearance having become the focus of an intense media circus, a man sees the spotlight turned on him when it s suspected that he may not be innocent.	film18.mp4	film18_poster.jpg	film18_header.jpg	2014-10-03	149	0
+19	Glass Onion: A Knives Out Mystery	A detective and her partner investigate the death of a wealthy patriarch, but they soon discover a web of lies and secrets that lead them down a twisted path.	film19.mp4	film19_poster.jpg	film19_header.jpg	2023-09-15	125	0
+20	Knives Out	A detective investigates the death of a patriarch of an eccentric, combative family.	film20.mp4	film20_poster.jpg	film20_header.jpg	2019-11-27	131	0
+\.
+
+
+--
+-- Data for Name: film_genre; Type: TABLE DATA; Schema: public; Owner: postgres
+--
+
+COPY public.film_genre (film_id, genre_id) FROM stdin;
+\.
+
+
+--
+-- Data for Name: genre; Type: TABLE DATA; Schema: public; Owner: postgres
+--
+
+COPY public.genre (genre_id, name) FROM stdin;
+1	Action
+2	Fantasy
+3	Drama
+4	Mystery
+5	Comedy
+6	Science Fiction
+7	Romance
+8	Thriller
+9	Horror
+10	Adventure
+11	Crime
+12	Animation
+13	Family
+14	Documentary
+15	Biography
+16	History
+17	War
+18	Musical
+19	Sport
+20	Western
+\.
+
+
+--
+-- Data for Name: users; Type: TABLE DATA; Schema: public; Owner: postgres
+--
+
+COPY public.users (user_id, username, first_name, last_name, email, password, phone_number, photo_profile, is_admin, is_premium) FROM stdin;
+1	admin	Jane	Smith	jane.smith@example.com	$2y$10$wP7/urYq5YUMTTk3dhgenOLJtIZlEAcHl8u0h5szZGxAoxZi1iHBu	+9876543210	profile1.jpg	t	f
+2	user	John	Doe	john.doe@example.com	$2y$10$wP7/urYq5YUMTTk3dhgenOLJtIZlEAcHl8u0h5szZGxAoxZi1iHBu	+1234567890	profile2.jpg	f	f
+\.
+
+
+--
+-- Data for Name: watchlist; Type: TABLE DATA; Schema: public; Owner: postgres
+--
+
+COPY public.watchlist (user_id, film_id) FROM stdin;
+\.
+
+
+--
+-- Name: film_film_id_seq; Type: SEQUENCE SET; Schema: public; Owner: postgres
+--
+
+SELECT pg_catalog.setval('public.film_film_id_seq', 20, true);
+
+
+--
+-- Name: genre_genre_id_seq; Type: SEQUENCE SET; Schema: public; Owner: postgres
+--
+
+SELECT pg_catalog.setval('public.genre_genre_id_seq', 20, true);
+
+
+--
+-- Name: users_user_id_seq; Type: SEQUENCE SET; Schema: public; Owner: postgres
+--
+
+SELECT pg_catalog.setval('public.users_user_id_seq', 3, true);
+
+
+--
+-- Name: film film_pkey; Type: CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.film
+    ADD CONSTRAINT film_pkey PRIMARY KEY (film_id);
+
+
+--
+-- Name: genre genre_name_key; Type: CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.genre
+    ADD CONSTRAINT genre_name_key UNIQUE (name);
+
+
+--
+-- Name: genre genre_pkey; Type: CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.genre
+    ADD CONSTRAINT genre_pkey PRIMARY KEY (genre_id);
+
+
+--
+-- Name: users users_email_key; Type: CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.users
+    ADD CONSTRAINT users_email_key UNIQUE (email);
+
+
+--
+-- Name: users users_pkey; Type: CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.users
+    ADD CONSTRAINT users_pkey PRIMARY KEY (user_id);
+
+
+--
+-- Name: users users_username_key; Type: CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.users
+    ADD CONSTRAINT users_username_key UNIQUE (username);
+
+
+--
+-- Name: watchlist fk_film; Type: FK CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.watchlist
+    ADD CONSTRAINT fk_film FOREIGN KEY (film_id) REFERENCES public.film(film_id);
+
+
+--
+-- Name: film_genre fk_film_genre_film; Type: FK CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.film_genre
+    ADD CONSTRAINT fk_film_genre_film FOREIGN KEY (film_id) REFERENCES public.film(film_id);
+
+
+--
+-- Name: film_genre fk_film_genre_genre; Type: FK CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.film_genre
+    ADD CONSTRAINT fk_film_genre_genre FOREIGN KEY (genre_id) REFERENCES public.genre(genre_id);
+
+
+--
+-- Name: watchlist fk_user; Type: FK CONSTRAINT; Schema: public; Owner: postgres
+--
+
+ALTER TABLE ONLY public.watchlist
+    ADD CONSTRAINT fk_user FOREIGN KEY (user_id) REFERENCES public.users(user_id);
+
+
+--
+-- PostgreSQL database dump complete
+--
+
diff --git a/screenshots/edit_profile.jpg b/screenshots/edit_profile.jpg
index 6f03ac3ae612453ca99b453aee78211840ea1e82..66b1b21cfa126363cba72d5b6bebe874c12cf631 100644
Binary files a/screenshots/edit_profile.jpg and b/screenshots/edit_profile.jpg differ
diff --git a/screenshots/premium_film.jpg b/screenshots/premium_film.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..df0bb6b237771b06b5f104cbdc87a8745811a26e
Binary files /dev/null and b/screenshots/premium_film.jpg differ
diff --git a/screenshots/profile_pending.jpg b/screenshots/profile_pending.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ba2b6181645062fcdefce71971f052614567e56e
Binary files /dev/null and b/screenshots/profile_pending.jpg differ
diff --git a/screenshots/profile_premium.jpg b/screenshots/profile_premium.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..24f40670f8768799fc8107e1dff242be75b36639
Binary files /dev/null and b/screenshots/profile_premium.jpg differ
diff --git a/screenshots/watch.jpg b/screenshots/watch.jpg
index 19286da41f7c0d7ac2732536868e2a0efeb7829f..a7ed858ece1643f273e253ba4c3692afe63486d6 100644
Binary files a/screenshots/watch.jpg and b/screenshots/watch.jpg differ
diff --git a/screenshots/watch_premium.jpg b/screenshots/watch_premium.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6a6e7a5c4337c762e33a4a2841f2422684968d1c
Binary files /dev/null and b/screenshots/watch_premium.jpg differ
diff --git a/src/app/clients/SoapClient.php b/src/app/clients/SoapClient.php
new file mode 100644
index 0000000000000000000000000000000000000000..89ca873260812699b9063b527523d91f2e4a4fe2
--- /dev/null
+++ b/src/app/clients/SoapClient.php
@@ -0,0 +1,26 @@
+<?php
+
+class SoapCaller
+{
+    private $url;
+    private $client;
+
+    public function __construct()
+    {
+        $this->url = SOAP_API;
+    }
+
+    public function call($url, $method, $params)
+    {
+        $this->client = new SoapClient($this->url . $url,
+        array('trace' => 1, 'stream_context' => stream_context_create(
+            array('http' => array('header' =>
+            'Api-key: ' . SOAP_KEY)))));
+        try {
+            return $this->client->__soapCall($method, $params);
+        } catch (SoapFault $fault) {
+            echo "SOAP Fault: {$fault->faultcode} - {$fault->faultstring}";
+            return false;
+        }
+    }
+}
diff --git a/src/app/component/film/ManageGenrePage.php b/src/app/component/film/ManageGenrePage.php
deleted file mode 100644
index db76611f001b1fe2654fc54b58386a5577716b53..0000000000000000000000000000000000000000
--- a/src/app/component/film/ManageGenrePage.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!---Title--->
-    <title>Notflix</title>
-    <!---Icon--->
-    <link rel="icon" href="images/icon/logo.ico">
-    <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/Navbar.css">
-    <!---Page specify CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/film/manageGenre.css">
-    <link rel="stylesheet" type="text/css" href="/styles/film/cardGenre.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
-
-    <script type="text/javascript" src="/javascript/film/deleteGenre.js" defer></script>
-</head>
-
-<body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php"); ?>
-    <?php
-    require_once DIRECTORY . '/../controller/film/GenreController.php';
-    $genre = new GenreController();
-    $result = $genre->getAllGenre();
-    ?>
-    <div class='container'>
-        <div class='upper-container'>
-        <h2>Genre</h2>
-
-<div class="upper-container">
-    <a href='/add-genre'>
-        <button class="button-white button-text">Add New Genre</button>
-    </a>
-</div>
-        </div>
-            <div class="cards-genre">
-                <?php foreach ($result as $genre) {
-                    include(DIRECTORY . "/../component/template/cardGenre.php");
-                } ?>
-            </div>
-        </div>
-    </div>
-    <?php include(DIRECTORY. "/../component/template/toast.php"); ?>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/app/config/config.php b/src/app/config/config.php
index e89a768a87233bde63667f7ee36e3110b5eef57b..acd01d6f5e40dfe93bb0f8227095563b25e15634 100644
--- a/src/app/config/config.php
+++ b/src/app/config/config.php
@@ -5,4 +5,12 @@ define('HOST', $_ENV['POSTGRES_HOST']);
 define('DB', $_ENV['POSTGRES_DB']);
 define('USER', $_ENV['POSTGRES_USER']);
 define('PASS', $_ENV['POSTGRES_PASSWORD']);
-define('PORT', $_ENV['POSTGRES_PORT']);
\ No newline at end of file
+define('PORT', $_ENV['POSTGRES_PORT']);
+
+define('SOAP_API', $_ENV['PHP_SOAP_URL']);
+define('SOAP_KEY', $_ENV['SOAP_KEY']);
+define('REST_URL', $_ENV['PHP_REST_URL']);
+define('MAX_SIZE_PROFILE', 800 * 1024);
+define('MAX_SIZE_POSTER', 1 * 1024 * 1024 );
+define('MAX_SIZE_VIDEO', 5 * 1024 * 1024 );
+define('MAX_SIZE_HEADER', 1 * 1024 * 1024 );
\ No newline at end of file
diff --git a/src/app/controller/conditional/NotFoundController.php b/src/app/controller/conditional/NotFoundController.php
index b06be0d77c0cf7a4a97a6075c74bd1e7006214ec..86f6d59c1f948245c1378b3444d77cd47c9400e0 100644
--- a/src/app/controller/conditional/NotFoundController.php
+++ b/src/app/controller/conditional/NotFoundController.php
@@ -2,6 +2,6 @@
 
 class NotFoundController{ 
     public function showNotFoundPage(){
-        require_once DIRECTORY . "/../component/conditional/NotFound.php";
+        require_once DIRECTORY . "/../view/conditional/NotFound.php";
     }
 }
\ No newline at end of file
diff --git a/src/app/controller/conditional/RestrictedController.php b/src/app/controller/conditional/RestrictedController.php
index 504d5992bde1734e3d4b441415fa4e318d37cb96..c9f5658e6027835949dc3243833714e910bdb8ab 100644
--- a/src/app/controller/conditional/RestrictedController.php
+++ b/src/app/controller/conditional/RestrictedController.php
@@ -2,10 +2,10 @@
 
 class RestrictedController{ 
     public function showRestrictedPage(){
-        require_once DIRECTORY . "/../component/conditional/Restricted.php";
+        require_once DIRECTORY . "/../view/conditional/Restricted.php";
     }
 
     public function showAdminModePage(){
-        require_once DIRECTORY . "/../component/conditional/Admin.php";
+        require_once DIRECTORY . "/../view/conditional/Admin.php";
     }
 }
\ No newline at end of file
diff --git a/src/app/controller/film/FilmController.php b/src/app/controller/film/FilmController.php
index 4d98697da26e61f85747e77443936f1ae7fd6b52..2789751d1894e6947ef8e6c405dfed141bfdc617 100644
--- a/src/app/controller/film/FilmController.php
+++ b/src/app/controller/film/FilmController.php
@@ -6,12 +6,18 @@ require_once  DIRECTORY . '/../utils/duration.php';
 require_once  DIRECTORY . '/../models/filmGenre.php';
 require_once  DIRECTORY . '/../models/watchlist.php';
 require_once  DIRECTORY . '/../middlewares/AuthenticationMiddleware.php';
+require_once  DIRECTORY . '/../clients/SoapClient.php';
+
 class FilmController
 {
     private $filmModel;
     private $filmGenreModel;
     private $watchlistModel;
     private $middleware;
+    private $soapClient;
+
+    private int $limit;
+    private int $page;
 
     public function __construct()
     {
@@ -19,6 +25,9 @@ class FilmController
         $this->filmGenreModel = new FilmGenreModel();
         $this->watchlistModel = new WatchListModel();
         $this->middleware = new AuthenticationMiddleware();
+        $this->soapClient = new SoapCaller();
+        $this->page = isset($_GET['page']) && $_GET['page'] > 0 ? $_GET['page'] : 1;
+        $this->limit = isset($_GET['limit']) && $_GET['limit'] > 0 ? $_GET['limit'] : 12;
     }
 
     /**Get Film */
@@ -30,14 +39,6 @@ class FilmController
     public function getAllFilm()
     {
         $filmData = $this->filmModel->getAllFilm();
-        // $result = [];
-        // foreach ($filmData as $film) {
-        //     $data = [];
-        //     $data["film_id"] = $film['film_id'];
-        //     $data["title"] = $film['title'];
-        //     $data["film_poster"] = $film['film_poster'];
-        //     $result[] = $data;
-        // }
         return $filmData;
     }
 
@@ -60,11 +61,44 @@ class FilmController
         echo json_encode(["isExist" => $isExist]);
     }
 
+    public function generatePagination()
+    {
+        $total_records = $this->filmModel->getFilmCount();
+        if ($total_records) $total_records = $total_records['count'];
+        $items_per_page = 12;
+        $current_page = $this->page;
+
+        include(DIRECTORY . "/../view/components/pagination.php");
+    }
+
+    public function generateCards()
+    {
+        $offset = ($this->page - 1) * $this->limit;
+        $films = $this->filmModel->getFilm($this->limit, $offset);
+        foreach ($films as $film) {
+            include(DIRECTORY . "/../view/components/cardMovie.php");
+        }
+        if (empty($films) && $this->page == 1) echo "No film currently available";
+    }
 
     /**Add Film */
     public function addFilm()
     {
         header('Content-Type: application/json');
+        if ($_POST['film_poster_size'] > MAX_SIZE_HEADER) {
+            http_response_code(413);
+            echo json_encode(["error" => "Film poster size is too big"]);
+            return;
+        } else if ($_POST['film_header_size'] > MAX_SIZE_HEADER) {
+            http_response_code(413);
+            echo json_encode(["error" => "Film header size is too big"]);
+            return;
+        } else if ($_POST['film_path_size'] > MAX_SIZE_VIDEO) {
+            http_response_code(413);
+            echo json_encode(["error" => "Film size is too big"]);
+            return;
+        }
+
         http_response_code(200);
         $convert = turnIntoMinute($_POST['filmHourDuration'], $_POST['filmMinuteDuration']);
         $this->filmModel->insertFilm(
@@ -89,8 +123,42 @@ class FilmController
     public function editFilm()
     {
         header('Content-Type: application/json');
-        http_response_code(200);
+        
+        // if (!empty($_POST['film_poster_size']) || !empty($_POST['film_header_size']) || !empty($_POST['film_path_size'])) {
+        //     print_r("yaallah");
+        //     if ($_POST['film_poster_size'] > MAX_SIZE_POSTER || $_POST['film_header_size'] > MAX_SIZE_HEADER || $_POST['film_path_size'] > MAX_SIZE_VIDEO) {
+        //         http_response_code(413);
+        //         echo json_encode(["error" => "Size is too big"]);
+        //         return;
+        //     }
+        // }
+
+        if(!empty($_POST['film_poster_size'])){
+            if($_POST['film_poster_size']){
+                http_response_code(413);
+                echo json_encode(["error" => "Size is too big"]);
+                exit;
+            }
+        }
 
+        if(!empty($_POST['film_header_size'])){
+            if($_POST['film_poster_size']){
+                http_response_code(413);
+                echo json_encode(["error" => "Size is too big"]);
+                exit;
+            }
+        }
+
+        if(!empty($_POST['film_path_size'])){
+            if($_POST['film_poster_size']){
+                http_response_code(413);
+                echo json_encode(["error" => "Size is too big"]);
+                exit;
+            }
+        }
+
+
+        
         if (empty($_POST['filmHourDuration']) && !empty($_POST['filmMinuteDuration'])) {
             $convert = turnIntoMinute(0, (int)($_POST['filmMinuteDuration']));
         } else if (empty($_POST['filmMinuteDuration']) && !empty($_POST['filmHourDuration'])) {
@@ -111,27 +179,30 @@ class FilmController
         $updateData['film_path'] = $this->checkAndUpdateField($_POST['film_path'], $existingFilmData['film_path']);
         $updateData['film_poster'] = $this->checkAndUpdateField($_POST['film_poster'], $existingFilmData['film_poster']);
         $updateData['date_release'] = $this->checkAndUpdateField($_POST['date_release'], $existingFilmData['date_release']);
-
-
+        
+        
         $this->filmModel->updateFilm($_POST['film_id'], $updateData);
 
         // Update film genre
-        if(!empty($_POST['filmGenre'])){
+        if (!empty($_POST['filmGenre'])) {
             $this->filmGenreModel->deleteFilmGenre($_POST['film_id']);
             foreach ($_POST['filmGenre'] as $update) {
                 $this->filmGenreModel->insertFilmGenre($_POST['film_id'], $update);
             }
         }
+        http_response_code(200);
         echo json_encode(["redirect_url" => "/detail-film/" . $_POST['film_id']]);
     }
 
-    public function generateWatchlistButton($filmID){
+    public function generateWatchlistButton($filmID)
+    {
         $add = "<button id='watchlist-button' class='text-black' value='add'>Add to Watchlist";
         $remove = "<button id='watchlist-button' class='text-black' value='remove'>Remove from Watchlist";
-        echo ($this->watchlistModel->isFilmOnWatchList($_SESSION['user_id'],$filmID)) ? $remove:$add;
+        echo ($this->watchlistModel->isFilmOnWatchList($_SESSION['user_id'], $filmID)) ? $remove : $add;
     }
 
-    public function generateFilm($filmPath, $startTime){
+    public function generateFilm($filmPath, $startTime)
+    {
         $response = "<source src='../storage/film/" . htmlspecialchars($filmPath) . '#t=' . $startTime . "' type='video/mp4'>";
         echo $response;
     }
@@ -158,10 +229,6 @@ class FilmController
         }
     }
 
-
-
-
-
     /**Delete Film */
     public function deleteFilm()
     {
@@ -178,7 +245,18 @@ class FilmController
         if ($this->middleware->isAdmin()) {
             header("Location: /restrictAdmin");
         } else if ($this->middleware->isAuthenticated()) {
-            require_once DIRECTORY . "/../component/film/WatchFilmPage.php";
+            require_once DIRECTORY . "/../view/film/WatchFilmPage.php";
+        } else {
+            header("Location: /login");
+        }
+    }
+
+    public function showWatchPremiumPage($params = [])
+    {
+        if ($this->middleware->isAdmin()) {
+            header("Location: /restrictAdmin");
+        } else if ($this->middleware->isAuthenticated()) {
+            require_once DIRECTORY . "/../view/film/WatchPremiumPage.php";
         } else {
             header("Location: /login");
         }
@@ -186,7 +264,7 @@ class FilmController
     public function showDetailFilmPage($params = [])
     {
         if ($this->middleware->isAdmin()) {
-            require_once DIRECTORY . "/../component/film/DetailFilmPage.php";
+            require_once DIRECTORY . "/../view/film/DetailFilmPage.php";
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /restrict");
         } else {
@@ -196,7 +274,7 @@ class FilmController
     public function showAddFilmPage()
     {
         if ($this->middleware->isAdmin()) {
-            require_once DIRECTORY . "/../component/film/AddFilmPage.php";
+            require_once DIRECTORY . "/../view/film/AddFilmPage.php";
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /restrict");
         } else {
@@ -207,7 +285,7 @@ class FilmController
     public function showEditFilmPage($params = [])
     {
         if ($this->middleware->isAdmin()) {
-            require_once DIRECTORY . "/../component/film/EditFilmPage.php";
+            require_once DIRECTORY . "/../view/film/EditFilmPage.php";
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /restrict");
         } else {
@@ -217,11 +295,73 @@ class FilmController
     public function showManageFilmPage()
     {
         if ($this->middleware->isAdmin()) {
-            require_once DIRECTORY . "/../component/film/ManageFilmPage.php";
+            require_once DIRECTORY . "/../view/film/ManageFilmPage.php";
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /restrict");
         } else {
             header("Location: /login");
         }
     }
+
+
+    public function getLikesCount($filmID)
+    {
+        return $this->filmModel->getFilmByID($filmID)['likes_count'];
+    }
+
+    public function generateLikesButton($film_id)
+    {
+        $params = array(
+            "film_id" => $film_id,
+            "user_id" => $_SESSION['user_id'],
+        );
+        $isUserLikeFilm = $this->soapClient->call("/likes?wsdl", "isUserLikeFilm", array($params))->return;
+        $likescount = $this->getLikesCount($film_id);
+
+        echo
+        "<div class='heart " . ($isUserLikeFilm ? "like" : "dislike") . "' id='heart'></div>
+            <div class='likecounter' id='likecounter'>" . $likescount . "</div>";
+    }
+
+    public function addLike()
+    {
+        $params = array(
+            "film_id" => $_POST['film_id'],
+            "user_id" => $_SESSION['user_id'],
+        );
+        header('Content-Type: application/json');
+        if ($this->soapClient->call("/likes?wsdl", "isUserLikeFilm", array($params))->return) {
+            http_response_code(200);
+            echo json_encode(["likes_count" => $this->getLikesCount($_POST['film_id'])]);
+            return;
+        }
+        $this->soapClient->call("/likes?wsdl", "addLikes", array($params));
+        http_response_code(200);
+
+        $likes_count = $this->filmModel->addLike($_POST['film_id']);
+        echo json_encode(["likes_count" => $likes_count]);
+    }
+
+    public function deleteLike()
+    {
+        $params = array(
+            "film_id" => $_POST['film_id'],
+            "user_id" => $_SESSION['user_id'],
+        );
+        header('Content-Type: application/json');
+        if (!$this->soapClient->call("/likes?wsdl", "isUserLikeFilm", array($params))->return) {
+            http_response_code(200);
+            echo json_encode(["likes_count" => $this->getLikesCount($_POST['film_id'])]);
+            return;
+        }
+        $params = array(
+            "film_id" => $_POST['film_id'],
+            "user_id" => $_SESSION['user_id'],
+        );
+        $this->soapClient->call("/likes?wsdl", "deleteLikes", array($params));
+        http_response_code(200);
+
+        $likes_count = $this->filmModel->deleteLike($_POST['film_id']);
+        echo json_encode(["likes_count" => $likes_count]);
+    }
 }
diff --git a/src/app/controller/film/GenreController.php b/src/app/controller/film/GenreController.php
index 7e96584472bae5bd029181bdc7cea2ee9d724ead..06df3fbd789c8dd4205a95aee5a06bdc5d1e382c 100644
--- a/src/app/controller/film/GenreController.php
+++ b/src/app/controller/film/GenreController.php
@@ -9,12 +9,16 @@ class GenreController
     private $genreModel;
     private $filmGenreModel;
     private $middleware;
+    private int $limit;
+    private int $page;
 
     public function __construct()
     {
         $this->genreModel = new GenreModel();
         $this->filmGenreModel = new FilmGenreModel();
         $this->middleware = new AuthenticationMiddleware();
+        $this->page = isset($_GET['page']) && $_GET['page']>0 ? $_GET['page'] : 1;
+        $this->limit = isset($_GET['limit']) && $_GET['limit']>0 ? $_GET['limit'] : 12;
     }
 
     public function getAllGenre()
@@ -58,10 +62,29 @@ class GenreController
         echo json_encode(["redirect_url" => "/manage-genre"]);
     }
 
+    /**Generate pagination */
+    public function generatePagination(){
+        $total_records = $this->genreModel->getGenreCount();
+        if($total_records) $total_records=$total_records['count'];
+        $items_per_page = 12;
+        $current_page = $this->page;
+
+        include(DIRECTORY . "/../view/components/pagination.php");
+    }
+
+    public function generateCards(){
+        $offset = ($this->page-1)*$this->limit;
+        $genres = $this->genreModel->getGenre($this->limit, $offset);
+        foreach($genres as $genre){
+            include(DIRECTORY . "/../view/components/cardGenre.php");
+        }
+        if (empty($genres) && $this->page == 1) echo "No user currently available";
+    }
+
     public function showManageGenrePage()
     {
         if ($this->middleware->isAdmin()) {
-            include_once DIRECTORY . '/../component/film/ManageGenrePage.php';
+            include_once DIRECTORY . '/../view/film/ManageGenrePage.php';
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /restrict");
         } else {
@@ -72,7 +95,7 @@ class GenreController
     public function addGenrePage()
     {
         if ($this->middleware->isAdmin()) {
-            include_once DIRECTORY . '/../component/film/AddGenrePage.php';
+            include_once DIRECTORY . '/../view/film/AddGenrePage.php';
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /restrict");
         } else {
diff --git a/src/app/controller/search/SearchPageController.php b/src/app/controller/search/SearchPageController.php
index c0f91273fd8022db66425ddc7508242bf31baaad..ff5984097e6dd20ba98e05862c9fe3bc57567f99 100644
--- a/src/app/controller/search/SearchPageController.php
+++ b/src/app/controller/search/SearchPageController.php
@@ -40,7 +40,7 @@ class SearchPageController{
         
         ob_start();
         foreach($lf as $film){
-            include(DIRECTORY . "/../component/template/cardMovie.php");
+            include(DIRECTORY . "/../view/components/cardMovie.php");
             $this->items_count += 1;
         }
         $response = ob_get_contents();
@@ -54,7 +54,7 @@ class SearchPageController{
         $current_page = $this->page;
         
         ob_start();
-        include(DIRECTORY . "/../component/template/pagination.php");
+        include(DIRECTORY . "/../view/components/pagination.php");
         $response = ob_get_contents();
         ob_end_clean();
 
@@ -70,7 +70,7 @@ class SearchPageController{
         if ($this->middleware->isAdmin()) {
             header("Location: /restrictAdmin");
         } else if ($this->middleware->isAuthenticated()) {
-            require_once DIRECTORY . "/../component/user/SearchPage.php";
+            require_once DIRECTORY . "/../view/user/SearchPage.php";
         } else {
             header("Location: /login");
         }
diff --git a/src/app/controller/user/HomePageController.php b/src/app/controller/user/HomePageController.php
index 575364ea4ea142da838609e1d147ab63129e036e..57d77f665a41b4c99f1dcee352eb3d148f051005 100644
--- a/src/app/controller/user/HomePageController.php
+++ b/src/app/controller/user/HomePageController.php
@@ -3,12 +3,14 @@ require_once  DIRECTORY . '/../utils/database.php';
 require_once  DIRECTORY . '/../models/films.php';
 require_once  DIRECTORY . '/../models/watchlist.php';
 require_once  DIRECTORY . '/../middlewares/AuthenticationMiddleware.php';
+require_once DIRECTORY . '/../clients/SoapClient.php';
+
 class HomePageController{ 
     private $filmModel;
 
     private $watchListModel;
     private $middleware;
-    
+
     private int $limit;
     private int $page;
 
@@ -25,7 +27,7 @@ class HomePageController{
         if ($this->middleware->isAdmin()) {
             header("Location: /restrictAdmin");
         } else if ($this->middleware->isAuthenticated()) {
-            require_once DIRECTORY . "/../component/user/HomePage.php";
+            require_once DIRECTORY . "/../view/user/HomePage.php";
         } else {
             header("Location: /login");
         }
@@ -37,14 +39,14 @@ class HomePageController{
         $items_per_page = 12;
         $current_page = $this->page;
 
-        include(DIRECTORY . "/../component/template/pagination.php");
+        include(DIRECTORY . "/../view/components/pagination.php");
     }
 
     public function generateCards(){
         $offset = ($this->page-1)*$this->limit;
         $films = $this->filmModel->getFilm($this->limit, $offset);
         foreach($films as $film){
-            include(DIRECTORY . "/../component/template/cardMovie.php");
+            include(DIRECTORY . "/../view/components/cardMovie.php");
         }
         if (empty($films) && $this->page == 1) echo "No film currently available";
     }
diff --git a/src/app/controller/user/LoginController.php b/src/app/controller/user/LoginController.php
index 55d00563e728f6b6051ec0f2f8a709d535bd3f1c..347fe9cc2f1e2abd3bd3094fb174cfdcba376902 100644
--- a/src/app/controller/user/LoginController.php
+++ b/src/app/controller/user/LoginController.php
@@ -17,7 +17,7 @@ class LoginController{
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /home");
         } else {
-            require_once DIRECTORY . "/../component/user/LoginPage.php";
+            require_once DIRECTORY . "/../view/user/LoginPage.php";
         }
     }
     public function login(){
diff --git a/src/app/controller/user/PremiumPageController.php b/src/app/controller/user/PremiumPageController.php
new file mode 100644
index 0000000000000000000000000000000000000000..a198df7dc36112463b299dd939c1ae1af58000a5
--- /dev/null
+++ b/src/app/controller/user/PremiumPageController.php
@@ -0,0 +1,49 @@
+<?php
+require_once  DIRECTORY . '/../utils/database.php';
+require_once  DIRECTORY . '/../models/films.php';
+require_once  DIRECTORY . '/../models/watchlist.php';
+require_once  DIRECTORY . '/../middlewares/AuthenticationMiddleware.php';
+require_once DIRECTORY . '/../clients/SoapClient.php';
+
+class PremiumPageController{ 
+    private $filmModel;
+
+    private $watchListModel;
+    private $middleware;
+
+    private int $limit;
+    private int $page;
+
+    public function __construct()
+    {
+        $this->filmModel = new FilmsModel();    
+        $this->watchListModel = new WatchListModel();
+        $this->middleware = new AuthenticationMiddleware();
+        $this->page = isset($_GET['page']) && $_GET['page']>0 ? $_GET['page'] : 1;
+        $this->limit = isset($_GET['limit']) && $_GET['limit']>0 ? $_GET['limit'] : 12;
+    }
+
+    public function showPremiumPage(){
+        if ($this->middleware->isAdmin()) {
+            header("Location: /restrictAdmin");
+        } else if ($this->middleware->isAuthenticated()) {
+            require_once DIRECTORY . "/../view/user/PremiumPage.php";
+        } else {
+            header("Location: /login");
+        }
+    }
+
+    public function generatePagination(){
+        $total_records = $this->filmModel->getFilmCount();
+        if($total_records) $total_records=$total_records['count'];
+        $items_per_page = 12;
+        $current_page = $this->page;
+
+        include(DIRECTORY . "/../view/components/pagination.php");
+    }
+
+    public function generateCards(){
+        $offset = ($this->page-1)*$this->limit;
+        if (empty($films) && $this->page == 1) echo "No film currently available";
+    }
+}
\ No newline at end of file
diff --git a/src/app/controller/user/RegistrationController.php b/src/app/controller/user/RegistrationController.php
index bc5b0ddeaead096f7fdebfd5aa694ca911398d0e..af51ab4635d5b77448cb13cceeeeccaa616961fb 100644
--- a/src/app/controller/user/RegistrationController.php
+++ b/src/app/controller/user/RegistrationController.php
@@ -17,7 +17,7 @@ class RegistrationController{
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /home");
         } else {
-            require_once DIRECTORY . "/../component/user/RegistrationPage.php";
+            require_once DIRECTORY . "/../view/user/RegistrationPage.php";
         }
     }
 
diff --git a/src/app/controller/user/UserController.php b/src/app/controller/user/UserController.php
index 0af9b584d36f56fcc499656f9474e0eb5e349ab0..c03df673279ae62f4029c9d329a2516c64267d12 100644
--- a/src/app/controller/user/UserController.php
+++ b/src/app/controller/user/UserController.php
@@ -3,19 +3,27 @@
 require_once  DIRECTORY . '/../utils/database.php';
 require_once  DIRECTORY . '/../models/user.php';
 require_once DIRECTORY . '/../middlewares/AuthenticationMiddleware.php';
+require_once  DIRECTORY . '/../clients/SoapClient.php';
 
 class UserController
 {
     private $userModel;
     private $middleware;
+    private $soapClient;
+    private int $limit;
+    private int $page;
 
     public function __construct()
     {
         $this->userModel = new UserModel();
         $this->middleware = new AuthenticationMiddleware();
+        $this->soapClient = new SoapCaller();
+        $this->page = isset($_GET['page']) && $_GET['page'] > 0 ? $_GET['page'] : 1;
+        $this->limit = isset($_GET['limit']) && $_GET['limit'] > 0 ? $_GET['limit'] : 12;
     }
 
-    public function getUserByID($param){
+    public function getUserByID($param)
+    {
         return $this->userModel->getUserByID($param);
     }
 
@@ -35,6 +43,27 @@ class UserController
         }
         return $result;
     }
+
+    public function generatePagination()
+    {
+        $total_records = $this->userModel->getUserCount();
+        if ($total_records) $total_records = $total_records['count'];
+        $items_per_page = 12;
+        $current_page = $this->page;
+
+        include(DIRECTORY . "/../view/components/pagination.php");
+    }
+
+    public function generateCards()
+    {
+        $offset = ($this->page - 1) * $this->limit;
+        $users = $this->userModel->getUser($this->limit, $offset);
+        foreach ($users as $user) {
+            include(DIRECTORY . "/../view/components/cardUser.php");
+        }
+        if (empty($users) && $this->page == 1) echo "No user currently available";
+    }
+
     public function checkUsername($username)
     {
         $username = ltrim($username['username'], ':');
@@ -67,19 +96,25 @@ class UserController
     /**USER */
     public function showProfileSettingsPage($params = [])
     {
-        require_once DIRECTORY . "/../component/user/ProfileSettingsPage.php";
+        require_once DIRECTORY . "/../view/user/ProfileSettingsPage.php";
     }
 
-        public function showEditProfilePage($params = [])
+    public function showEditProfilePage($params = [])
     {
-        require_once DIRECTORY . "/../component/user/EditProfilePage.php";
+        require_once DIRECTORY . "/../view/user/EditProfilePage.php";
     }
 
     public function editProfile()
     {
         header('Content-Type: application/json');
+        if (!empty($_POST['photo_size'])) {
+            if ($_POST['photo_size'] > MAX_SIZE_PROFILE) {
+                http_response_code(413);
+                echo json_encode(["error" => "File size must be less than 800KB"]);
+                exit;
+            }
+        }
         http_response_code(200);
-    
         $existingUserData = $this->userModel->getUserById($_POST['user_id']);
         $updateData = [];
 
@@ -93,10 +128,10 @@ class UserController
         //  print_r($updateData);
         echo json_encode(["redirect_url" => "/settings/" . $_POST['user_id']]);
     }
-    
+
     private function checkAndUpdateField($newData, $existingData)
     {
-        if(empty($newData)){
+        if (empty($newData)) {
             return $existingData;
         } else {
             if (strcmp($newData, $existingData) !== 0) {
@@ -106,14 +141,45 @@ class UserController
             }
         }
     }
+
+    public function requestPremium()
+    {
+        $params = array(
+            "user_id" => $_SESSION['user_id'],
+        );
+        $callUpgrade = $this->soapClient->call("/subscription?wsdl", "request", array($params));
+        header('Content-Type: application/json');
+        if ($callUpgrade) {
+            http_response_code(200);
+            echo json_encode(["data" => "succes"]);
+        }
+    }
+
+    public function checkStatus(){
+        $params = array(
+            "user_id" => $_SESSION['user_id'],
+        );
+        $checkStatus = $this->soapClient->call("/subscription?wsdl", "checkSubscriptionStatus", array($params));
+        if (!empty($checkStatus) && isset($checkStatus->return->status)) {
+            $status = $checkStatus->return->status;
+
+            if ($status === "ACCEPTED") {
+                $this->userModel->changeToPremium($_SESSION['user_id']);
+            }
+            return $status;
+        } else {
+            return null;
+        }
+    }
     
 
+
     /**ADMIN */
     /**Manage ALL User */
     public function showManageUserPage()
     {
         if ($this->middleware->isAdmin()) {
-            require_once DIRECTORY . "/../component/user/ManageUserPage.php";
+            require_once DIRECTORY . "/../view/user/ManageUserPage.php";
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /restrict");
         } else {
@@ -122,32 +188,37 @@ class UserController
     }
 
     /**Delete User */
-    public function deleteUser(){
+    public function deleteUser()
+    {
         header('Content-Type: application/json');
         http_response_code(200);
-        
+
         $this->userModel->deleteUser($_POST['user_id']);
+        unset($_SESSION['user_id']);
         echo json_encode(["redirect_url" => "/manage-user"]);
     }
 
-    public function changeToAdmin(){
+    public function changeToAdmin()
+    {
         header('Content-Type: application/json');
         http_response_code(200);
-        
+
         $this->userModel->changeToAdmin($_POST['user_id']);
         echo json_encode(["redirect_url" => "/user-detail/" . $_POST['user_id']]);
     }
-    public function changeToUser(){
+    public function changeToUser()
+    {
         header('Content-Type: application/json');
         http_response_code(200);
-        
+
         $this->userModel->changeToUser($_POST['user_id']);
         echo json_encode(["redirect_url" => "/user-detail/" . $_POST['user_id']]);
     }
 
-    public function showUserDetailPage($params = []){
+    public function showUserDetailPage($params = [])
+    {
         if ($this->middleware->isAdmin()) {
-            require_once DIRECTORY . "/../component/user/UserDetailPage.php";
+            require_once DIRECTORY . "/../view/user/UserDetailPage.php";
         } else if ($this->middleware->isAuthenticated()) {
             header("Location: /restrict");
         } else {
diff --git a/src/app/controller/user/UserDetailController.php b/src/app/controller/user/UserDetailController.php
index d8707d9ef85923e02f6a1f3230d972f0caf6ce78..11ea92c130969c31e27e23cdc38c4f5126421a49 100644
--- a/src/app/controller/user/UserDetailController.php
+++ b/src/app/controller/user/UserDetailController.php
@@ -16,6 +16,6 @@ class UserDetailController{
     }
 
     public function showUserDetailPage($params = []){
-        require_once DIRECTORY . "/../component/user/UserDetailPage.php";
+        require_once DIRECTORY . "/../view/user/UserDetailPage.php";
     }
 }
\ No newline at end of file
diff --git a/src/app/controller/watchlist/WatchListPageController.php b/src/app/controller/watchlist/WatchListPageController.php
index 05be6029c7c3df17480581a6ec8887bd0d9f5ccd..dd7e9c561cf74f3f2126f48e86f7f1527cd71205 100644
--- a/src/app/controller/watchlist/WatchListPageController.php
+++ b/src/app/controller/watchlist/WatchListPageController.php
@@ -28,7 +28,7 @@ class WatchListPageController{
         $offset = ($this->page-1)*$this->limit;
         $lf =  $this->watchListModel->getWatchListFilms($this->userID, $this->limit, $offset);
         foreach($lf as $film){
-            include(DIRECTORY . "/../component/template/cardMovie.php");
+            include(DIRECTORY . "/../view/components/cardMovie.php");
         }
         if(empty($lf) && $this->page==1) echo "Your watchlist is empty";
     }
@@ -39,16 +39,16 @@ class WatchListPageController{
         $items_per_page = $this->limit;
         $current_page = $this->page;
 
-        include(DIRECTORY . "/../component/template/pagination.php");
+        include(DIRECTORY . "/../view/components/pagination.php");
     }
 
     public function showWatchListPage()
     {
-        // require_once DIRECTORY . "/../component/user/WatchListPage.php";
+        // require_once DIRECTORY . "/../view/user/WatchListPage.php";
         if ($this->middleware->isAdmin()) {
             header("Location: /restrictAdmin");
         } else if ($this->middleware->isAuthenticated()) {
-            require_once DIRECTORY . "/../component/user/WatchListPage.php";
+            require_once DIRECTORY . "/../view/user/WatchListPage.php";
         } else {
             header("Location: /login");
         }
diff --git a/src/app/models/films.php b/src/app/models/films.php
index 66bee728a66f1492fe59b5ac70e3ef955d142ac2..6645a691ca2616af5da93b21e150c9694e6d491c 100644
--- a/src/app/models/films.php
+++ b/src/app/models/films.php
@@ -153,4 +153,17 @@ class FilmsModel
         return $this->db->fetchAllResult();
     }
 
+    public function addLike($film_id){
+        $this->db->callQuery('UPDATE film SET likes_count = likes_count + 1 WHERE film_id = ' . $film_id);
+        $this->db->execute();
+        $this->db->callQuery('SELECT likes_count FROM film WHERE film_id = ' . $film_id);
+        return $this->db->fetchResult()['likes_count'];
+    }
+
+    public function deleteLike($film_id){
+        $this->db->callQuery('UPDATE film SET likes_count = likes_count - 1 WHERE film_id = ' . $film_id);
+        $this->db->execute();
+        $this->db->callQuery('SELECT likes_count FROM film WHERE film_id = ' . $film_id);
+        return $this->db->fetchResult()['likes_count'];
+    }
 }
diff --git a/src/app/models/genre.php b/src/app/models/genre.php
index 8050a69570d85e167a626906d6f6e91c4ab85ea9..96e0e0dfc96a373c04af348165381186467e950d 100644
--- a/src/app/models/genre.php
+++ b/src/app/models/genre.php
@@ -10,6 +10,16 @@ class GenreModel{
         $this->db = new Database;
     }
 
+    /**Get genre count */
+    public function getGenreCount(){
+        $this->db->callQuery('SELECT COUNT(*) FROM ' . $this->table);
+        return $this->db->fetchResult();   
+    }
+
+    public function getGenre($limit, $offset){
+        $this->db->callQuery("SELECT * FROM genre LIMIT $limit OFFSET $offset");
+        return $this->db->fetchAllResult();
+    }
     /**Get All Genre */
     public function getAllGenre(){
         $this->db->callQuery('SELECT * FROM ' . $this->table);
diff --git a/src/app/models/user.php b/src/app/models/user.php
index 5b8f7b09ece37c2474f2c01aa34286b9b8974673..783e6ac9edf6110b4aaa61f02a85999a703e6314 100644
--- a/src/app/models/user.php
+++ b/src/app/models/user.php
@@ -20,6 +20,18 @@ class UserModel{
         return $this->db->fetchResult();
     }
 
+    /**Get user count */
+    public function getUserCount(){
+        $this->db->callQuery('SELECT COUNT(*) FROM ' . $this->table);
+        return $this->db->fetchResult();   
+    }
+
+    /**Get user for pagination */
+    public function getUser($limit, $offset){
+        $this->db->callQuery("SELECT * FROM users LIMIT $limit OFFSET $offset");
+        return $this->db->fetchAllResult();
+    }
+
     /**Get user by username*/
     public function getUserByUsername($username){
         $this->db->callQuery("SELECT * FROM users WHERE username = '$username'");
@@ -90,5 +102,11 @@ class UserModel{
         $this->db->bind('user_id', $user_id);
         return $this->db->fetchResult();
     }
+
+    public function changeToPremium($user_id){
+        $this->db->callQuery("UPDATE users SET is_premium = TRUE WHERE user_id = :user_id");
+        $this->db->bind('user_id', $user_id);
+        $this->db->execute();
+    }
     
 }
\ No newline at end of file
diff --git a/src/app/utils/routes.php b/src/app/utils/routes.php
index 323848bcb89433d9021d0ac00dfed3d1fad1b482..be1b6d66a9e27014e1e348f4c2ba6f571b19aa2c 100644
--- a/src/app/utils/routes.php
+++ b/src/app/utils/routes.php
@@ -6,7 +6,7 @@ $route = [
     '/registration' => ["GET" => "user/RegistrationController@showRegistrationPage"],
     '/home' => ["GET" => "user/HomePageController@showHomePage"],
     '/search' => ["GET" => "search/SearchPageController@showSearchPage"],
-    '/search/search' => ["GET" => "search/SearchPageController@fetchSearchResults"],
+    '/search/film' => ["GET" => "search/SearchPageController@fetchSearchResults"],
     '/watchlist' => ["GET" => "watchlist/WatchListPageController@showWatchListPage"],
     '/watch/:id' => ["GET" => "film/FilmController@showWatchFilmPage"],
     
@@ -14,15 +14,15 @@ $route = [
     '/edit-profile/:id' => ["GET" => "user/UserController@showEditProfilePage"],
     '/update-profile' => ["POST" => "user/UserController@editProfile",],
 
-    '/register/register' => ["POST" => "user/RegistrationController@register"],
-    '/login/login' => ["POST" => "user/LoginController@login"],
+    '/auth/register' => ["POST" => "user/RegistrationController@register"],
+    '/auth/login' => ["POST" => "user/LoginController@login"],
     '/check/username/:username' => ["GET" => "user/UserController@checkUsername"],
     '/check/email/:email' => ["GET" => "user/UserController@checkEmail"],
     '/logout' => ["GET" => "user/LoginController@logout"],
     
     '/manage-user' => ["GET" => "user/UserController@showManageUserPage"],
     '/user-detail/:id' => ["GET" => "user/UserController@showUserDetailPage"],
-    '/delete-user' => ["POST" => "user/UserController@deleteUser"],
+    '/delete/user' => ["POST" => "user/UserController@deleteUser"],
     '/change-to-admin/:id' => ["POST" => "user/UserController@changeToAdmin"],
     '/change-to-user/:id' => ["POST" => "user/UserController@changeToUser"],
     
@@ -30,24 +30,31 @@ $route = [
     '/detail-film/:id' => ["GET" => "film/FilmController@showDetailFilmPage"],
     
     '/add-film' => ["GET" => "film/FilmController@showAddFilmPage"],
-    '/add-film/add-film' => ["POST" => "film/FilmController@addFilm"],
+    '/add/film' => ["POST" => "film/FilmController@addFilm"],
     '/check/filmname/:filmname' => ["GET" => "film/FilmController@checkFilmName"],
 
     '/manage-genre' => ["GET" => "film/GenreController@showManageGenrePage"],
     '/add-genre' => ["GET" => "film/GenreController@addGenrePage"],
-    '/add-genre/add-genre' => ["POST" => "film/GenreController@addGenre"],
-    '/check-genre/:genre' => ["GET" => "film/GenreController@checkGenre"],
-    '/delete-genre/:id' => ["POST" => "film/GenreController@deleteGenre"],
+    '/add/genre' => ["POST" => "film/GenreController@addGenre"],
+    '/check/genre/:genre' => ["GET" => "film/GenreController@checkGenre"],
+    '/delete/genre/:id' => ["POST" => "film/GenreController@deleteGenre"],
 
-    '/edit-film/:id' => ["GET" => "film/FilmController@showEditFilmPage"],
-    '/delete-film' => ["POST" => "film/FilmController@deleteFilm"],
-    '/update-film' => ["POST" => "film/FilmController@editFilm"],
+    '/edit/film/:id' => ["GET" => "film/FilmController@showEditFilmPage"],
+    '/delete/film' => ["POST" => "film/FilmController@deleteFilm"],
+    '/update/film' => ["POST" => "film/FilmController@editFilm"],
 
     '/page-not-found' => ["GET" => "conditional/NotFoundController@showNotFoundPage"],
     '/restrict' => ["GET" => "conditional/RestrictedController@showRestrictedPage"],
     '/restrictAdmin' => ["GET" => "conditional/RestrictedController@showAdminModePage"],
 
-    '/check-watchlist/:film_id' => ["GET" => "watchlist/WatchListPageController@isFilmOnWatchList"],
-    '/add-watchlist' => ["POST" => "watchlist/WatchListPageController@addToWatchList"],
-    '/delete-watchlist' => ["POST" => "watchlist/WatchListPageController@removeFromWatchList"],
+    '/check/watchlist/:film_id' => ["GET" => "watchlist/WatchListPageController@isFilmOnWatchList"],
+    '/add/watchlist' => ["POST" => "watchlist/WatchListPageController@addToWatchList"],
+    '/delete/watchlist' => ["POST" => "watchlist/WatchListPageController@removeFromWatchList"],
+
+    '/add/like' => ["POST" => "film/FilmController@addLike"],
+    '/delete/like' => ["POST" => "film/FilmController@deleteLike"],
+
+    '/premium-film' => ["GET" => "user/PremiumPageController@showPremiumPage"],
+    '/upgrade-premium' => ["GET" => "user/UserController@requestPremium"],
+    '/watch-prem/:id' => ["GET" => "film/FilmController@showWatchPremiumPage"]
 ];
\ No newline at end of file
diff --git a/src/app/component/template/NavbarUser.php b/src/app/view/components/NavbarUser.php
similarity index 86%
rename from src/app/component/template/NavbarUser.php
rename to src/app/view/components/NavbarUser.php
index 1d2f80dcd7d2f49c23da2bdb94ad073230631284..e7bac532cbcfeb7d4d8718b62f30a594b62f4046 100644
--- a/src/app/component/template/NavbarUser.php
+++ b/src/app/view/components/NavbarUser.php
@@ -45,6 +45,15 @@
             <a href="/home">Home</a>
             <a href="/search">Search</a>
             <a href="/watchlist">Watchlist</a>
+            <?php require_once DIRECTORY . '/../controller/user/UserController.php';
+                                                                $user = new UserController();
+                                                                if (isset($_SESSION["user_id"])) {
+                                                                    $user = $user->getUserByID($_SESSION["user_id"]);
+                                                                    if ($user["is_premium"]) {
+                                                                        echo '<a href="/premium-film">Premium</a>';
+                                                                    } 
+                                                                } ?>
+                
             <a class="hidden-link" href="/settings/<?php echo $_SESSION["user_id"] ?>">Settings</a>
             <a class="hidden-link" onCLick="logout()">Logout</a>
             <img id="photo-profile" class="photo-profile" src="<?php
diff --git a/src/app/component/template/cardGenre.php b/src/app/view/components/cardGenre.php
similarity index 100%
rename from src/app/component/template/cardGenre.php
rename to src/app/view/components/cardGenre.php
diff --git a/src/app/component/template/cardMovie.php b/src/app/view/components/cardMovie.php
similarity index 100%
rename from src/app/component/template/cardMovie.php
rename to src/app/view/components/cardMovie.php
diff --git a/src/app/component/template/cardUser.php b/src/app/view/components/cardUser.php
similarity index 58%
rename from src/app/component/template/cardUser.php
rename to src/app/view/components/cardUser.php
index f35a6b957a52d2dcbe4befb97936322aed166b7e..e065f80451dfd8aa3c2f58128a5dcd70caa7b32d 100644
--- a/src/app/component/template/cardUser.php
+++ b/src/app/view/components/cardUser.php
@@ -5,8 +5,12 @@
             <img src="<?php echo "/storage/profile/" . $user['photo_profile']?>" alt="Profile Picture" />
         </div>
         <div class="text-div">
-            <h3 class="text-white"><?php echo $user["name"]; ?></h3>
-            <p class="text-white"><?php echo $user["role"]; ?></p>
+            <h3 class="text-white"><?php echo $user["first_name"] . " " . $user["last_name"]; ?></h3>
+            <p class="text-white"><?php if($user["is_admin"]) {
+                echo "Admin";
+            } else {
+                echo "User";
+            } ?></p>
         </div>
         </div>
     </div>
diff --git a/src/app/component/template/confirmationModal.php b/src/app/view/components/confirmationModal.php
similarity index 100%
rename from src/app/component/template/confirmationModal.php
rename to src/app/view/components/confirmationModal.php
diff --git a/src/app/view/components/loading.php b/src/app/view/components/loading.php
new file mode 100644
index 0000000000000000000000000000000000000000..9a8295c3d4a3dae8ab2e3e7c0fbfaabbb2f750e8
--- /dev/null
+++ b/src/app/view/components/loading.php
@@ -0,0 +1,7 @@
+<div class="loader-container">
+      <div class="">
+        <div class="spinner">
+        </div>
+        <div>Loading...</div>
+      </div>
+    </div>
\ No newline at end of file
diff --git a/src/app/component/template/pagination.php b/src/app/view/components/pagination.php
similarity index 78%
rename from src/app/component/template/pagination.php
rename to src/app/view/components/pagination.php
index cf505594a356f969cc1305000f4b136ed7ac47d2..aa95abe42ad7c6a388c6d935dfae95304b477c19 100644
--- a/src/app/component/template/pagination.php
+++ b/src/app/view/components/pagination.php
@@ -17,17 +17,17 @@
         if($current_page!=1){
             $target = '<';
             $is_active = false;
-            include (DIRECTORY . "/../component/template/paginationButton.php");
+            include (DIRECTORY . "/../view/components/paginationButton.php");
         }
         for($i=$start; $i<=$bound; $i++){
             $target = $i;
             $is_active=false;
             if($target==$current_page) $is_active=true;
-            include(DIRECTORY . "/../component/template/paginationButton.php");
+            include(DIRECTORY . "/../view/components/paginationButton.php");
         }
         if($current_page!=$totalpages && $total_records>0){
             $target = '>';
             $is_active = false;
-            include (DIRECTORY . "/../component/template/paginationButton.php");
+            include (DIRECTORY . "/../view/components/paginationButton.php");
         }?>
 </div>
\ No newline at end of file
diff --git a/src/app/component/template/paginationButton.php b/src/app/view/components/paginationButton.php
similarity index 100%
rename from src/app/component/template/paginationButton.php
rename to src/app/view/components/paginationButton.php
diff --git a/src/app/component/template/toast.php b/src/app/view/components/toast.php
similarity index 100%
rename from src/app/component/template/toast.php
rename to src/app/view/components/toast.php
diff --git a/src/app/component/conditional/Admin.php b/src/app/view/conditional/Admin.php
similarity index 80%
rename from src/app/component/conditional/Admin.php
rename to src/app/view/conditional/Admin.php
index d55b14d15c348a2bd8e9f62b0a793903fe4cb795..898d198e0e32ff07b45d0c651f77c1f478adcdc4 100644
--- a/src/app/component/conditional/Admin.php
+++ b/src/app/view/conditional/Admin.php
@@ -9,8 +9,8 @@
         <!---Icon--->
         <link rel="icon" href="images/icon/logo.ico">
         <!---Global CSS--->
-        <link rel="stylesheet" type="text/css" href="styles/template/globals.css">
-        <link rel="stylesheet" type="text/css"href="styles/template/Navbar.css">
+        <link rel="stylesheet" type="text/css" href="styles/components/globals.css">
+        <link rel="stylesheet" type="text/css"href="styles/components/Navbar.css">
         <!---Page specify CSS--->
         <link rel="stylesheet" type="text/css"href="styles/not-found/notFound.css">
 </head>
diff --git a/src/app/component/conditional/NotFound.php b/src/app/view/conditional/NotFound.php
similarity index 88%
rename from src/app/component/conditional/NotFound.php
rename to src/app/view/conditional/NotFound.php
index b0746281a3951c88fb98c47b76fc6baa6a21990b..0fde3c2ec08a41644d7a37f035205665e6ec75b8 100644
--- a/src/app/component/conditional/NotFound.php
+++ b/src/app/view/conditional/NotFound.php
@@ -9,8 +9,8 @@
     <!---Icon--->
     <link rel="icon" href="images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="styles/template/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/Navbar.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="styles/not-found/notFound.css">
 </head>
diff --git a/src/app/component/conditional/Restricted.php b/src/app/view/conditional/Restricted.php
similarity index 80%
rename from src/app/component/conditional/Restricted.php
rename to src/app/view/conditional/Restricted.php
index d7024779a7aa21aaed090466e969949052850d1a..6241c80cb9a114279d9b0494c42b8041cffcca0b 100644
--- a/src/app/component/conditional/Restricted.php
+++ b/src/app/view/conditional/Restricted.php
@@ -9,8 +9,8 @@
         <!---Icon--->
         <link rel="icon" href="images/icon/logo.ico">
         <!---Global CSS--->
-        <link rel="stylesheet" type="text/css" href="styles/template/globals.css">
-        <link rel="stylesheet" type="text/css"href="styles/template/Navbar.css">
+        <link rel="stylesheet" type="text/css" href="styles/components/globals.css">
+        <link rel="stylesheet" type="text/css"href="styles/components/Navbar.css">
         <!---Page specify CSS--->
         <link rel="stylesheet" type="text/css"href="styles/not-found/notFound.css">
 </head>
diff --git a/src/app/component/film/AddFilmPage.php b/src/app/view/film/AddFilmPage.php
similarity index 91%
rename from src/app/component/film/AddFilmPage.php
rename to src/app/view/film/AddFilmPage.php
index f27080359a46b761330d24392f9cf7a71886a6af..f391ff9163fc083ddd03c68bb9404ca90cb40389 100644
--- a/src/app/component/film/AddFilmPage.php
+++ b/src/app/view/film/AddFilmPage.php
@@ -9,18 +9,18 @@
     <!---Icon--->
     <link rel="icon" href="images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/Navbar.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/cardMovie.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/confirmationModal.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/cardMovie.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/confirmationModal.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="styles/film/addFilm.css">
     <script src="/javascript/film/addFilm.js" defer></script>
 </head>
 
 <body>
-    <?php include(DIRECTORY . "/../component/template/NavbarUser.php");
+    <?php include(DIRECTORY . "/../view/components/NavbarUser.php");
     require_once DIRECTORY . '/../utils/duration.php';
     $minutes = listofMinutes();
     $hours = listofHour();
@@ -59,7 +59,7 @@
                                         <label class="check-container" for="genre_<?php echo $row['genre_id']; ?>"><?php echo $row['name']; ?>
                                             <input type="checkbox" id="genre_<?php echo $row['genre_id']; ?>" name="filmGenre[]" value="<?php echo $row['genre_id']; ?>">
                                             <span class="checkmark"></span>
-    
+
                                         </label>
                                     <?php } ?>
                                 </div>
@@ -111,6 +111,7 @@
                             <div>
 
                                 <h3>Film Poster<span class="req">*</span></h3>
+                                <p class="text-warning">File size must be below 800KB</p>
                                 <input type="file" id="filmPoster" name="filmPoster" accept="image/*" class="inputFile" required />
                                 <label for="filmPoster" class="file-style">
                                     <div class="centered">
@@ -126,11 +127,13 @@
                                     </div>
                                 </label>
                                 <div class="file-name" id="display-filePoster-name"></div>
+                                <div class="error" id="film-poster-alert"></div>
                             </div>
 
                             <!--Film Video-->
                             <div>
                                 <h3>Film Video<span class="req">*</span></h3>
+                                <p class="text-warning">File size must be below 10MB</p>
                                 <input type="file" id="filmVideo" name="filmVideo" accept="video/*" required />
                                 <label for="filmVideo" class="file-style">
                                     <div class="centered">
@@ -146,9 +149,11 @@
                                     </div>
                                 </label>
                                 <div class="file-name" id="display-fileVideo-name"></div>
+                                <div class="error" id="film-video-alert"></div>
                             </div>
                             <div>
                                 <h3>Film Header<span class="req">*</span></h3>
+                                <p class="text-warning">File size must be below 800KB</p>
                                 <input type="file" id="filmHeader" name="filmHeader" accept="image/*" required />
                                 <label for="filmHeader" class="file-style">
                                     <div class="centered">
@@ -164,6 +169,7 @@
                                     </div>
                                 </label>
                                 <div class="file-name" id="display-fileHeader-name"></div>
+                                <div class="error" id="film-header-alert"></div>
                             </div>
                         </div>
                         <div class="button-container">
@@ -182,7 +188,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <button id="saveButton" class="button-white button-text" onclick="succes()" aria-label="Saving Add Film">Save</button>
+                            <button id="saveButton" class="button-white button-text" aria-label="Saving Add Film">Save</button>
                         </div>
                     </div>
                 </form>
@@ -191,7 +197,7 @@
     </div>
     <script>
     </script>
-    <?php include(DIRECTORY . "/../component/template/toast.php"); ?>
+    <?php include(DIRECTORY . "/../view/components/toast.php"); ?>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/app/component/film/AddGenrePage.php b/src/app/view/film/AddGenrePage.php
similarity index 76%
rename from src/app/component/film/AddGenrePage.php
rename to src/app/view/film/AddGenrePage.php
index a718823652de6403a29566eed34d41dd2f0e8659..0b448e7a7ab1377667f189e94697476a2f66a1ac 100644
--- a/src/app/component/film/AddGenrePage.php
+++ b/src/app/view/film/AddGenrePage.php
@@ -9,16 +9,16 @@
     <!---Icon--->
     <link rel="icon" href="images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="styles/template/Navbar.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="styles/film/addGenre.css">
     <script src="/javascript/film/addGenre.js" defer></script>
 </head>
 
 <body>
-    <?php include(DIRECTORY. "/../component/template/NavbarUser.php");
+    <?php include(DIRECTORY. "/../view/components/NavbarUser.php");
     ?>
     <div class='container'>
         <h2>Add Genre</h2>
@@ -39,7 +39,7 @@
     </div>
     <script>
     </script>
-    <?php include(DIRECTORY. "/../component/template/toast.php"); ?>
+    <?php include(DIRECTORY. "/../view/components/toast.php"); ?>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/app/component/film/DetailFilmPage.php b/src/app/view/film/DetailFilmPage.php
similarity index 87%
rename from src/app/component/film/DetailFilmPage.php
rename to src/app/view/film/DetailFilmPage.php
index 53e6b1a3d58621e888d0183b91a5c25192ac706d..959c144ebc88e4d22ef9e1a4b21cd94cc4c13745 100644
--- a/src/app/component/film/DetailFilmPage.php
+++ b/src/app/view/film/DetailFilmPage.php
@@ -9,17 +9,17 @@
     <!---Icon--->
     <link rel="icon" href="/images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/Navbar.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/confirmationModal.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/confirmationModal.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="/styles/film/detailFilm.css">
     <script type="text/javascript" src="/javascript/film/deleteFilm.js" defer></script>
-    <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
 </head>
 
 <body>
-    <?php include(DIRECTORY. "/../component/template/NavbarUser.php"); ?>
+    <?php include(DIRECTORY. "/../view/components/NavbarUser.php"); ?>
     <?php
 
     $filmID = $params['id'];
@@ -38,7 +38,7 @@
     <div id="" class='container'>
         <?php
         if ($totalRow == 0) {
-            require_once DIRECTORY . '/../component/conditional/NotFound.php';
+            require_once DIRECTORY . '/../view/conditional/NotFound.php';
             exit;
         } else {
         ?>
@@ -92,7 +92,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <a href="/edit-film/<?php echo $filmID; ?>">
+                            <a href="/edit/film/<?php echo $filmID; ?>">
                                 <button class="button-white button-text">Edit</button>
                             </a>
                         </div>
@@ -104,7 +104,7 @@
         ?>
         
     </div>
-    <?php include(DIRECTORY. "/../component/template/toast.php"); ?>
+    <?php include(DIRECTORY. "/../view/components/toast.php"); ?>
 </body>
 
 
diff --git a/src/app/component/film/EditFilmPage.php b/src/app/view/film/EditFilmPage.php
similarity index 93%
rename from src/app/component/film/EditFilmPage.php
rename to src/app/view/film/EditFilmPage.php
index 444e5d80f5d2bbf3248316044eaacfa7e84cf6d9..47187cdbdd0023eb8813260e4c348aa23518116b 100644
--- a/src/app/component/film/EditFilmPage.php
+++ b/src/app/view/film/EditFilmPage.php
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+a<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -9,17 +9,17 @@
     <!---Icon--->
     <link rel="icon" href="/images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/Navbar.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/confirmationModal.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/confirmationModal.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="/styles/film/editFilm.css">
 </head>
 
 <body>
     <?php
-    include(DIRECTORY . "/../component/template/NavbarUser.php");
+    include(DIRECTORY . "/../view/components/NavbarUser.php");
     require_once DIRECTORY . '/../utils/duration.php';
     $hours = listofHour();
     $minutes = listofMinutes();
@@ -41,7 +41,7 @@
     <div class='container'>
         <?php
         if ($totalRow == 0) {
-            require_once DIRECTORY . '/../component/conditional/NotFound.php';
+            require_once DIRECTORY . '/../view/conditional/NotFound.php';
             exit;
         } else {
         ?>
@@ -140,6 +140,7 @@
                                         </div>
                                     </label>
                                     <div class="file-name" id="display-filePoster-name"></div>
+                                    <div class="error" id="film-poster-alert"></div>
                                 </div>
 
                                 <!--Film Video-->
@@ -160,6 +161,7 @@
                                         </div>
                                     </label>
                                     <div class="file-name" id="display-fileVideo-name"></div>
+                                    <div class="error" id="film-video-alert"></div>
                                 </div>
                                 <div>
                                     <h3>Film Header</h3>
@@ -178,6 +180,7 @@
                                         </div>
                                     </label>
                                     <div class="file-name" id="display-fileHeader-name"></div>
+                                    <div class="error" id="film-header-alert"></div>
                                 </div>
                             </div>
                             <div class="button-container">
@@ -196,7 +199,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <button id="saveButton" class="button-white button-text" onclick="succes()" aria-label="Save Edit Film">Save</button>
+                                <button id="saveButton" class="button-white button-text" aria-label="Save Edit Film">Save</button>
                             </div>
                         </div>
                     </form>
@@ -210,7 +213,7 @@
         var filmID = <?php echo json_encode($filmID); ?>;
     </script>
     <script src="/javascript/film/editFilm.js" defer></script>
-    <?php include(DIRECTORY . "/../component/template/toast.php"); ?>
+    <?php include(DIRECTORY . "/../view/components/toast.php"); ?>
 </body>
 
 
diff --git a/src/app/component/film/ManageFilmPage.php b/src/app/view/film/ManageFilmPage.php
similarity index 58%
rename from src/app/component/film/ManageFilmPage.php
rename to src/app/view/film/ManageFilmPage.php
index 0554edc1332b1087083f4bd49308ad726dade968..f9652e2d5ed0b6daa4d9329c57084ca3e195bffc 100644
--- a/src/app/component/film/ManageFilmPage.php
+++ b/src/app/view/film/ManageFilmPage.php
@@ -9,16 +9,17 @@
     <!---Icon--->
     <link rel="icon" href="images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/Navbar.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/cardMovie.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/cardMovie.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/pagination.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="/styles/film/manageFilm.css">
     <link rel="stylesheet" type="text/css" href="styles/user/search.css">
 </head>
 
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php"); ?>
+    <?php include(DIRECTORY . "/../view/components/NavbarUser.php"); ?>
     <?php
     require_once DIRECTORY . '/../controller/film/FilmController.php';
     $film = new FilmController();
@@ -31,10 +32,13 @@
                 <button class="button-white button-text">Add New Movie</button>
             </a>
         </div>
-        <div class="cards">
-            <?php foreach ($result as $film) {
-                include(DIRECTORY . "/../component/template/cardMovie.php");
-            } ?>
+        <div class="body">
+            <div class="cards">
+                <?php $film->generateCards() ?>
+            </div>
+            <div class="pagination">
+                <?php $film->generatePagination() ?>
+            </div>
         </div>
     </div>
 </body>
diff --git a/src/app/view/film/ManageGenrePage.php b/src/app/view/film/ManageGenrePage.php
new file mode 100644
index 0000000000000000000000000000000000000000..3cf141292cf49de1330b66e960dab40175a5dbf7
--- /dev/null
+++ b/src/app/view/film/ManageGenrePage.php
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!---Title--->
+    <title>Notflix</title>
+    <!---Icon--->
+    <link rel="icon" href="images/icon/logo.ico">
+    <!---Global CSS--->
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/Navbar.css">
+    <!---Page specify CSS--->
+    <link rel="stylesheet" type="text/css" href="/styles/film/manageGenre.css">
+    <link rel="stylesheet" type="text/css" href="/styles/film/cardGenre.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/pagination.css">
+
+    <script type="text/javascript" src="/javascript/film/deleteGenre.js" defer></script>
+</head>
+
+<body>
+    <?php include(DIRECTORY . "/../view/components/NavbarUser.php"); ?>
+    <?php
+    require_once DIRECTORY . '/../controller/film/GenreController.php';
+    $genre = new GenreController();
+    $result = $genre->getAllGenre();
+    ?>
+    <div class='container'>
+        <div class='upper-container'>
+            <div class="container-1">
+                <h2>Genre</h2>
+                <div class="">
+                    <a href='/add-genre'>
+                        <button class="button-white button-text">Add New Genre</button>
+                    </a>
+                </div>
+            </div>
+            <div class="container-2">
+                <div class="body">
+                    <div class="cards">
+                        <?php $genre->generateCards() ?>
+                    </div>
+                    <div class="pagination">
+                        <?php $genre->generatePagination() ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <?php include(DIRECTORY . "/../view/components/toast.php"); ?>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/app/component/film/WatchFilmPage.php b/src/app/view/film/WatchFilmPage.php
similarity index 83%
rename from src/app/component/film/WatchFilmPage.php
rename to src/app/view/film/WatchFilmPage.php
index b3062a766928d1e9f428b24b979b0952fe1b82d6..38d6595a3b9787bb95b74e00685ca206432cf5b1 100644
--- a/src/app/component/film/WatchFilmPage.php
+++ b/src/app/view/film/WatchFilmPage.php
@@ -9,15 +9,15 @@
     <!---Icon--->
     <link rel="icon" href="images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/navbar.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="/styles/film/watchFilm.css">
     <script type="text/javascript" src="/javascript/film/watchFilm.js" defer></script>
 </head>
 
 <body>
-    <?php include(DIRECTORY. "/../component/template/NavbarUser.php"); ?>
+    <?php include(DIRECTORY. "/../view/components/NavbarUser.php"); ?>
     <?php
     $filmID = $params['id'];
     /**IF someone tries to access URL */
@@ -35,7 +35,7 @@
     $startTime = isset($_COOKIE['lastPlayedTime/'.$filmID]) ? $_COOKIE['lastPlayedTime/'.$filmID] : 0;
 
     if ($totalRow == 0) {
-        require_once  DIRECTORY. '/../component/conditional/NotFound.php';
+        require_once  DIRECTORY. '/../view/conditional/NotFound.php';
         exit;
     } else {
     ?>
@@ -46,7 +46,10 @@
     <section>
         <header>
             <h1><?php echo htmlspecialchars($filmData['title']); ?></h1>
-            <?php $filmController->generateWatchlistButton($filmID)?>
+            <div class="heartcontainer">
+                <?php $filmController->generateLikesButton($filmID)?>
+                <?php $filmController->generateWatchlistButton($filmID)?>
+            </div>
         </header>
         <video controls id='video-player' >
             <?php $filmController->generateFilm($filmData['film_path'], $startTime); ?>
diff --git a/src/app/view/film/WatchPremiumPage.php b/src/app/view/film/WatchPremiumPage.php
new file mode 100644
index 0000000000000000000000000000000000000000..47c5f8a39a2bf6d85e6041f687d3d6ab809b0784
--- /dev/null
+++ b/src/app/view/film/WatchPremiumPage.php
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!---Title--->
+    <title>Notflix</title>
+    <!---Icon--->
+    <link rel="icon" href="images/icon/logo.ico">
+    <!---Global CSS--->
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/navbar.css">
+    <!---Page specify CSS--->
+    <link rel="stylesheet" type="text/css" href="/styles/film/watchFilm.css">
+    <script type="text/javascript" src="/javascript/film/watchPrem.js" defer></script>
+</head>
+
+<body>
+    <script type="text/javascript" defer>
+        const PHP_REST_URL = "<?php echo REST_URL;?>";
+    </script>
+    <?php include(DIRECTORY. "/../view/components/NavbarUser.php"); ?>
+    <section>
+        <header>
+            <h1 id="title-in"></h1>
+        </header>
+        <video controls id='video-player'>
+         <!-- <source src='../storage/film/film2.mp4'  type='video/mp4'/> -->
+        </video>
+        <div id='details'>
+            <div id='description' class='film-detail'>
+                <h2>Description</h2>
+                <p id="description-in"></p>
+            </div>
+            <div id='release' class='film-detail'>
+                <h2>Release</h2>
+                <p id="release-in"></p>
+            </div>
+            <div id='duration' class='film-detail'>
+                <h2>Duration</h2>
+                <p id="duration-in"></p>
+            </div>
+            <div id='genre' class='film-detail'>
+                <h2>Genre</h2>
+                <p id='genre-in'></p>
+            </div>
+        </div>
+    </section>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/app/component/user/EditProfilePage.php b/src/app/view/user/EditProfilePage.php
similarity index 89%
rename from src/app/component/user/EditProfilePage.php
rename to src/app/view/user/EditProfilePage.php
index 8365b53e7b1031ee077e5c18795aa5ce330fa793..88f00b5a7ca4b410472ce3d23db982b004c4c1d3 100644
--- a/src/app/component/user/EditProfilePage.php
+++ b/src/app/view/user/EditProfilePage.php
@@ -9,16 +9,16 @@
     <!---Icon--->
     <link rel="icon" href="/images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/Navbar.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/confirmationModal.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/confirmationModal.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="/styles/user/editprofile.css">
 </head>
 
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php"); ?>
+    <?php include (DIRECTORY. "/../view/components/NavbarUser.php"); ?>
     <?php
     require_once DIRECTORY . '/../controller/user/UserController.php';
     $id = $params["id"];
@@ -29,7 +29,7 @@
     $totalRow = count($userData);
 
     if ($totalRow == 0) {
-        require_once  DIRECTORY . '/../component/conditional/NotFound.php';
+        require_once  DIRECTORY . '/../view/conditional/NotFound.php';
         exit;
     } else {
     ?>
@@ -77,6 +77,7 @@
                                 </div>
                                 <div>
                                     <p>Profile Photo</p>
+                                    <p class="text-red">File size must be less than 800KB</p>
                                     <input type="file" id="photoProfile" name="photoProfile" accept="image/*" class="inputFile"/>
                                     <label for="photoProfile" class="file-style">
                                         <div class="centered">
@@ -91,6 +92,7 @@
                                             <p class="button-text">Upload Profile Photo</p>
                                         </div>
                                     </label>
+                                    <div class="error" id="error-upload"></div>
                                     <div class="file-name" id="display-file-name"></div>
                                 </div>
                                 <div class="btn-contain">
@@ -111,7 +113,7 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <button id="saveButton" class="button-white button-text" onclick="succes()">Save</button>
+                                    <button id="saveButton" class="button-white button-text">Save</button>
                                 </div>
                         </form>
                     </div>
@@ -125,7 +127,7 @@
         var userID = <?php echo json_encode($id); ?>;
     </script>
     <script type="text/javascript" src="/javascript/user/editProfile.js" defer></script>
-    <?php include(DIRECTORY. "/../component/template/toast.php"); ?>
+    <?php include(DIRECTORY. "/../view/components/toast.php"); ?>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/app/component/user/HomePage.php b/src/app/view/user/HomePage.php
similarity index 79%
rename from src/app/component/user/HomePage.php
rename to src/app/view/user/HomePage.php
index e9bd197d0c7f836b4ff08ea9e8b4198f73e126c9..1b23b87c64c5825934c8fc61aeb771f6480bc82f 100644
--- a/src/app/component/user/HomePage.php
+++ b/src/app/view/user/HomePage.php
@@ -8,22 +8,25 @@
     <!---Icon--->
     <link rel="icon" href="images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/navbar.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/cardMovie.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/pagination.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/cardMovie.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/pagination.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/loading.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="/styles/user/homepage.css">
     <!-- JS --->
     <script type="text/javascript" src="/javascript/user/home.js" defer></script>
 </head>
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php"); ?>
+    <?php include (DIRECTORY. "/../view/components/NavbarUser.php"); ?>
+    <?php include(DIRECTORY . "/../view/components/loading.php"); ?>
     <?php
         require_once DIRECTORY . '/../controller/user/HomePageController.php';
         $home = new HomePageController();
         $film_count = $home->filmCount();
+        // $home->getAllPremiumFilm();
         if ($film_count == 0) {?>
             <div class="img-header"></div>
             <div class="body">
@@ -69,7 +72,7 @@
                 </div>
             </div>
         <?php }?>
-        <?php include(DIRECTORY. "/../component/template/toast.php"); ?>
+        <?php include(DIRECTORY. "/../view/components/toast.php"); ?>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/app/component/user/LoginPage.php b/src/app/view/user/LoginPage.php
similarity index 50%
rename from src/app/component/user/LoginPage.php
rename to src/app/view/user/LoginPage.php
index 6fd95533ff6a1c011b31de1983cd9bb42ff624dc..a5835a8f3ab35d06424c2fa3a3d4f6fe11fe2d6d 100644
--- a/src/app/component/user/LoginPage.php
+++ b/src/app/view/user/LoginPage.php
@@ -4,40 +4,43 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <!---Title--->
-        <title>Login</title>
-        <!---Icon--->
-        <link rel="icon" href="images/icon/logo.ico">
-        <!---Global CSS--->
-        <link rel="stylesheet" type="text/css" href="styles/template/globals.css">
-        <link rel="stylesheet" type="text/css"href="styles/template/navbar.css">
-        <!---Page specify CSS--->
-        <link rel="stylesheet" type="text/css" href="styles/user/login.css">
-        <!--JS-->
-        <script type="text/javascript" src="javascript/user/login.js" defer></script>
-        <script type="text/javascript" defer>
-            let CSRF_TOKEN = "<?= $_SESSION['csrf_token'] ?? '' ?>";
-        </script>
+    <!---Title--->
+    <title>Login</title>
+    <!---Icon--->
+    <link rel="icon" href="images/icon/logo.ico">
+    <!---Global CSS--->
+    <link rel="stylesheet" type="text/css" href="styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/navbar.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/loading.css">
+    <!---Page specify CSS--->
+    <link rel="stylesheet" type="text/css" href="styles/user/login.css">
+    <!--JS-->
+    <script type="text/javascript" src="javascript/user/login.js" defer></script>
+    <script type="text/javascript" defer>
+        let CSRF_TOKEN = "<?= $_SESSION['csrf_token'] ?? '' ?>";
+    </script>
 </head>
 
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php");?>
+    <?php include(DIRECTORY . "/../view/components/NavbarUser.php"); ?>
+    <?php include(DIRECTORY . "/../view/components/loading.php"); ?>
     <div class="auth-page">
         <h1>Login</h1>
         <form id="login-form">
             <div class="container">
                 <label for="username">Username<span class="req">*</span></label>
-                <input type="text" name="username" id="username" required/>
-    
+                <input type="text" name="username" id="username" required />
+
                 <label for="password">Password<span class="req">*</span></label>
-                <input type="password" name="password" id="password" required/>
+                <input type="password" name="password" id="password" required />
                 <div class="error login" id="login-alert"></div>
 
                 <div class="submit">
                     <button class="button-red red-glow button-text" type="submit" name="login">Login</button>
                 </div>
             </div>
-            <div class="small-text">Already have an account? <a href="/registration">Register</a></p></div>
+            <div class="small-text">Already have an account? <a href="/registration">Register</a></p>
+            </div>
         </form>
     </div>
 </body>
diff --git a/src/app/component/user/ManageUserPage.php b/src/app/view/user/ManageUserPage.php
similarity index 50%
rename from src/app/component/user/ManageUserPage.php
rename to src/app/view/user/ManageUserPage.php
index 4f4b27769f34118b94a6e12bca6809c3d0ad1fe1..220fedc7e8a591378e3a7b90c14e17c45edbb24a 100644
--- a/src/app/component/user/ManageUserPage.php
+++ b/src/app/view/user/ManageUserPage.php
@@ -9,31 +9,33 @@
     <!-- Icon -->
     <link rel="icon" href="images/icon/logo.ico">
     <!-- Global CSS -->
-    <link rel="stylesheet" type="text/css" href="styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="styles/template/Navbar.css">
-    <link rel="stylesheet" type="text/css" href="styles/template/cardUser.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/cardUser.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/pagination.css">
     <!-- Page-specific CSS -->
     <link rel="stylesheet" type="text/css" href="styles/admin/manageUser.css">
     <!-- Include the external JavaScript file -->
 </head>
 
 <body>
-<?php include (DIRECTORY. "/../component/template/NavbarUser.php"); ?>
+    <?php include(DIRECTORY . "/../view/components/NavbarUser.php"); ?>
     <?php
     require_once DIRECTORY . '/../controller/user/UserController.php';
     $user = new UserController();
     $id = $_SESSION["user_id"];
-    $result = $user->getAllUser();
     ?>
     <div class="container">
-    <h2>Users</h2>
-        <div class="cards">
-        <?php foreach ($result as $user) {
-            if($user['user_id'] != $id) {
-                include(DIRECTORY . "/../component/template/cardUser.php");
-            }
-        } ?>
+        <h2>Users</h2>
+        <div class="body">
+            <div class="cards">
+                <?php $user->generateCards() ?>
+            </div>
+            <div class="pagination">
+                <?php $user->generatePagination() ?>
+            </div>
         </div>
     </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/src/app/view/user/PremiumPage.php b/src/app/view/user/PremiumPage.php
new file mode 100644
index 0000000000000000000000000000000000000000..13631269d82dfc81fb1612ffcc4d90ac036e1771
--- /dev/null
+++ b/src/app/view/user/PremiumPage.php
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!---Title--->
+    <title>Notflix</title>
+    <!---Icon--->
+    <link rel="icon" href="images/icon/logo.ico">
+    <!---Global CSS--->
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/cardMovie.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/pagination.css">
+    <link rel="stylesheet" type="text/css" href="styles/components/loading.css">
+    <!---Page specify CSS--->
+    <link rel="stylesheet" type="text/css" href="/styles/user/premium.css">
+    <!-- JS --->
+    <script type="text/javascript" src="/javascript/user/premiumFilm.js" defer></script>
+</head>
+<body>
+    <script type="text/javascript" defer>
+        const PHP_REST_URL = "<?php echo REST_URL;?>";
+    </script>
+    <?php include (DIRECTORY. "/../view/components/NavbarUser.php"); ?>
+    <?php include(DIRECTORY . "/../view/components/loading.php"); ?>
+    <section>
+        <header>
+            <h1>Premium Film</h1>
+        </header>
+        <div id='result-container' class="cards">
+        </div>
+        <div id='pagination-container' class='pagination'>
+        </div>
+    </section>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/app/component/user/ProfilePage.php b/src/app/view/user/ProfilePage.php
similarity index 100%
rename from src/app/component/user/ProfilePage.php
rename to src/app/view/user/ProfilePage.php
diff --git a/src/app/component/user/ProfileSettingsPage.php b/src/app/view/user/ProfileSettingsPage.php
similarity index 60%
rename from src/app/component/user/ProfileSettingsPage.php
rename to src/app/view/user/ProfileSettingsPage.php
index 12417b8dd4557f592380005f6d81f132d957b8a3..eab8ab9133f57e43d8717e8237595ee1bcfdbf83 100644
--- a/src/app/component/user/ProfileSettingsPage.php
+++ b/src/app/view/user/ProfileSettingsPage.php
@@ -9,26 +9,26 @@
     <!---Icon--->
     <link rel="icon" href="/images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/Navbar.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="/styles/user/profilesetting.css">
+    <!---JS--->
+    <script src="/javascript/user/profileSettings.js" defer></script>
 </head>
 
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php"); ?>
+    <?php include (DIRECTORY. "/../view/components/NavbarUser.php"); ?>
     <?php
     require_once DIRECTORY . '/../controller/user/UserController.php';
 
-    
     $id = $params["id"];
     /**IF someone tries to access URL */
     $userDetail = new UserController();
     $userData = $userDetail->getUserByID($id);
     $totalRow = count($userData);
-
     if ($totalRow == 0) {
-        require_once  DIRECTORY . '/../component/conditional/NotFound.php';
+        require_once  DIRECTORY . '/../view/conditional/NotFound.php';
         exit;
     } else {
     ?>
@@ -40,12 +40,34 @@
                 <div class="whole-container">
                     <div class="profile">
                         <img src="<?php
-                                    if ($user["photo_profile"] == null) {
+                                    if ($userData["photo_profile"] == null) {
                                         echo "/images/assets/profile-placeholder.png";
                                     } else {
-                                        echo "/storage/profile/" . $user["photo_profile"];
+                                        echo "/storage/profile/" . $userData["photo_profile"];
                                     }
                                     ?>" alt="Profile Picture" />
+                        <div class="upgrade">
+                            
+                        <?php 
+                                $status = $userDetail->checkStatus();
+                                if (!($status == null)) {
+                                    if($status === "PENDING"){
+                                        echo '<div class="pending">' . $status . '</div>';
+                                    } else if ($status === "ACCEPTED"){
+                                        echo '<h3>Premium</h3>';
+                                    } else if($status === "REJECTED"){
+                                        echo '<div class="rejected">' . $status . '</div>';
+                                    }
+                                } else {
+                                    if (!$userData["is_premium"]) {
+                                        echo '<button id="upgradeButton" class="button-white button-text" onclick="upgradeButtonClick()">Upgrade</button>';
+                                    } else {
+                                        echo '<h3>Premium User</h3>';
+                                    }
+                                }
+                                ?>
+
+                        </div>
                     </div>
 
                     <div class="detail-container">
@@ -81,4 +103,4 @@
     ?>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/app/component/user/RegistrationPage.php b/src/app/view/user/RegistrationPage.php
similarity index 88%
rename from src/app/component/user/RegistrationPage.php
rename to src/app/view/user/RegistrationPage.php
index 9e92b57005947f7e19993acbaaaf8d424cc0ae80..1192adeeb7888c0964d558d325eb1271b4e01528 100644
--- a/src/app/component/user/RegistrationPage.php
+++ b/src/app/view/user/RegistrationPage.php
@@ -9,9 +9,9 @@
         <!---Icon--->
         <link rel="icon" href="images/icon/logo.ico">
         <!---Global CSS--->
-        <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-        <link rel="stylesheet" type="text/css"href="/styles/template/navbar.css">
-        <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
+        <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+        <link rel="stylesheet" type="text/css"href="/styles/components/navbar.css">
+        <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
         <!---Page specify CSS--->
         <link rel="stylesheet" type="text/css" href="/styles/user/login.css">
         <!---JS--->
@@ -19,7 +19,7 @@
 </head>
 
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php");?>
+    <?php include (DIRECTORY. "/../view/components/NavbarUser.php");?>
     <div class="auth-page">
         <h1>Sign Up</h1>
         <form id="registration-form">
@@ -64,7 +64,7 @@
         </form>
         <div class="small-text">Already have an account? <a href="/login">Login</a></div>
     </div>
-    <?php include(DIRECTORY. "/../component/template/toast.php"); ?>
+    <?php include(DIRECTORY. "/../view/components/toast.php"); ?>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/app/component/user/SearchPage.php b/src/app/view/user/SearchPage.php
similarity index 85%
rename from src/app/component/user/SearchPage.php
rename to src/app/view/user/SearchPage.php
index 4afc32f356214cc318cf5b4a4baf9ce91d96fd16..0bbee4348fe9fb12a6716248fba87c3a6ee53c3a 100644
--- a/src/app/component/user/SearchPage.php
+++ b/src/app/view/user/SearchPage.php
@@ -9,10 +9,10 @@
         <!---Icon--->
         <link rel="icon" href="images/icon/logo.ico">
         <!---Global CSS--->
-        <link rel="stylesheet" type="text/css" href="styles/template/globals.css">
-        <link rel="stylesheet" type="text/css" href="/styles/template/navbar.css" defer>
-        <link rel="stylesheet" type="text/css"href="styles/template/cardMovie.css" defer>
-        <link rel="stylesheet" type="text/css"href="styles/template/pagination.css" defer>
+        <link rel="stylesheet" type="text/css" href="styles/components/globals.css">
+        <link rel="stylesheet" type="text/css" href="/styles/components/navbar.css" defer>
+        <link rel="stylesheet" type="text/css"href="styles/components/cardMovie.css" defer>
+        <link rel="stylesheet" type="text/css"href="styles/components/pagination.css" defer>
         <!---Page specify CSS--->
         <script type="text/javascript" src="javascript/navbar/navbar.js" defer></script>
         <script type="text/javascript" src="javascript/user/search.js" defer></script>
@@ -20,7 +20,7 @@
 </head>
 
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php");?>
+    <?php include (DIRECTORY. "/../view/components/NavbarUser.php");?>
     <?php
         require_once(DIRECTORY . '/../controller/search/SearchPageController.php');
         $searchPageController = new SearchPageController();
diff --git a/src/app/component/user/UserDetailPage.php b/src/app/view/user/UserDetailPage.php
similarity index 90%
rename from src/app/component/user/UserDetailPage.php
rename to src/app/view/user/UserDetailPage.php
index 032ffdb7119a6162be15fd9c0583d2023d172e43..aba395bc70843763468187aa14b87f3293110077 100644
--- a/src/app/component/user/UserDetailPage.php
+++ b/src/app/view/user/UserDetailPage.php
@@ -9,17 +9,17 @@
     <!---Icon--->
     <link rel="icon" href="/images/icon/logo.ico">
     <!---Global CSS--->
-    <link rel="stylesheet" type="text/css" href="/styles/template/globals.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/Navbar.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/toast.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/globals.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/Navbar.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/toast.css">
     <!---Page specify CSS--->
     <link rel="stylesheet" type="text/css" href="/styles/admin/userDetail.css">
-    <link rel="stylesheet" type="text/css" href="/styles/template/confirmationModal.css">
+    <link rel="stylesheet" type="text/css" href="/styles/components/confirmationModal.css">
     <script type="text/javascript" src="/javascript/user/detailProfile.js" defer></script>
 </head>
 
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php"); ?>
+    <?php include (DIRECTORY. "/../view/components/NavbarUser.php"); ?>
     <?php
     $id = $params['id'];
     /**IF someone tries to access URL */
@@ -33,7 +33,7 @@
     $userData = $userDetail->getUserBYID($id);
     $totalRow = count($userData);
     if ($totalRow == 0) {
-        require_once  DIRECTORY . '/../component/conditional/NotFound.php';
+        require_once  DIRECTORY . '/../view/conditional/NotFound.php';
         exit;
     } else {
     ?>
@@ -115,7 +115,7 @@
     <?php
     }
     ?>
-    <?php include(DIRECTORY. "/../component/template/toast.php"); ?>
+    <?php include(DIRECTORY. "/../view/components/toast.php"); ?>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/app/component/user/WatchListPage.php b/src/app/view/user/WatchListPage.php
similarity index 71%
rename from src/app/component/user/WatchListPage.php
rename to src/app/view/user/WatchListPage.php
index ad91a4682c5a9e550203e6221e506316bf416495..7299f602ad73badc08596e2e9b6b12780d25fd59 100644
--- a/src/app/component/user/WatchListPage.php
+++ b/src/app/view/user/WatchListPage.php
@@ -9,16 +9,16 @@
         <!---Icon--->
         <link rel="icon" href="images/icon/logo.ico">
         <!---Global CSS--->
-        <link rel="stylesheet" type="text/css" href="styles/template/globals.css">
-        <link rel="stylesheet" type="text/css"href="styles/template/Navbar.css">
-        <link rel="stylesheet" type="text/css"href="styles/template/cardMovie.css">
-        <link rel="stylesheet" type="text/css"href="styles/template/pagination.css">
+        <link rel="stylesheet" type="text/css" href="styles/components/globals.css">
+        <link rel="stylesheet" type="text/css"href="styles/components/Navbar.css">
+        <link rel="stylesheet" type="text/css"href="styles/components/cardMovie.css">
+        <link rel="stylesheet" type="text/css"href="styles/components/pagination.css">
         <!---Page specify CSS--->
         <link rel="stylesheet" type="text/css"href="styles/user/watchlist.css">
 </head>
 
 <body>
-    <?php include (DIRECTORY. "/../component/template/NavbarUser.php");?>
+    <?php include (DIRECTORY. "/../view/components/NavbarUser.php");?>
     <?php 
         require_once DIRECTORY . '/../controller/watchlist/WatchListPageController.php';
         $watchListPageController = new WatchListPageController();
diff --git a/src/public/index.php b/src/public/index.php
index 3c652e87cff50905a52ae2b5eb92bc3cf31507fd..93ab848d466062dfa8dc6d0c0c24317c0c25dd10 100644
--- a/src/public/index.php
+++ b/src/public/index.php
@@ -8,4 +8,4 @@ if (session_status() === PHP_SESSION_NONE) {
 $router = new parserrouting($route);
 $uri = $_SERVER["REQUEST_URI"];
 $method = $_SERVER["REQUEST_METHOD"];
-$router->call($uri, $method);
+$router->call($uri, $method);
\ No newline at end of file
diff --git a/src/public/javascript/component/loading.js b/src/public/javascript/component/loading.js
new file mode 100644
index 0000000000000000000000000000000000000000..9d65b785e1d3776bb73b46864d168b754c67bf91
--- /dev/null
+++ b/src/public/javascript/component/loading.js
@@ -0,0 +1,7 @@
+function initializeLoading(showLoading) {
+    if (showLoading) {
+        document.querySelector('.loader-container').style.display = 'block';
+    } else {
+        document.querySelector('.loader-container').style.display = 'none';
+    }
+}
\ No newline at end of file
diff --git a/src/public/javascript/film/addFilm.js b/src/public/javascript/film/addFilm.js
index 8b3d4511a2ec6040a6489b83c4d82fbec208605a..8d6eb012c6882c781766323a6ff535938a88951b 100644
--- a/src/public/javascript/film/addFilm.js
+++ b/src/public/javascript/film/addFilm.js
@@ -84,13 +84,37 @@ function checkAllCheckboxes() {
 
 filmPoster.addEventListener('change', () => {
     filePosterName.textContent = "File Name: " + filmPoster.files[0].name;
+    let message = document.getElementById("film-poster-alert");
+    if (filmPoster.files[0]) {
+        if (filmPoster.files[0].size > 800 * 1024) {
+            message.innerHTML = "File size must be less than 800KB";
+        } else {
+            message.innerHTML = ""; 
+        }
+    }
 });
 filmVideo.addEventListener('change', () => {
     fileVideoName.textContent = "File Name: " + filmVideo.files[0].name;
+    let message = document.getElementById("film-video-alert");
+    if (filmVideo.files[0]) {
+        if (filmVideo.files[0].size > 10 * 1024 * 1024) {
+            message.innerHTML = "File size must be less than 10MB";
+        } else {
+            message.innerHTML = ""; 
+        }
+    }
 });
 
 filmHeader.addEventListener('change', () => {
     fileHeaderName.textContent = "File Name: " + filmHeader.files[0].name;
+    let message = document.getElementById("film-header-alert");
+    if (filmHeader.files[0]) {
+        if (filmHeader.files[0].size > 800 * 1024) {
+            message.innerHTML = "File size must be less than 800KB";
+        } else {
+            message.innerHTML = ""; 
+        }
+    }
 });
 
 
@@ -134,7 +158,7 @@ addFilmForm && addFilmForm.addEventListener('submit', async (e) => {
     } else {
         e.preventDefault();
         let xhr = new XMLHttpRequest();
-        xhr.open('POST', '/add-film/add-film');
+        xhr.open('POST', '/add/film');
 
 
         let formData = new FormData();
@@ -149,14 +173,38 @@ addFilmForm && addFilmForm.addEventListener('submit', async (e) => {
         formData.append('film_path', filmVideo.files[0].name);
         formData.append('film_header', filmHeader.files[0].name);
         formData.append('date_release', date.value);
+        formData.append('film_poster_size', filmPoster.files[0].size);
+        formData.append('film_path_size', filmVideo.files[0].size);
+        formData.append('film_header_size', filmHeader.files[0].size);
 
         xhr.onreadystatechange = () => {
-            if (xhr.readyState === 4 && xhr.status === 200) {
-                console.log(xhr.responseText);
-                let response = JSON.parse(xhr.responseText);
-                setTimeout(() => {
-                    location.replace(response.redirect_url);
-                }, 1500);
+            if (xhr.readyState === 4) {
+                if(xhr.status === 200){
+                    const response = JSON.parse(xhr.responseText);
+                    let messagePoster = document.getElementById("film-poster-alert");
+                    let messageVideo = document.getElementById("film-video-alert");
+                    let messageHeader = document.getElementById("film-header-alert");
+                    messagePoster.innerHTML = "";
+                    messageVideo.innerHTML = "";
+                    messageHeader.innerHTML = "";
+                    succes();
+                    setTimeout(() => {
+                        location.replace(response.redirect_url);
+                    }, 1500);
+                } else if (xhr.status === 413){
+                    const response = JSON.parse(xhr.responseText);
+                    let errorMessage = response.error;
+                    if (errorMessage.includes("poster")) {
+                        let message = document.getElementById("film-poster-alert");
+                        message.innerHTML = errorMessage;
+                    } else if(errorMessage.includes('header')){
+                        let message = document.getElementById("film-header-alert");
+                        message.innerHTML = errorMessage;
+                    } else if(errorMessage.includes('video')){
+                        let message = document.getElementById("film-video-alert");
+                        message.innerHTML = errorMessage;
+                    }
+                }
             }
         }
         xhr.send(formData);
diff --git a/src/public/javascript/film/addGenre.js b/src/public/javascript/film/addGenre.js
index 2f54f5a3ce282ecfdf2d8f55c8e43d373ea53515..25e507cf00ae76ef427f2d04eaacdd327292f83b 100644
--- a/src/public/javascript/film/addGenre.js
+++ b/src/public/javascript/film/addGenre.js
@@ -35,7 +35,7 @@ genreName && genreName.addEventListener('keyup', async(e) => {
     else {
         e.preventDefault();
         const xhr = new XMLHttpRequest();
-        xhr.open('GET', '/check-genre/:' + genre);
+        xhr.open('GET', '/check/genre/:' + genre);
         
         xhr.send();
         xhr.onreadystatechange = () => {
@@ -54,7 +54,7 @@ genreName && genreName.addEventListener('keyup', async(e) => {
 addGenreForm && addGenreForm.addEventListener('submit', async (e) => {
     e.preventDefault();
     let xhr = new XMLHttpRequest();
-    xhr.open('POST', '/add-genre/add-genre');
+    xhr.open('POST', '/add/genre');
 
 
     let formData = new FormData();
diff --git a/src/public/javascript/film/deleteFilm.js b/src/public/javascript/film/deleteFilm.js
index a18485cdc3267dba1cc6db7544aa2a8c7d2b377c..e87496c3f00a8d8988ab67c1b1e30dc06fe2b62c 100644
--- a/src/public/javascript/film/deleteFilm.js
+++ b/src/public/javascript/film/deleteFilm.js
@@ -29,7 +29,7 @@ function succes() {
 
 const deleteSong = (id) => {
     const xhr = new XMLHttpRequest();
-    xhr.open('POST', '/delete-film');
+    xhr.open('POST', '/delete/film');
 
     const formData = new FormData();
     formData.append('film_id', id);
diff --git a/src/public/javascript/film/deleteGenre.js b/src/public/javascript/film/deleteGenre.js
index 0acf070dadd02e7c74dbd3f4af13ddf20a37a9a5..f12775a49469b4c310a3a91d7f2663ab79a5713c 100644
--- a/src/public/javascript/film/deleteGenre.js
+++ b/src/public/javascript/film/deleteGenre.js
@@ -42,7 +42,7 @@ function fail() {
 
 const deleteGenre = (id) => {
     const xhr = new XMLHttpRequest();
-    xhr.open('POST', '/delete-genre/:' + id);
+    xhr.open('POST', '/delete/genre/:' + id);
 
     const formData = new FormData();
     formData.append('genre_id', id);
diff --git a/src/public/javascript/film/editFilm.js b/src/public/javascript/film/editFilm.js
index fbf5c3f220ae0ba41ed589bdfdd0599220b98f67..431a9479a61e01f6f95b2cec7ad8945364059e00 100644
--- a/src/public/javascript/film/editFilm.js
+++ b/src/public/javascript/film/editFilm.js
@@ -10,7 +10,7 @@ let filePosterName = document.getElementById('display-filePoster-name');
 let fileVideoName = document.getElementById('display-fileVideo-name');
 let fileHeaderName = document.getElementById('display-fileHeader-name');
 const filmNameAlert = document.getElementById('filmName-alert');
-const toast= document.getElementById("toast");
+const toast = document.getElementById("toast");
 const image = document.getElementById("toast-img");
 const message = document.getElementById("toast-msg");
 const saveButton = document.querySelector("#saveButton");
@@ -46,23 +46,53 @@ function closeModal() {
 
 filmPoster.addEventListener('change', () => {
     filePosterName.textContent = "File Name: " + filmPoster.files[0].name;
+    let message = document.getElementById("film-poster-alert");
+    if (filmPoster.files[0]) {
+        if (filmPoster.files[0].size > 800 * 1024) {
+            message.innerHTML = "File size must be less than 800KB";
+        } else {
+            message.innerHTML = "";
+        }
+    }
 });
 
 filmVideo.addEventListener('change', () => {
     fileVideoName.textContent = "File Name: " + filmVideo.files[0].name;
+    let message = document.getElementById("film-video-alert");
+    if (filmVideo.files[0]) {
+        if (filmVideo.files[0].size > 10 * 1024 * 1024) {
+            message.innerHTML = "File size must be less than 10MB";
+        } else {
+            message.innerHTML = "";
+        }
+    }
 });
 
 filmHeader.addEventListener('change', () => {
     fileHeaderName.textContent = "File Name: " + filmHeader.files[0].name;
+    if (filmHeader.files[0]) {
+        let message = document.getElementById("film-header-alert");
+        if (filmHeader.files[0].size > 800 * 1024) {
+            message.innerHTML = "File size must be less than 800KB";
+        } else {
+            message.innerHTML = "";
+        }
+    }
 });
 
 function succes() {
-    if (saveButton.innerHTML == "Save") {
-        image.src = "/images/assets/check.png";
-        message.className = "check";
-        message.innerHTML = "Succesfully edited film";
-        toast.className = "show";
-    }
+    image.src = "/images/assets/check.png";
+    message.className = "check";
+    message.innerHTML = "Succesfully edited film";
+    toast.className = "show";
+    setTimeout(function () { toast.className = toast.className.replace("show", ""); }, 1700);
+}
+
+function failed() {
+    image.src = "/images/assets/cross.png";
+    message.className = "cross";
+    message.innerHTML = "Failed edited film";
+    toast.className = "show";
     setTimeout(function () { toast.className = toast.className.replace("show", ""); }, 1700);
 }
 
@@ -89,14 +119,14 @@ filmName && filmName.addEventListener('keyup', async (e) => {
     removeErrorWarning(filmName, filmNameAlert);
 });
 
-function closePage(){
+function closePage() {
     location.replace('/manage-film');
 }
 
 editFilmForm && editFilmForm.addEventListener('submit', async (e) => {
     e.preventDefault();
     let xhr = new XMLHttpRequest();
-    xhr.open('POST', '/update-film');
+    xhr.open('POST', '/update/film');
 
     const formData = new FormData();
     formData.append('film_id', filmID);
@@ -108,31 +138,51 @@ editFilmForm && editFilmForm.addEventListener('submit', async (e) => {
     formData.append('filmHourDuration', filmHourDuration.value);
     formData.append('filmMinuteDuration', filmMinuteDuration.value);
     if (filmPoster.files[0] != undefined) {
+        console.log(filmPoster.files[0].size);
         formData.append('film_poster', filmPoster.files[0].name);
+        formData.append('film_poster_size', filmPoster.files[0].size);
     } else {
         formData.append('film_poster', '');
     }
 
     if (filmVideo.files[0] != undefined) {
+        console.log(filmVideo.files[0].size)
         formData.append('film_path', filmVideo.files[0].name);
+        formData.append('fim_path_size', filmVideo.files[0].size);
     } else {
         formData.append('film_path', '');
     }
 
     if (filmHeader.files[0] != undefined) {
+        console.log(filmHeader.files[0].size)
         formData.append('film_header', filmHeader.files[0].name);
+        formData.append('film_header_size', filmHeader.files[0].size);
     } else {
         formData.append('film_header', '');
+
     }
     formData.append('date_release', date.value);
 
 
     xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-            const response = JSON.parse(xhr.responseText);
-            setTimeout(() => {
-                location.replace(response.redirect_url);
-            }, 1500);
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                console.log("200");
+                const response = JSON.parse(xhr.responseText);
+                let messagePoster = document.getElementById("film-poster-alert");
+                let messageVideo = document.getElementById("film-video-alert");
+                let messageHeader = document.getElementById("film-header-alert");
+                messagePoster.innerHTML = "";
+                messageVideo.innerHTML = "";
+                messageHeader.innerHTML = "";
+                succes();
+                setTimeout(() => {
+                    location.replace(response.redirect_url);
+                }, 1500);
+            } else if (xhr.status === 413) {
+                const response = JSON.parse(xhr.responseText);
+                failed();
+            }
         }
     }
     xhr.send(formData);
diff --git a/src/public/javascript/film/watchFilm.js b/src/public/javascript/film/watchFilm.js
index 339aae2c9bf44fbc0089078fc40223b434ecde0e..a07eb57f3461915a3d4c694709487ea1fa63ea15 100644
--- a/src/public/javascript/film/watchFilm.js
+++ b/src/public/javascript/film/watchFilm.js
@@ -30,7 +30,7 @@ buttonWatchlist && buttonWatchlist.addEventListener('click', ()=>{
     formData.append('film_id', filmID);
     
     if(value==='add'){
-        xhr.open('POST', '/add-watchlist', true);
+        xhr.open('POST', '/add/watchlist', true);
         xhr.send(formData);
         
         xhr.onreadystatechange = async () =>{
@@ -43,7 +43,7 @@ buttonWatchlist && buttonWatchlist.addEventListener('click', ()=>{
         }
     }
     else if(value==='remove'){
-        xhr.open('POST', '/delete-watchlist', true);
+        xhr.open('POST', '/delete/watchlist', true);
         xhr.send(formData);
 
         xhr.onreadystatechange = async () =>{
@@ -51,8 +51,54 @@ buttonWatchlist && buttonWatchlist.addEventListener('click', ()=>{
             if(xhr.status === 200){
                 buttonWatchlist.innerText = 'Add to Watchlist';
                 buttonWatchlist.setAttribute('value', 'add');
+            }
+        }
+    }
+});
 
+const heart = document.getElementById('heart');
+const likescount = document.getElementById('likecounter');
+
+heart && heart.addEventListener('click', function() {
+    this.classList.toggle('is_animating');
+
+    const xhr = new XMLHttpRequest();
+    const formData = new FormData();
+    formData.append('film_id', filmID);
+
+    if (this.classList.contains('dislike')) {
+        xhr.open('POST', '/add/like', true);
+        xhr.send(formData);
+
+        xhr.onreadystatechange = async () =>{
+            if(xhr.readyState !== XMLHttpRequest.DONE) return;
+            if(xhr.status === 200){
+                console.log(xhr.responseText)
+                const res = JSON.parse(xhr.responseText);
+                this.classList.remove('dislike');
+                this.className += ' like';
+                likescount.innerText = res.likes_count;
+            }
+        }
+    } else {
+        xhr.open('POST', '/delete/like', true);
+        xhr.send(formData);
+
+        xhr.onreadystatechange = async () =>{
+            if(xhr.readyState !== XMLHttpRequest.DONE) return;
+            if(xhr.status === 200){
+                console.log(xhr.responseText)
+                const res = JSON.parse(xhr.responseText);
+                this.classList.remove('like');
+                this.className += ' dislike';
+                likescount.innerText = res.likes_count;
             }
         }
     }
+});
+
+heart && heart.addEventListener('animationend', function() {
+    if (this.classList.contains('dislike')) {
+        this.classList.toggle('is_animating');
+    }
 });
\ No newline at end of file
diff --git a/src/public/javascript/film/watchPrem.js b/src/public/javascript/film/watchPrem.js
new file mode 100644
index 0000000000000000000000000000000000000000..0fe7ea9486508ceb8155746c2e5db6bd0df37971
--- /dev/null
+++ b/src/public/javascript/film/watchPrem.js
@@ -0,0 +1,37 @@
+const pathname = window.location.pathname.split('/');
+const filmID = pathname[pathname.length-1];
+
+const videoPlayer = document.getElementById('video-player');
+const title = document.getElementById('title-in');
+const description = document.getElementById('description-in');
+const genre = document.getElementById('genre-in');
+const release = document.getElementById('release-in');
+const duration = document.getElementById('duration-in');
+
+function generate(){
+    console.log("Fgdfg")
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', `${PHP_REST_URL}/films/film/film/${filmID}`);
+    console.log(filmID);
+    xhr.send();
+    xhr.onreadystatechange = async () => {
+        if (xhr.readyState === XMLHttpRequest.DONE){
+            console.log(xhr.responseText);
+            var response = JSON.parse(xhr.responseText);
+
+            console.log(response.data.film_path)
+            if (xhr.status === 200){
+                videoPlayer.innerHTML = `<source src='../storage/film/${response.data.film_path}'  type='video/mp4'/>`
+                title.innerHTML = response.data.title;
+                description.innerHTML = response.data.description;
+                genre.innerHTML = response.genre;
+                release.innerHTML = response.data.date_release.split('T')[0];
+                duration.innerHTML = response.data.duration;
+            }
+        }
+    }
+
+}
+
+
+generate();
\ No newline at end of file
diff --git a/src/public/javascript/user/detailProfile.js b/src/public/javascript/user/detailProfile.js
index 31d237e9b74458dd37341395ca2900aa81a0c552..4e9367f006e113e295448f11a16245c7a1ab5221 100644
--- a/src/public/javascript/user/detailProfile.js
+++ b/src/public/javascript/user/detailProfile.js
@@ -81,7 +81,7 @@ const changeToUser = (id) => {
 
 const deleteUser = (id) => {
     const xhr = new XMLHttpRequest();
-    xhr.open('POST', '/delete-user');
+    xhr.open('POST', '/delete/user');
 
     const formData = new FormData();
     formData.append('user_id', id);
diff --git a/src/public/javascript/user/editProfile.js b/src/public/javascript/user/editProfile.js
index 273a4c7fc8d50183517635c7d1f660107c3fad6c..dcde305aacdfa734194eadad554727f440b94cc3 100644
--- a/src/public/javascript/user/editProfile.js
+++ b/src/public/javascript/user/editProfile.js
@@ -165,6 +165,18 @@ function succes(){
     setTimeout(function(){ toast.className = toast.className.replace("show", ""); }, 1700);
 }
 
+
+profilePicture.addEventListener('change', () => {
+    let message = document.getElementById("error-upload");
+    if (profilePicture.files[0]) {
+        if (profilePicture.files[0].size > 8 * 1024) {
+            message.innerHTML = "File size must be less than 800KB";
+        } else {
+            message.innerHTML = ""; 
+        }
+    }
+});
+
 editProfile && editProfile.addEventListener('submit', async (e) => {
     e.preventDefault();
     let xhr = new XMLHttpRequest();
@@ -176,20 +188,30 @@ editProfile && editProfile.addEventListener('submit', async (e) => {
     formData.append('email', emailInput.value);
 
     formData.append('phone_number', phoneInput.value);
-    if(profilePicture.files[0] != undefined){
+    if(profilePicture.files[0] !== undefined){
         formData.append('photo_profile', profilePicture.files[0].name);
+        formData.append('photo_size', profilePicture.files[0].size);
     } else {
         formData.append('photo_profile', "");
     }
+
     xhr.open('POST', '/update-profile');
     xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-            const response = JSON.parse(xhr.responseText);
-            setTimeout(() => {
-                location.replace(response.redirect_url);
-            }, 1500);
-            
+        if (xhr.readyState === 4 ) {
+            if(xhr.status === 200){
+                const response = JSON.parse(xhr.responseText);
+                let message = document.getElementById("error-upload");
+                message.innerHTML = "";
+                succes(); 
+                setTimeout(() => {
+                    location.replace(response.redirect_url);
+                }, 1500);
+            } else if(xhr.status === 413){
+                let message = document.getElementById("error-upload");
+                message.innerHTML = "File size must be less than 800KB";
+            }
         }
-    }
-    xhr.send(formData);
-});
\ No newline at end of file
+    };
+
+    xhr.send(formData); 
+});
diff --git a/src/public/javascript/user/home.js b/src/public/javascript/user/home.js
index 39a24c0118b47cb75570ba90895911bd6bd56bed..89ccbd8a82c5104cb1ee931a5e740c61b034739b 100644
--- a/src/public/javascript/user/home.js
+++ b/src/public/javascript/user/home.js
@@ -5,7 +5,7 @@ const watchlist = document.querySelector("#watchlist");
 
 function watchListButton(){
     const xhr = new XMLHttpRequest();
-    xhr.open('GET', '/check-watchlist/' + film_id);
+    xhr.open('GET', '/check/watchlist/' + film_id);
 
     xhr.send();
     xhr.onreadystatechange = async () => {
@@ -13,7 +13,7 @@ function watchListButton(){
             var response = JSON.parse(xhr.responseText);
             if (!response.isExist){
                 const xhr = new XMLHttpRequest();
-                xhr.open('POST', '/add-watchlist');
+                xhr.open('POST', '/add/watchlist');
                 const form_data = new FormData();
                 form_data.append('film_id', film_id);
                 xhr.send(form_data);
@@ -29,7 +29,7 @@ function watchListButton(){
                 }
             } else {
                 const xhr = new XMLHttpRequest();
-                xhr.open('POST', '/delete-watchlist');
+                xhr.open('POST', '/delete/watchlist');
                 const form_data = new FormData();
                 form_data.append('film_id', film_id);
                 xhr.send(form_data);
@@ -52,7 +52,7 @@ function watchListButton(){
 
 document.addEventListener('DOMContentLoaded', async function () {
     const xhr = new XMLHttpRequest();
-    xhr.open('GET', '/check-watchlist/' + film_id);
+    xhr.open('GET', '/check/watchlist/' + film_id);
 
     xhr.send();
     xhr.onreadystatechange = async () => {
diff --git a/src/public/javascript/user/login.js b/src/public/javascript/user/login.js
index eb2f433c64d584f70988799e4b3bbdba0f314de6..5eba24bd5d480d4e93972868353cfda11ec3e248 100644
--- a/src/public/javascript/user/login.js
+++ b/src/public/javascript/user/login.js
@@ -2,6 +2,7 @@ const usernameInput = document.querySelector('#username');
 const passwordInput = document.querySelector('#password');
 const loginForm = document.querySelector('#login-form');
 const loginAlert = document.getElementById('login-alert');
+const loader = document.querySelector('.loader-container');
 
 function setErrorWarning(desc, message){
     desc.innerText = message;
@@ -11,11 +12,19 @@ function removeErrorWarning(desc){
     desc.innerText = '';
 }
 
+function showLoading(){
+    loader.style.display = 'flex';
+}
+
+function hideLoading(){
+    loader.style.display = 'none';
+}
+
 const usernameRegex = /^[a-z0-9_\.]+$/;
 
 loginForm && loginForm.addEventListener('submit', async (e) => {
     e.preventDefault();
-
+    showLoading();
     const xhr_uname = new XMLHttpRequest();
     xhr_uname.open('GET', '/check/username/:' + usernameInput.value);
     
@@ -28,7 +37,7 @@ loginForm && loginForm.addEventListener('submit', async (e) => {
                 return;
             } else {
                 const xhr_pass = new XMLHttpRequest();
-                xhr_pass.open('POST', '/login/login');
+                xhr_pass.open('POST', '/auth/login');
             
                 const formData = new FormData();
                 formData.append('username', usernameInput.value);
@@ -38,6 +47,7 @@ loginForm && loginForm.addEventListener('submit', async (e) => {
                 xhr_pass.onreadystatechange = () => {
                     if (xhr_pass.readyState === XMLHttpRequest.DONE) {
                         if (xhr_pass.status === 401){
+                            hideLoading();
                             setErrorWarning(loginAlert, 'Username or password is incorrect');
                             return;
                         }
@@ -46,6 +56,8 @@ loginForm && loginForm.addEventListener('submit', async (e) => {
                     }
                 }
             }
+        } else {
+            hideLoading();
         }
     }
 });
diff --git a/src/public/javascript/user/premiumFilm.js b/src/public/javascript/user/premiumFilm.js
new file mode 100644
index 0000000000000000000000000000000000000000..283a5d0731f1054382bb81794b6da34a715c03be
--- /dev/null
+++ b/src/public/javascript/user/premiumFilm.js
@@ -0,0 +1,180 @@
+const card_container = document.getElementById("result-container");
+
+const LIMIT = 20;
+let pagination_count = 0;
+
+if (!window.location.href.includes("pages=")) {
+    window.location.href+= "?pages=1";
+}
+
+const href = (window.location.href.split('pages='));
+const pages = href[href.length-1];
+
+function addButtonPagination(val, symbol, is_active){
+    pagination_container.innerHTML += `
+        <div class="button-pagination ${is_active? "button-red":"button-white"}" value=${val} symbol="${symbol}" onClick=handlePagination(this.getAttribute('value'))>
+            ${symbol}
+        </div>
+    `
+}
+
+function generatePagination2(active, start, leftButton, rightButton){
+    if (leftButton) {
+        addButtonPagination(start-1, "<<", false);
+    }
+    for (let i = start; i < (start+5); i++) {
+        let is_active = false;
+        if (i == active) is_active = true;
+        addButtonPagination(i, i , is_active);
+    }
+    if (rightButton) {
+        addButtonPagination(start+5, ">>", false);
+    }
+}
+
+const pagination_container = document.getElementById('pagination-container');
+
+
+function generatePagination(){
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', `${PHP_REST_URL}/films/count`);
+    xhr.send();
+    xhr.onreadystatechange = async () => {
+        if (xhr.readyState === XMLHttpRequest.DONE){
+            var response = JSON.parse(xhr.responseText);
+            if (xhr.status === 200){
+                film_count = response.film_count;
+                console.log(film_count);
+                pagination_count = Math.ceil(film_count / LIMIT);
+                if (pagination_count <= 5){
+                    generatePagination2(pages, 1, false, false, pagination_count);
+                } else {
+                    if (pages < 5){
+                        generatePagination2(pages, 1, false, true);
+                    } else if (pages >= pagination_count-4){
+                        generatePagination2(pages, pagination_count-4, true, false);
+                    } else {
+                        generatePagination2(pages, pages, true, true);
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+async function handlePagination(val){
+    let num = Number(val);
+    let sym;
+    let active_button;
+    let clicked_button;
+    let offset;
+    const pagination_buttons = document.querySelectorAll('.button-pagination');
+    pagination_buttons.forEach(button => {
+        console.log(button.getAttribute("value"), button.getAttribute("symbol"));
+        if (Number(button.getAttribute("value")) == num){
+            clicked_button = button;
+            sym = button.getAttribute("symbol");
+        }
+        if (button.classList.contains('button-red')){
+            active_button = button;
+            // console.log(active_button);
+        }
+    })
+    // console.log(num,sym);
+    console.log(active_button.getAttribute("value"));
+    if (sym == '>>'){
+        if (Number(active_button.getAttribute("value")) == num-1){
+            pagination_container.innerHTML = "";
+            offset = num;
+            generatePagination2(num, num-4, true, num==pagination_count?false:true);
+        } else {
+            active_button.classList.remove('button-red');
+            active_button.classList.add('button-white');
+
+            pagination_buttons.forEach(button => {
+                if (button.getAttribute("value") == Number(active_button.getAttribute("value")) + 1){
+                    button.classList.remove('button-white');
+                    button.classList.add('button-red');
+                    offset = (Number(button.getAttribute("value")));
+                }
+            })
+        }
+    } else if (sym == '<<' ){
+        if (Number(active_button.getAttribute("value")) == (num+1)){
+            console.log("sdfdfb");
+            pagination_container.innerHTML = "";
+            offset = num;
+            generatePagination2(num, num, num==1?false:true, true);
+        } else {
+            console.log("nmnmn")
+            console.log("num+1: ");
+            console.log(num+1);
+            active_button.classList.remove('button-red');
+            active_button.classList.add('button-white');
+
+            pagination_buttons.forEach(button => {
+                if (button.getAttribute("value") == Number(active_button.getAttribute("value")) - 1){
+                    button.classList.remove('button-white');
+                    button.classList.add('button-red');
+                    offset = (Number(button.getAttribute("value")));
+                }
+            })
+        }
+
+    } else {
+        active_button.classList.remove('button-red');
+        active_button.classList.add('button-white');
+
+        clicked_button.classList.remove('button-white');
+        clicked_button.classList.add('button-red');
+        offset = num;
+    }   
+
+    card_container.innerHTML = "";
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', `${PHP_REST_URL}/films/premium-film/${offset-1}`);
+    xhr.send();
+    xhr.onreadystatechange = async () => {
+        if (xhr.readyState === XMLHttpRequest.DONE){
+            var response = JSON.parse(xhr.responseText);
+            if (xhr.status === 200){
+                const films = response.data;
+                    films.forEach(film => {
+                        card_container.innerHTML += `
+                            <a href="/watch-prem/${film.film_id}">
+                                <div class="card premium">
+                                    <img src="storage/poster/${film.film_poster}" alt="Film Poster" />
+                                </div>
+                            </a>`
+                });
+            }
+        }
+}
+
+}
+
+console.log(PHP_REST_URL);
+const xhr = new XMLHttpRequest();
+xhr.open('GET', `${PHP_REST_URL}/films/premium-film/${pages-1}`);
+xhr.send();
+xhr.onreadystatechange = async () => {
+    if (xhr.readyState === XMLHttpRequest.DONE){
+        console.log(xhr.responseText);
+        var response = JSON.parse(xhr.responseText);
+        if (xhr.status === 200){
+            console.log(response);
+            const films = response.data;
+                films.forEach(film => {
+                    card_container.innerHTML += `
+                        <a href="/watch-prem/${film.film_id}">
+                            <div class="card premium">
+                                <img src="storage/poster/${film.film_poster}" alt="Film Poster" />
+                            </div>
+                        </a>`
+            });
+        }
+    }
+}
+
+generatePagination();
\ No newline at end of file
diff --git a/src/public/javascript/user/profileSettings.js b/src/public/javascript/user/profileSettings.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e8f06004484fb1a23f5e765c7ed6164137d7bb2
--- /dev/null
+++ b/src/public/javascript/user/profileSettings.js
@@ -0,0 +1,21 @@
+const upgradeButton = document.getElementById('upgradeButton');
+
+function upgradeButtonClick() {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', '/upgrade-premium');
+
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                const response = JSON.parse(xhr.responseText);
+                if (response.data) {
+                    upgradeButton.style.display = 'none';
+                }
+            } else {
+                console.log("fail");
+            }
+        }
+    };
+
+    xhr.send();
+}
diff --git a/src/public/javascript/user/register.js b/src/public/javascript/user/register.js
index 6a7875fb8fb34b926bada3d0cb211d958842c995..a2dcc5b63bbaf46f8111b57f256f9d481486f771 100644
--- a/src/public/javascript/user/register.js
+++ b/src/public/javascript/user/register.js
@@ -185,7 +185,7 @@ registrationForm && registrationForm.addEventListener('submit', async (e) => {
     if (isUsernameValid && isEmailValid && isPhoneValid && isFirstNameValid && isLastNameValid && isPasswordValid && isConfirmPasswordValid) {
         e.preventDefault();
         const xhr = new XMLHttpRequest();
-        xhr.open('POST', '/register/register');
+        xhr.open('POST', '/auth/register');
 
         const formData = new FormData();
         formData.append('username', usernameInput.value);
diff --git a/src/public/javascript/user/search.js b/src/public/javascript/user/search.js
index a499842e76d4c2640f21f7edf231019598415a19..7642a3a58e9552d21b4a7d5101c967a2f148fcf1 100644
--- a/src/public/javascript/user/search.js
+++ b/src/public/javascript/user/search.js
@@ -15,7 +15,7 @@ const fetchResults = ()=>{
     params.set('orderby', orderby.value);
     params.set('genre', genre.value);
 
-    const location = '/search/search?'+params.toString();
+    const location = '/search/film?'+params.toString();
     xhr.open('GET', location, true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     xhr.send();
diff --git a/src/public/storage/initDB.txt b/src/public/storage/initDB.txt
index e8480bda1ef1a63cc5530726faab1021236519a1..153b2a55644d66049749dafbadb5516774e14962 100644
--- a/src/public/storage/initDB.txt
+++ b/src/public/storage/initDB.txt
@@ -50,6 +50,22 @@ $genres = [
     'Fantasy',
     'Drama',
     'Mystery',
+    'Comedy',
+    'Science Fiction',
+    'Romance',
+    'Thriller',
+    'Horror',
+    'Adventure',
+    'Crime',
+    'Animation',
+    'Family',
+    'Documentary',
+    'Biography',
+    'History',
+    'War',
+    'Musical',
+    'Sport',
+    'Western',
 ];
 
 foreach ($genres as $genre) {
@@ -106,26 +122,112 @@ foreach ($films as $film) {
 }
 
 $queryFilmGenre = [
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(1, 1);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(2, 1);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(3, 1);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(4, 1);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(5, 1);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(6, 2);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(7, 2);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(8, 2);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(9, 2);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(10, 2);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(11, 2);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(12, 3);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(13, 3);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(14, 3);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(15, 3);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(16, 3);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(17, 4);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(18, 4);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(19, 4);",
-    "INSERT INTO film_genre(film_id, genre_id) VALUES(20, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(21, 1);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(21, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(21, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(21, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(21, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(22, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(22, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(23, 18);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(23, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(25, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(26, 7);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(27, 1);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(28, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(28, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(29, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(30, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(31, 7);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(32, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(33, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(34, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(35, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(36, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(37, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(38, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(39, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(40, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(41, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(42, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(43, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(44, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(45, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(46, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(47, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(48, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(49, 11);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(50, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(51, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(52, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(53, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(54, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(55, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(56, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(57, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(58, 11);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(59, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(60, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(61, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(62, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(63, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(64, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(65, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(66, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(67, 11);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(68, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(69, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(70, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(71, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(72, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(73, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(74, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(75, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(76, 11);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(77, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(78, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(79, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(80, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(81, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(82, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(83, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(84, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(85, 11);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(86, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(87, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(88, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(89, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(90, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(91, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(92, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(93, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(94, 11);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(95, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(96, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(97, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(98, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(99, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(100, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(101, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(102, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(103, 11);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(104, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(105, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(106, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(107, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(108, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(109, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(110, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(111, 4);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(112, 11);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(113, 6);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(114, 3);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(115, 8);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(116, 5);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(117, 2);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(118, 9);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(119, 10);",
+    "INSERT INTO film_genre(film_id, genre_id) VALUES(120, 4);",
 ];
 
 foreach ($queryFilmGenre as $filmGenre) {
diff --git a/src/public/storage/notflix_database_sample.sql b/src/public/storage/notflix_database_sample.sql
deleted file mode 100644
index dbde0ca50697dced814831c4dce5ff500baa85a5..0000000000000000000000000000000000000000
Binary files a/src/public/storage/notflix_database_sample.sql and /dev/null differ
diff --git a/src/public/storage/poster/film21_poster.jpg b/src/public/storage/poster/film21_poster.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b0ad1f3f7e2c1cf9f4936842af1d1e4117988873
Binary files /dev/null and b/src/public/storage/poster/film21_poster.jpg differ
diff --git a/src/public/styles/template/cardMovie.css b/src/public/styles/components/cardMovie.css
similarity index 81%
rename from src/public/styles/template/cardMovie.css
rename to src/public/styles/components/cardMovie.css
index a6a51e2a4c3b0b140907c869bd4bdfa1d45a8151..b7cdd4728ae16c04f587ba116f0f49a71ab901e5 100644
--- a/src/public/styles/template/cardMovie.css
+++ b/src/public/styles/components/cardMovie.css
@@ -30,3 +30,10 @@
     object-fit: fill;
     border-radius: 4px;
 }  
+
+.premium {
+    height: 225px;
+    box-shadow: 2px 2px 20px 5px rgba(231, 182, 47, 0.6);
+    border-radius: 7px;
+    transition: transform 0.3s ease-in-out;
+ }
diff --git a/src/public/styles/template/cardUser.css b/src/public/styles/components/cardUser.css
similarity index 100%
rename from src/public/styles/template/cardUser.css
rename to src/public/styles/components/cardUser.css
diff --git a/src/public/styles/template/confirmationModal.css b/src/public/styles/components/confirmationModal.css
similarity index 100%
rename from src/public/styles/template/confirmationModal.css
rename to src/public/styles/components/confirmationModal.css
diff --git a/src/public/styles/template/globals.css b/src/public/styles/components/globals.css
similarity index 98%
rename from src/public/styles/template/globals.css
rename to src/public/styles/components/globals.css
index 7387d96637bb29479283c92d2401a4dc83503bb5..bef2b7ba02d1a8f33f19a473c7f219e1c0ac084f 100644
--- a/src/public/styles/template/globals.css
+++ b/src/public/styles/components/globals.css
@@ -269,6 +269,13 @@ input:required {
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }
+.text-warning{
+    color: var(--red);
+    font-size: 0.7rem;
+    text-align: left;
+    display: block;
+    width: 100%;
+}
 
 
 select {
diff --git a/src/public/styles/components/loading.css b/src/public/styles/components/loading.css
new file mode 100644
index 0000000000000000000000000000000000000000..f6fd7b948d8c04a3ef31e0b646a85a7c1dd5251c
--- /dev/null
+++ b/src/public/styles/components/loading.css
@@ -0,0 +1,29 @@
+.loader-container {
+  display:none;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.834) center no-repeat;
+  z-index: 1;
+}
+
+.spinner {
+  width: 64px;
+  height: 64px;
+  border: 8px solid;
+  border-color: #f13d3d transparent #f13d3d transparent;
+  border-radius: 50%;
+  animation: spin-anim 1.2s linear infinite;
+}
+
+
+@keyframes spin-anim {
+  0% {
+      transform: rotate(0deg);
+  }
+  100% {
+      transform: rotate(360deg);
+  }
+}
diff --git a/src/public/styles/template/navbar.css b/src/public/styles/components/navbar.css
similarity index 100%
rename from src/public/styles/template/navbar.css
rename to src/public/styles/components/navbar.css
diff --git a/src/public/styles/template/pagination.css b/src/public/styles/components/pagination.css
similarity index 100%
rename from src/public/styles/template/pagination.css
rename to src/public/styles/components/pagination.css
diff --git a/src/public/styles/template/toast.css b/src/public/styles/components/toast.css
similarity index 100%
rename from src/public/styles/template/toast.css
rename to src/public/styles/components/toast.css
diff --git a/src/public/styles/film/manageGenre.css b/src/public/styles/film/manageGenre.css
index 30489f723cc920a02c847cb46f10a3e2c373e70e..ab67bf0354f2bbd3974a9521d9432b2dbc44d2a6 100644
--- a/src/public/styles/film/manageGenre.css
+++ b/src/public/styles/film/manageGenre.css
@@ -7,19 +7,23 @@
 
 .upper-container{
     display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
     justify-content: space-between;
     padding:1rem;
 }
 
-.cards-genre {
+.container-1{
+    display:flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+
+.cards {
     display: grid;
     justify-items: center;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 5rem;
-    row-gap: 40px;
-    padding-top: 1rem;
-    padding-left:2rem;
-    padding-right:2rem;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+    row-gap: 1rem;
+    padding: 1rem;
  }
\ No newline at end of file
diff --git a/src/public/styles/film/watchFilm.css b/src/public/styles/film/watchFilm.css
index c87b1722460df5197b8b8f30eae355c2e6deb6bf..00dce6bb6c5c2261299509b210c59450a6aee1e4 100644
--- a/src/public/styles/film/watchFilm.css
+++ b/src/public/styles/film/watchFilm.css
@@ -103,4 +103,44 @@ h2 {
         margin-top: 20px;
         margin-right: auto;
     }
+}
+
+.heartcontainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    column-gap: 5px;
+}
+
+.heart {
+    cursor: pointer;
+    position: relative;
+    height: 80px;
+    width: 80px;
+    background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
+    background-position: left;
+    background-repeat:no-repeat;
+    background-size:2900%;
+  }
+  
+  .is_animating {
+    animation: heart-burst .8s steps(28) 1;
+  }
+  
+  @keyframes heart-burst {
+    from {background-position:left;}
+    to { background-position:right;}
+  }
+
+  .like {
+    background-position: right;
+  }
+
+  .dislike {
+    background-position: left;
+  }
+
+.likecounter {
+    margin-right: 50px;
 }
\ No newline at end of file
diff --git a/src/public/styles/user/premium.css b/src/public/styles/user/premium.css
new file mode 100644
index 0000000000000000000000000000000000000000..38ac9d04ab9e8ff21e708416606f0132453fdf67
--- /dev/null
+++ b/src/public/styles/user/premium.css
@@ -0,0 +1,7 @@
+body {
+    padding: 100px 0;
+}
+
+section {
+    padding: 0 100px;
+}
\ No newline at end of file
diff --git a/src/public/styles/user/profilesetting.css b/src/public/styles/user/profilesetting.css
index 2d6aac1b4fd7ef46118892a5b2372298d4a3a204..bc3a60f5c78dc793ff9fe8fddebc9ce098523d9e 100644
--- a/src/public/styles/user/profilesetting.css
+++ b/src/public/styles/user/profilesetting.css
@@ -36,6 +36,38 @@
    height: 10rem;
     border-radius: 8rem;
     background-color: red;
+    flex-direction: column;
+}
+
+.upgrade{
+    padding-top: 1rem;
+}
+.pending{
+    width:auto;
+    padding: 0.25rem;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    border-radius: 1rem;
+    border-color: orange;
+    background-color: yellow;
+    border-radius: 4rem;
+    border: 0.25rem solid orange;
+    font-weight: bold;
+}
+
+.rejected{
+    width:auto;
+    padding: 0.25rem;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    border-radius: 1rem;
+    border-color: red;
+    background-color: pink;
+    border-radius: 4rem;
+    border: 0.25rem solid red;
+    font-weight: bold;
 }
 
 .profile img {