diff --git a/adhocracy4/comments/static/comments/Comment.jsx b/adhocracy4/comments/static/comments/Comment.jsx
index 62478dbee..397b2b465 100644
--- a/adhocracy4/comments/static/comments/Comment.jsx
+++ b/adhocracy4/comments/static/comments/Comment.jsx
@@ -1,5 +1,5 @@
 const ReportModal = require('../../../reports/static/reports/react_reports').ReportModal
-const RatingBox = require('../../../ratings/static/ratings/react_ratings').RatingBox
+const RatingBox = require('../../../ratings/static/ratings/RatingBox')
 const Modal = require('../../../static/Modal')
 const CommentEditForm = require('./CommentEditForm')
 const CommentForm = require('./CommentForm')
@@ -86,6 +86,7 @@ class Comment extends React.Component {
           userRating={this.props.userRating}
           userRatingId={this.props.userRatingId}
           isReadOnly={this.props.isReadOnly}
+          isComment
         />
       )
     }
diff --git a/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap b/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
index 6003349b8..0deddc9b8 100644
--- a/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
+++ b/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
@@ -71,38 +71,55 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
               >
                 <div
                   class="rating"
+                  data-testid="rating-box"
                 >
                   <button
-                    aria-label="Click to vote up"
+                    aria-pressed="false"
                     class="rating-button rating-up"
                     disabled=""
+                    type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa fa-chevron-up"
+                      class="fa fa-thumbs-up"
                     />
+                     
                     10
+                     
                     <span
                       class="rating__label"
                     >
                       Likes
                     </span>
+                    <span
+                      class="aural"
+                    >
+                      Click to like
+                    </span>
                   </button>
                   <button
-                    aria-label="Click to vote down"
+                    aria-pressed="false"
                     class="rating-button rating-down"
                     disabled=""
+                    type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa fa-chevron-down"
+                      class="fa fa-thumbs-down"
                     />
+                     
                     2
+                     
                     <span
                       class="rating__label"
                     >
                       Dislikes
                     </span>
+                    <span
+                      class="aural"
+                    >
+                      Click to dislike
+                    </span>
                   </button>
                 </div>
                 <div
@@ -345,38 +362,55 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
             >
               <div
                 class="rating"
+                data-testid="rating-box"
               >
                 <button
-                  aria-label="Click to vote up"
+                  aria-pressed="false"
                   class="rating-button rating-up"
                   disabled=""
+                  type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="fa fa-chevron-up"
+                    class="fa fa-thumbs-up"
                   />
+                   
                   10
+                   
                   <span
                     class="rating__label"
                   >
                     Likes
                   </span>
+                  <span
+                    class="aural"
+                  >
+                    Click to like
+                  </span>
                 </button>
                 <button
-                  aria-label="Click to vote down"
+                  aria-pressed="false"
                   class="rating-button rating-down"
                   disabled=""
+                  type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="fa fa-chevron-down"
+                    class="fa fa-thumbs-down"
                   />
+                   
                   2
+                   
                   <span
                     class="rating__label"
                   >
                     Dislikes
                   </span>
+                  <span
+                    class="aural"
+                  >
+                    Click to dislike
+                  </span>
                 </button>
               </div>
               <div
@@ -681,38 +715,55 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
               >
                 <div
                   class="rating"
+                  data-testid="rating-box"
                 >
                   <button
-                    aria-label="Click to vote up"
+                    aria-pressed="false"
                     class="rating-button rating-up"
                     disabled=""
+                    type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa fa-chevron-up"
+                      class="fa fa-thumbs-up"
                     />
+                     
                     10
+                     
                     <span
                       class="rating__label"
                     >
                       Likes
                     </span>
+                    <span
+                      class="aural"
+                    >
+                      Click to like
+                    </span>
                   </button>
                   <button
-                    aria-label="Click to vote down"
+                    aria-pressed="false"
                     class="rating-button rating-down"
                     disabled=""
+                    type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa fa-chevron-down"
+                      class="fa fa-thumbs-down"
                     />
+                     
                     2
+                     
                     <span
                       class="rating__label"
                     >
                       Dislikes
                     </span>
