diff --git a/public/locales/de.json b/public/locales/de.json
index 1fc9f82..16b2d36 100644
--- a/public/locales/de.json
+++ b/public/locales/de.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Mit WebSocket-Server verbunden",
 	"Notification.webSocketDisconnected": "Verbindung zum WebSocket-Server fehlgeschlagen",
 
+	"overlay.connected": "Verbunden",
+	"overlay.notConnected": "Nicht verbunden",
 	"overlay.noData": "Keine Daten",
 	"overlay.hideOverlay": "Overlay Ausblenden",
 	"overlay.showOverlay": "Overlay Anzeigen",
diff --git a/public/locales/en.json b/public/locales/en.json
index bc16780..f87174f 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Connected to WebSocket Server",
 	"Notification.webSocketDisconnected": "Failed to Connect to WebSocket Server",
 
+	"overlay.connected": "Connected",
+	"overlay.notConnected": "Not Connected",
 	"overlay.noData": "No Data",
 	"overlay.hideOverlay": "Hide Overlay",
 	"overlay.showOverlay": "Show Overlay",
diff --git a/public/locales/es-419.json b/public/locales/es-419.json
index 4e25b42..07816e7 100644
--- a/public/locales/es-419.json
+++ b/public/locales/es-419.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Conectado al servidor WebSocket",
 	"Notification.webSocketDisconnected": "No se pudo conectar al servidor WebSocket",
 
+	"overlay.connected": "Conectado",
+	"overlay.notConnected": "No conectado",
 	"overlay.noData": "Sin datos",
 	"overlay.hideOverlay": "Cerrar superposición",
 	"overlay.showOverlay": "Abrir superposición",
diff --git a/public/locales/es.json b/public/locales/es.json
index 8721be5..607a2d4 100644
--- a/public/locales/es.json
+++ b/public/locales/es.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Conectado al servidor WebSocket",
 	"Notification.webSocketDisconnected": "No se pudo conectar al servidor WebSocket",
 
+	"overlay.connected": "Conectado",
+	"overlay.notConnected": "No conectado",
 	"overlay.noData": "Sin datos",
 	"overlay.hideOverlay": "Cerrar superposición",
 	"overlay.showOverlay": "Abrir superposición",
diff --git a/public/locales/fr-CA.json b/public/locales/fr-CA.json
index ddd0b9a..a06e338 100644
--- a/public/locales/fr-CA.json
+++ b/public/locales/fr-CA.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Connecté au serveur WebSocket",
 	"Notification.webSocketDisconnected": "Échec de la connexion au serveur WebSocket",
 
+	"overlay.connected": "Connecté",
+	"overlay.notConnected": "Non connecté",
 	"overlay.noData": "Aucune donnée",
 	"overlay.hideOverlay": "Masquer la superposition",
 	"overlay.showOverlay": "Afficher la superposition",
diff --git a/public/locales/fr.json b/public/locales/fr.json
index 3a4b356..6f89971 100644
--- a/public/locales/fr.json
+++ b/public/locales/fr.json
@@ -56,6 +56,8 @@
 	"Notification.webSocketConnected": "Connecté au serveur WebSocket",
 	"Notification.webSocketDisconnected": "Échec de la connexion au serveur WebSocket",
 
+	"overlay.connected": "Connecté",
+	"overlay.notConnected": "Non connecté",
 	"overlay.noData": "Aucune donnée",
 	"overlay.hideOverlay": "Masquer la superposition",
 	"overlay.showOverlay": "Afficher la superposition",
diff --git a/public/locales/it.json b/public/locales/it.json
index 75b9e4e..d4c3845 100644
--- a/public/locales/it.json
+++ b/public/locales/it.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Connesso al server WebSocket",
 	"Notification.webSocketDisconnected": "Connessione al server WebSocket fallita",
 
+	"overlay.connected": "Connesso",
+	"overlay.notConnected": "Non connesso",
 	"overlay.noData": "Nessun dato",
 	"overlay.hideOverlay": "Nascondi sovrapposizione",
 	"overlay.showOverlay": "Mostra sovrapposizione",
diff --git a/public/locales/ja.json b/public/locales/ja.json
index f8dde00..731412d 100644
--- a/public/locales/ja.json
+++ b/public/locales/ja.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "WebSocketサーバーに接続しました",
 	"Notification.webSocketDisconnected": "WebSocketサーバーに接続できませんでした",
 
+	"overlay.connected": "接続済み",
+	"overlay.notConnected": "未接続",
 	"overlay.noData": "データなし",
 	"overlay.hideOverlay": "オーバーレイを非表示",
 	"overlay.showOverlay": "オーバーレイを表示",
