diff --git a/src/main/frontend/src/components/AddCountryForm.js b/src/main/frontend/src/components/AddCountryForm.js
new file mode 100644
index 0000000000..bcfdedc732
--- /dev/null
+++ b/src/main/frontend/src/components/AddCountryForm.js
@@ -0,0 +1,89 @@
+class AddCountryForm extends React.Component {
+	
+	constructor(props) {
+		super(props);
+		this.state = {
+			nameInEnglish: "",
+			nameInRussian: ""
+		};
+		this.handleSubmit = this.handleSubmit.bind(this);
+		this.handleChange = this.handleChange.bind(this);
+	}
+	
+	handleChange(event) {
+		event.preventDefault();		
+		this.setState({
+			[event.target.name]: event.target.value
+		});
+	}
+	
+	handleSubmit(event) {
+		event.preventDefault();
+
+		this.setState({});
+		
+		axios.post(
+			"categories",{},{}
+		).then(response => {
+
+		}).catch(error => {
+
+		});
+		
+	}
+	
+	render() {
+		return (
+			<form id="add-country-form" className="form-horizontal" onSubmit={this.handleSubmit}
+					/* method="post" action="info.html" th:action="@{${ADD_COUNTRY_PAGE}}" th:object="${addCountryForm}" */>
+				
+				<div className="form-group" /* th:classappend="${#fields.hasErrors('name') ? 'has-error' : ''}" */>
+					<label htmlFor="name" className="control-label col-sm-4">
+						<span /* th:remove="tag" th:text="#{t_name_in_english}" */>
+							Name (in English)
+						</span>
+						<span className="required_field">*</span>
+					</label>
+					<div className="col-sm-5">
+						<input id="name"
+							type="text"
+							className="form-control"
+							value={this.state.nameInEnglish}
+							name="nameInEnglish"
+							required="required"
+							onChange={this.handleChange} /* th:field="*{name}" */ />
+						{/*
+						<span id="name.errors" class="help-block" th:if="${#fields.hasErrors('name')}" th:each="error : ${#fields.errors('name')}" th:text="${error}"></span>
+						 */}
+					</div>
+				</div>
+				
+				<div className="form-group" /* th:classappend="${#fields.hasErrors('nameRu') ? 'has-error' : ''}" */>
+					<label htmlFor="nameRu" className="control-label col-sm-4" /* th:text="#{t_name_in_russian}" */>
+						Name (in Russian)
+					</label>
+					<div className="col-sm-5">
+						<input id="nameRu"
+							type="text" 
+							className="form-control"
+							value={this.state.nameInRussian}
+							name="nameInRussian"
+							onChange={this.handleChange} /* th:field="*{nameRu}" */ />
+						{/* 
+						<span id="nameRu.errors" class="help-block" th:if="${#fields.hasErrors('nameRu')}" th:each="error : ${#fields.errors('nameRu')}" th:text="${error}"></span>
+						 */}
+					</div>
+				</div>
+				
+				<div className="form-group">
+					<div className="col-sm-offset-4 col-sm-5">
+						<input type="submit"
+							className="btn btn-primary"
+							value="Add" /* th:value="#{t_add}" */ />
+					</div>
+				</div>
+				
+			</form>
+		)
+	}
+}
diff --git a/src/main/webapp/WEB-INF/views/country/add.html b/src/main/webapp/WEB-INF/views/country/add.html
index dfa80dd8ba..31a300b3d5 100644
--- a/src/main/webapp/WEB-INF/views/country/add.html
+++ b/src/main/webapp/WEB-INF/views/country/add.html
@@ -73,43 +73,8 @@ <h3 th:text="${#strings.capitalize(add_country)}">
 						</small>
 					</div>
 					
-					<form id="add-country-form" method="post" class="form-horizontal" action="info.html"
-						th:action="@{${ADD_COUNTRY_PAGE}}" th:object="${addCountryForm}">
-						
-						<div class="form-group" th:classappend="${#fields.hasErrors('name') ? 'has-error' : ''}">
-							<label for="name" class="control-label col-sm-4">
-								<span th:remove="tag" th:text="#{t_name_in_english}">
-									Name (in English)
-								</span>
-								<span class="required_field">*</span>
-							</label>
-							<div class="col-sm-5">
-								<input id="name" type="text" class="form-control" required="required" th:field="*{name}" />
-								<!--/*/
-								<span id="name.errors" class="help-block" th:if="${#fields.hasErrors('name')}" th:each="error : ${#fields.errors('name')}" th:text="${error}"></span>
-								/*/-->
-							</div>
-						</div>
-						
-						<div class="form-group" th:classappend="${#fields.hasErrors('nameRu') ? 'has-error' : ''}">
-							<label for="nameRu" class="control-label col-sm-4" th:text="#{t_name_in_russian}">
-								Name (in Russian)
-							</label>
-							<div class="col-sm-5">
-								<input id="nameRu" type="text" class="form-control" th:field="*{nameRu}" />
-								<!--/*/
-								<span id="nameRu.errors" class="help-block" th:if="${#fields.hasErrors('nameRu')}" th:each="error : ${#fields.errors('nameRu')}" th:text="${error}"></span>
-								/*/-->
-							</div>
-						</div>
-						
-						<div class="form-group">
-							<div class="col-sm-offset-4 col-sm-5">
-								<input type="submit" class="btn btn-primary" value="Add" th:value="#{t_add}" />
-							</div>
-						</div>
-						
-					</form>
+					<div id="add-country-form-react"></div>
+
 				</div>
 			</div>
 			<div class="row">
@@ -123,5 +88,14 @@ <h3 th:text="${#strings.capitalize(add_country)}">
 		<!-- Placed at the end of the document so the pages load faster -->
 		<script src="http://yandex.st/jquery/1.9.1/jquery.min.js" th:src="${JQUERY_JS}"></script>
 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" th:src="${BOOTSTRAP_JS}"></script>
+
+		<script src="https://unpkg.com/react@16.8.6/umd/react.development.js" th:src="${REACT_JS}"></script>
+		<script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js" th:src="${REACT_DOM_JS}"></script>
+		<script src="https://unpkg.com/axios@0.19.2/dist/axios.js" th:src="${AXIOS_JS}"></script>
+		
+		<script src="../../../../../../target/classes/js/components/AddCountryForm.js"></script>
+		<script th:inline="javascript">
+			ReactDOM.render(React.createElement(AddCountryForm), document.getElementById('add-country-form-react'));			
+		</script>
 	</body>
 </html>