diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index 3ca7511a6d..73d2cc4556 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -1,6 +1,7 @@
 import React, {useContext} from 'react';
 import AppContext from '../AppContext';
 import NotSignedInBox from './NotSignedInBox';
+import Loading from './Loading';
 import Form from './Form';
 import Comment from './Comment';
 import Pagination from './Pagination';
@@ -41,7 +42,7 @@ const CommentsBox = (props) => {
 
     const {accentColor, pagination, member, comments} = useContext(AppContext);
 
-    const commentsElements = !comments ? 'Loading...' : comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={props.avatarSaturation} />);
+    const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} avatarSaturation={props.avatarSaturation} />);
 
     const containerClass = darkMode() ? 'dark' : '';
     const commentsCount = comments.length;
@@ -52,12 +53,16 @@ const CommentsBox = (props) => {
     return (
         <section className={'ghost-display ' + containerClass} style={style}>
             <Pagination />
-            <div className={!pagination ? 'mt-4' : ''}>
-                {commentsElements}
-            </div>
-            <div>
-                { member ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotSignedInBox /> }
-            </div>
+            {comments ?
+                <>
+                    <div className={!pagination ? 'mt-4' : ''}>
+                        {commentsElements}
+                    </div>
+                    <div>
+                        { member ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotSignedInBox /> }
+                    </div>
+                </>
+                : <Loading />}
         </section>
     );
 };
diff --git a/apps/comments-ui/src/components/Loading.js b/apps/comments-ui/src/components/Loading.js
new file mode 100644
index 0000000000..c715252de8
--- /dev/null
+++ b/apps/comments-ui/src/components/Loading.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {ReactComponent as SpinnerIcon} from '../images/icons/spinner.svg';
+
+function Loading() {
+    return (
+        <div class="flex items-center justify-center w-full h-36">
+            <SpinnerIcon className="w-12 h-12 mb-6 fill-[rgba(0,0,0,0.3)] dark:fill-[rgba(255,255,255,0.6)]" />
+        </div>
+    );
+}
+
+export default Loading;
diff --git a/apps/comments-ui/src/components/modals/ReportDialog.js b/apps/comments-ui/src/components/modals/ReportDialog.js
index 0181fcf6d1..59a1d28251 100644
--- a/apps/comments-ui/src/components/modals/ReportDialog.js
+++ b/apps/comments-ui/src/components/modals/ReportDialog.js
@@ -18,14 +18,14 @@ const ReportDialog = (props) => {
 
     let buttonIcon = null;
     if (props.progress === 'sending') {
-        buttonIcon = <SpinnerIcon className="w-[16px] h-[16px] mr-2" />;
+        buttonIcon = <SpinnerIcon className="w-[20px] h-[20px] mr-2 fill-white" />;
     } else if (props.progress === 'sent') {
         buttonIcon = <SuccessIcon className="w-[16px] h-[16px] mr-2" />;
     }
 
     return (
         <GenericDialog show={props.show} cancel={props.cancel}>
-            <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3">You sure you want to report?</h1>
+            <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">You sure you want to report?</h1>
             <p className="font-sans text-[1.45rem] text-neutral-500">You request will be sent to the owner of this site.</p>
             <div className="mt-10">
                 <button
diff --git a/apps/comments-ui/src/images/icons/spinner.svg b/apps/comments-ui/src/images/icons/spinner.svg
index a348b523aa..00e73e681e 100644
--- a/apps/comments-ui/src/images/icons/spinner.svg
+++ b/apps/comments-ui/src/images/icons/spinner.svg
@@ -1 +1,9 @@
-<svg width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(0 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(30 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(60 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(90 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(120 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(150 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(180 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(210 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(240 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(270 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(300 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(330 50 50) translate(0 -40)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
+<div class="loader loader--style3" title="2">
+    <svg version="1.1" id="loader-1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+        <path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/>
+        </path>
+    </svg>
+</div>
\ No newline at end of file