diff --git a/ROADMAP.md b/ROADMAP.md
index e8f55bd..8a2918c 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -115,6 +115,11 @@ Due to my Bachelors' thesis I took a 3 week break from Torii here and `dev9` sho
 
 ### `v0.0.0-dev11`
 
+-   [ ] Continue Client Refactoring: Split the project features into composables
+    -   [ ] `useProjectFiles()`
+    -   [ ] `useCurrentWorkspace()`
+    -   [ ] `useCurrentRecord()`
+    -   [ ] `useProjectSearch()`
 -   [ ] Client Documentation (Github CI)
     -   [ ] [clean-jsdoc-theme](https://www.npmjs.com/package/@clean-jsdoc-theme/typedoc)
 -   [ ] Remove Naive UI dependency and implement custom vue components
diff --git a/torii-client/plugin-recent-projects/src/AddRecentProject.vue b/torii-client/plugin-recent-projects/src/AddRecentProject.vue
new file mode 100644
index 0000000..2be8d3a
--- /dev/null
+++ b/torii-client/plugin-recent-projects/src/AddRecentProject.vue
@@ -0,0 +1,47 @@
+<template>
+    <button class="add-recent-project" @click="openProjectDialog">
+        {{ $t('app.project.open') }}
+    </button>
+</template>
+
+<script lang="ts" setup>
+import { open } from '@tauri-apps/plugin-dialog';
+import { addRecentProject } from './service';
+
+/**
+ * @brief Opens a dialog to open a project folder from file system.
+ */
+async function openProjectDialog() {
+    const selected = await open({
+        directory: true,
+        multiple: false,
+        title: 'Select a project folder',
+    });
+
+    if (!selected || typeof selected !== 'string') return;
+
+    const name = selected.split('/').pop() || 'Unknown Project';
+    addRecentProject({ path: selected, name });
+}
+</script>
+
+<style lang="scss" scoped>
+.add-recent-project {
+    padding: 8px 12px;
+    border: none;
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+        background-color: #e0e0e0;
+    }
+
+    &:disabled {
+        background-color: #f0f0f0;
+        color: #999;
+        cursor: not-allowed;
+    }
+}
+</style>
diff --git a/torii-client/plugin-recent-projects/src/RecentProjectItem.vue b/torii-client/plugin-recent-projects/src/RecentProjectItem.vue
new file mode 100644
index 0000000..22c96b9
--- /dev/null
+++ b/torii-client/plugin-recent-projects/src/RecentProjectItem.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="recent-project-item" @click="openProject()" @keydown.space.enter="openProject()">
+        <span class="project-title">{{ project.name }}</span>
+        <n-dropdown
+            trigger="hover"
+            placement="right"
+            :options="projectOptions"
+            :show-arrow="true"
+            @select="(_, option) => handleProjectOption(option)"
+        >
+            <n-icon class="project-remove">
+                <ellipsis-vertical />
+            </n-icon>
+        </n-dropdown>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { RecentProject, removeRecentProject } from './service';
+import { NIcon, NDropdown, DropdownOption } from 'naive-ui';
+import { EllipsisVertical } from '@vicons/ionicons5';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    project: RecentProject;
+}>();
+const emit = defineEmits<{
+    open: [RecentProject];
+}>();
+
+/**
+ * @brief The project options, which appear in the dropdown. To specify behaviour
+ * based on the dropdown action, refer to {@link handleProjectOption}.
+ */
+const projectOptions = computed<DropdownOption[]>(() => {
+    if (props.project.is_system) {
+        return [{ label: 'Remove', key: 'remove', disabled: true }];
+    }
+
+    return [{ label: 'Remove', key: 'remove' }];
+});
+
+/**
+ * @param project Project Metadata
+ * @param option Project Option
+ */
+function handleProjectOption(option: DropdownOption) {
+    switch (option.key) {
+        case 'remove':
+            removeRecentProject(props.project.path);
+            break;
+        default:
+            console.error('Not Implemented: Received drop down action:', option.key, option);
+    }
+}
+
+/**
+ * @brief Opens the project for the current recent project item.
+ */
+function openProject() {
+    emit('open', props.project);
+}
+</script>
+
+<style lang="scss" scoped>
+.recent-project-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 2em;
+    cursor: pointer;
+
+    &:hover {
+        background-color: #eee;
+    }
+
+    .project-title {
+        flex: 1;
+    }
+
+    .project-remove {
+        cursor: pointer;
+        color: #999;
+
+        &:hover {
+            color: #666;
+        }
+    }
+}
+</style>
diff --git a/torii-client/plugin-recent-projects/src/RecentProjects.vue b/torii-client/plugin-recent-projects/src/RecentProjects.vue
index d2da0f5..8abc8ae 100644
--- a/torii-client/plugin-recent-projects/src/RecentProjects.vue
+++ b/torii-client/plugin-recent-projects/src/RecentProjects.vue
@@ -4,86 +4,33 @@
             {{ $t('app.project.noRecent') }}
         </span>
         <div v-else class="project-list">
