diff --git a/i18n/locales/en/site.json5 b/i18n/locales/en/site.json5
index f98e8639..fb6f78bb 100644
--- a/i18n/locales/en/site.json5
+++ b/i18n/locales/en/site.json5
@@ -36,5 +36,12 @@
   DEPLOYED: 'App deployed',
   MODULES_BY_ARTIFACT_TYPE: 'Modules by artifact type',
   COMPACT_MODE: 'Compact mode',
-  COMPACT_MODE_NOTE: 'WARNING! Only turn it off if you know what you\'re doing.'
+  COMPACT_MODE_NOTE: 'WARNING! Only turn it off if you know what you\'re doing.',
+  CONFIRM_LOGIN: 'Confirm your login from {0} as ${1}',
+  FILTER: 'Filter',
+  ENTER_CODE: 'Connect code from the bot',
+  CANNOT_BE_EMPTY: 'Cannot be empty',
+  INCORRECT_CODE: 'Incorrect code',
+  HS_COMPENDIUM: 'HSCompendium',
+  TECHNOLOGIES: 'Technologies'
 }
diff --git a/i18n/locales/ru/site.json5 b/i18n/locales/ru/site.json5
index b94460ee..6e6b4436 100644
--- a/i18n/locales/ru/site.json5
+++ b/i18n/locales/ru/site.json5
@@ -36,5 +36,12 @@
   DEPLOYED: 'Приложение развернуто',
   MODULES_BY_ARTIFACT_TYPE: 'Модули по типу артефакта',
   COMPACT_MODE: 'Компактный режим',
-  COMPACT_MODE_NOTE: 'ПРЕДУПРЕЖДЕНИЕ! Отключайте только если знаете что делаете.'
+  COMPACT_MODE_NOTE: 'ПРЕДУПРЕЖДЕНИЕ! Отключайте только если знаете что делаете.',
+  CONFIRM_LOGIN: 'Подтвердите вход из {0} как ${1}',
+  FILTER: 'Фильтр',
+  ENTER_CODE: 'Код подлючепния от бота',
+  CANNOT_BE_EMPTY: 'Не может быть пустым',
+  INCORRECT_CODE: 'Неверный код',
+  HS_COMPENDIUM: 'HSCompendium',
+  TECHNOLOGIES: 'Технологии'
 }
diff --git a/package-lock.json b/package-lock.json
index 072ec734..b513eba4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@vue/compiler-sfc": "^3.3.2",
         "@vueuse/head": "^1.1.26",
         "babel-core": "^7.0.0-bridge.0",
+        "bot_client": "github:mcgoldric/compendium-client",
         "jsoncrush": "^1.1.8",
         "lodash.debounce": "^4.0.8",
         "raw-loader": "^4.0.2",
@@ -5022,6 +5023,14 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bot_client": {
+      "version": "1.0.0",
+      "resolved": "git+ssh://git@github.com/mcgoldric/compendium-client.git#862575f50209a179b71120b6196e504231147f79",
+      "license": "MIT",
+      "dependencies": {
+        "events": "^3.3.0"
+      }
+    },
     "node_modules/boxen": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
diff --git a/package.json b/package.json
index c00a2c16..b57ce1ba 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "postinstall": "(cd parser && npm install && cd ..) && (cd i18n && npm install && cd ..)",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "web-types": "./web-types.json",
   "dependencies": {
     "@aacassandra/vue3-progressbar": "^1.0.3",
     "@intlify/vue-i18n-loader": "^4.2.0",
@@ -22,6 +23,7 @@
     "@vue/compiler-sfc": "^3.3.2",
     "@vueuse/head": "^1.1.26",
     "babel-core": "^7.0.0-bridge.0",
+    "bot_client": "github:mcgoldric/compendium-client",
     "jsoncrush": "^1.1.8",
     "lodash.debounce": "^4.0.8",
     "raw-loader": "^4.0.2",
diff --git a/src/App.vue b/src/App.vue
index d59e923e..93352784 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,9 @@
-<!--suppress HtmlUnknownAttribute -->
-<!--suppress HtmlUnknownTag -->
-
 <template>
   <div>
     <v-head><title>Hades Space</title></v-head>
-    <vue-progress-bar />
 
+    <!--suppress HtmlUnknownTag -->
+    <vue-progress-bar />
 
     <div
       v-touch:swipe="swipeHandler"
@@ -58,6 +56,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, onErrorCaptured, ref, getCurrentInstance } from 'vue';
 import router from '@Utils/Vue/router';
+import { stop as compendiumStop } from '@Utils/compendium';
 
 import { Head as VHead } from '@vueuse/head';
 import GoTop from '@/components/GoTop.vue';
@@ -72,7 +71,7 @@ import appChangelog from '@/composables/appChangelog';
 const MAX_WIDTH = 1000;
 
 const internalInstance = getCurrentInstance();
-const { $Progress } = internalInstance.appContext.config.globalProperties;
+const { $Progress } = internalInstance?.appContext.config.globalProperties; // eslint-disable-line no-unsafe-optional-chaining
 const isMinMode = ref(window.innerWidth < MAX_WIDTH);
 const renderError = ref<Error>();
 
@@ -82,7 +81,10 @@ const { isOpen: changelogIsOpen, onClose: changelogOnClose } = appChangelog();
 $Progress.start();
 
 onMounted(() => window.addEventListener('resize', resize));
-onUnmounted(() => window.removeEventListener('resize', resize));
+onUnmounted(() => {
+    window.removeEventListener('resize', resize);
+    compendiumStop();
+});
 onErrorCaptured((err) => {
     renderError.value = err;
 });
