diff --git a/components/XDataTable.vue b/components/XDataTable.vue
index ec309764..0a1c3228 100644
--- a/components/XDataTable.vue
+++ b/components/XDataTable.vue
@@ -111,30 +111,32 @@ const onSort = (event: any) => {
 </script>
 
 <template>
-    <ConfirmDialog></ConfirmDialog>
-    <Toolbar>
-        <template #start>
-            <Button label="Create" severity="info" @click="onCreateEmpty" :disabled="createDisabled" />
-        </template>
-    </Toolbar>
-    <DataTable ref="dataTable" :value="props.datasource as unknown as any[]" dataKey="id" filterDisplay="row"
-        v-model:filters="filters as any" :globalFilterFields="Object.keys(filters)" editMode="row"
-        @row-edit-init="onRowEditInit" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave"
-        @row-edit-cancel="onCancel" @sort="onSort" :sortField="sortField" :sortOrder="1">
-        <slot></slot>
-        <Column frozen align-frozen="right">
-            <template #body="{ data, editorInitCallback }">
-                <Button icon="pi pi-pencil" text rounded @click="editorInitCallback" />
-                <Button icon="pi pi-trash" text rounded severity="danger" @click="onDelete(data)" />
+    <section>
+        <ConfirmDialog></ConfirmDialog>
+        <Toolbar>
+            <template #start>
+                <Button label="Create" severity="info" @click="onCreateEmpty" :disabled="createDisabled" />
             </template>
-            <template #editor="{ editorSaveCallback, editorCancelCallback }">
-                <Button icon="pi pi-check" text rounded @click="editorSaveCallback" />
-                <Button icon="pi pi-times" text rounded severity="danger" @click="editorCancelCallback" />
-            </template>
-        </Column>
-        <template #empty>No data found</template>
-        <template #loading>Loading data...</template>
-    </DataTable>
+        </Toolbar>
+        <DataTable ref="dataTable" :value="props.datasource as unknown as any[]" dataKey="id" filterDisplay="row"
+            v-model:filters="filters as any" :globalFilterFields="Object.keys(filters)" editMode="row"
+            @row-edit-init="onRowEditInit" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave"
+            @row-edit-cancel="onCancel" @sort="onSort" :sortField="sortField" :sortOrder="1">
+            <slot></slot>
+            <Column frozen align-frozen="right">
+                <template #body="{ data, editorInitCallback }">
+                    <Button icon="pi pi-pencil" text rounded @click="editorInitCallback" />
+                    <Button icon="pi pi-trash" text rounded severity="danger" @click="onDelete(data)" />
+                </template>
+                <template #editor="{ editorSaveCallback, editorCancelCallback }">
+                    <Button icon="pi pi-check" text rounded @click="editorSaveCallback" />
+                    <Button icon="pi pi-times" text rounded severity="danger" @click="editorCancelCallback" />
+                </template>
+            </Column>
+            <template #empty>No data found</template>
+            <template #loading>Loading data...</template>
+        </DataTable>
+    </section>
 </template>
 
 <style scoped>
diff --git a/domain/UseCase.ts b/domain/UseCase.ts
index adab649a..f597da7e 100644
--- a/domain/UseCase.ts
+++ b/domain/UseCase.ts
@@ -1,4 +1,4 @@
-import Example from "./Example";
+import Example from "../modules/system/domain/Example";
 import type { Properties } from "./Properties";
 import type { Uuid } from "./Uuid";
 
diff --git a/domain/UserStory.ts b/domain/UserStory.ts
index 3e76c366..7c2d58c2 100644
--- a/domain/UserStory.ts
+++ b/domain/UserStory.ts
@@ -1,4 +1,4 @@
-import Example from "./Example";
+import Example from "../modules/system/domain/Example";
 
 /**
  * A User Storyspecifies the handling of a specific user need.
diff --git a/modules/system/application/FunctionalRequirementInteractor.ts b/modules/system/application/FunctionalRequirementInteractor.ts
new file mode 100644
index 00000000..6345eed9
--- /dev/null
+++ b/modules/system/application/FunctionalRequirementInteractor.ts
@@ -0,0 +1,39 @@
+import type Repository from "~/application/Repository";
+import FunctionalRequirement from "../domain/FunctionalRequirement";
+import type { Uuid } from "~/domain/Uuid";
+
+export default class FunctionalRequirementInteractor {
+    constructor(
+        readonly repository: Repository<FunctionalRequirement>
+    ) { }
+
+    async create({ parentId, name, statement }: Pick<FunctionalRequirement, 'parentId' | 'name' | 'statement'>): Promise<Uuid> {
+        return await this.repository.add(new FunctionalRequirement({
+            id: crypto.randomUUID(),
+            property: '',
+            parentId,
+            name,
+            statement
+        }))
+    }
+
+    async delete(id: Uuid): Promise<void> {
+        await this.repository.delete(id)
+    }
+
+    async getAll(parentId: Uuid): Promise<FunctionalRequirement[]> {
+        return await this.repository.getAll(
+            behavior => behavior.parentId === parentId
+        )
+    }
+
+    async update({ id, parentId, name, statement }: Pick<FunctionalRequirement, 'id' | 'parentId' | 'name' | 'statement'>): Promise<void> {
+        await this.repository.update(new FunctionalRequirement({
+            id,
+            property: '',
+            parentId,
+            name,
+            statement
+        }))
+    }
+}
\ No newline at end of file
diff --git a/modules/system/application/NonFunctionalRequirementInteractor.ts b/modules/system/application/NonFunctionalRequirementInteractor.ts
new file mode 100644
index 00000000..bda53046
--- /dev/null
+++ b/modules/system/application/NonFunctionalRequirementInteractor.ts
@@ -0,0 +1,39 @@
+import type Repository from "~/application/Repository";
+import NonFunctionalRequirement from "../domain/NonFunctionalRequirement";
+import type { Uuid } from "~/domain/Uuid";
+
+export default class NonFunctionalRequirementInteractor {
+    constructor(
+        readonly repository: Repository<NonFunctionalRequirement>
+    ) { }
+
+    async create({ parentId, name, statement }: Pick<NonFunctionalRequirement, 'parentId' | 'name' | 'statement'>): Promise<Uuid> {
+        return await this.repository.add(new NonFunctionalRequirement({
+            id: crypto.randomUUID(),
+            property: '',
+            parentId,
+            name,
+            statement
+        }))
+    }
+
+    async delete(id: Uuid): Promise<void> {
+        await this.repository.delete(id)
+    }
+
+    async getAll(parentId: Uuid): Promise<NonFunctionalRequirement[]> {
+        return await this.repository.getAll(
+            behavior => behavior.parentId === parentId
+        )
+    }
+
+    async update({ id, parentId, name, statement }: Pick<NonFunctionalRequirement, 'id' | 'parentId' | 'name' | 'statement'>): Promise<void> {
+        await this.repository.update(new NonFunctionalRequirement({
+            id,
+            property: '',
+            parentId,
+            name,
+            statement
+        }))
+    }
+}
\ No newline at end of file
diff --git a/modules/system/data/FunctionalRequirementRepository.ts b/modules/system/data/FunctionalRequirementRepository.ts
new file mode 100644
index 00000000..b91e29d2
--- /dev/null
+++ b/modules/system/data/FunctionalRequirementRepository.ts
@@ -0,0 +1,16 @@
+import type { Properties } from "~/domain/Properties";
+import StorageRepository from "~/data/StorageRepository";
+import type FunctionalRequirement from "../domain/FunctionalRequirement";
+import FunctionalRequirementToJsonMapper from "../mappers/FunctionalRequirementToJsonMapper";
+
+const { serializationVersion } = useAppConfig()
+
+export default class FunctionalRequirementRepository extends StorageRepository<FunctionalRequirement> {
+    constructor(properties: Properties<Omit<FunctionalRequirementRepository, 'storageKey' | 'mapper'>> = {}) {
+        super({
+            ...properties,
+            storageKey: 'functionalRequirement',
+            mapper: new FunctionalRequirementToJsonMapper(serializationVersion)
+        })
+    }
+}
\ No newline at end of file
diff --git a/modules/system/data/NonFunctionalRequirementRepository.ts b/modules/system/data/NonFunctionalRequirementRepository.ts
new file mode 100644
index 00000000..0395ca74
--- /dev/null
+++ b/modules/system/data/NonFunctionalRequirementRepository.ts
@@ -0,0 +1,16 @@
+import type { Properties } from "~/domain/Properties";
+import StorageRepository from "~/data/StorageRepository";
+import FunctionalRequirementToJsonMapper from "../mappers/FunctionalRequirementToJsonMapper";
+import type NonFunctionalRequirement from "../domain/NonFunctionalRequirement";
+
+const { serializationVersion } = useAppConfig()
+
+export default class NonFunctionalRequirementRepository extends StorageRepository<NonFunctionalRequirement> {
+    constructor(properties: Properties<Omit<NonFunctionalRequirementRepository, 'storageKey' | 'mapper'>> = {}) {
+        super({
+            ...properties,
+            storageKey: 'nonFunctionalRequirement',
+            mapper: new FunctionalRequirementToJsonMapper(serializationVersion)
+        })
+    }
+}
\ No newline at end of file
diff --git a/domain/Behavior.ts b/modules/system/domain/Behavior.ts
similarity index 68%
rename from domain/Behavior.ts
rename to modules/system/domain/Behavior.ts
index 5d478a80..14849f17 100644
--- a/domain/Behavior.ts
+++ b/modules/system/domain/Behavior.ts
@@ -1,4 +1,4 @@
-import Requirement from "./Requirement";
+import Requirement from "~/domain/Requirement";
 
 /**
  * Property of the operation of the system
diff --git a/domain/Example.ts b/modules/system/domain/Example.ts
similarity index 100%
rename from domain/Example.ts
rename to modules/system/domain/Example.ts
diff --git a/domain/FunctionalRequirement.ts b/modules/system/domain/FunctionalRequirement.ts
similarity index 100%
rename from domain/FunctionalRequirement.ts
rename to modules/system/domain/FunctionalRequirement.ts
diff --git a/domain/NonFunctionalRequirement.ts b/modules/system/domain/NonFunctionalRequirement.ts
similarity index 63%
rename from domain/NonFunctionalRequirement.ts
rename to modules/system/domain/NonFunctionalRequirement.ts
index df053b7f..c74bd384 100644
--- a/domain/NonFunctionalRequirement.ts
+++ b/modules/system/domain/NonFunctionalRequirement.ts
@@ -1,6 +1,4 @@
 import Behavior from "./Behavior";
 
-/**
- * Property of how the system achieves an outcome
- */
+
 export default class NonFunctionalRequirement extends Behavior { }
diff --git a/modules/system/domain/System.ts b/modules/system/domain/System.ts
index aa0a982a..059ebdd8 100644
--- a/modules/system/domain/System.ts
+++ b/modules/system/domain/System.ts
@@ -1,5 +1,5 @@
 import type { Uuid } from "~/domain/Uuid";
-import PEGS from "../../../domain/PEGS";
+import PEGS from "~/domain/PEGS";
 
 /**
  * A set of related artifacts
diff --git a/domain/TestCase.ts b/modules/system/domain/TestCase.ts
similarity index 100%
rename from domain/TestCase.ts
rename to modules/system/domain/TestCase.ts
diff --git a/modules/system/mappers/FunctionalRequirementToJsonMapper.ts b/modules/system/mappers/FunctionalRequirementToJsonMapper.ts
new file mode 100644
index 00000000..737f76d0
--- /dev/null
+++ b/modules/system/mappers/FunctionalRequirementToJsonMapper.ts
@@ -0,0 +1,19 @@
+import type { RequirementJson } from "~/mappers/RequirementToJsonMapper";
+import FunctionalRequirement from "../domain/FunctionalRequirement";
+import RequirementToJsonMapper from "~/mappers/RequirementToJsonMapper";
+
+export interface FunctionalRequirementJson extends RequirementJson { }
+
+export default class FunctionalRequirementToJsonMapper extends RequirementToJsonMapper {
+    override mapTo(source: FunctionalRequirement): FunctionalRequirementJson {
+        return {
+            ...super.mapTo(source)
+        };
+    }
+
+    override mapFrom(target: FunctionalRequirementJson): FunctionalRequirement {
+        return new FunctionalRequirement({
+            ...super.mapFrom(target)
+        });
+    }
+}
\ No newline at end of file
diff --git a/modules/system/mappers/NonFunctionalRequirementToJsonMapper.ts b/modules/system/mappers/NonFunctionalRequirementToJsonMapper.ts
new file mode 100644
index 00000000..1bcf8460
--- /dev/null
+++ b/modules/system/mappers/NonFunctionalRequirementToJsonMapper.ts
@@ -0,0 +1,19 @@
+import type { RequirementJson } from "~/mappers/RequirementToJsonMapper";
+import NonFunctionalRequirement from "../domain/NonFunctionalRequirement";
+import RequirementToJsonMapper from "~/mappers/RequirementToJsonMapper";
+
+export interface NonFunctionalRequirementJson extends RequirementJson { }
+
+export default class NonFunctionalRequirementToJsonMapper extends RequirementToJsonMapper {
+    override mapTo(source: NonFunctionalRequirement): NonFunctionalRequirementJson {
+        return {
+            ...super.mapTo(source)
+        };
+    }
+
+    override mapFrom(target: NonFunctionalRequirementJson): NonFunctionalRequirement {
+        return new NonFunctionalRequirement({
+            ...super.mapFrom(target)
+        });
+    }
+}
\ No newline at end of file
diff --git a/modules/system/ui/pages/Functionality.vue b/modules/system/ui/pages/Functionality.vue
index 22ce7d8b..02f81bbc 100644
--- a/modules/system/ui/pages/Functionality.vue
+++ b/modules/system/ui/pages/Functionality.vue
@@ -1,8 +1,180 @@
+<script lang="ts" setup>
+import SolutionRepository from '~/modules/solution/data/SolutionRepository';
+import SystemRepository from '../../data/SystemRepository';
+import SystemComponentRepository from '../../data/SystemComponentRepository';
+import GetSolutionBySlugUseCase from '~/modules/solution/application/GetSolutionBySlugUseCase';
+import GetSystemBySolutionIdUseCase from '../../application/GetSystemBySolutionIdUseCase';
+import GetSystemComponentsUseCase from '../../application/GetSystemComponentsUseCase';
+import type SystemComponent from '../../domain/SystemComponent';
+import type Behavior from '../../domain/Behavior';
+import { FilterMatchMode } from 'primevue/api';
+import { emptyUuid, type Uuid } from '~/domain/Uuid';
+import FunctionalRequirementRepository from '../../data/FunctionalRequirementRepository';
+import NonFunctionalRequirementRepository from '../../data/NonFunctionalRequirementRepository';
+import FunctionalRequirementInteractor from '../../application/FunctionalRequirementInteractor';
+import NonFunctionalRequirementInteractor from '../../application/NonFunctionalRequirementInteractor';
+
+useHead({
+    title: 'Functionality'
+})
+
+const router = useRouter(),
+    route = useRoute(),
+    slug = route.params.solutionSlug as string,
+    solutionRepository = new SolutionRepository(),
+    systemRepository = new SystemRepository(),
+    componentRepository = new SystemComponentRepository(),
+    functionalRequirementsRepository = new FunctionalRequirementRepository(),
+    nonFunctionalRequirementsRepository = new NonFunctionalRequirementRepository(),
+    getSolutionBySlugUseCase = new GetSolutionBySlugUseCase(solutionRepository),
+    solution = await getSolutionBySlugUseCase.execute(slug),
+    getSystemBySolutionIdUseCase = new GetSystemBySolutionIdUseCase(systemRepository),
+    system = solution?.id && await getSystemBySolutionIdUseCase.execute(solution.id),
+    getComponentsUseCase = new GetSystemComponentsUseCase(componentRepository),
+    functionalRequirementInteractor = new FunctionalRequirementInteractor(functionalRequirementsRepository),
+    nonFunctionalRequirementInteractor = new NonFunctionalRequirementInteractor(nonFunctionalRequirementsRepository);
+
+if (!solution) {
+    router.push({ name: 'Solutions' })
+} else {
+    if (!system)
+        router.push({ name: 'System', params: { solutionSlug: slug } });
+}
+
+type SystemComponentViewModel = Pick<SystemComponent, 'id' | 'name' | 'statement' | 'parentId' | 'systemId'>
+    & { behaviors: BehaviorViewModel[] };
+
+type BehaviorViewModel = Pick<Behavior, 'id' | 'name' | 'statement' | 'parentId'>
+    & { category: 'Functional' | 'Non-functional' };
+
+const components = ref<SystemComponentViewModel[]>([]),
+    expandedRows = ref(),
+    emptyBehavior = (parentId: Uuid): BehaviorViewModel => ({
+        id: emptyUuid,
+        name: '',
+        statement: '',
+        parentId,
+        category: 'Functional'
+    });
+
+const refreshComponents = async () => {
+    return Promise.all((await getComponentsUseCase.execute(system!.id))
+        .map(async c => {
+            const functionalReqs: BehaviorViewModel[] = (await functionalRequirementInteractor.getAll(c.id))
+                .map(fr => ({ ...fr, category: 'Functional' }));
+            const nonFunctionalReqs: BehaviorViewModel[] = (await nonFunctionalRequirementInteractor.getAll(c.id))
+                .map(nfr => ({ ...nfr, category: 'Non-functional' }));
+
+            return {
+                ...c,
+                behaviors: [...functionalReqs, ...nonFunctionalReqs]
+            }
+        })
+    );
+}
+
+onMounted(async () => {
+    components.value = await refreshComponents()
+})
+
+const componentSortField = ref<string | undefined>('name')
+
+const componentFilters = ref({
+    'name': { value: null, matchMode: FilterMatchMode.CONTAINS },
+    'statement': { value: null, matchMode: FilterMatchMode.CONTAINS },
+    'parentId': { value: null, matchMode: FilterMatchMode.EQUALS }
+})
+
+const behaviorFilters = ref({
+    'name': { value: null, matchMode: FilterMatchMode.CONTAINS },
+    'statement': { value: null, matchMode: FilterMatchMode.CONTAINS },
+    'category': { value: null, matchMode: FilterMatchMode.EQUALS }
+})
+
+const onCreate = async (newData: BehaviorViewModel) => {
+    await functionalRequirementInteractor.create(newData)
+    components.value = await refreshComponents()
+}
+
+const onUpdate = async (newData: BehaviorViewModel) => {
+    await functionalRequirementInteractor.update(newData)
+    components.value = await refreshComponents()
+}
+
+const onDelete = async (id: Uuid) => {
+    await functionalRequirementInteractor.delete(id)
+    components.value = await refreshComponents()
+}
+</script>
 <template>
     <p>
-        This section describes the high-level functional behaviors of a system.
-        Specify what results or effects are expected. Describe
-        <strong>what</strong> the system should do, not <strong>how</strong>
-        it should do it.
+        This section defines the functionality (behavior) of the system.
+        It includes both functional and non-functional requirements of system components.
     </p>
+
+    <DataTable :value="components" dataKey="id" :filters="componentFilters" filterDisplay="row"
+        :globalFilterFields="Object.keys(componentFilters)" :sortField="componentSortField" :sortOrder="1"
+        v-model:expandedRows="expandedRows">
+        <Column expander />
+        <Column field="name" header="Name" sortable>
+            <template #filter="{ filterModel, filterCallback }">
+                <InputText v-model.trim="filterModel.value" @input="filterCallback()" placeholder="Search by name" />
+            </template>
+            <template #body="{ data, field }">
+                {{ data[field] }}
+            </template>
+        </Column>
+        <Column field="statement" header="Description">
+            <template #filter="{ filterModel, filterCallback }">
+                <InputText v-model.trim="filterModel.value" @input="filterCallback()"
+                    placeholder="Search by description" />
+            </template>
+            <template #body="{ data, field }">
+                {{ data[field] }}
+            </template>
+        </Column>
+        <Column field="parentId" header="Parent">
+            <template #filter="{ filterModel, filterCallback }">
+                <Dropdown v-model.trim="filterModel.value" @input="filterCallback()" optionLabel="name" optionValue="id"
+                    :options="components" placeholder="Search by Component" />
+            </template>
+            <template #body="{ data, field }">
+                {{ components
+                    .filter(c => c.id !== emptyUuid)
+                    .find(c => c.id === data[field])?.name }}
+            </template>
+        </Column>
+        <template #expansion="{ data }">
+            <h5>Behaviors for {{ data.name }}</h5>
+
+            <XDataTable class="w-10 ml-8" :datasource="data.behaviors" :emptyRecord="emptyBehavior(data.id)"
+                :filters="behaviorFilters" :onCreate="onCreate" :onDelete="onDelete" :onUpdate="onUpdate">
+                <Column field="name" header="Name" sortable>
+                    <template #body="{ data, field }">
+                        {{ data[field] }}
+                    </template>
+                    <template #editor="{ data, field }">
+                        <InputText v-model.trim="data[field]" required="true" placeholder="Enter a name" />
+                    </template>
+                </Column>
+                <Column field="statement" header="Description">
+                    <template #body="{ data, field }">
+                        {{ data[field] }}
+                    </template>
+                    <template #editor="{ data, field }">
+                        <InputText v-model.trim="data[field]" required="true" placeholder="Enter a description" />
+                    </template>
+                </Column>
+                <Column field="category" header="Category">
+                    <template #body="{ data, field }">
+                        {{ data[field] }}
+                    </template>
+                    <template #editor="{ data, field }">
+                        <Dropdown v-model.trim="data[field]" :options="['Functional', 'Non-functional']"
+                            placeholder="Select a category" />
+                    </template>
+                </Column>
+            </XDataTable>
+        </template>
+    </DataTable>
 </template>
\ No newline at end of file
diff --git a/modules/system/ui/pages/Index.vue b/modules/system/ui/pages/Index.vue
index 79b160e9..c8e3f68e 100644
--- a/modules/system/ui/pages/Index.vue
+++ b/modules/system/ui/pages/Index.vue
@@ -39,8 +39,8 @@ if (!solution) {
 }
 
 const links = [
-    { name: 'Functionality', icon: 'pi-bolt', label: 'Functionality' },
-    { name: 'System Components', icon: 'pi-th-large', label: 'Components' }
+    { name: 'System Components', icon: 'pi-th-large', label: 'Components' },
+    { name: 'Functionality', icon: 'pi-bolt', label: 'Functionality' }
 ]
 </script>