diff --git a/packages/web/src/appobj/ArchiveFileAppObject.svelte b/packages/web/src/appobj/ArchiveFileAppObject.svelte
new file mode 100644
index 000000000..9031f0a24
--- /dev/null
+++ b/packages/web/src/appobj/ArchiveFileAppObject.svelte
@@ -0,0 +1,74 @@
+<script lang="ts" context="module">
+  function openArchive(fileName, folderName) {
+    openNewTab({
+      title: fileName,
+      icon: 'img archive',
+      tooltip: `${folderName}\n${fileName}`,
+      tabComponent: 'ArchiveFileTab',
+      props: {
+        archiveFile: fileName,
+        archiveFolder: folderName,
+      },
+    });
+  }
+
+  export const extractKey = data => data.fileName;
+  export const createMatcher = ({ fileName }) => filter => filterName(filter, fileName);
+</script>
+
+<script lang="ts">
+  import { filterName } from 'dbgate-datalib';
+
+  import { currentArchive } from '../stores';
+
+  import axiosInstance from '../utility/axiosInstance';
+  import openNewTab from '../utility/openNewTab';
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+
+  const handleDelete = () => {
+    axiosInstance.post('archive/delete-file', { file: data.fileName, folder: data.folderName });
+  };
+  const handleOpenRead = () => {
+    openArchive(data.fileName, data.folderName);
+  };
+  const handleOpenWrite = () => {
+    openNewTab({
+      title: data.fileName,
+      icon: 'img archive',
+      tabComponent: 'FreeTableTab',
+      props: {
+        initialArgs: {
+          functionName: 'archiveReader',
+          props: {
+            fileName: data.fileName,
+            folderName: data.folderName,
+          },
+        },
+        archiveFile: data.fileName,
+        archiveFolder: data.folderName,
+      },
+    });
+  };
+  const handleClick = () => {
+    openArchive(data.fileName, data.folderName);
+  };
+
+  function createMenu() {
+    return [
+      { text: 'Open (readonly)', onClick: handleOpenRead },
+      { text: 'Open in free table editor', onClick: handleOpenWrite },
+      { text: 'Delete', onClick: handleDelete },
+    ];
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.fileName}
+  icon="img archive"
+  menu={createMenu}
+  on:click={handleClick}
+/>
diff --git a/packages/web/src/appobj/ArchiveFolderAppObject.svelte b/packages/web/src/appobj/ArchiveFolderAppObject.svelte
new file mode 100644
index 000000000..2bb03331f
--- /dev/null
+++ b/packages/web/src/appobj/ArchiveFolderAppObject.svelte
@@ -0,0 +1,33 @@
+<script lang="ts" context="module">
+  export const extractKey = data => data.name;
+  export const createMatcher = data => filter => filterName(filter, data.name);
+</script>
+
+<script lang="ts">
+  import { filterName } from 'dbgate-datalib';
+
+  import { currentArchive } from '../stores';
+
+  import axiosInstance from '../utility/axiosInstance';
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+
+  const handleDelete = () => {
+    axiosInstance.post('archive/delete-folder', { folder: data.name });
+  };
+
+  function createMenu() {
+    return [data.name != 'default' && { text: 'Delete', onClick: handleDelete }];
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.name}
+  icon="img archive-folder"
+  isBold={data.name == $currentArchive}
+  on:click={() => ($currentArchive = data.name)}
+  menu={createMenu}
+/>
diff --git a/packages/web/src/utility/metadataLoaders.ts b/packages/web/src/utility/metadataLoaders.ts
index d071a27a3..57d16c144 100644
--- a/packages/web/src/utility/metadataLoaders.ts
+++ b/packages/web/src/utility/metadataLoaders.ts
@@ -348,10 +348,10 @@ export function useArchiveFiles(args) {
   return useCore(archiveFilesLoader, args);
 }
 
