diff --git a/web-app/packages/admin-app/package.json b/web-app/packages/admin-app/package.json
index b7b59ccb..f4c897cb 100644
--- a/web-app/packages/admin-app/package.json
+++ b/web-app/packages/admin-app/package.json
@@ -22,7 +22,6 @@
     "@tabler/icons-webfont": "^2.42.0",
     "axios": "^0.28.1",
     "lodash": "^4.17.21",
-    "material-icons": "^0.2.3",
     "pinia": "^2.1.7",
     "primeflex": "^3.3.1",
     "primevue": "3.43.0",
diff --git a/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue b/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue
index c01bf6e4..d151c0fd 100644
--- a/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue
+++ b/web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue
@@ -24,6 +24,12 @@ const sidebarItems = computed<SideBarItemModel[]>(() => [
     to: '/projects',
     icon: 'ti ti-article',
     active: route.matched.some((item) => item.name === AdminRoutes.PROJECTS)
+  },
+  {
+    title: 'Settings',
+    to: '/settings',
+    icon: 'ti ti-settings',
+    active: route.matched.some((item) => item.name === AdminRoutes.SETTINGS)
   }
 ])
 </script>
diff --git a/web-app/packages/admin-app/src/router.ts b/web-app/packages/admin-app/src/router.ts
index 38049626..32035f5f 100644
--- a/web-app/packages/admin-app/src/router.ts
+++ b/web-app/packages/admin-app/src/router.ts
@@ -5,11 +5,9 @@
 import {
   AccountsView,
   AccountDetailView,
-  //   SettingsView,
-  //   ProjectSettingsView,
+  SettingsView,
   ProjectsView,
   ProjectView,
-  //   LoginView,
   //   useAdminStore
   AdminRoutes
 } from '@mergin/admin-lib'
@@ -95,7 +93,7 @@ export const createRouter = (pinia: Pinia) => {
           header: AppHeader
         },
         props: true
-      }
+      },
 
       //   redirect: { name: 'project-tree' },
       //   children: [
@@ -178,12 +176,16 @@ export const createRouter = (pinia: Pinia) => {
       //     }
       //   ]
       // },
-      // {
-      //   path: '/settings',
-      //   name: 'settings',
-      //   component: SettingsView,
-      //   props: true
-      // }
+      {
+        path: '/settings',
+        name: AdminRoutes.SETTINGS,
+        components: {
+          default: SettingsView,
+          sidebar: Sidebar,
+          header: AppHeader
+        },
+        props: true
+      }
     ]
   })
 
diff --git a/web-app/packages/admin-lib/src/modules/admin/adminApi.ts b/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
index e9569e10..a7d25bc6 100644
--- a/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/adminApi.ts
@@ -58,7 +58,7 @@ export const AdminApi = {
     )
   },
 
