diff --git a/docs/POAM-Design.md b/docs/POAM-Design.md
new file mode 100644
index 00000000..31427830
--- /dev/null
+++ b/docs/POAM-Design.md
@@ -0,0 +1,38 @@
+Title: POAM Phase 1 – UI Design
+
+Goals
+
+- Provide a basic POAM Items list page to exercise the API filters end-to-end.
+- Keep UX simple for Phase 1; extend with create/edit flows in Phase 2.
+
+Routing
+
+- New authenticated route: /poam-items
+- Router entry added under app routes; guard via existing auth store.
+
+Data Access
+
+- Uses existing composables (useFetch/useApi) to call /api/poam-items
+- Query params supported: status, sspId, riskId, deadlineBefore (RFC3339)
+
+View: CCFPoamItemsListView
+
+- Filters
+  - Dropdown: status (open|in-progress|completed|overdue)
+  - Inputs: sspId UUID, riskId UUID, deadlineBefore RFC3339
+  - Apply triggers a reload with current params
+- Table Columns
+  - Title, Status, Deadline, POC (name/email), Updated
+
+Future Enhancements
+
+- Create/Edit forms for POAM items and milestones
+- Mark milestone completed, auto-set completed_at
+- Link POAM item to risks from the UI
+- Pagination and sorting
+
+Verification
+
+- API is reachable at /api/poam-items
+- UI config.json provides API_URL
+- Manual test by applying filters and verifying table updates
diff --git a/src/router/index.ts b/src/router/index.ts
index a732e793..27e73026 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -92,6 +92,11 @@ const authenticatedRoutes = [
           },
         ],
       },
+      {
+        path: 'components/dashboards/:componentId',
+        name: 'system-component-dashboards',
+        component: () => import('../views/system/ComponentsView.vue'),
+      },
       {
         path: 'authorizations',
         name: 'system:authorizations',
@@ -110,6 +115,14 @@ const authenticatedRoutes = [
       requiresAuth: true,
     },
   },
+  {
+    path: 'poam-items',
+    name: 'poam-items:index',
+    component: () => import('../views/poam/CCFPoamItemsListView.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: 'risks/:riskId',
     name: 'risks:detail',
@@ -194,6 +207,14 @@ const authenticatedRoutes = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/profiles/build-props',
+    name: 'profile-build-props',
+    component: () => import('../views/profile/ProfileBuildPropsView.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: '/profiles/:id',
     name: 'profile:view',
diff --git a/src/views/LeftSideNav.vue b/src/views/LeftSideNav.vue
index dd324479..c2f8e196 100644
--- a/src/views/LeftSideNav.vue
+++ b/src/views/LeftSideNav.vue
@@ -119,11 +119,6 @@ const links = ref<Array<NavigationItem>>([
         name: 'users-list',
         title: 'System Users',
       },
-      {
-        name: 'admin-import',
-        title: 'Import',
-        abbr: 'IMP',
-      },
     ],
   },
 ]);
diff --git a/src/views/catalog/CatalogControl.vue b/src/views/catalog/CatalogControl.vue
index c46a359e..647443b6 100644
--- a/src/views/catalog/CatalogControl.vue
+++ b/src/views/catalog/CatalogControl.vue
@@ -41,11 +41,25 @@
     >
       <div class="flex items-start justify-between gap-4">
         <div>
-          <TertiaryButton v-if="!statement">Add Statement</TertiaryButton>
-          <TertiaryButton v-if="!objective" class="ml-2"
+          <TertiaryButton v-if="!statement" @click="showEditStatement = true"
+            >Add Statement</TertiaryButton
+          >
+          <TertiaryButton
+            v-if="statement"
+            class="ml-2"
+            @click="showEditStatement = true"
+            >Edit Statement</TertiaryButton
+          >
+          <TertiaryButton
+            v-if="!objective"
+            class="ml-2"
+            @click="showEditObjective = true"
             >Add Objective</TertiaryButton
           >
