diff --git a/application/views/components/dxwaterfall.php b/application/views/components/dxwaterfall.php
new file mode 100644
index 000000000..744ceb4a1
--- /dev/null
+++ b/application/views/components/dxwaterfall.php
@@ -0,0 +1,30 @@
+<!-- DX Waterfall Component -->
+<?php if ($this->session->userdata('user_dxwaterfall_enable') == 'Y' && isset($manual_mode) && $manual_mode == 0) { ?>
+<script language="javascript">
+  let dxwaterfall_decont = '<?php echo $this->optionslib->get_option('dxcluster_decont'); ?>';
+  let dxwaterfall_maxage = '<?php echo $this->optionslib->get_option('dxcluster_maxage'); ?>';
+</script>
+
+<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/dxwaterfall.css">
+
+<div class="row dxwaterfallpane">
+  <div class="col-sm-12">
+    <div id="dxWaterfallSpot">
+      <div id="dxWaterfallSpotHeader">
+        <div id="dxWaterfallSpotLeft">
+          <span id="dxWaterfallMessage"></span>
+        </div>
+        <i id="dxWaterfallPowerOnIcon" class="fas fa-power-off"></i>
+      </div>
+      <div id="dxWaterfallSpotContent"></div>
+      <i id="dxWaterfallPowerOffIcon" class="fas fa-power-off"></i>
+    </div>
+  </div>
+  <div class="col-sm-12" id="dxWaterfallCanvasContainer" style="display: none;">
+    <canvas id="dxWaterfall"></canvas>
+  </div>
+  <div class="col-sm-12" id="dxWaterfallMenuContainer" style="display: none;">
+    <div id="dxWaterfallMenu">&nbsp;</div>
+  </div>
+</div>
+<?php } ?>
diff --git a/application/views/qso/index.php b/application/views/qso/index.php
index c83213977..f10a68b78 100644
--- a/application/views/qso/index.php
+++ b/application/views/qso/index.php
@@ -41,227 +41,7 @@ switch ($date_format) {
 </script>
 
 <!--- DX Waterfall --->
-<?php if ($this->session->userdata('user_dxwaterfall_enable') == 'Y' && $manual_mode == 0) { ?>
-<script language="javascript">
-  let dxwaterfall_decont = '<?php echo $this->optionslib->get_option('dxcluster_decont'); ?>';
-  let dxwaterfall_maxage = '<?php echo $this->optionslib->get_option('dxcluster_maxage'); ?>';
-</script>
-
-<style>
-	#dxWaterfall {
-		width: 100%;
-		height: 200px;
-		display: block;
-		border-left: 1px solid #000000;
-		border-right: 1px solid #000000;
-	}
-	#dxWaterfallSpot {
-		width: 100%;
-		background-color: #000000;
-		color: #FFFFFF;
-		padding: 5px 8px;
-		font-family: "Consolas", "Courier New", monospace;
-		font-size: 11px;
-		border-left: 1px solid #000000;
-		border-right: 1px solid #000000;
-		border-top: 1px solid #000000;
-		min-height: 20px;
-		line-height: 1.4;
-		word-wrap: break-word;
-		overflow-wrap: break-word;
-		position: relative;
-		border-radius: 5px 5px 5px 5px;
-		transition: border-radius 0.3s;
-	}
-	#dxWaterfallSpot.active {
-		border-radius: 5px 5px 0 0;
-		border-bottom: none;
-	}
-	#dxWaterfallSpotHeader {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		position: relative;
-		cursor: pointer;
-	}
-	#dxWaterfallSpotHeader.hidden {
-		display: none;
-	}
-	#dxWaterfallSpotContent {
-		display: none;
-		width: 100%;
-		padding-right: 30px;
-	}
-	#dxWaterfallSpotContent.active {
-		display: block;
-	}
-	#dxWaterfallSpotLeft {
-		display: flex;
-		align-items: center;
-		flex: 1;
-	}
-	#dxWaterfallPowerOnIcon {
-		position: absolute;
-		top: 50%;
-		right: 0px;
-		transform: translateY(-50%);
-		cursor: pointer;
-		color: #FF0000;
-		flex-shrink: 0;
-		transition: color 0.3s;
-	}
-	#dxWaterfallPowerOnIcon:hover {
-		color: #DD0000;
-	}
-	#dxWaterfallMessage {
-		text-align: left;
-	}
-	#dxWaterfallPowerOffIcon {
-		position: absolute;
-		top: 50%;
-		right: 5px;
-		transform: translateY(-50%);
-		cursor: pointer;
-		color: #00FF00;
-		flex-shrink: 0;
-		transition: color 0.2s;
-		display: none;
-	}
-	#dxWaterfallPowerOffIcon.active {
-		display: block;
-	}
-	#dxWaterfallPowerOffIcon:hover {
-		color: #00DD00;
-	}
-	#dxWaterfallMenu {
-		width: 100%;
-		background-color: #000000;
-		color: #FFFFFF;
-		padding: 5px 8px;
-		font-family: "Consolas", "Courier New", monospace;
-		font-size: 11px;
-		border-left: 1px solid #000000;
-		border-right: 1px solid #000000;
-		border-bottom: 1px solid #000000;
-		border-radius: 0 0 5px 5px;
-		min-height: 20px;
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 10px;
-	}
-	#dxWaterfallMenu .zoom-in-icon,
-	#dxWaterfallMenu .zoom-out-icon,
-	#dxWaterfallMenu .zoom-reset-icon,
-	#dxWaterfallMenu .prev-spot-icon,
-	#dxWaterfallMenu .next-spot-icon,
-	#dxWaterfallMenu .smart-hunter-icon,
-	#dxWaterfallMenu .continent-cycle-icon,
-	#dxWaterfallMenu .mode-filter-icon,
-	#dxWaterfallMenu .label-size-icon {
-		cursor: pointer;
-		color: #FFFFFF;
-		margin: 0 2px;
-		font-size: 12px;
-		transition: color 0.2s;
-	}
-	#dxWaterfallMenu .zoom-in-icon:hover:not(.disabled),
-	#dxWaterfallMenu .zoom-out-icon:hover:not(.disabled),
-	#dxWaterfallMenu .zoom-reset-icon:hover:not(.disabled),
-	#dxWaterfallMenu .prev-spot-icon:hover:not(.disabled),
-	#dxWaterfallMenu .next-spot-icon:hover:not(.disabled),
-	#dxWaterfallMenu .smart-hunter-icon:hover:not(.disabled),
-	#dxWaterfallMenu .smart-hunter-text:hover:not(.disabled),
-	#dxWaterfallMenu .continent-cycle-icon:hover:not(.disabled),
-	#dxWaterfallMenu .continent-cycle-text:hover:not(.disabled),
-	#dxWaterfallMenu .mode-filter-icon:hover:not(.disabled),
-	#dxWaterfallMenu .label-size-icon:hover {
-		color: #AAAAAA;
-	}
-	#dxWaterfallMenu .smart-hunter-text,
-	#dxWaterfallMenu .continent-cycle-text {
-		cursor: pointer;
-		color: #FFFFFF;
-		margin-left: 5px;
-		font-size: 11px;
-		transition: color 0.2s;
-		user-select: none;
-	}
-	#dxWaterfallMenu .mode-filter-phone,
-	#dxWaterfallMenu .mode-filter-cw,
-	#dxWaterfallMenu .mode-filter-digi {
-		user-select: none;
-	}
-	#dxWaterfallMenu .mode-filter-phone:hover:not(.disabled),
-	#dxWaterfallMenu .mode-filter-cw:hover:not(.disabled),
-	#dxWaterfallMenu .mode-filter-digi:hover:not(.disabled) {
-		opacity: 0.7;
-	}
-	@keyframes blink {
-		0%, 49% { opacity: 1; }
-		50%, 100% { opacity: 0.3; }
-	}
-	#dxWaterfallSpot .flag-emoji {
-		font-family: "Twemoji Country Flags", "Helvetica", "Comic Sans", sans-serif !important;
-		font-style: normal !important;
-		font-variant: normal !important;
-	}
-	#dxWaterfallSpot .copy-icon,
-	#dxWaterfallSpot .tune-icon,
-	#dxWaterfallSpot .cycle-spot-icon {
-		cursor: pointer;
-		color: #FFFFFF;
-		margin-right: 5px;
-		font-size: 12px;
-		transition: color 0.2s;
-	}
-	#dxWaterfallSpot .copy-icon:hover,
-	#dxWaterfallSpot .tune-icon:hover,
-	#dxWaterfallSpot .cycle-spot-icon:hover {
-		color: #AAAAAA;
-	}
-	#dxWaterfallSpot .new-continent-icon {
-		color: #FFD700; /* Gold */
-		margin-left: 5px;
-		font-size: 12px;
-	}
-	#dxWaterfallSpot .new-dxcc-icon {
-		color: #C0C0C0; /* Silver */
-		margin-left: 5px;
-		font-size: 12px;
-	}
-	#dxWaterfallSpot .new-callsign-icon {
-		color: #CD7F32; /* Bronze */
-		margin-left: 5px;
-		font-size: 12px;
-	}
-
-  .dxwaterfallpane{
-    margin-bottom: 2px;
-  }
-
-</style>
-<div class="row dxwaterfallpane">
-  <div class="col-sm-12">
-		<div id="dxWaterfallSpot">
-			<div id="dxWaterfallSpotHeader">
-				<div id="dxWaterfallSpotLeft">
-					<span id="dxWaterfallMessage"></span>
-				</div>
-				<i id="dxWaterfallPowerOnIcon" class="fas fa-power-off"></i>
-			</div>
-			<div id="dxWaterfallSpotContent"></div>
-			<i id="dxWaterfallPowerOffIcon" class="fas fa-power-off"></i>
-		</div>
-	</div>
-	<div class="col-sm-12" id="dxWaterfallCanvasContainer" style="display: none;">
-		<canvas id="dxWaterfall"></canvas>
-	</div>
-  <div class="col-sm-12" id="dxWaterfallMenuContainer" style="display: none;">
-		<div id="dxWaterfallMenu">&nbsp;</div>
-	</div>
-</div>
-<?php } ?>
+<?php $this->load->view('components/dxwaterfall'); ?>
 
 <div class="row qsopane">
 