-            <span
-                :tabindex="index"
-                @keydown.space.enter="openProject(project.path)"
-                class="project-entry"
+            <RecentProjectItem
+                :tabindex="1"
                 v-for="(project, index) in recentProjects"
                 :key="project.path"
-            >
-                <span @click="openProject(project.path)" class="project-title">{{ project.name }}</span>
-                <n-dropdown
-                    trigger="hover"
-                    placement="right"
-                    :options="getProjectOptions(project)"
-                    :show-arrow="true"
-                    @select="(_, option) => handleProjectOptions(project, option)"
-                >
-                    <n-icon class="project-remove">
-                        <ellipsis-vertical />
-                    </n-icon>
-                </n-dropdown>
-            </span>
+                :project="project"
+                @open="openProject(project.path)"
+            />
         </div>
-        <button @click="openProjectDialog">
-            {{ $t('app.project.open') }}
-        </button>
+        <AddRecentProject />
     </div>
 </template>
 
 <script setup lang="ts">
-import { listRecentProjects, addRecentProject, removeRecentProject } from './api.ts';
-import { open } from '@tauri-apps/plugin-dialog';
-import { NIcon, NDropdown, DropdownOption } from 'naive-ui';
-import { EllipsisVertical } from '@vicons/ionicons5';
+import { listRecentProjects } from './service.ts';
 import { useRouter } from 'vue-router';
+import AddRecentProject from './AddRecentProject.vue';
+import RecentProjectItem from './RecentProjectItem.vue';
 
 const router = useRouter();
 const recentProjects = listRecentProjects();
 
-function getProjectOptions(project: any): DropdownOption[] {
-    if (project.is_system) {
-        return [{ label: 'Remove', key: 'remove', disabled: true }];
-    }
-
-    return [{ label: 'Remove', key: 'remove' }];
-}
-
-/**
- * Opens a dialog to open a project folder from file system.
- */
-async function openProjectDialog() {
-    const selected = await open({
-        directory: true,
-        multiple: false,
-        title: 'Select a project folder',
-    });
-
-    if (!selected || typeof selected !== 'string') return;
-
-    const name = selected.split('/').pop() || 'Unknown Project';
-    addRecentProject({ path: selected, name });
-}
-
 /**
- * Opens the project at the given path.
+ * @brief Opens the project at the given path.
  */
 function openProject(projectPath: string) {
     router.push({ name: 'project', query: { project: projectPath } });
 }
-
-/**
- * @param project Project Metadata
- * @param option Project Option
- */
-function handleProjectOptions(project: { path: string; name: string }, option: DropdownOption) {
-    console.log('Selected option', option, 'for project', project);
-    switch (option.key) {
-        case 'remove':
-            removeRecentProject(project.path);
-            break;
-    }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -100,50 +47,6 @@ function handleProjectOptions(project: { path: string; name: string }, option: D
         display: flex;
         flex-direction: column;
         gap: 8px;
-
-        .project-entry {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            height: 2em;
-            cursor: pointer;
-
-            &:hover {
-                background-color: #eee;
-            }
-
-            .project-title {
-                flex: 1;
-            }
-
-            .project-remove {
-                cursor: pointer;
-                color: #999;
-
-                &:hover {
-                    color: #666;
-                }
-            }
-        }
-
-        button {
-            padding: 8px 12px;
-            border: none;
-            background-color: #f0f0f0;
-            border-radius: 4px;
-            text-align: left;
-            cursor: pointer;
-
-            &:hover {
-                background-color: #e0e0e0;
-            }
-
-            &:disabled {
-                background-color: #f0f0f0;
-                color: #999;
-                cursor: not-allowed;
-            }
-        }
     }
 }
 </style>
