diff --git a/osu.Game.Rulesets.Osu/Objects/Drawables/DrawableHitCircle.cs b/osu.Game.Rulesets.Osu/Objects/Drawables/DrawableHitCircle.cs
index 854fc4c91c..a438dc8be4 100644
--- a/osu.Game.Rulesets.Osu/Objects/Drawables/DrawableHitCircle.cs
+++ b/osu.Game.Rulesets.Osu/Objects/Drawables/DrawableHitCircle.cs
@@ -14,8 +14,8 @@ using osu.Game.Rulesets.Objects.Drawables;
 using osu.Game.Rulesets.Osu.Judgements;
 using osu.Game.Rulesets.Osu.Objects.Drawables.Pieces;
 using osu.Game.Rulesets.Scoring;
-using osuTK;
 using osu.Game.Skinning;
+using osuTK;
 
 namespace osu.Game.Rulesets.Osu.Objects.Drawables
 {
diff --git a/osu.Game.Rulesets.Osu/Skinning/LegacyMainCirclePiece.cs b/osu.Game.Rulesets.Osu/Skinning/LegacyMainCirclePiece.cs
index e7486ef9b0..0ab3e8825b 100644
--- a/osu.Game.Rulesets.Osu/Skinning/LegacyMainCirclePiece.cs
+++ b/osu.Game.Rulesets.Osu/Skinning/LegacyMainCirclePiece.cs
@@ -14,6 +14,7 @@ using osu.Game.Rulesets.Osu.Objects;
 using osu.Game.Skinning;
 using osuTK;
 using osuTK.Graphics;
+using static osu.Game.Skinning.LegacySkinConfiguration;
 
 namespace osu.Game.Rulesets.Osu.Skinning
 {
@@ -28,53 +29,67 @@ namespace osu.Game.Rulesets.Osu.Skinning
             Size = new Vector2(OsuHitObject.OBJECT_RADIUS * 2);
         }
 
+        private Container<Sprite> circleSprites;
+        private Sprite hitCircleSprite;
+        private Sprite hitCircleOverlay;
+
+        private SkinnableSpriteText hitCircleText;
+
         private readonly IBindable<ArmedState> state = new Bindable<ArmedState>();
         private readonly Bindable<Color4> accentColour = new Bindable<Color4>();
         private readonly IBindable<int> indexInCurrentCombo = new Bindable<int>();
 
+        [Resolved]
+        private ISkinSource skin { get; set; }
+
         [BackgroundDependencyLoader]
-        private void load(DrawableHitObject drawableObject, ISkinSource skin)
+        private void load(DrawableHitObject drawableObject)
         {
             OsuHitObject osuObject = (OsuHitObject)drawableObject.HitObject;
 
-            Sprite hitCircleSprite;
-            SkinnableSpriteText hitCircleText;
-
             InternalChildren = new Drawable[]
             {
-                hitCircleSprite = new Sprite
+                circleSprites = new Container<Sprite>
                 {
-                    Texture = getTextureWithFallback(string.Empty),
-                    Colour = drawableObject.AccentColour.Value,
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
+                    RelativeSizeAxes = Axes.Both,
+                    Children = new[]
+                    {
+                        hitCircleSprite = new Sprite
+                        {
+                            Texture = getTextureWithFallback(string.Empty),
+                            Colour = drawableObject.AccentColour.Value,
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                        },
+                        hitCircleOverlay = new Sprite
+                        {
+                            Texture = getTextureWithFallback("overlay"),
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                        }
+                    }
                 },
                 hitCircleText = new SkinnableSpriteText(new OsuSkinComponent(OsuSkinComponents.HitCircleText), _ => new OsuSpriteText
                 {
                     Font = OsuFont.Numeric.With(size: 40),
                     UseFullGlyphHeight = false,
-                }, confineMode: ConfineMode.NoScaling),
-                new Sprite
+                }, confineMode: ConfineMode.NoScaling)
                 {
-                    Texture = getTextureWithFallback("overlay"),
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
-                }
+                },
             };
 
             bool overlayAboveNumber = skin.GetConfig<OsuSkinConfiguration, bool>(OsuSkinConfiguration.HitCircleOverlayAboveNumber)?.Value ?? true;
 
-            if (!overlayAboveNumber)
-                ChangeInternalChildDepth(hitCircleText, -float.MaxValue);
+            if (overlayAboveNumber)
+                AddInternal(hitCircleOverlay.CreateProxy());
 
             state.BindTo(drawableObject.State);
-            state.BindValueChanged(updateState, true);
-
             accentColour.BindTo(drawableObject.AccentColour);
-            accentColour.BindValueChanged(colour => hitCircleSprite.Colour = colour.NewValue, true);
-
             indexInCurrentCombo.BindTo(osuObject.IndexInCurrentComboBindable);