diff --git a/public/locales/ko.json b/public/locales/ko.json
index 5c3f857..f804cc6 100644
--- a/public/locales/ko.json
+++ b/public/locales/ko.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "WebSocket 서버에 연결됨",
 	"Notification.webSocketDisconnected": "WebSocket 서버에 연결 실패",
 
+	"overlay.connected": "연결됨",
+	"overlay.notConnected": "연결되지 않음",
 	"overlay.noData": "데이터 없음",
 	"overlay.hideOverlay": "오버레이 끄기",
 	"overlay.showOverlay": "오버레이 켜기",
diff --git a/public/locales/nl.json b/public/locales/nl.json
index 13b136c..5eef0f3 100644
--- a/public/locales/nl.json
+++ b/public/locales/nl.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Verbonden met WebSocket-server",
 	"Notification.webSocketDisconnected": "Verbinding met WebSocket-server mislukt",
 
+	"overlay.connected": "Verbonden",
+	"overlay.notConnected": "Niet verbonden",
 	"overlay.noData": "Geen gegevens",
 	"overlay.hideOverlay": "Verberg overlay",
 	"overlay.showOverlay": "Toon overlay",
diff --git a/public/locales/ru.json b/public/locales/ru.json
index 5c6bdef..18d7daa 100644
--- a/public/locales/ru.json
+++ b/public/locales/ru.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "Подключено к WebSocket серверу",
 	"Notification.webSocketDisconnected": "Не удалось подключиться к WebSocket серверу",
 
+	"overlay.connected": "Подключено",
+	"overlay.notConnected": "Не подключено",
 	"overlay.noData": "Нет данных",
 	"overlay.hideOverlay": "Скрыть наложение",
 	"overlay.showOverlay": "Показать наложение",
diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json
index f7cebfe..87f3aac 100644
--- a/public/locales/zh-CN.json
+++ b/public/locales/zh-CN.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "已连接到WebSocket服务器",
 	"Notification.webSocketDisconnected": "连接WebSocket服务器失败",
 
+	"overlay.connected": "已连接",
+	"overlay.notConnected": "未连接",
 	"overlay.noData": "没有数据",
 	"overlay.hideOverlay": "隐藏叠加",
 	"overlay.showOverlay": "显示叠加",
diff --git a/public/locales/zh-TW.json b/public/locales/zh-TW.json
index 17bea26..8f006e3 100644
--- a/public/locales/zh-TW.json
+++ b/public/locales/zh-TW.json
@@ -55,6 +55,8 @@
 	"Notification.webSocketConnected": "已連接到WebSocket伺服器",
 	"Notification.webSocketDisconnected": "連接WebSocket伺服器失敗",
 
+	"overlay.connected": "連接的",
+	"overlay.notConnected": "未連接",
 	"overlay.noData": "沒有資料",
 	"overlay.hideOverlay": "隱藏疊加",
 	"overlay.showOverlay": "顯示疊加",
diff --git a/src/app/App.css b/src/app/App.css
index 19c526b..ec3e27e 100644
--- a/src/app/App.css
+++ b/src/app/App.css
@@ -9,13 +9,3 @@
 	color: #FFF;
 	background: linear-gradient(120deg, #4B0024, #4B2800);
 }
-
-.App-footer {
-	display: inline;
-	margin-left: auto;
-
-	font-size: 75%;
-	text-align: right;
-
-	color: var(--fg-secondary);
-}
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 5416d0a..142fac1 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -18,10 +18,6 @@ const App = () => {
 			<div className='App-ui'>
 				<SettingsWindow />
 				<OverlayController />
-
-				<footer className='App-footer'>
-					ShakeStreamKit. Copyright © 2024 mntone. Licensed under the GPLv3 license.
-				</footer>
 			</div>
 		</>
 	)
diff --git a/src/index.css b/src/index.css
index eeaecd5..5ddc75b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -93,6 +93,10 @@ html:lang(zh-TW) body, .SelectItem:lang(zh-TW) {
 	}
 }
 
+p {
+	margin: 0;
+}
+
 input,
 input::-webkit-file-upload-button,
 input::-webkit-slider-thumb,
@@ -318,6 +322,19 @@ button {
 	outline: 2px solid #FFFC;
 }
 
