diff --git a/src/core/client/admin/components/ModerateCard/Markers.css b/src/core/client/admin/components/ModerateCard/Markers.css
index 6946babd1..316ec8a32 100644
--- a/src/core/client/admin/components/ModerateCard/Markers.css
+++ b/src/core/client/admin/components/ModerateCard/Markers.css
@@ -16,7 +16,6 @@
 }
 
 .detailsText {
-  color: var(--v2-palette-details-header);
   margin: 0;
 }
 
diff --git a/src/core/client/admin/components/ModerateCard/Markers.tsx b/src/core/client/admin/components/ModerateCard/Markers.tsx
index 747b6ebae..ba97b9668 100644
--- a/src/core/client/admin/components/ModerateCard/Markers.tsx
+++ b/src/core/client/admin/components/ModerateCard/Markers.tsx
@@ -2,7 +2,12 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
 import { useUUID } from "coral-framework/hooks";
-import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
+import {
+  Button,
+  ButtonIcon,
+  Flex,
+  HorizontalGutter,
+} from "coral-ui/components/v2";
 
 import styles from "./Markers.css";
 
@@ -28,14 +33,18 @@ const Markers: FunctionComponent<Props> = ({ children, details }) => {
               variantDefault: styles.detailsButton,
               colorDefault: styles.detailsButtonColorRegular,
             }}
+            variant="ghost"
             onClick={toggleDetails}
             aria-controls={uuid}
             aria-expanded={showDetails}
+            color="mono"
           >
             <Localized id="moderate-markers-details">
               <span className={styles.detailsText}>DETAILS</span>
             </Localized>
-            <Icon>{showDetails ? "arrow_drop_up" : "arrow_drop_down"}</Icon>
+            <ButtonIcon>
+              {showDetails ? "arrow_drop_up" : "arrow_drop_down"}
+            </ButtonIcon>
           </Button>
         )}
       </Flex>
