diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 333b3483e..69d564e65 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -3,6 +3,8 @@ import { SessionInfoBar } from "./SessionInfoBar";
 import { HomePage } from "@src/components/HomePage";
 import { Sidebar } from "@src/components/Sidebar";
 import { BucketPermissions } from "@src/components/bucket/BucketPermissions";
+import { CollectionAttributes } from "@src/components/collection/CollectionAttributes";
+import { CollectionCreate } from "@src/components/collection/CollectionCreate";
 import { CollectionPermissions } from "@src/components/collection/CollectionPermissions";
 import { GroupPermissions } from "@src/components/group/GroupPermissions";
 import { RecordPermissions } from "@src/components/record/RecordPermissions";
@@ -12,8 +14,6 @@ import BucketCollectionsPage from "@src/containers/bucket/BucketCollectionsPage"
 import BucketCreatePage from "@src/containers/bucket/BucketCreatePage";
 import BucketGroupsPage from "@src/containers/bucket/BucketGroupsPage";
 import BucketHistoryPage from "@src/containers/bucket/BucketHistoryPage";
-import CollectionAttributesPage from "@src/containers/collection/CollectionAttributesPage";
-import CollectionCreatePage from "@src/containers/collection/CollectionCreatePage";
 import CollectionHistoryPage from "@src/containers/collection/CollectionHistoryPage";
 import CollectionRecordsPage from "@src/containers/collection/CollectionRecordsPage";
 import GroupAttributesPage from "@src/containers/group/GroupAttributesPage";
