diff --git a/source/Main.hx b/source/Main.hx
index 113a101a2..5043393f1 100644
--- a/source/Main.hx
+++ b/source/Main.hx
@@ -78,7 +78,13 @@ class Main extends Sprite
 		 */
 
 		#if !debug
-		initialState = funkin.TitleState;
+		/**
+		 * Someone was like "hey let's make a state that only runs code on debug builds"
+		 * then put essential initialization code in it.
+		 * The easiest fix is to make it run in all builds.
+		 * -Eric
+		 */
+		// initialState = funkin.TitleState;
 		#end
 
 		initHaxeUI();
diff --git a/source/funkin/ui/debug/charting/ChartEditorDialogHandler.hx b/source/funkin/ui/debug/charting/ChartEditorDialogHandler.hx
index e118fff8e..fa6cf782c 100644
--- a/source/funkin/ui/debug/charting/ChartEditorDialogHandler.hx
+++ b/source/funkin/ui/debug/charting/ChartEditorDialogHandler.hx
@@ -1,5 +1,84 @@
 package funkin.ui.debug.charting;
 
+import flixel.util.FlxTimer;
+import flixel.FlxSprite;
+import haxe.ui.containers.dialogs.Dialog;
+import haxe.ui.containers.VBox;
+import haxe.ui.components.Image;
+
 class ChartEditorDialogHandler
 {
+	static final CHART_EDITOR_DIALOG_ABOUT_LAYOUT = Paths.ui('chart-editor/dialogs/about');
+	static final CHART_EDITOR_DIALOG_SPLASH_LAYOUT = Paths.ui('chart-editor/dialogs/splash');
+	static final CHART_EDITOR_DIALOG_USER_GUIDE_LAYOUT = Paths.ui('chart-editor/dialogs/user-guide');
+
+	/**
+	 * 
+	 */
+	public static inline function openAboutDialog(state:ChartEditorState):Void
+	{
+		openDialog(state, CHART_EDITOR_DIALOG_ABOUT_LAYOUT, true, true);
+	}
+
+	/**
+	 * Builds and opens a dialog letting the user create a new chart, open a recent chart, or load from a template.
+	 */
+	public static function openSplashDialog(state:ChartEditorState, closable:Bool = true):Void
+	{
+		var dialog:Dialog = openDialog(state, CHART_EDITOR_DIALOG_SPLASH_LAYOUT, true, closable);
+
+		// TODO: Add callbacks to the dialog buttons
+
+		// Switch the graphic for frames.
+		var bfSpritePlaceholder:Image = dialog.findComponent('bfSprite', Image);
+
+		// TODO: Replace this bullshit with a custom HaxeUI component that loads the sprite from the game's assets.
+
+		if (bfSpritePlaceholder != null)
+		{
+			var bfSprite:FlxSprite = new FlxSprite(0, 0);
+
+			bfSprite.visible = false;
+
+			var frames = Paths.getSparrowAtlas(bfSpritePlaceholder.resource);
+			bfSprite.frames = frames;
+
+			bfSprite.animation.addByPrefix('idle', 'Boyfriend DJ0', 24, true);
+			bfSprite.animation.play('idle');
+
+			bfSpritePlaceholder.rootComponent.add(bfSprite);
+			bfSpritePlaceholder.visible = false;
+
+			new FlxTimer().start(0.10, (_timer:FlxTimer) ->
+			{
+				bfSprite.x = bfSpritePlaceholder.screenLeft;
+				bfSprite.y = bfSpritePlaceholder.screenTop;
+				bfSprite.setGraphicSize(Std.int(bfSpritePlaceholder.width), Std.int(bfSpritePlaceholder.height));
+				bfSprite.visible = true;
+			});
+		}
+	}
+
+	/**
+	 * Builds and opens a dialog displaying the user guide, providing guidance and help on how to use the chart editor.
+	 */
+	public static inline function openUserGuideDialog(state:ChartEditorState):Void
+	{
+		openDialog(state, CHART_EDITOR_DIALOG_USER_GUIDE_LAYOUT, true, true);
+	}
+
+	/**
+	 * Builds and opens a dialog from a given layout path.
+	 * @param modal Makes the background uninteractable while the dialog is open.
+	 * @param closable Hides the close button on the dialog, preventing it from being closed unless the user interacts with the dialog.
+	 */
+	static function openDialog(state:ChartEditorState, key:String, modal:Bool = true, closable:Bool = true):Dialog
+	{
+		var dialog:Dialog = cast state.buildComponent(key);
+		dialog.destroyOnClose = true;
+		dialog.closable = closable;
+		dialog.showDialog(modal);
+
+		return dialog;
+	}
 }