diff --git a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
index d621b7f5f..e38a79a3e 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
@@ -170,9 +170,9 @@ exports[`approves comment in reported queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                data-color="default"
-                data-variant="default"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                data-color="mono"
+                data-variant="ghost"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -188,7 +188,7 @@ exports[`approves comment in reported queue: dangling 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  className="Icon-root Icon-sm"
+                  className="Icon-root Icon-sm ButtonIcon-root"
                 >
                   arrow_drop_down
                 </i>
@@ -423,9 +423,9 @@ exports[`rejects comment in reported queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                data-color="default"
-                data-variant="default"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                data-color="mono"
+                data-variant="ghost"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -441,7 +441,7 @@ exports[`rejects comment in reported queue: dangling 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  className="Icon-root Icon-sm"
+                  className="Icon-root Icon-sm ButtonIcon-root"
                 >
                   arrow_drop_down
                 </i>
@@ -673,9 +673,9 @@ exports[`renders reported queue with comments 1`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                      data-color="default"
-                      data-variant="default"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      data-color="mono"
+                      data-variant="ghost"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -691,7 +691,7 @@ exports[`renders reported queue with comments 1`] = `
                       </span>
                       <i
                         aria-hidden="true"
-                        className="Icon-root Icon-sm"
+                        className="Icon-root Icon-sm ButtonIcon-root"
                       >
                         arrow_drop_down
                       </i>
@@ -910,9 +910,9 @@ exports[`renders reported queue with comments 1`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                      data-color="default"
-                      data-variant="default"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      data-color="mono"
+                      data-variant="ghost"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -928,7 +928,7 @@ exports[`renders reported queue with comments 1`] = `
                       </span>
                       <i
                         aria-hidden="true"
-                        className="Icon-root Icon-sm"
+                        className="Icon-root Icon-sm ButtonIcon-root"
                       >
                         arrow_drop_down
                       </i>
@@ -1163,9 +1163,9 @@ exports[`renders reported queue with comments 2`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                      data-color="default"
-                      data-variant="default"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      data-color="mono"
+                      data-variant="ghost"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1181,7 +1181,7 @@ exports[`renders reported queue with comments 2`] = `
                       </span>
                       <i
                         aria-hidden="true"
-                        className="Icon-root Icon-sm"
+                        className="Icon-root Icon-sm ButtonIcon-root"
                       >
                         arrow_drop_down
                       </i>
@@ -1400,9 +1400,9 @@ exports[`renders reported queue with comments 2`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                      data-color="default"
-                      data-variant="default"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      data-color="mono"
+                      data-variant="ghost"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1418,7 +1418,7 @@ exports[`renders reported queue with comments 2`] = `
                       </span>
                       <i
                         aria-hidden="true"
-                        className="Icon-root Icon-sm"
+                        className="Icon-root Icon-sm ButtonIcon-root"
                       >
                         arrow_drop_down
                       </i>
@@ -1661,9 +1661,9 @@ exports[`renders reported queue with comments and load more 1`] = `
               <button
                 aria-controls="uuid-2"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                data-color="default"
-                data-variant="default"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                data-color="mono"
+                data-variant="ghost"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -1679,7 +1679,7 @@ exports[`renders reported queue with comments and load more 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  className="Icon-root Icon-sm"
+                  className="Icon-root Icon-sm ButtonIcon-root"
                 >
                   arrow_drop_down
                 </i>
diff --git a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
index 63a2d70bd..b66844690 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
@@ -170,9 +170,9 @@ exports[`approves comment in rejected queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                data-color="default"
-                data-variant="default"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                data-color="mono"
+                data-variant="ghost"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -188,7 +188,7 @@ exports[`approves comment in rejected queue: dangling 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  className="Icon-root Icon-sm"
+                  className="Icon-root Icon-sm ButtonIcon-root"
                 >
                   arrow_drop_down
                 </i>
@@ -420,9 +420,9 @@ exports[`renders rejected queue with comments 1`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                      data-color="default"
-                      data-variant="default"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      data-color="mono"
+                      data-variant="ghost"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -438,7 +438,7 @@ exports[`renders rejected queue with comments 1`] = `
                       </span>
                       <i
                         aria-hidden="true"
-                        className="Icon-root Icon-sm"
+                        className="Icon-root Icon-sm ButtonIcon-root"
                       >
                         arrow_drop_down
                       </i>
@@ -657,9 +657,9 @@ exports[`renders rejected queue with comments 1`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                      data-color="default"
-                      data-variant="default"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                      data-color="mono"
+                      data-variant="ghost"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -675,7 +675,7 @@ exports[`renders rejected queue with comments 1`] = `
                       </span>
                       <i
                         aria-hidden="true"
-                        className="Icon-root Icon-sm"
+                        className="Icon-root Icon-sm ButtonIcon-root"
                       >
                         arrow_drop_down
                       </i>
@@ -913,9 +913,9 @@ exports[`renders rejected queue with comments and load more 1`] = `
               <button
                 aria-controls="uuid-2"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                data-color="default"
-                data-variant="default"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                data-color="mono"
+                data-variant="ghost"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -931,7 +931,7 @@ exports[`renders rejected queue with comments and load more 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  className="Icon-root Icon-sm"
+                  className="Icon-root Icon-sm ButtonIcon-root"
                 >
                   arrow_drop_down
                 </i>
diff --git a/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
index 7d7a66aff..ccd27210e 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
@@ -131,9 +131,9 @@ exports[`approves single comment 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                data-color="default"
-                data-variant="default"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                data-color="mono"
+                data-variant="ghost"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -149,7 +149,7 @@ exports[`approves single comment 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  className="Icon-root Icon-sm"
+                  className="Icon-root Icon-sm ButtonIcon-root"
                 >
                   arrow_drop_down
                 </i>
@@ -345,9 +345,9 @@ exports[`rejects single comment 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                data-color="default"
-                data-variant="default"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                data-color="mono"
+                data-variant="ghost"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -363,7 +363,7 @@ exports[`rejects single comment 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  className="Icon-root Icon-sm"
+                  className="Icon-root Icon-sm ButtonIcon-root"
                 >
                   arrow_drop_down
                 </i>
@@ -594,9 +594,9 @@ exports[`renders single comment view 1`] = `
                       <button
                         aria-controls="uuid-0"
                         aria-expanded={false}
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
-                        data-color="default"
-                        data-variant="default"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
+                        data-color="mono"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -612,7 +612,7 @@ exports[`renders single comment view 1`] = `
                         </span>
                         <i
                           aria-hidden="true"
-                          className="Icon-root Icon-sm"
+                          className="Icon-root Icon-sm ButtonIcon-root"
                         >
                           arrow_drop_down
                         </i>
diff --git a/src/core/client/ui/components/v2/Marker/Marker.css b/src/core/client/ui/components/v2/Marker/Marker.css
index 0f5e08967..7c7a01b69 100644
--- a/src/core/client/ui/components/v2/Marker/Marker.css
+++ b/src/core/client/ui/components/v2/Marker/Marker.css
@@ -23,11 +23,14 @@
 }
 
 .variantFilled {
+  color: var(--v2-colors-pure-white);
   &.colorReported {
     background-color: var(--v2-palette-marker-reported);
+    border-color: var(--v2-palette-marker-reported);
   }
 
   &.colorPending {
     background-color: var(--v2-palette-marker-pending);
+    border-color: var(--v2-palette-marker-pending);
   }
 }