+                    <span
+                      class="aural"
+                    >
+                      Click to dislike
+                    </span>
                   </button>
                 </div>
                 <div
@@ -960,38 +1011,55 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
             >
               <div
                 class="rating"
+                data-testid="rating-box"
               >
                 <button
-                  aria-label="Click to vote up"
+                  aria-pressed="false"
                   class="rating-button rating-up"
                   disabled=""
+                  type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="fa fa-chevron-up"
+                    class="fa fa-thumbs-up"
                   />
+                   
                   10
+                   
                   <span
                     class="rating__label"
                   >
                     Likes
                   </span>
+                  <span
+                    class="aural"
+                  >
+                    Click to like
+                  </span>
                 </button>
                 <button
-                  aria-label="Click to vote down"
+                  aria-pressed="false"
                   class="rating-button rating-down"
                   disabled=""
+                  type="button"
                 >
                   <i
                     aria-hidden="true"
-                    class="fa fa-chevron-down"
+                    class="fa fa-thumbs-down"
                   />
+                   
                   2
+                   
                   <span
                     class="rating__label"
                   >
                     Dislikes
                   </span>
+                  <span
+                    class="aural"
+                  >
+                    Click to dislike
+                  </span>
                 </button>
               </div>
               <div
diff --git a/adhocracy4/comments_async/static/comments_async/comment.jsx b/adhocracy4/comments_async/static/comments_async/comment.jsx
index 55c800828..6f64d992b 100644
--- a/adhocracy4/comments_async/static/comments_async/comment.jsx
+++ b/adhocracy4/comments_async/static/comments_async/comment.jsx
@@ -10,8 +10,7 @@ import CommentManageDropdown from './comment_manage_dropdown'
 import CommentList from './comment_list'
 import { ModeratorFeedback } from './moderator_feedback'
 import AiReport from './ai_report'
-
-import { RatingBox } from '../../../ratings/static/ratings/react_ratings'
+import RatingBox from '../../../ratings/static/ratings/RatingBox'
 
 const translated = {
   reportTitle: django.gettext('You want to report this content? Your message will be sent to the moderation. The moderation will look at the reported content. The content will be deleted if it does not meet our discussion rules (netiquette).'),
@@ -151,6 +150,7 @@ export default class Comment extends React.Component {
           userRating={this.props.userRating}
           userRatingId={this.props.userRatingId}
           isReadOnly={!this.props.has_rating_permission}
+          isComment
         />
       )
     }
