diff --git a/src/plugins/readAllNotificationsButton/index.tsx b/src/plugins/readAllNotificationsButton/index.tsx
index 0e08edb6d..ae66e11a4 100644
--- a/src/plugins/readAllNotificationsButton/index.tsx
+++ b/src/plugins/readAllNotificationsButton/index.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
 import { addServerListElement, removeServerListElement, ServerListRenderPosition } from "@api/ServerList";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
@@ -49,9 +51,11 @@ const ReadAllButton = () => (
     <Button
         onClick={onClick}
         size={Button.Sizes.MIN}
-        color={Button.Colors.BRAND}
-        style={{ marginTop: "2px", marginBottom: "8px", marginLeft: "9px" }}
-    >Read all</Button>
+        color={Button.Colors.CUSTOM}
+        className="vc-ranb-button"
+    >
+        Read All
+    </Button>
 );
 
 export default definePlugin({
diff --git a/src/plugins/readAllNotificationsButton/style.css b/src/plugins/readAllNotificationsButton/style.css
new file mode 100644
index 000000000..3d10b2bd5
--- /dev/null
+++ b/src/plugins/readAllNotificationsButton/style.css
@@ -0,0 +1,11 @@
+.vc-ranb-button {
+    color: var(--interactive-normal);
+    padding: 0 0.5em;
+    margin-bottom: 0.5em;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.vc-ranb-button:hover {
+    color: var(--interactive-active);
+}