diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 59cf091..dd8adfc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -40,7 +40,7 @@ export default function RootLayout({
 								}}
 							>
 								<AppWrapper>
-									<Flex h='100%' w='100%' direction='column'>
+									<Flex h='100%' w='100%' direction='column' gap='0px'>
 										<ConnectionStatus />
 										<Box w='100%' h='100%' zIndex={1}>
 											{children}
diff --git a/src/components/general/ConnectionStatus.tsx b/src/components/general/ConnectionStatus.tsx
index c996839..5e43e32 100644
--- a/src/components/general/ConnectionStatus.tsx
+++ b/src/components/general/ConnectionStatus.tsx
@@ -49,15 +49,24 @@ export default function ConnectionStatus() {
 				<Center
 					as={motion.div}
 					w='100%'
-					bg={getColorValue('ternaryBackground')}
 					initial={{ height: '0px' }}
 					animate={{ height: '32px', transition: { delay: 2 } }}
 					exit={{ height: '0px' }}
+					p='0px'
 				>
-					<Flex alignItems='center' gap='10px' zIndex={0}>
-						{statusSignals[statusIndex]}
-						<Text fontWeight='bold'>Connecting...</Text>
-					</Flex>
+					<Center
+						w='100%'
+						h='32px'
+						top='0%'
+						left='0%'
+						bg={getColorValue('ternaryBackground')}
+						position='fixed'
+					>
+						<Flex alignItems='center' gap='10px' zIndex={0}>
+							{statusSignals[statusIndex]}
+							<Text fontWeight='bold'>Connecting...</Text>
+						</Flex>
+					</Center>
 				</Center>
 			)}
 		</AnimatePresence>