diff --git a/src/pages/samples/components.tsx b/src/pages/samples/components.tsx
deleted file mode 100644
index 5f38d77..0000000
--- a/src/pages/samples/components.tsx
+++ /dev/null
@@ -1,490 +0,0 @@
-// !STARTERCONF You can delete this page
-import clsx from 'clsx';
-import * as React from 'react';
-import {
-  HiArrowRight,
-  HiOutlineCreditCard,
-  HiOutlineDesktopComputer,
-  HiOutlineDeviceMobile,
-  HiOutlineShieldCheck,
-  HiPlus,
-} from 'react-icons/hi';
-
-import Button from '@/components/buttons/Button';
-import IconButton from '@/components/buttons/IconButton';
-import TextButton from '@/components/buttons/TextButton';
-import ArrowLink from '@/components/links/ArrowLink';
-import ButtonLink from '@/components/links/ButtonLink';
-import PrimaryLink from '@/components/links/PrimaryLink';
-import UnderlineLink from '@/components/links/UnderlineLink';
-import UnstyledLink from '@/components/links/UnstyledLink';
-import NextImage from '@/components/NextImage';
-import Seo from '@/components/Seo';
-import Skeleton from '@/components/Skeleton';
-
-type Color = (typeof colorList)[number];
-
-export default function ComponentsPage() {
-  const [mode, setMode] = React.useState<'dark' | 'light'>('light');
-  const [color, setColor] = React.useState<Color>('blue');
-  function toggleMode() {
-    return mode === 'dark' ? setMode('light') : setMode('dark');
-  }
-
-  const textColor = mode === 'dark' ? 'text-gray-300' : 'text-gray-600';
-
-  return (
-    <>
-      <Seo
-        templateTitle='Components'
-        description='Pre-built components with awesome default'
-      />
-
-      <main>
-        <section
-          className={clsx(mode === 'dark' ? 'bg-dark' : 'bg-white', color)}
-        >
-          <div
-            className={clsx(
-              'layout min-h-screen py-20',
-              mode === 'dark' ? 'text-white' : 'text-black',
-            )}
-          >
-            <h1>Built-in Components</h1>
-            <ArrowLink direction='left' className='mt-2' href='/'>
-              Back to Home
-            </ArrowLink>
-
-            <div className='mt-8 flex flex-wrap gap-2'>
-              <Button
-                onClick={toggleMode}
-                variant={mode === 'dark' ? 'light' : 'dark'}
-              >
-                Set to {mode === 'dark' ? 'light' : 'dark'}
-              </Button>
-              {/* <Button onClick={randomize}>Randomize CSS Variable</Button> */}
-            </div>
-
-            <ol className='mt-8 space-y-6'>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>Customize Colors</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  You can change primary color to any Tailwind CSS colors. See
-                  globals.css to change your color.
-                </p>
-                <div className='flex flex-wrap gap-2'>
-                  <select
-                    name='color'
-                    id='color'
-                    value={color}
-                    className={clsx(
-                      'block max-w-xs rounded',
-                      mode === 'dark'
-                        ? 'bg-dark border border-gray-600'
-                        : 'border-gray-300 bg-white',
-                      'focus:border-primary-400 focus:ring-primary-400 focus:outline-none focus:ring',
-                    )}
-                    onChange={(e) => setColor(e.target.value as Color)}
-                  >
-                    {colorList.map((c) => (
-                      <option key={c} value={c}>
-                        {c}
-                      </option>
-                    ))}
-                  </select>
-                  <ButtonLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/blob/main/src/styles/colors.css'>
-                    Check list of colors
-                  </ButtonLink>
-                </div>
-                <div className='flex flex-wrap gap-2 text-xs font-medium'>
-                  <div className='bg-primary-50 flex h-10 w-10 items-center justify-center rounded text-black'>
-                    50
-                  </div>
-                  <div className='bg-primary-100 flex h-10 w-10 items-center justify-center rounded text-black'>
-                    100
-                  </div>
-                  <div className='bg-primary-200 flex h-10 w-10 items-center justify-center rounded text-black'>
-                    200
-                  </div>
-                  <div className='bg-primary-300 flex h-10 w-10 items-center justify-center rounded text-black'>
-                    300
-                  </div>
-                  <div className='bg-primary-400 flex h-10 w-10 items-center justify-center rounded text-black'>
-                    400
-                  </div>
-                  <div className='bg-primary-500 flex h-10 w-10 items-center justify-center rounded text-black'>
-                    500
-                  </div>
-                  <div className='bg-primary-600 flex h-10 w-10 items-center justify-center rounded text-white'>
-                    600
-                  </div>
-                  <div className='bg-primary-700 flex h-10 w-10 items-center justify-center rounded text-white'>
-                    700
-                  </div>
-                  <div className='bg-primary-800 flex h-10 w-10 items-center justify-center rounded text-white'>
-                    800
-                  </div>
-                  <div className='bg-primary-900 flex h-10 w-10 items-center justify-center rounded text-white'>
-                    900
-                  </div>
-                  <div className='bg-primary-950 flex h-10 w-10 items-center justify-center rounded text-white'>
-                    950
-                  </div>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>UnstyledLink</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  No style applied, differentiate internal and outside links,
-                  give custom cursor for outside links.
-                </p>
-                <div className='space-x-2'>
-                  <UnstyledLink href='/'>Internal Links</UnstyledLink>
-                  <UnstyledLink href='https://theodorusclarence.com'>
-                    Outside Links
-                  </UnstyledLink>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>PrimaryLink</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Add styling on top of UnstyledLink, giving a primary color to
-                  the link.
-                </p>
-                <div className='space-x-2'>
-                  <PrimaryLink href='/'>Internal Links</PrimaryLink>
-                  <PrimaryLink href='https://theodorusclarence.com'>
-                    Outside Links
-                  </PrimaryLink>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>UnderlineLink</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Add styling on top of UnstyledLink, giving a dotted and
-                  animated underline.
-                </p>
-                <div className='space-x-2'>
-                  <UnderlineLink href='/'>Internal Links</UnderlineLink>
-                  <UnderlineLink href='https://theodorusclarence.com'>
-                    Outside Links
-                  </UnderlineLink>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>ArrowLink</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Useful for indicating navigation, I use this quite a lot, so
-                  why not build a component with some whimsy touch?
-                </p>
-                <div className='flex flex-wrap items-center gap-4'>
-                  <ArrowLink href='/' direction='left'>
-                    Direction Left
-                  </ArrowLink>
-                  <ArrowLink href='/'>Direction Right</ArrowLink>
-                  <ArrowLink
-                    as={UnstyledLink}
-                    className='inline-flex items-center'
-                    href='/'
-                  >
-                    Polymorphic
-                  </ArrowLink>
-                  <ArrowLink
-                    as={ButtonLink}
-                    variant='light'
-                    className='inline-flex items-center'
-                    href='/'
-                  >
-                    Polymorphic
-                  </ArrowLink>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>ButtonLink</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Button styled link with 3 variants.
-                </p>
-                <div className='flex flex-wrap gap-2'>
-                  <ButtonLink
-                    variant='primary'
-                    href='https://theodorusclarence.com'
-                  >
-                    Primary Variant
-                  </ButtonLink>
-                  <ButtonLink
-                    variant='outline'
-                    isDarkBg={mode === 'dark'}
-                    href='https://theodorusclarence.com'
-                  >
-                    Outline Variant
-                  </ButtonLink>
-                  <ButtonLink
-                    variant='ghost'
-                    isDarkBg={mode === 'dark'}
-                    href='https://theodorusclarence.com'
-                  >
-                    Ghost Variant
-                  </ButtonLink>
-                  <ButtonLink
-                    variant='dark'
-                    href='https://theodorusclarence.com'
-                  >
-                    Dark Variant
-                  </ButtonLink>
-                  <ButtonLink
-                    variant='light'
-                    href='https://theodorusclarence.com'
-                  >
-                    Light Variant
-                  </ButtonLink>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>Button</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Ordinary button with style.
-                </p>
-                <div className='flex flex-wrap gap-2'>
-                  <Button variant='primary'>Primary Variant</Button>
-                  <Button variant='outline' isDarkBg={mode === 'dark'}>
-                    Outline Variant
-                  </Button>
-                  <Button variant='ghost' isDarkBg={mode === 'dark'}>
-                    Ghost Variant
-                  </Button>
-                  <Button variant='dark'>Dark Variant</Button>
-                  <Button variant='light'>Light Variant</Button>
-                </div>
-                <div className='flex flex-wrap gap-2'>
-                  <Button
-                    variant='primary'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                  >
-                    Icon
-                  </Button>
-                  <Button
-                    variant='outline'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                    isDarkBg={mode === 'dark'}
-                  >
-                    Icon
-                  </Button>
-                  <Button
-                    variant='ghost'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                    isDarkBg={mode === 'dark'}
-                  >
-                    Icon
-                  </Button>
-                  <Button
-                    variant='dark'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                  >
-                    Icon
-                  </Button>
-                  <Button
-                    variant='light'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                  >
-                    Icon
-                  </Button>
-                </div>
-                <div className='!mt-4 flex flex-wrap gap-2'>
-                  <Button size='sm' variant='primary'>
-                    Small Size
-                  </Button>
-                  <Button
-                    size='sm'
-                    variant='outline'
-                    isDarkBg={mode === 'dark'}
-                  >
-                    Small Size
-                  </Button>
-                  <Button size='sm' variant='ghost' isDarkBg={mode === 'dark'}>
-                    Small Size
-                  </Button>
-                  <Button size='sm' variant='dark'>
-                    Small Size
-                  </Button>
-                  <Button size='sm' variant='light'>
-                    Small Size
-                  </Button>
-                </div>
-                <div className='flex flex-wrap gap-2'>
-                  <Button
-                    size='sm'
-                    variant='primary'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                  >
-                    Icon
-                  </Button>
-                  <Button
-                    size='sm'
-                    variant='outline'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                    isDarkBg={mode === 'dark'}
-                  >
-                    Icon
-                  </Button>
-                  <Button
-                    size='sm'
-                    variant='ghost'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                    isDarkBg={mode === 'dark'}
-                  >
-                    Icon
-                  </Button>
-
-                  <Button
-                    size='sm'
-                    variant='dark'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                  >
-                    Icon
-                  </Button>
-                  <Button
-                    size='sm'
-                    variant='light'
-                    leftIcon={HiPlus}
-                    rightIcon={HiArrowRight}
-                  >
-                    Icon
-                  </Button>
-                </div>
-
-                <div className='!mt-4 flex flex-wrap gap-2'>
-                  <Button disabled variant='primary'>
-                    Disabled
-                  </Button>
-                  <Button disabled variant='outline' isDarkBg={mode === 'dark'}>
-                    Disabled
-                  </Button>
-                  <Button disabled variant='ghost' isDarkBg={mode === 'dark'}>
-                    Disabled
-                  </Button>
-                  <Button disabled variant='dark'>
-                    Disabled
-                  </Button>
-                  <Button disabled variant='light'>
-                    Disabled
-                  </Button>
-                </div>
-                <div className='flex flex-wrap gap-2'>
-                  <Button isLoading variant='primary'>
-                    Disabled
-                  </Button>
-                  <Button
-                    isLoading
-                    variant='outline'
-                    isDarkBg={mode === 'dark'}
-                  >
-                    Disabled
-                  </Button>
-                  <Button isLoading variant='ghost' isDarkBg={mode === 'dark'}>
-                    Disabled
-                  </Button>
-                  <Button isLoading variant='dark'>
-                    Disabled
-                  </Button>
-                  <Button isLoading variant='light'>
-                    Disabled
-                  </Button>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>TextButton</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Button with a text style
-                </p>
-                <div className='space-x-2'>
-                  <TextButton>Primary Variant</TextButton>
-                  <TextButton variant='basic'>Basic Variant</TextButton>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>IconButton</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Button with only icon inside
-                </p>
-                <div className='space-x-2'>
-                  <IconButton icon={HiPlus} />
-                  <IconButton
-                    variant='outline'
-                    icon={HiOutlineDesktopComputer}
-                  />
-                  <IconButton variant='ghost' icon={HiOutlineDeviceMobile} />
-                  <IconButton variant='dark' icon={HiOutlineShieldCheck} />
-                  <IconButton variant='light' icon={HiOutlineCreditCard} />
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>Custom 404 Page</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Styled 404 page with some animation.
-                </p>
-                <div className='flex flex-wrap gap-2'>
-                  <ButtonLink href='/404'>Visit the 404 page</ButtonLink>
-                </div>
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>Next Image</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Next Image with default props and skeleton animation
-                </p>
-                <NextImage
-                  useSkeleton
-                  className='w-32 md:w-40'
-                  src='/favicon/android-chrome-192x192.png'
-                  width='180'
-                  height='180'
-                  alt='Icon'
-                />
-              </li>
-              <li className='space-y-2'>
-                <h2 className='text-lg md:text-xl'>Skeleton</h2>
-                <p className={clsx('!mt-1 text-sm', textColor)}>
-                  Skeleton with shimmer effect
-                </p>
-                <Skeleton className='h-72 w-72' />
-              </li>
-            </ol>
-          </div>
-        </section>
-      </main>
-    </>
-  );
-}
-
-const colorList = [
-  'slate',
-  'gray',
-  'zinc',
-  'neutral',
-  'stone',
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-] as const;
diff --git a/src/queries/projects.ts b/src/queries/projects.ts
index 9f68c1e..ce3467f 100644
--- a/src/queries/projects.ts
+++ b/src/queries/projects.ts
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import { ApolloError, gql } from '@apollo/client';
 
 import { flattenToArray } from '@/lib/graphqlUtils';
 
