diff --git a/Library/Components/Common/ErrorBoundary.tsx b/Library/Components/Common/ErrorBoundary.tsx
deleted file mode 100644
index 4b4c9b4e..00000000
--- a/Library/Components/Common/ErrorBoundary.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { Component, ErrorInfo, ReactNode } from 'react';
-
-interface Props {
-    children: ReactNode;
-}
-interface State {
-    hasError: boolean;
-    error: Error;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-    public state: State = {
-        hasError: false,
-        error: new Error(),
-    };
-
-    public static getDerivedStateFromError(error: Error): State {
-        return { hasError: true, error: error };
-    }
-
-    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        console.error('Uncaught error:', error, errorInfo);
-    }
-
-    public render() {
-        if (this.state.hasError) {
-            return (
-                <div className='p-4'>
-                    <h1 className='text-3xl m-3'>Error</h1>
-                    <p>{this.state.error.message}</p>
-                    <p>{this.state.error.stack}</p>
-                </div>
-            );
-        }
-
-        return this.props.children;
-    }
-}
diff --git a/Library/Components/Common/FormElement.tsx b/Library/Components/Common/FormElement.tsx
deleted file mode 100644
index 9a02a9a9..00000000
--- a/Library/Components/Common/FormElement.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-export interface FormElementProps {
-    children: React.ReactNode;
-    icon: React.ReactNode;
-}
-
-export const FormElement = (props: FormElementProps) => {
-    return (
-        <div className="card flex flex-column md:flex-row gap-3">
-            <div className="p-inputgroup flex-1">
-                <span className="p-inputgroup-addon">
-                    {props.icon}
-                </span>
-                {props.children}
-            </div>
-        </div>
-    )
-}
diff --git a/Library/Components/Common/Page.tsx b/Library/Components/Common/Page.tsx
deleted file mode 100644
index 84e3eb3b..00000000
--- a/Library/Components/Common/Page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { HTMLAttributes, ReactNode } from 'react';
-
-export interface PageProps extends HTMLAttributes<HTMLDivElement> {
-    title: string;
-    children?: ReactNode;
-}
-
-export const Page = ({ title, children, ...rest }: PageProps) => {
-    return (
-        <div className='flex flex-col h-full' {...rest}>
-            <h1 className='text-3xl mt-3 mb-4'>{title}</h1>
-            <main className={`panel overflow-hidden h-full flex flex-col flex-1`}>
-                {children}
-            </main>
-        </div>
-    );
-};
diff --git a/Library/Components/Common/index.ts b/Library/Components/Common/index.ts
index 4e6c08ab..3510a182 100644
--- a/Library/Components/Common/index.ts
+++ b/Library/Components/Common/index.ts
@@ -1,6 +1,5 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export * from './ErrorBoundary';
-export * from './Page';
-export * from './FormElement';
+export * from '@cratis/components/Common';
+
diff --git a/Library/Components/DataPage/DataPage.tsx b/Library/Components/DataPage/DataPage.tsx
deleted file mode 100644
index 1cd7ea02..00000000
--- a/Library/Components/DataPage/DataPage.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { ReactNode, useMemo } from 'react';
-import { Page } from '../Common/Page';
-import React from 'react';
-import { MenuItem as PrimeMenuItem } from 'primereact/menuitem';
-import { Menubar } from 'primereact/menubar';
-import { IObservableQueryFor, IQueryFor, QueryFor } from '@cratis/arc/queries';
-import { DataTableForObservableQuery } from '../DataTables/DataTableForObservableQuery';
-import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
-import { DataTableForQuery } from '../DataTables/DataTableForQuery';
-import { Allotment } from 'allotment';
-import { Constructor } from '@cratis/fundamentals';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export interface MenuItemProps extends PrimeMenuItem {
-    disableOnUnselected?: boolean;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const MenuItem = (_: MenuItemProps) => {
-    return null;
-};
-
-export interface MenuItemsProps {
-    children: ReactNode;
-}
-
-export interface ColumnProps {
-    children: ReactNode;
-}
-
-export const MenuItems = ({ children }: MenuItemsProps) => {
-    const context = React.useContext(DataPageContext);
-
-    const isDisabled = useMemo(() => {
-        return !context.selectedItem;
-    }, [context.selectedItem]);
-
-    const items = useMemo(() => {
-        const menuItems: PrimeMenuItem[] = [];
-        React.Children.forEach(children, (child) => {
-            if (React.isValidElement<MenuItemProps>(child) && child.type == MenuItem) {
-                const Icon = child.props.icon;
-                const menuItem = { ...child.props };
-                menuItem.icon = <Icon className='mr-2' />;
-                menuItem.disabled = isDisabled && child.props.disableOnUnselected;
-                menuItems.push(menuItem);
-            }
-        });
-
-        return menuItems;
-    }, [children, context.selectedItem]);
-
-    return (
-        <div className="px-4 py-2">
-            <Menubar aria-label="Actions" model={items} />
-        </div>);
-};
-
-export const Columns = ({ children }: ColumnProps) => {
-
-    const context = React.useContext(DataPageContext);
-
-    if (context.query.prototype instanceof QueryFor) {
-        return (
-            <DataTableForQuery {...context} selection={context.selectedItem} onSelectionChange={context.onSelectionChanged}>
-                {children}
-            </DataTableForQuery>);
-
-    } else {
-        return (
-            <DataTableForObservableQuery {...context} selection={context.selectedItem} onSelectionChange={context.onSelectionChanged}>
-                {children}
-            </DataTableForObservableQuery>);
-    }
-};
-
-export interface IDetailsComponentProps<TDataType> {
-    item: TDataType;
-
-}
-
-interface IDataPageContext extends DataPageProps<any, any, any> {
-    selectedItem: any;
-    onSelectionChanged: (e: DataTableSelectionSingleChangeEvent<any>) => void;
-}
-
-const DataPageContext = React.createContext<IDataPageContext>(null as any);
-
-/**
- * Props for the DataPage component
- */
-export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType>, TDataType, TArguments> {
-    /**
-     * The title of the page
-     */
-    title: string;
-
-    /**
-     * Children to render, for this it means menu items and columns. Use <DataPage.MenuItems> and <DataPage.Columns> for this.
-     */
-    children: ReactNode;
-
-    /**
-     * Component to render when the selection changes
-     */
-    detailsComponent?: React.FC<IDetailsComponentProps<any>>;
-
-    /**
-     * The type of query to use
-     */
-    query: Constructor<TQuery>;
-
-    /**
-     * Optional arguments to pass to the query
-     */
-    queryArguments?: TArguments;
-
-    /**
-     * The message to show when there is no data
-     */
-    emptyMessage: string;
-
-    /**
-     * The key to use for the data
-     */
-    dataKey?: string | undefined;
-
-    /**
-     * The current selection.
-     */
-    selection?: any[number] | undefined | null;
-
-    /**
-     * Callback for when the selection changes
-     */
-    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<any>): void;
-
-    /**
-     * Fields to use for global filtering
-     */
-    globalFilterFields?: string[] | undefined;
-
-    /**
-     * Default filters to use
-     */
-    defaultFilters?: DataTableFilterMeta;
-}
-
-/**
- * Represents a data driven page with a menu and custom defined columns for the data table.
- * @param props Props for the DataPage component
- * @returns Function to render the DataPage component
- */
-const DataPage = <TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType, TArguments>, TDataType, TArguments extends object>(props: DataPageProps<TQuery, TDataType, TArguments>) => {
-    const [selectedItem, setSelectedItem] = React.useState(undefined);
-
-    const selectionChanged = (e: DataTableSelectionSingleChangeEvent<any>) => {
-        setSelectedItem(e.value);
-        if (props.onSelectionChange) {
-            props.onSelectionChange(e);
-        }
-    };
-
-    const context = { ...props, selectedItem, onSelectionChanged: selectionChanged };
-
-    return (
-        <DataPageContext.Provider value={context}>
-            <Page title={props.title}>
-                <Allotment className="h-full" proportionalLayout={false}>
-                    <Allotment.Pane className="flex-grow">
-                        {props.children}
-                    </Allotment.Pane>
-                    {props.detailsComponent && selectedItem &&
-                        <Allotment.Pane preferredSize="450px">
-                            <props.detailsComponent item={selectedItem} />
-                        </Allotment.Pane>
-                    }
-                </Allotment>
-            </Page>
-        </DataPageContext.Provider>
-    );
-};
-
-DataPage.MenuItems = MenuItems;
-DataPage.Columns = Columns;
-
-export { DataPage };
diff --git a/Library/Components/DataPage/index.ts b/Library/Components/DataPage/index.ts
index a0998764..d6f5424e 100644
--- a/Library/Components/DataPage/index.ts
+++ b/Library/Components/DataPage/index.ts
@@ -1,4 +1,5 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export * from './DataPage';
+export * from '@cratis/components/DataPage';
+
diff --git a/Library/Components/DataTables/DataTableForObservableQuery.tsx b/Library/Components/DataTables/DataTableForObservableQuery.tsx
deleted file mode 100644
index 105773f0..00000000
--- a/Library/Components/DataTables/DataTableForObservableQuery.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
-import { Constructor } from '@cratis/fundamentals';
-import { IObservableQueryFor, Paging } from '@cratis/arc/queries';
-import { useObservableQueryWithPaging } from '@cratis/arc.react/queries';
-import { ReactNode, useState } from 'react';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/**
- * Props for the DataTableForQuery component
- */
-export interface DataTableForObservableQueryProps<TQuery extends IObservableQueryFor<TDataType>, TDataType, TArguments> {
-    /**
-     * Children to render
-     */
-    children?: ReactNode;
-
-    /**
-     * The type of query to use
-     */
-    query: Constructor<TQuery>;
-
-    /**
-     * Optional arguments to pass to the query
-     */
-    queryArguments?: TArguments;
-
-    /**
-     * The message to show when there is no data
-     */
-    emptyMessage: string;
-
-    /**
-     * The key to use for the data
-     */
-    dataKey?: string | undefined;
-
-    /**
-     * The current selection.
-     */
-    selection?: any[number] | undefined | null;
-
-    /**
-     * Callback for when the selection changes
-     */
-    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<any>): void;
-
-    /**
-     * Fields to use for global filtering
-     */
-    globalFilterFields?: string[] | undefined;
-
-    /**
-     * Default filters to use
-     */
-    defaultFilters?: DataTableFilterMeta;
-}
-
-const paging = new Paging(0, 20);
-
-/**
- * Represents a DataTable for a query.
- * @param props Props for the component
- * @returns Function to render the DataTableForQuery component
- */
-export const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => {
-    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});
-    const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);
-
-    return (
-        <DataTable
-            value={result.data as any}
-            lazy
-            rows={paging.pageSize}
-            totalRecords={result.paging.totalItems}
-            paginator
-            alwaysShowPaginator={false}
-            first={result.paging.page * paging.pageSize}
-            onPage={(e) => setPage(e.page ?? 0)}
-            scrollable
-            scrollHeight={'flex'}
-            selectionMode='single'
-            selection={props.selection}
-            onSelectionChange={props.onSelectionChange}
-            dataKey={props.dataKey}
-            filters={filters}
-            filterDisplay='menu'
-            onFilter={(e) => setFilters(e.filters)}
-            globalFilterFields={props.globalFilterFields}
-            emptyMessage={props.emptyMessage}>
-            {props.children}
-        </DataTable>
-    );
-};
diff --git a/Library/Components/DataTables/DataTableForQuery.tsx b/Library/Components/DataTables/DataTableForQuery.tsx
deleted file mode 100644
index 6a5793bc..00000000
--- a/Library/Components/DataTables/DataTableForQuery.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
-import { Constructor } from '@cratis/fundamentals';
-import { IQueryFor, Paging } from '@cratis/arc/queries';
-import { useQueryWithPaging } from '@cratis/arc.react/queries';
-import { ReactNode, useState } from 'react';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/**
- * Props for the DataTableForQuery component
- */
-export interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType>, TDataType, TArguments> {
-    /**
-     * Children to render
-     */
-    children?: ReactNode;
-
-    /**
-     * The type of query to use
-     */
-    query: Constructor<TQuery>;
-
-    /**
-     * Optional Arguments to pass to the query
-     */
-    queryArguments?: TArguments;
-
-    /**
-     * The message to show when there is no data
-     */
-    emptyMessage: string;
-
-    /**
-     * The key to use for the data
-     */
-    dataKey?: string | undefined;
-
-    /**
-     * The current selection.
-     */
-    selection?: any[number] | undefined | null;
-
-    /**
-     * Callback for when the selection changes
-     */
-    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<any>): void;
-
-    /**
-     * Fields to use for global filtering
-     */
-    globalFilterFields?: string[] | undefined;
-
-    /**
-     * Default filters to use
-     */
-    defaultFilters?: DataTableFilterMeta;
-}
-
-const paging = new Paging(0, 20);
-
-/**
- * Represents a DataTable for a query.
- * @param props Props for the component
- * @returns Function to render the DataTableForQuery component
- */
-export const DataTableForQuery = <TQuery extends IQueryFor<TDataType, TArguments>, TDataType, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => {
-    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});
-    const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);
-
-    return (
-        <DataTable
-            value={result.data as any}
-            lazy
-            rows={paging.pageSize}
-            totalRecords={result.paging.totalItems}
-            paginator
-            alwaysShowPaginator={false}
-            first={result.paging.page * paging.pageSize}
-            onPage={(e) => setPage(e.page ?? 0)}
-            scrollable
-            scrollHeight={'flex'}
-            selectionMode='single'
-            selection={props.selection}
-            onSelectionChange={props.onSelectionChange}
-            dataKey={props.dataKey}
-            filters={filters}
-            filterDisplay='menu'
-            onFilter={(e) => setFilters(e.filters)}
-            globalFilterFields={props.globalFilterFields}
-            emptyMessage={props.emptyMessage} >
-            {props.children}
-        </DataTable >
-    );
-};
diff --git a/Library/Components/DataTables/index.ts b/Library/Components/DataTables/index.ts
index c9d4a93d..34af600b 100644
--- a/Library/Components/DataTables/index.ts
+++ b/Library/Components/DataTables/index.ts
@@ -1,5 +1,5 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export * from './DataTableForQuery';
-export * from './DataTableForObservableQuery';
+export * from '@cratis/components/DataTables';
+
diff --git a/Library/Components/Dialogs/BusyIndicatorDialog.tsx b/Library/Components/Dialogs/BusyIndicatorDialog.tsx
deleted file mode 100644
index ab367e0e..00000000
--- a/Library/Components/Dialogs/BusyIndicatorDialog.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { Dialog } from 'primereact/dialog';
-import { BusyIndicatorDialogRequest } from '@cratis/arc.react/dialogs';
-import { ProgressSpinner } from 'primereact/progressspinner';
-
-export const BusyIndicatorDialog = (props: BusyIndicatorDialogRequest) => {
-
-    const headerElement = (
-        <div className="inline-flex align-items-center justify-content-center gap-2">
-            <span className="font-bold white-space-nowrap">{props.title}</span>
-        </div>
-    );
-
-    return (
-        <>
-            <Dialog header={headerElement} modal visible={true} onHide={() => { }}>
-                <ProgressSpinner />
-                <p className="m-0">
-                    {props.message}
-                </p>
-            </Dialog>
-        </>
-    );
-};
diff --git a/Library/Components/Dialogs/ConfirmationDialog.tsx b/Library/Components/Dialogs/ConfirmationDialog.tsx
deleted file mode 100644
index 7d342527..00000000
--- a/Library/Components/Dialogs/ConfirmationDialog.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { Dialog } from 'primereact/dialog';
-import { DialogButtons, ConfirmationDialogRequest } from '@cratis/arc.react/dialogs';
-import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
-import { Button } from 'primereact/button';
-
-export const ConfirmationDialog = () => {
-    const { request, closeDialog } = useDialogContext<ConfirmationDialogRequest>();
-
-    const headerElement = (
-        <div className="inline-flex align-items-center justify-content-center gap-2">
-            <span className="font-bold white-space-nowrap">{request.title}</span>
-        </div>
-    );
-
-    const okFooter = (
-        <>
-            <Button label="Ok" icon="pi pi-check" onClick={() => closeDialog(DialogResult.Ok)} autoFocus />
-        </>
-    );
-
-    const okCancelFooter = (
-        <>
-            <Button label="Ok" icon="pi pi-check" onClick={() => closeDialog(DialogResult.Ok)} autoFocus />
-            <Button label="Cancel" icon="pi pi-times" severity='secondary' onClick={() => closeDialog(DialogResult.Cancelled)} />
-        </>
-    );
-
-    const yesNoFooter = (
-        <>
-            <Button label="Yes" icon="pi pi-check" onClick={() => closeDialog(DialogResult.Yes)} autoFocus />
-            <Button label="No" icon="pi pi-times" severity='secondary' onClick={() => closeDialog(DialogResult.No)} />
-        </>
-    );
-
-    const yesNoCancelFooter = (
-        <>
-            <Button label="Yes" icon="pi pi-check" onClick={() => closeDialog(DialogResult.Yes)} autoFocus />
-            <Button label="No" icon="pi pi-times" severity='secondary' onClick={() => closeDialog(DialogResult.No)} />
-        </>
-    );
-
-    const getFooterInterior = () => {
-        switch (request.buttons) {
-            case DialogButtons.Ok:
-                return okFooter;
-            case DialogButtons.OkCancel:
-                return okCancelFooter;
-            case DialogButtons.YesNo:
-                return yesNoFooter;
-            case DialogButtons.YesNoCancel:
-                return yesNoCancelFooter;
-        }
-
-        return (<></>);
-    };
-
-    const footer = (
-        <div className="card flex flex-wrap justify-content-center gap-3">
-            {getFooterInterior()}
-        </div>
-    );
-
-    return (
-        <>
-            <Dialog header={headerElement} modal footer={footer} onHide={() => closeDialog(DialogResult.Cancelled)} visible={true}>
-                <p className="m-0">
-                    {request.message}
-                </p>
-            </Dialog>
-        </>
-    );
-};
diff --git a/Library/Components/Dialogs/index.ts b/Library/Components/Dialogs/index.ts
index 1784f061..2281c09a 100644
--- a/Library/Components/Dialogs/index.ts
+++ b/Library/Components/Dialogs/index.ts
@@ -1,5 +1,5 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export * from './ConfirmationDialog';
-export * from './BusyIndicatorDialog';
+export * from '@cratis/components/Dialogs';
+
diff --git a/Library/Features/Authors/Authors.tsx b/Library/Features/Authors/Authors.tsx
index 7baa2fce..b541aeb6 100644
--- a/Library/Features/Authors/Authors.tsx
+++ b/Library/Features/Authors/Authors.tsx
@@ -6,7 +6,7 @@ import { MenuItem } from 'primereact/menuitem';
 import * as mdIcons from 'react-icons/md';
 import { AddAuthor } from './Registration';
 import { Listing } from './Listing/Listing';