-          <TertiaryButton v-if="!guidance" class="ml-2"
+          <TertiaryButton
+            v-if="!guidance"
+            class="ml-2"
+            @click="showEditGuidance = true"
             >Add Guidance</TertiaryButton
           >
 
@@ -100,6 +114,27 @@
           :parent-control="props.control"
           v-model="showControlForm"
         />
+        <ControlPartEditModal
+          v-model="showEditStatement"
+          :catalog="catalog"
+          :control="props.control"
+          type="statement"
+          @updated="onUpdated"
+        />
+        <ControlPartEditModal
+          v-model="showEditObjective"
+          :catalog="catalog"
+          :control="props.control"
+          type="assessment-objective"
+          @updated="onUpdated"
+        />
+        <ControlPartEditModal
+          v-model="showEditGuidance"
+          :catalog="catalog"
+          :control="props.control"
+          type="guidance"
+          @updated="onUpdated"
+        />
         <ControlEditModal
           v-model="showEdit"
           :catalog="catalog"
@@ -118,6 +153,7 @@ import { type Catalog, type Control } from '@/oscal';
 import TertiaryButton from '@/volt/TertiaryButton.vue';
 import ControlCreateModal from '@/components/catalogs/ControlCreateModal.vue';
 import ControlEditModal from '@/components/catalogs/ControlEditModal.vue';
+import ControlPartEditModal from '@/components/catalogs/ControlPartEditModal.vue';
 import type { Part } from '@/oscal';
 import PartDisplayEditor from '@/components/PartDisplayEditor.vue';
 import { useRouter } from 'vue-router';
