diff --git a/UI/Reviews/ReviewElement.ts b/UI/Reviews/ReviewElement.ts
index 38b9f226a..526160b11 100644
--- a/UI/Reviews/ReviewElement.ts
+++ b/UI/Reviews/ReviewElement.ts
@@ -1,63 +1,54 @@
-/**
- * Shows the reviews and scoring base on mangrove.reviews
- * The middle element is some other component shown in the middle, e.g. the review input element
- */
 import {UIEventSource} from "../../Logic/UIEventSource";
 import {Review} from "../../Logic/Web/Review";
-import {UIElement} from "../UIElement";
 import Combine from "../Base/Combine";
 import Translations from "../i18n/Translations";
 import SingleReview from "./SingleReview";
 import BaseUIElement from "../BaseUIElement";
+import Img from "../Base/Img";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import Link from "../Base/Link";
 
-export default class ReviewElement extends UIElement {
-    private readonly _reviews: UIEventSource<Review[]>;
-    private readonly _subject: string;
-    private readonly _middleElement: BaseUIElement;
+/**
+ * Shows the reviews and scoring base on mangrove.reviews
+ * The middle element is some other component shown in the middle, e.g. the review input element
+ */
+export default class ReviewElement extends VariableUiElement {
 
     constructor(subject: string, reviews: UIEventSource<Review[]>, middleElement: BaseUIElement) {
-        super(reviews);
-        this._middleElement = middleElement;
-        if (reviews === undefined) {
-            throw "No reviews UIEVentsource Given!"
-        }
-        this._reviews = reviews;
-        this._subject = subject;
-    }
+        super(
+            reviews.map(revs => {
+                const elements = [];
+                revs.sort((a, b) => (b.date.getTime() - a.date.getTime())); // Sort with most recent first
+                const avg = (revs.map(review => review.rating).reduce((a, b) => a + b, 0) / revs.length);
+                elements.push(
+                    new Combine([
+                        SingleReview.GenStars(avg),
+                        new Link(
+                            revs.length === 1 ? Translations.t.reviews.title_singular.Clone() :
+                                Translations.t.reviews.title.Clone()
+                                    .Subs({count: "" + revs.length}),
+                            `https://mangrove.reviews/search?sub=${encodeURIComponent(subject)}`,
+                            true
+                        ),
+                    ])
 
-   
+                        .SetClass("font-2xl flex justify-between items-center pl-2 pr-2"));
 
-    InnerRender(): BaseUIElement {
+                elements.push(middleElement);
 
-        const elements = [];
-        const revs = this._reviews.data;
-        revs.sort((a, b) => (b.date.getTime() - a.date.getTime())); // Sort with most recent first
-        const avg = (revs.map(review => review.rating).reduce((a, b) => a + b, 0) / revs.length);
-        elements.push(
-            new Combine([
-               SingleReview.GenStars(avg),
-                `<a target="_blank" href='https://mangrove.reviews/search?sub=${encodeURIComponent(this._subject)}'>`,
-               revs.length === 1 ? Translations.t.reviews.title_singular :
-                   Translations.t.reviews.title
-                      .Subs({count: "" + revs.length})
-                ,
-                "</a>"
-            ])
+                elements.push(...revs.map(review => new SingleReview(review)));
+                elements.push(
+                    new Combine([
+                        Translations.t.reviews.attribution.Clone(),
+                        new Img('./assets/mangrove_logo.png')
+                    ])
 
-                .SetClass("font-2xl flex justify-between items-center pl-2 pr-2"));
-        
-        elements.push(this._middleElement);
+                        .SetClass("review-attribution"))
 
-        elements.push(...revs.map(review => new SingleReview(review)));
-        elements.push(
-            new Combine([
-                Translations.t.reviews.attribution,
-                "<img src='./assets/mangrove_logo.png'>"
-            ])
+                return new Combine(elements).SetClass("block");
+            })
+        );
 
-                .SetClass("review-attribution"))
-
-        return new Combine(elements).SetClass("block");
     }
 
 }
\ No newline at end of file
diff --git a/UI/Reviews/SingleReview.ts b/UI/Reviews/SingleReview.ts
index a595ba7f9..c0dc348e4 100644
--- a/UI/Reviews/SingleReview.ts
+++ b/UI/Reviews/SingleReview.ts
@@ -4,8 +4,8 @@ import Combine from "../Base/Combine";
 import {FixedUiElement} from "../Base/FixedUiElement";
 import Translations from "../i18n/Translations";
 import {Utils} from "../../Utils";
-import ReviewElement from "./ReviewElement";
 import BaseUIElement from "../BaseUIElement";
+import Img from "../Base/Img";
 
 export default class SingleReview extends UIElement{
     private _review: Review;
@@ -23,8 +23,8 @@ export default class SingleReview extends UIElement{
         }
         const scoreTen = Math.round(rating / 10);
         return new Combine([
-            "<img src='./assets/svg/star.svg' class='h-8 md:h-12'/>".repeat(Math.floor(scoreTen / 2)),
-            scoreTen % 2 == 1 ? "<img src='./assets/svg/star_half.svg' class='h-8 md:h-12'/>" : ""
+                ...Utils.TimesT(scoreTen / 2, _  => new Img('./assets/svg/star.svg').SetClass("'h-8 w-8 md:h-12")),
+            scoreTen % 2 == 1 ? new Img('./assets/svg/star_half.svg').SetClass('h-8 w-8 md:h-12') : undefined
         ]).SetClass("flex w-max")
     }
     InnerRender(): BaseUIElement {
@@ -39,7 +39,7 @@ export default class SingleReview extends UIElement{
                 new Combine([
                     new Combine([
 
-                        new Combine(["<b>",review.author,"</b>"]),
+                        new FixedUiElement(review.author).SetClass("font-bold"),
                         review.affiliated ? Translations.t.reviews.affiliated_reviewer_warning : "",
                     ]).SetStyle("margin-right: 0.5em"),
                     new FixedUiElement(`${d.getFullYear()}-${Utils.TwoDigits(d.getMonth() + 1)}-${Utils.TwoDigits(d.getDate())} ${Utils.TwoDigits(d.getHours())}:${Utils.TwoDigits(d.getMinutes())}`)
@@ -48,7 +48,7 @@ export default class SingleReview extends UIElement{
 
             ]
         );
-        el.SetClass("block p-2 m-1 rounded-xl subtle-background review-element");
+        el.SetClass("block p-2 m-4 rounded-xl subtle-background review-element");
         if(review.made_by_user.data){
             el.SetClass("border-attention-catch")
         }