diff --git a/src/components/CompendiumPage.vue b/src/components/CompendiumPage.vue
new file mode 100644
index 00000000..2874e7bb
--- /dev/null
+++ b/src/components/CompendiumPage.vue
@@ -0,0 +1,313 @@
+<template>
+  <div>
+
+    <div class="header">
+      <div class="content">
+        <div
+          v-if="isFetching && !user"
+          class="logged fetching"
+        >
+          <div class="avatar">
+            <img
+              :src="memberImage"
+              alt="memberImage avatar"
+            >
+            <img
+              :src="memberImage"
+              alt="memberImage avatar"
+            >
+          </div>
+          <p />
+        </div>
+        <div
+          v-if="user"
+          class="logged"
+          @click="userProfileClick"
+        >
+          <div class="avatar">
+            <img
+              :src="getDiscordIconUrl(guild.id, guild.icon)"
+              :alt="`${guild.name} icon`"
+              @error="(e) => e.target.src = memberImage"
+            >
+            <img
+              :src="getDiscordAvatarUrl(user.id, user.avatar)"
+              :alt="`${user.username} avatar`"
+              @error="(e) => e.target.src = memberImage"
+            >
+          </div>
+          <p>{{ user.username }}</p>
+        </div>
+        <div
+          v-if="!isFetching && !user"
+          class="not-logged"
+        >
+          <span v-t="'TID_SETTINGS_DLG_NOT_SIGNED_IN'" />
+          <button
+            class="button accent"
+            @click="openCodeReqModal = true"
+          > {{ $t('TID_SETTINGS_DLG_SIGN_IN') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <slot />
+
+    <div class="footer">
+      <div class="content">
+        <p>Powered by <a
+          href="https://hs-compendium.com/"
+          target="_blank"
+        >HS Compendium</a></p>
+      </div>
+    </div>
+
+    <Modal
+      v-model:open="openCodeReqModal"
+      :title="$t('TID_SETTINGS_DLG_SIGN_IN')"
+      :size="SIZES.SMALL"
+    >
+      <template #body>
+        <div class="input">
+          <p class="name">
+            <span v-t="'ENTER_CODE'" />
+            <span class="error-msg">{{ error }}</span>
+          </p>
+          <input v-model="reqCode">
+        </div>
+
+        <div
+          class="code-req-btn-wrap"
+          :class="{'disable': isFetching}"
+        >
+          <button
+            v-t="'TID_LINK_DEVICE_DLG_SUBMIT_CODE_BTN'"
+            class="button accent"
+            @click="applyReqCode"
+          />
+        </div>
+      </template>
+    </Modal>
+
+    <Confirm @setShow="(func) => {userConfirm = func;}" />
+
+  </div>
+</template>
+
+<!--suppress TypeScriptCheckImport -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Identity, User, Guild } from 'bot_client';
+
+import client, { init as clientInit } from '@Utils/compendium';
+import { getDiscordAvatarUrl, getDiscordIconUrl } from '@Utils/getDiscordUrl';
+import memberImage from '@Img/icons/member.png';
+
+import Modal, { SIZES } from '@/components/Modal.vue';
+import Confirm from '@/components/TheConfirm.vue';
+
+
+const REQ_CODE_PATTERN = /[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}/;
+
+const { t } = useI18n();
+const openCodeReqModal = ref(false);
+const reqCode = ref('');
+const error = ref('');
+const isFetching = ref(false);
+const user = ref<User|null>();
+const guild = ref<Guild>();
+
+let userConfirm: (q: string) => Promise<void> = (() => Promise.prototype); // eslint-disable-line prefer-const
+
+onMounted(async () => {
+    isFetching.value = true;
+    await clientInit();
+    const u = client.getUser();
+    isFetching.value = false;
+
+    if (!u) {
+        openCodeReqModal.value = true;
+    } else {
+        user.value = u;
+        guild.value = client.getGuild();
+    }
+});
+
+async function applyReqCode() {
+    let ident: Identity;
+
+    if (!reqCode.value) {
+        error.value = t('CANNOT_BE_EMPTY');
+        return;
+    }
+    if (!REQ_CODE_PATTERN.test(reqCode.value)) {
+        error.value = t('INCORRECT_CODE');
+        return;
+    }
+    isFetching.value = true;
+
+    try {
+        ident = await client.checkConnectCode(reqCode.value);
+    } catch (e) {
+        error.value = e.toString();
+        console.error(e);
+        isFetching.value = false;
+        return;
+    }
+
+    isFetching.value = false;
+    openCodeReqModal.value = false;
+
+    const drop = await userConfirm(t('CONFIRM_LOGIN', [ident.guild.name, ident.user.username]))
+        .catch(() => {
+            openCodeReqModal.value = true;
+            return true;
+        });
+
+    if (!drop) {
+        isFetching.value = true;
+        await client.connect(ident);
+        user.value = client.getUser();
+        guild.value = client.getGuild();
+        isFetching.value = false;
+    }
+}
+function userProfileClick() {
+    userConfirm(t('TID_SETTINGS_DLG_SIGN_OUT'))
+        .then(() => {
+            client.logout();
+            user.value = undefined;
+            guild.value = undefined;
+        })
+        .catch(() => {}); // eslint-disable-line @typescript-eslint/no-empty-function
+}
+</script>
+
+
+<style scoped lang="scss">
+@import "../style/userInput";
+
+.header {
+  margin-top: 1%;
+
+  @media screen and (max-width: 1000px){
+    margin-top: 2%;
+  }
+
+  .content {
+    margin: 0 5%;
+    display: flex;
+    justify-content: end;
+
+    @media screen and (max-width: 1000px){
+      margin: 0 1%;
+    }
+
+    .logged, .not-logged {
+      display: flex;
+      align-items: center;
+      padding: 0.5% 2% 0.5% 18px;
+      min-width: 15%;
+      border-radius: 10px;
+    }
+
+    .fetching {
+      background: linear-gradient(to left, $background, $background-elements 18%, $background);
+      background-size: 40vw;
+      animation: bg-pos-move 5s infinite forwards linear;
+      opacity: .8;
+      pointer-events: none;
+
+      p {
+        border: solid 5px #8a9396;
+        width: 130px;
+        border-radius: 10px;
+      }
+    }
+
+    .logged {
+      border: solid 2px $background-elements;
+
+      &:hover {
+        background-color: $background-elements;
+        cursor: pointer;
+      }
+      .avatar {
+        height: 60px;
+        width: 60px;
+        margin-right: 20px;
+        position: relative;
+
+        img {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+
+          &:before  {
+            content: "";
+            background: url("@Img/icons/member.png") center 100% no-repeat;
+          }
+          &:first-child {
+            bottom: 10%;
+            right: 20%;
+            opacity: .8;
+          }
+          &:last-child {
+            filter: drop-shadow(-5px -5px 4px #000000);
+            width: 90%;
+            height: 90%;
+            top: 20%;
+            left: 30%;
+          }
+        }
+
+        @media screen and (max-width: 900px) {
+          height: 40px;
+          width: 40px;
+        }
+      }
+    }
+    .not-logged {
+      background-color: #b94054;
+      justify-content: space-between;
+      padding-left: 10px;
+
+      span {
+        font-size: 120%;
+        width: max-content;
+        word-break: keep-all;
+      };
+      .button {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+.footer {
+  .content {
+    max-width: max-content;
+    margin: 0 auto;
+
+    p {
+      padding: 10px;
+      text-align: center;
+    }
+  }
+}
+.code-req-btn-wrap {
+  display: flex;
+  justify-content: end;
+}
+.error-msg {
+  font-size: 70%;
+  color: red;
+  margin-left: 10px;
+  font-style: italic;
+}
+
+@keyframes bg-pos-move {
+  to { background-position: 1000% 0; }
+}
+</style>
diff --git a/src/components/CompendiumTechList.vue b/src/components/CompendiumTechList.vue
new file mode 100644
index 00000000..7bc1b596
--- /dev/null
+++ b/src/components/CompendiumTechList.vue
@@ -0,0 +1,161 @@
+<!--suppress TypeScriptValidateTypes, TypeScriptUnresolvedReference -->
+<template>
+  <div>
+    <div class="sections-group other">
+      <section
+        class="type"
+        name="spaceBuildings"
+      >
+        <h3 v-t="'TID_BUILDING_LEVEL_DESCR'" />
+        <ul>
+          <li
+            v-for="(building, buildingName) of spaceBuildings"
+            :key="buildingName"
+            class="item"
+          >
+            <div
+              :class="{'mute': isMuted(building.Name)}"
+              @click="() => onClick(building)"
+            >
+              <Icon
+                :name="building.PrefabModel"
+                dir="game/SpaceBuildings"
+              />
+              <span
+                v-if="levelMap?.[building.Name]"
+                class="level"
+              >
+                {{ levelMap[building.Name] }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </section>
+      <section
+        class="type"
+        name="ships"
+      >
+        <h3 v-t="'TID_PRODUCTION_DLG_SHIPS'" />
+        <ul>
+          <li
+            v-for="(ship, shipName) of ships"
+            :key="shipName"
+            class="item"
+          >
+            <div
+              :class="{'mute': isMuted(ship.Name)}"
+              @click="() => onClick(ship)"
+            >
+              <Icon
+                :name="ship.Name in levelMap ? ship.Model[levelMap[ship.Name] - 1] : ship.Model[4]"
+                dir="game/Ships"
+              />
+              <span
+                v-if="levelMap?.[ship.Name]"
+                class="level"
+              >
+                {{ levelMap[ship.Name] }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </section>
+      <section
+        class="type"
+        name="alliance"
+      >
+        <h3 v-t="'TID_CHAT_TAB_CORPORATION'" />
+        <ul>
+          <li class="item">
+            <div
+              :class="{'mute': isMuted('AllianceLevel')}"
+              @click="() => onClick(alliance)"
+            >
+              <Icon
+                name="corpXp"
+                dir="icons"
+              />
+              <span
+                v-if="levelMap?.['AllianceLevel']"
+                class="level"
+              >
+                {{ levelMap['AllianceLevel'] }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+    <div class="sections-group modules">
+      <section
+        v-for="(type, typeName) of modules"
+        :key="typeName"
+        class="type"
+        name="modules"
+      >
+        <h3> {{ format.key(typeName) }} </h3>
+        <ul>
+          <li
+            v-for="module of type"
+            :key="module.Name"
+            class="item"
+          >
+            <div
+              :class="{'mute': isMuted(module.Name)}"
+              @click="() => onClick(module)"
+            >
+              <Icon
+                :name="module.Icon"
+                dir="game/Modules"
+              />
+              <span
+                v-if="levelMap?.[module.Name]"
+                class="level"
+              >
+                {{ levelMap[module.Name] }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</template>
+
+<!--suppress TypeScriptCheckImport -->
+<script setup lang="ts">
+import shipsData from '@Data/capital_ships.js';
+import spaceBuildingsData from '@Data/spacebuildings.js';
+
+import { getBySlotType } from '@/components/ModulePage.vue';
+import Icon from '@/components/Icon.vue';
+import key from '@Handlers/key';
+import router from '@Utils/Vue/router';
+import value from '@Handlers/value';
+
+export interface Props {
+    levelMap?: Record<string, number>
+    onClick?: (item: object) => void
+    isMuted?: (id: string) => boolean
+}
+
+const MODULES_TYPES_ORDER = ['Trade', 'Mining', 'Weapon', 'Shield', 'Support', 'Drone'];
+
+const spaceBuildings = { RedStarScanner: spaceBuildingsData.RedStarScanner, ShipmentRelay: spaceBuildingsData.ShipmentRelay };
+const ships = { Transport: shipsData.Transport, Miner: shipsData.Miner, Battleship: shipsData.Battleship };
+const alliance = { Name: 'AllianceLevel', TID: 'TID_CORP_TAB_MY_CORP', Icon: 'corpXp', specialIcon: true };
+const modules: {[k: string]: unknown} = Object.fromEntries(MODULES_TYPES_ORDER.map((t) => [t, getBySlotType(t)]));
+
+const format = {
+    key: (k: string) => key(k, router.currentRoute.value.name as string),
+    value: (k: string, v: unknown) => value(k, v, router.currentRoute.value.name as string),
+};
+
+withDefaults(defineProps<Props>(), {
+    levelMap: () => ({}),
+    onClick: () => undefined,
+    isMuted: () => false,
+});
+</script>
+
+<style scoped lang="scss" src="../style/CompendiumTechList.scss" />
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index ab2dafd2..dd189510 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -28,7 +28,6 @@ const TYPES = {
     'game/SpaceBuildings': 'SpaceBuilding',
     'game/Stars': 'Star',
     'game/Distinctions': 'Distinction',
-    'icons': 'specialIcon',
 };
 const DISABLE_BG = ['warpLaneHub'];
 const PERSONAL_BG = {
@@ -40,6 +39,7 @@ const PERSONAL_BG = {
 const props = defineProps<Props>();
 const isCerberus = (props.name.includes('Cerberus'));
 const isProjectiles = (props.name.includes('projectiles/'));
+const isSpecialIcon = (props.dir.includes('icons'));
 const type = TYPES[props.dir] || null;
 const url = getUrl();
 
@@ -54,7 +54,7 @@ const iconClasses = {
     'ship': type === 'Ship',
     'projectiles': isProjectiles,
     'cerberus': isCerberus,
-    'big-size': type == 'Star' || type == 'Distinction' || (type === 'specialIcon' && props.name !== 'art'),
+    'big-size': type == 'Star' || type == 'Distinction' || (isSpecialIcon && props.name !== 'art'),
     'medium-size': type === 'SpaceBuilding',
 };
 const iconStyle = {
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 52b48249..4dccad4a 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -113,97 +113,104 @@ $mv: 1000px;
 $border-color: #aee3fc;
 
 .fixed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 }
 
 .background {
-    background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.6);
 
-    &-enter-active, &-leave-active {
-        transition: background-color 400ms linear;
-    }
+  &-enter-active, &-leave-active {
+    transition: background-color 400ms linear;
+  }
 
-    &-enter-from, &-leave-to {
-        background-color: rgba(0, 0, 0, 0.0);
+  &-enter-from, &-leave-to {
+    background-color: rgba(0, 0, 0, 0.0);
 
-    }
+  }
 }
 
 .content-wrapper {
-    display: flex;
-    justify-content: center;
-    pointer-events: none;
-
-    @media screen and (max-width: 1000px){
-        align-items: center;
-    }
-
-    .content {
-        background: $background;
-        border: $border-color solid 1px;
-        border-radius: 5px;
-        pointer-events: all;
-        height: max-content;
-        width: 90%;
-        margin-top: 5%;
-
-        &.size {
-            &-medium {
-                max-width: 500px;
-                min-height: 50%;
-
-                @media screen and (max-width: 1000px){
-                    min-height: 80%;
-                }
-            }
-            &-small {
-                max-width: 450px;
-            }
-            &-large {
-                min-height: 80%;
-
-                .head {
-                    padding-bottom: 0;
-                }
-            }
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+
+  @media screen and (max-width: 1000px){
+    align-items: center;
+  }
+
+  .content {
+    background: $background;
+    border: $border-color solid 1px;
+    border-radius: 5px;
+    pointer-events: all;
+    width: 90%;
+    height: max-content;
+    margin-top: 5%;
+
+    &.size {
+      &-medium {
+        max-width: 500px;
+        min-height: 50%;
+
+        @media screen and (max-width: 1000px){
+          min-height: 80%;
         }
+      }
+      &-small {
+        max-width: 450px;
+      }
+      &-large {
+        min-height: 80%;
+
 
         .head {
-            padding-bottom: 5%;
-            position: relative;
-
-            .close-button {
-                position: absolute;
-                right: 0;
-                background: url(../img/icons/close.svg) no-repeat;
-                width: 52px;
-                height: 35px;
-                cursor: pointer;
-            }
-            h2 {
-                padding: 15px 52px 0;
-                text-align: center;
-            }
+          padding-bottom: 0;
         }
-
         .body {
-            padding: 5%;
+          height: 60vh;
         }
+      }
     }
 
-    &-enter-active, &-leave-active {
-        transform: scale(1);
-        transition: 700ms ease, transform 350ms
+    .head {
+      padding-bottom: 5%;
+      position: relative;
+
+      .close-button {
+        position: absolute;
+        right: 0;
+        background: url(../img/icons/close.svg) no-repeat;
+        width: 52px;
+        height: 35px;
+        cursor: pointer;
+      }
+      h2 {
+        padding: 15px 52px 0;
+        text-align: center;
+      }
     }
-    &-enter-from, &-leave-to {
-        opacity: 0;
-        transform: scale(0.6);
-        transition: 550ms ease, transform 300ms, opacity 200ms;
+
+    .body {
+      overflow-y: auto;
+      overflow-x: hidden;
+      overscroll-behavior: contain;
+      padding: 5%;
     }
+  }
+
+  &-enter-active, &-leave-active {
+    transform: scale(1);
+    transition: 700ms ease, transform 350ms
+  }
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: scale(0.6);
+    transition: 550ms ease, transform 300ms, opacity 200ms;
+  }
 }
 </style>
diff --git a/src/components/NumberPicker.vue b/src/components/NumberPicker.vue
new file mode 100644
index 00000000..63608126
--- /dev/null
+++ b/src/components/NumberPicker.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="container">
+    <div
+      class="minus"
+      @click="checkAndSend(props.value - 1)"
+    />
+    <div class="input-wrap">
+      <input
+        type="text"
+        :value="value"
+        @change="checkAndSend(parseInt($event.target.value))"
+      >
+    </div>
+    <div
+      class="plus"
+      @click="checkAndSend(props.value + 1)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+    value: number,
+    min: number,
+    max: number,
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:value']);
+
+function checkAndSend(num: number) {
+    if (num < props.min) {
+        num = props.min;
+    }
+    if (num > props.max) {
+        num = props.max;
+    }
+
+    emit('update:value', num);
+}
+</script>
+
+<!--suppress CssUnknownTarget -->
+<style scoped lang="scss">
+@import "../style/vars";
+.input-wrap {
+    max-width: 100%;
+
+    input {
+        width: 100%;
+        font-size: 200%;
+        color: #444;
+        text-align: center;
+        border: none;
+    }
+}
+
+
+.container {
+    display: flex;
+    align-items: center;
+    grid-gap: 10px;
+    max-height: 70px;
+}
+
+.minus, .plus {
+    height: 50px;
+    background: $background-elements;
+    cursor: pointer;
+    border-radius: 10px;
+
+    padding: 10px;
+}
+.minus {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='%23aee3fc' viewBox='0 -12 32 32'%3E%3Cpath d='M28 0H4a4 4 0 1 0 0 8h24a4 4 0 1 0 0-8'/%3E%3C/svg%3E");
+}
+.plus {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill='%23aee3fc' viewBox='0 0 45.402 45.402'%3E%3Cpath d='M41.267 18.557H26.832V4.134A4.127 4.127 0 0 0 22.707 0a4.126 4.126 0 0 0-4.124 4.135v14.432H4.141a4.137 4.137 0 0 0-4.138 4.135 4.143 4.143 0 0 0 1.207 2.934 4.122 4.122 0 0 0 2.92 1.222h14.453V41.27c0 1.142.453 2.176 1.201 2.922a4.11 4.11 0 0 0 2.919 1.211 4.13 4.13 0 0 0 4.129-4.133V26.857h14.435c2.283 0 4.134-1.867 4.133-4.15-.001-2.282-1.852-4.15-4.133-4.15z'/%3E%3C/svg%3E");
+}
+
+</style>
diff --git a/src/components/TheConfirm.vue b/src/components/TheConfirm.vue
index 9c3948b8..d79a6fe0 100644
--- a/src/components/TheConfirm.vue
+++ b/src/components/TheConfirm.vue
@@ -74,6 +74,7 @@ $accent-color: #aee3fc;
     display: flex;
     justify-content: center;
     pointer-events: none;
+    z-index: 1;
 
     @media screen and (max-width: 1000px){
         align-items: center;
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 74308012..ebc5f288 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -22,7 +22,7 @@ import Settings from '@/components/Settings.vue';
 
 export interface Props {
     open: boolean
-    swipeHandler?: () => void
+    swipeHandler?: (direction: string, event: TouchEvent) => void
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/src/img/icons/compendium.png b/src/img/icons/compendium.png
new file mode 100644
index 00000000..96cbc700
Binary files /dev/null and b/src/img/icons/compendium.png differ
diff --git a/src/img/icons/compendium/CompendiumCorp.png b/src/img/icons/compendium/CompendiumCorp.png
new file mode 100644
index 00000000..1e8d4c50
Binary files /dev/null and b/src/img/icons/compendium/CompendiumCorp.png differ
diff --git a/src/img/icons/compendium/afk.png b/src/img/icons/compendium/afk.png
new file mode 100644
index 00000000..b0d4d0a0
Binary files /dev/null and b/src/img/icons/compendium/afk.png differ
diff --git a/src/img/icons/compendium/cargo.png b/src/img/icons/compendium/cargo.png
new file mode 100644
index 00000000..bf72d405
Binary files /dev/null and b/src/img/icons/compendium/cargo.png differ
diff --git a/src/img/icons/compendium/compendium.kra b/src/img/icons/compendium/compendium.kra
new file mode 100644
index 00000000..70f14b4a
Binary files /dev/null and b/src/img/icons/compendium/compendium.kra differ
diff --git a/src/img/icons/compendium/compendiumTech.png b/src/img/icons/compendium/compendiumTech.png
new file mode 100644
index 00000000..5f49274c
Binary files /dev/null and b/src/img/icons/compendium/compendiumTech.png differ
diff --git a/src/img/icons/compendium/time.png b/src/img/icons/compendium/time.png
new file mode 100644
index 00000000..ad59a262
Binary files /dev/null and b/src/img/icons/compendium/time.png differ
diff --git a/src/img/icons/member.png b/src/img/icons/member.png
new file mode 100644
index 00000000..281ca277
Binary files /dev/null and b/src/img/icons/member.png differ
diff --git a/src/pages/CompendiumCorp.vue b/src/pages/CompendiumCorp.vue
new file mode 100644
index 00000000..2b702c81
--- /dev/null
+++ b/src/pages/CompendiumCorp.vue
@@ -0,0 +1,473 @@
+<template>
+  <div>
+    <CompendiumPage>
+      <div class="container">
+        <div
+          class="filter"
+          :class="{'disable': filteredMembers.length > filteredByRoleCache.length}"
+        >
+          <div>
+            <button
+              v-t="'FILTER'"
+              class="btn-tech-filter"
+              @click="openSelectorByTech = true"
+            />
+          </div>
+          <div class="select">
+            <select
+              @change="filterRoleId = $event.target.value"
+            >
+              <option
+                v-for="role in data.roles"
+                :key="role.id"
+                :value="role.id"
+                :selected="filterRoleId == role.id"
+              > {{ role.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <ul
+          class="members-list"
+          :class="{'animated-fetch': isFetching}"
+        >
+          <li
+            v-for="mem in filteredMembers"
+            :key="mem.userId"
+            class="member"
+            @click="memberClick(mem)"
+          >
+            <div class="meta">
+              <div class="avatar">
+                <img
+                  :src="getDiscordAvatarUrl(mem.userId, mem.avatar)"
+                  :alt="`${mem.name} avatar`"
+                  @error="(e) => e.target.src = memberImage"
+                ></div>
+              <p>{{ mem.name }}</p>
+            </div>
+            <div class="sort-tech">
+              <ul>
+                <li
+                  v-for="(elem, k) in getTechForDisplay(mem)"
+                  :key="k"
+                >
+                  <div>
+                    <Icon
+                      :name="elem.icon.name"
+                      :dir="elem.icon.dir"
+                    />
+                    <span
+                      :k="k"
+                      class="level"
+                    >
+                      {{ elem.level }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </CompendiumPage>
+
+    <Modal
+      v-model:open="openSelectorByTech"
+      :title="'Code'"
+      :size="SIZES.LARGE"
+    >
+      <template #body>
+        <div class="modal-filter-tech">
+          <button
+            class="button accent"
+            @click="filterTech.splice(0)"
+          >{{ $t('RESET_ALL') }}</button>
+
+          <div class="sections-group other">
+            <section
+              class="type"
+              name="user-info"
+            >
+              <h3 v-t="'TID_OBJECT_ACTION_PLAYER_INFO'" />
+              <ul>
+                <li
+                  v-for="({icon}, key) of userInfo"
+                  :key="key"
+                  class="item"
+                >
+                  <div
+                    :class="{'mute': isSelectedTechItem(key)}"
+                    @click="() => techItemClick({Name: key})"
+                  >
+                    <Icon
+                      :name="icon.name"
+                      :dir="icon.dir"
+                    />
+                  </div>
+                </li>
+              </ul>
+            </section>
+          </div>
+          <TechList
+            :on-click="techItemClick"
+            :is-muted="isSelectedTechItem"
+          />
+        </div>
+      </template>
+    </Modal>
+
+    <Modal
+      v-model:open="openMemTechList"
+      :title="modalMem.title"
+      :size="SIZES.LARGE"
+    >
+      <template #body>
+        <TechList
+          :level-map="modalMem.lvlMap"
+        />
+      </template>
+    </Modal>
+
+  </div>
+</template>
+
+<!--suppress TypeScriptCheckImport, TypeScriptUnresolvedReference -->
+<script setup lang="ts">
+import { CorpData, CorpMember, getTechIndex } from 'bot_client';
+import { onMounted, reactive, Ref, ref, watch } from 'vue';
+
+import { getDiscordAvatarUrl } from '../utils/getDiscordUrl';
+import client from '../utils/compendium';
+
+import Modal, { SIZES } from '@/components/Modal.vue';
+import Icon from '@/components/Icon.vue';
+import TechList from '@/components/CompendiumTechList.vue';
+import CompendiumPage from '../components/CompendiumPage.vue';
+
+import memberImage from '@Img/icons/member.png';
+import shipsData from '@Data/capital_ships.js';
+import spaceBuildingsData from '@Data/spacebuildings.js';
+import modulesData from '@Data/modules.js';
+import objectArrayify from '../utils/objectArrayify';
+import { getTechFromIndex } from 'bot_client/src/module_types';
+
+const DISPLAY_USER_TECH_ITEMS = 5;
+const MAX_ITEMS_PAGE = 50;
+
+interface UserInfo {
+  [k: string]: {
+    icon: Icon.Props,
+    formatter: (user: CorpMember) => string
+      check: (user: CorpMember) => boolean
+  }
+}
+
+const { hourCycles } = new Intl.Locale(navigator.language);
+const isBrowserLocale24h = hourCycles ? ['h23', 'h24'].some((hourCycle) => hourCycles.includes(hourCycle)) : true;
+
+const userInfo: UserInfo = {
+    LocalTime: {
+        icon: { name: 'time', dir: 'icons/compendium' },
+        check: (user) => user.timeZone,
+        formatter: ({ localTime, localTime24 }) => isBrowserLocale24h ? localTime24 : localTime,
+    },
+    AfkFor: {
+        icon: { name: 'afk', dir: 'icons/compendium' },
+        check: (user) => user.afkFor,
+        formatter: ({ afkFor }) => afkFor,
+    },
+    CargoCap: {
+        icon: { name: 'cargo', dir: 'icons/compendium' },
+        check: ({ tech }) => tech[getTechIndex('Transport')]?.[0] && tech[getTechIndex('TransportCapacity')]?.[0],
+        formatter: ({ tech }) => {
+            const [t] = tech[getTechIndex('Transport')];
+            const [cap] = tech[getTechIndex('TransportCapacity')];
+
+            if (t && cap) {
+                return shipsData.Transport.JobCapacity[t] + modulesData.TransportCapacity.ExtraTradeSlots[cap];
+            }
+            return 0;
+        },
+    },
+} as UserInfo;
+const isFetching = ref(false);
+const openSelectorByTech = ref(false);
+const openMemTechList = ref(false);
+const filterRoleId = ref<string>('');
+const filterTech = reactive<string[]>([]);
+const data: Ref<CorpData> = ref({});
+const filteredMembers: Ref<CorpMember[]> = ref([]);
+const modalMem = reactive({
+    title: '',
+    lvlMap: undefined,
+});
+
+let filteredByRoleCache: CorpMember[] = [];
+
+filteredMembers.value = Array.from({ length: 10 }, (i) => ({ userId: i, name: '', avatarUrl: '' }) as CorpMember);
+
+client.on('connected', () => fetchCorp());
+client.on('disconnected', () => {
+    filteredByRoleCache = [];
+    filteredMembers.value = Array.from({ length: 10 }, (i) => ({ userId: i, name: '', avatarUrl: '' }) as CorpMember);
+    filterRoleId.value = '';
+    filterTech.splice(0);
+});
+onMounted(() => {
+    if (client.getUser()) {
+        fetchCorp();
+    }
+});
+
+watch(filterRoleId, async (value) => {
+    isFetching.value = true;
+    filteredByRoleCache = await client.corpdata(value).then((r) => r.members);
+    filteredMembers.value = filteredByRoleCache;
+    isFetching.value = false;
+    filterByTech(filterTech);
+});
+watch(() => filterTech, filterByTech, { deep: true });
+
+
+async function fetchCorp() {
+    isFetching.value = true;
+    const resp = await client.corpdata();
+
+    data.value = resp;
+    filteredByRoleCache = resp.members;
+    filteredMembers.value = resp.members.slice(0, MAX_ITEMS_PAGE);
+    isFetching.value = false;
+}
+async function techItemClick(item: object) {
+    if (isSelectedTechItem(item.Name)) {
+        filterTech.splice(filterTech.indexOf(item.Name), 1);
+    } else {
+        filterTech.push(item.Name);
+    }
+}
+function isSelectedTechItem(id: string) {
+    return filterTech.includes(id);
+}
+function memberClick(mem: CorpMember) {
+    if (filteredByRoleCache.length) {
+        modalMem.title = mem.name;
+        // noinspection TypeScriptValidateTypes
+        modalMem.lvlMap = objectArrayify(mem.tech, {
+            map: ([k, v]) => [getTechFromIndex(k), v[0]],
+        });
+        openMemTechList.value = true;
+    }
+}
+function filterByTech(value: string[]) {
+    filteredMembers.value = filteredByRoleCache
+        .filter((mem) => {
+            return value.every((fK) => {
+                return mem.tech[getTechIndex(fK)]?.[0] || userInfo[fK]?.check(mem);
+            });
+        })
+        .sort((a, b) => {
+            if (value.length && !(value[0] in userInfo)) {
+                return b.tech[getTechIndex(value[0])][0] - a.tech[getTechIndex(value[0])][0];
+            }
+            if (value[0] == 'CargoCap') {
+                return userInfo.CargoCap.formatter(b) - userInfo.CargoCap.formatter(a);
+            }
+            return 0;
+        })
+        .slice(0, MAX_ITEMS_PAGE);
+}
+function getTechForDisplay(member: CorpMember): Record<string, {level: number|string, icon :Icon.Props}> {
+    if (!filterTech.length) {
+        return {};
+    }
+    const result = {};
+
+    const levels = Object.fromEntries(
+        filterTech
+            .map((k) => {
+                if (k in userInfo) {
+                    return [k, userInfo[k].formatter(member)];
+                }
+                return [k, member.tech[getTechIndex(k)][0]];
+            })
+            .sort(([, a], [, b]) => b - a)
+            .slice(0, DISPLAY_USER_TECH_ITEMS),
+    );
+
+    // eslint-disable-next-line guard-for-in
+    for (const key in levels) {
+        const val = result[key] = {
+            icon: { dir: '', name: '' } as Icon.Props,
+            level: levels[key],
+        };
+
+        if (key in modulesData) {
+            val.icon.dir = 'game/Modules';
+            val.icon.name = modulesData[key].Icon;
+        } else if (key in shipsData) {
+            val.icon.dir = 'game/Ships';
+            val.icon.name = shipsData[key].Model[5]; // eslint-disable-line prefer-destructuring
+        } else if (key in userInfo) {
+            val.icon = userInfo[key].icon;
+        } else {
+            val.icon.dir = 'game/SpaceBuildings';
+            val.icon.name = spaceBuildingsData[key].PrefabModel;
+        }
+    }
+    return result;
+}
+</script>
+
+<style scoped lang="scss">
+@import "../style/vars";
+@import "../style/userInput";
+@import "../style/CompendiumTechList";
+
+.container {
+  max-width: 680px;
+  margin: 2% auto 0;
+}
+
+.modal-filter-tech {
+  .button {
+    margin-bottom: 1%;
+
+    @media screen and (max-width: 600px){
+      font-size: 70%;
+    }
+  }
+  :deep(.other) {
+    section[name="alliance"] {
+      display: none;
+    }
+  }
+  :deep(.item .mute) {
+    border: solid 2px #a8ddfd;
+    padding: 2px;
+    border-radius: 10px;
+  }
+}
+
+.filter {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 2%;
+  gap: 5%;
+
+
+  .btn-tech-filter {
+    font-size: 130%;
+    background-color: $background-elements;
+    border-color: $border-color;
+    border-style: solid;
+    border-radius: 5px;
+    padding: 5px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #32474d;
+    }
+  }
+}
+
+.members-list {
+  margin-top: 2%;
+  padding: 0 2%;
+
+  .member {
+    list-style: none;
+    background-color: $background-elements;
+    margin: 1% 0;
+    padding: 2%;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #27353a;
+    }
+
+    .meta {
+      display: flex;
+      align-items: center;
+      flex: 2;
+
+      p {
+        margin-left: 15px;
+      }
+
+      .avatar {
+        width: 40px;
+        height: 40px;
+
+        img {
+          width: 100%;
+
+          &:before  {
+            width: 100%;
+            height: 100%;
+            content: "";
+            background: url("@Img/icons/member.png") center 100% no-repeat;
+          }
+        }
+      }
+    }
+
+    .sort-tech ul {
+      flex: 3;
+      display: flex;
+      justify-content: center;
+
+      li {
+        list-style: none;
+        width: 50px;
+        margin: 0 5px;
+        cursor: pointer;
+        position: relative;
+
+        @media screen and (max-width: 960px){
+          width: 30px;
+        }
+        @media screen and (max-width: 350px){
+          width: 25px;
+        }
+
+        .level {
+          position: absolute;
+          top: 60%;
+          right: 0;
+          font-size: 80%;
+          width: 15px;
+          height: 15px;
+          background-color: $border-color;
+          color: $background;
+          text-align: center;
+          border-radius: 5px;
+          padding-top: 2px;
+        }
+
+        & [k="LocalTime"] {
+          width: 36px;
+          right: -8px;
+        }
+      }
+    }
+  }
+}
+
+.animated-fetch {
+  .member {
+    background: linear-gradient(to left, $background, $background-elements 18%, $background);
+    background-size: 50vw;
+    animation: bg-pos-move 10s infinite forwards linear;
+    opacity: .8;
+    pointer-events: none;
+  }
+}
+
+@keyframes bg-pos-move {
+  to { background-position: 1000% 0; }
+}
+</style>
diff --git a/src/pages/CompendiumTech.vue b/src/pages/CompendiumTech.vue
new file mode 100644
index 00000000..2b342b31
--- /dev/null
+++ b/src/pages/CompendiumTech.vue
@@ -0,0 +1,219 @@
+<template>
+  <CompendiumPage>
+    <div>
+
+      <div class="container">
+        <CompendiumTechList
+          :on-click="openTechInfo"
+          :is-muted="isMuted"
+          :level-map="levelMap"
+        />
+      </div>
+
+      <modal
+        v-model:open="openModal"
+        v-bind="modalOpts"
+      >
+        <template #body>
+          <div class="modal">
+            <div class="title">
+              <div>
+                <!--suppress TypeScriptUnresolvedReference -->
+                <h2>{{ $t(modalOpts.data.value.TID) }}</h2>
+                <div />
+              </div>
+              <ModalIcon />
+            </div>
+            <span v-t="'CURRENT_LVL'" />
+            <div class="level-picker">
+              <NumberPicker
+                :value="getDataByKey(modalOpts.data.key)?.level || 0"
+                :min="modalOpts.data.minLevel"
+                :max="modalOpts.data.maxLevel"
+                @update:value="onChangeLvl"
+              />
+            </div>
+          </div>
+        </template>
+      </modal>
+
+    </div>
+  </CompendiumPage>
+</template>
+
+<!--suppress TypeScriptCheckImport, TypeScriptUnresolvedReference -->
+<script setup lang="ts">
+import { ref, reactive, h, VNode, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getTechIndex, TechLevels } from 'bot_client';
+import client from '../utils/compendium';
+import debounce from 'lodash.debounce';
+
+import Icon from '@/components/Icon.vue';
+import Modal, { SIZES } from '@/components/Modal.vue';
+import CompendiumPage from '../components/CompendiumPage.vue';
+import CompendiumTechList from '../components/CompendiumTechList.vue';
+import NumberPicker from '../components/NumberPicker.vue';
+
+import globals from '@Data/globals.js';
+import shipsData from '@Data/capital_ships.js';
+import allianceData from '@Data/alliance_levels.js';
+import spaceBuildingsData from '@Data/spacebuildings.js';
+import modulesData from '@Data/modules.js';
+import objectArrayify from '../utils/objectArrayify';
+import { getTechFromIndex } from 'bot_client/src/module_types';
+
+declare type SetTechLevel = (techId: number, level: number) => Promise<void>;
+
+const spaceBuildings = { RedStarScanner: spaceBuildingsData.RedStarScanner, ShipmentRelay: spaceBuildingsData.ShipmentRelay };
+const ships = { Transport: shipsData.Transport, Miner: shipsData.Miner, Battleship: shipsData.Battleship };
+const { MaxModuleLevel } = globals;
+
+spaceBuildings.RedStarScanner.Cost.shift(); // tut lvl
+
+const maxLvl: Record<string, number> = Object.fromEntries([
+    ...Object.entries(spaceBuildings).map(([k, v]) => [k, v.Cost.length]),
+    ...Object.entries(ships).map(([k, v]) => [k, v.BuildCost.length]),
+    ...Object.keys(modulesData).map((k) => [k, MaxModuleLevel]),
+    ['AllianceLevel', allianceData.XPRequired.length],
+]);
+const minLvl: Record<string, number> = Object.fromEntries([
+    ...Object.keys(spaceBuildings).map((k) => [k, 0]),
+    ...Object.keys(ships).map((k) => [k, 0]),
+    ...Object.entries(modulesData).map(([k, v]) => [k, getModulesMinLvl(v as object)]),
+    ['AllianceLevel', 0],
+]);
+
+const setTechLevel: SetTechLevel = debounce((...args) => client.setTechLevel(...args), 500);
+const { t } = useI18n();
+const openModal = ref(false);
+const data = ref<TechLevels>(null);
+const levelMap = ref<Record<string, number>>({});
+const modalOpts = reactive({
+    size: SIZES.SMALL,
+    title: t('TID_TECH_DLG_TITLE'),
+    data: {
+        value: {},
+        maxLevel: 0,
+        minLevel: 0,
+        get key() {
+            return this.value.Name;
+        },
+    },
+});
+
+onMounted(() => {
+    if (client.getUser()) {
+        data.value = client.getTechLevels();
+    }
+});
+
+watch(data, (value) => {
+    if (value) {
+        levelMap.value = objectArrayify(value, {
+            map: ([i, v]) => [getTechFromIndex(i as number), v.level],
+        });
+    }
+}, { deep: true });
+
+client.on('sync', (tl: TechLevels) => data.value = tl);
+client.on('connected', () => data.value = client.getTechLevels());
+client.on('disconnected', () => {
+    data.value = undefined;
+    levelMap.value = undefined;
+});
+
+function openTechInfo(value: object) {
+    if (data.value) {
+        modalOpts.data.value = value;
+        modalOpts.data.maxLevel = maxLvl[value.Name];
+        modalOpts.data.minLevel = minLvl[value.Name];
+        openModal.value = true;
+    }
+}
+function isMuted(key: string): boolean {
+    return !getDataByKey(key)?.level;
+}
+function onChangeLvl(value: number): number {
+    const i = getTechIndex(modalOpts.data.key);
+
+    if (!data.value[i]) {
+        data.value[i] = { level: 0 };
+    }
+    if (modalOpts.data.minLevel != 0 && value == modalOpts.data.minLevel && data.value[i].level != 0) {
+        value = 0;
+    }
+    if (data.value[i].level != value) {
+        data.value[i].level = value;
+        setTechLevel(i, value);
+    }
+    return value;
+}
+function getModulesMinLvl(module: object): number {
+    let maxLength = 1;
+
+    for (const [, value] of Object.entries(module)) {
+        if (Array.isArray(value) && value.length > maxLength) {
+            maxLength = value.length;
+        }
+    }
+    return MaxModuleLevel - maxLength + 1;
+}
+function getDataByKey(key: string): object|null {
+    return data.value?.[getTechIndex(key)] || null;
+}
+function ModalIcon(): VNode {
+    const m = modalOpts.data.value;
+
+    if (m.Icon) {
+        return h(Icon, { name: m.Icon, dir: m.specialIcon ? 'icons' : 'game/Modules' });
+    }
+    if (m.Model) {
+        return h(Icon, { name: m.Model[(getDataByKey(m.Name)?.level - 1) || 5], dir: 'game/Ships' });
+    }
+    if (m.PrefabModel) {
+        return h(Icon, { name: m.PrefabModel, dir: 'game/SpaceBuildings' });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@use "sass:map";
+@use "sass:color";
+
+@import "../style/page";
+@import "../style/vars";
+@import "../style/calculator";
+@import "../style/userInput";
+
+$actually-color: #92cee5;
+$plan-color: #ded45a;
+
+.container {
+  margin-top: 1%;
+}
+
+.modal {
+  min-height: 500px;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 6%;
+
+    > div:first-child {
+      flex: 3;
+    }
+    > div:last-child {
+      width: 25%;
+      flex: 1;
+      margin-left: 5%;
+    }
+  }
+  .level-picker {
+    padding-top: 5%;
+    width: 70%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/regulation/compendiumIDs.js b/src/regulation/compendiumIDs.js
new file mode 100644
index 00000000..2f7a69f0
--- /dev/null
+++ b/src/regulation/compendiumIDs.js
@@ -0,0 +1,77 @@
+export default {
+    RedStarScanner: 701,
+    ShipmentRelay: 702,
+
+    AllianceLevel: 801,
+
+    Transport: 103,
+    Miner: 102,
+    Battleship: 101,
+
+    TransportCapacity: 401,
+    ShipmentComputer: 402,
+    RemoteRepair: 405,
+    Rush: 404,
+    Stealth: 608,
+    TradeBurst: 405,
+    ShipmentDrone: 406,
+    RedStarExtender: 603,
+    RelicDrone: 412,
+    Dispatch: 411,
+    CargoRocket: 0,
+
+    MiningBoost: 501,
+    HydroReplicator: 502,
+    ArtifactBoost: 506,
+    MassMining: 504,
+    Genesis: 508,
+    Enrich: 503,
+    Crunch: 507,
+    HydrogenUpload: 505,
+    HydroRocket: 510,
+    BlastDrone: 509,
+
+    Laser: 203,
+    MassBattery: 204,
+    Battery: 202,
+    DualLaser: 205,
+    Barrage: 206,
+    DartLauncher: 207,
+    ChainRay: 0,
+    PlayerRocketLauncher: 0,
+    Pulse: 0,
+
+    AlphaShield: 301,
+    ImpulseShield: 302,
+    PassiveShield: 303,
+    OmegaShield: 304,
+    BlastShield: 306,
+    MirrorShield: 305,
+    AreaShield: 307,
+    MotionShield: 0,
+
+    EMP: 601,
+    Solitude: 606,
+    Fortify: 609,
+    Teleport: 602,
+    DamageAmplifier: 605,
+    Destiny: 614,
+    Barrier: 615,
+    Vengeance: 616,
+    DeltaRocket: 617,
+    Leap: 618,
+    Bond: 619,
+    Suspend: 622,
+    OmegaRocket: 621,
+    RemoteBomb: 623,
+
+    DecoyDrone: 612,
+    RepairDrone: 604,
+    RocketDrone: 611,
+    LaserTurret: 0,
+    ChainRayDrone: 620,
+    DeltaDrones: 0,
+    DroneSquad: 0,
+};
+
+
diff --git a/src/regulation/pages.js b/src/regulation/pages.js
index 152d5b96..1bed5be9 100644
--- a/src/regulation/pages.js
+++ b/src/regulation/pages.js
@@ -160,6 +160,31 @@ export default [
             },
         ],
     },
+    {
+        text: { locKey: 'HS_COMPENDIUM' },
+        children: [
+            {
+                name: 'CompendiumTech',
+                text: { locKey: 'TECHNOLOGIES' },
+                path: '/compendiumTech',
+                component: () => import(/* webpackChunkName: "CompendiumTech" */ '../pages/CompendiumTech.vue'),
+                icon: {
+                    name: 'compendiumTech',
+                    dir: 'icons/compendium',
+                },
+            },
+            {
+                name: 'CompendiumCorp',
+                text: { locKey: 'TID_CHAT_TAB_CORPORATION' },
+                path: '/compendiumCorp',
+                component: () => import(/* webpackChunkName: "CompendiumCorp" */ '../pages/CompendiumCorp.vue'),
+                icon: {
+                    name: 'CompendiumCorp',
+                    dir: 'icons/compendium',
+                },
+            },
+        ],
+    },
     {
         text: { locKey: 'STARS' },
         children: [
diff --git a/src/style/CompendiumTechList.scss b/src/style/CompendiumTechList.scss
new file mode 100644
index 00000000..785ce7c9
--- /dev/null
+++ b/src/style/CompendiumTechList.scss
@@ -0,0 +1,92 @@
+@import "../style/vars";
+
+.sections-group {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-content: space-between;
+  background: #131a1c;
+  padding: 1%;
+  border-radius: 10px;
+  margin-right: auto;
+  margin-left: auto;
+  margin-bottom: 2%;
+
+  max-height: 850px;
+  max-width: 1500px;
+  --icon-size: 90px;
+
+  @media screen and (max-width: 1800px){
+    --icon-size: 80px;
+  }
+  @media screen and (max-width: 1600px){
+    --icon-size: 75px;
+  }
+  @media screen and (max-width: 1500px){
+    --icon-size: 70px;
+    max-height: 1000px;
+    max-width: 920px;
+  }
+  @media screen and (max-width: 730px){
+    max-height: none;
+    max-width: 420px;
+  }
+  @media screen and (max-width: 420px){
+    --icon-size: 50px;
+    max-width: 290px;
+  }
+
+  .type {
+    width: calc((var(--icon-size) + 24px)  * 4);
+    margin-bottom: 1%;
+
+    h3 {
+      margin-bottom: 4%;
+    }
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        list-style: none;
+        width: var(--icon-size);
+        margin: 12px;
+        cursor: pointer;
+        position: relative;
+
+        @media screen and (max-width: 960px){
+          margin: 6px;
+        }
+
+        .mute {
+          opacity: .6;
+        }
+
+        .level {
+          position: absolute;
+          top: 70%;
+          right: 0;
+          font-size: 130%;
+          width: 30px;
+          height: 28px;
+          background-color: $border-color;
+          color: $background;
+          text-align: center;
+          border-radius: 5px;
+          padding-top: 2px;
+
+          @media screen and (max-width: 960px){
+            font-size: 100%;
+            width: 20px;
+            height: 20px;
+            top: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+
+.other {
+  flex-direction: row;
+}
\ No newline at end of file
diff --git a/src/style/userInput.scss b/src/style/userInput.scss
index a6ea551c..f5f3544b 100644
--- a/src/style/userInput.scss
+++ b/src/style/userInput.scss
@@ -6,11 +6,18 @@ $button-colors: (
     "green": #5ca109,
     "yellow": #cca814,
     "red": #a90000,
+    "accent": $accent-color,
 );
 
+.disable {
+  opacity: .4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 
 .select {
-  margin-bottom: 7%;
+  //margin-bottom: 7%;
 
   .name {
     font-size: 120%;
@@ -111,9 +118,10 @@ $button-colors: (
   font-size: 100%;
   transition: all 0.3s;
   position: relative;
-  border: none;
   z-index: 0;
   min-width: 70px;
+  border-radius: 10px;
+  border: solid 0;
 
   &:after {
     content: '';
@@ -123,6 +131,7 @@ $button-colors: (
     width: 100%;
     height: 100%;
     z-index: -3;
+    border-radius: 10px;
   }
 
   &:before {
@@ -134,6 +143,7 @@ $button-colors: (
     height: 100%;
     transition: all 0.3s;
     z-index: -2;
+    border-radius: 10px;
   }
 
   &:hover:before {
@@ -142,6 +152,9 @@ $button-colors: (
 
   @each $name, $color in $button-colors {
     &.#{$name} {
+      @if($name == 'accent') {
+        color: black;
+      }
       &:after {
         background-color: $color
       }
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 3a550160..03ed4f5b 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -1,2 +1,3 @@
 declare module '@aacassandra/vue3-progressbar'
 declare module '*.md'
+declare module 'events'
diff --git a/src/utils/compendium.ts b/src/utils/compendium.ts
new file mode 100644
index 00000000..3ddc1014
--- /dev/null
+++ b/src/utils/compendium.ts
@@ -0,0 +1,17 @@
+import { Compendium } from 'bot_client';
+
+const client = new Compendium();
+let initialized = false;
+
+export default client;
+
+export async function init() {
+    if (!initialized) {
+        await client.initialize();
+        initialized = true;
+    }
+}
+
+export function stop() {
+    client.shutdown();
+}
diff --git a/src/utils/getDiscordUrl.ts b/src/utils/getDiscordUrl.ts
new file mode 100644
index 00000000..79ae7104
--- /dev/null
+++ b/src/utils/getDiscordUrl.ts
@@ -0,0 +1,15 @@
+const ENDPOINT = 'https://cdn.discordapp.com/';
+
+
+export function getDiscordAvatarUrl(userId: string, avatarHash: string, size = 80): URL {
+    const url = new URL(`avatars/${userId}/${avatarHash}.webp`, ENDPOINT);
+
+    url.searchParams.set('size', String(size));
+    return url;
+}
+export function getDiscordIconUrl(guildId: string, iconHash: string, size = 96): URL {
+    const url = new URL(`icons/${guildId}/${iconHash}.webp`, ENDPOINT);
+
+    url.searchParams.set('size', String(size));
+    return url;
+}
diff --git a/web-types.json b/web-types.json
new file mode 100644
index 00000000..559dda05
--- /dev/null
+++ b/web-types.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "HadesSpace",
+  "framework": "vue",
+  "version": "1.0.0",
+  "contributions": {
+    "html": {
+      "vue-directives": [
+        {
+          "name": "t",
+          "description": "vue-i18n package"
+        }
+      ]
+    }
+  }
+}