diff --git a/context_processors/utils.py b/context_processors/utils.py
index 4de1afce65..791c4eedfe 100644
--- a/context_processors/utils.py
+++ b/context_processors/utils.py
@@ -229,6 +229,7 @@ def menu(request):
                     "access": ["Счет: проект, Счет: закрытие"],
                 },
                 {"url": "/ui/utils", "title": "Инструменты", "nt": False, "access": ["Инструменты"]},
+                {"url": "/ui/document-viewer", "title": "Документы", "nt": False, "access": ["Документооборот: просмотр документов"]},
             ]
 
             hp = SettingManager.get(key="home_page", default="false")
diff --git a/l2-frontend/src/fields/RadioFieldById.vue b/l2-frontend/src/fields/RadioFieldById.vue
index 512a440eb8..3526d76528 100644
--- a/l2-frontend/src/fields/RadioFieldById.vue
+++ b/l2-frontend/src/fields/RadioFieldById.vue
@@ -1,10 +1,14 @@
 <template>
-  <div class="base">
+  <div
+    class="base"
+    :class="{ 'auto-height': autoHeight }"
+  >
     <a
       v-for="v in variants"
       :key="v.id"
       href="#"
       :class="{ active: v.id === val, disabled, rounded }"
+      :style="`flex: 1 1 ${itemWidth}; height: ${itemHeight}`"
       @click.prevent="changeValue(v.id)"
     >
       <span>
@@ -36,6 +40,18 @@ export default {
       default: false,
       type: Boolean,
     },