diff --git a/assets/css/dxwaterfall.css b/assets/css/dxwaterfall.css
new file mode 100644
index 000000000..3c50a8ee5
--- /dev/null
+++ b/assets/css/dxwaterfall.css
@@ -0,0 +1,191 @@
+	#dxWaterfall {
+		width: 100%;
+		height: 200px;
+		display: block;
+		border-left: 1px solid #000000;
+		border-right: 1px solid #000000;
+	}
+	#dxWaterfallSpot {
+		width: 100%;
+		background-color: #000000;
+		color: #FFFFFF;
+		padding: 5px 8px;
+		font-family: "Consolas", "Courier New", monospace;
+		font-size: 11px;
+		border-left: 1px solid #000000;
+		border-right: 1px solid #000000;
+		border-top: 1px solid #000000;
+		min-height: 20px;
+		line-height: 1.4;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		position: relative;
+		border-radius: 5px 5px 5px 5px;
+		transition: border-radius 0.3s;
+	}
+	#dxWaterfallSpot.active {
+		border-radius: 5px 5px 0 0;
+		border-bottom: none;
+	}
+	#dxWaterfallSpotHeader {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		position: relative;
+		cursor: pointer;
+	}
+	#dxWaterfallSpotHeader.hidden {
+		display: none;
+	}
+	#dxWaterfallSpotContent {
+		display: none;
+		width: 100%;
+		padding-right: 30px;
+	}
+	#dxWaterfallSpotContent.active {
+		display: block;
+	}
+	#dxWaterfallSpotLeft {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+	#dxWaterfallPowerOnIcon {
+		position: absolute;
+		top: 50%;
+		right: 0px;
+		transform: translateY(-50%);
+		cursor: pointer;
+		color: #FF0000;
+		flex-shrink: 0;
+		transition: color 0.3s;
+	}
+	#dxWaterfallPowerOnIcon:hover {
+		color: #DD0000;
+	}
+	#dxWaterfallMessage {
+		text-align: left;
+	}
+	#dxWaterfallPowerOffIcon {
+		position: absolute;
+		top: 50%;
+		right: 5px;
+		transform: translateY(-50%);
+		cursor: pointer;
+		color: #00FF00;
+		flex-shrink: 0;
+		transition: color 0.2s;
+		display: none;
+	}
+	#dxWaterfallPowerOffIcon.active {
+		display: block;
+	}
+	#dxWaterfallPowerOffIcon:hover {
+		color: #00DD00;
+	}
+	#dxWaterfallMenu {
+		width: 100%;
+		background-color: #000000;
+		color: #FFFFFF;
+		padding: 5px 8px;
+		font-family: "Consolas", "Courier New", monospace;
+		font-size: 11px;
+		border-left: 1px solid #000000;
+		border-right: 1px solid #000000;
+		border-bottom: 1px solid #000000;
+		border-radius: 0 0 5px 5px;
+		min-height: 20px;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 10px;
+	}
+	#dxWaterfallMenu .zoom-in-icon,
+	#dxWaterfallMenu .zoom-out-icon,
+	#dxWaterfallMenu .zoom-reset-icon,
+	#dxWaterfallMenu .prev-spot-icon,
+	#dxWaterfallMenu .next-spot-icon,
+	#dxWaterfallMenu .smart-hunter-icon,
+	#dxWaterfallMenu .continent-cycle-icon,
+	#dxWaterfallMenu .mode-filter-icon,
+	#dxWaterfallMenu .label-size-icon {
+		cursor: pointer;
+		color: #FFFFFF;
+		margin: 0 2px;
+		font-size: 12px;
+		transition: color 0.2s;
+	}
+	#dxWaterfallMenu .zoom-in-icon:hover:not(.disabled),
+	#dxWaterfallMenu .zoom-out-icon:hover:not(.disabled),
+	#dxWaterfallMenu .zoom-reset-icon:hover:not(.disabled),
+	#dxWaterfallMenu .prev-spot-icon:hover:not(.disabled),
+	#dxWaterfallMenu .next-spot-icon:hover:not(.disabled),
+	#dxWaterfallMenu .smart-hunter-icon:hover:not(.disabled),
+	#dxWaterfallMenu .smart-hunter-text:hover:not(.disabled),
+	#dxWaterfallMenu .continent-cycle-icon:hover:not(.disabled),
+	#dxWaterfallMenu .continent-cycle-text:hover:not(.disabled),
+	#dxWaterfallMenu .mode-filter-icon:hover:not(.disabled),
+	#dxWaterfallMenu .label-size-icon:hover {
+		color: #AAAAAA;
+	}
+	#dxWaterfallMenu .smart-hunter-text,
+	#dxWaterfallMenu .continent-cycle-text {
+		cursor: pointer;
+		color: #FFFFFF;
+		margin-left: 5px;
+		font-size: 11px;
+		transition: color 0.2s;
+		user-select: none;
+	}
+	#dxWaterfallMenu .mode-filter-phone,
+	#dxWaterfallMenu .mode-filter-cw,
+	#dxWaterfallMenu .mode-filter-digi {
+		user-select: none;
+	}
+	#dxWaterfallMenu .mode-filter-phone:hover:not(.disabled),
+	#dxWaterfallMenu .mode-filter-cw:hover:not(.disabled),
+	#dxWaterfallMenu .mode-filter-digi:hover:not(.disabled) {
+		opacity: 0.7;
+	}
+	@keyframes blink {
+		0%, 49% { opacity: 1; }
+		50%, 100% { opacity: 0.3; }
+	}
+	#dxWaterfallSpot .flag-emoji {
+		font-family: "Twemoji Country Flags", "Helvetica", "Comic Sans", sans-serif !important;
+		font-style: normal !important;
+		font-variant: normal !important;
+	}
+	#dxWaterfallSpot .copy-icon,
+	#dxWaterfallSpot .tune-icon,
+	#dxWaterfallSpot .cycle-spot-icon {
+		cursor: pointer;
+		color: #FFFFFF;
+		margin-right: 5px;
+		font-size: 12px;
+		transition: color 0.2s;
+	}
+	#dxWaterfallSpot .copy-icon:hover,
+	#dxWaterfallSpot .tune-icon:hover,
+	#dxWaterfallSpot .cycle-spot-icon:hover {
+		color: #AAAAAA;
+	}
+	#dxWaterfallSpot .new-continent-icon {
+		color: #FFD700; /* Gold */
+		margin-left: 5px;
+		font-size: 12px;
+	}
+	#dxWaterfallSpot .new-dxcc-icon {
+		color: #C0C0C0; /* Silver */
+		margin-left: 5px;
+		font-size: 12px;
+	}
+	#dxWaterfallSpot .new-callsign-icon {
+		color: #CD7F32; /* Bronze */
+		margin-left: 5px;
+		font-size: 12px;
+	}
+
+  .dxwaterfallpane{
+    margin-bottom: 2px;
+  }
\ No newline at end of file