-            indexInCurrentCombo.BindValueChanged(index => hitCircleText.Text = (index.NewValue + 1).ToString(), true);
 
             Texture getTextureWithFallback(string name)
             {
@@ -87,6 +102,15 @@ namespace osu.Game.Rulesets.Osu.Skinning
             }
         }
 
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            state.BindValueChanged(updateState, true);
+            accentColour.BindValueChanged(colour => hitCircleSprite.Colour = colour.NewValue, true);
+            indexInCurrentCombo.BindValueChanged(index => hitCircleText.Text = (index.NewValue + 1).ToString(), true);
+        }
+
         private void updateState(ValueChangedEvent<ArmedState> state)
         {
             const double legacy_fade_duration = 240;
@@ -94,8 +118,21 @@ namespace osu.Game.Rulesets.Osu.Skinning
             switch (state.NewValue)
             {
                 case ArmedState.Hit:
-                    this.FadeOut(legacy_fade_duration, Easing.Out);
-                    this.ScaleTo(1.4f, legacy_fade_duration, Easing.Out);
+                    circleSprites.FadeOut(legacy_fade_duration, Easing.Out);
+                    circleSprites.ScaleTo(1.4f, legacy_fade_duration, Easing.Out);
+
+                    var legacyVersion = skin.GetConfig<LegacySetting, decimal>(LegacySetting.Version)?.Value;
+
+                    if (legacyVersion >= 2.0m)
+                        // legacy skins of version 2.0 and newer only apply very short fade out to the number piece.
+                        hitCircleText.FadeOut(legacy_fade_duration / 4, Easing.Out);
+                    else
+                    {
+                        // old skins scale and fade it normally along other pieces.
+                        hitCircleText.FadeOut(legacy_fade_duration, Easing.Out);
+                        hitCircleText.ScaleTo(1.4f, legacy_fade_duration, Easing.Out);
+                    }
+
                     break;
             }
         }
diff --git a/osu.Game.Rulesets.Osu/UI/DrawableOsuRuleset.cs b/osu.Game.Rulesets.Osu/UI/DrawableOsuRuleset.cs
index b4d51d11c9..b2299398e1 100644
--- a/osu.Game.Rulesets.Osu/UI/DrawableOsuRuleset.cs
+++ b/osu.Game.Rulesets.Osu/UI/DrawableOsuRuleset.cs
@@ -35,7 +35,7 @@ namespace osu.Game.Rulesets.Osu.UI
 
         protected override PassThroughInputManager CreateInputManager() => new OsuInputManager(Ruleset.RulesetInfo);
 
-        public override PlayfieldAdjustmentContainer CreatePlayfieldAdjustmentContainer() => new OsuPlayfieldAdjustmentContainer();
+        public override PlayfieldAdjustmentContainer CreatePlayfieldAdjustmentContainer() => new OsuPlayfieldAdjustmentContainer { AlignWithStoryboard = true };
 
         protected override ResumeOverlay CreateResumeOverlay() => new OsuResumeOverlay();
 
diff --git a/osu.Game.Rulesets.Osu/UI/OsuPlayfieldAdjustmentContainer.cs b/osu.Game.Rulesets.Osu/UI/OsuPlayfieldAdjustmentContainer.cs
index 9c8be868b0..0d1a5a8304 100644
--- a/osu.Game.Rulesets.Osu/UI/OsuPlayfieldAdjustmentContainer.cs
+++ b/osu.Game.Rulesets.Osu/UI/OsuPlayfieldAdjustmentContainer.cs
@@ -11,10 +11,19 @@ namespace osu.Game.Rulesets.Osu.UI
     public class OsuPlayfieldAdjustmentContainer : PlayfieldAdjustmentContainer
     {
         protected override Container<Drawable> Content => content;
-        private readonly Container content;
+        private readonly ScalingContainer content;
 
         private const float playfield_size_adjust = 0.8f;
 
+        /// <summary>
+        /// When true, an offset is applied to allow alignment with historical storyboards displayed in the same parent space.
+        /// This will shift the playfield downwards slightly.
+        /// </summary>
+        public bool AlignWithStoryboard
+        {
+            set => content.PlayfieldShift = value;
+        }
+
         public OsuPlayfieldAdjustmentContainer()
         {
             Anchor = Anchor.Centre;
@@ -39,6 +48,8 @@ namespace osu.Game.Rulesets.Osu.UI
         /// </summary>
         private class ScalingContainer : Container
         {
+            internal bool PlayfieldShift { get; set; }
+
             protected override void Update()
             {
                 base.Update();
@@ -55,6 +66,7 @@ namespace osu.Game.Rulesets.Osu.UI
                 // Scale = 819.2 / 512
                 // Scale = 1.6
                 Scale = new Vector2(Parent.ChildSize.X / OsuPlayfield.BASE_SIZE.X);
+                Position = new Vector2(0, (PlayfieldShift ? 8f : 0f) * Scale.X);
                 // Size = 0.625
                 Size = Vector2.Divide(Vector2.One, Scale);
             }