+.StatusText {
+	vertical-align: middle;
+}
+.StatusText-positive {
+	color: var(--fg-pos);
+}
+.StatusText-negative {
+	color: var(--fg-neg);
+}
+.StatusText > .Icon16:first-child {
+	margin-right: .125em;
+}
+
 @keyframes fadeIn {
 	from { opacity: 0; }
 	to { opacity: 1; }
diff --git a/src/modules/overlay/components/OverlayController.tsx b/src/modules/overlay/components/OverlayController.tsx
deleted file mode 100644
index 4ecbf7c..0000000
--- a/src/modules/overlay/components/OverlayController.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { memo } from 'react'
-
-import MatchSelector from './MatchSelector'
-import WaveSelector from './WaveSelector'
-
-export const OverlayController = () => {
-	return (
-		<>
-			<MatchSelector />
-			<WaveSelector />
-		</>
-	)
-}
-
-export default memo(OverlayController)
diff --git a/src/modules/overlay/components/OverlayController/index.tsx b/src/modules/overlay/components/OverlayController/index.tsx
new file mode 100644
index 0000000..0bf5b40
--- /dev/null
+++ b/src/modules/overlay/components/OverlayController/index.tsx
@@ -0,0 +1,48 @@
+import './styles.css'
+
+import { memo, useCallback } from 'react'
+import { useIntl } from 'react-intl'
+
+import { CheckIcon, XMarkIcon } from '@heroicons/react/16/solid'
+
+import WebSocketStatus from '@/telemetry/components/WebSocketStatus'
+
+import OverlayMessages from '../../messages'
+import MatchSelector from '../MatchSelector'
+import WaveSelector from '../WaveSelector'
+
+export const OverlayController = function () {
+	const intl = useIntl()
+	const websocketStatusPositive = useCallback(function () {
+		return (
+			<>
+				<CheckIcon className='Icon16' />
+				{intl.formatMessage(OverlayMessages.connected)}
+			</>
+		)
+	}, [intl])
+
+	return (
+		<>
+			<MatchSelector />
+			<WaveSelector />
+
+			<div className='Overlay-last'>
+				<WebSocketStatus
+					positiveChildren={websocketStatusPositive}
+					negativeChildren={(
+						<>
+							<XMarkIcon className='Icon16' />
+							{intl.formatMessage(OverlayMessages.notConnected)}
+						</>
+					)}
+				/>
+				<footer>
+					ShakeStreamKit. © 2024 mntone (GPLv3)
+				</footer>
+			</div>
+		</>
+	)
+}
+
+export default memo(OverlayController)
diff --git a/src/modules/overlay/components/OverlayController/styles.css b/src/modules/overlay/components/OverlayController/styles.css
new file mode 100644
index 0000000..24a2adc
--- /dev/null
+++ b/src/modules/overlay/components/OverlayController/styles.css
@@ -0,0 +1,9 @@
+.Overlay-last {
+	margin-left: auto;
+
+	font-size: 80%;
+	line-height: 1.25;
+	text-align: right;
+
+	color: var(--fg-secondary);
+}
diff --git a/src/modules/overlay/messages.ts b/src/modules/overlay/messages.ts
index f6fc4b8..5afb989 100644
--- a/src/modules/overlay/messages.ts
+++ b/src/modules/overlay/messages.ts
@@ -1,6 +1,14 @@
 import { defineMessages } from 'react-intl'
 
 const OverlayMessages = defineMessages({
+	connected: {
+		id: 'overlay.connected',
+		defaultMessage: 'Connected',
+	},
+	notConnected: {
+		id: 'overlay.notConnected',
+		defaultMessage: 'Not Connected',
+	},
 	noData: {
 		id: 'overlay.noData',
 		defaultMessage: 'No Data',
diff --git a/src/modules/settings/pages/DataSourcePage.tsx b/src/modules/settings/pages/DataSourcePage.tsx
index 3d80d57..94e6632 100644
--- a/src/modules/settings/pages/DataSourcePage.tsx
+++ b/src/modules/settings/pages/DataSourcePage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext } from 'react'
+import { useCallback } from 'react'
 import { useIntl } from 'react-intl'
 import { useDispatch } from 'react-redux'
 
@@ -7,7 +7,7 @@ import { CheckIcon, XMarkIcon } from '@heroicons/react/16/solid'
 import CheckBox from '@/core/components/CheckBox'
 import SliderBox from '@/core/components/SliderBox'
 import { setMatch } from '@/overlay/slicers'
-import { WebSocketContext } from '@/telemetry/components/WebSocketProvider'
+import WebSocketStatus from '@/telemetry/components/WebSocketStatus'
 import { ShakeEvent } from '@/telemetry/models/telemetry'
 import { setTelemetry } from '@/telemetry/slicers'
 import { RealtimeTelemetrySimulator } from '@/telemetry/utils/simulator'
@@ -21,11 +21,22 @@ import { setSimulation, setSpeed } from '../slicers'
 
 const DataSourcePage = () => {
 	const intl = useIntl()
-	const wsConnect = useContext(WebSocketContext)
 
 	const simulationEnabled = useAppSelector(state => state.config.simulation) === true
 	const simulationSpeed = useAppSelector(state => state.config.speed) ?? 2.0
 
+	const websocketStatusPositive = useCallback(function (url: string) {
+		return (
+			<>
+				<CheckIcon className='Icon16' />
+				{intl.formatMessage(
+					DialogMessages.dataSourceConnected,
+					{ url },
+				)}
+			</>
+		)
+	}, [intl])
+
 	const dispatch = useDispatch()
 	const simulator = new RealtimeTelemetrySimulator(dispatch, simulationSpeed)
 
@@ -55,25 +66,17 @@ const DataSourcePage = () => {
 					{intl.formatMessage(DialogMessages.dataSourceServerAddress)}
 				</h3>
 				<ServerAddressBox />
-
-				{
-					wsConnect && wsConnect.isConnect === true
-						? (
-							<span className='StatusText StatusText-positive'>
-								<CheckIcon className='Icon16' />
-								{intl.formatMessage(
-									DialogMessages.dataSourceConnected,
-									{ url: wsConnect.url },
-								)}
-							</span>
-						)
-						: (
-							<span className='StatusText StatusText-negative'>
+				<p>
+					<WebSocketStatus
+						positiveChildren={websocketStatusPositive}
+						negativeChildren={(
+							<>
 								<XMarkIcon className='Icon16' />
 								{intl.formatMessage(DialogMessages.dataSourceNotConnected)}
-							</span>
-						)
-				}
+							</>
+						)}
+					/>
+				</p>
 			</section>
 
 			<section className='Form-group'>
diff --git a/src/modules/settings/pages/DevelopmentPage.tsx b/src/modules/settings/pages/DevelopmentPage.tsx
index 5a28f21..dec7c6b 100644
--- a/src/modules/settings/pages/DevelopmentPage.tsx
+++ b/src/modules/settings/pages/DevelopmentPage.tsx
@@ -31,7 +31,7 @@ const DevelopmentPage = () => {
 					<h3>
 						{intl.formatMessage(DialogMessages.developmentPreview)}
 					</h3>
-					<p>
+					<p className='Form-description'>
 						{intl.formatMessage(DialogMessages.developmentUseCamera)}
 					</p>
 					<CameraSelector />
diff --git a/src/modules/settings/styles.css b/src/modules/settings/styles.css
index dabaaf6..67d7f62 100644
--- a/src/modules/settings/styles.css
+++ b/src/modules/settings/styles.css
@@ -77,6 +77,12 @@ body:not(.env-nonblur) .Dialog-content {
 	background-color: transparent;
 	transition: var(--ctl-transition);
 }
+@media (any-pointer: coarse) {
+	.Dialog-tabitem {
+		padding-top: .375em;
+		padding-bottom: .375em;
+	}
+}
 .Dialog-tabitem[data-state=active] {
 	background-color: var(--ctl-bg);
 }
@@ -135,24 +141,15 @@ body:not(.env-nonblur) .Dialog-content {
 	font-weight: normal;
 }
 
-.Form-group > p {
+.Form-description {
 	margin: -.25em 0 .5em;
 	font-size: .875em;
 	color: #FFFFFFE6;
 }
 
-.StatusText {
+.Form-group .StatusText {
 	font-size: .875em;
 }
-.StatusText-positive {
-	color: var(--fg-pos);
-}
-.StatusText-negative {
-	color: var(--fg-neg);
-}
-.StatusText > .Icon16:first-child {
-	margin-right: .125em;
-}
 
 .SettingsDialog-close {
 	position: absolute;
diff --git a/src/modules/telemetry/components/WebSocketStatus.tsx b/src/modules/telemetry/components/WebSocketStatus.tsx
new file mode 100644
index 0000000..6c2ce5b
--- /dev/null
+++ b/src/modules/telemetry/components/WebSocketStatus.tsx
@@ -0,0 +1,32 @@
+import { ReactNode, useContext } from 'react'
+
+import { WebSocketContext } from './WebSocketProvider'
+
+interface WebSocketStatusProps {
+	positiveChildren?: (url: string) => ReactNode | undefined
+	negativeChildren?: ReactNode | undefined
+}
+
+const WebSocketStatus = function (props: WebSocketStatusProps) {
+	const {
+		positiveChildren,
+		negativeChildren,
+	} = props
+
+	const wsConnect = useContext(WebSocketContext)
+	const isConnected = wsConnect?.isConnect === true
+	if (isConnected && positiveChildren === undefined) {
+		return null
+	}
+	if (!isConnected && negativeChildren === undefined) {
+		return null
+	}
+
+	return wsConnect && (
+		<span className={`StatusText StatusText-${isConnected ? 'positive' : 'negative'}`}>
+			{isConnected ? positiveChildren!(wsConnect.url) : negativeChildren}
+		</span>
+	)
+}
+
+export default WebSocketStatus