diff --git a/src/server/cyberhex-code/system/secure_zone/php/index.php b/src/server/cyberhex-code/system/secure_zone/php/index.php
index 5cf18e5..ce062c9 100644
--- a/src/server/cyberhex-code/system/secure_zone/php/index.php
+++ b/src/server/cyberhex-code/system/secure_zone/php/index.php
@@ -21,6 +21,13 @@ $username="test";
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+	<style>
+		@media (max-width: 500px) {
+		  #smallScreenWarning {
+			display: block !important;
+		  }
+		}
+	</style>
 </head>
 <body>
 	<!-- navbar -->
@@ -38,6 +45,23 @@ $username="test";
 	  </div>
 	</nav>
 	
+	<!-- warning for small screens -->
+	<div class="modal fade" id="smallScreenWarning" tabindex="-1" role="dialog" aria-labelledby="smallScreenWarningLabel" aria-hidden="true">
+	  <div class="modal-dialog" role="document">
+		<div class="modal-content">
+		  <div class="modal-header">
+			<h5 class="modal-title" id="smallScreenWarningLabel">Warning!</h5>
+			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			  <span aria-hidden="true">&times;</span>
+			</button>
+		  </div>
+		  <div class="modal-body">
+			The screen size is too small. Please use a larger device for a better experience.
+		  </div>
+		</div>
+	  </div>
+	</div>
+	
 	<div class="container-fluid">
 	  <div class="row">
 		<!-- sidebar -->