-import { DialogResult, useDialog } from '@cratis/arc.react/dialogs';
+import { useDialog } from '@cratis/arc.react/dialogs';
 import { Page } from '../../Components/Common';
 
 export const Authors = () => {
@@ -23,7 +23,7 @@ export const Authors = () => {
     ];
 
     return (
-        <Page title="Authors">
+        <Page title="Authors" panel>
             <Menubar model={menuItems} />
             <Listing />
 
diff --git a/Library/Features/Authors/Registration/AddAuthor.tsx b/Library/Features/Authors/Registration/AddAuthor.tsx
index 356b0d33..8a9156f7 100644
--- a/Library/Features/Authors/Registration/AddAuthor.tsx
+++ b/Library/Features/Authors/Registration/AddAuthor.tsx
@@ -1,39 +1,22 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Button } from 'primereact/button';
-import { Dialog } from 'primereact/dialog';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
-import { InputText } from 'primereact/inputtext';
 import { RegisterAuthor } from './RegisterAuthor';
-import { useState } from 'react';
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { InputTextField } from '@cratis/components/CommandForm';
 
 export const AddAuthor = () => {
-    const [name, setName] = useState<string>('');
     const { closeDialog } = useDialogContext();
-    const [registerAuthor] = RegisterAuthor.use();
-
-    const handleAdd = async () => {
-        registerAuthor.name = name;
-        await registerAuthor.execute();
-        closeDialog(DialogResult.Ok);
-    };
 
     return (
-        <Dialog header="Register author" visible={true} style={{ width: '50vw' }} onHide={() => closeDialog(DialogResult.Cancelled)}>
-            <div className="card flex flex-column md:flex-row gap-3">
-                <div className="p-inputgroup flex-1">
-                    <span className="p-inputgroup-addon">
-                        <i className="pi pi-user"></i>
-                    </span>
-                    <InputText placeholder="Name" value={name} onChange={e => setName(e.target.value)} />
-                </div>
-            </div>
-
-            <div className="card flex flex-wrap justify-content-center gap-3 mt-8">
-                <Button label="Add" icon="pi pi-check" onClick={handleAdd} autoFocus />
-                <Button label="Cancel" icon="pi pi-times" severity='secondary' onClick={() => closeDialog(DialogResult.Cancelled)} />
-            </div>
-        </Dialog>
+        <CommandDialog
+            command={RegisterAuthor}
+            visible={true}
+            header="Register author"
+            onConfirm={() => closeDialog(DialogResult.Ok)}
+            onCancel={() => closeDialog(DialogResult.Cancelled)}>
+            <InputTextField<RegisterAuthor> value={c => c.name} title="Name" placeholder="Name" />
+        </CommandDialog>
     );
 };
diff --git a/Library/Features/Inventory/Adding/AddBook.tsx b/Library/Features/Inventory/Adding/AddBook.tsx
index 792e9377..93198f0a 100644
--- a/Library/Features/Inventory/Adding/AddBook.tsx
+++ b/Library/Features/Inventory/Adding/AddBook.tsx
@@ -1,66 +1,34 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Button } from 'primereact/button';
-import { Dialog } from 'primereact/dialog';
 import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