+    itemWidth: {
+      required: false,
+      type: String,
+    },
+    itemHeight: {
+      required: false,
+      type: String,
+    },
+    autoHeight: {
+      required: false,
+      type: Boolean,
+    },
   },
   data() {
     return {
@@ -92,6 +108,10 @@ export default {
   overflow-y: auto;
   width: 100%;
 
+  &.auto-height {
+    height: auto;
+  }
+
   a {
     align-self: stretch;
     display: flex;
diff --git a/l2-frontend/src/mainWithRouter.ts b/l2-frontend/src/mainWithRouter.ts
index fecf294533..87576d75eb 100644
--- a/l2-frontend/src/mainWithRouter.ts
+++ b/l2-frontend/src/mainWithRouter.ts
@@ -760,6 +760,16 @@ const router = new Router({
         groups: ['Счет: проект'],
       },
     },
+    {
+      path: '/ui/document-viewer',
+      name: 'Billing',
+      component: () => import('@/pages/DocumentManagement/DocumentViewer.vue'),
+      meta: {
+        title: 'Документы',
+        fullPageLayout: true,
+        groups: ['Документооборот: просмотр документов'],
+      },
+    },
     {
       path: '/ui/construct/related-tube/:id',
       name: 'construct-related-tube',
diff --git a/l2-frontend/src/pages/DocumentManagement/DocumentViewer.vue b/l2-frontend/src/pages/DocumentManagement/DocumentViewer.vue
new file mode 100644
index 0000000000..d7d3cce48e
--- /dev/null
+++ b/l2-frontend/src/pages/DocumentManagement/DocumentViewer.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="two-col">
+    <div class="sidebar">
+      <DocumentsExplorer />
+    </div>
+    <div class="viewer">
+      <h4>Просмотрщик</h4>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import DocumentsExplorer from '@/pages/DocumentManagement/DocumentsExplorer.vue';
+
+</script>
+
+<style scoped lang="scss">
+.two-col {
+  display: grid;
+  grid-template-columns: minmax(200px, 380px) minmax(150px, auto);
+  height: calc(100vh - 36px);
+}
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  background-color: #f8f7f7;
+  border-right: 1px solid #b1b1b1;
+
+  .form-control {
+    border-radius: 0;
+    padding-left: 10px;
+  }
+}
+
+</style>
diff --git a/l2-frontend/src/pages/DocumentManagement/DocumentsExplorer.vue b/l2-frontend/src/pages/DocumentManagement/DocumentsExplorer.vue
new file mode 100644
index 0000000000..1e436374fa
--- /dev/null
+++ b/l2-frontend/src/pages/DocumentManagement/DocumentsExplorer.vue
@@ -0,0 +1,214 @@
+<template>
+  <div>
+    <div class="flex">
+      <input
+        class="form-control"
+        placeholder="Номер документа"
+      >
+      <button class="btn btn-blue-nb nbr">
+        Найти
+      </button>
+    </div>
+    <div class="flex row-border">
+      <RadioFieldById
+        :variants="filterButtons"
+        item-width="33%"
+        item-height="25px"
+        :auto-height="true"
+      />
+    </div>
+    <div>
+      <div class="flex">
+        <span
+          class="group-button-header"
+        >
+          Группы
+        </span>
+      </div>
+      <div class="scroll">
+        <div
+          v-for="group in documentGroups"
+          :key="group.id"
+          class="flex row-border"
+        >
+          <button
+            class="transparent-button"
+            :class="{ 'active-button': selectedGroup === group.id}"
+            @click="selectGroup(group.id)"
+          >
+            {{ group.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="flex">
+        <span
+          class="group-button-header"
+        >
+          Виды
+        </span>
+      </div>
+      <div class="scroll">
+        <div
+          v-for="type in documentTypes"
+          :key="type.id"
+          class="flex row-border"
+        >
+          <button
+            class="transparent-button"
+            :class="{ 'active-button': selectedType === type.id}"
+            @click="selectType(type.id)"
+          >
+            {{ type.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="flex">
+        <span class="group-button-header">
+          Документы
+        </span>
+      </div>
+      <div class="scroll-doc">
+        <div
+          v-for="document in documents"
+          :key="document.id"
+          class="flex row-border"
+        >
+          <button
+            class="transparent-button"
+            :class="{ 'active-button': selectedDocument === document.id}"
+            @click="selectDocument(document.id)"
+          >
+            {{ document.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+} from 'vue';
+
+import RadioFieldById from '@/fields/RadioFieldById.vue';
+
+// import { useStore } from '@/store';
+// import * as actions from '@/store/action-types';
+// import api from '@/api';
+const filterButtons = ref([
+  { id: 'my', label: 'Мои' },
+  { id: 'wrote', label: 'Отписал' },
+  { id: 'onControl', label: 'На контроле' },
+  { id: 'toBeAgreed', label: 'На согласовании' },
+  { id: 'onSignature', label: 'На подписи' },
+]);
+
+const selectedGroup = ref(null);
+const documentGroups = ref([
+  { id: 1, label: 'Группа доков 1' },
+  { id: 2, label: 'Группа доков 2' },
+  { id: 3, label: 'Группа доков 3' },
+  { id: 4, label: 'Группа доков 4' },
+  { id: 5, label: 'Группа доков 5' },
+  { id: 6, label: 'Группа доков 6' },
+  { id: 7, label: 'Группа доков 7' },
+]);
+
+const selectGroup = (groupId: number) => {
+  selectedGroup.value = groupId;
+};
+
+const selectedType = ref(null);
+const documentTypes = ref([
+  { id: 1, label: 'Тип дока 1' },
+  { id: 2, label: 'Тип дока 2' },
+  { id: 3, label: 'Тип дока 3' },
+  { id: 4, label: 'Тип дока 4' },
+  { id: 5, label: 'Тип дока 5' },
+  { id: 6, label: 'Тип дока 6' },
+  { id: 7, label: 'Тип дока 7' },
+]);
+
+const selectType = (typeId: number) => {
+  selectedType.value = typeId;
+};
+
+const selectedDocument = ref(null);
+const documents = ref([
+  { id: 1, label: 'Документ 1' },
+  { id: 2, label: 'Документ 2' },
+  { id: 3, label: 'Документ 3' },
+  { id: 4, label: 'Документ 4' },
+  { id: 5, label: 'Документ 5' },
+  { id: 6, label: 'Документ 6' },
+  { id: 7, label: 'Документ 7' },
+  { id: 8, label: 'Документ 8' },
+  { id: 9, label: 'Документ 9' },
+  { id: 10, label: 'Документ 10' },
+  { id: 11, label: 'Документ 11' },
+]);
+
+const selectDocument = (documentId: number) => {
+  selectedDocument.value = documentId;
+};
+
+</script>
+
+<style scoped lang="scss">
+
+.flex {
+  display: flex;
+}
+.row-border {
+  border-bottom: 1px solid #b1b1b1;
+}
+.row-border:nth-child(1) {
+  border-top: 1px solid #b1b1b1;
+}
+
+.group-button-header {
+  background-color: #ededed;
+  flex: 1;
+  align-self: flex-start;
+  border: none;
+  padding: 1px 5px 1px 10px;
+  text-align: left;
+  cursor: default;
+}
+
+.transparent-button {
+  background-color: transparent;
+  align-self: stretch;
+  color: #434A54;
+  flex: 1;
+  border: none;
+  padding: 1px 5px 1px 10px;
+  text-align: left;
+}
+.transparent-button:hover {
+  background-color: #434a54;
+  color: #FFFFFF;
+  border: none;
+}
+.transparent-button:active {
+  background-color: #37BC9B;
+  color: #FFFFFF;
+}
+.active-button {
+  background-color: #049372;
+  color: #FFFFFF;
+}
+.scroll {
+  height: 139px;
+  overflow-y: auto;
+}
+.scroll-doc {
+  height: calc(100vh - 465px);
+  overflow-y: auto;
+}
+</style>