diff --git a/torii-client/plugin-recent-projects/src/api.ts b/torii-client/plugin-recent-projects/src/service.ts
similarity index 87%
rename from torii-client/plugin-recent-projects/src/api.ts
rename to torii-client/plugin-recent-projects/src/service.ts
index b20f2ed..eb674bd 100644
--- a/torii-client/plugin-recent-projects/src/api.ts
+++ b/torii-client/plugin-recent-projects/src/service.ts
@@ -9,7 +9,7 @@ import { Ref, ref } from 'vue';
 /**
  * @brief Type of a recent project struct.
  */
-interface RecentProject {
+export interface RecentProject {
     /**
      * The name of the project.
      */
@@ -24,7 +24,13 @@ interface RecentProject {
      * The timestamp of when the project was last opened, in milliseconds since
      * the Unix epoch.
      */
-    lastOpened?: number;
+    last_opened?: number;
+
+    /**
+     * Wether the project is added by the system. Such projects are not stored
+     * in the recent projects file and cannot be removed.
+     */
+    is_system?: boolean;
 }
 
 const recentProjects = ref<RecentProject[]>([]);
diff --git a/torii-client/webapp/src/components/article/MarkdownEditor.vue b/torii-client/webapp/src/components/article/MarkdownEditor.vue
index f75c70e..dd4b3ef 100644
--- a/torii-client/webapp/src/components/article/MarkdownEditor.vue
+++ b/torii-client/webapp/src/components/article/MarkdownEditor.vue
@@ -22,7 +22,6 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
 import { Editor, EditorContent } from '@tiptap/vue-3';
 import { Markdown } from '@tiptap/markdown';
 import { TaskList, TaskItem } from '@tiptap/extension-list';
@@ -39,6 +38,7 @@ import {
 } from './autocomplete-extension.ts';
 import MarkdownEditorAutocomplete from './MarkdownEditorAutocomplete.vue';
 import type { Record } from '../../types';
+import { getRecordComponent, saveRecordComponent } from '@/services/recordsService.ts';
 
 const props = defineProps<{
     record: Record;
@@ -186,12 +186,8 @@ watch(
         if (!record) return;
 
         // Load the file content when a new file is selected
-        let bytes = await invoke('get_record_component', {
-            record: props.record,
-            component: 'article',
-        });
-        let content = new TextDecoder().decode(bytes as Uint8Array);
-        // console.debug('load', content);
+        let bytes = await getRecordComponent<Uint8Array>(props.record, 'article');
+        let content = new TextDecoder().decode(bytes);
 
         ignoreFirstSave.value = true;
         editor.commands.setContent(content, { contentType: 'markdown' });
@@ -199,13 +195,8 @@ watch(
 );
 
 async function loadFile() {
-    let bytes = await invoke('get_record_component', {
-        record: props.record,
-        component: 'article',
-    });
-    // console.log(bytes);
-    let content = new TextDecoder().decode(bytes as Uint8Array);
-    // console.debug('load', content);
+    let bytes = await getRecordComponent<Uint8Array>(props.record, 'article');
+    let content = new TextDecoder().decode(bytes);
 
     ignoreFirstSave.value = true;
     editor.commands.setContent(content, { contentType: 'markdown' });
@@ -220,15 +211,9 @@ async function saveFile() {
 
     // Get markdown content from the editor
     const content = editor.getMarkdown();
-    // console.debug('save', content);
 
     // Save the file content whenever it changes
-    await invoke('save_record_component', {
-        record: props.record,
-        component: 'article',
-        content,
-        contentType: 'text/markdown',
-    });
+    await saveRecordComponent(props.record, 'article', content, 'text/markdown');
 }
 
 // Compute word count from the editor (e.g., on update)
diff --git a/torii-client/webapp/src/components/image/ImageEditor.vue b/torii-client/webapp/src/components/image/ImageEditor.vue
index 6f2e7ae..24d6875 100644
--- a/torii-client/webapp/src/components/image/ImageEditor.vue
+++ b/torii-client/webapp/src/components/image/ImageEditor.vue
@@ -47,12 +47,12 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
 import { open as openFileDialog } from '@tauri-apps/plugin-dialog';
 import { NIcon, NSpin } from 'naive-ui';
 import { CloseOutline, ImageOutline } from '@vicons/ionicons5';
 import type { Record } from '../../types';
 import UIDropRegion from '../../ui/UIDropRegion.vue';
+import { getRecordComponent, removeRecordComponent, saveRecordComponent, saveRecordComponentFromLocalPath } from '@/services/recordsService.ts';
 
 const props = defineProps<{
     record: Record;
@@ -101,11 +101,7 @@ function refreshImageBlob() {
 
 async function loadFile() {
     try {
-        const file = await invoke<Uint8Array>('get_record_component', {
-            record: props.record,
-            component: props.component,
-        });
-
+        const file = await getRecordComponent<Uint8Array>(props.record, props.component);
         imageData.value = file.byteLength ? file : null;
     } catch (e) {
         console.warn(e);
@@ -126,24 +122,13 @@ async function loadImageFromFiles(files: File[]) {
     // if the image does not load immediately.
     setTimeout(() => (loading.value += 1), 100);
 
-    // Read as ArrayBuffer (binary)
+    // Read as ArrayBuffer (binary) and convert it to a base64 encoded string
+    // because Tauri accepts binaries only this way.
     const arrayBuffer = await file.arrayBuffer();
     const uint8Array = new Uint8Array(arrayBuffer);
-
-    console.log(file);
-    console.log(arrayBuffer);
-
-    // Send to Rust via invoke (base64)
-    const base64 = btoa(
-        uint8Array.reduce((data, byte) => data + String.fromCharCode(byte), '')
-    );
-
-    await invoke('save_record_component', {
-        record: props.record,
-        component: 'image',
-        content: base64,
-        contentType: file.type,
-    });
+    const stringBuffer = uint8Array.reduce((data, byte) => data + String.fromCharCode(byte), '');
+    const base64 = btoa(stringBuffer);
+    await saveRecordComponent(props.record, 'image', base64, file.type);
 
     // Refresh the image data after saving
     await loadFile();
@@ -180,12 +165,7 @@ async function loadImageFromURL(url: string) {
     );
 
     // Save the image data to the backend
-    await invoke('save_record_component', {
-        record: props.record,
-        component: props.component,
-        content: base64,
-        contentType: 'image/png',
-    });
+    await saveRecordComponent(props.record, props.component, base64, 'image/png');
 
     // Refresh the image data after saving
     await loadFile();
@@ -199,11 +179,7 @@ async function loadImageFromURL(url: string) {
  */
 async function loadImageFromFilePath(source: string) {
     // Save the image data from a local file path. This is a special case for local files.
-    await invoke('save_record_component_from_local_file', {
-        record: props.record,
-        component: props.component,
-        source,
-    });
+    await saveRecordComponentFromLocalPath(props.record, props.component, source);
 
     // Refresh the image data after saving
     await loadFile();
@@ -221,24 +197,14 @@ async function onImageClick(_event: MouseEvent) {
 
     // Load the image from the selected file path using the copy
     // command.
-    await invoke('save_record_component_from_local_file', {
-        record: props.record,
-        component: props.component,
-        source: path,
-    });
+    await saveRecordComponentFromLocalPath(props.record, props.component, path);
 
     // Refresh the image data after saving
     await loadFile();
 }
 
 async function removeImage() {
-    if (!props.directory || !props.name) return;
-
-    await invoke('remove_record_component', {
-        record: props.record,
-        component: props.component,
-    });
-
+    await removeRecordComponent(props.record, props.component);
     loadFile();
     emit('refresh');
 }
diff --git a/torii-client/webapp/src/composables/settings-window.ts b/torii-client/webapp/src/composables/settings-window.ts
index b82501e..b327701 100644
--- a/torii-client/webapp/src/composables/settings-window.ts
+++ b/torii-client/webapp/src/composables/settings-window.ts
@@ -1,26 +1,35 @@
 import { ref } from 'vue';
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
 
+/**
+ * @brief The instance of the settings window. There can only be one settings
+ * window at any time.
+ */
 const settingsWindow = ref<WebviewWindow | null>(null);
 
-export function openSettingsWindow() {
+/**
+ * @brief Create a settings window if it does not exist or from an early hot
+ * reload session.
+ * @returns Reference to the settings window.
+ */
+export async function openSettingsWindow() {
     // Avoid opening multiple settings windows.
     if (settingsWindow.value) {
         settingsWindow.value.setFocus();
-        return;
+        return settingsWindow.value;
     }
 
-    // On hot reload, set settingsWindow to current window because it is still open.
+    // On hot reload, set `settingsWindow` to current window because it is still open.
     if (import.meta.hot) {
-        WebviewWindow.getByLabel('settings').then((existingWindow) => {
-            if (existingWindow) {
-                settingsWindow.value = existingWindow;
-                settingsWindow.value.setFocus();
-                return;
-            }
-        });
+        const existingWindow = await WebviewWindow.getByLabel('settings');
+        if (existingWindow) {
+            settingsWindow.value = existingWindow;
+            settingsWindow.value.setFocus();
+            return existingWindow;
+        }
     }
 
+    // Singleton: If the settings window does not exist yet, create it.
     settingsWindow.value = new WebviewWindow('settings', {
         url: '/settings',
         title: 'Settings',
@@ -48,4 +57,6 @@ export function openSettingsWindow() {
         console.error('Failed to create settings window', e);
         settingsWindow.value = null; // Also clear on error
     });
+
+    return settingsWindow.value;
 }
diff --git a/torii-client/webapp/src/services/recordsService.ts b/torii-client/webapp/src/services/recordsService.ts
new file mode 100644
index 0000000..b91c761
--- /dev/null
+++ b/torii-client/webapp/src/services/recordsService.ts
@@ -0,0 +1,105 @@
+import type { ComponentMeta, Record } from '@/types.d.ts';
+import { invoke } from '@tauri-apps/api/core';
+
+/**
+ * @todo
+ */
+export function listRecordComponents(record: Record): Promise<ComponentMeta[]> {
+    return invoke('list_record_components', {
+        record,
+    });
+}
+
+/**
+ * @todo
+ */
+export function getRecordComponent<T extends Uint8Array | string>(record: Record, component: string): Promise<T> {
+    return invoke<T>('get_record_component', {
+        record,
+        component,
+    });
+}
+
+/**
+ * @todo
+ */
+export function saveRecordComponent(
+    record: Record,
+    component: string,
+    content: string,
+    contentType: string
+): Promise<void> {
+    return invoke('save_record_component', {
+        record,
+        component,
+        content,
+        contentType,
+    });
+}
+
+/**
+ * @todo
+ */
+export function saveRecordComponentFromLocalPath(record: Record, component: string, source: string): Promise<void> {
+    return invoke('save_record_component_from_local_file', {
+        record,
+        component,
+        source,
+    });
+}
+
+/**
+ * @todo
+ */
+export function removeRecordComponent(record: Record, component: string): Promise<void> {
+    return invoke('remove_record_component', {
+        record,
+        component,
+    });
+}
+
+/**
+ * @todo
+ */
+export function renameRecord(record: Record, newName: string): Promise<Record> {
+    return invoke<Record>('rename_record', {
+        record,
+        newName,
+    });
+}
+
+/**
+ * @todo
+ */
+export function removeRecord(record: Record): Promise<void> {
+    return invoke('remove_record', { record });
+}
+
+/**
+ * @todo
+ */
+export function listRecords(workspace: string, directory: string, recursive: boolean): Promise<Record[]> {
+    return invoke<Record[]>('list_records', {
+        workspace,
+        directory,
+        recursive,
+        filter: null,
+    });
+}
+
+/**
+ * @todo
+ */
+export function filterRecords(
+    workspace: string,
+    directory: string,
+    recursive: boolean,
+    filter: string | undefined
+): Promise<Record[]> {
+    return invoke<Record[]>('list_records', {
+        workspace,
+        directory,
+        recursive,
+        filter,
+    });
+}
diff --git a/torii-client/webapp/src/types.d.ts b/torii-client/webapp/src/types.d.ts
index 56d3625..e9a11ca 100644
--- a/torii-client/webapp/src/types.d.ts
+++ b/torii-client/webapp/src/types.d.ts
@@ -60,3 +60,30 @@ export interface Workspace {
      */
     name: string;
 }
+
+/**
+ * The component meta represents component metadata such as command capabilities.
+ */
+export interface ComponentMeta {
+    /**
+     * The name of the component.
+     */
+    name: string;
+
+    /**
+     * The permissions matrix.
+     */
+    permissions: {
+        /** Wether the Tauri command `save_record_component` is implemented for the component. */
+        write: bool;
+
+        /** Wether the Tauri command `save_record_component_from_local_file` is implemented for the component. */
+        write_from_file: bool;
+
+        /** Wether the Tauri command `get_record_component` is implemented for the component. */
+        read: bool;
+
+        /** Wether the Tauri command `remove_record_component` is implemented for the component. */
+        remove: bool;
+    };
+}
diff --git a/torii-client/webapp/src/ui/UIFileTree.vue b/torii-client/webapp/src/ui/UIFileTree.vue
index ce03201..568fe7a 100644
--- a/torii-client/webapp/src/ui/UIFileTree.vue
+++ b/torii-client/webapp/src/ui/UIFileTree.vue
@@ -5,12 +5,12 @@
         v-model:selected-keys="selectedKeys"
         :key="JSON.stringify(files)"
         :data="files"
-        :actions="[{ label: 'Remove', key: 'remove', action: removeRecord }]"
+        :actions="[{ label: 'Remove', key: 'remove', action: removeRecordUI }]"
         @find-node-by-key="findNodeByKey"
         @node-click="(e) => setCurrentFile(e)"
         @node-expand="(e) => loadNodes(e.value.relative_path)"
         @node-move="moveRecord"
-        @node-rename="renameRecord"
+        @node-rename="renameRecordUI"
         generic="Record"
     />
 </template>
@@ -19,7 +19,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { Record } from '../types';
 import UITree, { TreeNode } from './UITree.vue';
-import { invoke } from '@tauri-apps/api/core';
+import { listRecordComponents, listRecords, removeRecord, renameRecord, saveRecordComponent } from '@/services/recordsService.ts';
 
 /**
  *
@@ -79,9 +79,7 @@ async function loadNodes(
      * @returns A `TreeNode` object representing the record.
      */
     async function mapRecord(record: Record): Promise<TreeNode<Record>> {
-        const components = await invoke<any[]>('list_record_components', {
-            record,
-        });
+        const components = await listRecordComponents(record);
 
         console.debug(`Components for \`${record.name}\`:`, components);
         const isFolder = components.some((c) => c.name === 'folder');
@@ -102,11 +100,7 @@ async function loadNodes(
     }
 
     try {
-        const files = await invoke<Record[]>('list_records', {
-            workspace: props.workspace,
-            directory,
-            recursive,
-        });
+        const files = await listRecords(props.workspace, directory, recursive);
         const retrieved = await Promise.all(files.map(mapRecord));
         return sortNodes(retrieved);
     } catch (e) {
@@ -129,37 +123,23 @@ async function moveRecord(
     const record = node.value;
     if (!parent || !record) return;
 
-    // Create folder component for parent record if it doesn't exist.
-    await invoke('save_record_component', {
-        record: parent,
-        component: 'folder',
-        content: '',
-        contentType: 'text/markdown',
-    });
+    // Create folder component for parent record if it doesn't exist, then move
+    // the record into new path.
+    await saveRecordComponent(parent, 'folder', '', 'text/markdown');
+    const newRecord = await renameRecord(record, `${parent.relative_path}/${record.name}`);
 
-    console.log(record);
-
-    // Move the record to the new parent path.
-    const newRecord = await invoke<Record>('rename_record', {
-        record,
-        newName: `${parent.relative_path}/${record.name}`,
-    });
-
-    console.log(
-        `Moved record \`${record.name}\` to new parent \`${parent.name}\`:`,
-        newRecord
-    );
+    console.log(`Moved record \`${record.name}\` to \`${parent.name}\`:`, newRecord);
 
     await refresh();
 }
 
-async function removeRecord(node: TreeNode<Record>) {
+async function removeRecordUI(node: TreeNode<Record>) {
     const record = node.value;
-    await invoke('remove_record', { record });
+    await removeRecord(record);
     await refresh();
 }
 
-async function renameRecord(node: TreeNode<Record>, newLabel: string) {
+async function renameRecordUI(node: TreeNode<Record>, newLabel: string) {
     const record = node.value;
     if (!record) return;
 
@@ -173,10 +153,7 @@ async function renameRecord(node: TreeNode<Record>, newLabel: string) {
     const newRelativePath = newRelativePathSlice.join('/');
 
     // Move the record to the new parent path.
-    const newRecord = await invoke<Record>('rename_record', {
-        record,
-        newName: newRelativePath,
-    });
+    const newRecord = await renameRecord(record, newRelativePath);
 
     // If the current record is active, update the "selected key" to the new
     // record's path.
@@ -250,8 +227,6 @@ function findNodeByKey(
     key: string,
     nodes = files.value
 ): TreeNode<Record> | null {
-    // console.log('Searching for node with key:', key);
-
     for (const node of nodes) {
         if (node.key === key) return node;
         if (node.children) {
diff --git a/torii-client/webapp/src/ui/UITree.vue b/torii-client/webapp/src/ui/UITree.vue
index 68b3259..d408768 100644
--- a/torii-client/webapp/src/ui/UITree.vue
+++ b/torii-client/webapp/src/ui/UITree.vue
@@ -185,7 +185,6 @@ const data = ref<TreeNode<NodeValue>[]>(props.data);
 function selectNode(node: TreeNode<NodeValue>) {
     selectedKeys.value = [node.key];
     // emit('node-click', selectedKeys.value);
-    // console.log('Node clicked:', node);
     emit('node-click', node);
 }
 
diff --git a/torii-client/webapp/src/views/project/ProjectView.vue b/torii-client/webapp/src/views/project/ProjectView.vue
index 4b08d23..607af8e 100644
--- a/torii-client/webapp/src/views/project/ProjectView.vue
+++ b/torii-client/webapp/src/views/project/ProjectView.vue
@@ -116,7 +116,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { invoke } from '@tauri-apps/api/core';
 import { Icon } from '@vicons/utils';
 import {
     SettingsOutline,
@@ -134,6 +133,7 @@ import type { Record } from '../../types';
 import UIFileTree from '@/ui/UIFileTree.vue';
 import UISelect from '@/ui/UISelect.vue';
 import { TreeNode } from 'ui/UITree.vue';
+import { filterRecords, listRecordComponents, listRecords, saveRecordComponent } from '@/services/recordsService.ts';
 
 const route = useRoute();
 const router = useRouter();
@@ -191,14 +191,10 @@ watch(searchQuery, (query) => {
 
 async function loadComponents() {
     if (!currentFile.value) return;
-    console.log('Loading components for:', currentFile.value);
+    const record = currentFile.value;
+    console.log('Loading components for:', record);
 
-    const recordComponentsResult = await invoke<any[]>(
-        'list_record_components',
-        {
-            record: currentFile.value,
-        }
-    );
+    const recordComponentsResult = await listRecordComponents(record);
     recordComponents.value = recordComponentsResult.map((c) => c.name);
 
     console.log('Components listed:', recordComponents.value);
@@ -209,19 +205,20 @@ async function createNewFile() {
 
     const files: TreeNode<Record>[] = await fileTree.value.getFiles();
 
+    function createRecordObject(name: string) {
+        return {
+            workspace: projectPath,
+            relative_path: name,
+        } as any as Record;
+    }
+
     // If there are no files, we create "README" as the first file.
     if (files.length === 0) {
         const projectName = projectPath.split('/').pop() ?? 'My Project';
+        const record = createRecordObject('README');
+        const boilerplate = `# ${projectName}\n\nWelcome to your new project! This is the README file, which you can edit into the first record.`;
 
-        await invoke<string>('save_record_component', {
-            record: {
-                workspace: projectPath,
-                relative_path: 'README',
-            },
-            component: 'article',
-            content: `# ${projectName}\n\nWelcome to your new project! This is the README file, which you can edit into the first record.`,
-            contentType: 'text/markdown',
-        });
+        await saveRecordComponent(record, 'article', boilerplate, 'text/markdown');
 
         fileTree.value.refresh();
         return;
@@ -236,37 +233,25 @@ async function createNewFile() {
         counter++;
     }
 
-    await invoke<string>('save_record_component', {
-        record: {
-            workspace: projectPath,
-            relative_path: newFileName,
-        },
-        component: 'article',
-        content: `# ${newFileName}\n\n`,
-        contentType: 'text/markdown',
-    });
+    const newRecord = createRecordObject(newFileName);
+    await saveRecordComponent(newRecord, 'article', `# ${newFileName}\n\n`, 'text/markdown');
 
     fileTree.value.refresh();
 }
 
-function listRecords(attrs: {
+function listRecordsUI(attrs: {
     directory: string;
     recursive?: boolean;
     filter?: string;
 }) {
-    return invoke<Record[]>('list_records', {
-        workspace: projectPath,
-        directory: attrs.directory,
-        recursive: attrs.recursive ?? false,
-        filter: attrs.filter,
-    });
+    return filterRecords(projectPath, attrs.directory, attrs.recursive ?? false, attrs.filter);
 }
 
 /**
  * On autocomplete popup creation, cache all records.
  */
 async function autocompleteStart() {
-    const suggestions = await listRecords({
+    const suggestions = await listRecordsUI({
         directory: '',
         recursive: true,
     });
diff --git a/torii-client/webapp/tsconfig.json b/torii-client/webapp/tsconfig.json
index 4c5fbf0..4795d0b 100644
--- a/torii-client/webapp/tsconfig.json
+++ b/torii-client/webapp/tsconfig.json
@@ -28,5 +28,5 @@
             "@/*": ["./src/*"]
         }
     },
-    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../plugin-recent-projects/src/api.ts"]
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/torii-desktop/src/record/commands.rs b/torii-desktop/src/record/commands.rs
index b37cb3b..3afb6d2 100644
--- a/torii-desktop/src/record/commands.rs
+++ b/torii-desktop/src/record/commands.rs
@@ -1,6 +1,9 @@
 //! This module defines [tauri] commands associated with the [Record] instance.
 
-use crate::{Component, Record};
+use crate::{
+    Component, Record,
+    record::component_meta::{ComponentMeta, ComponentPermissions},
+};
 use base64::{Engine as _, engine::general_purpose};
 use serde_json::{Value, json};
 use std::{io::ErrorKind::NotFound, path::PathBuf};
@@ -82,25 +85,25 @@ pub fn remove_record(record: Record) -> Result<(), String> {
 /// components, and is used in the file tree UI to enable special behaviour
 /// for folders.
 #[tauri::command]
-pub fn list_record_components(record: Record) -> Value {
+pub fn list_record_components(record: Record) -> Vec<ComponentMeta> {
     record
         .list_components()
         .iter()
         .map(|c| {
-            let can_write = c.write(&record, Vec::new()).is_implemented();
-            let can_write_from_file = c.write_from_file(&record, &PathBuf::new()).is_implemented();
-            let can_read = c.read(&record).is_implemented();
-            let can_remove = c.remove(&record).is_implemented();
-
-            json!({
-                "name": c.component_name(),
-                "permissions": {
-                    "write": can_write,
-                    "write_from_file": can_write_from_file,
-                    "read": can_read,
-                    "remove": can_remove,
-                }
-            })
+            let write = c.write(&record, Vec::new()).is_implemented();
+            let write_from_file = c.write_from_file(&record, &PathBuf::new()).is_implemented();
+            let read = c.read(&record).is_implemented();
+            let remove = c.remove(&record).is_implemented();
+
+            ComponentMeta {
+                name: c.component_name().to_string(),
+                permissions: ComponentPermissions {
+                    write,
+                    write_from_file,
+                    read,
+                    remove,
+                },
+            }
         })
         .collect()
 }
diff --git a/torii-desktop/src/record/component_meta.rs b/torii-desktop/src/record/component_meta.rs
new file mode 100644
index 0000000..d070b98
--- /dev/null
+++ b/torii-desktop/src/record/component_meta.rs
@@ -0,0 +1,17 @@
+use serde::{Deserialize, Serialize};
+
+/// Component Metadata
+#[derive(Debug, Clone, PartialEq, Eq, Hash, Serialize, Deserialize)]
+pub struct ComponentMeta {
+    pub name: String,
+    pub permissions: ComponentPermissions,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Hash, Serialize, Deserialize)]
+pub struct ComponentPermissions {
+    pub write: bool,
+    pub write_from_file: bool,
+    pub read: bool,
+    pub remove: bool,
+}
+
diff --git a/torii-desktop/src/record/mod.rs b/torii-desktop/src/record/mod.rs
index f4e92a9..019ce95 100644
--- a/torii-desktop/src/record/mod.rs
+++ b/torii-desktop/src/record/mod.rs
@@ -1,14 +1,12 @@
 //! This module contains the [Record] struct.
 
 pub mod commands;
+mod component_meta;
 mod serde;
 
 use crate::{Component, components::get_all_components, workspace::Workspace};
 use path_normalizer::PathNormalizeExt;
-use std::{
-    collections::HashSet,
-    path::{Path, PathBuf},
-};
+use std::{collections::HashSet, path::PathBuf};
 
 /// The record struct represents a Torii record.
 #[derive(Debug, Clone, PartialEq, Eq, Hash)]