-import { InputText } from 'primereact/inputtext';
 import { AddBookTitleToInventory } from './AddBookTitleToInventory';
-import { useState } from 'react';
-import { Guid } from '@cratis/fundamentals';
 import { AllAuthors } from '../../Authors/Listing/AllAuthors';
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { InputTextField, NumberField, DropdownField } from '@cratis/components/CommandForm';
 
 export const AddBook = () => {
-    const [title, setTitle] = useState('');
-    const [ISBN, setISBN] = useState('');
-    const [count, setCount] = useState('');
-    const [authorId, setAuthorId] = useState(Guid.empty);
     const { closeDialog } = useDialogContext();
-    const [command] = AddBookTitleToInventory.use();
-    const [authors]  = AllAuthors.use();
-
-    const handleAdd = async () => {
-        command.title = title;
-        command.ISBN = ISBN;
-        command.authorId = authors.data[0]?.id || Guid.empty;
-        command.title = title;
-        await command.execute();
-        closeDialog(DialogResult.Ok);
-    };
+    const [authors] = AllAuthors.use();
 
     return (
-        <Dialog header="Add author" visible={true} style={{ width: '50vw' }} onHide={() => closeDialog(DialogResult.Cancelled)}>
-            <div className="card flex flex-column md:flex-row gap-3">
-                <div className="p-inputgroup flex-1">
-                    <span className="p-inputgroup-addon">
-                        <i className="pi pi-user"></i>
-                    </span>
-                    <InputText placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
-                </div>
-            </div>
-
-            <div className="card flex flex-column md:flex-row gap-3">
-                <div className="p-inputgroup flex-1">
-                    <span className="p-inputgroup-addon">
-                        <i className="pi pi-user"></i>
-                    </span>
-                    <InputText placeholder="ISBN" value={ISBN} onChange={e => setISBN(e.target.value)} />
-                </div>
-            </div>
-
-            <div className="card flex flex-column md:flex-row gap-3">
-                <div className="p-inputgroup flex-1">
-                    <span className="p-inputgroup-addon">
-                        <i className="pi pi-user"></i>
-                    </span>
-                    <InputText placeholder="Count" value={count} onChange={e => setCount(e.target.value)} />
-                </div>
-            </div>
-
-            <div className="card flex flex-wrap justify-content-center gap-3 mt-8">
-                <Button label="Add" icon="pi pi-check" onClick={handleAdd} autoFocus />
-                <Button label="Cancel" icon="pi pi-times" severity='secondary' onClick={() => closeDialog(DialogResult.Cancelled)} />
-            </div>
-        </Dialog>
+        <CommandDialog
+            command={AddBookTitleToInventory}
+            visible={true}
+            header="Add book"
+            onConfirm={() => closeDialog(DialogResult.Ok)}
+            onCancel={() => closeDialog(DialogResult.Cancelled)}>
+            <InputTextField<AddBookTitleToInventory> value={c => c.title} title="Title" placeholder="Title" />
+            <InputTextField<AddBookTitleToInventory> value={c => c.ISBN} title="ISBN" placeholder="ISBN" />
+            <NumberField<AddBookTitleToInventory> value={c => c.count} title="Count" placeholder="Count" />
+            <DropdownField<AddBookTitleToInventory>
+                value={c => c.authorId}
+                title="Author"
+                options={authors.data}
+                optionValue="id"
+                optionLabel="name"
+                placeholder="Select an author"
+            />
+        </CommandDialog>
     );
 };
