diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index fbee64d..0d90d61 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -21,13 +21,7 @@ export const App = () => (
     <StacApiProvider apiUrl={process.env.REACT_APP_STAC_API!}>
       <PluginConfigProvider config={config}>
         <Router>
-          <Container
-            mx='auto'
-            p='5'
-            bgColor='white'
-            boxShadow='md'
-            maxW='container.lg'
-          >
+          <Container mx='auto' p='5' bgColor='white' maxW='container.lg'>
             <Box
               as='header'
               borderBottom='1px dashed'
diff --git a/packages/client/src/pages/CollectionForm/EditForm.tsx b/packages/client/src/pages/CollectionForm/EditForm.tsx
new file mode 100644
index 0000000..788646e
--- /dev/null
+++ b/packages/client/src/pages/CollectionForm/EditForm.tsx
@@ -0,0 +1,151 @@
+import React, { useMemo, useState } from 'react';
+import {
+  PluginBox,
+  useCollectionPlugins,
+  WidgetRenderer
+} from '@stac-manager/data-core';
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text
+} from '@chakra-ui/react';
+import { Formik, FormikHelpers } from 'formik';
+import { WidgetJSON } from '@stac-manager/data-widgets';
+
+type FormView = 'fields' | 'json';
+
+export function EditForm(props: {
+  initialData?: any;
+  onSubmit: (data: any, formikHelpers: FormikHelpers<any>) => void;
+}) {
+  const { initialData, onSubmit } = props;
+  const [stacData, setStacData] = useState(initialData || {});
+
+  const { plugins, formData, toOutData, isLoading } =
+    useCollectionPlugins(stacData);
+
+  const [view, setView] = useState<FormView>('fields');
+
+  const editorData = useMemo(
+    () => (view === 'json' ? { jsonData: stacData } : formData),
+    [view, formData]
+  );
+
+  return (
+    <Box>
+      {isLoading ? (
+        <Box>Loading plugins...</Box>
+      ) : (
+        <Flex direction='column' gap={4}>
+          <Formik
+            validateOnChange={false}
+            validateOnBlur={false}
+            enableReinitialize
+            initialValues={editorData}
+            onSubmit={(values, actions) => {
+              const exitData =
+                view === 'json' ? values.jsonData : toOutData(values);
+              return onSubmit(exitData, actions);
+            }}
+          >
+            {({ handleSubmit, values, isSubmitting }) => (
+              <Flex
+                as='form'
+                direction='column'
+                gap={4}
+                // @ts-expect-error Can't detect the as=form and throws error
+                onSubmit={handleSubmit}
+              >
+                <Flex
+                  gap={4}
+                  p={4}
+                  borderRadius='lg'
+                  bg='base.50'
+                  justifyContent='space-between'
+                  position='sticky'
+                  top={0}
+                  zIndex={100}
+                  boxShadow='md'
+                >
+                  <Box>
+                    <Text fontSize='sm'>
+                      {initialData && 'Edit '}Collection
+                    </Text>
+                    <Heading>
+                      {initialData
+                        ? initialData.title || 'Untitled'
+                        : 'New Collection'}
+                    </Heading>
+                  </Box>
+                  <Button
+                    type='submit'
+                    isDisabled={isSubmitting}
+                    colorScheme='primary'
+                    size='md'
+                    alignSelf='flex-end'
+                    flexShrink={0}
+                  >
+                    {initialData ? 'Save' : 'Create'}
+                  </Button>
+                </Flex>
+                <Tabs
+                  isLazy
+                  variant='enclosed'
+                  index={view === 'fields' ? 0 : 1}
+                  onChange={(i) => {
+                    setView(['fields', 'json'][i] as FormView);
+                    setStacData(
+                      view === 'json' ? values.jsonData : toOutData(values)
+                    );
+                  }}
+                >
+                  <TabList>
+                    <Tab bg='base.50a'>FORM</Tab>
+                    <Tab>JSON</Tab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel p={0} display='flex' flexFlow='column' gap={4}>
+                      {view === 'fields' &&
+                        plugins.map((pl) => (
+                          <PluginBox key={pl.name} plugin={pl}>
+                            {({ field }) => (
+                              <Box
+                                p='16'
+                                borderRadius='lg'
+                                bg='base.50a'
+                                display='flex'
+                                flexDir='column'
+                                gap={8}
+                              >
+                                <Heading size='sm'>{pl.name}</Heading>
+                                <WidgetRenderer pointer='' field={field} />
+                              </Box>
+                            )}
+                          </PluginBox>
+                        ))}
+                    </TabPanel>
+                    <TabPanel p={0} pt={4}>
+                      {view === 'json' && (
+                        <WidgetJSON
+                          field={{ type: 'json', label: 'Json Document' }}
+                          pointer='jsonData'
+                        />
+                      )}
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
+              </Flex>
+            )}
+          </Formik>
+        </Flex>
+      )}
+    </Box>
+  );
+}
diff --git a/packages/client/src/pages/CollectionForm/index.tsx b/packages/client/src/pages/CollectionForm/index.tsx
index 1443320..5e250c6 100644
--- a/packages/client/src/pages/CollectionForm/index.tsx
+++ b/packages/client/src/pages/CollectionForm/index.tsx
@@ -1,144 +1,148 @@
-import React, { useMemo, useState } from 'react';
-import {
-  Plugin,
-  PluginBox,
-  useCollectionPlugins,
-  WidgetRenderer
-} from '@stac-manager/data-core';
-import { Box, Button, Flex, Heading, Textarea } from '@chakra-ui/react';
-import useUpdateCollection from './useUpdateCollection';
-import { Field, FieldProps, Formik } from 'formik';
-import { WidgetJSON } from '@stac-manager/data-widgets';
-
-interface CollectionFormProps {}
-
-type FormView = 'fields' | 'json';
-type FormAction = 'submit' | 'switch-view';
-
-export function CollectionForm(props: CollectionFormProps) {
-  const [stacData, setStacData] = useState({});
-
-  const { plugins, formData, toOutData, isLoading } =
-    useCollectionPlugins(stacData);
-
-  const [view, setView] = useState<FormView>('fields');
-
-  const onAction: EditFormProps['onAction'] = (action, { view, data }) => {
-    console.log(action, view, data);
-    if (action === 'submit') {
-      const exitData =
-        view === 'json' ? JSON.parse(data.jsonData) : toOutData(data);
-      console.log('🚀 ~ onSubmit ~ exitData:', exitData);
-    } else if (action === 'switch-view') {
-      if (view === 'json') {
-        console.log('data.jsonData', data.jsonData);
-        setStacData(data.jsonData);
-        setView('fields');
-      } else {
-        const d = toOutData(data);
-        console.log('d', d);
-        setStacData(d);
-        setView('json');
-      }
-    }
-  };
+import React, { useEffect, useState } from 'react';
+import { Box, useToast } from '@chakra-ui/react';
+import { FormikHelpers } from 'formik';
+import { useParams } from 'react-router-dom';
+import { useCollection } from '@developmentseed/stac-react';
+import { StacCollection } from 'stac-ts';
 
-  const editorData = useMemo(
-    () =>
-      view === 'json'
-        ? // ? { jsonData: JSON.stringify(stacData, null, 2) }
-          { jsonData: stacData }
-        : formData,
-    [view, formData]
-  );
+import usePageTitle from '$hooks/usePageTitle';
+import Api from 'src/api';
+import { EditForm } from './EditForm';
+
+export function CollectionForm() {
+  const { collectionId } = useParams();
 
-  console.log('🚀 ~ CollectionForm ~ editorData:', editorData);
-  return (
-    <Box>
-      {isLoading ? (
-        <Box>Loading plugins...</Box>
-      ) : (
-        <EditForm
-          data={editorData}
-          plugins={plugins}
-          onAction={onAction}
-          view={view}
-        />
-      )}
-    </Box>
+  return collectionId ? (
+    <CollectionFormEdit id={collectionId} />
+  ) : (
+    <CollectionFormNew />
   );
 }
 
-interface EditFormProps {
-  data: Record<string, any>;
-  plugins: Plugin[];
-  onAction: (
-    action: FormAction,
-    { view, data }: { view: FormView; data: any }
-  ) => void;
-  view: FormView;
+export function CollectionFormNew() {
+  usePageTitle('New collection');
+
+  const toast = useToast();
+
+  const onSubmit = async (data: any, formikHelpers: FormikHelpers<any>) => {
+    try {
+      toast({
+        id: 'collection-submit',
+        title: 'Creating collection...',
+        status: 'loading',
+        duration: null,
+        position: 'bottom-right'
+      });
+
+      await collectionTransaction().create(data);
+
+      toast.update('collection-submit', {
+        title: 'Collection created',
+        status: 'success',
+        duration: 5000,
+        isClosable: true
+      });
+    } catch (error: any) {
+      toast.update('collection-submit', {
+        title: 'Collection creation failed',
+        description: error.detail?.code,
+        status: 'error',
+        duration: 8000,
+        isClosable: true
+      });
+    }
+    formikHelpers.setSubmitting(false);
+  };
+
+  return <EditForm onSubmit={onSubmit} />;
 }
 
-export function EditForm({ plugins, data, onAction, view }: EditFormProps) {
-  return (
-    <Flex direction='column' gap={4}>
-      <Formik
-        validateOnChange={false}
-        enableReinitialize
-        initialValues={data}
-        onSubmit={(values /*, actions*/) => {
-          onAction('submit', {
-            view,
-            data: values
-          });
-        }}
-      >
-        {(props) => (
-          <Flex
-            as='form'
-            direction='column'
-            gap={4}
-            // @ts-expect-error Can't detect the as=form and throws error
-            onSubmit={props.handleSubmit}
-          >
-            <input type='submit' />
-            <Button
-              onClick={() => {
-                onAction('switch-view', {
-                  view,
-                  data: props.values
-                });
-              }}
-            >
-              {view === 'json' ? 'Switch to Form view' : 'Switch to JSON view'}
-            </Button>
-            {view === 'json' ? (
-              <WidgetJSON
-                field={{ type: 'json', label: 'Json Document' }}
-                pointer='jsonData'
-              />
-            ) : (
-              plugins.map((pl) => (
-                <PluginBox key={pl.name} plugin={pl}>
-                  {({ field }) => (
-                    <Box
-                      p='16'
-                      borderRadius='lg'
-                      bg='base.50a'
-                      display='flex'
-                      flexDir='column'
-                      gap={8}
-                    >
-                      <Heading size='sm'>{pl.name}</Heading>
-                      <WidgetRenderer pointer='' field={field} />
-                    </Box>
-                  )}
-                </PluginBox>
-              ))
-            )}
-          </Flex>
-        )}
-      </Formik>
-    </Flex>
-  );
-}
\ No newline at end of file
+export function CollectionFormEdit(props: { id: string }) {
+  const { id } = props;
+  const { collection, state, error } = useCollection(id);
+  const [triedLoading, setTriedLoading] = useState(!!collection);
+
+  usePageTitle(collection ? `Edit collection ${id}` : 'Edit collection');
+
+  const toast = useToast();
+
+  useEffect(() => {
+    if (state === 'LOADING') {
+      setTriedLoading(true);
+    }
+  }, [state]);
+
+  if (state === 'LOADING' || !triedLoading) {
+    return <Box>Loading collection...</Box>;
+  }
+
+  if (error) {
+    return <Box>Error loading collection: {error.detail}</Box>;
+  }
+
+  const onSubmit = async (data: any, formikHelpers: FormikHelpers<any>) => {
+    try {
+      toast({
+        id: 'collection-submit',
+        title: 'Updating collection...',
+        status: 'loading',
+        duration: null,
+        position: 'bottom-right'
+      });
+
+      await collectionTransaction().update(id, data);
+
+      toast.update('collection-submit', {
+        title: 'Collection updated',
+        status: 'success',
+        duration: 5000,
+        isClosable: true
+      });
+    } catch (error: any) {
+      toast.update('collection-submit', {
+        title: 'Collection update failed',
+        description: error.detail?.code,
+        status: 'error',
+        duration: 8000,
+        isClosable: true
+      });
+    }
+    formikHelpers.setSubmitting(false);
+  };
+
+  return <EditForm onSubmit={onSubmit} initialData={collection} />;
+}
+
+type collectionTransactionType = {
+  update: (id: string, data: StacCollection) => Promise<StacCollection>;
+  create: (data: StacCollection) => Promise<StacCollection>;
+};
+
+function collectionTransaction(): collectionTransactionType {
+  const createRequest = async (
+    url: string,
+    method: string,
+    data: StacCollection
+  ) => {
+    return Api.fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    });
+  };
+
+  return {
+    update: (id: string, data: StacCollection) =>
+      createRequest(
+        `${process.env.REACT_APP_STAC_API}/collections/${id}`,
+        'PUT',
+        data
+      ),
+    create: (data: StacCollection) =>
+      createRequest(
+        `${process.env.REACT_APP_STAC_API}/collections/`,
+        'POST',
+        data
+      )
+  };
+}
diff --git a/packages/client/src/pages/CollectionForm/useCollectionTransaction.ts b/packages/client/src/pages/CollectionForm/useCollectionTransaction.ts
new file mode 100644
index 0000000..39f2a51
--- /dev/null
+++ b/packages/client/src/pages/CollectionForm/useCollectionTransaction.ts
@@ -0,0 +1,52 @@
+import { useCallback, useState } from 'react';
+import { StacCollection } from 'stac-ts';
+import Api from '../../api';
+import { LoadingState, ApiError } from '../../types';
+
+type UseCollectionTransactionType = {
+  update: (id: string, data: StacCollection) => Promise<StacCollection>;
+  create: (data: StacCollection) => Promise<StacCollection>;
+  error?: ApiError;
+  state: LoadingState;
+};
+
+export function useCollectionTransaction(): UseCollectionTransactionType {
+  const [error, setError] = useState<ApiError>();
+  const [state, setState] = useState<LoadingState>('IDLE');
+
+  const createRequest = useCallback(
+    async (url: string, method: string, data: StacCollection) => {
+      setState('LOADING');
+
+      try {
+        return Api.fetch(url, {
+          method: method,
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+      } catch (error) {
+        setError(error as ApiError);
+      } finally {
+        setState('IDLE');
+      }
+    },
+    []
+  );
+
+  return {
+    update: (id: string, data: StacCollection) =>
+      createRequest(
+        `${process.env.REACT_APP_STAC_API}/collections/${id}`,
+        'PUT',
+        data
+      ),
+    create: (data: StacCollection) =>
+      createRequest(
+        `${process.env.REACT_APP_STAC_API}/collections/`,
+        'POST',
+        data
+      ),
+    error,
+    state
+  };
+}
diff --git a/packages/client/src/pages/CollectionForm/useUpdateCollection.ts b/packages/client/src/pages/CollectionForm/useUpdateCollection.ts
deleted file mode 100644
index b6d961a..0000000
--- a/packages/client/src/pages/CollectionForm/useUpdateCollection.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useCallback, useState } from "react";
-import { StacCollection } from "stac-ts";
-import Api from "../../api";
-import { LoadingState, ApiError } from "../../types";
-
-type UseUpdateCollectionType = {
-  update: (data: StacCollection) => Promise<StacCollection>;
-  error?: ApiError;
-  state: LoadingState;
-}
-
-function useUpdateCollection(): UseUpdateCollectionType {
-  const [ error, setError ] = useState<ApiError>();
-  const [ state, setState ] = useState<LoadingState>("IDLE");
-
-  const update = useCallback((data: StacCollection) => {
-    setState("LOADING");
-
-    return Api.fetch(
-      `${process.env.REACT_APP_STAC_API}/collections/`,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data)
-      },
-    )
-      .catch((e) => setError(e))
-      .finally(() => setState("IDLE"));
-  }, []);
-
-  return {
-    update,
-    error,
-    state
-  };
-}
-
-export default useUpdateCollection;
diff --git a/packages/client/src/pages/CollectionList.tsx b/packages/client/src/pages/CollectionList.tsx
index 358a7ce..2e56ce7 100644
--- a/packages/client/src/pages/CollectionList.tsx
+++ b/packages/client/src/pages/CollectionList.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, NavLink, useNavigate } from 'react-router-dom';
 import {
   TableContainer,
   Table,
-  Text,
+  Button,
   Thead,
   Tr,
   Th,
   Td,
-  Tbody
+  Tbody,
+  Heading,
+  Flex
 } from '@chakra-ui/react';
 import { useCollections } from '@developmentseed/stac-react';
 import type { StacCollection } from 'stac-ts';
