diff --git a/routes/routes.js b/routes/routes.js
index 0e136c67779e8f2890d982282c79a9d1f509eb2f..7b71ded68054d7afd2fd98bc444d54ecaf7b0bdc 100644
--- a/routes/routes.js
+++ b/routes/routes.js
@@ -204,9 +204,9 @@ module.exports = function (app, config, passport) {
 
           for (var i = 0; i < projectsOverview.length; i++) {
             // check if projectId is exist in userProjectId[]
-            var status = "You cannot access this service"
+            var status = false
             if (userProjectId.indexOf(projectsOverview[i].id) > -1) {
-              status = "You can access this service"
+              status = true
             }
             // add data to JSON object
             allProjects.push({
diff --git a/views/services.pug b/views/services.pug
index a751c9287d28722fac61c8441c8938bf25e28afa..41fe58d3f413c16177d747fc703069209014352e 100644
--- a/views/services.pug
+++ b/views/services.pug
@@ -46,13 +46,20 @@ html(lang="en")
                     for error, i in errors
                         div.alert.alert-danger.alert-dismissible.fade.show #{ error }
                             a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
-                ul
+                table
                     for item in project
-                        li= item.title
-                            ul
-                                li= item.summary
-                                li= item.cp
-                                li= item.userStatus
+                        tr
+                            td <strong>#{item.title}</strong>
+                            if item.userStatus
+                                td
+                                    button(type="button", class="btn btn-secondary", onclick="unsubscribe()") Unsubscribe
+                            else
+                                td
+                                    button(type="button", class="btn btn-success", onclick="subscribe()") Subscribe
+                        tr
+                            td(colspan="2") #{item.summary}
+                        tr
+                            td(colspan="2") <i>Contact Person: #{item.cp}</i>
                     
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")
@@ -60,4 +67,11 @@ html(lang="en")
     // Bootstrap
     script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
     // M4_LAB
-    script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
\ No newline at end of file
+    script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
+    script.
+        function subscribe() {
+            alert("To be implemented: Send a request to join/participate/have access to the page of the requested service")
+        }
+        function unsubscribe() {
+            alert("To be implemented: Send a request to withdraw access")
+        }
\ No newline at end of file