diff --git a/general/README.md b/general/README.md
index 337d46fd..71ef907d 100644
--- a/general/README.md
+++ b/general/README.md
@@ -66,6 +66,8 @@ The following values can be defined in `variables`:
 
 - `jenkinsJobUrl` - used to group versions based on Jenkins jobs. DEFAULT: `null`, EXAMPLE: `https://jenkins.edmcouncil.org/job/idmp/`
 
+- `authEnabled` - used to enable authorization feature, login and register functionality will be enabled when value is set to `true`.
+
 ## Build and run frontend
 
 - create directory for frontend application instance
diff --git a/general/api/ontology.js b/general/api/ontology.js
index ff07c156..f8c5839b 100644
--- a/general/api/ontology.js
+++ b/general/api/ontology.js
@@ -1,3 +1,50 @@
+import axios from 'axios';
+import {
+  useAuthStore,
+  useOntologyStore,
+  useConfigurationStore,
+  useToastStore
+} from '#imports';
+export const axiosClient = axios.create();
+
+axiosClient.interceptors.request.use((config) => {
+  const authStore = useAuthStore();
+  const configStore = useConfigurationStore();
+
+  const currentOrigin = window.location.origin;
+  const requestUrl = new URL(config.url, currentOrigin);
+
+  if (
+    configStore.config.authEnabled === 'true' &&
+    authStore.jwt &&
+    !config.noAuth &&
+    requestUrl.origin === currentOrigin
+  ) {
+    config.headers.Authorization = `Bearer ${authStore.jwt}`;
+  }
+
+  return config;
+});
+
+axiosClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const toastStore = useToastStore();
+    const authStore = useAuthStore();
+    const ontologyStore = useOntologyStore();
+
+    if (error.response && error.response.status === 401) {
+      toastStore.addToast('Session expired. Please log in again.');
+      authStore.clear();
+    }
+    if (error.response && error.response.status === 403) {
+      ontologyStore.unauthorizedError = true;
+    }
+
+    return Promise.reject(error);
+  }
+);
+
 function ServerError(message, status) {
   this.message = message;
   this.status = status;
@@ -10,59 +57,83 @@ const parseServerError = (response) => {
   return response;
 };
 
-const getEntity = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/json' }
-  }).then(parseServerError);
+const getEntity = (domain, config = {}) =>
+  axiosClient
+    .get(domain, {
+      ...config,
+      headers: { Accept: 'application/json', ...config.headers }
+    })
+    .then(parseServerError)
+    .then((response) => response.data);
 
-const getModules = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/json' }
-  }).then(parseServerError);
+const getModules = (domain, config = {}) =>
+  axiosClient
+    .get(domain, {
+      ...config,
+      headers: { Accept: 'application/json', ...config.headers }
+    })
+    .then(parseServerError)
+    .then((response) => response.data);
 
-const getOntologyVersions = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/json' }
-  }).then(parseServerError);
+const getOntologyVersions = (domain, config = {}) =>
+  axiosClient
+    .get(domain, {
+      ...config,
+      headers: { Accept: 'application/json', ...config.headers }
+    })
+    .then(parseServerError)
+    .then((response) => response.data);
 
 const getJenkinsJobs = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/json' }
