diff --git a/src-tauri/src/handlers.rs b/src-tauri/src/handlers.rs
index 230e014..ba8cf59 100644
--- a/src-tauri/src/handlers.rs
+++ b/src-tauri/src/handlers.rs
@@ -31,7 +31,7 @@ pub struct Work {
 pub struct ImageAsset {
     name: String,
     path: String,
-    image_dimensions: ImageDimensions,
+    dimensions: ImageDimensions,
 }
 
 #[derive(serde::Serialize)]
@@ -287,7 +287,7 @@ fn add_asset(asset: &PathBuf, work: &mut Work) {
             work.assets.push(ImageAsset {
                 name: asset_name.to_string_lossy().to_string(),
                 path: asset.to_string_lossy().to_string(),
-                image_dimensions: ImageDimensions {
+                dimensions: ImageDimensions {
                     width: asset_width,
                     height: asset_height,
                 },
diff --git a/src/App.tsx b/src/App.tsx
index 2912722..a3990cb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import { WorksViewer } from '@/components/layout/works-viewer/WorksViewer';
 import { CollectionProvider } from '@/contexts/CollectionContext';
 import { SearchProvider } from '@/contexts/SearchContext';
 import { ThemeButton } from '@/components/layout/ThemeButton';
-import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { useLocalStorage } from '@/hooks/use-local-storage';
 import { FC, useCallback } from 'react';
 
 export type Theme = 'light' | 'dark';
diff --git a/src/components/layout/FavoriteButton.tsx b/src/components/layout/FavoriteButton.tsx
index 71c6635..e0ed0c6 100644
--- a/src/components/layout/FavoriteButton.tsx
+++ b/src/components/layout/FavoriteButton.tsx
@@ -1,5 +1,5 @@
 import { SearchContext } from '@/contexts/SearchContext';
-import { useKeyboardEvent } from '@/hooks/useKeyboardEvent';
+import { useKeyboardEvent } from '@/hooks/use-keyboard-event';
 import { FC, useCallback, useContext, useEffect, useState } from 'react';
 
 export const FavoriteButton: FC = () => {
@@ -7,17 +7,13 @@ export const FavoriteButton: FC = () => {
   const [prevSearchRequest, setPrevSearchRequest] = useState('');
 
   const toggleFavorites = useCallback(
-    () =>
-      setSearch((prev) => ({
-        request: prev?.request === '#favorites' ? prevSearchRequest : '#favorites',
-        mode: prev?.mode ?? 'all',
-      })),
+    () => setSearch((prev) => (prev === '#favorites' ? prevSearchRequest : '#favorites')),
     [setSearch, prevSearchRequest],
   );
 
   useEffect(() => {
-    if (!search || search.request === '#favorites') return;
-    setPrevSearchRequest(search.request);
+    if (search === '#favorites') return;
+    setPrevSearchRequest(search);
   }, [search]);
 
   useKeyboardEvent(
@@ -37,9 +33,9 @@ export const FavoriteButton: FC = () => {
     <button
       role="button"
       onClick={toggleFavorites}
-      className="hover:bg-text/10 focus:bg-text/10 rounded-full px-[0.58rem] py-2 text-lg focus:outline-none"
+      className="rounded-full px-[0.58rem] py-2 text-lg hover:bg-text/10 focus:bg-text/10 focus:outline-none"
     >
-      {search?.request === '#favorites' ? '❌' : '⭐'}
+      {search === '#favorites' ? '❌' : '⭐'}
     </button>
   );
 };
diff --git a/src/components/layout/header/CollectionButton.tsx b/src/components/layout/header/CollectionButton.tsx
index 7c6b564..36027de 100644
--- a/src/components/layout/header/CollectionButton.tsx
+++ b/src/components/layout/header/CollectionButton.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useContext, useEffect, useRef } from 'react';
 import { CollectionContext } from '@/contexts/CollectionContext';
-import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { useKeyboardEvent } from '@/hooks/useKeyboardEvent';
+import { useLocalStorage } from '@/hooks/use-local-storage';
+import { useKeyboardEvent } from '@/hooks/use-keyboard-event';
 
 export const CollectionButton: FC = () => {
   const { collection, loadCollection } = useContext(CollectionContext);
diff --git a/src/components/layout/header/Searchbar.tsx b/src/components/layout/header/Searchbar.tsx
index cfef2a4..9f73f44 100644
--- a/src/components/layout/header/Searchbar.tsx
+++ b/src/components/layout/header/Searchbar.tsx
@@ -1,6 +1,6 @@
 import { SearchContext } from '@/contexts/SearchContext';
-import { useKeyboardEvent } from '@/hooks/useKeyboardEvent';
-import { useWanakana } from '@/hooks/useWanakana';
+import { useKeyboardEvent } from '@/hooks/use-keyboard-event';
+import { useWanakana } from '@/hooks/use-wanakana';
 import { FC, useContext, useRef, useState } from 'react';
 
 export const Searchbar: FC = () => {
@@ -11,14 +11,6 @@ export const Searchbar: FC = () => {
 
   useWanakana(inputRef, {}, kanaConversion);
 
-  const toggleSearchMode = () => {
-    setSearch((prev) => ({
-      request: prev?.request ?? '',
-      mode: prev?.mode === 'all' ? 'works' : prev?.mode === 'works' ? 'users' : 'all',
-    }));
-    inputRef.current?.focus();
-  };
-
   const toggleKanaConversion = () => {
     setKanaConversion((prev) => !prev);
     inputRef.current?.focus();
@@ -30,8 +22,6 @@ export const Searchbar: FC = () => {
 
   useKeyboardEvent('keydown', 'Escape', () => inputRef.current?.blur(), [inputRef.current]);
 
-  useKeyboardEvent('keyup', 'Backquote', toggleSearchMode, [], { alt: true });
-
   useKeyboardEvent('keyup', 'Backquote', toggleKanaConversion, [], { control: true });
 
   return (
@@ -40,36 +30,22 @@ export const Searchbar: FC = () => {
         e.preventDefault();
         inputRef.current?.blur();
       }}
-      className="border-text-header flex min-w-0 grow basis-40 gap-1 rounded-full border-2"
+      className="flex min-w-0 grow basis-40 gap-1 rounded-full border-2 border-text-header"
     >
       <input
         ref={inputRef}
         placeholder={isInputInFocus ? 'Search here' : 'Press / to search'}
-        className="placeholder:text-text-header/80 min-w-0 grow bg-transparent py-1.5 pl-3 focus:outline-none"
-        value={search?.request ?? ''}
-        onInput={(e) =>
-          setSearch((prev) => ({
-            request: (e.target as HTMLInputElement).value,
-            mode: prev?.mode ?? 'all',
-          }))
-        }
+        className="min-w-0 grow bg-transparent py-1.5 pl-3 placeholder:text-text-header/80 focus:outline-none"
+        value={search}
+        onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
         onFocus={() => setIsInputInFocus(true)}
         onBlur={() => setIsInputInFocus(false)}
       />
 
-      <button
-        onClick={toggleSearchMode}
-        type="button"
-        className="hover:bg-text-header/20 focus:bg-text-header/20 rounded-l-3xl rounded-r-md pl-3 pr-2 focus:outline-none"
-        title="Toggle search mode"
-      >
-        {search?.mode === 'works' ? 'Works' : search?.mode === 'users' ? 'Users' : 'All'}
-      </button>
-      <div className="bg-text-header/40 my-2 w-[3px] rounded-full" />
       <button
         onClick={toggleKanaConversion}
         type="button"
-        className="hover:bg-text-header/20 focus:bg-text-header/20 rounded-l-md rounded-r-3xl pl-2 pr-3 focus:outline-none"
+        className="rounded-l-md rounded-r-3xl pl-2 pr-3 hover:bg-text-header/20 focus:bg-text-header/20 focus:outline-none"
         title="Toggle romaji-to-kana conversion"
       >
         {kanaConversion ? 'カ' : 'A'}
diff --git a/src/components/layout/works-viewer/AssetImageView.tsx b/src/components/layout/works-viewer/AssetImageView.tsx
index 0c9790a..6313006 100644
--- a/src/components/layout/works-viewer/AssetImageView.tsx
+++ b/src/components/layout/works-viewer/AssetImageView.tsx
@@ -1,4 +1,4 @@
-import { ImageAsset } from '@/lib/Collection';
+import { ImageAsset } from '@/lib/collection';
 import { FC, SVGProps, useEffect } from 'react';
 
 export interface AssetImageViewProps extends SVGProps<SVGSVGElement> {
@@ -8,10 +8,10 @@ export interface AssetImageViewProps extends SVGProps<SVGSVGElement> {
 export const AssetImageView: FC<AssetImageViewProps> = ({ asset, ...svgProps }) => {
   useEffect(() => {
     const imageElement = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-    imageElement.setAttribute('id', asset.imageId);
-    imageElement.setAttribute('width', (asset.imageDimensions.width ?? 100).toString());
-    imageElement.setAttribute('height', (asset.imageDimensions.height ?? 100).toString());
-    imageElement.setAttribute('href', asset.mediaPath);
+    imageElement.setAttribute('id', asset.path);
+    imageElement.setAttribute('width', asset.dimensions.width.toString());
+    imageElement.setAttribute('height', asset.dimensions.height.toString());
+    imageElement.setAttribute('href', asset.path); // TODO: fix media path
     imageElement.setAttribute('decoding', 'async');
 
     let originElement = document.getElementById('images-origin');
@@ -27,11 +27,8 @@ export const AssetImageView: FC<AssetImageViewProps> = ({ asset, ...svgProps })
   }, [asset]);
 
   return (
-    <svg
-      {...svgProps}
-      viewBox={`0 0 ${asset.imageDimensions.width ?? 100} ${asset.imageDimensions.height ?? 100}`}
-    >
-      <use href={'#' + asset.imageId} />
+    <svg {...svgProps} viewBox={`0 0 ${asset.dimensions.width} ${asset.dimensions.height}`}>
+      <use href={'#' + asset.path} />
     </svg>
   );
 };
diff --git a/src/components/layout/works-viewer/WorkCard.tsx b/src/components/layout/works-viewer/WorkCard.tsx
index 6c85faa..8813612 100644
--- a/src/components/layout/works-viewer/WorkCard.tsx
+++ b/src/components/layout/works-viewer/WorkCard.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from 'react/jsx-runtime';
-import { Work } from '@/lib/Collection';
+import { Work } from '@/lib/collection';
 import { FC, RefObject, memo, useEffect, useRef } from 'react';
-import { AnimateScroll } from '@/hooks/useAnimateScroll';
+import { AnimateScroll } from '@/hooks/use-animate-scroll';
 import { AssetImageView } from '@/components/layout/works-viewer/AssetImageView';
 
 interface WorkCardContents {
@@ -21,7 +21,7 @@ const WorkCardContents: FC<WorkCardContents> = memo(({ work }: WorkCardContents)
               />
             )}
           </div>
-          <p className="border-text/50 bg-background text-text absolute right-0 top-0 -mr-2 -mt-0.5 rounded-lg border px-2 shadow-md transition-colors [:hover>&]:invisible">
+          <p className="absolute right-0 top-0 -mr-2 -mt-0.5 rounded-lg border border-text/50 bg-background px-2 text-text shadow-md transition-colors [:hover>&]:invisible">
             x{work.assets.length}
           </p>
         </div>
@@ -29,7 +29,7 @@ const WorkCardContents: FC<WorkCardContents> = memo(({ work }: WorkCardContents)
         <div />
       )}
       <div className="overflow-hidden p-2 text-left">
-        <h2 className="text-text-accent whitespace-nowrap text-lg font-bold">
+        <h2 className="whitespace-nowrap text-lg font-bold text-text-accent">
           {work.title ?? 'Untitled'}
         </h2>
         <p className="mb-2 whitespace-nowrap text-sm font-semibold">
@@ -92,7 +92,7 @@ export const WorkCard: FC<WorkCardProps> = memo(
         onClick={() => selectIndex(index)}
         tabIndex={-1}
         className={
-          'border-text/30 grid w-full grid-cols-[3fr_8fr] items-center gap-2 rounded-xl border-2 p-1 shadow-md focus:outline-none' +
+          'grid w-full grid-cols-[3fr_8fr] items-center gap-2 rounded-xl border-2 border-text/30 p-1 shadow-md focus:outline-none' +
           (active ? ' border-text/60 bg-text/20' : ' hover:bg-text/10')
         }
       >
diff --git a/src/components/layout/works-viewer/WorkDetails.tsx b/src/components/layout/works-viewer/WorkDetails.tsx
index a57dd65..2cabd9f 100644
--- a/src/components/layout/works-viewer/WorkDetails.tsx
+++ b/src/components/layout/works-viewer/WorkDetails.tsx
@@ -1,7 +1,7 @@
 import { CollectionContext } from '@/contexts/CollectionContext';
-import { useAnimateScroll } from '@/hooks/useAnimateScroll';
-import { useKeyboardEvent } from '@/hooks/useKeyboardEvent';
-import { Work } from '@/lib/Collection';
+import { useAnimateScroll } from '@/hooks/use-animate-scroll';
+import { useKeyboardEvent } from '@/hooks/use-keyboard-event';
+import { Work } from '@/lib/collection';
 import { FC, Fragment, useContext, useEffect, useRef, useState } from 'react';
 
 interface WorkDetailsContentsProps {
@@ -119,11 +119,11 @@ const WorkDetailsContents: FC<WorkDetailsContentsProps> = ({ work, expanded }) =
             </tr>
           )}
 
-          {work.dateTime && (
+          {work.uploadTime && (
             <tr>
               <td className="align-top">uploaded:　</td>
               <td>
-                <p>{work.dateTime.toDateString()}</p>
+                <p>{work.uploadTime}</p>
               </td>
             </tr>
           )}
@@ -141,12 +141,12 @@ const WorkDetailsContents: FC<WorkDetailsContentsProps> = ({ work, expanded }) =
             </tr>
           )}
 
-          {work.pageUrl && (
+          {work.url && (
             <tr>
               <td />
               <td>
                 <a
-                  href={work.pageUrl}
+                  href={work.url}
                   target="blank"
                   tabIndex={expanded ? 0 : -1}
                   className="text-blue-500 hover:underline"
diff --git a/src/components/layout/works-viewer/WorkView.tsx b/src/components/layout/works-viewer/WorkView.tsx
index 2dd89d1..9e00b56 100644
--- a/src/components/layout/works-viewer/WorkView.tsx
+++ b/src/components/layout/works-viewer/WorkView.tsx
@@ -1,6 +1,6 @@
-import { useKeyboardEvent } from '@/hooks/useKeyboardEvent';
-import { useTimeout } from '@/hooks/useTimeout';
-import { Work } from '@/lib/Collection';
+import { useKeyboardEvent } from '@/hooks/use-keyboard-event';
+import { useTimeout } from '@/hooks/use-timeout';
+import { Work } from '@/lib/collection';
 import { FC, useEffect, useState } from 'react';
 import { AssetImageView } from '@/components/layout/works-viewer/AssetImageView';
 
@@ -61,7 +61,7 @@ export const WorkView: FC<WorkViewProps> = ({ work, fullscreenMode }) => {
       className={
         'relative z-20 flex grow basis-0 items-center justify-center overflow-hidden shadow-lg transition-[border-radius] duration-1000' +
         (!controlsShown ? ' cursor-none' : '') +
-        (!fullscreenMode ? ' border-text/30 rounded-xl border-2' : '')
+        (!fullscreenMode ? ' rounded-xl border-2 border-text/30' : '')
       }
     >
       {work?.assets?.length && work.assets[pageNumber] ? (
@@ -69,12 +69,12 @@ export const WorkView: FC<WorkViewProps> = ({ work, fullscreenMode }) => {
           <AssetImageView asset={work.assets[pageNumber]} className="z-30 size-full" />
 
           <div className="absolute z-20 flex size-full items-center justify-center">
-            <div className="bg-background absolute size-full" />
+            <div className="absolute size-full bg-background" />
             <AssetImageView
               asset={work.assets[pageNumber]}
               className="size-full scale-[3] blur-[0.4rem]"
             />
-            <div className="bg-background/40 absolute size-full" />
+            <div className="absolute size-full bg-background/40" />
           </div>
 
           <button
diff --git a/src/components/layout/works-viewer/WorksList.tsx b/src/components/layout/works-viewer/WorksList.tsx
index 57e5d96..a7e7502 100644
--- a/src/components/layout/works-viewer/WorksList.tsx
+++ b/src/components/layout/works-viewer/WorksList.tsx
@@ -9,14 +9,14 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useWorks } from '@/hooks/useWorks';
-import { Work } from '@/lib/Collection';
+import { useWorks } from '@/hooks/use-works';
+import { Work } from '@/lib/collection';
 import { SearchContext } from '@/contexts/SearchContext';
-import { useKeyboardEvent } from '@/hooks/useKeyboardEvent';
+import { useKeyboardEvent } from '@/hooks/use-keyboard-event';
 import { WorkCard } from '@/components/layout/works-viewer/WorkCard';
 import { RenderInViewport } from '@/components/render/RenderInViewport';
-import { useTimeout } from '@/hooks/useTimeout';
-import { useAnimateScroll, AnimateScroll } from '@/hooks/useAnimateScroll';
+import { useTimeout } from '@/hooks/use-timeout';
+import { useAnimateScroll, AnimateScroll } from '@/hooks/use-animate-scroll';
 import { CollectionContext } from '@/contexts/CollectionContext';
 
 const workCardChunkSize = 20;
@@ -137,7 +137,7 @@ const WorkListCards: FC<WorkListCardsProps> = memo(
               const workIndex = chunkIndex * workCardChunkSize + workIndexInChunk;
               return (
                 <WorkCard
-                  key={work.path}
+                  key={work.path} // TODO: relativePath
                   work={work}
                   index={workIndex}
                   selectIndex={setSelectedIndex}
@@ -161,10 +161,7 @@ interface WorksListProps {
 export const WorksList: FC<WorksListProps> = ({ selectWork }) => {
   const { search } = useContext(SearchContext);
   const { collection } = useContext(CollectionContext);
-  const works = useWorks(
-    search,
-    useCallback((error: unknown) => console.error(error), []),
-  );
+  const works = useWorks(search);
 
   const [scrolledToTheTop, setScrolledToTheTop] = useState(true);
   const [scrolledToTheBottom, setScrolledToTheBottom] = useState(false);
@@ -194,7 +191,7 @@ export const WorksList: FC<WorksListProps> = ({ selectWork }) => {
         >
           <div className="flex flex-col gap-2 py-2 [direction:ltr]">
             <WorkListCards
-              works={works}
+              works={works ?? []}
               selectWork={selectWork}
               scrollContainerRef={scrollContainerRef}
               animateScroll={animateScroll}
@@ -203,7 +200,7 @@ export const WorksList: FC<WorksListProps> = ({ selectWork }) => {
         </div>
       </div>
 
-      {search?.request === '#favorites' && (
+      {search === '#favorites' && (
         <button
           onClick={() => collection?.favorites.clear()}
           className="pb-2 hover:text-text-accent hover:underline focus:text-text-accent focus:outline-none"
diff --git a/src/components/layout/works-viewer/WorksViewer.tsx b/src/components/layout/works-viewer/WorksViewer.tsx
index d800f24..87103ee 100644
--- a/src/components/layout/works-viewer/WorksViewer.tsx
+++ b/src/components/layout/works-viewer/WorksViewer.tsx
@@ -1,10 +1,10 @@
 import { WorksList } from '@/components/layout/works-viewer/WorksList';
 import { WorkView } from '@/components/layout/works-viewer/WorkView';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { Work } from '@/lib/Collection';
+import { Work } from '@/lib/collection';
 import { WorkDetails } from '@/components/layout/works-viewer/WorkDetails';
 import { animated, useSpring } from '@react-spring/web';
-import { useKeyboardEvent } from '@/hooks/useKeyboardEvent';
+import { useKeyboardEvent } from '@/hooks/use-keyboard-event';
 import { FavoriteButton } from '@/components/layout/FavoriteButton';
 
 type TransitionState = 'preview' | 'transition' | 'fullscreen';
diff --git a/src/contexts/CollectionContext.tsx b/src/contexts/CollectionContext.tsx
index 14d01b2..f6fb4de 100644
--- a/src/contexts/CollectionContext.tsx
+++ b/src/contexts/CollectionContext.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren, createContext, useCallback, useState } from 'react';
-import { Collection } from '@/lib/Collection';
+import { Collection, createCollection } from '@/lib/collection/collection';
 
 interface CollectionContextValue {
   collection: Collection | undefined;
@@ -11,8 +11,8 @@ export const CollectionContext = createContext({} as CollectionContextValue);
 export const CollectionProvider = ({ children }: PropsWithChildren) => {
   const [collection, setCollection] = useState<Collection>();
 
-  const loadCollection = useCallback((collectionPath: string) => {
-    setCollection(new Collection(collectionPath));
+  const loadCollection = useCallback(async (collectionPath: string) => {
+    setCollection(await createCollection(collectionPath));
   }, []);
 
   return (
diff --git a/src/contexts/SearchContext.tsx b/src/contexts/SearchContext.tsx
index 31aadd4..16b98b2 100644
--- a/src/contexts/SearchContext.tsx
+++ b/src/contexts/SearchContext.tsx
@@ -1,15 +1,14 @@
 import { Dispatch, PropsWithChildren, SetStateAction, createContext, useState } from 'react';
-import { Search } from '@/lib/Collection';
 
 interface SearchContextValue {
-  search: Search | undefined;
-  setSearch: Dispatch<SetStateAction<Search | undefined>>;
+  search: string;
+  setSearch: Dispatch<SetStateAction<string>>;
 }
 
 export const SearchContext = createContext({} as SearchContextValue);
 
 export const SearchProvider = ({ children }: PropsWithChildren) => {
-  const [search, setSearch] = useState<Search>();
+  const [search, setSearch] = useState<string>('');
 
   return <SearchContext.Provider value={{ search, setSearch }}>{children}</SearchContext.Provider>;
 };
diff --git a/src/hooks/useAnimateScroll.ts b/src/hooks/use-animate-scroll.ts
similarity index 100%
rename from src/hooks/useAnimateScroll.ts
rename to src/hooks/use-animate-scroll.ts
diff --git a/src/hooks/useEventListener.ts b/src/hooks/use-event-listener.ts
similarity index 100%
rename from src/hooks/useEventListener.ts
rename to src/hooks/use-event-listener.ts
diff --git a/src/hooks/useKeyboardEvent.ts b/src/hooks/use-keyboard-event.ts
similarity index 94%
rename from src/hooks/useKeyboardEvent.ts
rename to src/hooks/use-keyboard-event.ts
index d2810f8..70e7006 100644
--- a/src/hooks/useKeyboardEvent.ts
+++ b/src/hooks/use-keyboard-event.ts
@@ -1,5 +1,5 @@
 import { DependencyList } from 'react';
-import { useEventListener } from '@/hooks/useEventListener';
+import { useEventListener } from '@/hooks/use-event-listener';
 
 type Modifiers = {
   control?: boolean;
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/use-local-storage.ts
similarity index 100%
rename from src/hooks/useLocalStorage.ts
rename to src/hooks/use-local-storage.ts
diff --git a/src/hooks/useTimeout.ts b/src/hooks/use-timeout.ts
similarity index 100%
rename from src/hooks/useTimeout.ts
rename to src/hooks/use-timeout.ts
diff --git a/src/hooks/useWanakana.ts b/src/hooks/use-wanakana.ts
similarity index 100%
rename from src/hooks/useWanakana.ts
rename to src/hooks/use-wanakana.ts
diff --git a/src/hooks/use-works.ts b/src/hooks/use-works.ts
new file mode 100644
index 0000000..d39aa8c
--- /dev/null
+++ b/src/hooks/use-works.ts
@@ -0,0 +1,15 @@
+import { useContext, useMemo } from 'react';
+import { CollectionContext } from '@/contexts/CollectionContext';
+import { Work } from '@/lib/collection';
+
+export const useWorks = (search?: string): Work[] | undefined => {
+  const { collection } = useContext(CollectionContext);
+
+  const works = useMemo(() => {
+    if (!search) return collection?.works;
+    if (search === '#favorites') return collection?.favorites.works;
+    return collection?.search(search);
+  }, [collection, search]);
+
+  return works;
+};
diff --git a/src/hooks/useWorks.ts b/src/hooks/useWorks.ts
deleted file mode 100644
index b8bd2a2..0000000
--- a/src/hooks/useWorks.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import { CollectionContext } from '@/contexts/CollectionContext';
-import { OnError, Search, Work } from '@/lib/Collection';
-
-interface UseWorks {
-  (search?: Search, onError?: OnError): Work[];
-  (predicate: (work: Work) => boolean, onError?: OnError): Work[];
-}
-
-export const useWorks: UseWorks = (arg?: any, onError?: OnError) => {
-  const { collection } = useContext(CollectionContext);
-  const [works, setWorks] = useState<Work[]>([]);
-
-  useEffect(() => {
-    if (arg?.request === '#favorites') return collection?.favorites.subscribe(setWorks, onError);
-    else return collection?.subscribe(arg, setWorks, onError);
-  }, [collection, arg, onError]);
-
-  return works;
-};
diff --git a/src/lib/Collection.ts b/src/lib/Collection.ts
deleted file mode 100644
index 528fd3a..0000000
--- a/src/lib/Collection.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-// TODO: Remove this stub implementation
-
-import { toHiragana } from 'wanakana';
-import { CollectionList } from '@/lib/CollectionList';
-import { ISizeCalculationResult } from 'image-size/dist/types/interface';
-
-export type WorkAgeRestriction = 'all-ages' | 'r-18' | 'r-18g';
-
-export type SearchMode = 'all' | 'works' | 'users';
-
-export interface Search {
-  request: string;
-  mode: SearchMode;
-}
-
-export interface ImageAsset {
-  name: string;
-  path: string;
-  mediaPath: string;
-  imageId: string;
-  imageDimensions: ISizeCalculationResult;
-}
-
-export interface Work {
-  path: string;
-  title: string;
-  userName: string;
-  id?: number;
-  userId?: number;
-  pageUrl?: string;
-  imageUrl?: string;
-  thumbnailUrl?: string;
-  ageRestriction?: WorkAgeRestriction;
-  ai?: boolean;
-  description?: string;
-  tags?: string[];
-  dimensions?: { width: number; height: number };
-  bookmarks?: number;
-  dateTime?: Date;
-  assets?: ImageAsset[];
-}
-
-export type OnUpdate = (works: Work[]) => void;
-export type OnError = (error: unknown) => void;
-export type CleanupFunction = () => void;
-
-export type InternalOnUpdateAction = () => void;
-export type InternalOnErrorAction = (error: unknown) => void;
-
-export class Collection {
-  public readonly path: string;
-  public readonly name: string;
-  public get isLoaded() {
-    return this.loaded;
-  }
-  public favorites: CollectionList;
-
-  private worksChunks: Work[][] = [];
-  private loaded = false;
-  private onCollectionUpdateActions: InternalOnUpdateAction[] = [];
-  private onCollectionErrorActions: InternalOnErrorAction[] = [];
-
-  constructor(collectionPath: string) {
-    this.path = collectionPath;
-    const splittedPath = collectionPath.split('\\');
-    this.name = splittedPath[splittedPath.length - 1];
-    this.loadWorksFromCollection();
-    this.favorites = new CollectionList(this, 'favorites');
-  }
-
-  public subscribe(
-    search: Search | undefined,
-    onUpdate: OnUpdate,
-    onError?: OnError,
-  ): CleanupFunction;
-  public subscribe(
-    predicate: (work: Work) => boolean,
-    onUpdate: OnUpdate,
-    onError?: OnError,
-  ): CleanupFunction;
-  public subscribe(
-    searchOrPredicate: Search | ((work: Work) => boolean) | undefined,
-    onUpdate: OnUpdate,
-    onError?: OnError,
-  ) {
-    const searchedChunks: Work[][] = [];
-
-    let onUpdateAction: () => void;
-    if (typeof searchOrPredicate === 'function') {
-      onUpdateAction = () => {
-        // Search only new chunks
-        const newSearchedChunks = this.worksChunks
-          .slice(searchedChunks.length)
-          .map((works) => works.filter(searchOrPredicate));
-
-        searchedChunks.push(...newSearchedChunks);
-        onUpdate(searchedChunks.flat());
-      };
-    } else {
-      onUpdateAction = () => {
-        if (!searchOrPredicate?.request) {
-          const works = this.worksChunks.flat();
-          onUpdate(works);
-          return;
-        }
-
-        const searchKeywords = searchOrPredicate.request
-          .split(',')
-          .map((keyword) =>
-            keyword
-              .trim()
-              .split(' ')
-              .map((keyword) => keyword.split('　').map((keyword) => keyword.split('、'))),
-          )
-          .flat(3)
-          .map((keyword) => toHiragana(keyword, { passRomaji: true }).toLowerCase());
-
-        const checkProperties = (properties: (string | string[] | undefined)[]) =>
-          searchKeywords.every((keyword) => {
-            return properties.some((property) => {
-              if (!property) return false;
-              if (typeof property === 'object') {
-                return property.some((item) =>
-                  toHiragana(item, { passRomaji: true }).toLowerCase().includes(keyword),
-                );
-              } else {
-                return toHiragana(property, { passRomaji: true }).toLowerCase().includes(keyword);
-              }
-            });
-          });
-
-        // Search only new chunks
-        const newSearchedChunks = this.worksChunks.slice(searchedChunks.length).map((works) => {
-          let results: Work[] = works;
-          if (searchOrPredicate.mode === 'all') {
-            results = results.filter((work) =>
-              checkProperties([
-                work.title,
-                work.tags,
-                work.userName,
-                work.description,
-                work.id?.toString(),
-                work.userId?.toString(),
-              ]),
-            );
-          }
-          if (searchOrPredicate.mode === 'users') {
-            results = results.filter((work) =>
-              checkProperties([work.userName, work.userId?.toString()]),
-            );
-          } else if (searchOrPredicate.mode === 'works') {
-            results = results.filter((work) =>
-              checkProperties([work.title, work.description, work.tags, work.id?.toString()]),
-            );
-          }
-          return results;
-        });
-        searchedChunks.push(...newSearchedChunks);
-        onUpdate(searchedChunks.flat());
-      };
-    }
-    onUpdateAction();
-
-    this.onCollectionUpdateActions.push(onUpdateAction);
-    if (onError) this.onCollectionErrorActions.push(onError);
-    return () => {
-      this.onCollectionUpdateActions = this.onCollectionUpdateActions.filter(
-        (action) => action !== onUpdateAction,
-      );
-      if (onError) this.onCollectionErrorActions.filter((action) => action !== onError);
-    };
-  }
-
-  private triggerOnCollectionUpdate() {
-    this.onCollectionUpdateActions.forEach((action) => action());
-  }
-
-  private async loadWorksFromCollection() {
-    this.worksChunks = [
-      [
-        {
-          path: 'test',
-          title: 'test',
-          userName: 'test',
-          id: 0,
-          userId: 0,
-          pageUrl: 'test',
-          imageUrl: 'test',
-          thumbnailUrl: 'test',
-          ageRestriction: 'all-ages',
-          ai: false,
-          description: 'test',
-          tags: ['test'],
-          dimensions: { width: 10, height: 10 },
-          bookmarks: 0,
-          dateTime: new Date(),
-        },
-      ],
-    ];
-    this.loaded = true;
-    this.triggerOnCollectionUpdate();
-  }
-}
diff --git a/src/lib/CollectionList.ts b/src/lib/CollectionList.ts
deleted file mode 100644
index a3de980..0000000
--- a/src/lib/CollectionList.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-// TODO: Remove this stub implementation
-
-import {
-  Collection,
-  CleanupFunction,
-  InternalOnErrorAction,
-  InternalOnUpdateAction,
-  OnError,
-  OnUpdate,
-  Work,
-} from '@/lib/Collection';
-
-export class CollectionList {
-  public name: string;
-
-  private collection: Collection;
-  private works: Work[] = [];
-  private onListUpdateActions: InternalOnUpdateAction[] = [];
-  private onListErrorActions: InternalOnErrorAction[] = [];
-
-  constructor(collection: Collection, name: string) {
-    this.collection = collection;
-    this.name = name;
-    this.loadList();
-  }
-
-  public subscribe(onUpdate: OnUpdate, onError?: OnError): CleanupFunction {
-    const onUpdateAction = () => onUpdate(this.works);
-    onUpdateAction();
-
-    this.onListUpdateActions.push(onUpdateAction);
-    if (onError) this.onListErrorActions.push(onError);
-    return () => {
-      this.onListUpdateActions = this.onListUpdateActions.filter(
-        (action) => action !== onUpdateAction,
-      );
-      if (onError) this.onListErrorActions.filter((action) => action !== onError);
-    };
-  }
-
-  public add(work: Work): void;
-  public add(works: Work[]): void;
-
-  public add(arg: Work | Work[]) {
-    if (!this.includes(arg as any))
-      this.works = [...this.works, ...(Array.isArray(arg) ? arg : [arg])];
-    this.triggerOnListUpdate();
-    this.saveList();
-  }
-
-  public remove(work: Work): void;
-  public remove(works: Work[]): void;
-
-  public remove(arg: Work | Work[]) {
-    if (Array.isArray(arg)) {
-      this.works = this.works.filter((work) =>
-        arg.every((removedWork) =>
-          removedWork.id === undefined
-            ? work.path !== removedWork.path
-            : work.id !== removedWork.id,
-        ),
-      );
-    } else {
-      this.works = this.works.filter((work) =>
-        arg.id === undefined ? work.path !== arg.path : work.id !== arg.id,
-      );
-    }
-    this.triggerOnListUpdate();
-    this.saveList();
-  }
-
-  public clear() {
-    this.works = [];
-    this.triggerOnListUpdate();
-    this.saveList();
-  }
-
-  public includes(work: Work) {
-    return (
-      this.works.findIndex((workInList) =>
-        work.id === undefined ? workInList.path === work.path : workInList.id === work.id,
-      ) !== -1
-    );
-  }
-
-  private async loadList() {
-    this.collection.subscribe(
-      () => true,
-      (works) => {
-        this.works = works;
-        this.triggerOnListUpdate();
-        this.saveList();
-      },
-      this.triggerOnListError,
-    );
-  }
-
-  private async saveList() {
-    return;
-  }
-
-  private triggerOnListUpdate() {
-    this.onListUpdateActions.forEach((action) => action());
-  }
-
-  private triggerOnListError(error: unknown) {
-    this.onListErrorActions.forEach((action) => action(error));
-  }
-}
diff --git a/src/lib/collection/collection-list.ts b/src/lib/collection/collection-list.ts
new file mode 100644
index 0000000..bbf76ac
--- /dev/null
+++ b/src/lib/collection/collection-list.ts
@@ -0,0 +1,52 @@
+import { Work, WorkLike } from './types';
+import { Collection } from './collection';
+
+export class CollectionList {
+  public readonly name: string;
+  public get works(): Work[] {
+    return this._works;
+  }
+
+  private _collection: Collection;
+  private _works: Work[];
+
+  constructor(collection: Collection, name: string) {
+    this._collection = collection;
+    this.name = name;
+    this._works = this.getWorks();
+  }
+
+  public async add(...works: Work[]): Promise<void> {
+    this._works = [...this._works, ...works];
+    await this.saveList();
+  }
+
+  public async remove(...works: WorkLike[]): Promise<void> {
+    this._works = this._works.filter((currentWork) =>
+      works.every((work) => work.relativePath !== currentWork.relativePath),
+    );
+    await this.saveList();
+  }
+
+  public async clear(): Promise<void> {
+    this._works = [];
+    await this.saveList();
+  }
+
+  public includes(...works: WorkLike[]): boolean {
+    return works.every(
+      (work) =>
+        this._works.findIndex((workInList) => work.relativePath === workInList.relativePath) !== -1,
+    );
+  }
+
+  private getWorks(): Work[] {
+    // TODO: Implement
+    return this._collection.works;
+  }
+
+  private async saveList(): Promise<void> {
+    // TODO: Implement
+    return;
+  }
+}
diff --git a/src/lib/collection/collection.ts b/src/lib/collection/collection.ts
new file mode 100644
index 0000000..92f5e6b
--- /dev/null
+++ b/src/lib/collection/collection.ts
@@ -0,0 +1,32 @@
+import { Work } from './types';
+import { CollectionList } from './collection-list';
+import { invoke, path } from '@tauri-apps/api';
+
+export const createCollection = async (collectionPath: string): Promise<Collection> => {
+  const [works, errors]: [Work[], string[]] = await invoke('read_collection', { collectionPath });
+  errors.forEach((error) => console.error(error)); // TODO: Show toast messages or something
+  return new Collection(collectionPath, works);
+};
+
+export class Collection {
+  public readonly path: string;
+  public readonly name: string;
+  public readonly favorites: CollectionList;
+  public get works(): Work[] {
+    return this._works;
+  }
+
+  private _works: Work[];
+
+  constructor(collectionPath: string, works: Work[]) {
+    this.path = collectionPath;
+    this.name = collectionPath.split(path.sep).pop() ?? '';
+    this._works = works;
+    this.favorites = new CollectionList(this, 'favorites');
+  }
+
+  public search(search: string): Work[] {
+    // TODO: Implement
+    return this._works;
+  }
+}
diff --git a/src/lib/collection/index.ts b/src/lib/collection/index.ts
new file mode 100644
index 0000000..72c47c7
--- /dev/null
+++ b/src/lib/collection/index.ts
@@ -0,0 +1,5 @@
+export { createCollection } from './collection';
+
+export type * from './collection';
+export type * from './collection-list';
+export type * from './types';
diff --git a/src/lib/collection/types.ts b/src/lib/collection/types.ts
new file mode 100644
index 0000000..94c26a3
--- /dev/null
+++ b/src/lib/collection/types.ts
@@ -0,0 +1,37 @@
+export type AgeRestriction = 'all-ages' | 'r-18' | 'r-18g';
+
+export interface ImageDimensions {
+  width: number;
+  height: number;
+}
+
+export interface ImageAsset {
+  name: string;
+  path: string;
+  dimensions: ImageDimensions;
+}
+
+export interface Work {
+  path: string;
+  relativePath: string;
+  title: string;
+  userName: string;
+  assets: ImageAsset[];
+
+  id?: number;
+  userId?: number;
+  url?: string;
+  imageUrl?: string;
+  thumbnailUrl?: string;
+  ageRestriction?: AgeRestriction;
+  ai?: boolean;
+  description?: string;
+  tags?: string[];
+  dimensions?: ImageDimensions;
+  bookmarks?: number;
+  uploadTime?: string;
+}
+
+export interface WorkLike {
+  relativePath: string;
+}
diff --git a/src/main.tsx b/src/main.tsx
index f018818..db1955c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,15 +2,9 @@ import ReactDOM from 'react-dom/client';
 import { StrictMode } from 'react';
 import { App } from '@/App';
 import '@/styles/main.css';
-import { invoke } from '@tauri-apps/api';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>
     <App />,
   </StrictMode>,
 );
-
-// TODO: Remove
-invoke('read_collection', { collectionPath: 'C:\\Andrew\\Other\\For PPV Test' }).then((works) =>
-  console.log(works),
-);