diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less
index d0353dd25c1..0f95ff5d90a 100644
--- a/resources/css/bem/daily-challenge.less
+++ b/resources/css/bem/daily-challenge.less
@@ -5,9 +5,28 @@
   background: hsl(var(--hsl-b4));
   border-radius: @border-radius-large;
   min-width: 0;
+  position: relative;
   display: flex;
   align-items: center;
-  padding: 3px;
+  padding: 1px;
+  border: 2px solid transparent;
+
+  &--played-today {
+    border-color: @osu-colour-lime-1;
+
+    &::before {
+      .fas();
+      background-color: @osu-colour-b6;
+      border-radius: 50%;
+      color: @osu-colour-lime-1;
+      content: @fa-var-check-circle;
+      font-size: 16px; // icon size
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translate(50%, -50%);
+    }
+  }
 
   &__name {
     font-size: @font-size--normal;
@@ -20,7 +39,7 @@
   }
 
   &__value-box {
-    border-radius: @border-radius-large;
+    border-radius: @border-radius-small;
     background: hsl(var(--hsl-b6));
     padding: 5px 10px;
   }
diff --git a/resources/js/profile-page/daily-challenge.tsx b/resources/js/profile-page/daily-challenge.tsx
index 44cf465e2c4..73c380bf9ec 100644
--- a/resources/js/profile-page/daily-challenge.tsx
+++ b/resources/js/profile-page/daily-challenge.tsx
@@ -4,6 +4,7 @@
 import DailyChallengeUserStatsJson from 'interfaces/daily-challenge-user-stats-json';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
+import * as moment from 'moment';
 import * as React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { classWithModifiers, Modifiers } from 'utils/css';
@@ -122,10 +123,12 @@ export default class DailyChallenge extends React.Component<Props> {
       return null;
     }
 
+    const playedToday = this.props.stats.last_update != null && moment.utc(this.props.stats.last_update).isSame(Date.now(), 'day');
+
     return (
       <div
         ref={this.valueRef}
-        className='daily-challenge'
+        className={classWithModifiers('daily-challenge', { 'played-today': playedToday })}
         onMouseOver={this.onMouseOver}
       >
         <div className='daily-challenge__name'>