@@ -164,7 +164,7 @@ export function Layout() {
                                 exact
                                 title="create"
                                 path="/buckets/:bid/collections/create"
-                                component={CollectionCreatePage}
+                                component={CollectionCreate}
                               />
                               <Redirect
                                 exact
@@ -180,7 +180,7 @@ export function Layout() {
                                     exact
                                     title="attributes"
                                     path="/buckets/:bid/collections/:cid/attributes"
-                                    component={CollectionAttributesPage}
+                                    component={CollectionAttributes}
                                   />
                                   <CreateRoute
                                     exact
diff --git a/src/components/collection/CollectionAttributes.tsx b/src/components/collection/CollectionAttributes.tsx
index 55ff4399d..e3338d401 100644
--- a/src/components/collection/CollectionAttributes.tsx
+++ b/src/components/collection/CollectionAttributes.tsx
@@ -1,66 +1,32 @@
 import CollectionForm from "./CollectionForm";
 import CollectionTabs from "./CollectionTabs";
-import * as BucketActions from "@src/actions/bucket";
+import { deleteCollection, updateCollection } from "@src/actions/bucket";
 import Spinner from "@src/components/Spinner";
-import type {
-  BucketState,
-  Capabilities,
-  CollectionData,
-  CollectionRouteMatch,
-  CollectionState,
-  SessionState,
-} from "@src/types";
+import { useAppDispatch, useAppSelector } from "@src/hooks/app";
+import type { CollectionData, RouteParams } from "@src/types";
 import React from "react";
+import { useParams } from "react-router";
 
-export type OwnProps = {
-  match: CollectionRouteMatch;
-};
+export function CollectionAttributes() {
+  const dispatch = useAppDispatch();
+  const { bucket, session, collection } = useAppSelector(state => state);
+  const capabilities = session.serverInfo.capabilities;
+  const { bid, cid } = useParams<RouteParams>();
 
-export type StateProps = {
-  session: SessionState;
-  bucket: BucketState;
-  collection: CollectionState;
-  capabilities: Capabilities;
-};
-
-export type Props = OwnProps &
-  StateProps & {
-    updateCollection: typeof BucketActions.updateCollection;
-    deleteCollection: typeof BucketActions.deleteCollection;
-  };
-
-export default function CollectionAttributes({
-  match,
-  session,
-  bucket,
-  collection,
-  capabilities,
-  updateCollection,
-  deleteCollection,
-}: Props) {
   const onSubmit = (formData: CollectionData) => {
-    const {
-      params: { bid, cid },
-    } = match;
-    updateCollection(bid, cid, { data: formData });
+    dispatch(updateCollection(bid, cid, { data: formData }));
   };
 
   const handleDeleteCollection = (cid: string) => {
-    const {
-      params: { bid },
-    } = match;
     const message = [
       "This will delete the collection and all the records it contains.",
       "Are you sure?",
     ].join(" ");
     if (confirm(message)) {
-      deleteCollection(bid, cid);
+      dispatch(deleteCollection(bid, cid));
     }
   };
 
-  const {
-    params: { bid, cid },
-  } = match;
   const { busy, data: formData } = collection;
 
   return (
@@ -82,7 +48,6 @@ export default function CollectionAttributes({
           <Spinner />
         ) : (
           <CollectionForm
-            bid={bid}
             cid={cid}
             session={session}
             bucket={bucket}
diff --git a/src/components/collection/CollectionCreate.tsx b/src/components/collection/CollectionCreate.tsx
index 39b3d18da..8380f77eb 100644
--- a/src/components/collection/CollectionCreate.tsx
+++ b/src/components/collection/CollectionCreate.tsx
@@ -1,40 +1,16 @@
 import CollectionForm from "./CollectionForm";
-import * as BucketActions from "@src/actions/bucket";
+import { createCollection } from "@src/actions/bucket";
 import Spinner from "@src/components/Spinner";
-import type {
-  BucketRouteMatch,
-  BucketState,
-  CollectionState,
-  SessionState,
-} from "@src/types";
+import { useAppDispatch, useAppSelector } from "@src/hooks/app";
+import type { RouteParams } from "@src/types";
 import React from "react";
+import { useParams } from "react-router";
 
-export type OwnProps = {
-  match: BucketRouteMatch;
-};
-
-export type StateProps = {
-  session: SessionState;
-  bucket: BucketState;
-  collection: CollectionState;
-};
-
-export type Props = OwnProps &
-  StateProps & {
-    createCollection: typeof BucketActions.createCollection;
-  };
-
-export default function CollectionCreate({
-  match,
-  session,
-  bucket,
-  collection,
-  createCollection,
-}: Props) {
-  const {
-    params: { bid },
-  } = match;
-  const { busy } = session;
+export function CollectionCreate() {
+  const dispatch = useAppDispatch();
+  const { session, bucket, collection } = useAppSelector(state => state);
+  const busy = session.busy;
+  const { bid } = useParams<RouteParams>();
 
   if (busy) {
     return <Spinner />;
@@ -51,7 +27,7 @@ export default function CollectionCreate({
             session={session}
             bucket={bucket}
             collection={collection}
-            onSubmit={formData => createCollection(bid, formData)}
+            onSubmit={formData => dispatch(createCollection(bid, formData))}
           />
         </div>
       </div>
diff --git a/src/containers/collection/CollectionAttributesPage.ts b/src/containers/collection/CollectionAttributesPage.ts
deleted file mode 100644
index 860c12190..000000000
--- a/src/containers/collection/CollectionAttributesPage.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as BucketActions from "@src/actions/bucket";
-import type { StateProps } from "@src/components/collection/CollectionAttributes";
-import CollectionAttributes from "@src/components/collection/CollectionAttributes";
-import type { AppState } from "@src/types";
-import { connect } from "react-redux";
-import type { Dispatch } from "redux";
-import { bindActionCreators } from "redux";
-
-function mapStateToProps(state: AppState): StateProps {
-  return {
-    bucket: state.bucket,
-    collection: state.collection,
-    session: state.session,
-    capabilities: state.session.serverInfo.capabilities,
-  };
-}
-
-function mapDispatchToProps(dispatch: Dispatch): typeof BucketActions {
-  return bindActionCreators(BucketActions, dispatch);
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CollectionAttributes);
diff --git a/src/containers/collection/CollectionCreatePage.ts b/src/containers/collection/CollectionCreatePage.ts
deleted file mode 100644
index e00c873d8..000000000
--- a/src/containers/collection/CollectionCreatePage.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as BucketActions from "@src/actions/bucket";
-import type { StateProps } from "@src/components/collection/CollectionCreate";
-import CollectionCreate from "@src/components/collection/CollectionCreate";
-import type { AppState } from "@src/types";
-import { connect } from "react-redux";
-import type { Dispatch } from "redux";
-import { bindActionCreators } from "redux";
-
-function mapStateToProps(state: AppState): StateProps {
-  return {
-    bucket: state.bucket,
-    collection: state.collection,
-    session: state.session,
-  };
-}
-
-function mapDispatchToProps(dispatch: Dispatch): typeof BucketActions {
-  return bindActionCreators(BucketActions, dispatch);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionCreate);