diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index e7d557bf50..d58b3c92b6 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -15,13 +15,9 @@ Please review the [contributing guidelines](https://github.com/Catrobat/Catroweb
 - [ ] Stick to the project’s git workflow (rebase and squash your commits)
 - [ ] Verify that your changes do not have any conflicts with the base branch
 - [ ] Put your ticket into the `Code Review` section in [Jira](https://jira.catrob.at/)
-- [ ] Post a message in the _#catroweb_ [Slack channel](https://catrobat.slack.com) and ask for a code reviewer
+- [ ] Ask for a code reviewer
 - [ ] Check that your pull request has been successfully deployed to https://web-test-1.catrob.at/
 
 ### Additional Description
 
 `TODO: Add additional information that is not in your commit-message here`
-
-### Tests - additional information
-
-`TODO: add additional information about testruns here`
diff --git a/.github/workflows/cancel.yaml b/.github/workflows/cancel.yaml
deleted file mode 100644
index 4ce87c8e69..0000000000
--- a/.github/workflows/cancel.yaml
+++ /dev/null
@@ -1,17 +0,0 @@
-# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-# This workflow cancels previous runs of our workflow to prevent wasting valuable resources
-#
-name: Cancel Previous Workflow Runs
-on:
-  workflow_run:
-    #    workflows: ["Dynamic analysis", "Docker Container tests", "Static analysis"]
-    workflows: ['disabled']
-    types:
-      - requested
-jobs:
-  cancel:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: styfle/cancel-workflow-action@0.12.1
-        with:
-          workflow_id: ${{ github.event.workflow.id }}
diff --git a/.gitignore b/.gitignore
index cda8916ec2..0d6e568db3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,7 +16,6 @@ bin/
 !bin/checkCatroidRepositoryForNewBricks
 !bin/x_perm.sh
 !bin/x_reset.sh
-!bin/x_test.sh
 
 ### Sass ###
 .sass-cache/
diff --git a/assets/Layout/Base.js b/assets/Layout/Base.js
index 6219a5dc00..867bfaa046 100644
--- a/assets/Layout/Base.js
+++ b/assets/Layout/Base.js
@@ -11,7 +11,7 @@ import 'lazysizes'
 import 'material-icons/iconfont/material-icons.css'
 
 import textFillDefault from '../Components/TextFillDefault'
-import './TopBar.scss'
+import './TopBar'
 import './Sidebar'
 import { TokenExpirationHandler } from '../Security/TokenExpirationHandler'
 import { LogoutTokenHandler } from '../Security/LogoutTokenHandler'
diff --git a/assets/Studio/Studio.scss b/assets/Studio/Studio.scss
index 2b63e341d6..031cb2dc2f 100644
--- a/assets/Studio/Studio.scss
+++ b/assets/Studio/Studio.scss
@@ -2,17 +2,13 @@
 @import '../Layout/Variables';
 
 .studio-detail__header {
-  padding-top: 2.25rem;
-  padding-right: 1rem;
-  padding-left: 1rem;
-  margin-top: -2rem;
-  margin-right: calc(var(--bs-gutter-x, 0.75rem) * -1);
-  margin-left: calc(var(--bs-gutter-x, 0.75rem) * -1);
+  margin-top: -1.5rem;
   background-color: $gray-200;
 }
 
 .studio-detail__header__name {
   flex: 0 0 100%;
+  margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
 
@@ -39,44 +35,48 @@
 
 .studio-detail__header__details__button--upload-image {
   position: absolute;
-  right: -20px;
-  bottom: 0;
+  right: 15px;
+  bottom: 15px;
+  width: 50px;
+  height: 50px;
+  background-color: rgba(255 255 255 / 75%);
+  border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 50px;
-  height: 50px;
-  background-color: rgba(0 0 0 / 40%);
-  border-radius: 50%;
+  box-shadow: 0 2px 5px rgba(0 0 0 / 30%);
+  z-index: 10;
+}
 
-  .button-show-ajax {
-    margin: 0 auto;
-  }
+.studio-detail__header__details__button--upload-image .material-icons {
+  font-size: 24px;
+  color: var(--primary);
+}
 
-  input {
-    position: absolute;
-    inset: 0;
-    cursor: pointer;
-    opacity: 0.001;
-  }
+.studio-detail__header__details__button--upload-image input[type='file'] {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  opacity: 0;
 }
 
 #studio-img-container {
+  position: relative;
+  width: 100%;
+  max-height: 17rem;
+  min-height: 10rem;
+  display: flex;
   justify-content: center;
-  width: auto;
-  max-height: 9rem;
-  overflow: hidden;
+  align-items: center;
+  overflow-y: hidden;
 }
 
-#studio-detail__header__details__button--upload-image {
-  position: absolute;
-  bottom: 0;
-  left: 45%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30%;
-  background-color: #fff;
+#studio-img-container img {
+  max-width: 100%;
+  min-width: -webkit-fill-available;
+  min-height: 10rem;
+  height: auto;
+  object-fit: cover;
 }
 
 .tab-text {
diff --git a/assets/Studio/StudioCommentHandler.js b/assets/Studio/StudioCommentHandler.js
new file mode 100644
index 0000000000..d6983ee881
--- /dev/null
+++ b/assets/Studio/StudioCommentHandler.js
@@ -0,0 +1,127 @@
+import { showSnackbar } from '../Layout/Snackbar'
+
+export default class {
+  removeComment(studioID, element, commentID, isReply, parentID) {
+    const removeError = document.getElementById('comment-remove-error').value
+
+    fetch('../removeStudioComment/', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ studioID, commentID, parentID, isReply }),
+    })
+      .then((response) => {
+        if (response.ok) {
+          this.hideComment(element)
+          this.updateCommentCount(-1)
+          this.increaseActivityCount()
+          if (isReply && parentID > 0) {
+            const pc = document.getElementById('info-' + parentID)
+            pc.textContent = (pc.textContent - 1).toString()
+          }
+        } else {
+          console.error(response.status)
+          showSnackbar('#share-snackbar', removeError)
+        }
+      })
+      .catch((e) => {
+        console.error(e)
+        showSnackbar('#share-snackbar', removeError)
+      })
+  }
+
+  // Function to post a comment
+  postComment(studioID, isReply) {
+    const comment = isReply
+      ? document.querySelector('#add-reply input').value
+      : document.querySelector('#add-comment textarea').value
+    const commentError = document.getElementById('comment-error').value
+    const parentID = isReply ? document.getElementById('cmtID').value : 0
+
+    if (comment.trim() === '') {
+      return
+    }
+
+    fetch('../postCommentToStudio/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ studioID, comment, parentID }),
+    })
+      .then((response) => {
+        if (response.ok) {
+          if (isReply) {
+            // ToDo: create template just for comment, and make it injectable via js but use twig
+            // document.querySelector('#add-reply input').value = '';
+            // document.getElementById('info-' + parentID).textContent = response.replies_count;
+          } else {
+            // ToDo: create template just for comment, and make it injectable via js but use twig
+            window.location.reload()
+            document.querySelector('#add-comment textarea').value = ''
+            this.updateCommentCount(1)
+          }
+          this.increaseActivityCount()
+        } else {
+          console.error(response.status)
+          showSnackbar('#share-snackbar', commentError)
+        }
+      })
+      .catch((e) => {
+        console.error(e)
+        showSnackbar('#share-snackbar', commentError)
+      })
+  }
+
+  // Function to load replies
+  loadReplies(commentID) {
+    showSnackbar('#share-snackbar', 'Replies not yet supported')
+    // document.getElementById('modal-body').innerHTML = '';
+    // document.getElementById('cmtID').value = commentID;
+    //
+    // fetch('../loadCommentReplies/', {
+    //   method: 'GET',
+    //   headers: {
+    //     'Content-Type': 'application/json'
+    //   },
+    //   body: JSON.stringify({ commentID })
+    // })
+    //   .then(response => response.text())
+    //   .then(data => {
+    //     document.getElementById('comment-replies-body').innerHTML = data;
+    //   })
+    //   .catch(() => {
+    //     document.getElementById('comment-replies-body').innerHTML = '<h1>Failed to load replies</h1>';
+    //   });
+  }
+
+  showNoCommentsInfoMessage() {
+    document.getElementById('no-comments').style.display = 'block'
+  }
+
+  hideNoCommentsInfoMessage() {
+    document.getElementById('no-comments').style.display = 'none'
+  }
+
+  hideComment(element) {
+    element.closest('.studio-comment').style.display = 'none'
+    element.nextElementSibling.style.display = 'none'
+  }
+
+  updateCommentCount(byCount) {
+    const cc = document.getElementById('comments-count')
+    const newCount = parseInt(cc.textContent) + byCount
+    cc.textContent = newCount.toString()
+    if (newCount <= 0) {
+      this.showNoCommentsInfoMessage()
+    } else {
+      this.hideNoCommentsInfoMessage()
+    }
+  }
+
+  increaseActivityCount() {
+    const tc = document.getElementById('activity_count')
+    tc.textContent = (parseInt(tc.textContent) + 1).toString()
+  }
+}
diff --git a/assets/Studio/StudioDetailPage.js b/assets/Studio/StudioDetailPage.js
index 8b5e346cb6..7d415d9998 100644
--- a/assets/Studio/StudioDetailPage.js
+++ b/assets/Studio/StudioDetailPage.js
@@ -5,173 +5,76 @@ import '../Components/TextArea'
 import '../Components/TextField'
 import { showSnackbar } from '../Layout/Snackbar'
 import Swal from 'sweetalert2'