-  async getServerVersion(): Promise<
+  async getLatestServerVersion(): Promise<
     AxiosResponse<LatestServerVersionResponse>
   > {
     return AdminModule.httpService.get('/v1/latest-version')
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue b/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
index 3992fb06..82bd31ea 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue
@@ -45,6 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           @sort="onSort"
           @row-click="rowClick"
           data-cy="projects-table"
+          :row-class="(data) => (data.removed_at ? 'opacity-80' : '')"
         >
           <template v-for="header in headers" :key="header.field">
             <PColumn
@@ -273,6 +274,8 @@ export default defineComponent({
     },
 
     rowClick(event: DataTableRowClickEvent) {
+      if (event.data.removed_at) return
+
       this.$router.push({
         name: AdminRoutes.PROJECT,
         params: {
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue b/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue
index 9edb465f..9cf4cbf4 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue
@@ -5,9 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <app-container
-    v-if="adminStore.displayUpdateAvailable && adminStore.info_url"
-  >
+  <app-container v-if="adminStore.displayUpdateAvailable">
     <app-section-banner>
       <template #title>Update available 🎉!</template>
       <template #description
@@ -26,22 +24,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts" setup>
-import { useInstanceStore, AppSectionBanner, AppContainer } from '@mergin/lib'
+import { AppSectionBanner, AppContainer } from '@mergin/lib'
+import { onMounted } from 'vue'
 
 import { useAdminStore } from '@/modules/admin/store'
 
-const instanceStore = useInstanceStore()
 const adminStore = useAdminStore()
 
-adminStore.getCheckUpdateFromCookies()
-adminStore.checkVersions({
-  major: instanceStore.configData?.major,
-  minor: instanceStore.configData?.minor,
-  fix: instanceStore.configData?.fix ?? null
+onMounted(async () => {
+  await adminStore.checkVersions()
 })
 
 function openUpdateUrl() {
-  window.open(adminStore.info_url, '_blank')
+  window.open(adminStore.latestServerVersion?.info_url, '_blank')
 }
 </script>
 
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdatesCard.vue b/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdatesCard.vue
deleted file mode 100644
index 3bfafb45..00000000
--- a/web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdatesCard.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <v-card class="mt-6 pa-4">
-    <div class="flex-row justify-space-between" style="display: flex">
-      <div class="flex-column" style="max-width: 70%">
-        <h3 class="black--text">Check for updates</h3>
-        <div>
-          Let Mergin Maps automatically check for new updates to ensure you can
-          always use the latest features
-        </div>
-      </div>
-      <v-switch
-        color="secondary"
-        v-model="checkUpdates"
-        hide-details
-        inset
-        @change="onChangeSwitch"
-      ></v-switch>
-    </div>
-  </v-card>
-</template>
-
-<script lang="ts">
-import { mapActions, mapState } from 'pinia'
-import { defineComponent } from 'vue'
-
-import { useAdminStore } from '@/modules/admin/store'
-
-export default defineComponent({
-  name: 'CheckForUpdatesCard',
-  computed: {
-    ...mapState(useAdminStore, ['checkForUpdates'])
-  },
-  data() {
-    return {
-      checkUpdates: true
-    }
-  },
-  watch: {
-    checkForUpdates: {
-      immediate: true,
-      async handler(value) {
-        this.checkUpdates = value === undefined ? true : value
-      }
-    }
-  },
-  methods: {
-    ...mapActions(useAdminStore, ['setCheckUpdatesToCookies']),
-    onChangeSwitch(value) {
-      this.setCheckUpdatesToCookies({ value })
-    }
-  }
-})
-</script>
-
-<style scoped></style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/UsageInformationCard.vue b/web-app/packages/admin-lib/src/modules/admin/components/UsageInformationCard.vue
deleted file mode 100644
index 2e2c819c..00000000
--- a/web-app/packages/admin-lib/src/modules/admin/components/UsageInformationCard.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <v-card class="mt-6 pa-4">
-    <div class="flex-row justify-space-between" style="display: flex">
-      <div class="flex-column" style="max-width: 70%">
-        <h3 class="black--text">Anonymous data collection</h3>
-        <div>
-          Mergin Maps collects anonymous usage information to make the service
-          better overtime. You can opt-out anytime.
-          <a class="black--text" :href="docsLinkMerginCe" target="_blank">
-            Click here to learn more.
-          </a>
-        </div>
-      </div>
-      <v-switch
-        color="secondary"
-        v-model="usageStatus"
-        disabled
-        hide-details
-        inset
-      ></v-switch>
-    </div>
-  </v-card>
-</template>
-
-<script lang="ts">
-import { useInstanceStore } from '@mergin/lib'
-import { mapState } from 'pinia'
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'UsageInformationCard',
-  computed: {
-    ...mapState(useInstanceStore, ['configData']),
-    usageStatus() {
-      return this.configData?.collect_statistics
-    },
-    docsLinkMerginCe(): string {
-      return `${this.configData?.docs_url ?? ''}/dev/mergince/`
-    }
-  }
-})
-</script>
-
-<style scoped></style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/components/index.ts b/web-app/packages/admin-lib/src/modules/admin/components/index.ts
index ac6e1f5c..f831d33a 100644
--- a/web-app/packages/admin-lib/src/modules/admin/components/index.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/components/index.ts
@@ -4,9 +4,7 @@
 
 export { default as AdminLayout } from './AdminLayout.vue'
 export { default as CheckForUpdates } from './CheckForUpdates.vue'
-export { default as CheckForUpdatesCard } from './CheckForUpdatesCard.vue'
 export { default as CreateUserForm } from './CreateUserForm.vue'
 export { default as ServerNotConfigured } from './ServerNotConfigured.vue'
-export { default as UsageInformationCard } from './UsageInformationCard.vue'
 export { default as AdminProjectsTable } from './AdminProjectsTable.vue'
 export { default as AccountsTable } from './AccountsTable.vue'
diff --git a/web-app/packages/admin-lib/src/modules/admin/routes.ts b/web-app/packages/admin-lib/src/modules/admin/routes.ts
index 0485b9fc..5692a42c 100644
--- a/web-app/packages/admin-lib/src/modules/admin/routes.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/routes.ts
@@ -8,7 +8,8 @@ export enum AdminRoutes {
   ACCOUNTS = 'accounts',
   ACCOUNT = 'account',
   PROJECTS = 'projects',
-  PROJECT = 'project'
+  PROJECT = 'project',
+  SETTINGS = 'settings'
 }
 
 export const getRoutes = (): RouteRecord[] => []
diff --git a/web-app/packages/admin-lib/src/modules/admin/store.ts b/web-app/packages/admin-lib/src/modules/admin/store.ts
index b8d74bfd..272bf19c 100644
--- a/web-app/packages/admin-lib/src/modules/admin/store.ts
+++ b/web-app/packages/admin-lib/src/modules/admin/store.ts
@@ -16,7 +16,9 @@ import { defineStore, getActivePinia } from 'pinia'
 import Cookies from 'universal-cookie'
 import { AdminApi } from '@/modules/admin/adminApi'
 import {
+  LatestServerVersionResponse,
   PaginatedAdminProjectsParams,
+  PaginatedAdminProjectsResponse,
   UpdateUserPayload,
   UsersResponse
 } from '@/modules/admin/types'
@@ -29,14 +31,14 @@ export interface AdminState {
     count: number
   }
   projects: {
-    items: any[]
+    items: PaginatedAdminProjectsResponse[]
     count: number
     loading: boolean
   }
   user?: UserResponse
   checkForUpdates?: boolean
-  info_url?: string
   isServerConfigHidden: boolean
+  latestServerVersion?: LatestServerVersionResponse
 }
 
 const cookies = new Cookies()
@@ -56,16 +58,44 @@ export const useAdminStore = defineStore('adminModule', {
     },
     user: null,
     checkForUpdates: undefined,
-    info_url: undefined,
-    isServerConfigHidden: false
+    isServerConfigHidden: false,
+    latestServerVersion: undefined
   }),
-
   getters: {
     displayUpdateAvailable: (state) => {
-      return !!state.checkForUpdates
+      if (!state.checkForUpdates) {
+        return false
+      }
+
+      const instanceStore = useInstanceStore()
+      const config = instanceStore.configData
+
+      if (!state.latestServerVersion || !config) {
+        return false
+      }
+
+      const { major, minor, fix } = state.latestServerVersion
+
+      if (
+        (config.major || config.major === 0) &&
+        (config.minor || config.minor === 0)
+      ) {
+        if (major > config.major) {
+          return true
+        } else if (major === config.major) {
+          if (minor > config.minor) {
+            return true
+          } else if (minor === config.minor) {
+            if (fix > config.fix) {
+              return true
+            }
+          }
+        }
+      }
+
+      return false
     }
   },
-
   actions: {
     setLoading(value) {
       this.loading = value
@@ -76,9 +106,6 @@ export const useAdminStore = defineStore('adminModule', {
     setCheckForUpdates(value) {
       this.checkForUpdates = value
     },
-    setInfoUrl(value: string) {
-      this.info_url = value
-    },
     setIsServerConfigHidden(value: boolean) {
       this.isServerConfigHidden = value
     },
@@ -167,31 +194,22 @@ export const useAdminStore = defineStore('adminModule', {
       }
     },
 
-    async checkVersions(payload) {
+    async getLatestServerVersion() {
+      const notificationStore = useNotificationStore()
       try {
-        const response = await AdminApi.getServerVersion()
-        const { major, minor, fix } = response.data
-        // compare payload - major, minor and fix version from config with latest-version from server
-        if (
-          (payload.major || payload.major === 0) &&
-          (payload.minor || payload.minor === 0)
-        ) {
-          let isUpdate = false
-          if (major > payload.major) {
-            isUpdate = true
-          } else if (major === payload.major) {
-            if (minor > payload.minor) {
-              isUpdate = true
-            } else if (minor === payload.minor) {
-              if (fix > payload.fix) {
-                isUpdate = true
-              }
-            }
-          }
-          if (isUpdate) {
-            this.setInfoUrl(response.data.info_url)
-          }
-        }
+        const response = await AdminApi.getLatestServerVersion()
+        this.latestServerVersion = response.data
+      } catch (e) {
+        notificationStore.error({ text: errorUtils.getErrorMessage(e) })
+      }
+    },
+
+    async checkVersions() {
+      try {
+        await this.getCheckUpdateFromCookies()
+        if (!this.checkForUpdates) return
+
+        await this.getLatestServerVersion()
       } catch (e) {
         console.error(e)
       }
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
index ca5a0339..f013e6fa 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/AccountDetailView.vue
@@ -48,7 +48,7 @@
             >
               <dt class="paragraph-p6 opacity-80 mb-2">Full name</dt>
               <dd class="font-semibold" data-cy="profile-name">
-                {{ profile.name || '-' }}
+                {{ profile?.name || '-' }}
               </dd>
             </div>
             <div class="col-6 flex flex-column align-items-end">
@@ -64,73 +64,28 @@
     <app-container>
       <app-section>
         <template #title>Advanced</template>
-        <div class="flex flex-column row-gap-3 paragraph-p5 px-4 pb-4">
-          <div
-            :class="[
-              'flex flex-column align-items-start',
-              'row-gap-2',
-              'md:align-items-center md:flex-row'
-            ]"
-          >
-            <div class="flex-grow-1">
-              <p class="title-t3">Receive notifications</p>
-              <span class="paragraph-p6 opacity-80">
-                <template v-if="profile?.receive_notifications"
-                  >User has enabled receiving notifications</template
-                >
-                <template v-else>User has disabled notifications.</template>
-              </span>
-            </div>
+
+        <app-settings :items="settingsItems">
+          <template #notifications>
             <div class="flex-shrink-0 paragraph-p1">
-              <i v-if="profile.receive_notifications" class="ti ti-check" />
+              <i v-if="profile?.receive_notifications" class="ti ti-check" />
               <i v-else class="ti ti-x" />
             </div>
-          </div>
-
-          <div
-            :class="[
-              'flex flex-column align-items-start',
-              'row-gap-2',
-              'md:align-items-center md:flex-row'
-            ]"
-          >
-            <div class="flex-grow-1">
-              <p class="title-t3">Access to admin panel</p>
-              <span class="paragraph-p6 opacity-80">
-                Enabling this option will provide access to the admin panel.
-              </span>
-            </div>
-            <div
-              class="flex align-items-center flex-shrink-0"
-              data-cy="profile-notification"
-            >
-              <PInputSwitch
-                :modelValue="user?.is_admin"
-                @change="switchAdminAccess"
-              />
-            </div>
-          </div>
-
-          <div
-            :class="[
-              'flex flex-column align-items-start',
-              'row-gap-2',
-              'md:align-items-center md:flex-row'
-            ]"
-          >
-            <div class="flex-grow-1">
-              <p class="title-t3">Account activation</p>
-              <span class="paragraph-p6 opacity-80">
-                <template v-if="user?.active">
-                  The user's account is currently active. Deactivation will lead
-                  to a temporary ban from Mergin Maps usage.
-                </template>
-                <template v-else>
-                  The user's account is currently inactive. Activating it will
-                  allow access to Mergin Maps.
-                </template>
-              </span>
+          </template>
+          <template #adminAccess>
+            <div class="flex-shrink-0 paragraph-p1">
+              <div
+                class="flex align-items-center flex-shrink-0"
+                data-cy="profile-notification"
+              >
+                <PInputSwitch
+                  :modelValue="user?.is_admin"
+                  @change="switchAdminAccess"
+                />
+              </div>
             </div>
+          </template>
+          <template #accountActivation>
             <div class="flex-shrink-0">
               <PButton
                 @click="changeStatusDialog"
@@ -141,21 +96,8 @@
                 class="w-auto mr-1"
               />
             </div>
-          </div>
-          <div
-            :class="[
-              'flex flex-column align-items-start',
-              'row-gap-2',
-              'md:align-items-center md:flex-row'
-            ]"
-          >
-            <div class="flex-grow-1">
-              <p class="title-t3">Delete account</p>
-              <span class="paragraph-p6 opacity-80"
-                >Deleting this user will remove them and all their data. This
-                action cannot be undone.</span
-              >
-            </div>
+          </template>
+          <template #deleteAccount>
             <div class="flex-shrink-0">
               <PButton
                 @click="confirmDeleteUser"
@@ -164,8 +106,8 @@
                 label="Delete account"
               />
             </div>
-          </div>
-        </div>
+          </template>
+        </app-settings>
       </app-section>
     </app-container>
   </admin-layout>
@@ -177,7 +119,9 @@ import {
   useDialogStore,
   AppSection,
   AppContainer,
-  ConfirmDialogProps
+  ConfirmDialogProps,
+  AppSettings,
+  AppSettingsItemConfig
 } from '@mergin/lib'
 import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
@@ -189,6 +133,34 @@ const route = useRoute()
 const adminStore = useAdminStore()
 const dialogStore = useDialogStore()
 
+const settingsItems = computed<AppSettingsItemConfig[]>(() => [
+  {
+    key: 'notifications',
+    title: 'Receive notifications',
+    description: profile?.value?.receive_notifications
+      ? 'User has enabled receiving notifications'
+      : 'User has disabled notifications.'
+  },
+  {
+    key: 'adminAccess',
+    title: 'Access to admin panel',
+    description: 'Enabling this option will provide access to the admin panel.'
+  },
+  {
+    key: 'accountActivation',
+    title: 'Account activation',
+    description: user?.value?.active
+      ? "The user's account is currently active. Deactivation will lead to a temporary ban from Mergin Maps usage."
+      : "The user's account is currently inactive. Activating it will allow access to Mergin Maps."
+  },
+  {
+    key: 'deleteAccount',
+    title: 'Delete account',
+    description:
+      'Deleting this user will remove them and all their data. This action cannot be undone.'
+  }
+])
+
 const user = computed(() => adminStore.user)
 const profile = computed(() => adminStore.user?.profile)
 const routeUsername = computed(() => route?.params?.username)
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
index 37fbc44a..9a60e9d8 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/ProjectView.vue
@@ -20,13 +20,13 @@
             <div>
               <dt class="paragraph-p6 opacity-80">Created</dt>
               <dd class="font-semibold" data-cy="project-owner">
-                {{ $filters.date(project?.created) }}
+                {{ $filters.datetime(project?.created) }}
               </dd>
             </div>
             <div>
               <dt class="paragraph-p6 opacity-80">Updated</dt>
               <dd class="font-semibold" data-cy="project-created">
-                {{ $filters.date(project?.updated) }}
+                {{ $filters.datetime(project?.updated) }}
               </dd>
             </div>
             <div>
@@ -43,49 +43,14 @@
     <app-container>
       <app-section>
         <template #title>Advanced</template>
-        <div class="flex flex-column row-gap-3 paragraph-p5 px-4 pb-4">
-          <div
-            :class="[
-              'flex flex-column align-items-start',
-              'row-gap-2',
-              'md:align-items-center md:flex-row'
-            ]"
-          >
-            <div class="flex-grow-1">
-              <template v-if="project?.access?.public">
-                <p class="title-t3">Public project</p>
-                <span class="paragraph-p6 opacity-80"
-                  >The project will be visible to everyone if it is marked as
-                  public.</span
-                >
-              </template>
-              <template v-else>
-                <p class="title-t3">This is private project</p>
-                <span class="paragraph-p6 opacity-80"
-                  >Make this project visible to anyone.</span
-                >
-              </template>
-            </div>
-            <div class="flex-shrink-0">
+        <app-settings :items="settingsItems">
+          <template #publicProject>
+            <div class="flex-shrink-0 paragraph-p1">
               <i v-if="project?.access?.public" class="ti ti-check" />
               <i v-else class="ti ti-x" />
             </div>
-          </div>
-
-          <div
-            :class="[
-              'flex flex-column align-items-start',
-              'row-gap-2',
-              'md:align-items-center md:flex-row'
-            ]"
-          >
-            <div class="flex-grow-1">
-              <p class="title-t3">Delete project</p>
-              <span class="paragraph-p6 opacity-80"
-                >Deleting this project will remove it and all its data. This
-                action cannot be undone.</span
-              >
-            </div>
+          </template>
+          <template #deleteProject>
             <div class="flex-shrink-0">
               <PButton
                 @click="confirmDelete"
@@ -94,8 +59,8 @@
                 label="Delete project"
               />
             </div>
-          </div>
-        </div>
+          </template>
+        </app-settings>
       </app-section>
     </app-container>
   </admin-layout>
@@ -108,7 +73,9 @@ import {
   AppSection,
   AppContainer,
   ConfirmDialogProps,
-  useProjectStore
+  useProjectStore,
+  AppSettingsItemConfig,
+  AppSettings
 } from '@mergin/lib'
 import { computed, watch, defineProps } from 'vue'
 import { useRoute } from 'vue-router'
@@ -126,6 +93,20 @@ defineProps<{
   namespace: string
 }>()
 
+const settingsItems = computed<AppSettingsItemConfig[]>(() => [
+  {
+    key: 'publicProject',
+    title: 'Public project',
+    description:
+      'The project will be visible to everyone if it is marked as public.'
+  },
+  {
+    key: 'deleteProject',
+    title: 'Delete project',
+    description:
+      'Deleting this project will remove it and all its data. This action cannot be undone.'
+  }
+])
 const project = computed(() => projectStore.project)
 const routeProjectName = computed(() => route?.params?.projectName as string)
 const routeWorkspaceName = computed(() => route?.params?.namespace as string)
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/SettingsView.vue b/web-app/packages/admin-lib/src/modules/admin/views/SettingsView.vue
index d5959366..ff79e782 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/SettingsView.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/SettingsView.vue
@@ -6,26 +6,54 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <settings-view-template>
-    <usage-information-card />
-    <check-for-updates-card />
+    <app-settings-item v-for="item in settingsItems" :key="item.key">
+      <template #title>{{ item.title }}</template>
+      <template #description
+        >{{ item.description
+        }}<template v-if="item.key === 'usageInformation'">
+          Click
+          <a
+            class="font-semibold text-color-forest"
+            :href="instanceStore.configData?.docs_url"
+            target="_blank"
+            >here</a
+          >
+          for more information.</template
+        ></template
+      >
+      <template #action>
+        <div class="flex-shrink-0 paragraph-p1">
+          <i
+            v-if="instanceStore.configData?.collect_statistics"
+            class="ti ti-check"
+          />
+          <i v-else class="ti ti-x" />
+        </div>
+      </template>
+    </app-settings-item>
   </settings-view-template>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import {
+  AppSettingsItemConfig,
+  useInstanceStore,
+  AppSettingsItem
+} from '@mergin/lib'
+import { ref } from 'vue'
 
-import CheckForUpdatesCard from '@/modules/admin/components/CheckForUpdatesCard.vue'
-import UsageInformationCard from '@/modules/admin/components/UsageInformationCard.vue'
 import SettingsViewTemplate from '@/modules/admin/views/SettingsViewTemplate.vue'
 
-export default defineComponent({
-  name: 'SettingsView',
-  components: {
-    CheckForUpdatesCard,
-    SettingsViewTemplate,
-    UsageInformationCard
+const instanceStore = useInstanceStore()
+
+const settingsItems = ref<AppSettingsItemConfig[]>([
+  {
+    title: 'Collect statistics',
+    description:
+      'Help us improve Mergin Maps by sharing usage information. Mergin Maps collects anonymous usage information to make the service better overtime. You can opt-out anytime.',
+    key: 'usageInformation'
   }
-})
+])
 </script>
 
 <style scoped></style>
diff --git a/web-app/packages/admin-lib/src/modules/admin/views/SettingsViewTemplate.vue b/web-app/packages/admin-lib/src/modules/admin/views/SettingsViewTemplate.vue
index fdbc6e1e..ee4880c7 100644
--- a/web-app/packages/admin-lib/src/modules/admin/views/SettingsViewTemplate.vue
+++ b/web-app/packages/admin-lib/src/modules/admin/views/SettingsViewTemplate.vue
@@ -6,21 +6,56 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <admin-layout>
-    <slot />
+    <app-container>
+      <app-section ground>
+        <template #header><h1 class="headline-h3">Settings</h1></template>
+      </app-section>
+    </app-container>
+
+    <app-container>
+      <app-section>
+        <template #title>Advanced</template>
+        <app-settings :items="settingsItems">
+          <slot />
+          <template #checkForUpdates
+            ><PInputSwitch
+              :modelValue="adminStore.checkForUpdates"
+              @change="switchCheckForUpdates"
+          /></template>
+        </app-settings>
+      </app-section>
+    </app-container>
   </admin-layout>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import {
+  AppContainer,
+  AppSection,
+  AppSettings,
+  AppSettingsItemConfig
+} from '@mergin/lib'
+
+import { useAdminStore } from '../store'
 
 import AdminLayout from '@/modules/admin/components/AdminLayout.vue'
 
-export default defineComponent({
-  name: 'SettingsViewTemplate',
-  components: {
-    AdminLayout
-  }
+withDefaults(defineProps<{ settingsItems?: AppSettingsItemConfig[] }>(), {
+  settingsItems: () => [
+    {
+      title: 'Check for updates',
+      description: 'Let Mergin Maps automatically check for new updates',
+      key: 'checkForUpdates'
+    }
+  ]
 })
+
+const adminStore = useAdminStore()
+
+function switchCheckForUpdates() {
+  const value = !adminStore.checkForUpdates
+  adminStore.setCheckUpdatesToCookies({ value })
+}
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index fe13acfc..be31a2b8 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -34,6 +34,11 @@ label {
   line-height: 2;
 }
 
+.p-float-label label {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 /** Primevue overrides */
 
 // Customization of infinite border of tabs using classes instead pt because, we want to have access to variables
diff --git a/web-app/packages/lib/src/common/components/app-settings/AppSettings.vue b/web-app/packages/lib/src/common/components/app-settings/AppSettings.vue
new file mode 100644
index 00000000..4627492d
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/app-settings/AppSettings.vue
@@ -0,0 +1,33 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+<template>
+  <div class="flex flex-column row-gap-3 px-4 pb-4">
+    <app-settings-item v-for="(item, index) in items" :key="index">
+      <template #title>{{ item.title }}</template>
+      <template #description>{{ item.description }}</template>
+      <template #action>
+        <slot :name="item.key" :item="item"></slot>
+      </template>
+    </app-settings-item>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+import AppSettingsItem from './AppSettingsItem.vue'
+import { AppSettingsItemConfig } from './types'
+
+withDefaults(
+  defineProps<{
+    items?: AppSettingsItemConfig[]
+  }>(),
+  {
+    items: () => []
+  }
+)
+</script>
diff --git a/web-app/packages/lib/src/common/components/app-settings/AppSettingsItem.vue b/web-app/packages/lib/src/common/components/app-settings/AppSettingsItem.vue
new file mode 100644
index 00000000..5c5c6128
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/app-settings/AppSettingsItem.vue
@@ -0,0 +1,28 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+<template>
+  <div
+    :class="[
+      'flex flex-column align-items-start',
+      'row-gap-2',
+      'md:align-items-center md:flex-row'
+    ]"
+  >
+    <div class="flex-grow-1">
+      <p class="title-t3">
+        <slot name="title"></slot>
+      </p>
+      <span class="paragraph-p6 opacity-80">
+        <slot name="description"></slot>
+      </span>
+    </div>
+    <slot name="action"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No props or additional logic needed
+</script>
diff --git a/web-app/packages/lib/src/common/components/app-settings/index.ts b/web-app/packages/lib/src/common/components/app-settings/index.ts
new file mode 100644
index 00000000..e1b438e4
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/app-settings/index.ts
@@ -0,0 +1,7 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+export { default as AppSettings } from './AppSettings.vue'
+export { default as AppSettingsItem } from './AppSettingsItem.vue'
+export * from './types'
diff --git a/web-app/packages/lib/src/common/components/app-settings/types.ts b/web-app/packages/lib/src/common/components/app-settings/types.ts
new file mode 100644
index 00000000..b39c0fb7
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/app-settings/types.ts
@@ -0,0 +1,9 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+export interface AppSettingsItemConfig {
+  key: string
+  title: string
+  description: string
+}
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index 41361e34..c3fbe448 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -17,3 +17,4 @@ export { default as TipMessage } from './TipMessage.vue'
 export { default as AppOnboardingPage } from './AppOnboardingPage.vue'
 export * from './types'
 export * from './data-view'
+export * from './app-settings'
diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
index c2e8ce32..30c62238 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/SideBarTemplate.vue
@@ -74,7 +74,7 @@ import { ProjectRouteName } from '@/modules/project'
 const route = useRoute()
 const layoutStore = useLayoutStore()
 const props = defineProps<{
-  sidebarItems: SideBarItemModel[]
+  sidebarItems?: SideBarItemModel[]
 }>()
 
 const initialSidebarItems = computed<SideBarItemModel[]>(() => {
diff --git a/web-app/yarn.lock b/web-app/yarn.lock
index 1e890214..a2e6424f 100644
--- a/web-app/yarn.lock
+++ b/web-app/yarn.lock
@@ -2400,11 +2400,6 @@ magic-string@^0.30.5:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
-material-icons@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/material-icons/-/material-icons-0.2.3.tgz#1f84d50effbb700287ba44a21bbce0339252ccaf"
-  integrity sha512-1Q5wp4aeGWjE5POMtdLmqJn94QM7vmUCeJhNO5m0oDrtW1jfWlaLK73vF3C7/fuMD7NIVicyK8TSkwd+diFgaQ==
-
 memorystream@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"