-  }).then(parseServerError);
-
-const getFindSearch = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/json' }
-  }).then(parseServerError);
-
-const getFindProperties = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/json' }
-  }).then(parseServerError);
-
-const getStats = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/json' }
-  }).then(parseServerError);
-
-const getMissingImports = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/json' }
-  }).then(parseServerError);
-
-const getDescribeIntegration = (domain) =>
-  fetch(domain, {
-    method: 'GET',
-    headers: { Accept: 'application/rdf+xml' }
-  }).then(parseServerError);
+  axiosClient
+    .get(domain, { noAuth: true, headers: { Accept: 'application/json' } })
+    .then(parseServerError)
+    .then((response) => response.data);
+
+const getFindSearch = (domain, config = {}) =>
+  axiosClient
+    .get(domain, {
+      ...config,
+      headers: { Accept: 'application/json', ...config.headers }
+    })
+    .then(parseServerError)
+    .then((response) => response.data);
+
+const getFindProperties = (domain, config = {}) =>
+  axiosClient
+    .get(domain, {
+      ...config,
+      headers: { Accept: 'application/json', ...config.headers }
+    })
+    .then(parseServerError)
+    .then((response) => response.data);
+
+const getStats = (domain, config = {}) =>
+  axiosClient
+    .get(domain, {
+      ...config,
+      headers: { Accept: 'application/json', ...config.headers }
+    })
+    .then(parseServerError)
+    .then((response) => response.data);
+
+const getMissingImports = (domain, config = {}) =>
+  axiosClient
+    .get(domain, {
+      ...config,
+      headers: { Accept: 'application/json', ...config.headers }
+    })
+    .then(parseServerError)
+    .then((response) => response.data);
+
+const getDescribeIntegration = (domain, config = {}) =>
+  axiosClient
+    .get(domain, {
+      ...config,
+      headers: { Accept: 'application/rdf+xml', ...config.headers }
+    })
+    .then(parseServerError)
+    .then((response) => response.data);
 
 export {
   getEntity,
diff --git a/general/api/strapi.js b/general/api/strapi.js
index ad05e8d8..fda637de 100644
--- a/general/api/strapi.js
+++ b/general/api/strapi.js
@@ -174,6 +174,7 @@ export async function getAppConfigurationData(runtimeConfig) {
     data.uriSpace = response.data.attributes.uriSpace;
     data.ontologyRepositoryUrl = response.data.attributes.ontologyRepositoryUrl;
     data.jenkinsJobUrl = response.data.attributes.jenkinsJobUrl;
+    data.authEnabled = response.data.attributes.authEnabled;
 
     // overwrite with 'variables' data
     const { variables } = response.data.attributes;
diff --git a/general/assets/icons/user.svg b/general/assets/icons/user.svg
new file mode 100644
index 00000000..9cca142c
--- /dev/null
+++ b/general/assets/icons/user.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="black" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.03613 15.6674C7.50101 14.0303 9.63007 13 11.9998 13C14.3694 13 16.4984 14.0303 17.9633 15.6673C16.731 17.667 14.521 19 11.9997 19C9.47841 19 7.26848 17.6671 6.03613 15.6674Z" fill="black" fill-opacity="0.8"/>
+<circle cx="12" cy="9" r="3" fill="black" fill-opacity="0.8"/>
+</svg>
diff --git a/general/assets/scss/global.scss b/general/assets/scss/global.scss
index 2fc02210..a73f22d0 100644
--- a/general/assets/scss/global.scss
+++ b/general/assets/scss/global.scss
@@ -236,6 +236,7 @@ body.modal-open {
   }
   &:focus {
     background: $normal-button-focus-bg;
+    color: rgba(255, 255, 255, 0.9);
     box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px 4px;
   }
   &:active {
@@ -651,3 +652,154 @@ a.deprecated {
 a.deprecated:hover {
   color: #ec241d !important;
 }
+
+.modal-card {
+  .modal-error {
+    color: #ec241d;
+  }
+
+  .modal-form {
+    display: flex;
+    flex-direction: column;
+
+    .muted-link {
+      cursor: pointer;
+      align-self: flex-end;
+      color: rgba(0, 0, 0, 0.6);
+
+      &:focus-visible {
+        box-shadow: $form-focus-shadow;
+      }
+
+      &:active {
+        filter: none;
+        box-shadow: none;
+      }
+    }
+
+    .normal-button {
+      width: fit-content;
+    }
+
+    .alert {
+      color: rgba(0, 0, 0, 0.8);
+      font-style: normal;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.01em;
+      border: none;
+      border-radius: 2px;
+      margin-top: 20px;
+      padding: 5px 15px 5px 15px;
+      background-color: #ec241d;
+    }
+  }
+}
+
+.modal.login-modal,
+.modal.recover-modal,
+.modal.reset-modal,
+.modal.confirmEmail-modal,
+.modal.register-modal {
+  .modal-header {
+    position: relative;
+    box-shadow: 0px 5px 20px -5px rgba(8, 84, 150, 0.15);
+    border: none;
+    padding: 15px 40px;
+
+    justify-content: space-between;
+
+    .close-btn {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      width: 24px;
+      height: 30px;
+      padding: 0;
+      margin-left: 20px;
+
+      &::before {
+        content: '';
+        background-image: url('../../assets/icons/close.svg');
+        background-repeat: no-repeat;
+        background-size: 24px 24px;
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .return-btn {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      width: 24px;
+      height: 30px;
+      padding: 0;
+      margin-right: 20px;
+
+      &::before {
+        content: '';
+        background-image: url('../../assets/icons/return-arrow.svg');
+        background-repeat: no-repeat;
+        background-size: 24px 24px;
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .left {
+      display: flex;
+      align-items: center;
+    }
+
+    h5.modal-title {
+      font-style: normal;
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 30px;
+      color: #000000;
+
+      padding: 0;
+      margin: 0;
+      position: relative;
+    }
+  }
+  .modal-content {
+    border-radius: 2px;
+    border: none;
+    background: white;
+    height: 100%;
+  }
+  .modal-body {
+    padding: 30px 40px;
+    height: 100%;
+    position: relative;
+
+    a {
+      color: rgba(0, 0, 0, 0.8);
+      text-decoration: none;
+
+      &:hover {
+        color: $link-hover-color;
+      }
+
+      &:active {
+        color: $link-active-color;
+      }
+    }
+  }
+  .modal-footer {
+    border: none;
+    box-shadow: 0px -5px 20px -5px rgba(8, 84, 150, 0.15);
+    padding: 18px 30px;
+
+    justify-content: space-between;
+
+    .normal-button.small {
+      margin-bottom: 0 !important;
+    }
+  }
+}
diff --git a/general/components/Articles/SerializationListSection.vue b/general/components/Articles/SerializationListSection.vue
index cd7507cd..8f109d1e 100644
--- a/general/components/Articles/SerializationListSection.vue
+++ b/general/components/Articles/SerializationListSection.vue
@@ -306,10 +306,9 @@ export default {
     },
     async fetchVersions() {
       try {
-        const result = await getOntologyVersions(
+        const ontologyVersions = await getOntologyVersions(
           `/${this.ontologyName}/ontology/api/`
         );
-        const ontologyVersions = await result.json();
 
         const first = 'master/latest';
         ontologyVersions.sort((x, y) =>
@@ -352,24 +351,21 @@ export default {
           const tagName = runtimeConfig.public.tagName;
 
           // group versions by tags, pull requests and releases
-          const tagsResult = await getJenkinsJobs(
+          const tagsJson = await getJenkinsJobs(
             `${jenkinsJobUrl}/view/tags/api/json`
           );
-          const tagsJson = await tagsResult.json();
           const tags = tagsJson.jobs.map((item) => item.name.toLowerCase());
 
-          const pullRequestsResult = await getJenkinsJobs(
+          const pullRequestsJson = await getJenkinsJobs(
             `${jenkinsJobUrl}/view/change-requests/api/json`
           );
-          const pullRequestsJson = await pullRequestsResult.json();
           const pullRequests = pullRequestsJson.jobs.map((item) =>
             item.name.toLowerCase()
           );
 
-          const defaultViewResult = await getJenkinsJobs(
+          const defaultViewJson = await getJenkinsJobs(
             `${jenkinsJobUrl}/view/default/api/json`
           );
-          const defaultViewJson = await defaultViewResult.json();
           const defaultView = defaultViewJson.jobs.map((item) =>
             item.name.toLowerCase()
           );
diff --git a/general/components/Header/AuthComponent.vue b/general/components/Header/AuthComponent.vue
new file mode 100644
index 00000000..bbaceef5
--- /dev/null
+++ b/general/components/Header/AuthComponent.vue
@@ -0,0 +1,145 @@
+<template>
+  <ClientOnly>
+    <div v-if="configStore.config.authEnabled === 'true'">
+      <AuthLoginModal />
+      <AuthRegisterModal />
+      <AuthRecoverModal />
+      <AuthResetModal />
+      <AuthConfirmEmailModal />
+      <div class="auth-component dropdown me-1 me-lg-0">
+        <div v-if="isLoggedIn" class="auth-component-wrapper">
+          <a
+            id="authDropdown"
+            class="dropdown-toggle user-email"
+            href="#"
+            role="button"
+            data-bs-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >
+            <span class="me-3">{{ user?.username }}</span>
+            <img
+              src="@/assets/icons/user.svg"
+              alt="User icon"
+              class="user-icon me-2"
+            />
+          </a>
+          <div
+            class="dropdown-menu dropdown-menu-end"
+            aria-labelledby="authDropdown"
+          >
+            <a class="dropdown-item" @click="logout"> Logout </a>
+          </div>
+        </div>
+        <div v-else>
+          <a class="login-link" @click="openLogin"> Login </a>
+        </div>
+      </div>
+    </div>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+import { useAuthStore } from '~/stores/auth';
+import { useAuthModalStore } from '~/stores/authModal';
+
+const authStore = useAuthStore();
+const authModalStore = useAuthModalStore();
+const configStore = useConfigurationStore();
+
+const isLoggedIn = computed(() => !!authStore.jwt);
+const user = computed(() => authStore.user);
+
+const logout = () => {
+  authStore.clear();
+};
+
+const openLogin = () => {
+  authModalStore.openModal('login');
+};
+</script>
+
+<style scoped lang="scss">
+.auth-component {
+  display: flex;
+  align-items: center;
+  margin-left: 40px;
+
+  .auth-component-wrapper {
+    max-width: 40vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .avatar {
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  .user-email {
+    cursor: pointer;
+    font-family: 'Inter', sans-serif;
+    font-weight: bold;
+    font-size: 18px;
+    color: rgba(0, 0, 0, 0.8);
+    text-decoration: none;
+  }
+
+  .login-link {
+    cursor: pointer;
+    font-family: 'Inter', sans-serif;
+    font-weight: bold;
+    font-size: 18px;
+    color: rgba(0, 0, 0, 0.8);
+    text-decoration: none;
+
+    &:hover {
+      color: black;
+    }
+  }
+
+  .dropdown-menu {
+    user-select: none;
+    pointer-events: none;
+
+    display: block;
+    padding: 0;
+    width: 200px;
+    border: none;
+    background-color: #fff;
+    box-shadow: 0px 5px 20px -5px rgba(8, 84, 150, 0.15);
+    border-radius: 2px;
+    right: 0;
+    left: auto;
+
+    margin-top: 5px;
+    opacity: 0;
+
+    transition:
+      opacity 0.35s ease,
+      margin-top 0.35s ease;
+
+    &.show {
+      user-select: unset;
+      pointer-events: unset;
+
+      margin-top: 15px;
+      opacity: 1;
+    }
+
+    .dropdown-item {
+      font-family: 'Inter', sans-serif;
+      font-weight: bold;
+      font-size: 18px;
+      color: rgba(0, 0, 0, 0.8);
+      padding: 15px 20px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        text-decoration: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/general/components/Header/AuthConfirmEmailModal.vue b/general/components/Header/AuthConfirmEmailModal.vue
new file mode 100644
index 00000000..969f6aea
--- /dev/null
+++ b/general/components/Header/AuthConfirmEmailModal.vue
@@ -0,0 +1,63 @@
+<template>
+  <BsModal
+    id="confirmEmail-modal"
+    :open="authModalStore.authModal === 'confirmEmail'"
+    modal-class="confirmEmail-modal"
+    footer-class="d-none"
+    @on-modal-hidden="hideModal"
+  >
+    <template #modal-header>
+      <div class="left">
+        <div
+          type="button"
+          class="return-btn"
+          data-dismiss="modal"
+          aria-label="Return"
+          @click="handleReturn"
+          @keydown="handleReturn"
+        ></div>
+        <h5 class="modal-title">E-mail verification</h5>
+      </div>
+      <div
+        type="button"
+        class="close-btn"
+        data-dismiss="modal"
+        aria-label="Close"
+        @click="hideModal"
+      ></div>
+    </template>
+
+    <div class="modal-card">
+      <p class="small">
+        Your e-mail address has been verified successfully. You can now log in.
+      </p>
+    </div>
+  </BsModal>
+</template>
+
+<script lang="ts" setup>
+import { useAuthModalStore } from '~/stores/authModal';
+import { useRoute, useRouter } from 'vue-router';
+
+const authModalStore = useAuthModalStore();
+
+const route = useRoute();
+const router = useRouter();
+
+onMounted(() => {
+  if (route.query.confirmation) {
+    const { confirmation, ...restQuery } = route.query;
+    router.replace({ query: restQuery });
+
+    authModalStore.openModal('confirmEmail');
+  }
+});
+
+const hideModal = () => {
+  authModalStore.closeModal();
+};
+
+const handleReturn = () => {
+  authModalStore.openModal('login');
+};
+</script>
diff --git a/general/components/Header/AuthLoginModal.vue b/general/components/Header/AuthLoginModal.vue
new file mode 100644
index 00000000..0fb89758
--- /dev/null
+++ b/general/components/Header/AuthLoginModal.vue
@@ -0,0 +1,146 @@
+<template>
+  <BsModal
+    id="login-modal"
+    :open="modalOpen"
+    modal-class="login-modal"
+    footer-class="d-none"
+    :can-escape="true"
+    @on-modal-hidden="hideModal"
+  >
+    <template #modal-header>
+      <h5 class="modal-title">Login</h5>
+      <div
+        type="button"
+        class="close-btn"
+        data-dismiss="modal"
+        aria-label="Close"
+        @click="hideModal"
+      ></div>
+    </template>
+    <div class="modal-card">
+      <div v-show="!!error" :key="'error-message'" class="modal-error mb-2">
+        {{ error ? error : '' }}
+      </div>
+      <form id="login-form" class="modal-form" @submit.prevent="handleSubmit">
+        <div class="mb-1">
+          <CustomInput
+            id="emailOrUsername"
+            v-model="identifier"
+            name="emailOrUsername"
+            label="E-mail or username"
+            autocomplete="email"
+            type="text"
+            required
+          />
+        </div>
+        <div class="mb-1">
+          <CustomInput
+            id="password"
+            v-model="password"
+            name="password"
+            autocomplete="password"
+            label="Password"
+            type="password"
+            required
+          />
+        </div>
+
+        <a
+          class="muted-link"
+          href="#"
+          role="button"
+          tabindex="0"
+          @click.prevent="authModalStore.openModal('recover')"
+        >
+          <span>Forgot password?</span>
+        </a>
+        <a
+          class="muted-link"
+          href="#"
+          role="button"
+          tabindex="0"
+          @click.prevent="authModalStore.openModal('register')"
+        >
+          <span>Create an account</span>
+        </a>
+        <button type="submit" class="btn normal-button mt-4">Login</button>
+      </form>
+    </div>
+  </BsModal>
+</template>
+
+<script lang="ts" setup>
+import { useAuthStore, type UserData } from '~/stores/auth';
+import { useAuthModalStore } from '~/stores/authModal';
+import { useRuntimeConfig } from '#app';
+import { useToastStore } from '~/stores/toast';
+
+const toastStore = useToastStore();
+
+const authStore = useAuthStore();
+const authModalStore = useAuthModalStore();
+
+const identifier = ref<string>('');
+const password = ref<string>('');
+const error = ref<string | null>(null);
+
+interface AuthResponse {
+  jwt: string;
+  user: UserData;
+}
+
+const runtimeConfig = useRuntimeConfig();
+
+const baseURL = () => {
+  return typeof window !== 'undefined'
+    ? window.location.origin + `${runtimeConfig.public.strapiBasePath}`
+    : `${runtimeConfig.public.strapiBaseUrl}`;
+};
+
+const hideModal = () => {
+  authModalStore.closeModal();
+};
+
+const handleSubmit = async () => {
+  error.value = null;
+
+  try {
+    const response = await $fetch<AuthResponse>(`${baseURL()}/api/auth/local`, {
+      method: 'POST',
+      body: JSON.stringify({
+        identifier: identifier.value,
+        password: password.value
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    if (response.jwt && response.user) {
+      authStore.setJwt(response.jwt);
+      authStore.setUserData(response.user);
+      toastStore.addToast('You are logged in.');
+      hideModal();
+    } else {
+      throw new Error('Invalid response from server');
+    }
+  } catch (err: any) {
+    let message: string | null = null;
+
+    if (err.data && err.data.error) {
+      message = err.data.error.message;
+    } else if (err.message) {
+      message = err.message;
+    }
+
+    if (message) {
+      message = message.charAt(0).toUpperCase() + message.slice(1);
+      error.value = `Can't login. ${message}.`;
+    } else {
+      error.value = `Can't login. Please fill the form and try again.`;
+    }
+  }
+};
+
+const modalOpen = computed(() => authModalStore.authModal === 'login');
+</script>
diff --git a/general/components/Header/AuthRecoverModal.vue b/general/components/Header/AuthRecoverModal.vue
new file mode 100644
index 00000000..cb006e03
--- /dev/null
+++ b/general/components/Header/AuthRecoverModal.vue
@@ -0,0 +1,149 @@
+<template>
+  <BsModal
+    id="recover-modal"
+    :open="modalOpen"
+    modal-class="recover-modal"
+    footer-class="d-none"
+    @on-modal-hidden="hideModal"
+  >
+    <template #modal-header>
+      <div class="left">
+        <div
+          type="button"
+          class="return-btn"
+          data-dismiss="modal"
+          aria-label="Return"
+          @click="handleReturn"
+          @keydown="handleReturn"
+        ></div>
+        <h5 class="modal-title">Recover password</h5>
+      </div>
+      <div
+        type="button"
+        class="close-btn"
+        data-dismiss="modal"
+        aria-label="Close"
+        @click="hideModal"
+      ></div>
+    </template>
+    <Transition mode="out-in">
+      <div v-if="!sentPage" class="modal-card">
+        <div v-if="serverError" class="modal-error mb-2">
+          {{ serverError }}
+        </div>
+        <form
+          id="recover-form"
+          class="modal-form"
+          @submit.prevent="sendRecoveryEmail"
+        >
+          <p class="small mb-4">
+            Please enter your email address and click "Send e-mail".
+          </p>
+          <CustomInput
+            v-for="field in formFields"
+            :id="`${field.name}Recover`"
+            :key="field.name"
+            v-bind="field"
+            :model-value="form[field.name] as string"
+            :error="shouldShowError(field.name) ? errors[field.name] : null"
+            @update:model-value="(value) => updateField(field.name, value)"
+            @blur="touchField(field.name)"
+          />
+          <button
+            type="submit"
+            class="btn normal-button mt-4"
+            :disabled="!isFormValid"
+          >
+            Send e-mail
+          </button>
+        </form>
+      </div>
+      <div v-else class="modal-card">
+        <p class="small">
+          A recovery e-mail has been sent to the provided e-mail address. Please
+          check your inbox and follow the instructions provided to reset your
+          password.
+        </p>
+      </div>
+    </Transition>
+  </BsModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAuthModalStore } from '~/stores/authModal';
+import { useRuntimeConfig } from '#app';
+import {
+  useFormValidation,
+  type FieldConfig
+} from '~/composables/useFormValidation';
+import { emailRules } from '~/helpers/inputValidation';
+
+const authModalStore = useAuthModalStore();
+const runtimeConfig = useRuntimeConfig();
+
+const sentPage = ref(false);
+const serverError = ref<string | null>(null);
+
+const formFields: FieldConfig[] = [
+  {
+    name: 'email',
+    label: 'E-mail',
+    type: 'email',
+    autocomplete: 'email',
+    required: true,
+    rules: emailRules
+  }
+];
+
+const {
+  form,
+  errors,
+  updateField,
+  touchField,
+  shouldShowError,
+  isFormValid,
+  resetForm,
+  validateAllFields
+} = useFormValidation(formFields);
+
+const baseURL = () => {
+  return typeof window !== 'undefined'
+    ? window.location.origin + `${runtimeConfig.public.strapiBasePath}`
+    : `${runtimeConfig.public.strapiBaseUrl}`;
+};
+
+const hideModal = () => {
+  authModalStore.closeModal();
+  resetForm();
+  sentPage.value = false;
+  serverError.value = null;
+};
+
+const handleReturn = () => {
+  hideModal();
+  authModalStore.openModal('login');
+};
+
+const sendRecoveryEmail = async () => {
+  validateAllFields();
+
+  if (!isFormValid.value) return;
+
+  serverError.value = null;
+
+  try {
+    await $fetch(`${baseURL()}/api/auth/forgot-password`, {
+      method: 'POST',
+      body: {
+        email: form.email
+      }
+    });
+    sentPage.value = true;
+  } catch (err: any) {
+    serverError.value = 'An error occurred. Please try again.';
+  }
+};
+
+const modalOpen = computed(() => authModalStore.authModal === 'recover');
+</script>
diff --git a/general/components/Header/AuthRegisterModal.vue b/general/components/Header/AuthRegisterModal.vue
new file mode 100644
index 00000000..3bab662c
--- /dev/null
+++ b/general/components/Header/AuthRegisterModal.vue
@@ -0,0 +1,242 @@
+<template>
+  <BsModal
+    id="register-modal"
+    :open="modalOpen"
+    modal-class="register-modal"
+    footer-class="d-none"
+    :can-escape="true"
+    @on-modal-hidden="hideModal"
+  >
+    <template #modal-header>
+      <div class="left">
+        <div
+          type="button"
+          class="return-btn"
+          data-dismiss="modal"
+          aria-label="Return"
+          @click="handleReturn"
+        ></div>
+        <h5 class="modal-title">Register</h5>
+      </div>
+      <div
+        type="button"
+        class="close-btn"
+        data-dismiss="modal"
+        aria-label="Close"
+        @click="hideModal"
+      ></div>
+    </template>
+
+    <div v-if="!successPage" class="modal-card">
+      <div v-if="serverError" class="modal-error mb-2" role="alert">
+        {{ serverError }}
+      </div>
+      <form
+        id="register-form"
+        class="modal-form"
+        autocomplete="off"
+        @submit.prevent="handleSubmit"
+      >
+        <CustomInput
+          v-for="field in formFields.filter((f) => f.type !== 'checkbox')"
+          :id="`${field.name}Register`"
+          :key="field.name"
+          v-bind="field"
+          :model-value="form[field.name] as string"
+          :error="shouldShowError(field.name) ? errors[field.name] : null"
+          @update:model-value="(value) => updateField(field.name, value)"
+          @blur="touchField(field.name)"
+        />
+        <PasswordStrength v-if="passwordValue" :password="passwordValue" />
+        <div class="form-check pb-0 pt-2">
+          <input
+            id="privacyPolicyCheckbox"
+            :checked="!!form.privacyPolicy"
+            class="form-check-input"
+            type="checkbox"
+            name="privacyPolicyCheckbox"
+            @change="handlePrivacyPolicyChange"
+          />
+          <label class="form-check-label" for="privacyPolicyCheckbox">
+            I agree to the
+            <a
+              href="https://edmcouncil.org/wp-content/uploads/2022/11/EDMC_Privacy_Compliance.pdf"
+              target="_blank"
+              >privacy policy</a
+            >.
+          </label>
+        </div>
+        <div
+          v-if="shouldShowError('privacyPolicy')"
+          class="invalid-feedback d-block"
+        >
+          {{ errors.privacyPolicy }}
+        </div>
+        <button
+          type="submit"
+          class="btn normal-button mt-5"
+          :disabled="!isFormValid || isSubmitting"
+        >
+          {{ isSubmitting ? 'Registering...' : 'Register' }}
+        </button>
+      </form>
+    </div>
+    <div v-else class="modal-card">
+      <p class="small">
+        You created an account. A verification e-mail has been sent to the
+        provided e-mail address. Please check your inbox and follow the
+        instructions provided to verify your e-mail address.
+      </p>
+    </div>
+  </BsModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAuthModalStore } from '~/stores/authModal';
+import { useRuntimeConfig } from '#app';
+import {
+  useFormValidation,
+  type FieldConfig
+} from '~/composables/useFormValidation';
+import {
+  emailRules,
+  usernameRules,
+  passwordRules
+} from '~/helpers/inputValidation';
+
+const authModalStore = useAuthModalStore();
+const runtimeConfig = useRuntimeConfig();
+
+const successPage = ref(false);
+const serverError = ref<string | null>(null);
+const isSubmitting = ref(false);
+
+const formFields: FieldConfig[] = [
+  {
+    name: 'email',
+    label: 'E-mail',
+    type: 'email',
+    autocomplete: 'email',
+    required: true,
+    rules: emailRules
+  },
+  {
+    name: 'username',
+    label: 'Username',
+    type: 'text',
+    autocomplete: 'username',
+    required: true,
+    rules: usernameRules
+  },
+  {
+    name: 'password',
+    label: 'Password',
+    type: 'password',
+    autocomplete: 'new-password',
+    required: true,
+    rules: passwordRules
+  },
+  {
+    name: 'repeatPassword',
+    label: 'Repeat password',
+    type: 'password',
+    autocomplete: 'new-password',
+    required: true,
+    rules: []
+  },
+  {
+    name: 'privacyPolicy',
+    label: 'I agree to the privacy policy',
+    type: 'checkbox',
+    required: true,
+    rules: [
+      {
+        validate: (value) => value === 'true',
+        message: 'You must agree to the privacy policy'
+      }
+    ]
+  }
+];
+
+const {
+  form,
+  errors,
+  updateField,
+  touchField,
+  shouldShowError,
+  isFormValid,
+  resetForm,
+  validateAllFields
+} = useFormValidation(formFields);
+
+const handlePrivacyPolicyChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  updateField('privacyPolicy', target.checked);
+  touchField('privacyPolicy');
+};
+
+const hideModal = () => {
+  authModalStore.closeModal();
+  resetForm();
+  successPage.value = false;
+  serverError.value = null;
+};
+
+const handleReturn = () => {
+  hideModal();
+  authModalStore.openModal('login');
+};
+
+const baseURL = () => {
+  return typeof window !== 'undefined'
+    ? window.location.origin + `${runtimeConfig.public.strapiBasePath}`
+    : `${runtimeConfig.public.strapiBaseUrl}`;
+};
+
+const handleSubmit = async () => {
+  validateAllFields();
+
+  if (!isFormValid.value) return;
+
+  isSubmitting.value = true;
+  serverError.value = null;
+
+  try {
+    await $fetch(`${baseURL()}/api/auth/local/register`, {
+      method: 'POST',
+      body: JSON.stringify({
+        username: form.username,
+        email: form.email,
+        password: form.password
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    successPage.value = true;
+  } catch (err: any) {
+    let message: string | null = null;
+
+    if (err.data && err.data.error) {
+      message = err.data.error.message;
+    } else if (err.message) {
+      message = err.message;
+    }
+
+    if (message) {
+      message = message.charAt(0).toUpperCase() + message.slice(1);
+      serverError.value = `Can't register. ${message}.`;
+    } else {
+      serverError.value = "Can't register. Please fill the form and try again.";
+    }
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const modalOpen = computed(() => authModalStore.authModal === 'register');
+
+const passwordValue = computed(() => form.password as string);
+</script>
diff --git a/general/components/Header/AuthResetModal.vue b/general/components/Header/AuthResetModal.vue
new file mode 100644
index 00000000..c30d9c80
--- /dev/null
+++ b/general/components/Header/AuthResetModal.vue
@@ -0,0 +1,210 @@
+<template>
+  <BsModal
+    id="reset-modal"
+    :open="modalOpen"
+    modal-class="reset-modal"
+    footer-class="d-none"
+    @on-modal-hidden="hideModal"
+  >
+    <template #modal-header>
+      <div class="left">
+        <div
+          type="button"
+          class="return-btn"
+          data-dismiss="modal"
+          aria-label="Return"
+          @click="handleReturn"
+          @keydown="handleReturn"
+        ></div>
+        <h5 class="modal-title">Reset password</h5>
+      </div>
+      <div
+        type="button"
+        class="close-btn"
+        data-dismiss="modal"
+        aria-label="Close"
+        @click="hideModal"
+      ></div>
+    </template>
+
+    <Transition mode="out-in">
+      <div v-if="!successPage" class="modal-card">
+        <div v-if="serverError" class="modal-error mb-2">
+          {{ serverError }}
+        </div>
+        <form
+          id="reset-form"
+          autocomplete="off"
+          class="modal-form"
+          @submit.prevent="resetPassword"
+        >
+          <p class="small mb-4">
+            Enter your new password, then click "Save" to complete the update.
+          </p>
+          <CustomInput
+            id="emailReset"
+            v-model="userEmail"
+            label="E-mail"
+            name="emailReset"
+            disabled
+          />
+          <CustomInput
+            v-for="field in formFields"
+            :id="`${field.name}Reset`"
+            :key="field.name"
+            v-bind="field"
+            :model-value="form[field.name] as string"
+            :error="shouldShowError(field.name) ? errors[field.name] : null"
+            @update:model-value="(value) => updateField(field.name, value)"
+            @blur="touchField(field.name)"
+          />
+          <PasswordStrength v-if="passwordValue" :password="passwordValue" />
+          <button
+            type="submit"
+            class="btn normal-button mt-2"
+            :disabled="!isFormValid || isSubmitting"
+          >
+            {{ isSubmitting ? 'Saving...' : 'Save' }}
+          </button>
+        </form>
+      </div>
+      <div v-else class="modal-card">
+        <p class="small">The password has been updated successfully.</p>
+      </div>
+    </Transition>
+  </BsModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useAuthModalStore } from '~/stores/authModal';
+import { useRuntimeConfig } from '#app';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  useFormValidation,
+  type FieldConfig
+} from '~/composables/useFormValidation';
+import { passwordRules, type ValidationRule } from '~/helpers/inputValidation';
+
+const authModalStore = useAuthModalStore();
+const runtimeConfig = useRuntimeConfig();
+const route = useRoute();
+const router = useRouter();
+
+const successPage = ref(false);
+const serverError = ref<string | null>(null);
+const isSubmitting = ref(false);
+const userEmail = ref<string>('');
+const code = ref<string>('');
+
+const passwordMatchRule: ValidationRule = {
+  validate: (value: string) => value === form.password,
+  message: "Passwords don't match"
+};
+
+const formFields: FieldConfig[] = [
+  {
+    name: 'password',
+    label: 'New password',
+    type: 'password',
+    autocomplete: 'new-password',
+    required: true,
+    rules: passwordRules
+  },
+  {
+    name: 'repeatPassword',
+    label: 'Repeat new password',
+    type: 'password',
+    autocomplete: 'new-password',
+    required: true,
+    rules: [passwordMatchRule]
+  }
+];
+
+const {
+  form,
+  errors,
+  updateField,
+  touchField,
+  shouldShowError,
+  isFormValid,
+  resetForm,
+  validateAllFields
+} = useFormValidation(formFields);
+
+onMounted(() => {
+  if (route.query.recoveryCode && route.query.email) {
+    const { recoveryCode, email, ...restQuery } = route.query;
+    code.value = recoveryCode as string;
+    userEmail.value = email as string;
+
+    router.replace({ query: restQuery });
+
+    authModalStore.openModal('reset');
+  }
+});
+
+const baseURL = () => {
+  return typeof window !== 'undefined'
+    ? window.location.origin + `${runtimeConfig.public.strapiBasePath}`
+    : `${runtimeConfig.public.strapiBaseUrl}`;
+};
+
+const hideModal = () => {
+  authModalStore.closeModal();
+  resetForm();
+  successPage.value = false;
+  serverError.value = null;
+};
+
+const handleReturn = () => {
+  hideModal();
+  authModalStore.openModal('login');
+};
+
+const resetPassword = async () => {
+  validateAllFields();
+
+  if (!isFormValid.value) return;
+
+  isSubmitting.value = true;
+  serverError.value = null;
+
+  try {
+    await $fetch(`${baseURL()}/api/auth/reset-password`, {
+      method: 'POST',
+      body: JSON.stringify({
+        code: code.value,
+        password: form.password,
+        passwordConfirmation: form.repeatPassword
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    successPage.value = true;
+  } catch (err: any) {
+    let message: string | null = null;
+
+    if (err.data && err.data.error) {
+      message = err.data.error.message;
+    } else if (err.message) {
+      message = err.message;
+    }
+
+    if (message) {
+      message = message.charAt(0).toUpperCase() + message.slice(1);
+      serverError.value = `Can't reset password. ${message}.`;
+    } else {
+      serverError.value = "Can't reset password. Please try again.";
+    }
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const modalOpen = computed(() => authModalStore.authModal === 'reset');
+
+const passwordValue = computed(() => form.password as string);
+</script>
diff --git a/general/components/Header/HeaderComponent.vue b/general/components/Header/HeaderComponent.vue
index e7f81155..8ec2d340 100644
--- a/general/components/Header/HeaderComponent.vue
+++ b/general/components/Header/HeaderComponent.vue
@@ -3,7 +3,7 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col px-0">
-          <div class="navigation-container d-block d-lg-block">
+          <div class="navigation-container">
             <nav class="navbar navbar-expand navbar-light">
               <a
                 v-if="isCustomLogo"
@@ -30,7 +30,9 @@
                 />
               </a>
 
-              <ul class="navbar-nav ml-auto align-items-center">
+              <ul
+                class="navbar-nav flex-column-reverse flex-lg-row ml-auto align-items-end align-items-lg-center gap-3 gap-lg-0"
+              >
                 <li
                   v-for="item in dropdownTop"
                   :key="item.id"
@@ -53,6 +55,8 @@
                   <span v-else class="nav-link">{{ item.item.name }}</span>
                 </li>
 
+                <AuthComponent />
+
                 <li class="nav-item dropdown">
                   <a
                     id="navbarDropdown"
@@ -378,8 +382,12 @@ header.website-header {
   }
 }
 
-@media (max-width: 350px) {
-  .dropdown {
+@media (max-width: 430px) {
+  header.website-header {
+    min-height: 520px;
+  }
+
+  header.website-header .dropdown {
     .burger-button {
       .icon-burger {
         margin: 0;
@@ -391,14 +399,8 @@ header.website-header {
   }
 }
 
-@media (max-width: 430px) {
-  header.website-header {
-    min-height: 520px;
-  }
-}
-
 @media (max-width: 991px) {
-  .navbar-brand {
+  header.website-header .navbar-brand {
     #ontology-logo {
       width: 105px;
     }
@@ -407,11 +409,15 @@ header.website-header {
   .navbar li {
     margin-left: 0px;
   }
-  .dropdown {
+  header.website-header .dropdown {
     .burger-button {
       padding: 15px 30px;
     }
   }
+  .navbar-light .navbar-nav {
+    flex-direction: column-reverse;
+  }
+
   .navbar-light .navbar-nav .dropdown-menu > .nav-link,
   .navbar-expand .navbar-nav .nav-link.sub-nav-item {
     padding: 10px 30px;
@@ -431,7 +437,7 @@ header.website-header {
     right: 30px;
   }
 
-  .navigation-container {
+  header.website-header .navigation-container {
     padding: 20px 30px 60px 30px;
   }
 }
diff --git a/general/components/Header/MinimalHeaderComponent.vue b/general/components/Header/MinimalHeaderComponent.vue
index fbd561c4..6bf7fae8 100644
--- a/general/components/Header/MinimalHeaderComponent.vue
+++ b/general/components/Header/MinimalHeaderComponent.vue
@@ -3,7 +3,7 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col px-0">
-          <div class="navigation-container d-block d-lg-block">
+          <div class="navigation-container">
             <nav class="navbar navbar-expand navbar-light">
               <a
                 v-if="isCustomLogo"
@@ -30,7 +30,9 @@
                 />
               </a>
 
-              <ul class="navbar-nav ml-auto align-items-center">
+              <ul
+                class="navbar-nav flex-column-reverse flex-lg-row ml-auto align-items-end align-items-lg-center gap-3 gap-lg-0"
+              >
                 <li
                   v-for="item in dropdownTop"
                   :key="item.id"
@@ -53,6 +55,8 @@
                   <span v-else class="nav-link">{{ item.item.name }}</span>
                 </li>
 
+                <AuthComponent />
+
                 <li class="nav-item dropdown">
                   <a
                     id="navbarDropdown"
@@ -372,7 +376,7 @@ header.website-header--minimal {
   }
 }
 
-@media (max-width: 350px) {
+@media (max-width: 430px) {
   header.website-header--minimal .dropdown {
     .burger-button {
       .icon-burger {
diff --git a/general/components/Header/PasswordStrength.vue b/general/components/Header/PasswordStrength.vue
new file mode 100644
index 00000000..5e75827b
--- /dev/null
+++ b/general/components/Header/PasswordStrength.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="password-strength-checker">
+    <div class="strength-bar">
+      <div
+        class="strength-progress"
+        :style="{ width: `${strengthPercentage}%` }"
+        :class="strengthClass"
+      ></div>
+    </div>
+    <p class="strength-text" :class="strengthClass">
+      Password strength: {{ strengthText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  password: string;
+}>();
+
+const strengthPercentage = computed(() => {
+  const { password } = props;
+  let score = 0;
+
+  if (password.length > 0) score += 5;
+  if (password.length >= 8) score += 10;
+  if (password.length >= 12) score += 20;
+  if (password.length >= 16) score += 20;
+  if (password.length >= 20) score += 20;
+
+  const hasLowercase = /[a-z]/.test(password);
+  const hasUppercase = /[A-Z]/.test(password);
+  const hasDigit = /\d/.test(password);
+  const hasSpecialChar = /[^a-zA-Z\d]/.test(password);
+
+  const complexityScore =
+    (hasLowercase ? 5 : 0) +
+    (hasUppercase ? 5 : 0) +
+    (hasDigit ? 5 : 0) +
+    (hasSpecialChar ? 5 : 0);
+
+  score +=
+    password.length >= 8 ? complexityScore : Math.floor(complexityScore / 2);
+
+  const uniqueChars = new Set(password).size;
+  score += Math.min(15, uniqueChars);
+
+  if (password.length < 8) {
+    score = Math.min(score, 35);
+  } else if (password.length < 12) {
+    score = Math.min(score, 60);
+  }
+
+  return Math.min(100, score);
+});
+
+const strengthText = computed(() => {
+  const strength = strengthPercentage.value;
+  if (strength === 0) return 'Very Weak';
+  if (strength <= 25) return 'Weak';
+  if (strength <= 50) return 'Medium';
+  if (strength <= 75) return 'Strong';
+  return 'Very Strong';
+});
+
+const strengthClass = computed(() => {
+  const strength = strengthPercentage.value;
+  if (strength <= 25) return 'weak';
+  if (strength <= 50) return 'medium';
+  if (strength <= 75) return 'strong';
+  return 'very-strong';
+});
+</script>
+
+<style scoped lang="scss">
+.password-strength-checker {
+  margin-top: 5px;
+}
+
+.strength-bar {
+  height: 5px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.strength-progress {
+  height: 100%;
+  transition: width 0.3s ease;
+}
+
+.strength-text {
+  font-size: 12px;
+}
+
+.weak {
+  color: #dc3545;
+
+  &.strength-progress {
+    background-color: #dc3545;
+  }
+}
+.medium {
+  color: #ffa700;
+
+  &.strength-progress {
+    background-color: #ffa700;
+  }
+}
+.strong {
+  color: #a3c725;
+
+  &.strength-progress {
+    background-color: #a3c725;
+  }
+}
+.very-strong {
+  color: #00b300;
+
+  &.strength-progress {
+    background-color: #00b300;
+  }
+}
+</style>
diff --git a/general/components/Ontology/DescribeButton.vue b/general/components/Ontology/DescribeButton.vue
index 594bd4ab..140ac6c4 100644
--- a/general/components/Ontology/DescribeButton.vue
+++ b/general/components/Ontology/DescribeButton.vue
@@ -92,7 +92,7 @@
 import hljs from 'highlight.js';
 import { mapState } from 'pinia';
 import { useServersStore } from '@/stores/servers';
-import { getDescribeIntegration } from '@/api/ontology';
+import { axiosClient, getDescribeIntegration } from '@/api/ontology';
 
 export default {
   name: 'DescribeButton',
@@ -133,11 +133,9 @@ export default {
 
     // check if integration is configured and there is no error message
     try {
-      const data = await result.clone().json();
-
       if (
-        data?.msg === 'breakdown' ||
-        data?.message === 'Integration is not configured'
+        result?.msg === 'breakdown' ||
+        result?.message === 'Integration is not configured'
       ) {
         this.error = true;
         return;
@@ -148,8 +146,19 @@ export default {
     }
 
     // highlight code
-    this.code = await result.text();
-    this.highlightedCode = hljs.highlight(this.code, { language: 'xml' }).value;
+    try {
+      const response = await axiosClient.get(
+        `${this.describeServer}?iri=${this.data.iri}`,
+        { responseType: 'text' }
+      );
+      this.code = response.data;
+      this.highlightedCode = hljs.highlight(this.code, {
+        language: 'xml'
+      }).value;
+    } catch (e) {
+      console.error(e);
+      this.error = true;
+    }
   },
   methods: {
     async openModal() {
diff --git a/general/components/Ontology/GraphVisualization.vue b/general/components/Ontology/GraphVisualization.vue
index ecb4fc2f..9e124dc9 100644
--- a/general/components/Ontology/GraphVisualization.vue
+++ b/general/components/Ontology/GraphVisualization.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="graph-section" id="graph-section">
+  <div id="graph-section" class="graph-section">
     <div class="control-panel control-panel--minimal">
       <div class="connections-and-guide-container">
         <div ref="connectionsTitle" class="collapsible-section collapsed">
diff --git a/general/components/Ontology/Toast.vue b/general/components/Ontology/Toast.vue
new file mode 100644
index 00000000..7383721d
--- /dev/null
+++ b/general/components/Ontology/Toast.vue
@@ -0,0 +1,56 @@
+<template>
+  <div :class="['toast-notification', `toast-${toast.type}`, 'node-alert']">
+    {{ toast.message }}
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  toast: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+.toast-notification {
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 30px;
+  background-color: white;
+  width: max-content;
+  border-radius: 2px;
+  padding: 5px 15px;
+  margin-bottom: 10px;
+  box-shadow: 0px 5px 20px rgba(7, 83, 149, 0.25);
+}
+
+.toast-default {
+  background-color: #ffffff;
+}
+.toast-success {
+  background-color: #e7ffed;
+}
+.toast-warning {
+  background-color: #f2e5bf;
+}
+.toast-error {
+  background-color: #ecdcdc;
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition:
+    opacity 0.5s,
+    transform 0.5s;
+}
+.toast-enter-from,
+.toast-enter,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+</style>
diff --git a/general/components/Ontology/ToastContainer.vue b/general/components/Ontology/ToastContainer.vue
new file mode 100644
index 00000000..9bb6ff51
--- /dev/null
+++ b/general/components/Ontology/ToastContainer.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="toast-container">
+    <transition-group name="toast" tag="div">
+      <Toast
+        v-for="toast in toastStore.toasts"
+        :key="toast.id"
+        :toast="toast"
+      />
+    </transition-group>
+  </div>
+</template>
+
+<script setup>
+import { useToastStore } from '~/stores/toast';
+
+const toastStore = useToastStore();
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 15px;
+  bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  pointer-events: none;
+}
+</style>
diff --git a/general/components/Ontology/UnauthorizedError.vue b/general/components/Ontology/UnauthorizedError.vue
new file mode 100644
index 00000000..f2897a0a
--- /dev/null
+++ b/general/components/Ontology/UnauthorizedError.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="not-found">
+    <article>
+      <section class="blank not-found-header">
+        <p class="big-sign">403</p>
+        <p class="big muted">You don't have access to this resource</p>
+        <p class="muted">Please login and try again.</p>
+      </section>
+
+      <section>
+        <h2>Tips</h2>
+        <p>Try using search box or modules tree to find ontology resources.</p>
+      </section>
+    </article>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnauthorizedError'
+};
+</script>
diff --git a/general/components/StatsComponent.vue b/general/components/StatsComponent.vue
index a5da74a5..63d2acd5 100644
--- a/general/components/StatsComponent.vue
+++ b/general/components/StatsComponent.vue
@@ -194,8 +194,7 @@ export default {
     async getStatsObject(server) {
       const output = {};
       try {
-        const result = await getStats(server);
-        const body = await result.json();
+        const body = await getStats(server);
         for (const key in body.stats) {
           output[key] = {};
           output[key].label = body.labels[key];
@@ -208,8 +207,9 @@ export default {
     },
     async fetchMissingImports() {
       try {
-        const result = await getMissingImports(this.missingImportsServer);
-        this.missingImports = await result.json();
+        this.missingImports = await getMissingImports(
+          this.missingImportsServer
+        );
       } catch (err) {
         console.error(err);
       }
diff --git a/general/components/UI/CustomInput.vue b/general/components/UI/CustomInput.vue
new file mode 100644
index 00000000..5379345e
--- /dev/null
+++ b/general/components/UI/CustomInput.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="custom-input-container">
+    <label v-if="label" :for="id" class="form-label">{{ label }}</label>
+    <input
+      :id="id"
+      :name="name"
+      :value="modelValue"
+      :autocomplete="autocomplete"
+      :type="type"
+      class="form-control"
+      :required="required"
+      :disabled="disabled"
+      :class="{ 'is-invalid': error }"
+      @input="
+        $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
+      @blur="$emit('blur')"
+    />
+    <div v-if="error" class="invalid-feedback">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  id: string;
+  name: string;
+  modelValue: string;
+  label?: string;
+  autocomplete?: string;
+  type?: string;
+  required?: boolean;
+  disabled?: boolean;
+  error?: string | null;
+}>();
+
+defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'blur'): void;
+}>();
+</script>
+
+<style lang="scss">
+.custom-input-container {
+  margin-bottom: 15px;
+}
+
+.form-label {
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.form-control {
+  padding: 5px 10px;
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-size: 14px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.8);
+  border-radius: 2px;
+  background-color: white;
+  width: 100%;
+  border: 2px solid rgba(0, 0, 0, 0.6);
+
+  &::placeholder {
+    color: rgba(0, 0, 0, 0.4);
+    opacity: 1;
+  }
+
+  &:focus:not(.is-invalid) {
+    border-color: rgba(0, 0, 0, 0.8);
+    outline: none;
+    box-shadow: none;
+  }
+
+  &.is-invalid {
+    border-color: #dc3545;
+  }
+}
+
+.invalid-feedback {
+  color: #dc3545;
+  font-size: 12px;
+  margin-top: 4px;
+}
+</style>
diff --git a/general/components/UI/bs-modal.vue b/general/components/UI/bs-modal.vue
index fc7b663c..5deffc20 100644
--- a/general/components/UI/bs-modal.vue
+++ b/general/components/UI/bs-modal.vue
@@ -14,7 +14,6 @@
       ]"
       :aria-labelledby="correctId + 'Label'"
       aria-hidden="true"
-      data-bs-backdrop="static"
       tabindex="-1"
     >
       <div
@@ -49,9 +48,10 @@ export default {
     noFade: Boolean,
     scrollable: Boolean,
     fullscreen: Boolean,
-    secondLevel: Boolean
+    secondLevel: Boolean,
+    canEscape: Boolean
   },
-  emits: ['shown', 'hidden'],
+  emits: ['shown', 'hidden', 'on-modal-hidden'],
   data() {
     return {
       instance: null,
@@ -86,6 +86,7 @@ export default {
   mounted() {
     const { $bootstrap } = useNuxtApp();
     const element = this.$refs.modalElement;
+    if (!this.canEscape) element.setAttribute('data-bs-backdrop', 'static');
     this.instance = new $bootstrap.Modal(element);
     this.shownListener = element.addEventListener(
       'shown.bs.modal',
@@ -127,7 +128,11 @@ export default {
     onHidden() {
       this.$emit('hidden');
       if (this.open) {
-        this.instance.show();
+        if (this.canEscape) {
+          this.$emit('on-modal-hidden');
+        } else {
+          this.instance.show();
+        }
       } else {
         this.instance.hide();
       }
diff --git a/general/composables/useFormValidation.ts b/general/composables/useFormValidation.ts
new file mode 100644
index 00000000..5abf62e8
--- /dev/null
+++ b/general/composables/useFormValidation.ts
@@ -0,0 +1,121 @@
+import { reactive, computed } from 'vue';
+import {
+  validateField as validateFieldUtil,
+  type ValidationRule
+} from '~/helpers/inputValidation';
+
+export interface FieldConfig {
+  name: string;
+  label: string;
+  type: string;
+  autocomplete?: string;
+  required: boolean;
+  rules: ValidationRule[];
+}
+
+export function useFormValidation(fieldConfigs: FieldConfig[]) {
+  const form = reactive(
+    fieldConfigs.reduce(
+      (acc, field) => {
+        acc[field.name] = field.type === 'checkbox' ? false : '';
+        return acc;
+      },
+      {} as Record<string, string | boolean>
+    )
+  );
+
+  const errors = reactive(
+    fieldConfigs.reduce(
+      (acc, field) => {
+        acc[field.name] = null;
+        return acc;
+      },
+      {} as Record<string, string | null>
+    )
+  );
+
+  const touched = reactive(
+    fieldConfigs.reduce(
+      (acc, field) => {
+        acc[field.name] = false;
+        return acc;
+      },
+      {} as Record<string, boolean>
+    )
+  );
+
+  const validateField = (fieldName: string) => {
+    const field = fieldConfigs.find((f) => f.name === fieldName);
+    if (!field) return;
+
+    if (fieldName === 'repeatPassword') {
+      errors[fieldName] =
+        form[fieldName] !== form['password'] ? "Passwords don't match" : null;
+    } else {
+      errors[fieldName] = validateFieldUtil(
+        form[fieldName].toString(),
+        field.rules
+      );
+    }
+
+    if (fieldName === 'password' && 'repeatPassword' in form) {
+      validateField('repeatPassword');
+    }
+  };
+
+  const updateField = (fieldName: string, value: string | boolean) => {
+    form[fieldName] = value;
+    validateField(fieldName);
+  };
+
+  const touchField = (fieldName: string) => {
+    touched[fieldName] = true;
+  };
+
+  const shouldShowError = (fieldName: string): boolean => {
+    return (
+      touched[fieldName] ||
+      (fieldName === 'repeatPassword' && touched['password'])
+    );
+  };
+
+  const isFormValid = computed(() => {
+    return fieldConfigs.every((field) => {
+      const value = form[field.name];
+      return (
+        (field.type === 'checkbox' ? value === true : value !== '') &&
+        errors[field.name] === null
+      );
+    });
+  });
+
+  const resetForm = () => {
+    Object.keys(form).forEach((key) => {
+      form[key] =
+        fieldConfigs.find((f) => f.name === key)?.type === 'checkbox'
+          ? false
+          : '';
+      errors[key] = null;
+      touched[key] = false;
+    });
+  };
+
+  const validateAllFields = () => {
+    fieldConfigs.forEach((field) => {
+      touched[field.name] = true;
+      validateField(field.name);
+    });
+  };
+
+  return {
+    form,
+    errors,
+    touched,
+    updateField,
+    touchField,
+    shouldShowError,
+    isFormValid,
+    resetForm,
+    validateAllFields
+  };
+}
diff --git a/general/helpers/inputValidation.ts b/general/helpers/inputValidation.ts
new file mode 100644
index 00000000..5bf0deae
--- /dev/null
+++ b/general/helpers/inputValidation.ts
@@ -0,0 +1,49 @@
+export interface ValidationRule {
+  validate: (value: string) => boolean;
+  message: string;
+}
+
+export const validateField = (
+  value: string,
+  rules: ValidationRule[]
+): string | null => {
+  for (const rule of rules) {
+    if (!rule.validate(value)) {
+      return rule.message;
+    }
+  }
+  return null;
+};
+
+export const emailRules: ValidationRule[] = [
+  {
+    validate: (value) => !!value,
+    message: 'Email is required'
+  },
+  {
+    validate: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+    message: 'Invalid email format'
+  }
+];
+
+export const usernameRules: ValidationRule[] = [
+  {
+    validate: (value) => !!value,
+    message: 'Username is required'
+  },
+  {
+    validate: (value) => value.length >= 3,
+    message: 'Username must be at least 3 characters'
+  }
+];
+
+export const passwordRules: ValidationRule[] = [
+  {
+    validate: (value) => !!value,
+    message: 'Password is required'
+  },
+  {
+    validate: (value) => value.length >= 6,
+    message: 'Password must be at least 6 characters'
+  }
+];
diff --git a/general/helpers/ontograph.js b/general/helpers/ontograph.js
index 65a0461e..68a03309 100644
--- a/general/helpers/ontograph.js
+++ b/general/helpers/ontograph.js
@@ -1,5 +1,6 @@
 import * as d3 from 'd3';
 import relation from '@/helpers/langFlagData';
+import { axiosClient } from '~/api/ontology';
 
 export default class Ontograph {
   layout = 'force';
@@ -855,29 +856,15 @@ export default class Ontograph {
         const domain = `${this.graphServer}?iri=${encodeURI(
           d.data.nodeIri
         )}&nodeId=${d.id}&lastId=${this.lastId}`;
-        const result = await fetch(domain, {
-          method: 'GET',
-          headers: { Accept: 'application/json' }
-        });
-        let body = null;
-
-        try {
-          body = await result.json();
-        } catch (e) {
-          this.pushAlert('noChildren', d.data.nodeLabel);
-          this.isShifting = null;
-          this.svg
-            .select('.nodes')
-            .selectAll('g')
-            .data(this.nodes, (n) => n.data.id)
-            .filter((n) => n.data.id === d.data.id)
-            .select('.node-loader')
-            .remove();
-          this.blurHighlight();
-          return;
-        }
+        const result = await axiosClient.get(domain);
+        let body = result.data;
 
-        if (body.nodes.length === 1) {
+        if (
+          !body ||
+          Object.keys(body).length === 0 ||
+          body.nodes.length === 0 ||
+          body.nodes.length === 1
+        ) {
           this.pushAlert('noChildren', d.data.nodeLabel);
           this.isShifting = null;
           this.svg
diff --git a/general/layouts/default.vue b/general/layouts/default.vue
index 645ef124..ba56825c 100644
--- a/general/layouts/default.vue
+++ b/general/layouts/default.vue
@@ -4,6 +4,7 @@
     <noscript v-html="noscriptContent"></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <HeaderComponent></HeaderComponent>
+    <ToastContainer />
     <slot></slot>
     <FooterComponent></FooterComponent>
   </div>
diff --git a/general/layouts/minimal.vue b/general/layouts/minimal.vue
index c911c21e..95b89f0d 100644
--- a/general/layouts/minimal.vue
+++ b/general/layouts/minimal.vue
@@ -4,6 +4,7 @@
     <noscript v-html="noscriptContent"></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <MinimalHeaderComponent></MinimalHeaderComponent>
+    <ToastContainer />
     <slot></slot>
     <FooterComponent></FooterComponent>
   </div>
diff --git a/general/nuxt.config.ts b/general/nuxt.config.ts
index c324955c..c99b4527 100644
--- a/general/nuxt.config.ts
+++ b/general/nuxt.config.ts
@@ -150,7 +150,12 @@ export default defineNuxtConfig({
     '@/assets/scss/Ontology.scss',
     'vue-multiselect/dist/vue-multiselect.css'
   ],
-  modules: ['@nuxtjs/google-fonts', '@pinia/nuxt', '@zadigetvoltaire/nuxt-gtm'],
+  modules: [
+    '@nuxtjs/google-fonts',
+    '@pinia/nuxt',
+    '@pinia-plugin-persistedstate/nuxt',
+    '@zadigetvoltaire/nuxt-gtm'
+  ],
   googleFonts: {
     families: {
       Inter: [400, 600, 700, 800]
diff --git a/general/package-lock.json b/general/package-lock.json
index 915e792f..8dec46d5 100644
--- a/general/package-lock.json
+++ b/general/package-lock.json
@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@ewoudenberg/difflib": "^0.1.0",
-        "@pinia/nuxt": "^0.4.11",
+        "@pinia/nuxt": "^0.5.1",
         "@popperjs/core": "^2.11.8",
         "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
         "axios": "^1.6.0",
@@ -22,7 +22,7 @@
         "highlight.js": "^11.8.0",
         "linkify-html": "^4.1.1",
         "linkifyjs": "^4.1.1",
-        "pinia": "^2.1.6",
+        "pinia": "^2.1.7",
         "qs": "^6.11.2",
         "string-comparison": "^1.2.0",
         "vue-multiselect": "^3.0.0-beta.2"
@@ -31,6 +31,7 @@
         "@nuxt/devtools": "^1.0.0",
         "@nuxt/eslint-config": "^0.2.0",
         "@nuxtjs/google-fonts": "^3.0.2",
+        "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
         "@types/bootstrap": "^5.2.6",
         "@types/markdown-it": "^13.0.2",
         "@types/node": "^18.17.3",
@@ -2262,13 +2263,27 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pinia-plugin-persistedstate/nuxt": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@pinia-plugin-persistedstate/nuxt/-/nuxt-1.2.0.tgz",
+      "integrity": "sha512-2rtgx5viGSMQMCoFYZMHguA2FhFKCUvw0PwETfqQegsWeBHlqk1/D0G/9xqep8Hq+c1BuFx+jNLJzoLXtYfivg==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.8.0",
+        "defu": "^6.1.2",
+        "pinia-plugin-persistedstate": ">=3.2.0"
+      },
+      "peerDependencies": {
+        "@pinia/nuxt": "^0.5.0"
+      }
+    },
     "node_modules/@pinia/nuxt": {
-      "version": "0.4.11",
-      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.4.11.tgz",
-      "integrity": "sha512-bhuNFngJpmBCdAqWguezNJ/oJFR7wvKieqiZrmmdmPR07XjsidAw8RLXHMZE9kUm32M9E6T057OBbG/22jERTg==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.1.tgz",
+      "integrity": "sha512-6wT6TqY81n+7/x3Yhf0yfaJVKkZU42AGqOR0T3+UvChcaOJhSma7OWPN64v+ptYlznat+fS1VTwNAcbi2lzHnw==",
       "dependencies": {
         "@nuxt/kit": "^3.5.0",
-        "pinia": ">=2.1.0"
+        "pinia": ">=2.1.7"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -8735,6 +8750,15 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",
+      "integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==",
+      "dev": true,
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
diff --git a/general/package.json b/general/package.json
index 451b0c5e..b9d9157c 100644
--- a/general/package.json
+++ b/general/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@ewoudenberg/difflib": "^0.1.0",
-    "@pinia/nuxt": "^0.4.11",
+    "@pinia/nuxt": "^0.5.1",
     "@popperjs/core": "^2.11.8",
     "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
     "axios": "^1.6.0",
@@ -25,7 +25,7 @@
     "highlight.js": "^11.8.0",
     "linkify-html": "^4.1.1",
     "linkifyjs": "^4.1.1",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
     "qs": "^6.11.2",
     "string-comparison": "^1.2.0",
     "vue-multiselect": "^3.0.0-beta.2"
@@ -34,6 +34,7 @@
     "@nuxt/devtools": "^1.0.0",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxtjs/google-fonts": "^3.0.2",
+    "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
     "@types/bootstrap": "^5.2.6",
     "@types/markdown-it": "^13.0.2",
     "@types/node": "^18.17.3",
diff --git a/general/pages/ontology/[...resource].vue b/general/pages/ontology/[...resource].vue
index fb44e9ae..70ae4076 100644
--- a/general/pages/ontology/[...resource].vue
+++ b/general/pages/ontology/[...resource].vue
@@ -767,6 +767,10 @@
                 :ontology-name-uppercase="ontologyNameUppercase"
               />
 
+              <UnauthorizedError
+                v-else-if="!loader && !isComparing && unauthorizedError"
+              />
+
               <EntityNotFound
                 v-else-if="!loader && !isComparing && error.entityNotFound"
               />
@@ -830,7 +834,7 @@ export default {
         if (this.isComparing) {
           this.fetchCompareDataAndMerge(this.query);
           this.scrollToOntologyViewerTopOfContainer();
-        } else this.fetchData(this.query);
+        } else this.fetchEntity(this.query);
       });
     }
     if (!to.query.search) {
@@ -957,6 +961,12 @@ export default {
       missingImportsServer: (store) => store.missingImportsServer,
       ontologyServerCompare: (store) => store.ontologyServerCompare
     }),
+    ...mapState(useOntologyStore, {
+      unauthorizedError: (store) => store.unauthorizedError
+    }),
+    ...mapState(useAuthStore, {
+      jwt: (store) => store.jwt
+    }),
     isError() {
       return (
         this.error.versions ||
@@ -964,7 +974,8 @@ export default {
         this.error.properties ||
         this.error.search ||
         this.error.entityData ||
-        this.error.entityNotFound
+        this.error.entityNotFound ||
+        this.unauthorizedError
       );
     },
     isLoader() {
@@ -987,6 +998,11 @@ export default {
       );
     }
   },
+  watch: {
+    jwt() {
+      this.fetchData();
+    }
+  },
   async mounted() {
     let queryParam = '';
 
@@ -1006,7 +1022,11 @@ export default {
     this.query = queryParam;
 
     const scrollTopElement = this.$refs['article-top-element'];
-    if (!this.query) {
+    if (
+      !this.query &&
+      !this.$route.query.recoveryCode &&
+      !this.$route.query.confirmation
+    ) {
       scrollTopElement.scrollIntoView({
         behavior: 'smooth'
       });
@@ -1014,12 +1034,7 @@ export default {
       this.scrollToOntologyViewerTopOfContainer();
     }
 
-    this.updateServers(this.$route);
-    this.updateCompareServers(null);
-    this.fetchModules();
-    this.fetchSearchProperties();
-    await this.fetchVersions();
-    this.fetchData(this.query, { noScroll: true });
+    await this.fetchData();
 
     // disable input autocomplete in multiselect
     this.$refs.searchBoxInputMobile.$refs.search.setAttribute(
@@ -1047,9 +1062,19 @@ export default {
       'getEntityData',
       'initialEntityLoad',
       'setReleases',
-      'getErrorFlags'
+      'getErrorFlags',
+      'clearUnauthorizedError'
     ]),
-    async fetchData(iri, options) {
+    async fetchData() {
+      this.updateServers(this.$route);
+      this.updateCompareServers(null);
+      this.fetchModules();
+      this.fetchSearchProperties();
+      await this.fetchVersions();
+      this.fetchEntity(this.query, { noScroll: true });
+    },
+    async fetchEntity(iri, options) {
+      this.clearUnauthorizedError();
       const noScroll = options?.noScroll;
       if (iri) {
         if (!noScroll) this.scrollToOntologyViewerTopOfContainer();
@@ -1091,10 +1116,9 @@ export default {
     },
     async fetchVersions() {
       try {
-        const result = await getOntologyVersions(
+        const ontologyVersions = await getOntologyVersions(
           `/${this.ontologyName}/ontology/api/`
         );
-        const ontologyVersions = await result.json();
 
         const first = 'master/latest';
         ontologyVersions.sort((x, y) =>
@@ -1152,24 +1176,21 @@ export default {
           const tagName = runtimeConfig.public.tagName;
 
           // group versions by tags, pull requests and releases
-          const tagsResult = await getJenkinsJobs(
+          const tagsJson = await getJenkinsJobs(
             `${jenkinsJobUrl}/view/tags/api/json`
           );
-          const tagsJson = await tagsResult.json();
           const tags = tagsJson.jobs.map((item) => item.name.toLowerCase());
 
-          const pullRequestsResult = await getJenkinsJobs(
+          const pullRequestsJson = await getJenkinsJobs(
             `${jenkinsJobUrl}/view/change-requests/api/json`
           );
-          const pullRequestsJson = await pullRequestsResult.json();
           const pullRequests = pullRequestsJson.jobs.map((item) =>
             item.name.toLowerCase()
           );
 
-          const defaultViewResult = await getJenkinsJobs(
+          const defaultViewJson = await getJenkinsJobs(
             `${jenkinsJobUrl}/view/default/api/json`
           );
-          const defaultViewJson = await defaultViewResult.json();
           const defaultView = defaultViewJson.jobs.map((item) =>
             item.name.toLowerCase()
           );
@@ -1231,8 +1252,7 @@ export default {
     },
     async fetchModules() {
       try {
-        const result = await getModules(this.modulesServer);
-        this.modulesList = await result.json();
+        this.modulesList = await getModules(this.modulesServer);
         this.error.modules = false;
       } catch (err) {
         console.error(err);
@@ -1241,10 +1261,9 @@ export default {
     },
     async fetchSearchProperties() {
       try {
-        const result = await getFindProperties(
+        this.searchBox.findPropertiesAll = await getFindProperties(
           `${this.searchServer}/properties`
         );
-        this.searchBox.findPropertiesAll = await result.json();
 
         if (this.searchBox.findPropertiesAll.length > 0) {
           this.searchBox.findProperties.push(
@@ -1414,7 +1433,7 @@ export default {
         this.fetchCompareDataAndMerge(this.query);
       } else {
         this.updateCompareServers(version['@id']);
-        this.fetchData(this.query, { noScroll: true });
+        this.fetchEntity(this.query, { noScroll: true });
       }
     },
     swapSelectedVersions() {
@@ -1447,7 +1466,7 @@ export default {
       ) {
         this.fetchCompareDataAndMerge(this.query);
       } else if (!isCompareExpanded && this.data == null)
-        this.fetchData(this.query, { noScroll: true });
+        this.fetchEntity(this.query, { noScroll: true });
     },
     searchBox_limitText(count) {
       return `and ${count} other results`;
@@ -1520,8 +1539,7 @@ export default {
             `${this.searchServer}?term=${searchBQuery}&mode=advance&useHighlighting=${isHighlighting}&findProperties=${this.searchBox.encodedProperties}&page=${page}`
           );
 
-          const result = await getFindSearch(domain);
-          const body = await result.json();
+          const body = await getFindSearch(domain);
 
           this.searchBox.pageResults = body.results;
 
@@ -1581,8 +1599,7 @@ export default {
             `${this.searchServer}?term=${query}&mode=advance&useHighlighting=false&findProperties=${this.searchBox.encodedProperties}`
           );
           const result = await getFindSearch(domain);
-          const json = await result.json();
-          const hints = json.results;
+          const hints = result.results;
 
           hints.forEach((el) => {
             // eslint-disable-next-line no-param-reassign
@@ -1663,6 +1680,9 @@ export default {
       });
     },
     scrollToOntologyViewerTopOfContainer(behavior) {
+      if (this.$route.query.recoveryCode || this.$route.query.confirmation)
+        return;
+
       const element = this.$refs.ontologyViewerTopOfContainer;
 
       const rect = element.getBoundingClientRect();
diff --git a/general/stores/auth.ts b/general/stores/auth.ts
new file mode 100644
index 00000000..97660a97
--- /dev/null
+++ b/general/stores/auth.ts
@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia';
+
+export interface UserData {
+  id: number;
+  username: string;
+  email: string;
+  provider: string;
+  confirmed: boolean;
+  blocked: boolean;
+  createdAt: string;
+  updatedAt: string;
+  role: {
+    id: number;
+    name: string;
+    description: string;
+    type: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+}
+
+interface AuthState {
+  jwt: string | null;
+  user: UserData | null;
+}
+
+export const useAuthStore = defineStore({
+  id: 'auth-store',
+  state: (): AuthState => {
+    return {
+      jwt: null,
+      user: null
+    };
+  },
+  actions: {
+    setJwt(token: string) {
+      this.jwt = token;
+    },
+    setUserData(user: UserData) {
+      this.user = user;
+    },
+    clear() {
+      this.jwt = null;
+      this.user = null;
+    }
+  },
+  persist: {
+    key: () => {
+      const runtimeConfig = useRuntimeConfig();
+      return `ontoviewer-auth-${runtimeConfig.public.ontologyName}`;
+    },
+    storage: process.client ? localStorage : undefined,
+    paths: ['jwt', 'user']
+  }
+});
diff --git a/general/stores/authModal.ts b/general/stores/authModal.ts
new file mode 100644
index 00000000..2d71e108
--- /dev/null
+++ b/general/stores/authModal.ts
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia';
+
+type ModalKey = 'login' | 'register' | 'reset' | 'recover' | 'confirmEmail';
+
+interface AuthModalState {
+  authModal: ModalKey | null;
+}
+
+export const useAuthModalStore = defineStore({
+  id: 'auth-modal-store',
+  state: (): AuthModalState => {
+    return {
+      authModal: null
+    };
+  },
+  actions: {
+    openModal(modal: ModalKey) {
+      this.authModal = modal;
+    },
+    closeModal() {
+      this.authModal = null;
+    }
+  }
+});
diff --git a/general/stores/configuration.ts b/general/stores/configuration.ts
index ae6df310..88f92832 100644
--- a/general/stores/configuration.ts
+++ b/general/stores/configuration.ts
@@ -12,7 +12,8 @@ export const useConfigurationStore = defineStore({
         ontoviewerServerUrl: null as any,
         ontologyRepositoryUrl: null as any,
         defaultBranchName: null as any,
-        jenkinsJobUrl: null as any
+        jenkinsJobUrl: null as any,
+        authEnabled: null as any
       }
     };
   },
@@ -32,6 +33,7 @@ export const useConfigurationStore = defineStore({
       this.config.ontologyRepositoryUrl = `https://github.com/edmcouncil/${this.config.ontpubFamily}`;
       this.config.defaultBranchName = 'current';
       this.config.jenkinsJobUrl = null;
+      this.config.authEnabled = null;
 
       const configData = await getAppConfigurationData(runtimeConfig);
       this.setConfigurationData(configData);
diff --git a/general/stores/ontology.ts b/general/stores/ontology.ts
index 36bfd2b9..fb68a5ca 100644
--- a/general/stores/ontology.ts
+++ b/general/stores/ontology.ts
@@ -10,7 +10,8 @@ export const useOntologyStore = defineStore({
       iri: '' as string,
       entityData: {} as Record<string, any>,
       releases: [] as Array<string | null>,
-      errorFlags: {} as Record<string, boolean>
+      errorFlags: {} as Record<string, boolean>,
+      unauthorizedError: false
     };
   },
   actions: {
@@ -49,22 +50,20 @@ export const useOntologyStore = defineStore({
         const domain = `${servers.getVersionedOntologyServer(version)}?iri=${iri}`;
         const response = await getEntity(domain);
 
-        if (response.ok) {
-          this.errorFlags[versionIdentifier] = false;
-          return await response.json();
-        } else {
-          this.errorFlags[versionIdentifier] = true;
-          return null;
-        }
+        this.errorFlags[versionIdentifier] = false;
+        return response;
       } catch (error: any) {
-        if (error.status == 404) {
+        if (error.response && error.response.status === 404) {
           // Resource doesn't exist in this version
           this.errorFlags[versionIdentifier] = false;
           return null;
-        } else if (error.status == 503) {
+        } else if (error.response && error.response.status === 503) {
           // Server error
           this.errorFlags[versionIdentifier] = true;
           return null;
+        } else {
+          this.errorFlags[versionIdentifier] = true;
+          return null;
         }
       }
     },
@@ -82,6 +81,9 @@ export const useOntologyStore = defineStore({
     clearData(): void {
       this.entityData = {};
     },
+    clearUnauthorizedError() {
+      this.unauthorizedError = false;
+    },
     setReleases(releases: Array<string | null>) {
       this.releases = releases;
     },
diff --git a/general/stores/toast.ts b/general/stores/toast.ts
new file mode 100644
index 00000000..a46f59cb
--- /dev/null
+++ b/general/stores/toast.ts
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia';
+
+type ToastType = 'default' | 'success' | 'warning' | 'error';
+
+interface Toast {
+  id: number;
+  message: string;
+  type: ToastType;
+}
+
+interface ToastState {
+  toasts: Toast[];
+  nextId: number;
+}
+
+export const useToastStore = defineStore({
+  id: 'toast',
+  state: (): ToastState => ({
+    toasts: [],
+    nextId: 0
+  }),
+  actions: {
+    addToast(message: string, type: ToastType = 'default') {
+      const id = this.nextId++;
+      this.toasts.push({ id, message, type });
+      setTimeout(() => {
+        this.removeToast(id);
+      }, 5000);
+    },
+    removeToast(id: number) {
+      this.toasts = this.toasts.filter((toast) => toast.id !== id);
+    }
+  }
+});