-export function getArchiveFolders(args) {
+export function getArchiveFolders(args={}) {
   return getCore(archiveFoldersLoader, args);
 }
-export function useArchiveFolders(args) {
+export function useArchiveFolders(args={}) {
   return useCore(archiveFoldersLoader, args);
 }
 
diff --git a/packages/web/src/widgets/ArchiveFilesList.svelte b/packages/web/src/widgets/ArchiveFilesList.svelte
new file mode 100644
index 000000000..aee0e0ffa
--- /dev/null
+++ b/packages/web/src/widgets/ArchiveFilesList.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as archiveFileAppObject from '../appobj/ArchiveFileAppObject.svelte';
+
+  import InlineButton from '../elements/InlineButton.svelte';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import { currentArchive } from '../stores';
+  import axiosInstance from '../utility/axiosInstance';
+  import { useArchiveFiles, useArchiveFolders } from '../utility/metadataLoaders';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  let filter = '';
+
+  $: folder = $currentArchive;
+  $: files = useArchiveFiles({ folder });
+
+  const handleRefreshFiles = () => {
+    axiosInstance.post('archive/refresh-files', { folder });
+  };
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search archive files" bind:value={filter} />
+  <InlineButton on:click={handleRefreshFiles}>Refresh</InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <AppObjectList
+    list={($files || []).map(file => ({
+      fileName: file.name,
+      folderName: folder,
+    }))}
+    module={archiveFileAppObject}
+    {filter}
+  />
+</WidgetsInnerContainer>
diff --git a/packages/web/src/widgets/ArchiveFolderList.svelte b/packages/web/src/widgets/ArchiveFolderList.svelte
new file mode 100644
index 000000000..a4d06931f
--- /dev/null
+++ b/packages/web/src/widgets/ArchiveFolderList.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as archiveFolderAppObject from '../appobj/ArchiveFolderAppObject.svelte';
+
+  import InlineButton from '../elements/InlineButton.svelte';
+
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import axiosInstance from '../utility/axiosInstance';
+  import { useArchiveFolders } from '../utility/metadataLoaders';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+
+  let filter = '';
+
+  $: folders = useArchiveFolders();
+
+  const handleRefreshFolders = () => {
+    axiosInstance.post('archive/refresh-folders', {});
+  };
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search archive folders" bind:value={filter} />
+  <InlineButton on:click={handleRefreshFolders}>Refresh</InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <AppObjectList list={_.sortBy($folders, 'name')} module={archiveFolderAppObject} {filter} />
+</WidgetsInnerContainer>
diff --git a/packages/web/src/widgets/ArchiveWidget.svelte b/packages/web/src/widgets/ArchiveWidget.svelte
new file mode 100644
index 000000000..72e6d51fd
--- /dev/null
+++ b/packages/web/src/widgets/ArchiveWidget.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ArchiveFilesList from './ArchiveFilesList.svelte';
+
+  import ArchiveFolderList from './ArchiveFolderList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Archive folders" name="folders" height="50%">
+    <ArchiveFolderList />
+  </WidgetColumnBarItem>
+  <WidgetColumnBarItem title="Archive files" name="files">
+    <ArchiveFilesList />
+  </WidgetColumnBarItem>
+</WidgetColumnBar>
diff --git a/packages/web/src/widgets/WidgetContainer.svelte b/packages/web/src/widgets/WidgetContainer.svelte
index 813de1984..10195543d 100644
--- a/packages/web/src/widgets/WidgetContainer.svelte
+++ b/packages/web/src/widgets/WidgetContainer.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { selectedWidget } from '../stores';
+  import ArchiveWidget from './ArchiveWidget.svelte';
   import DatabaseWidget from './DatabaseWidget.svelte';
   import FilesWidget from './FilesWidget.svelte';
-
-
 </script>
 
 {#if $selectedWidget == 'database'}
@@ -12,3 +11,6 @@
 {#if $selectedWidget == 'file'}
   <FilesWidget />
 {/if}
+{#if $selectedWidget == 'archive'}
+  <ArchiveWidget />
+{/if}