diff --git a/src/main/resources/templates/transaction_create.html b/src/main/resources/templates/transaction_create.html
index 53e3bd3..0c818e9 100644
--- a/src/main/resources/templates/transaction_create.html
+++ b/src/main/resources/templates/transaction_create.html
@@ -113,58 +113,66 @@
 
 	<div th:replace="~{footer :: footer}"></div>
 
-	<script inline="javascript">
-		const transactionType = document.getElementById("transactionType");
-		const categoryId = document.getElementById("categoryId");
+	<script th:inline="javascript">
+			const transactionType = document.getElementById("transactionType");
+			const categoryId = document.getElementById("categoryId");
 
-		const expenseList = document.getElementsByClassName("expenseListClass");
-		const incomeList = document.getElementsByClassName("incomeListClass");
+			const expenseList = document.getElementsByClassName("expenseListClass");
+			const incomeList = document.getElementsByClassName("incomeListClass");
 
-		const tType = '[[${session.tType}]]';
-		
-		if (tType == "0") {
-			transactionType.value = 0;
-		} else if (tType == "1") {
-			transactionType.value = 1;
-		}
-		
-		
-		transactionType.addEventListener("change", function () {
+			const tType = '[[${session.tType}]]';
+			
+			function toggleCategory() {
 
-			if (this.value === "0") {
+			    if (transactionType.value === "0") {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "";
-				}
+			        for (let i = 0; i < expenseList.length; i++) {
+			            expenseList[i].style.display = "";
+			        }
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "none";
-				}
+			        for (let i = 0; i < incomeList.length; i++) {
+			            incomeList[i].style.display = "none";
+			        }
 
-			} else if (this.value === "1") {
+			    } else if (transactionType.value === "1") {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "none";
-				}
+			        for (let i = 0; i < expenseList.length; i++) {
+			            expenseList[i].style.display = "none";
+			        }
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "";
-				}
+			        for (let i = 0; i < incomeList.length; i++) {
+			            incomeList[i].style.display = "";
+			        }
 
-			} else {
+			    } else {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "none";
-				}
+					for (let i = 0; i < expenseList.length; i++) {
+						expenseList[i].style.display = "none";
+					}
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "none";
+					for (let i = 0; i < incomeList.length; i++) {
+						incomeList[i].style.display = "none";
+					}
 				}
 			}
 
-			categoryId.value = "";
-		});
-	</script>
+			transactionType.addEventListener("change", function () {
+
+			    toggleCategory();
+
+			    categoryId.value = "";
+
+			});
+			
+			if (tType == "0") {
+				transactionType.value = "0";
+			} else if (tType == "1") {
+				transactionType.value = "1";
+			}
+			
+			toggleCategory();
+			
+		</script>
 
 
 </body>
diff --git a/src/main/resources/templates/transaction_update.html b/src/main/resources/templates/transaction_update.html
index d9d54e7..845047c 100644
--- a/src/main/resources/templates/transaction_update.html
+++ b/src/main/resources/templates/transaction_update.html
@@ -156,7 +156,7 @@
     <div th:replace="~{footer :: footer}">
     </div>
 
-	<script inline="javascript">
+	<script th:inline="javascript">
 		const transactionType = document.getElementById("transactionType");
 		const categoryId = document.getElementById("categoryId");
 
@@ -165,36 +165,29 @@
 
 		const tType = '[[${session.tType}]]';
 		
-		if (tType == "0") {
-			transactionType.value = 0;
-		} else if (tType == "1") {
-			transactionType.value = 1;
-		}
-		
-		
-		transactionType.addEventListener("change", function () {
+		function toggleCategory() {
 
-			if (this.value === "0") {
+		    if (transactionType.value === "0") {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "";
-				}
+		        for (let i = 0; i < expenseList.length; i++) {
+		            expenseList[i].style.display = "";
+		        }
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "none";
-				}
+		        for (let i = 0; i < incomeList.length; i++) {
+		            incomeList[i].style.display = "none";
+		        }
 
-			} else if (this.value === "1") {
+		    } else if (transactionType.value === "1") {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "none";
-				}
+		        for (let i = 0; i < expenseList.length; i++) {
+		            expenseList[i].style.display = "none";
+		        }
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "";
-				}
+		        for (let i = 0; i < incomeList.length; i++) {
+		            incomeList[i].style.display = "";
+		        }
 
-			} else {
+		    } else {
 
 				for (let i = 0; i < expenseList.length; i++) {
 					expenseList[i].style.display = "none";
@@ -204,9 +197,24 @@
 					incomeList[i].style.display = "none";
 				}
 			}
+		}
+
+		transactionType.addEventListener("change", function () {
+
+		    toggleCategory();
+
+		    categoryId.value = "";
 
-			categoryId.value = "";
 		});
+		
+		if (tType == "0") {
+			transactionType.value = "0";
+		} else if (tType == "1") {
+			transactionType.value = "1";
+		}
+		
+		toggleCategory();
+		
 	</script>