@@ -7,27 +7,38 @@ import apolloClient from '../../apollo/apollo-client';
 import { Project, RawProject } from '@/types/Project';
 
 export async function queryProjects() {
-  const { data } = await apolloClient.query({ query: projectsQuery });
-
-  const result: RawProject[] = flattenToArray<RawProject>(data.projects);
-  const projects: Project[] = [];
-
-  result.map((entry) => {
-    const project: Project = {
-      id: entry.id,
-      title: entry.title,
-      image: entry.image,
-      shortDescription: entry.shortDescription,
-      longDescription: entry.longDescription,
-      tools: entry.tools.split(','),
-      date: entry.date,
-      tags: entry.tags.split(','),
-      links: entry.links,
-    };
-    projects.push(project);
-  });
-
-  return projects;
+  try {
+    const { data } = await apolloClient.query({ query: projectsQuery });
+
+    const result: RawProject[] = flattenToArray<RawProject>(data.projects);
+    const projects: Project[] = [];
+
+    result.map((entry) => {
+      const project: Project = {
+        id: entry.id,
+        title: entry.title,
+        image: entry.image,
+        shortDescription: entry.shortDescription,
+        longDescription: entry.longDescription,
+        tools: entry.tools.split(','),
+        date: entry.date,
+        tags: entry.tags.split(','),
+        links: entry.links,
+      };
+      projects.push(project);
+    });
+
+    return projects;
+  } catch (error) {
+    if (error instanceof ApolloError) {
+      // eslint-disable-next-line no-console
+      console.error('Apollo Client Error:', error.message);
+    } else {
+      // eslint-disable-next-line no-console
+      console.error('An unexpected error occurred:', error);
+    }
+    return [];
+  }
 }
 
 const projectsQuery = gql`