diff --git a/README.md b/README.md
index b58e0af830ec5dbc90534e641396406fd17bf11c..30d5b5a11de8215223702fbf4a370ec9d800f391 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,73 @@
-# Getting Started with Create React App
+# binotify-premium-app: The Frontend for binotify
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Introduction
 
-## Available Scripts
+Repository ini adalah frontend dari aplikasi LeMeS premium yang digunakan oleh Admin untuk mengelola permintaan request premium dari para pengguna. Selain itu, Teacher juga dapat menggunakan frontend ini untuk mengelola course premium, beserta dengan modul dan materialnya. Apalikasi ini dibuat dengan menggunakan Reat + Typescript. Aplikasi ini dibuat untuk memenuhi tugas besar mata kuliah Pemrograman Aplikasi Berbasis Web.
 
-In the project directory, you can run:
+## Overview Feature
 
-### `yarn start`
+- Chakra UI
+- Loading state
+- Toast
+- HTTP Client with Axios
+- Cookie
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## Screenshot
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+### Login Page
+![Login page ](image-1.png)
+### Register Page
+![Register Page](image.png)
+### Upgrade Premium Request Page (Admin)
+![](image-2.png)
 
-### `yarn test`
+### Premium Course Management Page (Admin)
+![Alt text](image-3.png)
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### Premium User Management Page (Admin)
+![](image-4.png)
 
-### `yarn build`
+### Add User (Admin)
+![Alt text](image-5.png)
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Add Course (Admin)
+![Alt text](image-6.png)
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+### Edit User
+![Alt text](image-7.png)
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### Edit Course
+![Alt text](image-8.png)
 
-### `yarn eject`
+### Delete User
+![Alt text](image-10.png)
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+### Delete Course
+![Alt text](image-9.png)
+### Upgrade Premium
+![Alt text](image-11.png)
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Decline Premium
+![Alt text](image-12.png)
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+### Cara menjalankan aplikasi
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+1. Pastikan sudah terinstall NodeJS
+2. clone repositori ini
+3. Buat file `.env` pada root folder aplikasi mengikuti contoh .env.example
+4. Install dependency dengan menjalankan perintah `yarn install`
+6. Atau, dalam mode production, `yarn start`
 
-## Learn More
+### Pembagian Tugas
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+1. Frontend Fitur Regsiter & Login:
+2. Backend Fitur Register & Login : 13521139
+3. Frontend User Premium's table: 
+4. Backend  User Premium's table: 
+5. Frontend Course Premium's table: 
+6. Backend  Course Premium's table: 
+7. Frontend Request Premium's table: 
+8. Backend  Request Premium's table: 13521139
+9. Frontend Edit Profile
+10. Backend Edit Profile : 13521139
+11. Project Setup: 13521139
diff --git a/image-1.png b/image-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..baf1664024cdf9a3ff8b0c69e68b815609839ab8
Binary files /dev/null and b/image-1.png differ
diff --git a/image-10.png b/image-10.png
new file mode 100644
index 0000000000000000000000000000000000000000..feaec0c0c66250866e5073c297e01f2cf04c3e53
Binary files /dev/null and b/image-10.png differ
diff --git a/image-11.png b/image-11.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7433441cb1f4dd663bdefa00e9a8ef3e43811c6
Binary files /dev/null and b/image-11.png differ
diff --git a/image-12.png b/image-12.png
new file mode 100644
index 0000000000000000000000000000000000000000..32a224e2b962e2b3972a6246cb913ff25e77620d
Binary files /dev/null and b/image-12.png differ
diff --git a/image-2.png b/image-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3ca38d2a41c8ace17786df7f5e31a3e889dfd93
Binary files /dev/null and b/image-2.png differ
diff --git a/image-3.png b/image-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fdd32fe157605b99c2099442994e3a595958199
Binary files /dev/null and b/image-3.png differ
diff --git a/image-4.png b/image-4.png
new file mode 100644
index 0000000000000000000000000000000000000000..53d86c04c97f619264818391f5280c31299abe1b
Binary files /dev/null and b/image-4.png differ
diff --git a/image-5.png b/image-5.png
new file mode 100644
index 0000000000000000000000000000000000000000..c53468746fed173218c277b9f9a5281bca3af55e
Binary files /dev/null and b/image-5.png differ
diff --git a/image-6.png b/image-6.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab3ba7815da36e3de812ecb03b30c57972971c83
Binary files /dev/null and b/image-6.png differ
diff --git a/image-7.png b/image-7.png
new file mode 100644
index 0000000000000000000000000000000000000000..b405ce4722aa7848ef4c7aec50273a9508f4d51c
Binary files /dev/null and b/image-7.png differ
diff --git a/image-8.png b/image-8.png
new file mode 100644
index 0000000000000000000000000000000000000000..14fdb79e641826ac707787b5e24f22a56fbd777d
Binary files /dev/null and b/image-8.png differ
diff --git a/image-9.png b/image-9.png
new file mode 100644
index 0000000000000000000000000000000000000000..453b2c4c0ed22050960bdfeb88d01ea218c8ad71
Binary files /dev/null and b/image-9.png differ
diff --git a/image.png b/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..294dc6f311daee349bf8c53dd5433c761c2fa960
Binary files /dev/null and b/image.png differ
diff --git a/src/pages/admin/Request.tsx b/src/pages/admin/Request.tsx
index 79f9a398a966bb0e9cddaacc0d4fdf15b8f7e9da..803b3673f2a33231e1e3d99af2991c39f9c9d2ce 100644
--- a/src/pages/admin/Request.tsx
+++ b/src/pages/admin/Request.tsx
@@ -23,6 +23,7 @@ import {
   Tr,
   Th,
   Td,
+  Select,
 } from "@chakra-ui/react";
 import {
   BiSolidTrash,
@@ -46,6 +47,7 @@ import { IconContext } from "react-icons";
 const Request = () => {
   const initialUsers: Users[] = [];
   const [requests, setRequests] = useState<RequestType[]>([]);
+  const [status, setStatus] = useState("");
   const [refresher, setRefresher] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
@@ -85,8 +87,8 @@ const Request = () => {
           setTotalPages(Math.ceil(totalRows / n));
           setRequests(res.data.data);
           setIsLoading(false);
-        }else{
-          setIsError(true)
+        } else {
+          setIsError(true);
         }
       } catch (error) {
         setIsError(true);
@@ -142,7 +144,9 @@ const Request = () => {
     closeModalRejecting();
     setRefresher((prevRefresh) => !prevRefresh); // lgsung request data baru tanpa hrus reload page (harusnya works)
   };
-
+  const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setStatus(e.target.value);
+  };
   // HANDLING ACC REQUEST
   const [isModalAcceptingOpen, setIsModalAcceptingOpen] = useState(false);
   const [acceptingID, setAcceptingID] = useState(0);
@@ -189,12 +193,8 @@ const Request = () => {
     closeModalAccepting();
     setRefresher((prevRefresh) => !prevRefresh); // lgsung request data baru tanpa hrus reload page (harusnya works)
   };
-  if(isError){
-    return (
-      <Container>
-        Error...
-      </Container>
-    )
+  if (isError) {
+    return <Container>Error...</Container>;
   }
 
   return (