diff --git a/source/funkin/ui/debug/charting/ChartEditorState.hx b/source/funkin/ui/debug/charting/ChartEditorState.hx
index 320222692..584180fbf 100644
--- a/source/funkin/ui/debug/charting/ChartEditorState.hx
+++ b/source/funkin/ui/debug/charting/ChartEditorState.hx
@@ -76,9 +76,6 @@ class ChartEditorState extends HaxeUIState
 	static final CHART_EDITOR_TOOLBOX_EVENTDATA_LAYOUT = Paths.ui('chart-editor/toolbox/eventdata');
 	static final CHART_EDITOR_TOOLBOX_SONGDATA_LAYOUT = Paths.ui('chart-editor/toolbox/songdata');
 
-	static final CHART_EDITOR_DIALOG_ABOUT_LAYOUT = Paths.ui('chart-editor/dialogs/about');
-	static final CHART_EDITOR_DIALOG_USER_GUIDE_LAYOUT = Paths.ui('chart-editor/dialogs/user-guide');
-
 	// The base grid size for the chart editor.
 	public static final GRID_SIZE:Int = 40;
 
@@ -1009,9 +1006,9 @@ class ChartEditorState extends HaxeUIState
 			// TODO: Implement this.
 		});
 
-		addUIClickListener('menubarItemAbout', (event:MouseEvent) -> openDialog(CHART_EDITOR_DIALOG_ABOUT_LAYOUT));
+		addUIClickListener('menubarItemAbout', (event:MouseEvent) -> ChartEditorDialogHandler.openAboutDialog(this));
 
-		addUIClickListener('menubarItemUserGuide', (event:MouseEvent) -> openDialog(CHART_EDITOR_DIALOG_USER_GUIDE_LAYOUT));
+		addUIClickListener('menubarItemUserGuide', (event:MouseEvent) -> ChartEditorDialogHandler.openUserGuideDialog(this));
 
 		addUIChangeListener('menubarItemToggleSidebar', (event:UIEvent) ->
 		{
@@ -1147,6 +1144,11 @@ class ChartEditorState extends HaxeUIState
 			showNotification('Hi there :)');
 		}
 
+		if (FlxG.keys.justPressed.Q)
+		{
+			ChartEditorDialogHandler.openSplashDialog(this, true);
+		}
+
 		// Right align the BF health icon.
 
 		// Base X position to the right of the grid.
@@ -1988,7 +1990,7 @@ class ChartEditorState extends HaxeUIState
 	{
 		// F1 = Open Help
 		if (FlxG.keys.justPressed.F1)
-			openDialog(CHART_EDITOR_DIALOG_USER_GUIDE_LAYOUT);
+			ChartEditorDialogHandler.openUserGuideDialog(this);
 	}
 
 	function handleSidebar()
@@ -2334,9 +2336,12 @@ class ChartEditorState extends HaxeUIState
 		// Move the rendered notes to the correct position.
 		renderedNotes.setPosition(gridTiledSprite.x, gridTiledSprite.y);
 		renderedNoteSelectionSquares.setPosition(renderedNotes.x, renderedNotes.y);
-		// Move the spectrogram to the correct position.
-		// gridSpectrogram.y = gridTiledSprite.y;
-		gridSpectrogram.setPosition(0, 0);
+		if (gridSpectrogram != null)
+		{
+			// Move the spectrogram to the correct position.
+			gridSpectrogram.y = gridTiledSprite.y;
+			gridSpectrogram.setPosition(0, 0);
+		}
 
 		return this.scrollPosition;
 	}
@@ -2371,16 +2376,6 @@ class ChartEditorState extends HaxeUIState
 		}
 	}
 
-	/**
-	 * Builds and opens a dialog from a given layout path.
-	 * @param modal Makes the background uninteractable while the dialog is open.
-	 */
-	function openDialog(key:String, modal:Bool = true)
-	{
-		var dialog:Dialog = cast buildComponent(key);
-		dialog.showDialog(modal);
-	}
-
 	/**
 	 * Load a music track for playback.
 	 */
diff --git a/source/funkin/ui/haxeui/components/SparrowImage.hx b/source/funkin/ui/haxeui/components/SparrowImage.hx
new file mode 100644
index 000000000..b71da0e82
--- /dev/null
+++ b/source/funkin/ui/haxeui/components/SparrowImage.hx
@@ -0,0 +1,8 @@
+package funkin.ui.haxeui.components;
+
+import haxe.ui.components.Image;
+
+class SparrowImage extends Image
+{
+	//
+}