diff --git a/src/app/components/common/profile.php b/src/app/components/common/profile.php
index b8d496db44f4090ecd341d21846008ec2fd41f04..72977d65d58d6b7f55d62a34c1b25c74a455c3e7 100644
--- a/src/app/components/common/profile.php
+++ b/src/app/components/common/profile.php
@@ -10,6 +10,7 @@
         </div>
         <div class="profile-menu">
             <div class="item b3" id="menu-profile">Profile</div>
+            <button class="item b3" id="subscribe">Subscribe</button>
             <button class="item b3" id="logout">Log out</button>
         </div>
         <div class="edit-profile-back">
@@ -35,11 +36,26 @@
         e.preventDefault();
         const xhr = new XMLHttpRequest();
         xhr.open("POST", "/public/logout");
-        xhr.send()
+        xhr.send();
         xhr.onreadystatechange = function() {
             if (this.readyState === 4 && this.status === 200) {
-                window.location.replace("/public/login")
+                window.location.replace("/public/login");
             }
         }
     })
+
+    const subscribeBtn = document.getElementById("subscribe");
+    subscribeBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", "/public/subscribe", true);
+        xhr.send();
+        xhr.onreadystatechange = function() {
+            if (this.readyState === 4 && this.status === 201) {
+                alert("Berhasil Subscribe!, logout dan login kembali untuk masuk ke halaman premium.")
+                window.location.replace("http://localhost:5173");
+            }
+        }
+    })
+
 </script>
\ No newline at end of file
diff --git a/src/app/controllers/subscription/post_subscription.php b/src/app/controllers/subscription/post_subscription.php
index 77c33217d3bfec064cfbd0542140ad38f1a1f8a3..6618857944d581fdc3b5ed53861034bcbe927135 100644
--- a/src/app/controllers/subscription/post_subscription.php
+++ b/src/app/controllers/subscription/post_subscription.php
@@ -3,13 +3,22 @@
 class PostSubscribeController
 {
   public function call() {
+
+    session_start();
+
+    if (isset($_SESSION["user_id"])){
+      $user_id = $_SESSION["user_id"];
+    }else{
+      return;
+    }
+
     $xml = '<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:tns="http://services.soapserver/">
               <soap:Header>
                 <tns:apiKey>ularmelingkardiataspagar</tns:apiKey>
               </soap:Header>
               <soap:Body>
                 <tns:addSubscription>
-                  <idUser>8</idUser>
+                  <idUser>'.$user_id.'</idUser>
                 </tns:addSubscription>
               </soap:Body>
             </soap:Envelope>';
diff --git a/src/public/styles/globals.css b/src/public/styles/globals.css
index cebf2750620b01cc9c3c95da7584cc1186ecbc9c..0f6197c2f2371010cbb0f8644f1ee2a39129e1ca 100644
--- a/src/public/styles/globals.css
+++ b/src/public/styles/globals.css
@@ -416,11 +416,36 @@ aside .sidebar-item {
   align-items: start;
   z-index: 99;
   cursor: pointer;
-  width: 7vw;
+  width: 6vw;
 }
 
 #logout {
-  color: red;
+  color: var(--PINK-1);
+  text-align: center;
+  border-radius: 5px;
+  width: 85px;
+  background-color: var(--WHITE);
+  font-style: bold;
+}
+
+#logout:hover{
+  font-weight: 600;
+  background-color: var(--GRAY-100);
+}
+
+#subscribe {
+  color: var(--WHITE);
+  background-color: var(--PINK-1);
+  border-radius: 5px;
+  width: 85px;
+  text-align: center;
+  font-style: bold;
+}
+
+#subscribe:hover{
+  background-color: var(--GRAY-100);
+  color: var(--PINK-1);
+  font-weight: 600;
 }
 
 .edit-profile-back {