@@ -21,8 +23,18 @@ function CollectionList() {
   const { collections, state } = useCollections();
 
   return (
-    <>
-      <Text as='h1'>Collections</Text>
+    <Flex direction='column' gap={8}>
+      <Flex alignItems='center' justifyContent='space-between'>
+        <Heading>Collections</Heading>
+        <Button
+          as={NavLink}
+          to='/collections/new'
+          colorScheme='primary'
+          size='sm'
+        >
+          New Collection
+        </Button>
+      </Flex>
       <TableContainer>
         <Table size='sm'>
           <Thead>
@@ -69,7 +81,7 @@ function CollectionList() {
           </Tbody>
         </Table>
       </TableContainer>
-    </>
+    </Flex>
   );
 }
 
diff --git a/packages/client/src/pages/ItemList/index.tsx b/packages/client/src/pages/ItemList/index.tsx
index 1fdadd0..b566c21 100644
--- a/packages/client/src/pages/ItemList/index.tsx
+++ b/packages/client/src/pages/ItemList/index.tsx
@@ -1,13 +1,13 @@
-import { useEffect } from "react";
-import { Heading, Box } from "@chakra-ui/react";
-import { useStacSearch } from "@developmentseed/stac-react";
+import React, { useEffect } from 'react';
+import { Heading, Flex } from '@chakra-ui/react';
+import { useStacSearch } from '@developmentseed/stac-react';
 
-import { usePageTitle } from "../../hooks";
-import ItemListFilter from "./ItemListFilter";
-import ItemResults from "../../components/ItemResults";
+import { usePageTitle } from '../../hooks';
+import ItemListFilter from './ItemListFilter';
+import ItemResults from '../../components/ItemResults';
 
 function ItemList() {
-  usePageTitle("Items");
+  usePageTitle('Items');
   const {
     results,
     state,
@@ -29,10 +29,8 @@ function ItemList() {
   }, [submit]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <>
-      <Box display="flex" alignItems="baseline" gap="4">
-        <Heading as="h1" flex="1">Items</Heading>
-      </Box>
+    <Flex direction='column' gap={8}>
+      <Heading>Items</Heading>
       <ItemListFilter submit={submit} {...searchState} />
       <ItemResults
         results={results}
@@ -45,7 +43,7 @@ function ItemList() {
         state={state}
         submit={submit}
       />
-    </>
+    </Flex>
   );
 }
 
diff --git a/packages/client/src/plugin-system/config.ts b/packages/client/src/plugin-system/config.ts
index 558ba43..fd7faf7 100644
--- a/packages/client/src/plugin-system/config.ts
+++ b/packages/client/src/plugin-system/config.ts
@@ -1,10 +1,19 @@
 import { extendPluginConfig } from '@stac-manager/data-core';
 import { defaultPluginWidgetConfig } from '@stac-manager/data-widgets';
-import { PluginCore, PluginTest } from '@stac-manager/data-plugins';
+import {
+  PluginCore,
+  PluginItemAssets,
+  // PluginKitchenSink,
+  PluginRender
+} from '@stac-manager/data-plugins';
 
 export const config = extendPluginConfig(defaultPluginWidgetConfig, {
-  collectionPlugins: [new PluginCore()],
-  // collectionPlugins: [new PluginTest()],
+  collectionPlugins: [
+    new PluginCore(),
+    new PluginItemAssets(),
+    new PluginRender()
+  ],
+  // collectionPlugins: [new PluginKitchenSink()],
   itemPlugins: [],
 
   'ui:widget': {}