Index: reactapp/package-lock.json
===================================================================
--- reactapp/package-lock.json	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
+++ reactapp/package-lock.json	(revision 800779d11fae3f904af95db61c2464778d067cf9)
@@ -16,6 +16,8 @@
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.27.2",
         "babel": "^6.23.0",
         "babel-plugin-macros": "^3.1.0",
+        "js-cookie": "^3.0.1",
         "jsog": "^1.0.7",
         "react": "^18.2.0",
@@ -4872,4 +4874,26 @@
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
@@ -11307,4 +11331,12 @@
       "funding": {
         "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
+      "engines": {
+        "node": ">=12"
       }
     },
@@ -20360,4 +20392,25 @@
       "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
@@ -25033,4 +25086,9 @@
         }
       }
+    },
+    "js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
     },
     "js-tokens": {
Index: reactapp/package.json
===================================================================
--- reactapp/package.json	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
+++ reactapp/package.json	(revision 800779d11fae3f904af95db61c2464778d067cf9)
@@ -11,6 +11,8 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "babel": "^6.23.0",
     "babel-plugin-macros": "^3.1.0",
+    "js-cookie": "^3.0.1",
     "jsog": "^1.0.7",
     "react": "^18.2.0",
Index: reactapp/src/App.js
===================================================================
--- reactapp/src/App.js	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
+++ reactapp/src/App.js	(revision 800779d11fae3f904af95db61c2464778d067cf9)
@@ -1,25 +1,21 @@
-import { Outlet } from "react-router-dom";
-import { MainWrapper, MainTitle } from "./Components/Styled/Main.style";
-import Search from "./Components/Search.js";
+import Professor from "./Pages/Professor";
+import SearchResults from "./Pages/SearchResults";
+import Login from "./Pages/Login";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Home from "./Pages/Home";
 
 export default function App() {
-  //document.body.style = "background: red;";
   return (
-    <MainWrapper>
-      <style>
-        @import
-        url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
-      </style>
-      <style>
-        {
-          "body { background-color: papayawhip;} * {margin: 0; padding: 0; box-sizing: border-box;}"
-        }
-      </style>
-      <a href="/">
-        <MainTitle>profesori.mk</MainTitle>
-      </a>{" "}
-      <Search />
-      <Outlet />
-    </MainWrapper>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />}>
+          <Route path="login" element={<Login />}></Route>
+          <Route path="professor">
+            <Route path=":professorId" element={<Professor />} />
+          </Route>
+          <Route path="search" element={<SearchResults />}></Route>
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
Index: reactapp/src/Pages/Home.js
===================================================================
--- reactapp/src/Pages/Home.js	(revision 800779d11fae3f904af95db61c2464778d067cf9)
+++ reactapp/src/Pages/Home.js	(revision 800779d11fae3f904af95db61c2464778d067cf9)
@@ -0,0 +1,27 @@
+import React from "react";
+import { MainWrapper, MainTitle } from "../Components/Styled/Main.style";
+import { Outlet } from "react-router-dom";
+import Search from "../Components/Search";
+
+function Home() {
+  return (
+    <MainWrapper>
+      <style>
+        @import
+        url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
+      </style>
+      <style>
+        {
+          "body { background-color: papayawhip;} * {margin: 0; padding: 0; box-sizing: border-box;}"
+        }
+      </style>
+      <a href="/">
+        <MainTitle>profesori.mk</MainTitle>
+      </a>{" "}
+      <Search />
+      <Outlet />
+    </MainWrapper>
+  );
+}
+
+export default Home;
Index: reactapp/src/Pages/Login.js
===================================================================
--- reactapp/src/Pages/Login.js	(revision 800779d11fae3f904af95db61c2464778d067cf9)
+++ reactapp/src/Pages/Login.js	(revision 800779d11fae3f904af95db61c2464778d067cf9)
@@ -0,0 +1,79 @@
+import React, { useRef, useState, useEffect } from "react";
+import axios from "../api/axios";
+const LOGIN_URL = "/login";
+
+const Login = () => {
+  const userRef = useRef();
+  const errRef = useRef();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [errMsg, setErrMsg] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    userRef.current.focus();
+  }, []);
+
+  useEffect(() => {
+    setErrMsg("");
+  }, [username, password]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const response = await axios.post(
+      LOGIN_URL,
+      `username=${username}&password=${password}`,
+      {
+        headers: {
+          "content-type": "application/x-www-form-urlencoded",
+          withCredentials: true,
+        },
+      }
+    );
+    setUsername("");
+    setPassword("");
+    setSuccess(true);
+  };
+
+  return success ? (
+    <div style={{ marginTop: "140px" }}>
+      <h1>Успешна најава!</h1>
+      <br />
+      <p>
+        <a href="/">Оди на почетната страница</a>
+      </p>
+    </div>
+  ) : (
+    <div style={{ marginTop: "140px" }}>
+      <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"}>
+        {errMsg}
+      </p>
+      <h1>Најава</h1>
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="username">E-mail:</label>
+        <input
+          type="text"
+          id="username"
+          ref={userRef}
+          autoComplete="off"
+          onChange={(e) => setUsername(e.target.value)}
+          value={username}
+          required
+        />
+        <label htmlFor="password">Лозинка:</label>
+        <input
+          type="password"
+          id="password"
+          onChange={(e) => setPassword(e.target.value)}
+          value={password}
+          required
+        />
+        <button>Најави се</button>
+      </form>
+    </div>
+  );
+};
+
+export default Login;
Index: reactapp/src/api/axios.js
===================================================================
--- reactapp/src/api/axios.js	(revision 800779d11fae3f904af95db61c2464778d067cf9)
+++ reactapp/src/api/axios.js	(revision 800779d11fae3f904af95db61c2464778d067cf9)
@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export default axios.create({
+  baseURL: "http://192.168.0.17:8080",
+});
Index: reactapp/src/index.js
===================================================================
--- reactapp/src/index.js	(revision 3e98cea08277dd29ff57070f4333ef753eec4306)
+++ reactapp/src/index.js	(revision 800779d11fae3f904af95db61c2464778d067cf9)
@@ -1,19 +1,5 @@
 import ReactDOM from "react-dom/client";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
 import App from "./App";
-import Professor from "./Pages/Professor";
-import SearchResults from "./Pages/SearchResults";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <BrowserRouter>
-    <Routes>
-      <Route path="/" element={<App />}>
-        <Route path="professor">
-          <Route path=":professorId" element={<Professor />} />
-        </Route>
-        <Route path="search" element={<SearchResults />}></Route>
-      </Route>
-    </Routes>
-  </BrowserRouter>
-);
+root.render(<App />);
