diff --git a/invenio_vcs/assets/semantic-ui/js/invenio_vcs/index.js b/invenio_vcs/assets/semantic-ui/js/invenio_vcs/index.js
new file mode 100644
index 00000000..f9438bdd
--- /dev/null
+++ b/invenio_vcs/assets/semantic-ui/js/invenio_vcs/index.js
@@ -0,0 +1,232 @@
+// This file is part of InvenioVCS
+// Copyright (C) 2023 CERN.
+//
+// Invenio VCS is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+import $ from "jquery";
+
+function addResultMessage(element, color, icon, message) {
+  element.classList.remove("hidden");
+  element.classList.add(color);
+  element.querySelector(`.icon`).className = `${icon} small icon`;
+  element.querySelector(".content").textContent = message;
+}
+
+// function from https://www.w3schools.com/js/js_cookies.asp
+function getCookie(cname) {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == " ") {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+const REQUEST_HEADERS = {
+  "Content-Type": "application/json",
+  "X-CSRFToken": getCookie("csrftoken"),
+};
+
+const sync_button = document.getElementById("sync_repos");
+if (sync_button) {
+  sync_button.addEventListener("click", function () {
+    const resultMessage = document.getElementById("sync-result-message");
+    const loaderIcon = document.getElementById("loader_icon");
+    const buttonTextElem = document.getElementById("sync_repos_btn_text");
+    const buttonText = buttonTextElem.innerHTML;
+    const loadingText = sync_button.dataset.loadingText;
+    const provider = sync_button.dataset.provider;
+
+    const url = `/api/user/vcs/${provider}/repositories/sync`;
+    const request = new Request(url, {
+      method: "POST",
+      headers: REQUEST_HEADERS,
+    });
+
+    buttonTextElem.innerHTML = loadingText;
+    loaderIcon.classList.add("loading");
+
+    function fetchWithTimeout(url, options, timeout = 100000) {
+      /** Timeout set to 100000 ms = 1m40s .*/
+      return Promise.race([
+        fetch(url, options),
+        new Promise((_, reject) =>
+          setTimeout(() => reject(new Error('timeout')), timeout)
+        )
+      ]);
+    }
+
+    syncRepos(request);
+
+    async function syncRepos(request) {
+      try {
+        const response = await fetchWithTimeout(request);
+        loaderIcon.classList.remove("loading");
+        sync_button.classList.add("disabled");
+        buttonTextElem.innerHTML = buttonText;
+        if (response.ok) {
+          addResultMessage(
+            resultMessage,
+            "positive",
+            "checkmark",
+            "Repositories synced successfully. Please reload the page."
+          );
+          sync_button.classList.remove("disabled");
+          setTimeout(function () {
+            resultMessage.classList.add("hidden");
+          }, 10000);
+        } else {
+          addResultMessage(
+            resultMessage,
+            "negative",
+            "cancel",
+            `Request failed with status code: ${response.status}`
+          );
+          setTimeout(function () {
+            resultMessage.classList.add("hidden");
+          }, 10000);
+          sync_button.classList.remove("disabled");
+        }
+      } catch (error) {
+        loaderIcon.classList.remove("loading");
+        if(error.message === "timeout"){
+          addResultMessage(
+            resultMessage,
+            "warning",
+            "hourglass",
+            "This action seems to take some time, refresh the page after several minutes to inspect the synchronisation."
+          );
+        }
+        else {
+          addResultMessage(
+            resultMessage,
+            "negative",
+            "cancel",
+            `There has been a problem: ${error}`
+          );
+           setTimeout(function () {
+            resultMessage.classList.add("hidden");
+          }, 7000);
+        }
+      }
+    }
+  });
+}
+
+const repositories = document.getElementsByClassName("repository-item");
+if (repositories) {
+  for (const repo of repositories) {
+    repo.addEventListener("change", function (event) {
+      sendEnableDisableRequest(event.target.checked, repo);
+    });
+  }
+}
+
+function sendEnableDisableRequest(checked, repo) {
+  const input = repo.querySelector("input[data-repo-id]");
+  const repo_id= input.getAttribute("data-repo-id");
+  const provider = input.getAttribute("data-provider");
+  const switchMessage = repo.querySelector(".repo-switch-message");
+
+  let url;
+  if (checked === true) {
+    url = `/api/user/vcs/${provider}/repositories/${repo_id}/enable`;
+  } else if (checked === false) {
+    url = `/api/user/vcs/${provider}/repositories/${repo_id}/disable`;
+  }
+
+  const request = new Request(url, {
+    method: "POST",
+    headers: REQUEST_HEADERS,
+  });
+
+  sendRequest(request);
+
+  async function sendRequest(request) {
+    try {
+      const response = await fetch(request);
+      if (response.ok) {
+        addResultMessage(
+          switchMessage,
+          "positive",
+          "checkmark",
+          "Repository synced successfully. Please reload the page."
+        );
+        setTimeout(function () {
+          switchMessage.classList.add("hidden");
+        }, 10000);
+      } else {
+        addResultMessage(
+          switchMessage,
+          "negative",
+          "cancel",
+          `Request failed with status code: ${response.status}`
+        );
+        setTimeout(function () {
+          switchMessage.classList.add("hidden");
+        }, 5000);
+      }
+    } catch (error) {
+      addResultMessage(
+        switchMessage,
+        "negative",
+        "cancel",
+        `There has been a problem: ${error}`
+      );
+      setTimeout(function () {
+        switchMessage.classList.add("hidden");
+      }, 7000);
+    }
+  }
+}
+
+// DOI badge modal
+$(".doi-badge-modal").modal({
+  selector: {
+    close: ".close.button",
+  },
+  onShow: function () {
+    const modalId = $(this).attr("id");
+    const $modalTrigger = $(`#${modalId}-trigger`);
+    $modalTrigger.attr("aria-expanded", true);
+  },
+  onHide: function () {
+    const modalId = $(this).attr("id");
+    const $modalTrigger = $(`#${modalId}-trigger`);
+    $modalTrigger.attr("aria-expanded", false);
+  },
+});
+
+$(".doi-modal-trigger").on("click", function (event) {
+  const modalId = $(event.target).attr("aria-controls");
+  $(`#${modalId}.doi-badge-modal`).modal("show");
+});
+
+$(".doi-modal-trigger").on("keydown", function (event) {
+  if (event.key === "Enter") {
+    const modalId = $(event.target).attr("aria-controls");
+    $(`#${modalId}.doi-badge-modal`).modal("show");
+  }
+});
+
+// ON OFF toggle a11y
+const $onOffToggle = $(".toggle.on-off");
+
+$onOffToggle &&
+  $onOffToggle.on("change", (event) => {
+    const target = $(event.target);
+    const $onOffToggleCheckedAriaLabel = target.data("checked-aria-label");
+    const $onOffToggleUnCheckedAriaLabel = target.data("unchecked-aria-label");
+    if (event.target.checked) {
+      target.attr("aria-label", $onOffToggleCheckedAriaLabel);
+    } else {
+      target.attr("aria-label", $onOffToggleUnCheckedAriaLabel);
+    }
+  });
diff --git a/invenio_vcs/ext.py b/invenio_vcs/ext.py
new file mode 100644
index 00000000..c2cdf3ca
--- /dev/null
+++ b/invenio_vcs/ext.py
@@ -0,0 +1,113 @@
+# -*- coding: utf-8 -*-
+# This file is part of Invenio.
+# Copyright (C) 2025 CERN.
+#
+# Invenio is free software; you can redistribute it and/or modify it
+# under the terms of the MIT License; see LICENSE file for more details.
+
+"""Invenio module that adds VCS integration to the platform."""
+
+from flask import current_app, request
+from flask_menu import current_menu
+from invenio_i18n import LazyString
+from invenio_i18n import gettext as _
+from invenio_theme.proxies import current_theme_icons
+from six import string_types
+from werkzeug.utils import cached_property, import_string
+
+from invenio_vcs.config import get_provider_list
+from invenio_vcs.receivers import VCSReceiver
+from invenio_vcs.service import VCSRelease
+from invenio_vcs.utils import obj_or_import_string
+
+from . import config
+
+
+class InvenioVCS(object):
+    """Invenio-VCS extension."""
+
+    def __init__(self, app=None):
+        """Extension initialization."""
+        if app:
+            self.init_app(app)
+
+    @cached_property
+    def release_api_class(self):
+        """Release API class."""
+        cls = current_app.config["VCS_RELEASE_CLASS"]
+        if isinstance(cls, string_types):
+            cls = import_string(cls)
+        assert issubclass(cls, VCSRelease)
+        return cls
+
+    @cached_property
+    def release_error_handlers(self):
+        """Release error handlers."""
+        error_handlers = current_app.config.get("VCS_ERROR_HANDLERS") or []
+        return [
+            (obj_or_import_string(error_cls), obj_or_import_string(handler))
+            for error_cls, handler in error_handlers
+        ]
+
+    def init_app(self, app):
+        """Flask application initialization."""
+        self.init_config(app)
+        app.extensions["invenio-vcs"] = self
+
+    def init_config(self, app):
+        """Initialize configuration."""
+        app.config.setdefault(
+            "VCS_SETTINGS_TEMPLATE",
+            app.config.get("SETTINGS_TEMPLATE", "invenio_vcs/settings/base.html"),
+        )
+
+        for k in dir(config):
+            if k.startswith("VCS_"):
+                app.config.setdefault(k, getattr(config, k))
+
+
+def finalize_app_ui(app):
+    """Finalize app."""
+    init_menu(app)
+    init_webhooks(app)
+
+
+def finalize_app_api(app):
+    """Finalize app."""
+    init_webhooks(app)
+
+
+def init_menu(app):
+    """Init menu."""
+    for provider in get_provider_list(app):
+
+        def is_active(current_node):
+            return (
+                request.endpoint.startswith("invenio_vcs.")
+                and request.view_args.get("provider", "") == current_node.name
+            )
+
+        current_menu.submenu(f"settings.{provider.id}").register(
+            endpoint="invenio_vcs.get_repositories",
+            endpoint_arguments_constructor=lambda id=provider.id: {"provider": id},
+            text=_(
+                "%(icon)s %(provider)s",
+                icon=LazyString(
+                    lambda: f'<i class="{current_theme_icons[provider.icon]}"></i>'
+                ),
+                provider=provider.name,
+            ),
+            order=10,
+            active_when=is_active,
+        )
+
+
+def init_webhooks(app):
+    """Register the webhook receivers based on the configured VCS providers."""
+    state = app.extensions.get("invenio-webhooks")
+    if state is not None:
+        for provider in get_provider_list(app):
+            # Procedurally register the webhook receivers instead of including them as an entry point, since
+            # they are defined in the VCS provider config list rather than in the instance's setup.cfg file.
+            if provider.id not in state.receivers:
+                state.register(provider.id, VCSReceiver)
diff --git a/invenio_vcs/templates/semantic-ui/invenio_vcs/helpers.html b/invenio_vcs/templates/semantic-ui/invenio_vcs/helpers.html
new file mode 100644
index 00000000..da997bd2
--- /dev/null
+++ b/invenio_vcs/templates/semantic-ui/invenio_vcs/helpers.html
@@ -0,0 +1,55 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2023 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+{% from "semantic-ui/invenio_formatter/macros/badges.html" import badges_formats_list %}
+
+{%- macro doi_badge(doi, doi_url, provider_id, provider) %}
+  {%- block doi_badge scoped %}
+    {% set image_url = url_for('invenio_vcs_badge.index', provider=provider, repo_provider_id=provider_id, _external=True) %}
+    <img
+      role="button"
+      tabindex="0"
+      id="modal-{{ provider_id }}-trigger"
+      aria-controls="modal-{{ provider_id }}"
+      aria-expanded="false"
+      class="doi-modal-trigger block m-0"
+      src="{{ url_for('invenio_formatter_badges.badge', title='DOI', value=doi, ext='svg', _external=True, _scheme='https') }}"
+      alt="DOI: {{ doi }}"
+    />
+
+    <div
+      id="modal-{{ provider_id }}"
+      role="dialog"
+      aria-modal="true"
+      class="ui modal segments fade doi-badge-modal"
+    >
+      <div class="ui segment header">
+        <h2>{{ _("DOI Badge") }}</h2>
+      </div>
+
+      <div class="ui segment content">
+        <small>
+          {{ _("This badge points to the latest released version of your repository. If you want a DOI badge for a specific release, please follow the DOI link for one of the specific releases and grab badge from the archived record.") }}
+        </small>
+      </div>
+
+      <div class="ui segment content">
+        <h3 class="ui small header">{{ _("DOI") }}</h3>
+        <pre>{{ doi }}</pre>
+
+        {{ badges_formats_list(image_url, doi_url) }}
+      </div>
+
+      <div class="ui segment actions">
+        <button class="ui close button">
+          {{ _("Close") }}
+        </button>
+      </div>
+    </div>
+  {%- endblock %}
+{%- endmacro %}
diff --git a/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/helpers.html b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/helpers.html
new file mode 100644
index 00000000..dfa2e2a7
--- /dev/null
+++ b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/helpers.html
@@ -0,0 +1,138 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2023 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{%- from "invenio_vcs/helpers.html" import doi_badge with context -%}
+
+{%- macro panel_start(
+    title,
+    icon="",
+    btn_help_text='',
+    btn_text='',
+    btn_loading_text='',
+    btn_icon='',
+    btn_href='',
+    btn_class='',
+    btn_id='',
+    btn_name='',
+    provider='',
+    loaded_message_id='',
+    id="",
+    panel_extra_class="secondary"
+  )
+%}
+  {%- block panel_start scoped %}
+    <section aria-label="{{ title }}" class="ui segments" {% if id %} id="{{ id }}" {% endif %}>
+      <div class="ui segment {{ panel_extra_class }}">
+
+        {%- block panel_heading scoped %}
+          <div class="ui equal width grid">
+            <div class="middle aligned column">
+
+              {% if latest_release %}
+                <div class="ui grid">
+                  <div class="sixteen wide mobile three wide computer two wide large screen two wide widescreen middle aligned column pr-0">
+              {% endif %}
+
+                    <h2 class="ui tiny header mt-0 mb-0 {{ 'flex align-items-center' if icon }}">
+                      {% if icon %}<i class="small {{ icon }}" aria-hidden="true"></i>{% endif %}{{ title }}
+                    </h2>
+
+              {% if latest_release %}
+                  </div>
+
+                  <div class="sixteen wide mobile thirteen wide computer fourteen wide large screen fourteen wide widescreen middle aligned column">
+                    {%- if latest_release.record %}
+                      {%- set latest_release_record_doi = latest_release.record.pids.get('doi', {}).get('identifier') %}
+                      {%- set conceptid_doi_url = latest_release.record.links.parent_doi %}
+                    {%- endif %}
+
+                    {%- if latest_release_record_doi %}
+                      {{ doi_badge(latest_release_record_doi, doi_url=conceptid_doi_url, provider=provider, provider_id=repo.provider_id) }}
+                    {%- endif %}
+                  </div>
+                </div>
+              {% endif %}
+
+            </div>
+
+            <div class="right floated right aligned column">
+              <div>
+                {%- if btn_text and (btn_href or btn_help_text) -%}
+                  {%- if btn_help_text %}
+                    <p class="mt-5 mb-5 inline-computer">
+                      <small>{{ btn_help_text }}</small>
+                    </p>
+                  {%- endif %}
+
+                  {%- if btn_href %}
+                    <a class="ui basic tiny button {{ btn_class }} ml-10" href="{{ btn_href }}" target="_blank">
+                      {% if btn_icon %}
+                        <i class="{{ btn_icon }}" aria-hidden="true"></i>
+                      {% endif %}
+                      {{ btn_text }}
+                    </a>
+                  {%- elif btn_name and btn_id %}
+                    <button
+                      id="{{ btn_id }}"
+                      name="{{ btn_name }}"
+                      data-loading-text="{{ btn_loading_text }}"
+                      data-provider="{{ provider }}"
+                      class="ui compact tiny button {{ btn_class }} ml-10"
+                    >
+                      {% if btn_icon %}
+                        <i id="loader_icon" class="{{ btn_icon }}" aria-hidden="true"></i>
+                      {% endif %}
+                      <span id="{{ btn_id }}_btn_text" class="btn-text">
+                        {{ btn_text }}
+                      </span>
+                    </button>
+                  {%- endif %}
+                {%- endif -%}
+              </div>
+            </div>
+          </div>
+        {%- endblock %}
+
+      </div>
+      <div
+        id="{{ loaded_message_id }}"
+        class="ui bottom attached fluid icon message rel-pl-1 rel-pr-1 pt-10 pb-10 mb-0 no-border-radius hidden"
+      >
+        <i class="icon" aria-hidden="true"></i>
+        <p role="alert" class="content m-0"></p>
+      </div>
+  {%- endblock %}
+{%- endmacro %}
+
+{%- macro panel_end() %}
+  {%- block panel_end scoped %}
+      </section>
+  {%- endblock %}
+{%- endmacro %}
+
+{%- macro repo_switch(repo, repo_id, provider) %}
+  {%- block repo_switch scoped %}
+    {%- set inaccessible = (repo and repo.user_id and (repo.user_id != current_user.id)) %}
+    <div
+      class="ui toggle on-off checkbox"
+      {% if inaccessible %} data-tooltip="{{ _('This repository is managed by another user of your organization.') }}" {% endif %}
+      >
+      <input
+        type="checkbox"
+        {{' disabled' if inaccessible}}{{ ' checked' if repo and repo.enabled }}
+        data-repo-id="{{ repo_id }}"
+        data-provider="{{ provider }}"
+        data-checked-aria-label="{{ _('Disable') }} {{ repo.name if repo }}"
+        data-unchecked-aria-label="{{ _('Enable') }} {{ repo.name if repo }}"
+        aria-label="{{ 'disable' if repo and repo.enabled else 'enable' }} {{ repo.name if repo }}"
+      />
+      <label aria-hidden="true"></label>
+    </div>
+  {%- endblock %}
+{%- endmacro %}
diff --git a/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/index.html b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/index.html
new file mode 100644
index 00000000..05e7a12f
--- /dev/null
+++ b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/index.html
@@ -0,0 +1,184 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2023 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+{%- import "invenio_vcs/settings/helpers.html" as helpers with context %}
+{%- if not request.is_xhr %}
+  {%- extends config.VCS_SETTINGS_TEMPLATE %}
+{%- endif %}
+
+{%- block settings_content %}
+  {%- if connected %}
+    {%- block repositories_get_started %}
+      {{
+        helpers.panel_start(
+          _('Repositories'),
+          icon=vocabulary["icon"] + " icon",
+          btn_text=_('Sync now'),
+          btn_loading_text=_('Syncing'),
+          btn_icon='sync alternate icon',
+          btn_id='sync_repos',
+          btn_name='sync-repos',
+          btn_help_text=_('(updated {})').format(last_sync|naturaltime),
+          provider=provider,
+          loaded_message_id='sync-result-message',
+          id="vcs-view",
+        )
+      }}
+
+      <div class="ui segment">
+        <div class="ui grid">
+          <div class="sixteen wide centered column">
+            <h3 class="ui large header mt-10">
+              <i class="{{ vocabulary["icon"] }} icon" aria-hidden="true"></i>{{ _("Get started") }}
+            </h3>
+          </div>
+
+          <div class="three column stackable tablet-mobile row">
+            <div class="column">
+              <h4 class="ui medium header">1 {{ _("Flip the switch") }}</h4>
+              <div class="ui divider"></div>
+              <p>
+                {{ _('Select the repository you want to preserve, and toggle
+                the switch below to turn on automatic preservation of your software.') }}
+              </p>
+
+              <div class="text-align-center rel-mt-1">
+                <div class="ui toggle on-off checkbox">
+                  <input
+                    id="example-switch"
+                    name="example-switch"
+                    type="checkbox"
+                    checked
+                  >
+                  <label for="example-switch">
+                    <small class="text-muted ml-5">
+                      {{ _("(example)") }}
+                    </small>
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div class="column">
+              <h4 class="ui medium header">2 {{ _("Create a release") }}</h4>
+              <div class="ui divider"></div>
+              <p>
+                {{ _('Go to %(name)s and <a href="https://help.github.com/articles/creating-releases" target="_blank">create a release <i class="small icon external" aria-hidden="true"></i></a>. %(site_name)s will automatically download a .zip-ball of each new release and register a DOI.',
+                name=vocabulary["name"], site_name=config.THEME_SITENAME | default('System')) }}
+              </p>
+            </div>
+
+            <div class="column">
+              <h4 class="ui medium header">3 {{ _("Get the badge") }}</h4>
+              <div class="ui divider"></div>
+              <p>
+                {{ _('After your first release, a DOI badge that you can include in your %(name)s
+                README will appear next to your repository below.', name=vocabulary["name"]) }}
+              </p>
+
+              <div class="flex align-items-center justify-center rel-mt-1">
+                {#- TODO remove hardcoding Zenodo stuff #}
+                <a href="https://doi.org/10.5281/zenodo.8475">
+                  <img
+                    src="{{ url_for('invenio_formatter_badges.badge', title='doi', value='10.5281/zenodo.8475', ext='svg') }}"
+                    alt="{{ _('Example DOI:') }} 10.5281/zenodo.8475"
+                    class="mt-5 mr-5"
+                  >
+                </a>
+                <small class="text-muted">
+                  {{ _("(example)") }}
+                </small>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {{ helpers.panel_end() }}
+    {%- endblock %}
+
+    {%- if repos %}
+      {%- block enabled_repositories %}
+        {{ helpers.panel_start(_('Enabled Repositories')) }}
+
+        <ul class="ui segments no-border no-border-radius-top no-style-list m-0 p-0">
+          {%- for repo_id, repo in repos.items() if repo.instance and repo.instance.hook %}
+            <li class="ui segment {{ 'no-border-radius-top' if loop.last else 'no-border-radius' }} left-border positive m-0">
+              {% include "invenio_vcs/settings/index_item.html" with context %}
+            </li>
+          {%- endfor %}
+        </ul>
+
+        {{ helpers.panel_end() }}
+      {%- endblock %}
+    {% endif %}
+
+    {%- block disabled_repositories %}
+      {{ helpers.panel_start(_('Repositories')) }}
+
+      {%- block repositories_tooltip %}
+        <p class="ui segment m-0">
+          <small>
+            <!-- TODO: what do we do about this? -->
+            {{ _('If your organization\'s repositories do not show up in the list, please
+            ensure you have enabled <a href="https://help.github.com/articles/approving-third-party-applications-for-your-organization/" target="_blank">third-party
+            access <i class="small icon external" aria-hidden="true"></i></a> to the {} application. Private repositories are not supported.')
+            .format(config.THEME_SITENAME | default('Invenio')) }}
+          </small>
+        </p>
+      {%- endblock %}
+
+      {%- if not repos %}
+        <p class="ui segment">
+          {{ _('You have no repositories on %(name)s.', name=vocabulary["name"]) }}
+          <br />
+          <br />
+          {{_('Go to <a href="%(url)s" target="_blank">%(name)s <i class="small icon external" aria-hidden="true"></i></a> and create your first or
+          click the Sync button to synchronize the latest changes from %(name)s.', name=vocabulary["name"], url=new_repo_url)}}
+        </p>
+      {%- else %}
+        <ul class="ui segments no-border no-border-radius-top no-style-list m-0 p-0">
+          {%- for repo_id, repo in repos.items() if not repo.instance or not repo.instance.hook %}
+            <li class="ui segment {{ 'no-border-radius-top' if loop.last else 'no-border-radius' }}">
+              {% include "invenio_vcs/settings/index_item.html" with context %}
+            </li>
+          {%- endfor %}
+        </ul>
+      {% endif %}
+
+      {{ helpers.panel_end() }}
+    {%- endblock %}
+
+  {#- If the user has not connected their VCS account... #}
+  {%- else %}
+    {%- block connect_to_vcs_account %}
+      {{ helpers.panel_start(_('%(name)s', name=vocabulary["name"]), icon=vocabulary["icon"] + " icon") }}
+      <div class="ui segment">
+        <div class="ui centered container">
+          <h2 class="ui huge header">{{ _('Software preservation made simple!') }}</h2>
+          <a
+            class="ui basic button rel-mt-1"
+            href="{{ url_for('invenio_oauthclient.login', remote_app=provider, next=url_for('invenio_vcs.get_repositories', provider=provider)) }}"
+            aria-label="{{ _('Connect your %(name)s account', name=vocabulary["name"]) }}"
+          >
+            <i class="{{ vocabulary["icon"] }} icon" aria-hidden="True"></i>
+            {{ _('Connect') }}
+          </a>
+          <p class="rel-mt-2">
+            {{ _('To get started, click "Connect" and we will get a list of your %(repositories)s from %(name)s.', repositories=vocabulary["repository_name_plural"], name=vocabulary["name"]) }}
+          </p>
+        </div>
+      </div>
+      {{ helpers.panel_end() }}
+    {%- endblock %}
+  {%- endif %}
+{%- endblock %}
+
+{%- block javascript %}
+  {{ super() }}
+  {{ webpack['invenio-vcs-init.js'] }}
+{%- endblock javascript %}
diff --git a/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/index_item.html b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/index_item.html
new file mode 100644
index 00000000..72c2546b
--- /dev/null
+++ b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/index_item.html
@@ -0,0 +1,59 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2023 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+{%- from "invenio_vcs/helpers.html" import doi_badge with context -%}
+{%- set release = repo.get('latest') %}
+
+{%- block repository_item %}
+  <div class="ui grid repository-item">
+    <div class="thirteen wide computer thirteen wide tablet twelve wide mobile column">
+      <div class="flex column-mobile column-tablet justify-space-between">
+        <div class="flex align-items-center justify-space-between wrap mt-5 mb-5 rel-mr-1">
+          <div class="flex align-items-center mb-5 mt-5">
+            <a
+              href="{{ repo_url(repo.full_name) }}"
+              data-tooltip="{{ _('View repository on %(name)s', name=vocabulary["name"]) }}"
+              aria-label="{{ _('View repository on %(name)s:', name=vocabulary["name"]) }} {{ repo.full_name }}"
+              target="_blank"
+            >
+              <i class="{{ vocabulary["icon"] }} icon" aria-hidden="true"></i>
+            </a>
+
+            <a
+              href="{{ url_for('.get_repository', provider=provider, repo_id=repo.id) }}"
+              class="rel-mr-1"
+            >
+              <b>{{ repo.full_name }}</b>
+            </a>
+          </div>
+
+          {%- if release and release.record %}
+            {%- set release_record_doi = release.record.pids.get('doi', {}).get('identifier') %}
+            {%- set conceptid_doi_url = release.record.links.parent_doi %}
+          {%- endif %}
+
+          {%- if release_record_doi %}
+            {{ doi_badge(release_record_doi, doi_url=conceptid_doi_url, provider=provider, provider_id=repo_id) }}
+          {%- endif %}
+        </div>
+
+
+        <div>
+          <div class="repo-switch-message ui tiny compact icon message pt-10 pb-10 rel-pr-1 rel-pl-1 mt-5 mb-5 hidden">
+            <i class="icon" aria-hidden="true"></i>
+            <p role="alert" class="content m-0"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="three wide computer three wide tablet four wide mobile middle aligned right aligned column">
+      {{ helpers.repo_switch(repo.instance, repo_id, provider) }}
+    </div>
+  </div>
+{%- endblock %}
diff --git a/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/release_item.html b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/release_item.html
new file mode 100644
index 00000000..f9a5f924
--- /dev/null
+++ b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/release_item.html
@@ -0,0 +1,212 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2025 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{%- block release_item %}
+  {% set release_tag = release.generic_release.tag_name %}
+  {% set this_release_url = release_url(repo.full_name, release.generic_release.id, release.generic_release.tag_name) %}
+  {% set release_name = release_tag %}
+
+  {% set status_name = release.db_release.status.name %}
+  {% if status_name == "RECEIVED" %}
+    {% set status_title = _("Received") %}
+    {% set status_icon = "spinner loading" %}
+    {% set status_color = "warning" %}
+  {% elif status_name == "PROCESSING" %}
+    {% set status_title = _("Processing") %}
+    {% set status_icon = "spinner loading" %}
+    {% set status_color = "warning" %}
+  {% elif status_name == "PUBLISHED" %}
+    {% set status_title = _("Published") %}
+    {% set status_icon = "check" %}
+    {% set status_color = "positive" %}
+  {% elif status_name == "FAILED" %}
+    {% set status_title = _("Failed") %}
+    {% set status_icon = "times" %}
+    {% set status_color = "negative" %}
+  {% elif status_name == "DELETED" %}
+    {% set status_title = _("Deleted") %}
+    {% set status_icon = "times" %}
+    {% set status_color = "negative" %}
+  {% endif %}
+
+  {% set status_icon_color = status_color %}
+  {% if status_color == "warning" %}
+    {% set status_icon_color = "warning-color" %}
+  {% endif %}
+
+  <li class="ui segment {{ 'no-border-radius-top' if is_last else 'no-border-radius' }} left-border {{ release_status_color }} m-0">
+    {%- block release_header scoped %}
+      <div class="ui accordion">
+        <div class="ui stackable grid title">
+
+          {%- block release_title scoped %}
+            <div class="release-title twelve wide column">
+              <div role="button" tabindex="0" aria-controls="accordion-content-{{list_index}}" class="trigger" aria-expanded="false">
+                <i class="tag icon tab-menu-accordion {{ status_icon_color }}" aria-hidden="true"></i>
+                <span class="ui tiny header {{ status_color }}">
+                  {{ release_tag }} &nbsp; {%- if release.record %}{{ release.record.data["metadata"]["title"] }}{%- endif %}
+                </span>
+              </div>
+
+              {%- if release.record %}
+                {%- set release_doi = release.record.pids.get('doi', {}).get('identifier') %}
+              {%- endif %}
+
+              {%- if release_doi %}
+                <div class="mt-5">
+                  <a href={{release.record_url}}>
+                    <i class="barcode icon tab-menu-accordion" aria-hidden="true"></i> DOI: {{ release_doi }}
+                  </a>
+                </div>
+              {%- endif %}
+
+              <p class="rel-mt-1">
+                <a
+                  href="{{ this_release_url }}"
+                  target="_blank"
+                  aria-label="{{ _('View release on %(name)s', name=vocabulary["name"]) }}"
+                >
+                  <i class="{{ vocabulary["icon"] }} icon tab-menu-accordion" aria-hidden="true"></i>{{ release_name or release_tag }}
+                </a>
+              </p>
+            </div>
+          {%- endblock release_title %}
+
+          {%- block release_status %}
+            <div class="four wide right aligned column">
+              <div>
+                <i class="{{ status_icon }} icon {{ status_icon_color }} tab-menu-accordion"></i>
+                <span class="ui tiny header {{ status_color }}">
+                  {{ status_title }}
+                </span>
+              </div>
+
+              <p class="rel-mt-1">
+                <small>{{ release.db_release.created|naturaltime }}</small>
+              </p>
+            </div>
+          {%- endblock %}
+        </div>
+        {%- block release_details_content scoped %}
+          <section id="accordion-content-{{list_index}}" class="content rel-mt-2">
+            <div class="rdm-tab-container">
+              {%- block release_details_tabs scoped %}
+                <div role="tablist" class="ui tabular menu rdm-tab-menu">
+                  <div id="citation-{{ list_index }}-tab" role="tab" tabindex="0" aria-selected="{{ active }}" class="{{ 'active' if active }} item" data-tab="citation-{{ list_index }}">
+                    {{ _("Citation File") }}
+                  </div>
+                  {% set active = false %}
+
+                  <div id="payload-{{ list_index }}-tab" role="tab" tabindex="0" aria-selected="{{ active }}" class="{{ 'active' if active }} item" data-tab="payload-{{ list_index }}">
+                    {{ _("Payload") }}
+                  </div>
+                  {% set active = false %}
+
+                  {%- block metadata_tab scoped %}
+                  {%- endblock metadata_tab %}
+
+                  {%- if release.db_release.errors %}
+                    <div id="errors-{{ list_index }}-tab" role="tab" tabindex="0" aria-selected="{{ active }}" class="{{ 'active' if active }} item" data-tab="errors-{{ list_index }}">
+                      {{ _("Errors") }}
+                    </div>
+                    {% set active = false %}
+                  {%- endif %}
+                </div>
+              {%- endblock release_details_tabs %}
+
+              {% set active = true %}
+              {%- block release_details_tabs_content %}
+                <div id="citation-{{ list_index }}-tab-panel" role="tabpanel" class="ui tab rel-p-1 {{ 'active' if active }}" data-tab="citation-{{ list_index }}">
+                  {%- block releasetab_cff %}
+                    {% set repo_name = value %}
+                    <div class="flex align-items-center justify-space-between rel-mb-1">
+                      <h3 class="ui header m-0">{{ _("Citation File") }}</h3>
+                      <a class="ui basic button" href="{{ new_citation_file_url }}">
+                        <i class="{{ vocabulary["icon"] }} icon"></i>{{ _("Create CITATION.cff") }}
+                      </a>
+                    </div>
+                    <p>
+                      <a href="https://citation-file-format.github.io/">CITATION.cff</a> {{ _('files are plain text files with human-
+                        and machine-readable citation information for software. Code developers can include them in their repositories to let others know how to correctly cite their software.') }}
+                    </p>
+                    <p>{{ _("An example of the CITATION.cff for this release can be found below:") }}</p>
+                    <div class="ui message scroll-overflow">
+                      <pre>
+cff-version: 1.1.0
+message: "If you use this software, please cite it as below."
+authors:
+- family-names: Joe
+given-names: Johnson
+orcid: https://orcid.org/0000-0000-0000-0000
+title:  {%- if release.record %}{{ release.record.data["metadata"]["title"] }}{%- endif %}
+version: {{ release_tag }}
+date-released: {{ release.event.payload.get("release", {}).get("published_at", "")[:10] if release.event else '2021-07-28' }}
+                      </pre>
+                    </div>
+                  {%- endblock releasetab_cff %}
+                </div>
+
+                {% set active = false %}
+
+                <div id="payload-{{ list_index }}-tab-panel" role="tabpanel" class="ui tab rel-p-1 {{ 'active' if active }}" data-tab="payload-{{ list_index }}">
+                  {%- block releasetab_payload %}
+                    {%- if release.event %}
+                      <div class="flex align-items-center justify-space-between">
+                        <h3 class="ui header m-0">{{ _("%(name)s Payload", name=vocabulary["name"]) }}</h3>
+                        <small class="text-align-right">{{ _("Received") }} {{ release.event.created|datetimeformat }}.</small>
+                      </div>
+
+                      <div class="ui message scroll-overflow">
+                        <pre>{{ release.event.payload|tojson(indent=4) }}</pre>
+                      </div>
+                    {%- endif %}
+                  {%- endblock releasetab_payload %}
+                </div>
+
+                {% set active = false %}
+
+                {%- block metadata_tab_content %}
+                {%- endblock metadata_tab_content %}
+
+                <div id="errors-{{ list_index }}-tab-panel" role="tabpanel" class="ui tab {{ 'active' if active }}" data-tab="errors-{{ list_index }}">
+                  {%- block releasetab_errors %}
+                    {%- if release.db_release.errors %}
+                      <div class="ui grid">
+                        <div class="row">
+                          <div class="column">
+                            <h4>{{ _("Errors") }}</h4>
+                          </div>
+                        </div>
+                        <div class="row">
+                          <div class="column">
+                            <div class="ui message">
+                              <pre>{{ release.db_release.errors|tojson(indent=4) }}</pre>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    {%- endif %}
+                  {%- endblock releasetab_errors %}
+                </div>
+                {% set active = false %}
+              {%- endblock release_details_tabs_content %}
+
+            </div>
+          </section>
+        {%- endblock release_details_content %}
+
+      </div>
+    {%- endblock release_header %}
+  </li>
+
+  {%- block release_footer scoped %}
+    {%- if not is_last %}{%- endif %}
+  {%- endblock release_footer %}
+
+{%- endblock %}
diff --git a/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/view.html b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/view.html
new file mode 100644
index 00000000..ce2df3f9
--- /dev/null
+++ b/invenio_vcs/templates/semantic-ui/invenio_vcs/settings/view.html
@@ -0,0 +1,144 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2023 CERN.
+
+  Invenio is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{%- import "invenio_vcs/settings/helpers.html" as helpers with context %}
+{%- from "invenio_vcs/helpers.html" import doi_badge with context -%}
+
+{%- extends config.VCS_SETTINGS_TEMPLATE %}
+
+{%- block settings_content %}
+  {% set active = true %}
+
+  {%- block repo_details_header scoped %}
+    <section class="repository-item" aria-label="{{ _('Header') }}">
+      <div class="ui segment">
+        <div class="ui grid">
+          <div class="ten wide middle aligned column">
+            <div class="flex wrap align-items-center">
+              <div class="ui small header m-0">
+                <a
+                  class="mt-5 mb-5"
+                  href="{{ url_for('invenio_vcs.get_repositories', provider=provider) }}"
+                  aria-label="{{ _('Go back to all repositories') }}"
+                >
+                  {{ _("Repositories") }}
+                </a>
+                <span class="breadcrumb-icon">
+                  <i class="right angle icon mr-0" aria-hidden="true"></i>
+                </span>
+                <h2 class="ui small header mt-5 mb-5 inline-computer rel-mr-1">
+                  <i class="{{ vocabulary["icon"] }} small icon mr-5" aria-hidden="true"></i>{{ repo.full_name }}
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="six wide right aligned middle aligned column">
+            {{ helpers.repo_switch(repo, repo.provider_id, provider) }}
+          </div>
+        </div>
+
+        <div>
+          <div class="repo-switch-message ui compact icon message hidden rel-mt-1">
+            <i class="icon" aria-hidden="true"></i>
+            <p role="alert" class="content m-0"></p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+  {%- endblock %}
+
+  {{
+    helpers.panel_start(
+      _('Releases'),
+      btn_text=_('Create release'),
+      btn_icon=vocabulary["icon"] + ' icon',
+      btn_href=new_release_url,
+    )
+  }}
+  <div class="ui segment {{ 'p-0' if releases }}">
+    {%- if not releases %}
+      {%- if repo.enabled %}
+
+        {%- block enabled_repo_get_started scoped %}
+          <div class="ui centered container">
+            <h2 class="ui large header mt-10">{{ _("Get started!") }}</h2>
+            <p class="rel-mt-1">{{ _("Go to %(name)s and make your first release.", name=vocabulary["name"]) }}</p>
+            <a class="ui positive large icon button rel-mt-1 mr-0" href="{{ new_release_url }}" target="_blank">
+              <i class="{{ vocabulary["icon"] }} icon" aria-hidden="true"></i>
+              {{ repo.full_name }}
+            </a>
+          </div>
+        {%- endblock enabled_repo_get_started %}
+
+      {%- else -%}
+
+        {%- block disabled_repo_getstarted scoped %}
+          <div class="ui grid repository-item">
+            <div class="centered sixteen wide column">
+              <h2 class="ui large header mt-10">{{ _("Get started!") }}</h2>
+            </div>
+            <div class="two column stackable tablet-mobile row">
+              <div class="column">
+                <h2 class="ui medium header">1 {{ _("Flip the switch") }}</h2>
+                <div class="ui divider"></div>
+                <p>
+                  {{ _("Toggle the switch below to turn on/off automatic preservation of your repository.") }}
+                </p>
+                <div class="text-align-center rel-mt-1">
+                  {{ helpers.repo_switch(repo, repo.provider_id) }}
+                </div>
+
+                <div class="repo-switch-message ui compact icon message hidden rel-mt-1">
+                  <i class="icon" aria-hidden="true"></i>
+                  <p role="alert" class="content m-0"></p>
+                </div>
+              </div>
+
+              <div class="column">
+                <h2 class="ui medium header">2 {{ _("Create a release") }}</h2>
+                <div class="ui divider"></div>
+                <p>
+                  {{ _('Go to {} and create a release. {}
+                  will automatically download a .zip-ball of each new release and register a DOI.')
+                  .format(vocabulary["name"], config.THEME_SITENAME | default('Invenio')) }}
+                </p>
+
+                <div class="text-align-center rel-mt-1">
+                  <a class="ui positive medium icon button" href="{{ new_release_url }}">
+                    <i class="{{ vocabulary["icon"] }} icon"></i>
+                    {{ repo.full_name }}
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        {%- endblock disabled_repo_getstarted %}
+
+      {%- endif -%}
+    {%- else %}
+      {%- block repo_releases scoped %}
+        <ul class="ui segments no-border no-border-radius-top no-style-list m-0 p-0">
+
+          {%- for release in releases %}
+            {% set is_last = loop.last %}
+            {% set list_index = loop.index %}
+            {% include "invenio_vcs/settings/release_item.html" with context %}
+          {%- endfor %}
+        </ul>
+      {%- endblock repo_releases %}
+    {%- endif %}
+  </div>
+  {{ helpers.panel_end() }}
+{%- endblock %}
+
+{%- block javascript %}
+  {{ super() }}
+  {{ webpack['invenio-vcs-init.js'] }}
+{%- endblock javascript %}
diff --git a/invenio_vcs/views/badge.py b/invenio_vcs/views/badge.py
new file mode 100644
index 00000000..e19b05a8
--- /dev/null
+++ b/invenio_vcs/views/badge.py
@@ -0,0 +1,119 @@
+# -*- coding: utf-8 -*-
+# This file is part of Invenio.
+# Copyright (C) 2014-2025 CERN.
+#
+# Invenio is free software; you can redistribute it and/or modify it
+# under the terms of the MIT License; see LICENSE file for more details.
+
+"""DOI Badge Blueprint."""
+
+from __future__ import absolute_import
+
+from flask import Blueprint, abort, redirect, url_for
+from flask_login import current_user
+
+from invenio_vcs.config import get_provider_by_id
+from invenio_vcs.models import ReleaseStatus, Repository
+from invenio_vcs.proxies import current_vcs
+from invenio_vcs.service import VCSService
+
+blueprint = Blueprint(
+    "invenio_vcs_badge",
+    __name__,
+    url_prefix="/badge/<provider>",
+    static_folder="../static",
+    template_folder="../templates",
+)
+
+
+@blueprint.route("/<repo_provider_id>.svg")
+def index(provider, repo_provider_id):
+    """Generate a badge for a specific vcs repository (by vcs ID)."""
+    repo = Repository.query.filter(
+        Repository.provider_id == repo_provider_id, Repository.provider == provider
+    ).one_or_none()
+    if not repo:
+        abort(404)
+
+    latest_release = repo.latest_release(ReleaseStatus.PUBLISHED)
+    if not latest_release:
+        abort(404)
+
+    provider = get_provider_by_id(provider).for_user(current_user.id)
+    release = current_vcs.release_api_class(latest_release, provider)
+
+    # release.badge_title points to "DOI"
+    # release.badge_value points to the record "pids.doi.identifier"
+    badge_url = url_for(
+        "invenio_formatter_badges.badge",
+        title=release.badge_title,
+        value=release.badge_value,
+        ext="svg",
+    )
+    return redirect(badge_url)
+
+
+# Kept for backward compatibility
+@blueprint.route("/<int:user_id>/<path:repo_name>.svg")
+def index_old(provider, user_id, repo_name):
+    """Generate a badge for a specific vcs repository (by name)."""
+    repo = Repository.query.filter(
+        Repository.full_name == repo_name, Repository.provider == provider
+    ).one_or_none()
+    if not repo:
+        abort(404)
+
+    latest_release = repo.latest_release(ReleaseStatus.PUBLISHED)
+    if not latest_release:
+        abort(404)
+
+    provider = get_provider_by_id(provider).for_user(current_user.id)
+    release = current_vcs.release_api_class(latest_release, provider)
+
+    # release.badge_title points to "DOI"
+    # release.badge_value points to the record "pids.doi.identifier"
+    badge_url = url_for(
+        "invenio_formatter_badges.badge",
+        title=release.badge_title,
+        value=release.badge_value,
+        ext="svg",
+    )
+    return redirect(badge_url)
+
+
+# Kept for backward compatibility
+@blueprint.route("/latestdoi/<provider_id>")
+def latest_doi(provider, provider_id):
+    """Redirect to the newest record version."""
+    # Without user_id, we can't use VCSService. Therefore, we fetch the latest release using the Repository model directly.
+    repo = Repository.query.filter(
+        Repository.provider_id == provider_id, Repository.provider == provider
+    ).one_or_none()
+    if not repo:
+        abort(404)
+
+    latest_release = repo.latest_release(ReleaseStatus.PUBLISHED)
+    if not latest_release:
+        abort(404)
+
+    provider = get_provider_by_id(provider).for_user(current_user.id)
+    release = current_vcs.release_api_class(latest_release, provider)
+
+    # record.url points to DOI url or HTML url if Datacite is not enabled.
+    return redirect(release.record_url)
+
+
+# TODO: Do we really need this? If we get rid of it, we can remove the index on `name` on vcs_repositories
+"""
+# Kept for backward compatibility
+@blueprint.route("/latestdoi/<int:user_id>/<path:repo_name>")
+def latest_doi_old(provider, user_id, repo_name):
+    svc = VCSService.for_provider_and_user(provider, user_id)
+    repo = svc.get_repository(repo_name=repo_name)
+    release = svc.get_repo_latest_release(repo)
+    if not release:
+        abort(404)
+
+    # record.url points to DOI url or HTML url if Datacite is not enabled.
+    return redirect(release.record_url)
+"""
diff --git a/invenio_vcs/views/vcs.py b/invenio_vcs/views/vcs.py
new file mode 100644
index 00000000..01885d71
--- /dev/null
+++ b/invenio_vcs/views/vcs.py
@@ -0,0 +1,220 @@
+# -*- coding: utf-8 -*-
+# This file is part of Invenio.
+# Copyright (C) 2014-2025 CERN.
+# Copyright (C) 2024 Graz University of Technology.
+# Copyright (C) 2024 KTH Royal Institute of Technology.
+#
+# Invenio is free software; you can redistribute it and/or modify it
+# under the terms of the MIT License; see LICENSE file for more details.
+
+"""VCS views blueprint for Invenio platform."""
+
+from functools import wraps
+
+from flask import Blueprint, abort, current_app, render_template
+from flask_login import current_user, login_required
+from invenio_db import db
+from invenio_i18n import gettext as _
+from sqlalchemy.orm.exc import NoResultFound
+
+from invenio_vcs.service import VCSService
+
+from ..errors import RepositoryAccessError, RepositoryNotFoundError, VCSTokenNotFound
+
+
+def vcs_error_handler():
+    """Common error handling behaviour for VCS routes."""
+
+    def decorator(f):
+        @wraps(f)
+        def inner(*args, **kwargs):
+            try:
+                return f(*args, **kwargs)
+            except RepositoryAccessError:
+                abort(403)
+            except (NoResultFound, RepositoryNotFoundError):
+                abort(404)
+            except Exception as exc:
+                current_app.logger.exception(str(exc))
+                abort(400)
+
+        return inner
+
+    return decorator
+
+
+def require_vcs_connected():
+    """Requests an oauth session token to be configured for the user."""
+
+    def decorator(f):
+        @wraps(f)
+        def inner(*args, **kwargs):
+            provider = kwargs["provider"]
+            svc = VCSService.for_provider_and_user(provider, current_user.id)
+            if svc.is_authenticated:
+                return f(*args, **kwargs)
+            raise VCSTokenNotFound(
+                current_user, _("Account must be connected to the VCS provider.")
+            )
+
+        return inner
+
+    return decorator
+
+
+def create_ui_blueprint(app):
+    """Creates blueprint and registers UI endpoints if the integration is enabled."""
+    blueprint = Blueprint(
+        "invenio_vcs",
+        __name__,
+        static_folder="../static",
+        template_folder="../templates",
+        url_prefix="/account/settings/vcs/<provider>",
+    )
+    with app.app_context():  # Todo: Temporary fix, it should be removed when inveniosoftware/invenio-theme#355 is merged
+        register_ui_routes(blueprint)
+    return blueprint
+
+
+def create_api_blueprint(app):
+    """Creates blueprint and registers API endpoints if the integration is enabled."""
+    blueprint_api = Blueprint(
+        "invenio_vcs_api", __name__, url_prefix="/user/vcs/<provider>"
+    )
+    register_api_routes(blueprint_api)
+    return blueprint_api
+
+
+def register_ui_routes(blueprint):
+    """Register ui routes."""
+
+    @blueprint.route("/")
+    @login_required
+    @vcs_error_handler()
+    def get_repositories(provider):
+        """Display list of the user's repositories."""
+        svc = VCSService.for_provider_and_user(provider, current_user.id)
+        ctx: dict = dict(
+            connected=False,
+            provider=provider,
+            vocabulary=svc.provider.factory.vocabulary,
+            repo_url=svc.provider.factory.url_for_repository,
+            new_repo_url=svc.provider.factory.url_for_new_repo(),
+        )
+
+        if svc.is_authenticated:
+            # Generate the repositories view object
+            repos = svc.list_repositories()
+            last_sync = svc.get_last_sync_time()
+
+            ctx.update(
+                {
+                    "connected": True,
+                    "repos": repos,
+                    "last_sync": last_sync,
+                }
+            )
+
+        return render_template(current_app.config["VCS_TEMPLATE_INDEX"], **ctx)
+
+    @blueprint.route("/repository/<path:repo_id>")
+    @login_required
+    @require_vcs_connected()
+    @vcs_error_handler()
+    def get_repository(provider, repo_id):
+        """Displays one repository.
+
+        Retrieves and builds context to display all repository releases, if any.
+        """
+        svc = VCSService.for_provider_and_user(provider, current_user.id)
+
+        repo = svc.get_repository(repo_id)
+        latest_release = svc.get_repo_latest_release(repo)
+        default_branch = svc.get_repo_default_branch(repo_id)
+        releases = svc.list_repo_releases(repo)
+        release_url = svc.provider.factory.url_for_release
+        new_release_url = svc.provider.factory.url_for_new_release(repo.full_name)
+        new_citation_file_url = svc.provider.factory.url_for_new_file(
+            repo.full_name, default_branch or "main", "CITATION.cff"
+        )
+
+        return render_template(
+            current_app.config["VCS_TEMPLATE_VIEW"],
+            latest_release=latest_release,
+            provider=provider,
+            repo=repo,
+            releases=releases,
+            default_branch=default_branch,
+            release_url=release_url,
+            new_release_url=new_release_url,
+            new_citation_file_url=new_citation_file_url,
+            vocabulary=svc.provider.factory.vocabulary,
+        )
+
+
+def register_api_routes(blueprint):
+    """Register API routes."""
+
+    @login_required
+    @require_vcs_connected()
+    @vcs_error_handler()
+    @blueprint.route("/repositories/sync", methods=["POST"])
+    def sync_user_repositories(provider):
+        """Synchronizes user repos.
+
+        Currently:
+            POST /api/user/vcs/<provider>/repositories/sync
+        Previously:
+            POST /account/settings/github/hook
+        """
+        svc = VCSService.for_provider_and_user(provider, current_user.id)
+        svc.sync(async_hooks=False)
+        db.session.commit()
+
+        return "", 200
+
+    @login_required
+    @require_vcs_connected()
+    @vcs_error_handler()
+    @blueprint.route("/repositories/<repository_id>/enable", methods=["POST"])
+    def enable_repository(provider, repository_id):
+        """Enables one repository.
+
+        Currently:
+            POST /api/user/vcs/<provider>/repositories/<repository_id>/enable
+        Previously:
+            POST /account/settings/github/hook
+        """
+        svc = VCSService.for_provider_and_user(provider, current_user.id)
+        create_success = svc.enable_repository(repository_id)
+
+        db.session.commit()
+        if create_success:
+            return "", 201
+        else:
+            raise Exception(
+                _("Failed to enable repository, hook creation not successful.")
+            )
+
+    @login_required
+    @require_vcs_connected()
+    @vcs_error_handler()
+    @blueprint.route("/repositories/<repository_id>/disable", methods=["POST"])
+    def disable_repository(provider, repository_id):
+        """Disables one repository.
+
+        Currently:
+            POST /api/user/vcs/<provider>/repositories/<repository_id>/disable
+        Previously:
+            DELETE /account/settings/github/hook
+        """
+        svc = VCSService.for_provider_and_user(provider, current_user.id)
+        remove_success = svc.disable_repository(repository_id)
+
+        db.session.commit()
+        if remove_success:
+            return "", 204
+        else:
+            raise Exception(
+                _("Failed to disable repository, hook removal not successful.")
+            )