+import StudioCommentHandler from './StudioCommentHandler'
 require('../Project/ProjectList.scss')
 require('./AdminSettings.scss')
 require('./MembersList.scss')
 require('./ActivityList.scss')
 require('./Studio.scss')
+document.getElementById('std-header-form')?.addEventListener('change', () => {
+  event.preventDefault()
+  const fileInput = document.getElementById('std-header')
+  const studioId = document.getElementById('studio-id').value
+  if (fileInput.files.length > 0) {
+    uploadCoverImage(fileInput.files[0], studioId)
+  }
+})
 
-// $('.studio-detail__header__details__button--upload-image').on('click', () => {
-//   uploadCoverImage()
-// })
+document.querySelectorAll('.comment-delete-button').forEach((element) =>
+  element.addEventListener('click', (e) => {
+    const studioId = document.getElementById('studio-id').value
+    new StudioCommentHandler().removeComment(
+      studioId,
+      element,
+      element.dataset.commentId,
+      false,
+      0,
+    )
+  }),
+)
+
+document
+  .getElementById('studio-send-comment')
+  ?.addEventListener('click', () => {
+    const studioId = document.getElementById('studio-id').value
+    new StudioCommentHandler().postComment(studioId, false)
+  })
 
-// function showMoreLessDescription (element) {
-//   const more = $('#showMore-text').val()
-//   const less = $('#showLess-text').val()
-//   $('#studio-desc').toggleClass('desc-show-less')
-//   if (element.text() === more) {
-//     element.text(less)
-//   } else {
-//     element.text(more)
-//   }
-// }
-//
-// function removeProject (projectID) {
-//   const removeSuccess = $('#project-remove-success').val()
-//   const removeError = $('#project-remove-error').val()
-//   const studioID = $('#studio-id').val()
-//   $.ajax({
-//     url: '../removeStudioProject/',
-//     type: 'POST',
-//     data: {
-//       studioID: studioID,
-//       projectID: projectID
-//     },
-//     success: function (data, status) {
-//       if (status === 'success') {
-//         // eslint-disable-next-line no-undef
-//         showSnackbar('#share-snackbar', removeSuccess)
-//         $('#project-' + projectID).fadeOut()
-//         $('#projects-count').text(data.projects_count)
-//         $('#activities_count').text(data.activities_count)
-//       } else {
-//         // eslint-disable-next-line no-undef
-//         showSnackbar('#share-snackbar', removeError)
-//       }
-//     },
-//     fail: function () {
-//       // eslint-disable-next-line no-undef
-//       showSnackbar('#share-snackbar', removeError)
-//     }
-//   })
-// }
-//
-// function removeComment (element, commentID, isReply, parentID) {
-//   const studioID = $('#studio-id').val()
-//   const removeError = $('#comment-remove-error').val()
-//   $.ajax({
-//     url: '../removeStudioComment/',
-//     type: 'POST',
-//     data: {
-//       studioID: studioID,
-//       commentID: commentID,
-//       parentID: parentID,
-//       isReply: isReply
-//     },
-//     success: function (data, status) {
-//       if (status === 'success') {
-//         element.parents('.studio-comment').fadeOut().next('hr').fadeOut()
-//         $('#comments-count').text(data.comments_count)
-//         $('#activities_count').text(data.activities_count)
-//         if (isReply && parentID > 0) {
-//           $('#info-' + parentID).text(data.replies_count)
-//         }
-//       } else {
-//         // eslint-disable-next-line no-undef
-//         showSnackbar('#share-snackbar', removeError)
-//       }
-//     },
-//     fail: function () {
-//       // eslint-disable-next-line no-undef
-//       showSnackbar('#share-snackbar', removeError)
-//     }
-//   })
-// }
-//
-// function postComment (isReply) {
-//   const studioID = $('#studio-id').val()
-//   const comment = isReply ? $('#add-reply').find('input').val() : $('#add-comment').find('input').val()
-//   const commentError = $('#comment-error').val()
-//   const parentID = isReply ? $('#cmtID').val() : 0
-//   if (comment.trim() === '') {
-//     return
-//   }
-//   $.ajax({
-//     url: '../postCommentToStudio/',
-//     type: 'POST',
-//     data: {
-//       studioID: studioID,
-//       comment: comment,
-//       isReply: isReply,
-//       parentID: parentID
-//     },
-//     success: function (data, status) {
-//       if (status === 'success') {
-//         if (isReply) {
-//           $('#add-reply').before(data.comment).find('input').val('')
-//           $('#info-' + parentID).text(data.replies_count)
-//         } else {
-//           $('#add-comment').before(data.comment).find('input').val('')
-//           $('#comments-count').text(data.comments_count)
-//           $('#no-comments').hide()
-//         }
-//         $('#activities_count').text(data.activities_count)
-//       } else {
-//         // eslint-disable-next-line no-undef
-//         showSnackbar('#share-snackbar', commentError)
-//       }
-//     },
-//     fail: function () {
-//       // eslint-disable-next-line no-undef
-//       showSnackbar('#share-snackbar', commentError)
-//     }
-//   })
-// }
-//
-// function loadReplies (commentID) {
-//   $('#modal-body').html('')
-//   $('#cmtID').val(commentID)
-//   $.ajax({
-//     url: '../loadCommentReplies/',
-//     type: 'GET',
-//     data: {
-//       commentID: commentID
-//     },
-//     success: function (data, status) {
-//       if (status === 'success') {
-//         $('#comment-replies-body').html(data)
-//       }
-//     },
-//     fail: function () {
-//       $('#comment-replies-body').html('<h1>Failed to load replies</h1>')
-//     }
-//   })
-// }
-//
-// function uploadCoverImage () {
-//   const updateCoverError = $('#update-cover-error').val()
-//   if ($('#std-header').val() !== '') {
-//     $.ajax({
-//       type: 'POST',
-//       url: '../uploadStudioCover/',
-//       cache: false,
-//       processData: false,
-//       contentType: false,
-//       data: new FormData(document.getElementById('std-header-form')),
-//       success: function (data, status) {
-//         if (status === 'success') {
-//           $('#studio-img-container').find('img').attr('src', data.new_cover)
-//         } else {
-//           showSnackbar('#share-snackbar', updateCoverError)
-//         }
-//       },
-//       fail: function () {
-//         showSnackbar('#share-snackbar', updateCoverError)
-//       }
-//     })
-//   }
-// }
-// }
+document.querySelectorAll('.comment-replies').forEach((element) =>
+  element.addEventListener('click', (e) => {
+    const studioId = document.getElementById('studio-id').value
+    new StudioCommentHandler().loadReplies(
+      studioId,
+      element,
+      element.dataset.commentId,
+      false,
+      0,
+    )
+  }),
+)
+function uploadCoverImage(file, studioId) {
+  const updateCoverError = document.getElementById('update-cover-error').value
+
+  const formData = new FormData()
+  formData.append('header-img', file)
+  formData.append('std-id', studioId)
+
+  fetch('../uploadStudioCover/', {
+    method: 'POST',
+    body: formData,
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.new_cover) {
+        document.querySelector('#studio-img-container img').src = data.new_cover
+      } else {
+        showSnackbar('#share-snackbar', updateCoverError)
+      }
+    })
+    .catch(() => {
+      showSnackbar('#share-snackbar', updateCoverError)
+    })
+}
 
 document.addEventListener('DOMContentLoaded', () => {
   const bodyContentParent = document.getElementById('main_container_content')
diff --git a/assets/Studio/Studios.scss b/assets/Studio/Studios.scss
index c1ff138827..463e7a776d 100644
--- a/assets/Studio/Studios.scss
+++ b/assets/Studio/Studios.scss
@@ -167,17 +167,6 @@ $list-item-padding-overflow-x: 1.5rem;
   overflow: hidden;
 }
 
-#studio-detail__header__details__button--upload-image {
-  position: absolute;
-  bottom: 0;
-  left: 45%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30%;
-  background-color: #fff;
-}
-
 .tab-text {
   font-size: 0.95em;
   letter-spacing: 0.02em;
diff --git a/bin/checkCatroidRepositoryForNewBricks b/bin/checkCatroidRepositoryForNewBricks
index 4cc920f925..5cc05f3284 100755
--- a/bin/checkCatroidRepositoryForNewBricks
+++ b/bin/checkCatroidRepositoryForNewBricks
@@ -14,7 +14,7 @@
  */
 
 $url1 = 'https://raw.githubusercontent.com/Catrobat/Catroid/develop/catroid/src/main/java/org/catrobat/catroid/io/XstreamSerializer.java';
-$url2 = 'https://raw.githubusercontent.com/Catrobat/Catroid/develop/catroid/src/main/java/org/catrobat/catroid/ui/fragment/CategoryBricksFactory.java';
+$url2 = 'https://raw.githubusercontent.com/Catrobat/Catroid/3204098b163b248cd0bbe03d73002632e694e8f5/catroid/src/main/java/org/catrobat/catroid/ui/fragment/CategoryBricksFactory.kt';
 $catroid_data_set_1 = file_get_contents($url1);
 $catroid_data_set_2 = file_get_contents($url2);
 
@@ -46,7 +46,7 @@ $all_catroid_bricks_and_scripts = array_unique(
 );
 asort($all_catroid_bricks_and_scripts);
 
-$path = './src/Catrobat/CatrobatCode/Parser/Constants.php';
+$path = './src/Project/CatrobatCode/Parser/Constants.php';
 $catroweb_data_set = file_get_contents($path);
 
 if (!$catroweb_data_set)
diff --git a/bin/x_test.sh b/bin/x_test.sh
deleted file mode 100755
index 8ba3392a9c..0000000000
--- a/bin/x_test.sh
+++ /dev/null
@@ -1,10 +0,0 @@
-#!/bin/bash
-npm run encore dev
-rm -rf var/cache/test/*
-bin/console cache:clear --env=test
-php bin/phpunit tests
-read -p "Check for failed tests. Press any key to continue." any_key
-php bin/phpspec run
-read -p "Check for failed tests. Press any key to continue." any_key
-read -p "Make sure Chrome is running. Press any key to continue." any_key
-php bin/behat
diff --git a/package.json b/package.json
index a9f629d25a..3e003699ec 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,15 @@
     "fix-asset": "npx prettier . --write",
     "test-php": "php bin/php-cs-fixer fix --dry-run --allow-risky=yes --verbose --format=txt",
     "fix-php": "php bin/php-cs-fixer fix --allow-risky=yes --verbose --format=txt",
+    "chrome": "google-chrome-stable --headless --remote-debugging-address=0.0.0.0 --remote-debugging-port=9222 --disable-gpu --log-level=0",
+    "test-e2e": "bin/behat",
     "dev-server": "encore dev-server",
     "dev": "encore dev",
     "watch": "encore dev --watch",
     "build": "encore production --progress",
     "encore": "encore",
-    "prod": "encore prod"
+    "prod": "encore prod",
+    "reset": "bin/console catro:reset --hard --limit 20"
   },
   "repository": {
     "type": "git",
diff --git a/src/Application/Controller/Studio/StudioController.php b/src/Application/Controller/Studio/StudioController.php
index d44f91a298..de04da550d 100644
--- a/src/Application/Controller/Studio/StudioController.php
+++ b/src/Application/Controller/Studio/StudioController.php
@@ -251,7 +251,7 @@ public function loadStudioMembersList(Request $request): Response
       $projects_per_member[$member->getID()] = $this->studio_manager->countStudioUserProjects($member->getStudio(), $member->getUser());
     }
 
-    return $this->render('Studio/members_list.html.twig', [
+    return $this->render('Studio/MembersList.html.twig', [
       'is_studio_admin' => $is_studio_admin,
       'members' => $members,
       'projects_per_member' => $projects_per_member,
@@ -376,33 +376,21 @@ public function removeProjectFromStudio(Request $request): JsonResponse
   /**
    * ToDo: move to capi.
    */
-  #[Route(path: '/removeStudioComment/', name: 'remove_studio_comment', methods: ['POST'])]
+  #[Route(path: '/removeStudioComment/', name: 'remove_studio_comment', methods: ['DELETE'])]
   public function removeCommentFromStudio(Request $request): JsonResponse
   {
-    $comment_id = $request->request->getInt('commentID');
-    $isReply = trim((string) $request->request->get('isReply'));
-    $parent_id = $request->request->getInt('parentID');
-    $studio = $this->studio_manager->findStudioById(trim((string) $request->request->get('studioID')));
+    $data = json_decode($request->getContent(), true);
+    $comment_id = (int) $data['commentID'];
+    $studio = $this->studio_manager->findStudioById(trim((string) $data['studioID']));
     if (!$comment_id || is_null($studio)) {
       return new JsonResponse([], Response::HTTP_NOT_FOUND);
     }
 
-    $replies_count = null;
     /** @var User|null $user */
     $user = $this->getUser();
     $this->studio_manager->deleteCommentFromStudio($user, $comment_id);
-    if ('true' === $isReply && $parent_id > 0) {
-      $replies_count = $this->studio_manager->countCommentReplies($parent_id).' '.$this->translator->trans('studio.details.replies', [], 'catroweb');
-    }
-
-    $comments_count = ' ('.$this->studio_manager->countStudioComments($studio).')';
-    $activities_count = $this->studio_manager->countStudioActivities($studio);
-    if (is_null($this->studio_manager->findStudioCommentById($comment_id))) {
-      return new JsonResponse(['comments_count' => $comments_count, 'activities_count' => $activities_count,
-        'replies_count' => $replies_count, ], Response::HTTP_OK);
-    }
 
-    return new JsonResponse([], Response::HTTP_NOT_FOUND);
+    return new JsonResponse(null, Response::HTTP_NO_CONTENT);
   }
 
   /**
@@ -411,50 +399,21 @@ public function removeCommentFromStudio(Request $request): JsonResponse
   #[Route(path: '/postCommentToStudio/', name: 'post_studio_comment', methods: ['POST'])]
   public function postComment(Request $request): JsonResponse
   {
-    $isReply = 'true' == $request->request->get('isReply') && $request->request->getInt('parentID') > 0;
-    $studio = $this->studio_manager->findStudioById(trim((string) $request->request->get('studioID')));
-    $comment_text = trim((string) $request->request->get('comment'));
+    $data = json_decode($request->getContent(), true);
+    $studio = $this->studio_manager->findStudioById(trim((string) $data['studioID']));
+    $comment_text = trim((string) $data['comment']);
+    $parent_id = (int) $data['parentID'];
+
     if ('' === $comment_text) {
       return new JsonResponse('', Response::HTTP_NOT_FOUND);
     }
 
-    $replies_count = null;
-    $comments_count = null;
     /** @var User|null $user */
     $user = $this->getUser();
-    if ($isReply) {
-      $comment = $this->studio_manager->addCommentToStudio($user, $studio, $comment_text, $request->request->getInt('parentID'));
-      $replies_count = $this->studio_manager->countCommentReplies($request->request->getInt('parentID')).' '.$this->translator->trans('studio.details.replies', [], 'catroweb');
-    } else {
-      $comment = $this->studio_manager->addCommentToStudio($user, $studio, $comment_text);
-      $comments_count = ' ('.$this->studio_manager->countStudioComments($studio).')';
-    }
+    $comment = $this->studio_manager->addCommentToStudio($user, $studio, $comment_text, $parent_id);
 
-    $activities_count = $this->studio_manager->countStudioActivities($studio);
-    $avatarSrc = $comment->getUser()->getAvatar() ?? '/images/default/avatar_default.png';
-    $result = '<div class="studio-comment">';
-    $result .= '<img class="comment-avatar" src="'.$avatarSrc.'" alt="Card image">';
-    $result .= '<div class="comment-content">';
-    $result .= '<a href="/app/user/'.$comment->getId().'">'.$comment->getUsername().'</a>';
-    $result .= '<a class="comment-delete-button" data-bs-toggle="tooltip" onclick="';
-    $result .= '(new Studio()).removeComment($(this), '.$comment->getId().',';
-    $result .= $isReply ? 'true,'.$comment->getParentId().')">' : 'false, 0)">';
-    $result .= '<i class="ms-2 material-icons text-danger">delete</i></a>';
-    $result .= '<p>'.$comment->getText().'</p>';
-    $result .= '<div class="comment-info">';
-    $result .= '<span class="comment-time col-6">';
-    $result .= '<span class="material-icons comment-info-icons">watch_later</span>'.$comment->getUploadDate()->format('Y-m-d').'</span>';
-    if (!$isReply) {
-      $result .= '<a class="comment-replies col-6" onclick="(new Studio()).loadReplies('.$comment->getId().')" data-bs-toggle="modal" data-bs-target="#comment-reply-modal">';
-      $result .= '<span class="material-icons comment-info-icons">forum</span>';
-      $result .= '<span id="info-'.$comment->getId().'">0 '.$this->translator->trans('studio.details.replies', [], 'catroweb').'</span>';
-      $result .= '</div></div></div><hr class="comment-hr">';
-    }
-
-    $result .= '</div></div></div>';
     if ($comment->getText() === $comment_text) {
-      return new JsonResponse(['comment' => $result, 'replies_count' => $replies_count,
-        'comments_count' => $comments_count, 'activities_count' => $activities_count, ], Response::HTTP_OK);
+      return new JsonResponse(null, Response::HTTP_CREATED);
     }
 
     return new JsonResponse([], Response::HTTP_NOT_FOUND);
@@ -467,7 +426,8 @@ public function postComment(Request $request): JsonResponse
   public function loadCommentReplies(Request $request): Response
   {
     $rs = '';
-    $comment_id = $request->query->getInt('commentID');
+    $data = json_decode($request->getContent(), true);
+    $comment_id = (int) $data['commentID'];
     $comment = $this->studio_manager->findStudioCommentById($comment_id);
     if (is_null($comment)) {
       return new JsonResponse([], Response::HTTP_NOT_FOUND);
@@ -499,7 +459,8 @@ public function loadCommentReplies(Request $request): Response
   public function uploadStudioCover(Request $request): Response
   {
     $studio = $this->studio_manager->findStudioById(trim((string) $request->request->get('std-id')));
-    $headerImg = $request->files->get('header-img');
+    $headerImg = $request->files->get('header-img');  // Expect the file to be named 'header-img'
+
     if (is_null($headerImg) || is_null($studio) || is_null($this->getUser())) {
       return new JsonResponse([], Response::HTTP_NOT_FOUND);
     }
@@ -507,19 +468,20 @@ public function uploadStudioCover(Request $request): Response
     $newPath = 'images/Studios/';
     $coverPath = $this->parameter_bag->get('catrobat.resources.dir').$newPath;
     $coverName = (new \DateTime())->getTimestamp().$headerImg->getClientOriginalName();
+
     if (!file_exists($coverPath)) {
       $fs = new Filesystem();
       $fs->mkdir($coverPath);
     }
 
     $headerImg->move($coverPath, $coverName);
-    $pathToSave = '/'.$newPath.$coverName;
-    $studio->setCoverPath('resources'.$pathToSave);
+    $pathToSave = 'resources/'.$newPath.$coverName;
+    $studio->setCoverPath($pathToSave);
     /** @var User $user */
     $user = $this->getUser();
     $this->studio_manager->changeStudio($user, $studio);
 
-    return new JsonResponse(['new_cover' => $pathToSave], Response::HTTP_OK);
+    return new JsonResponse(['new_cover' => '/'.$pathToSave], Response::HTTP_OK);
   }
 
   /**
diff --git a/templates/Studio/Details/CommentList.html.twig b/templates/Studio/Details/CommentList.html.twig
index 3faa91c191..5fca843f76 100644
--- a/templates/Studio/Details/CommentList.html.twig
+++ b/templates/Studio/Details/CommentList.html.twig
@@ -8,8 +8,7 @@
       <div class="comment-content">
         <a href="{{ url('profile', { id : comment.user.id }) }}">{{ comment.username }}</a>
         {% if user_role == 'admin' or comment.username == user_name %}
-          <a class="comment-delete-button" data-bs-toggle="tooltip"
-             onclick="(new Studio()).removeComment($(this),'{{ comment.id }}', false, 0)"
+          <a class="comment-delete-button" data-bs-toggle="tooltip" data-comment-id="{{ comment.id }}"
              title="{{ 'studio.details.comments.remove_comment'|trans({}, 'catroweb') }}">
             <i class="ms-2 material-icons text-danger">delete</i>
           </a>
@@ -18,7 +17,7 @@
         <div class="comment-info">
           <span class="comment-time col-6">
               <span class="material-icons comment-info-icons">watch_later</span>{{ comment.uploadDate.format('Y-m-d') }}</span>
-          <a class="comment-replies col-6" onclick="(new Studio()).loadReplies('{{ comment.id }}')"
+          <a class="comment-replies col-6" data-comment-id="{{ comment.id }}"
              data-bs-toggle="modal"
              data-bs-target="#comment-reply-modal">
             <span class="material-icons comment-info-icons">forum</span>
@@ -31,11 +30,9 @@
     <hr class="comment-hr">
   {% endfor %}
 
-  {% if comments|length == 0 and studio.isAllowComments == '1' %}
-    <p id="no-comments" class="mt-4 center">
-      {{ 'studio.details.comments.no_comments'|trans({}, 'catroweb') }}
-    </p>
-  {% endif %}
+  <p id="no-comments" class="mt-4 center" {% if comments|length > 0 and studio.isAllowComments == '1' %}style="display: none"{% endif %}>
+    {{ 'studio.details.comments.no_comments'|trans({}, 'catroweb') }}
+  </p>
   {% if comments|length == 0 and studio.isAllowComments == '0' %}
     <p id="disabled-comments" class="mt-4 center">
       {{ 'studio.details.comments.disabled_comments'|trans({}, 'catroweb') }}
@@ -61,8 +58,7 @@
           'mb': 'none'
         }
       }%}
-      <a href="javascript:void(0)"
-         onclick="(new Studio()).postComment(false)">{{ 'studio.details.comments.send'|trans({}, 'catroweb') }}</a>
+      <button id="studio-send-comment">{{ 'studio.details.comments.send'|trans({}, 'catroweb') }}</button>
     </div>
   {% endif %}
 
diff --git a/templates/Studio/Details/Header.html.twig b/templates/Studio/Details/Header.html.twig
index 9fec7cda81..8d640a8ca3 100644
--- a/templates/Studio/Details/Header.html.twig
+++ b/templates/Studio/Details/Header.html.twig
@@ -1,133 +1,131 @@
 <div class="studio-detail__header ">
-  <h2 class="studio-detail__header__name container" class="ps-3 pe-2 mt-2">{{ studio.name }}</h2>
-  <div class="studio-detail__header__details container">
 
-    <div class="col-3">
-      {{ studio.isPublic ? "studio.public" |trans({}, 'catroweb') : "studio.private" |trans({}, 'catroweb') }}
-    </div>
+  <div id="studio-img-container" class="studio-detail__header__img__container">
+    <img src="{{ asset(studio.CoverPath|default("")) }}" class="img-fluid" alt="">
+    {% if user_role == 'admin' %}
+      <form class="studio-detail__header__details__button--upload-image" id="std-header-form"
+            enctype="multipart/form-data" method="post">
+        <span class="material-icons">photo_camera</span>
+        <input id="std-header" name="header-img" type="file">
+        <input id="studio-id" name="studio-id" type="hidden" value="{{ studio.id }}">
+      </form>
+    {% endif %}
+  </div>
+
+  <div class="container">
+    <h2 class="studio-detail__header__name container" class="ps-3 pe-2 mt-2">{{ studio.name }}</h2>
+    <div class="studio-detail__header__details container">
+
+      <div class="col-3">
+        {{ studio.isPublic ? "studio.public" |trans({}, 'catroweb') : "studio.private" |trans({}, 'catroweb') }}
+      </div>
 
-    <div class="col-3">
-      {% if user_role != null %}
-        <div {{ stimulus_controller('studio--member-list', {
-              url: path('studio_members_list'),
-              studioId: studio.id,
-              listElementId: 'studioDetailMembersList'
-            }) }}
-        >
-          <a type="button"
-             class="studio-detail__header__details__button studio-detail__header__details__button--member"
-             data-bs-toggle="modal"
-             data-bs-target="#studioDetailMembersListModal"
-             data-action="click->studio--member-list#loadMembers"
+      <div class="col-3">
+        {% if user_role != null %}
+          <div {{ stimulus_controller('studio--member-list', {
+            url: path('studio_members_list'),
+            studioId: studio.id,
+            listElementId: 'studioDetailMembersList'
+          }) }}
           >
-            <span class="material-icons">person</span><span class="ms-2 member_count">{{ members_count }}</span>
-          </a>
-          {% include 'Components/FullscreenListModal.html.twig' with {
-            'modal':
-            {
-              'id': 'studioDetailMembersListModal',
-              'title': '' ~ 'studio.details.members_list.title'|trans({}, 'catroweb'),
-              'list_id': 'studioDetailMembersList'
-            }
-          } %}
-        </div>
-      {% else %}
-        <div class="studio-detail__header__details__info">
-          <span class="material-icons">person</span>
-          <span class="ms-2 member_count">{{ members_count }}</span>
-        </div>
-      {% endif %}
-    </div>
+            <a type="button"
+               class="studio-detail__header__details__button studio-detail__header__details__button--member"
+               data-bs-toggle="modal"
+               data-bs-target="#studioDetailMembersListModal"
+               data-action="click->studio--member-list#loadMembers"
+            >
+              <span class="material-icons">person</span><span class="ms-2 member_count">{{ members_count }}</span>
+            </a>
+            {% include 'Components/FullscreenListModal.html.twig' with {
+              'modal':
+              {
+                'id': 'studioDetailMembersListModal',
+                'title': '' ~ 'studio.details.members_list.title'|trans({}, 'catroweb'),
+                'list_id': 'studioDetailMembersList'
+              }
+            } %}
+          </div>
+        {% else %}
+          <div class="studio-detail__header__details__info">
+            <span class="material-icons">person</span>
+            <span class="ms-2 member_count">{{ members_count }}</span>
+          </div>
+        {% endif %}
+      </div>
 
-    <div class="col-3">
-      {% if user_role == 'admin' %}
-        <div {{ stimulus_controller('studio--activity-list', {
-              url: path('studio_activities_list'),
-              studioId: studio.id,
-              listElementId: 'studioDetailActivityList'
-            }) }}
-        >
-          <a type="button"
-             class="studio-detail__header__details__button studio-detail__header__details__button--activity"
-             data-bs-toggle="modal"
-             data-bs-target="#studioDetailActivityListModal"
-             data-action="click->studio--activity-list#loadActivities"
+      <div class="col-3">
+        {% if user_role == 'admin' %}
+          <div {{ stimulus_controller('studio--activity-list', {
+            url: path('studio_activities_list'),
+            studioId: studio.id,
+            listElementId: 'studioDetailActivityList'
+          }) }}
           >
+            <a type="button"
+               class="studio-detail__header__details__button studio-detail__header__details__button--activity"
+               data-bs-toggle="modal"
+               data-bs-target="#studioDetailActivityListModal"
+               data-action="click->studio--activity-list#loadActivities"
+            >
+              <span class="material-icons">schedule</span>
+              <span id="activity_count" class="ms-2 activity_count">{{ activities_count }}</span>
+            </a>
+            {% include 'Components/FullscreenListModal.html.twig' with {
+              'modal':
+              {
+                'id': 'studioDetailActivityListModal',
+                'title': '' ~ 'studio.details.activity_list.title'|trans({}, 'catroweb'),
+                'list_id': 'studioDetailActivityList'
+              }
+            } %}
+          </div>
+        {% else %}
+          <div class="studio-detail__header__details__info">
             <span class="material-icons">schedule</span>
-            <span class="ms-2 activity_count">{{ activities_count }}</span>
-          </a>
-          {% include 'Components/FullscreenListModal.html.twig' with {
-            'modal':
-            {
-              'id': 'studioDetailActivityListModal',
-              'title': '' ~ 'studio.details.activity_list.title'|trans({}, 'catroweb'),
-              'list_id': 'studioDetailActivityList'
-            }
-          } %}
-        </div>
-      {% else %}
-        <div class="studio-detail__header__details__info">
-          <span class="material-icons">schedule</span>
-          <span class="ms-2 activity_count">{{ activities_count }}</span>
-        </div>
-      {% endif %}
-    </div>
+            <span id="activity_count" class="ms-2 activity_count">{{ activities_count }}</span>
+          </div>
+        {% endif %}
+      </div>
 
       <div class="col-3">
-          {% if user_name %}
-              {% if user_role == 'admin' %}
-                  {# <!--
-            <div class="position-relative">
-                <div class="studio-detail__header__details__button--upload-image d-flex">
-                    <div>
-                        <form class="studio-detail__header__details__button--upload-image" id="std-header-form" method="post">
-                            <input id="std-header" type="file" name="header-img">
-                            <i class="material-icons md-light">camera_alt</i>
-                            <div class="button-show-ajax"></div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-
-            <button id="studio-detail__header__details__button--upload-image" class="btn btn-outline-primary btn-block" onclick="(new Studio()).updateHeader()">
-                <span class="material-icons">photo_camera</span>
+        {% if user_name %}
+          {% if user_role == 'admin' %}
+
+          {% elseif not status_public and status_private != 'pending' and status_private != 'declined' %}
+            <button
+                class="studio-detail__header__details__join-button btn btn-primary btn-block ajaxRequestJoinLeaveReport ajaxRequestJoin"
+                data-url="{{ path('studio_join', {'id': studio.id}) }}">
+              {{ 'studio.join'|trans({}, 'catroweb') }}
+            </button>
+          {% elseif status_private == 'pending' %}
+            <button
+                class="studio-detail__header__details__pending-button btn btn-outline-primary btn-block requestPending">
+              {{ 'studio.details.pending'|trans({}, 'catroweb') }}
+            </button>
+          {% elseif status_private == 'declined' %}
+            <button
+                class="studio-detail__header__details__declined-button btn btn-outline-primary btn-block requestDecline">
+              {{ 'studio.details.decline'|trans({}, 'catroweb') }}
+            </button>
+          {% elseif status_private == 'approved' or status_public %}
+            <button
+                class="studio-detail__header__details__leave-button btn btn-outline-primary btn-block ajaxRequestJoinLeaveReport ajaxRequestLeave"
+                data-url="{{ path('studio_leave', {'id': studio.id }) }}">
+              {{ 'studio.details.leave'|trans({}, 'catroweb') }}
             </button>
-
-            <form class="studio-detail__header__details__button--upload-image" id="std-header-form" action="" method="post">
-                <input id="std-header" name="header-img" type="file" onchange="(new Studio()).uploadHeader()">
-                <input id="std-id" name="std-id" type="hidden" value="{{ studio.id }}">
-                <input type="submit" style="display: none;">
-            </form>
-             --> #}
-              {% elseif  not status_public and status_private != 'pending' and status_private != 'declined' %}
-                  <button class="studio-detail__header__details__join-button btn btn-primary btn-block ajaxRequestJoinLeaveReport ajaxRequestJoin"
-                          data-url="{{ path('studio_join', {'id': studio.id}) }}">
-                      {{ 'studio.join'|trans({}, 'catroweb') }}
-                  </button>
-              {% elseif status_private == 'pending' %}
-                  <button class="studio-detail__header__details__pending-button btn btn-outline-primary btn-block requestPending">
-                      {{ 'studio.details.pending'|trans({}, 'catroweb') }}
-                  </button>
-              {% elseif status_private == 'declined' %}
-                  <button class="studio-detail__header__details__declined-button btn btn-outline-primary btn-block requestDecline">
-                      {{ 'studio.details.decline'|trans({}, 'catroweb') }}
-                  </button>
-              {% elseif status_private == 'approved' or status_public  %}
-                  <button class="studio-detail__header__details__leave-button btn btn-outline-primary btn-block ajaxRequestJoinLeaveReport ajaxRequestLeave"
-                          data-url="{{ path('studio_leave', {'id': studio.id }) }}">
-                      {{ 'studio.details.leave'|trans({}, 'catroweb') }}
-                  </button>
-              {% endif %}
-          {% else %}
-              <a href="{{ path('login') }}" class="studio-detail__header__details__join-button btn btn-outline-primary btn-block">
-                  {{ "studio.join" |trans({}, 'catroweb') }}
-              </a>
           {% endif %}
+        {% else %}
+          <a href="{{ path('login') }}"
+             class="studio-detail__header__details__join-button btn btn-outline-primary btn-block">
+            {{ "studio.join" |trans({}, 'catroweb') }}
+          </a>
+        {% endif %}
       </div>
+    </div>
 
-  </div>
+    {% include 'Studio/Details/Tabs.html.twig' %}
 
-  {% include 'Studio/Details/Tabs.html.twig' %}
+  </div>
 </div>
 
 
diff --git a/templates/Studio/Details/Tabs.html.twig b/templates/Studio/Details/Tabs.html.twig
index 22000acf66..c6ce18d3fd 100644
--- a/templates/Studio/Details/Tabs.html.twig
+++ b/templates/Studio/Details/Tabs.html.twig
@@ -18,9 +18,9 @@
             <button id="comments-tab" class="mdc-tab mdc-tab--active" data-bs-toggle="tab"
                     href="#comments-pane" role="tab" aria-selected="false" tabindex="0">
                                                 <span class="mdc-tab__content">
-                                                    <span
-                                                        class="tab-text">{{ "studio.details.comments.title" |trans({}, 'catroweb') }}&nbsp;</span><span
-                                                      id="comments-count">({{ comments_count }})</span></span>
+                                                  <span class="tab-text">{{ "studio.details.comments.title" |trans({}, 'catroweb') }}&nbsp;</span>
+                                                  (<span id="comments-count">{{ comments_count }}</span>)
+                                                </span>
               <span class="mdc-tab-indicator">
                                 <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                             </span>
diff --git a/templates/Studio/DetailsPage.html.twig b/templates/Studio/DetailsPage.html.twig
index f857ff2f88..deed13c60f 100644
--- a/templates/Studio/DetailsPage.html.twig
+++ b/templates/Studio/DetailsPage.html.twig
@@ -6,11 +6,6 @@
 
 {% block body %}
 
-
-<div id="studio-img-container" class="row">
-  <img src="{{ asset(studio.CoverPath|default("")) }}" class="img-fluid" alt="">
-</div>
-
 {% include 'Studio/Details/Header.html.twig' %}
 
 <div id="tab-content" class="tab-content container">