diff --git a/Library/Features/Inventory/Inventory.tsx b/Library/Features/Inventory/Inventory.tsx
index b8656aa2..6841ecf0 100644
--- a/Library/Features/Inventory/Inventory.tsx
+++ b/Library/Features/Inventory/Inventory.tsx
@@ -6,7 +6,7 @@ import { MenuItem } from 'primereact/menuitem';
 import * as mdIcons from 'react-icons/md';
 import { AddBook } from './Adding/AddBook';
 import { Listing } from './Listing/Listing';
-import { DialogResult, useDialog } from '@cratis/arc.react/dialogs';
+import { useDialog } from '@cratis/arc.react/dialogs';
 import { Page } from '../../Components/Common';
 
 export const Inventory = () => {
@@ -23,7 +23,7 @@ export const Inventory = () => {
     ];
 
     return (
-        <Page title="Books">
+        <Page title="Books" panel>
             <Menubar model={menuItems} />
             <Listing />
 
diff --git a/Library/Layout/Default/DefaultLayout.tsx b/Library/Layout/Default/DefaultLayout.tsx
index b9dd8c2d..769792cc 100644
--- a/Library/Layout/Default/DefaultLayout.tsx
+++ b/Library/Layout/Default/DefaultLayout.tsx
@@ -9,7 +9,7 @@ import { SidebarMenu } from './Sidebar/SidebarMenu';
 import css from './DefaultLayout.module.css';
 import { TopBar } from './TopBar/TopBar';
 import { Footer } from './Footer';
-import { ErrorBoundary } from 'Components/Common/ErrorBoundary';
+import { ErrorBoundary } from '@cratis/components/Common';
 import { useContext, useState } from 'react';
 
 interface IDefaultLayoutProps {
diff --git a/Library/package.json b/Library/package.json
index 02ebabb8..0e0da955 100644
--- a/Library/package.json
+++ b/Library/package.json
@@ -22,6 +22,7 @@
     "@cratis/arc.react": "19.5.8",
     "@cratis/arc.react.mvvm": "19.5.8",
     "@cratis/arc.vite": "19.5.8",
+    "@cratis/components": "^1.0.3",
     "allotment": "1.20.5",
     "echarts": "6.0.0",
     "mobx": "6.15.0",