@@ -179,6 +215,9 @@ function getPart(type: string) {
 
 const showControlForm = ref<boolean>(false);
 const showEdit = ref<boolean>(false);
+const showEditStatement = ref<boolean>(false);
+const showEditObjective = ref<boolean>(false);
+const showEditGuidance = ref<boolean>(false);
 
 function controlCreated(control: Control) {
   controls.value?.push(control);
diff --git a/src/views/catalog/CatalogView.vue b/src/views/catalog/CatalogView.vue
index 3b369fe1..6a48087b 100644
--- a/src/views/catalog/CatalogView.vue
+++ b/src/views/catalog/CatalogView.vue
@@ -138,7 +138,6 @@ async function deleteCatalog(uuid: string, title: string) {
 function deleteCurrentCatalog() {
   deleteCatalog(catalogId.value, catalog.value?.metadata?.title || '');
 }
-
 function reloadLists() {
   groupExecute(`/api/oscal/catalogs/${catalogId.value}/groups`);
   catalogExecute(`/api/oscal/catalogs/${catalogId.value}/controls`);
diff --git a/src/views/poam/CCFPoamItemsListView.vue b/src/views/poam/CCFPoamItemsListView.vue
new file mode 100644
index 00000000..57407fe5
--- /dev/null
+++ b/src/views/poam/CCFPoamItemsListView.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="p-6">
+    <h1 class="text-2xl font-semibold mb-4">POAM Items</h1>
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
+      <div>
+        <label class="block text-sm font-medium mb-1">Status</label>
+        <select v-model="status" class="border rounded px-2 py-1 w-full">
+          <option value="">Any</option>
+          <option value="open">open</option>
+          <option value="in-progress">in-progress</option>
+          <option value="completed">completed</option>
+          <option value="overdue">overdue</option>
+        </select>
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">SSP ID</label>
+        <input
+          v-model="sspId"
+          placeholder="UUID"
+          class="border rounded px-2 py-1 w-full"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Risk ID</label>
+        <input
+          v-model="riskId"
+          placeholder="UUID"
+          class="border rounded px-2 py-1 w-full"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Deadline Before</label>
+        <input
+          v-model="deadlineBefore"
+          placeholder="YYYY-MM-DDTHH:mm:ssZ"
+          class="border rounded px-2 py-1 w-full"
+        />
+      </div>
+    </div>
+    <div class="mb-4">
+      <button @click="refresh" class="bg-blue-600 text-white px-3 py-1 rounded">
+        Apply Filters
+      </button>
+    </div>
+    <div v-if="loading" class="text-gray-600">Loading...</div>
+    <div v-else-if="error" class="text-red-600">Failed to load POAM items</div>
+    <table v-else class="min-w-full border rounded">
+      <thead>
+        <tr class="bg-gray-100 text-left text-sm">
+          <th class="p-2 border">Title</th>
+          <th class="p-2 border">Status</th>
+          <th class="p-2 border">Deadline</th>
+          <th class="p-2 border">POC</th>
+          <th class="p-2 border">Updated</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in items" :key="item.id" class="text-sm">
+          <td class="p-2 border">{{ item.title }}</td>
+          <td class="p-2 border">{{ item.status }}</td>
+          <td class="p-2 border">{{ item.deadline ?? '-' }}</td>
+          <td class="p-2 border">
+            {{ item.pocName ?? '-' }}
+            <span v-if="item.pocEmail">({{ item.pocEmail }})</span>
+          </td>
+          <td class="p-2 border">{{ item.updatedAt }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect, computed } from 'vue';
+import { useApi } from '@/composables/api';
+
+type PoamItem = {
+  id: string;
+  sspId: string;
+  title: string;
+  description: string;
+  status: string;
+  deadline?: string | null;
+  resourceRequired?: string | null;
+  pocName?: string | null;
+  pocEmail?: string | null;
+  pocPhone?: string | null;
+  remarks?: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+type ListResponse = { data: PoamItem[] };
+
+const status = ref<string>('');
+const sspId = ref<string>('');
+const riskId = ref<string>('');
+const deadlineBefore = ref<string>('');
+
+const url = () => {
+  const params = new URLSearchParams();
+  if (status.value) params.set('status', status.value);
+  if (sspId.value) params.set('sspId', sspId.value);
+  if (riskId.value) params.set('riskId', riskId.value);
+  if (deadlineBefore.value) params.set('deadlineBefore', deadlineBefore.value);
+  const qs = params.toString();
+  return new Request(`/api/poam-items${qs ? `?${qs}` : ''}`, {
+    method: 'GET',
+    headers: new Headers(),
+  });
+};
+
+const data = ref<ListResponse>();
+const loading = ref<boolean>(true);
+const error = ref<boolean>(false);
+
+function load() {
+  loading.value = true;
+  error.value = false;
+  const { data: d, loading: l, error: e } = useApi<ListResponse>(url());
+  watchEffect(() => {
+    data.value = d.value;
+    loading.value = l.value;
+    error.value = e.value;
+  });
+}
+
+function refresh() {
+  load();
+}
+
+load();
+
+const items = computed(() => data.value?.data ?? []);
+</script>
+
+<style scoped></style>
diff --git a/src/views/profile/ProfileBuildPropsView.vue b/src/views/profile/ProfileBuildPropsView.vue
new file mode 100644
index 00000000..41aacbc8
--- /dev/null
+++ b/src/views/profile/ProfileBuildPropsView.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="p-6">
+    <PageHeader>Build Profile by Props</PageHeader>
+    <div class="mt-2">
+      <PageSubHeader
+        >Select controls from a catalog using prop rules</PageSubHeader
+      >
+    </div>
+
+    <div
+      class="mt-4 rounded-md bg-white dark:bg-slate-900 border border-ccf-300 dark:border-slate-700 p-4"
+    >
+      <form @submit.prevent="buildProfile">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium mb-1">Catalog UUID</label>
+            <input
+              v-model="catalogId"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+            />
+            <p
+              v-if="catalogId && !uuidRe.test(catalogId)"
+              class="text-red-600 text-xs mt-1"
+            >
+              Invalid UUID format
+            </p>
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1">Select Catalog</label>
+            <select
+              v-model="selectedCatalog"
+              @change="selectCatalog(selectedCatalog)"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+            >
+              <option value="" disabled>Select a catalog</option>
+              <option v-for="c in catalogs || []" :key="c.uuid" :value="c.uuid">
+                {{ c.metadata?.title || c.uuid }}
+              </option>
+            </select>
+            <p
+              v-if="!catalogs || catalogs.length === 0"
+              class="text-xs mt-1 text-gray-500"
+            >
+              No catalogs found. Import or create a catalog first.
+            </p>
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1">Match Strategy</label>
+            <select
+              v-model="matchStrategy"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+            >
+              <option value="any">any</option>
+              <option value="all">all</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1">Profile Title</label>
+            <input
+              v-model="title"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="Prop-Matched Profile"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1"
+              >Profile Version</label
+            >
+            <input
+              v-model="version"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="1.0.0"
+            />
+          </div>
+        </div>
+
+        <div class="mt-4">
+          <label class="block text-sm font-medium mb-2">Rules</label>
+          <div
+            v-for="(r, idx) in rules"
+            :key="idx"
+            class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-3"
+          >
+            <input
+              v-model="r.name"
+              class="rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="prop name (optional, e.g. class)"
+            />
+            <select
+              v-model="r.operator"
+              class="rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+            >
+              <option value="equals">equals</option>
+              <option value="contains">contains</option>
+              <option value="regex">regex</option>
+              <option value="in">in</option>
+            </select>
+            <input
+              v-model="r.value"
+              class="rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="value (e.g. technical)"
+            />
+            <button
+              type="button"
+              class="rounded bg-red-600 text-white px-3 py-2"
+              @click="removeRule(idx)"
+            >
+              Remove
+            </button>
+          </div>
+          <button
+            type="button"
+            class="rounded bg-slate-600 text-white px-3 py-2"
+            @click="addRule"
+          >
+            Add Rule
+          </button>
+        </div>
+
+        <div class="mt-6">
+          <PrimaryButton type="submit" :disabled="submitting || !canSubmit">
+            {{ submitting ? 'Building...' : 'Build Profile' }}
+          </PrimaryButton>
+        </div>
+      </form>
+    </div>
+
+    <div
+      v-if="result"
+      class="mt-4 rounded-md bg-white dark:bg-slate-900 border border-ccf-300 dark:border-slate-700 p-4"
+    >
+      <h3 class="text-lg font-medium mb-2">Result</h3>
+      <p class="mb-2">
+        Profile ID:
+        <router-link
+          :to="{ name: 'profile:view', params: { id: result.profileId } }"
+          class="text-blue-600"
+        >
+          {{ result.profileId }}
+        </router-link>
+      </p>
+      <p class="mb-2">Matched Control IDs: {{ result.controlIds.length }}</p>
+      <div class="mt-2">
+        <details>
+          <summary class="cursor-pointer">Show JSON</summary>
+          <pre class="overflow-auto text-xs mt-2">{{ prettyResult }}</pre>
+        </details>
+      </div>
+    </div>
+  </div>
+  <div class="h-screen w-full"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import PageHeader from '@/components/PageHeader.vue';
+import PageSubHeader from '@/components/PageSubHeader.vue';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import { useToast } from 'primevue/usetoast';
+import { useDataApi, decamelizeKeys } from '@/composables/axios';
+import type { AxiosHeaders } from 'axios';
+import type { Catalog } from '@/oscal';
+
+const toast = useToast();
+const uuidRe =
+  /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+
+const catalogId = ref<string>('');
+const { data: catalogs } = useDataApi<Catalog[]>('/api/oscal/catalogs');
+const selectedCatalog = ref<string>('');
+function selectCatalog(id: string) {
+  selectedCatalog.value = id;
+  catalogId.value = id;
+}
+watch(
+  catalogs,
+  (val) => {
+    if (val && val.length > 0 && !catalogId.value) {
+      selectedCatalog.value = val[0].uuid;
+      catalogId.value = val[0].uuid;
+    }
+  },
+  { immediate: true },
+);
+const matchStrategy = ref<'any' | 'all'>('any');
+const title = ref<string>('Prop-Matched Profile');
+const version = ref<string>('1.0.0');
+const rules = ref<Array<{ name: string; operator: string; value: string }>>([
+  { name: 'label', operator: 'contains', value: 'AC-' },
+]);
+const submitting = ref<boolean>(false);
+
+const canSubmit = computed(() => {
+  const rs = rules.value;
+  const hasValidRules =
+    rs.length > 0 &&
+    rs.every(
+      (r) =>
+        !!r.operator &&
+        typeof r.value === 'string' &&
+        r.value.trim().length > 0,
+    );
+  return uuidRe.test(catalogId.value) && hasValidRules;
+});
+
+function addRule() {
+  rules.value.push({ name: '', operator: 'equals', value: '' });
+}
+function removeRule(idx: number) {
+  rules.value.splice(idx, 1);
+}
+
+type BuildResponse = {
+  profileId: string;
+  controlIds: string[];
+  profile: Record<string, unknown>;
+};
+
+const { execute } = useDataApi<{
+  profileId: string;
+  controlIds: string[];
+  profile: unknown;
+}>(
+  '/api/oscal/profiles/build-props',
+  {
+    method: 'POST',
+    transformRequest: [
+      (data, headers) =>
+        decamelizeKeys(data, headers as unknown as AxiosHeaders),
+    ],
+  },
+  { immediate: false },
+);
+
+const result = ref<BuildResponse | null>(null);
+const prettyResult = computed(() =>
+  result.value ? JSON.stringify(result.value, null, 2) : '',
+);
+
+async function buildProfile() {
+  if (!canSubmit.value) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validation',
+      detail: 'Please enter a valid Catalog UUID and complete all rule fields.',
+      life: 2500,
+    });
+    return;
+  }
+  submitting.value = true;
+  try {
+    const payload = {
+      catalogId: catalogId.value,
+      matchStrategy: matchStrategy.value,
+      rules: rules.value,
+      title: title.value,
+      version: version.value,
+    };
+    const resp = await execute('/api/oscal/profiles/build-props', {
+      data: payload,
+    });
+    result.value = resp.data.value?.data as BuildResponse;
+    const count = result.value?.controlIds?.length ?? 0;
+    toast.add({
+      severity: count > 0 ? 'success' : 'info',
+      summary: 'Profile built',
+      detail: `Matched ${count} control(s)`,
+      life: 3000,
+    });
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: 'Build Failed',
+      detail:
+        error instanceof Error ? error.message : 'Failed to build profile',
+      life: 3000,
+    });
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
diff --git a/src/views/profile/ProfileList.vue b/src/views/profile/ProfileList.vue
index c7179ad9..2625fc89 100644
--- a/src/views/profile/ProfileList.vue
+++ b/src/views/profile/ProfileList.vue
@@ -1,5 +1,10 @@
 <template>
   <PageHeader>Profiles</PageHeader>
+  <div class="mt-2">
+    <PrimaryButton class="mr-2" @click="showBuildPropsDialog = true">
+      Build Profile by Props
+    </PrimaryButton>
+  </div>
   <div
     class="mt-4 overflow-hidden rounded-lg border border-ccf-300 bg-white shadow dark:border-slate-700 dark:bg-slate-900"
   >
@@ -64,20 +69,34 @@
     <RouterLinkButton :to="{ name: 'profile:create' }">
       Create New Profile
     </RouterLinkButton>
+    <PrimaryButton class="ml-2" @click="showBuildPropsDialog = true">
+      Build Profile by Props
+    </PrimaryButton>
   </div>
+  <Dialog
+    v-model:visible="showBuildPropsDialog"
+    modal
+    header="Build Profile by Props"
+  >
+    <ProfileBuildPropsView />
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
 import PageHeader from '@/components/PageHeader.vue';
 import { type Profile } from '@/oscal';
 import { useDataApi } from '@/composables/axios';
-import { watch } from 'vue';
+import { watch, ref } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import type { AxiosError } from 'axios';
 import type { ErrorResponse, ErrorBody } from '@/stores/types';
 import RouterLinkButton from '@/components/RouterLinkButton.vue';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import Dialog from '@/volt/Dialog.vue';
+import ProfileBuildPropsView from '@/views/profile/ProfileBuildPropsView.vue';
 
 const toast = useToast();
+const showBuildPropsDialog = ref<boolean>(false);
 
 const {
   data: profiles,