diff --git a/adhocracy4/ratings/static/ratings/RatingBox.jsx b/adhocracy4/ratings/static/ratings/RatingBox.jsx
new file mode 100644
index 000000000..f9e43e648
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/RatingBox.jsx
@@ -0,0 +1,78 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import django from 'django'
+
+import { createOrModifyRating } from './rating_api'
+import RatingButton from './RatingButton'
+
+const translations = {
+  likes: django.gettext('Likes'),
+  dislikes: django.gettext('Dislikes')
+}
+
+const RatingBox = ({
+  positiveRatings,
+  negativeRatings,
+  userHasRating,
+  userRating,
+  userRatingId,
+  isReadOnly,
+  contentType,
+  objectId,
+  authenticatedAs,
+  isComment,
+  render
+}) => {
+  const [ratings, setRatings] = useState({ negative: negativeRatings, positive: positiveRatings })
+  const [userRatingData, setUserRatingData] = useState({ userHasRating, userRating, userRatingId })
+
+  const clickHandler = useCallback(async (number) => {
+    const [ratings, _userRatingData] = await createOrModifyRating(number, objectId, contentType, userRatingData.userRatingId)
+
+    setRatings(ratings)
+    setUserRatingData({ ...userRatingData, ..._userRatingData })
+  }, [userRatingData, contentType, objectId])
+
+  const customChildren = useMemo(() => {
+    if (render && typeof render === 'function') {
+      return render({ ratings, userRatingData, isReadOnly, clickHandler })
+    }
+    return null
+  }, [clickHandler, isReadOnly, ratings, render, userRatingData])
+
+  return (
+    <div className="rating" data-testid="rating-box">
+      {customChildren ?? (
+        <>
+          <RatingButton
+            isReadOnly={isReadOnly}
+            onClick={clickHandler}
+            active={userRatingData.userRating === 1}
+            rating={1}
+            authenticatedAs={authenticatedAs}
+            id={objectId}
+            isComment={isComment}
+          >
+            <i className="fa fa-thumbs-up" aria-hidden="true" />{' '}
+            {ratings.positive}{' '}
+            <span className="rating__label">{translations.likes}</span>
+          </RatingButton>
+          <RatingButton
+            isReadOnly={isReadOnly}
+            onClick={clickHandler}
+            active={userRatingData.userRating === -1}
+            rating={-1}
+            authenticatedAs={authenticatedAs}
+            id={objectId}
+            isComment={isComment}
+          >
+            <i className="fa fa-thumbs-down" aria-hidden="true" />{' '}
+            {ratings.negative}{' '}
+            <span className="rating__label">{translations.dislikes}</span>
+          </RatingButton>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default RatingBox
diff --git a/adhocracy4/ratings/static/ratings/RatingButton.jsx b/adhocracy4/ratings/static/ratings/RatingButton.jsx
new file mode 100644
index 000000000..0989434f2
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/RatingButton.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import django from 'django'
+import config from '../../../static/config'
+
+const translations = {
+  upvote: django.gettext('Click to like'),
+  downvote: django.gettext('Click to dislike')
+}
+
+const getRedirectUrl = (id) => config.getLoginUrl() + (id ? encodeURIComponent('?comment=' + id) : '')
+
+const RatingButton = ({
+  rating,
+  active,
+  onClick,
+  authenticatedAs,
+  isReadOnly,
+  children,
+  id,
+  isComment
+}) => {
+  const onClickWrapper = () => {
+    if (authenticatedAs === null) {
+      window.location.href = getRedirectUrl(isComment && id)
+    }
+    if (isReadOnly) {
+      return null
+    }
+
+    onClick(active ? 0 : rating)
+  }
+
+  const type = rating === -1 ? 'down' : 'up'
+  const cssClasses = active
+    ? 'rating-button rating-' + type + ' is-selected'
+    : 'rating-button rating-' + type
+
+  return (
+    <button
+      aria-pressed={active}
+      className={cssClasses}
+      disabled={authenticatedAs !== null && isReadOnly}
+      onClick={onClickWrapper}
+      type="button"
+    >
+      {children}
+      <span className="aural">{type === 'up' ? translations.upvote : translations.downvote}</span>
+    </button>
+  )
+}
+
+export default RatingButton
diff --git a/adhocracy4/ratings/static/ratings/__tests__/RatingBox.jest.jsx b/adhocracy4/ratings/static/ratings/__tests__/RatingBox.jest.jsx
new file mode 100644
index 000000000..2d7701caf
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/__tests__/RatingBox.jest.jsx
@@ -0,0 +1,102 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import RatingBox from '../RatingBox'
+import { createOrModifyRating } from '../rating_api'
+
+jest.mock('../rating_api')
+
+const getData = ({ pos = 1, neg = 0, id = 2, userRating = null } = {}) => {
+  const mockData = {
+    meta_info: {
+      positive_ratings_on_same_object: pos,
+      negative_ratings_on_same_object: neg,
+      user_rating_on_same_object_value: userRating,
+      user_rating_on_same_object_id: 2
+    },
+    id
+  }
+
+  return [{
+    positive: mockData.meta_info.positive_ratings_on_same_object,
+    negative: mockData.meta_info.negative_ratings_on_same_object
+  }, {
+    userRating,
+    userHasRating: userRating !== null,
+    userRatingId: userRating !== null ? 2 : null
+  }, mockData]
+}
+
+const props = {
+  positiveRatings: 1,
+  negativeRatings: 0,
+  userHasRating: false,
+  userRating: null,
+  userRatingId: null,
+  contentType: 14,
+  objectId: 10
+}
+
+describe('RatingBox', () => {
+  beforeEach(() => {
+    createOrModifyRating.mockClear()
+  })
+
+  test('component renders', () => {
+    render(<RatingBox />)
+    const ratings = screen.getByTestId('rating-box')
+    const buttons = screen.getAllByRole('button')
+
+    expect(ratings).toBeTruthy()
+    expect(buttons).toHaveLength(2)
+    expect(buttons[0]).toHaveAccessibleName(/like/i)
+    expect(buttons[1]).toHaveAccessibleName(/dislike/i)
+  })
+  test('updates on click', async () => {
+    render(<RatingBox {...props} />)
+    const button = screen.getByRole('button', { name: /1 like/i })
+    expect(screen.getByRole('button', { name: /0 dislike/i })).toBeInTheDocument()
+
+    createOrModifyRating.mockReturnValue(getData({ pos: 2, userRating: 1 }))
+    fireEvent.click(button)
+    await waitFor(() => expect(createOrModifyRating).toHaveBeenCalledTimes(1))
+    expect(createOrModifyRating).toHaveBeenCalledWith(1, 10, 14, null)
+    expect(screen.getByRole('button', { name: /0 dislike/i })).toBeInTheDocument()
+    expect(button).toHaveAccessibleName(/2 likes/i)
+  })
+})
+
+describe('RatingBox custom render', () => {
+  beforeEach(() => {
+    createOrModifyRating.mockClear()
+  })
+  test('component renders with custom children', async () => {
+    render(
+      <RatingBox
+        {...props} render={
+        ({ ratings, userRatingData, isReadOnly, clickHandler }) => (
+          <>
+            <div data-testid="custom-rating-box">
+              {JSON.stringify({ ratings, userRatingData, isReadOnly })}
+              <button onClick={() => {
+                clickHandler(-1)
+              }}
+              >
+                dislike
+              </button>
+            </div>
+          </>
+        )
+      }
+      />
+    )
+
+    const ratings = screen.getByTestId('custom-rating-box')
+    expect(ratings).toMatchSnapshot()
+
+    const button = screen.getByRole('button', { name: /dislike/ })
+    createOrModifyRating.mockReturnValue(getData())
+    fireEvent.click(button)
+    await waitFor(() => expect(createOrModifyRating).toHaveBeenCalledTimes(1))
+    expect(createOrModifyRating).toHaveBeenCalledWith(-1, 10, 14, null)
+  })
+})
diff --git a/adhocracy4/ratings/static/ratings/__tests__/RatingButton.jest.jsx b/adhocracy4/ratings/static/ratings/__tests__/RatingButton.jest.jsx
new file mode 100644
index 000000000..3e7adb6ae
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/__tests__/RatingButton.jest.jsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import RatingButton from '../RatingButton'
+
+jest.mock('../../../../static/config', () => ({
+  getLoginUrl: () => '/login'
+}))
+
+const props = {
+  rating: -1,
+  active: false,
+  onClick: jest.fn(),
+  authenticatedAs: 'someone',
+  isReadOnly: false,
+  children: <span>Children</span>
+}
+
+describe('RatingButton', () => {
+  const originalWindow = window.location
+
+  beforeAll(() => {
+    props.onClick.mockClear()
+    delete window.location
+    window.location = { href: '' }
+  })
+
+  afterAll(() => {
+    // Restore original window.location
+    window.location = originalWindow
+  })
+
+  test('component renders', () => {
+    render(<RatingButton {...props} />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+
+    const children = screen.getByText('Children')
+    expect(children).toBeInTheDocument()
+  })
+
+  test('updates on click', () => {
+    render(<RatingButton {...props} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    expect(props.onClick).toHaveBeenCalledTimes(1)
+  })
+
+  test('redirects when not logged in', async () => {
+    render(<RatingButton {...props} authenticatedAs={null} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    await waitFor(() => expect(window.location.href).toEqual('/login'))
+  })
+
+  test('redirects when not logged in and readonly', async () => {
+    render(<RatingButton {...props} authenticatedAs={null} isReadOnly />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    await waitFor(() => expect(window.location.href).toEqual('/login'))
+  })
+
+  test('redirects to login and specific comment in next parameter', async () => {
+    render(<RatingButton {...props} authenticatedAs={null} isReadOnly id={2} isComment />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    await waitFor(() => expect(window.location.href).toEqual('/login%3Fcomment%3D2'))
+  })
+})
diff --git a/adhocracy4/ratings/static/ratings/__tests__/__snapshots__/RatingBox.jest.jsx.snap b/adhocracy4/ratings/static/ratings/__tests__/__snapshots__/RatingBox.jest.jsx.snap
new file mode 100644
index 000000000..048bb2c28
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/__tests__/__snapshots__/RatingBox.jest.jsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RatingBox custom render component renders with custom children 1`] = `
+<div
+  data-testid="custom-rating-box"
+>
+  {"ratings":{"negative":0,"positive":1},"userRatingData":{"userHasRating":false,"userRating":null,"userRatingId":null}}
+  <button>
+    dislike
+  </button>
+</div>
+`;
diff --git a/adhocracy4/ratings/static/ratings/rating_api.js b/adhocracy4/ratings/static/ratings/rating_api.js
new file mode 100644
index 000000000..3996610c1
--- /dev/null
+++ b/adhocracy4/ratings/static/ratings/rating_api.js
@@ -0,0 +1,96 @@
+import api from '../../../static/api'
+
+/**
+ * @param {number} number - the rating value, can be -1, 0 or 1
+ * @param {string} objectId - the object to be rated
+ * @param {string} contentTypeId - the content type id of the object
+
+ * @returns {Promise<Array>} - an array with the rating data (number of negative
+ *    and positive ratings) and the user rating data (value and id and userHasRating)
+ *    and the complete response data from the API.
+ */
+export async function createRating (number, objectId, contentTypeId) {
+  try {
+    const data = await api.rating.add({
+      urlReplaces: {
+        objectPk: objectId,
+        contentTypeId
+      },
+      value: number
+    })
+
+    return [{
+      positive: data.meta_info.positive_ratings_on_same_object,
+      negative: data.meta_info.negative_ratings_on_same_object
+    }, {
+      userRating: data.meta_info.user_rating_on_same_object_value,
+      userHasRating: true,
+      userRatingId: data.id
+    }, data]
+  } catch (error) {
+    if (error.status === 400 &&
+        error.responseJSON.length === 1 &&
+        Number.isInteger(parseInt(error.responseJSON[0]))
+    ) {
+      const userRatingId = parseInt(error.responseJSON[0])
+      const [ratings, userState, data] = (await modifyRating(number, userRatingId))[0]
+      return [
+        ratings,
+        {
+          ...userState,
+          userHasRating: true,
+          userRatingId
+        },
+        data
+      ]
+    }
+  }
+}
+
+/**
+ * @param {number} number - the rating value, can be -1, 0 or 1
+ * @param {number} id - the id of the users rating
+ * @param {string} objectId - the object to be rated
+ * @param {string} contentTypeId - the content type id of the object
+
+ * @returns {Promise<Array>} - an array with the rating data (number of negative
+ * and positive ratings) and the user rating data (value)
+ * and the complete response data from the API.
+ */
+export async function modifyRating (number, id, objectId, contentTypeId) {
+  const data = await api.rating.change({
+    urlReplaces: {
+      objectPk: objectId,
+      contentTypeId
+    },
+    value: number
+  }, id)
+  return [
+    {
+      positive: data.meta_info.positive_ratings_on_same_object,
+      negative: data.meta_info.negative_ratings_on_same_object
+    },
+    { userRating: data.meta_info.user_rating_on_same_object_value },
+    data
+  ]
+}
+
+/**
+ * Helper function to easily create OR modify a rating
+ *
+ * @param {number} number - the rating value, can be -1, 0 or 1
+ * @param {string} objectId - the object to be rated
+ * @param {string} contentTypeId - the content type id of the object
+ * @param {number} [id] - the id of the users rating
+
+ * @returns {Promise<Array>} - an array with the rating data (number of negative
+ * and positive ratings) and the user rating data (value)
+ * and the complete response data from the API.
+ */
+export async function createOrModifyRating (number, objectId, contentTypeId, id) {
+  if (id) {
+    return await modifyRating(number, id, objectId, contentTypeId)
+  } else {
+    return await createRating(number, objectId, contentTypeId)
+  }
+}
diff --git a/adhocracy4/ratings/static/ratings/react_ratings.jsx b/adhocracy4/ratings/static/ratings/react_ratings.jsx
index c09873a84..980a650f6 100644
--- a/adhocracy4/ratings/static/ratings/react_ratings.jsx
+++ b/adhocracy4/ratings/static/ratings/react_ratings.jsx
@@ -1,158 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import django from 'django'
-
-import api from '../../../static/api'
-import config from '../../../static/config'
-
-const translations = {
-  upvote: django.gettext('Click to vote up'),
-  downvote: django.gettext('Click to vote down'),
-  likes: django.gettext('Likes'),
-  dislikes: django.gettext('Dislikes')
-}
-
-class RatingBox extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      positiveRatings: this.props.positiveRatings,
-      negativeRatings: this.props.negativeRatings,
-      userHasRating: this.props.userRating !== null,
-      userRating: this.props.userRating,
-      userRatingId: this.props.userRatingId
-    }
-  }
-
-  handleRatingCreate (number) {
-    api.rating.add({
-      urlReplaces: {
-        objectPk: this.props.objectId,
-        contentTypeId: this.props.contentType
-      },
-      value: number
-    })
-      .done(function (data) {
-        this.setState({
-          positiveRatings: data.meta_info.positive_ratings_on_same_object,
-          negativeRatings: data.meta_info.negative_ratings_on_same_object,
-          userRating: data.meta_info.user_rating_on_same_object_value,
-          userHasRating: true,
-          userRatingId: data.id
-        })
-      }.bind(this))
-      .fail(function (jqXhr) {
-        if (jqXhr.status === 400 &&
-           jqXhr.responseJSON.length === 1 &&
-           Number.isInteger(parseInt(jqXhr.responseJSON[0]))) {
-          this.setState({
-            userHasRating: true,
-            userRatingId: jqXhr.responseJSON[0]
-          })
-          this.handleRatingModify(number, this.state.userRatingId)
-        }
-      }.bind(this))
-  }
-
-  handleRatingModify (number, id) {
-    api.rating.change({
-      urlReplaces: {
-        objectPk: this.props.objectId,
-        contentTypeId: this.props.contentType
-      },
-      value: number
-    }, id)
-      .done(function (data) {
-        this.setState({
-          positiveRatings: data.meta_info.positive_ratings_on_same_object,
-          negativeRatings: data.meta_info.negative_ratings_on_same_object,
-          userRating: data.meta_info.user_rating_on_same_object_value
-        })
-      }.bind(this))
-  }
-
-  ratingUp (e) {
-    e.preventDefault()
-    if (this.props.authenticatedAs === null) {
-      window.location.href = config.getLoginUrl()
-      return
-    }
-    if (this.props.isReadOnly) {
-      return
-    }
-    if (this.state.userHasRating) {
-      let number
-      if (this.state.userRating === 1) {
-        number = 0
-      } else {
-        number = 1
-      }
-      this.handleRatingModify(number, this.state.userRatingId)
-    } else {
-      this.handleRatingCreate(1)
-    }
-  }
-
-  ratingDown (e) {
-    e.preventDefault()
-    if (this.props.authenticatedAs === null) {
-      window.location.href = config.getLoginUrl()
-      return
-    }
-    if (this.props.isReadOnly) {
-      return
-    }
-    if (this.state.userHasRating) {
-      let number
-      if (this.state.userRating === -1) {
-        number = 0
-      } else {
-        number = -1
-      }
-      this.handleRatingModify(number, this.state.userRatingId)
-    } else {
-      this.handleRatingCreate(-1)
-    }
-  }
-
-  render () {
-    const getRatingClasses = ratingType => {
-      const valueForRatingType = ratingType === 'up' ? 1 : -1
-      const cssClasses = this.state.userRating === valueForRatingType
-        ? 'rating-button rating-' + ratingType + ' is-selected'
-        : 'rating-button rating-' + ratingType
-      return cssClasses
-    }
-
-    return (
-      <div className="rating">
-        <button
-          aria-label={translations.upvote}
-          className={getRatingClasses('up')}
-          disabled={this.props.isReadOnly}
-          onClick={this.ratingUp.bind(this)}
-        >
-          <i className="fa fa-chevron-up" aria-hidden="true" />
-          {this.state.positiveRatings}
-          <span className="rating__label">{translations.likes}</span>
-        </button>
-        <button
-          aria-label={translations.downvote}
-          className={getRatingClasses('down')}
-          disabled={this.props.isReadOnly}
-          onClick={this.ratingDown.bind(this)}
-        >
-          <i className="fa fa-chevron-down" aria-hidden="true" />
-          {this.state.negativeRatings}
-          <span className="rating__label">{translations.dislikes}</span>
-        </button>
-      </div>
-    )
-  }
-}
-
-module.exports.RatingBox = RatingBox
+import RatingBox from './RatingBox'
 
 module.exports.renderRatings = function (el) {
   const props = JSON.parse(el.getAttribute('data-attributes'))
diff --git a/adhocracy4/ratings/templatetags/react_ratings.py b/adhocracy4/ratings/templatetags/react_ratings.py
index 08ef8c8a5..047d0a550 100644
--- a/adhocracy4/ratings/templatetags/react_ratings.py
+++ b/adhocracy4/ratings/templatetags/react_ratings.py
@@ -33,7 +33,7 @@ def react_ratings(context, obj):
         user_rating_id = user_rating.pk
     else:
         user_rating_value = None
-        user_rating_id = -1
+        user_rating_id = None
 
     attributes = {
         "contentType": contenttype.pk,
diff --git a/changelog/8529.md b/changelog/8529.md
new file mode 100644
index 000000000..c368c0c74
--- /dev/null
+++ b/changelog/8529.md
@@ -0,0 +1,9 @@
+### Changed
+- Ratings are now functional components
+- RatingBox has been split into RatingBox and RatingButton
+- redirect when logged out now goes back to specific comment if the object was a comment
+
+### Added
+- RatingBox takes an optional render function to customize rendering
+- added `jest-dom` to tests, allowing for nicer matchers like `toBeInTheDocument`
+- added a rating_api file to allow for more modular api calls
diff --git a/docs/react_ratings.md b/docs/react_ratings.md
new file mode 100644
index 000000000..54a800abe
--- /dev/null
+++ b/docs/react_ratings.md
@@ -0,0 +1,129 @@
+# Ratings Component Documentation
+This document is there to provide a documentation about the slightly reworked 
+ratings component which allows for more customization in other projects
+
+
+## Code List
+
+* **RatingBox**:
+  Main component for displaying Ratings. This is used both in customized rendering
+  as well as default rendering (= the rendering that is used in adhocracy4). It
+  is also responsible for all the event handler logic.
+* **RatingButton**:
+  Button component responsible for displaying accessible rating options and 
+  passing the selected rating to the parent component.
+* **rating_api**:
+  API helper for modifying or creating ratings. Functions return an appropriate
+  state. 
+
+Patterns used:
+- [Render prop](https://react.dev/reference/react/Children#calling-a-render-prop-to-customize-rendering)
+
+## RatingBox
+
+The `RatingBox` component is the main component for ratings. You use this if you
+just want the default a4 `RatingBox` but also if you want to customize it.
+
+### Props
+
+* **positiveRatings**: Number of initial positive ratings
+* **negativeRatings**: Number of initial negative ratings
+* **userHasRating**: Boolean if the user initially has already rated
+* **userRating**: Value of the initial user rating (-1, null or 1)
+* **userRatingId**: Id of the user rating object
+* **isReadOnly**: Boolean if the rating box should be read only
+* **contentType**: ID of the content type to be rated
+* **objectId**: ID of the object to be rated
+* **authenticatedAs**: Currently authenticated user or null
+* **isComment**: Boolean if the rating is for a comment
+* **render**: This prop is used to provide custom rendering
+
+### Custom Rendering
+If your project needs something that's different than what a4 provides you with
+styling-wise, you can use the `render` prop to provide your own rendering. To do
+so, you pass a function to the `render` prop. The function will receive the
+following props:
+
+* **ratings**: An object with the following keys, representing the number of rates
+    * **positive**: Number of positive ratings
+    * **negative**: Number of negative ratings
+* **userRatingData**: An object with the following keys, representing the user state
+    * **userHasRating**: Boolean if the user has already rated
+    * **userRating**: Value of the user rating (-1, null or 1)
+    * **userRatingId**: Id of the user rating object or null
+* **isReadOnly**: Boolean if the rating box should be read only
+* **clickHandler**: Add this function to the element that should trigger the rating
+    and pass the rating value to it (-1, 0 or 1)
+
+Here an example if you would want to set the number of ratings in parentheses instead:
+
+```jsx
+<RatingBox {...otherProps} render={({ ratings, userRatingData, isReadOnly, clickHandler }) => (
+  <>
+    <button onClick={() => clickHandler(-1)}>dislike ({ratings.negative})</button>
+    <button onClick={() => clickHandler(-1)}>like ({ratings.positive})</button>
+  </>
+)} />
+```
+
+## RatingButton
+
+The `RatingButton` component is a button component that is used to display
+accessible rating options and pass the selected rating to the provided click handler.
+It is also responsible for redirecting if the user is not authenticated.
+
+### Props
+
+* **rating**: The value of the rating for this button (-1 or 1)
+* **active**: Whether the user has selected this rating
+* **onClick**: Function to be called when a rating is selected
+* **authenticatedAs**: Currently authenticated user or null
+* **isReadOnly**: Boolean if the rating button should be read only
+* **children**: The content you want to render inside the button
+* **id**: The id of a **comment** to be rated
+* **isComment**: Boolean if the rating is for a comment
+
+The last two props are only used to redirect to a specific comment if the user
+is not authenticated.
+
+### Styling
+You can style the rating buttons with the following classes:
+
+* **rating-button**: The base class for the rating button
+* **rating-down**: The class for the down rating button
+* **rating-up**: The class for the up rating button
+* **is-selected**: The class for the selected rating button
+* **.rating-button[disabled]**: The selector for a disabled rating button
+  * The button will only be disabled if **both** of the following are true:
+    * The user is not authenticated
+    * The rating is read only
+
+## RatingApi
+
+This is a set of functions made to help communicating with the ratings api. There
+is also a convenience function called createOrModifyRating that allows you to
+create or modify a rating in one go.
+
+### createRating
+A function that creates a rating, given the following parameters:
+
+* **number**: Value of the rating (-1, 0 or 1)
+* **objectId**: ID of the object to be rated
+* **contentType**: ID of the content type to be rated
+
+### modifyRating
+A function that modifies a rating, given the following parameters:
+
+* **number**: Value of the rating (-1, 0 or 1)
+* **id**: ID of the rating to be modified
+* **objectId**: ID of the object to be rated
+* **contentType**: ID of the content type to be rated
+
+### createOrModifyRating
+A convenience function that allows you to create or modify a rating in one go,
+given the following parameters:
+
+* **number**: Value of the rating (-1, 0 or 1)
+* **objectId**: ID of the object to be rated
+* **contentType**: ID of the content type to be rated
+* **id (optional)**: ID of the rating to be modified
diff --git a/jest.config.js b/jest.config.js
index fc57f69fc..e099a3133 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -54,7 +54,7 @@ const config = {
       esModules +
       ').+\\.(js|jsx|mjs|cjs|ts|tsx)$'
   ],
-  setupFiles: ['<rootDir>/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
   coverageReporters: ['lcov']
 }
 
diff --git a/setupTests.js b/setupTests.js
index 47fc61ff2..eb5f4b941 100644
--- a/setupTests.js
+++ b/setupTests.js
@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom'
+
 if (typeof window.URL.createObjectURL === 'undefined') {
   window.URL.createObjectURL = () => {}
 }