diff --git a/src/webapp/components/AddToCollectionModal.tsx b/src/webapp/components/AddToCollectionModal.tsx
index 9f1a1a4c..52296583 100644
--- a/src/webapp/components/AddToCollectionModal.tsx
+++ b/src/webapp/components/AddToCollectionModal.tsx
@@ -143,7 +143,7 @@ export function AddToCollectionModal({
               </Text>
             )}
 
-            <Group grow>
+            <Group gap={"xs"} grow>
               <Button
                 onClick={handleSubmit}
                 disabled={submitting || selectedCollectionIds.length === 0}
diff --git a/src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx b/src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx
index cdf0ce9a..a41b8248 100644
--- a/src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx
+++ b/src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx
@@ -2,24 +2,24 @@ import {
   Button,
   Container,
   Drawer,
-  Text,
   Group,
   Stack,
   Textarea,
   TextInput,
-  Anchor,
+  Tooltip,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 
 import { notifications } from '@mantine/notifications';
 import useAddCard from '../../lib/mutations/useAddCard';
 import CollectionSelector from '@/features/collections/components/collectionSelector/CollectionSelector';
-import { Fragment, Suspense, useState } from 'react';
+import { Suspense, useState } from 'react';
 import CollectionSelectorSkeleton from '@/features/collections/components/collectionSelector/Skeleton.CollectionSelector';
-import { IoMdLink } from 'react-icons/io';
 import { useDisclosure } from '@mantine/hooks';
 import { BiCollection } from 'react-icons/bi';
-import Link from 'next/link';
+import { IoMdLink } from 'react-icons/io';
+
+import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
 
 interface Props {
   isOpen: boolean;
@@ -37,6 +37,10 @@ export default function AddCardDrawer(props: Props) {
     useState<{ id: string; name: string; cardCount: number }[]>(
       initialCollections,
     );
+
+  const hasNoCollections = selectedCollections.length === 0;
+  const hasOneCollection = selectedCollections.length === 1;
+
   const addCard = useAddCard();
 
   const form = useForm({
@@ -47,7 +51,7 @@ export default function AddCardDrawer(props: Props) {
     },
   });
 
-  const handleCreateCollection = (e: React.FormEvent) => {
+  const handleAddCard = (e: React.FormEvent) => {
     e.preventDefault();
 
     addCard.mutate(
@@ -84,12 +88,8 @@ export default function AddCardDrawer(props: Props) {
       }}
       withCloseButton={false}
       position="bottom"
-      size={'lg'}
-      overlayProps={{
-        blur: 3,
-        gradient:
-          'linear-gradient(0deg, rgba(204, 255, 0, 0.5), rgba(255, 255, 255, 0.5))',
-      }}
+      size={'26rem'}
+      overlayProps={DEFAULT_OVERLAY_PROPS}
     >
       <Drawer.Header>
         <Drawer.Title fz={'xl'} fw={600} mx={'auto'}>
@@ -97,8 +97,8 @@ export default function AddCardDrawer(props: Props) {
         </Drawer.Title>
       </Drawer.Header>
       <Container size={'sm'}>
-        <form onSubmit={handleCreateCollection}>
-          <Stack>
+        <form onSubmit={handleAddCard}>
+          <Stack gap={'xl'}>
             <Stack>
               <Stack>
                 <TextInput
@@ -129,34 +129,21 @@ export default function AddCardDrawer(props: Props) {
 
               <Group>
                 <Stack align="start" gap={'xs'}>
-                  <Button
-                    onClick={toggleCollectionSelector}
-                    variant="light"
-                    color="gray"
-                    leftSection={<BiCollection size={22} />}
+                  <Tooltip
+                    label={selectedCollections.map((c) => c.name).join(', ')}
+                    disabled={hasNoCollections}
                   >
-                    Add to collections
-                  </Button>
-                  {selectedCollections.length > 0 && (
-                    <Text fw={500}>
-                      Selected collections:{' '}
-                      <Text fw={500} span>
-                        {selectedCollections.map((c, index) => (
-                          <Fragment key={c.id}>
-                            <Anchor
-                              component={Link}
-                              href={`/collections/${c.id}`}
-                              target="_blank"
-                              c="blue"
-                            >
-                              {c.name}
-                            </Anchor>
-                            {index < selectedCollections.length - 1 && ', '}
-                          </Fragment>
-                        ))}
-                      </Text>
-                    </Text>
-                  )}
+                    <Button
+                      onClick={toggleCollectionSelector}
+                      variant="light"
+                      color="gray"
+                      leftSection={<BiCollection size={22} />}
+                    >
+                      {!hasNoCollections
+                        ? `${selectedCollections.length} ${hasOneCollection ? 'collection' : 'collections'}`
+                        : 'Add to collections'}
+                    </Button>
+                  </Tooltip>
                 </Stack>
               </Group>
               <Suspense fallback={<CollectionSelectorSkeleton />}>
@@ -168,11 +155,16 @@ export default function AddCardDrawer(props: Props) {
                 />
               </Suspense>
             </Stack>
-            <Group justify="space-between">
-              <Button variant="outline" color={'gray'} onClick={props.onClose}>
+            <Group justify="space-between" gap={'xs'} grow>
+              <Button
+                variant="light"
+                size="md"
+                color={'gray'}
+                onClick={props.onClose}
+              >
                 Cancel
               </Button>
-              <Button type="submit" loading={addCard.isPending}>
+              <Button type="submit" size="md" loading={addCard.isPending}>
                 Add card
               </Button>
             </Group>
diff --git a/src/webapp/features/cards/lib/mutations/useAddCard.tsx b/src/webapp/features/cards/lib/mutations/useAddCard.tsx
index 3b340910..539a965a 100644
--- a/src/webapp/features/cards/lib/mutations/useAddCard.tsx
+++ b/src/webapp/features/cards/lib/mutations/useAddCard.tsx
@@ -26,8 +26,15 @@ export default function useAddCard() {
     // Do things that are absolutely necessary and logic related (like query invalidation) in the useMutation callbacks
     // Do UI related things like redirects or showing toast notifications in mutate callbacks. If the user navigated away from the current screen before the mutation finished, those will purposefully not fire
     // https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ['my cards'] });
+      queryClient.invalidateQueries({ queryKey: ['library'] });
+      queryClient.invalidateQueries({ queryKey: ['collections'] });
+
+      // invalidate each collection query individually
+      variables.collectionIds?.forEach((id) => {
+        queryClient.invalidateQueries({ queryKey: ['collection', id] });
+      });
     },
   });
 
diff --git a/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx b/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
index 1ff9bebc..0620d78a 100644
--- a/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
+++ b/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
@@ -10,20 +10,18 @@ import {
   Button,
   Drawer,
   Container,
-  SimpleGrid,
   Group,
 } from '@mantine/core';
-import { IoSearch } from 'react-icons/io5';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
+import { useDebouncedValue } from '@mantine/hooks';
 import useCollections from '../../lib/queries/useCollections';
 import useCollectionSearch from '../../lib/queries/useCollectionSearch';
-import { useDebouncedValue } from '@mantine/hooks';
-
+import CreateCollectionDrawer from '../createCollectionDrawer/CreateCollectionDrawer';
 import CollectionSelectorError from './Error.CollectionSelector';
 import CollectionSelectorItem from '../collectionSelectorItem/CollectionSelectorItem';
-import CollectionSelectorNewCollection from '../collectionSelectorNewCollection/CollectionSelectorNewCollection';
 import { BiPlus } from 'react-icons/bi';
-import { useContextDrawers } from '@/providers/drawers';
+import { IoSearch } from 'react-icons/io5';
+import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
 
 interface Props {
   isOpen: boolean;
@@ -39,7 +37,7 @@ export default function CollectionSelector(props: Props) {
   const [search, setSearch] = useState<string>('');
   const [debouncedSearch] = useDebouncedValue(search, 200);
   const searchedCollections = useCollectionSearch({ query: debouncedSearch });
-  const drawers = useContextDrawers();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const handleCollectionChange = (
     checked: boolean,
@@ -76,125 +74,162 @@ export default function CollectionSelector(props: Props) {
   }
 
   const hasCollections = data?.collections?.length > 0;
+  const hasSelectedCollections = props.selectedCollections.length > 0;
 
   return (
-    <Drawer
-      opened={props.isOpen}
-      onClose={props.onClose}
-      withCloseButton={false}
-      position="bottom"
-      size={'33rem'}
-      overlayProps={{
-        blur: 3,
-        gradient:
-          'linear-gradient(0deg, rgba(204, 255, 0, 0.5), rgba(255, 255, 255, 0.5))',
-      }}
-    >
-      <Drawer.Header>
-        <Drawer.Title fz={'xl'} fw={600} mx={'auto'}>
-          Add to collections
-        </Drawer.Title>
-      </Drawer.Header>
-      <Container size={'sm'}>
-        <Stack>
-          <TextInput
-            placeholder="Search for collections"
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
-            size="md"
-            variant="filled"
-            id="search"
-            leftSection={<IoSearch size={22} />}
-            rightSection={
-              <CloseButton
-                aria-label="Clear input"
-                onClick={() => setSearch('')}
-                style={{ display: search ? undefined : 'none' }}
-              />
-            }
-          />
-          <Tabs defaultValue="collections">
-            <Tabs.List grow>
-              <Tabs.Tab value="collections">Collections</Tabs.Tab>
-              <Tabs.Tab value="selected">
-                Selected ({props.selectedCollections.length})
-              </Tabs.Tab>
-            </Tabs.List>
+    <Fragment>
+      <Drawer
+        opened={props.isOpen}
+        onClose={props.onClose}
+        withCloseButton={false}
+        position="bottom"
+        size={'40rem'}
+        overlayProps={DEFAULT_OVERLAY_PROPS}
+      >
+        <Drawer.Header>
+          <Drawer.Title fz={'xl'} fw={600} mx={'auto'}>
+            Add to collections
+          </Drawer.Title>
+        </Drawer.Header>
+        <Container size={'xs'}>
+          <Stack gap={'xl'}>
+            <TextInput
+              placeholder="Search for collections"
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+              size="md"
+              variant="filled"
+              id="search"
+              leftSection={<IoSearch size={22} />}
+              rightSection={
+                <CloseButton
+                  aria-label="Clear input"
+                  onClick={() => setSearch('')}
+                  style={{ display: search ? undefined : 'none' }}
+                />
+              }
+            />
+            <Tabs defaultValue="collections">
+              <Tabs.List grow>
+                <Tabs.Tab value="collections">Collections</Tabs.Tab>
+                <Tabs.Tab value="selected">
+                  Selected ({props.selectedCollections.length})
+                </Tabs.Tab>
+              </Tabs.List>
 
-            {/* Collections Panel */}
-            <Tabs.Panel value="collections" my="xs" w="100%">
-              <ScrollArea h={245}>
-                <Stack gap="xs">
-                  {search && <CollectionSelectorNewCollection name={search} />}
-                  {search && searchedCollections.isPending && (
-                    <Stack align="center">
-                      <Text fw={500} c="gray">
-                        Searching collections...
-                      </Text>
-                      <Loader color="gray" />
-                    </Stack>
-                  )}
-                  {search &&
-                    searchedCollections.data &&
-                    searchedCollections.data.collections.length === 0 && (
-                      <Alert
-                        color="gray"
-                        title={`No results found for "${search}"`}
-                      />
+              {/* collections Panel */}
+              <Tabs.Panel value="collections" my="xs" w="100%">
+                <ScrollArea h={340} type="auto">
+                  <Stack gap="xs">
+                    {search ? (
+                      <Fragment>
+                        <Button
+                          variant="light"
+                          size="md"
+                          color={'grape'}
+                          radius={'lg'}
+                          leftSection={<BiPlus size={22} />}
+                          onClick={() => setIsDrawerOpen(true)}
+                        >
+                          Create new collection "{search}"
+                        </Button>
+
+                        {searchedCollections.isPending && (
+                          <Stack align="center">
+                            <Text fw={500} c="gray">
+                              Searching collections...
+                            </Text>
+                            <Loader color="gray" />
+                          </Stack>
+                        )}
+
+                        {searchedCollections.data &&
+                          (searchedCollections.data.collections.length === 0 ? (
+                            <Alert
+                              color="gray"
+                              title={`No results found for "${search}"`}
+                            />
+                          ) : (
+                            renderCollectionItems(
+                              searchedCollections.data.collections,
+                            )
+                          ))}
+                      </Fragment>
+                    ) : hasCollections ? (
+                      renderCollectionItems(data.collections)
+                    ) : (
+                      <Stack align="center" gap="xs">
+                        <Text fz="lg" fw={600} c="gray">
+                          No collections
+                        </Text>
+                        <Button
+                          onClick={() => setIsDrawerOpen(true)}
+                          variant="light"
+                          color="gray"
+                          rightSection={<BiPlus size={22} />}
+                        >
+                          Create a collection
+                        </Button>
+                      </Stack>
                     )}
-                  {search &&
-                    searchedCollections.data &&
-                    renderCollectionItems(searchedCollections.data.collections)}
-                  {!search && !hasCollections && (
-                    <Stack align="center" gap={'xs'}>
-                      <Text fz={'lg'} fw={600} c={'gray'}>
-                        No collections
-                      </Text>
-                      <Button
-                        onClick={() => drawers.open('createCollection')}
-                        variant="light"
-                        color={'gray'}
-                        rightSection={<BiPlus size={22} />}
-                      >
-                        Create a collection
-                      </Button>
-                    </Stack>
-                  )}
-                  {!search &&
-                    hasCollections &&
-                    renderCollectionItems(data.collections)}
-                </Stack>
-              </ScrollArea>
-            </Tabs.Panel>
+                  </Stack>
+                </ScrollArea>
+              </Tabs.Panel>
 
-            {/* Selected Collections Panel */}
-            <Tabs.Panel value="selected" my="xs">
-              <ScrollArea h={245}>
-                <Stack gap="xs">
-                  {props.selectedCollections.length > 0 ? (
-                    renderCollectionItems(props.selectedCollections)
-                  ) : (
-                    <Alert color="gray" title="No collections selected" />
-                  )}
-                </Stack>
-              </ScrollArea>
-            </Tabs.Panel>
-          </Tabs>
-          <Group justify="space-between">
-            <Button
-              variant="outline"
-              color={'gray'}
-              onClick={() => {
-                props.onSelectedCollectionsChange([]);
-                props.onClose();
-              }}
-            >
-              Cancel
-            </Button>
-            <Button onClick={props.onClose}>Save</Button>
-          </Group>
-        </Stack>
-      </Container>
-    </Drawer>
+              {/* selected Collections Panel */}
+              <Tabs.Panel value="selected" my="xs">
+                <ScrollArea h={340} type="auto">
+                  <Stack gap="xs">
+                    {props.selectedCollections.length > 0 ? (
+                      renderCollectionItems(props.selectedCollections)
+                    ) : (
+                      <Alert color="gray" title="No collections selected" />
+                    )}
+                  </Stack>
+                </ScrollArea>
+              </Tabs.Panel>
+            </Tabs>
+            <Group justify="space-between" gap={'xs'} grow>
+              <Button
+                variant="light"
+                color={'gray'}
+                size="md"
+                onClick={() => {
+                  props.onSelectedCollectionsChange([]);
+                  props.onClose();
+                }}
+              >
+                Cancel
+              </Button>
+              {hasSelectedCollections && (
+                <Button
+                  variant="light"
+                  color="grape"
+                  size="md"
+                  onClick={() => props.onSelectedCollectionsChange([])}
+                >
+                  Clear all
+                </Button>
+              )}
+              <Button size="md" onClick={props.onClose}>
+                Save
+              </Button>
+            </Group>
+          </Stack>
+        </Container>
+      </Drawer>
+      <CreateCollectionDrawer
+        key={search}
+        isOpen={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+        initialName={search}
+        onCreate={(newCollection) => {
+          props.onSelectedCollectionsChange([
+            ...props.selectedCollections,
+            newCollection,
+          ]);
+        }}
+      />
+    </Fragment>
   );
 }
diff --git a/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx b/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx
index 59839b70..f46b8a09 100644
--- a/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx
+++ b/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx
@@ -39,6 +39,9 @@ export default function CollectionSelectorItem(props: Props) {
           <Text fw={500} lineClamp={1}>
             {props.name}
           </Text>
+          <Text c={'gray'}>
+            {props.cardCount} {props.cardCount === 1 ? 'card' : 'cards'}
+          </Text>
         </Stack>
         <CheckboxIndicator />
       </Group>
diff --git a/src/webapp/features/collections/components/collectionSelectorNewCollection/CollectionSelectorNewCollection.tsx b/src/webapp/features/collections/components/collectionSelectorNewCollection/CollectionSelectorNewCollection.tsx
deleted file mode 100644
index d1998a4a..00000000
--- a/src/webapp/features/collections/components/collectionSelectorNewCollection/CollectionSelectorNewCollection.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useContextDrawers } from '@/providers/drawers';
-import { Button } from '@mantine/core';
-import { BiPlus } from 'react-icons/bi';
-
-interface Props {
-  name: string;
-}
-
-export default function CollectionSelectorNewCollection(props: Props) {
-  const drawers = useContextDrawers();
-
-  return (
-    <Button
-      variant="light"
-      size="md"
-      color={'grape'}
-      radius={'lg'}
-      leftSection={<BiPlus size={22} />}
-      onClick={() => drawers.open('createCollection')}
-    >
-      Create new collection "{props.name}"
-    </Button>
-  );
-}
diff --git a/src/webapp/features/collections/components/createCollectionDrawer/CreateCollectionDrawer.tsx b/src/webapp/features/collections/components/createCollectionDrawer/CreateCollectionDrawer.tsx
index fe4e4437..847d7291 100644
--- a/src/webapp/features/collections/components/createCollectionDrawer/CreateCollectionDrawer.tsx
+++ b/src/webapp/features/collections/components/createCollectionDrawer/CreateCollectionDrawer.tsx
@@ -10,11 +10,17 @@ import {
 import { useForm } from '@mantine/form';
 import useCreateCollection from '../../lib/mutations/useCreateCollection';
 import { notifications } from '@mantine/notifications';
+import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
 
 interface Props {
   isOpen: boolean;
   onClose: () => void;
   initialName?: string;
+  onCreate?: (newCollection: {
+    id: string;
+    name: string;
+    cardCount: number;
+  }) => void;
 }
 
 export default function createCollectionDrawer(props: Props) {
@@ -35,11 +41,18 @@ export default function createCollectionDrawer(props: Props) {
         description: form.getValues().description,
       },
       {
-        onSuccess: () => {
+        onSuccess: (newCollection) => {
           notifications.show({
             message: `Created collection "${form.getValues().name}".`,
           });
+
           props.onClose();
+          props.onCreate &&
+            props.onCreate({
+              id: newCollection.collectionId,
+              name: form.getValues().name,
+              cardCount: 0,
+            });
         },
         onError: () => {
           notifications.show({
@@ -59,11 +72,8 @@ export default function createCollectionDrawer(props: Props) {
       onClose={props.onClose}
       withCloseButton={false}
       position="bottom"
-      overlayProps={{
-        blur: 3,
-        gradient:
-          'linear-gradient(0deg, rgba(204, 255, 0, 0.5), rgba(255, 255, 255, 0.5))',
-      }}
+      size={'30rem'}
+      overlayProps={DEFAULT_OVERLAY_PROPS}
     >
       <Drawer.Header>
         <Drawer.Title fz={'xl'} fw={600} mx={'auto'}>
@@ -72,7 +82,7 @@ export default function createCollectionDrawer(props: Props) {
       </Drawer.Header>
 
       <Container size={'sm'}>
-        <form onSubmit={handleCreateCollection}>
+        <form>
           <Stack>
             <TextInput
               id="name"
@@ -80,6 +90,7 @@ export default function createCollectionDrawer(props: Props) {
               type="text"
               placeholder="Collection name"
               variant="filled"
+              size="md"
               required
               maxLength={100}
               key={form.key('name')}
@@ -91,16 +102,26 @@ export default function createCollectionDrawer(props: Props) {
               label="Description"
               placeholder="Describe what this collection is about"
               variant="filled"
+              size="md"
               rows={8}
               maxLength={500}
               key={form.key('description')}
               {...form.getInputProps('description')}
             />
-            <Group justify="space-between">
-              <Button variant="outline" color={'gray'} onClick={props.onClose}>
+            <Group justify="space-between" gap={'xs'} grow>
+              <Button
+                variant="light"
+                size="md"
+                color={'gray'}
+                onClick={props.onClose}
+              >
                 Cancel
               </Button>
-              <Button type="submit" loading={createCollection.isPending}>
+              <Button
+                onClick={handleCreateCollection}
+                size="md"
+                loading={createCollection.isPending}
+              >
                 Create
               </Button>
             </Group>
diff --git a/src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx b/src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx
index b0f044ff..460ce9b3 100644
--- a/src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx
+++ b/src/webapp/features/collections/components/createCollectionShortcut/CreateCollectionShortcut.tsx
@@ -1,18 +1,25 @@
-import { useContextDrawers } from '@/providers/drawers';
 import { NavLink } from '@mantine/core';
+import { Fragment, useState } from 'react';
 import { BiPlus } from 'react-icons/bi';
+import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer';
 
 export default function CreateCollectionShortcut() {
-  const drawers = useContextDrawers();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   return (
-    <NavLink
-      component="button"
-      label={'Create'}
-      variant="subtle"
-      c="blue"
-      leftSection={<BiPlus size={25} />}
-      onClick={() => drawers.open('createCollection')}
-    />
+    <Fragment>
+      <NavLink
+        component="button"
+        label={'Create'}
+        variant="subtle"
+        c="blue"
+        leftSection={<BiPlus size={25} />}
+        onClick={() => setIsDrawerOpen(true)}
+      />
+      <CreateCollectionDrawer
+        isOpen={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+      />
+    </Fragment>
   );
 }
diff --git a/src/webapp/features/collections/components/editCollectionDrawer/EditCollectionDrawer.tsx b/src/webapp/features/collections/components/editCollectionDrawer/EditCollectionDrawer.tsx
index 2d7ecaaa..cdc4ffac 100644
--- a/src/webapp/features/collections/components/editCollectionDrawer/EditCollectionDrawer.tsx
+++ b/src/webapp/features/collections/components/editCollectionDrawer/EditCollectionDrawer.tsx
@@ -10,6 +10,7 @@ import {
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
 import useUpdateCollection from '../../lib/mutations/useUpdateCollection';
+import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
 
 interface Props {
   isOpen: boolean;
@@ -65,11 +66,8 @@ export default function EditCollectionDrawer(props: Props) {
       onClose={props.onClose}
       withCloseButton={false}
       position="bottom"
-      overlayProps={{
-        blur: 3,
-        gradient:
-          'linear-gradient(0deg, rgba(204, 255, 0, 0.5), rgba(255, 255, 255, 0.5))',
-      }}
+      size={'30rem'}
+      overlayProps={DEFAULT_OVERLAY_PROPS}
     >
       <Drawer.Header>
         <Drawer.Title fz="xl" fw={600} mx="auto">
@@ -85,6 +83,7 @@ export default function EditCollectionDrawer(props: Props) {
               label="Name"
               placeholder="Collection name"
               variant="filled"
+              size="md"
               required
               maxLength={100}
               key={form.key('name')}
@@ -96,17 +95,27 @@ export default function EditCollectionDrawer(props: Props) {
               label="Description"
               placeholder="Describe what this collection is about"
               variant="filled"
+              size="md"
               rows={8}
               maxLength={500}
               key={form.key('description')}
               {...form.getInputProps('description')}
             />
 
-            <Group justify="space-between">
-              <Button variant="outline" color="gray" onClick={props.onClose}>
+            <Group justify="space-between" gap={'xs'} grow>
+              <Button
+                variant="light"
+                size="md"
+                color="gray"
+                onClick={props.onClose}
+              >
                 Cancel
               </Button>
-              <Button type="submit" loading={updateCollection.isPending}>
+              <Button
+                type="submit"
+                size="md"
+                loading={updateCollection.isPending}
+              >
                 Update
               </Button>
             </Group>
diff --git a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
index d60e91c9..019eb402 100644
--- a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
@@ -11,11 +11,12 @@ import {
 import useCollections from '../../lib/queries/useCollections';
 import { BiPlus } from 'react-icons/bi';
 import CollectionCard from '../../components/collectionCard/CollectionCard';
-import { useContextDrawers } from '@/providers/drawers';
+import { useState } from 'react';
+import CreateCollectionDrawer from '../../components/createCollectionDrawer/CreateCollectionDrawer';
 
 export default function CollectionsContainer() {
   const { data } = useCollections();
-  const drawers = useContextDrawers();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   return (
     <Container p={'xs'} size={'xl'}>
@@ -34,7 +35,7 @@ export default function CollectionsContainer() {
               No collections
             </Text>
             <Button
-              onClick={() => drawers.open('createCollection')}
+              onClick={() => setIsDrawerOpen(true)}
               variant="light"
               color={'gray'}
               size="md"
@@ -42,6 +43,10 @@ export default function CollectionsContainer() {
             >
               Create your first collection
             </Button>
+            <CreateCollectionDrawer
+              isOpen={isDrawerOpen}
+              onClose={() => setIsDrawerOpen(false)}
+            />
           </Stack>
         )}
       </Stack>
diff --git a/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx b/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
index 29664b96..66c87eeb 100644
--- a/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
+++ b/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
@@ -2,22 +2,25 @@ import {
   ActionIcon,
   Affix,
   Text,
-  Box,
   Menu,
   Stack,
   Transition,
   Card,
+  Overlay,
 } from '@mantine/core';
-import { useContextDrawers } from '@/providers/drawers';
 import { Fragment, useState } from 'react';
 import { FiPlus, FiX } from 'react-icons/fi';
 import { FaRegNoteSticky } from 'react-icons/fa6';
 import { BiCollection } from 'react-icons/bi';
-import Link from 'next/link';
+import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
+import AddCardDrawer from '@/features/cards/components/addCardDrawer/AddCardDrawer';
+import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer';
 
 export default function ComposerDrawer() {
   const [opened, setOpened] = useState(false);
-  const drawers = useContextDrawers();
+  const [activeDrawer, setActiveDrawer] = useState<
+    'addCard' | 'createCollection' | null
+  >();
 
   return (
     <Fragment>
@@ -73,7 +76,7 @@ export default function ComposerDrawer() {
           py={0}
         >
           <Menu.Item
-            onClick={() => drawers.open('addCard')}
+            onClick={() => setActiveDrawer('addCard')}
             p={0}
             style={{ cursor: 'pointer' }}
           >
@@ -88,7 +91,7 @@ export default function ComposerDrawer() {
             </Card>
           </Menu.Item>
           <Menu.Item
-            onClick={() => drawers.open('createCollection')}
+            onClick={() => setActiveDrawer('createCollection')}
             p={0}
             style={{ cursor: 'pointer' }}
           >
@@ -101,6 +104,16 @@ export default function ComposerDrawer() {
           </Menu.Item>
         </Menu.Dropdown>
       </Menu>
+
+      <AddCardDrawer
+        isOpen={activeDrawer === 'addCard'}
+        onClose={() => setActiveDrawer(null)}
+      />
+      <CreateCollectionDrawer
+        isOpen={activeDrawer === 'createCollection'}
+        onClose={() => setActiveDrawer(null)}
+      />
+
       <Transition
         mounted={opened}
         transition="fade"
@@ -108,15 +121,12 @@ export default function ComposerDrawer() {
         timingFunction="ease"
       >
         {(styles) => (
-          <Box
+          <Overlay
+            blur={DEFAULT_OVERLAY_PROPS.blur}
+            gradient={DEFAULT_OVERLAY_PROPS.gradient}
             style={{
               ...styles,
-              position: 'fixed',
-              inset: 0,
               zIndex: 101,
-              backdropFilter: 'blur(3px)',
-              background:
-                'linear-gradient(0deg, rgba(204, 255, 0, 0.5), rgba(255, 255, 255, 0.5))',
             }}
           />
         )}
diff --git a/src/webapp/features/library/containers/libraryContainer/LibraryContainer.tsx b/src/webapp/features/library/containers/libraryContainer/LibraryContainer.tsx
index 7232f474..1d016966 100644
--- a/src/webapp/features/library/containers/libraryContainer/LibraryContainer.tsx
+++ b/src/webapp/features/library/containers/libraryContainer/LibraryContainer.tsx
@@ -4,7 +4,7 @@ import UrlCard from '@/features/cards/components/urlCard/UrlCard';
 import useMyCards from '@/features/cards/lib/queries/useMyCards';
 import CollectionCard from '@/features/collections/components/collectionCard/CollectionCard';
 import useCollections from '@/features/collections/lib/queries/useCollections';
-import { useContextDrawers } from '@/providers/drawers';
+import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer';
 import {
   Anchor,
   Container,
@@ -17,13 +17,14 @@ import {
   Button,
 } from '@mantine/core';
 import Link from 'next/link';
+import { useState } from 'react';
 import { BiCollection, BiPlus } from 'react-icons/bi';
 import { FaRegNoteSticky } from 'react-icons/fa6';
 
 export default function LibraryContainer() {
   const { data: CollectionsData } = useCollections({ limit: 4 });
   const { data: myCardsData } = useMyCards({ limit: 4 });
-  const drawers = useContextDrawers();
+  const [isCollectionDrawerOpen, setIsCollectionDrawerOpen] = useState(false);
 
   return (
     <Container p={'xs'} size={'xl'}>
@@ -54,7 +55,7 @@ export default function LibraryContainer() {
                   No collections
                 </Text>
                 <Button
-                  onClick={() => drawers.open('createCollection')}
+                  onClick={() => setIsCollectionDrawerOpen(true)}
                   variant="light"
                   color={'gray'}
                   size="md"
@@ -113,6 +114,10 @@ export default function LibraryContainer() {
           </Stack>
         </Stack>
       </Stack>
+      <CreateCollectionDrawer
+        isOpen={isCollectionDrawerOpen}
+        onClose={() => setIsCollectionDrawerOpen(false)}
+      />
     </Container>
   );
 }
diff --git a/src/webapp/providers/drawers.tsx b/src/webapp/providers/drawers.tsx
deleted file mode 100644
index 9b52e7ba..00000000
--- a/src/webapp/providers/drawers.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { createContext, useContext, ReactNode } from 'react';
-import AddCardDrawer from '@/features/cards/components/addCardDrawer/AddCardDrawer';
-import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer';
-import { Drawer, useDrawersStack } from '@mantine/core'; // Importing Mantine's hook
-
-type DrawerName = 'createCollection' | 'addCard';
-
-interface DrawersContextType {
-  open: <T extends DrawerName>(drawer: T) => void;
-  close: (drawer: DrawerName) => void;
-  closeAll: () => void;
-  toggle: (name: DrawerName) => void;
-  isOpen: (name: DrawerName) => boolean;
-}
-
-const DrawersContext = createContext<DrawersContextType | undefined>(undefined);
-
-export const useContextDrawers = () => {
-  const ctx = useContext(DrawersContext);
-  if (!ctx) {
-    throw new Error('useContextDrawers must be used within a DrawersProvider');
-  }
-  return ctx;
-};
-
-export const DrawersProvider = ({ children }: { children: ReactNode }) => {
-  // Initialize the drawer stack with the available drawers
-  // https://mantine.dev/core/drawer/#usedrawersstack-hook
-  const stack = useDrawersStack<DrawerName>(['addCard', 'createCollection']);
-
-  return (
-    <DrawersContext.Provider
-      value={{
-        open: stack.open,
-        close: stack.close,
-        closeAll: stack.closeAll,
-        isOpen: (name: DrawerName) => stack.state[name], // Access the state object to check if the drawer is open
-        toggle: stack.toggle,
-      }}
-    >
-      {children}
-
-      <Drawer.Stack>
-        {/* Render Drawers */}
-        <AddCardDrawer
-          {...stack.register('addCard')}
-          isOpen={stack.state['addCard']}
-        />
-        <CreateCollectionDrawer
-          {...stack.register('createCollection')}
-          isOpen={stack.state['createCollection']}
-        />
-      </Drawer.Stack>
-    </DrawersContext.Provider>
-  );
-};
diff --git a/src/webapp/providers/index.tsx b/src/webapp/providers/index.tsx
index 450f1213..63271be2 100644
--- a/src/webapp/providers/index.tsx
+++ b/src/webapp/providers/index.tsx
@@ -4,8 +4,6 @@ import { AuthProvider } from '@/hooks/useAuth';
 import MantineProvider from './mantine';
 import TanStackQueryProvider from './tanstack';
 import { NavbarProvider } from './navbar';
-import { DrawersProvider } from './drawers';
-import { Notifications } from '@mantine/notifications';
 
 interface Props {
   children: React.ReactNode;
@@ -16,9 +14,7 @@ export default function Providers(props: Props) {
     <TanStackQueryProvider>
       <AuthProvider>
         <MantineProvider>
-          <DrawersProvider>
-            <NavbarProvider>{props.children}</NavbarProvider>
-          </DrawersProvider>
+          <NavbarProvider>{props.children}</NavbarProvider>
         </MantineProvider>
       </AuthProvider>
     </TanStackQueryProvider>
diff --git a/src/webapp/styles/overlays.ts b/src/webapp/styles/overlays.ts
new file mode 100644
index 00000000..0a91887b
--- /dev/null
+++ b/src/webapp/styles/overlays.ts
@@ -0,0 +1,5 @@
+export const DEFAULT_OVERLAY_PROPS = {
+  blur: 3,
+  gradient:
+    'linear-gradient(0deg, rgba(204, 255, 0, 0.5), rgba(255, 255, 255, 0.5))',
+};
diff --git a/src/webapp/styles/theme.tsx b/src/webapp/styles/theme.tsx
index 7e7b8dad..3f70eba2 100644
--- a/src/webapp/styles/theme.tsx
+++ b/src/webapp/styles/theme.tsx
@@ -1,16 +1,12 @@
 'use client';
 
 import {
-  Anchor,
   Avatar,
   Button,
-  Checkbox,
-  CheckboxCard,
   CheckboxIndicator,
   createTheme,
   MenuItem,
   NavLink,
-  TextInput,
 } from '@mantine/core';
 
 export const theme = createTheme({