diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1cff37e6..6d829970 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -5,6 +5,8 @@ on:
     branches:
       - main
   workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * *'  # Runs every night at 12 am UTC
 
 jobs:
   build:
diff --git a/src/app/packages/page.tsx b/src/app/packages/page.tsx
index 2b92c800..2e3ffd23 100644
--- a/src/app/packages/page.tsx
+++ b/src/app/packages/page.tsx
@@ -218,236 +218,271 @@ const Stats = () => {
   }, [startDate, endDate]);
 
   return (
-    <div className='container mx-auto flex flex-col gap-4 items-center'>
-      <h1 className='text-3xl font-bold mb-4'>Download Statistics</h1>
-      <div className='flex flex-col gap-4 flex-wrap lg:flex-row'>
-        {packages.map((package_list) => (
-          <div
-            key={package_list.name}
-            className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md w-80 hover:scale-105'
-          >
-            <div className='flex flex-row items-start justify-between'>
-              <div className=''>
-                <h3 className='font-semibold mb-2 ml-2 indent-8 text-mindfire-text-black capitalize'>
-                  {package_list.name.replaceAll("-", " ")}
-                </h3>
-              </div>
-              <div className='flex flex-row'>
+    <section className='bg-slate-50'>
+      <div className='container mx-auto flex flex-col gap-4 items-center'>
+        <h1 className='text-4xl leading-10 md:text-5xl md:!leading-[3.5rem] tracking-wide text-mindfire-text-black mt-10'>
+          Download Statistics
+        </h1>
+        <p className='mt-6 text-xl text-mf-light-grey tracking-wide mb-10 text-center'>
+          We are a dynamic group of individuals who are passionate about what we
+          do.
+        </p>
+        <div className='flex flex-col gap-4 flex-wrap lg:flex-row'>
+          {packages.map((package_list) => (
+            <div
+              key={package_list.name}
+              className='border p-4 rounded bg-white flex flex-col justify-stretch drop-shadow-md w-80 hover:scale-105'
+            >
+              <div className='flex flex-row items-start justify-between'>
                 <div>
-                  <button
-                    className='font-bold px-4 rounded inline-flex items-center'
-                    onClick={() => {
-                      openModal();
-                      setNpmPackage(package_list);
-                    }}
-                    title='Filter'
-                  >
-                    <Image
-                      src={filter}
-                      height={20}
-                      width={20}
-                      alt='expand_img'
-                      loading='lazy'
-                      quality={75}
-                    />
-                  </button>
+                  <h3 className='font-semibold mb-2 ml-2 text-mindfire-text-black capitalize'>
+                    {package_list.name.replaceAll("-", " ")}
+                  </h3>
                 </div>
-              </div>
-            </div>
-            <div className='flex flex-row items-center mt-4'>
-              <div className='flex justify-around w-full mr-2'>
-                <div className='flex flex-col items-center'>
-                  <div className='flex flex-row items-center space-x-1'>
-                    <Image
-                      src={download}
-                      height={20}
-                      width={20}
-                      alt='expand_img'
-                      loading='lazy'
-                      quality={75}
-                    />
-                    <div>
-                      <h6 className='text-mindfire-text-black font-semibold text-xl'>
-                        {package_list.total}
-                      </h6>
-                    </div>
-                  </div>
-                  <div className='mt-2 ml-2'>
-                    <p className='text-gray-500 text-xm'>Downloads</p>
+                <div className='flex flex-row'>
+                  <div>
+                    <button
+                      className='font-bold px-2 py-1 rounded inline-flex items-center'
+                      onClick={() => {
+                        openModal();
+                        setNpmPackage(package_list);
+                      }}
+                      title='Filter'
+                    >
+                      <Image
+                        src={filter}
+                        height={20}
+                        width={20}
+                        alt='expand_img'
+                        loading='lazy'
+                        quality={75}
+                      />
+                    </button>
                   </div>
                 </div>
               </div>
-              <div className='mt-8 mr-3 flex flex-row items-center space-x-1'>
-                <div>
-                  <Link
-                    href={`https://www.npmjs.com/package/@mindfiredigital/${package_list.name}`}
-                    target='_blank'
-                    title='View Package'
-                  >
-                    <Image
-                      src={npm}
-                      height={35}
-                      width={35}
-                      alt='npm_img'
-                      loading='lazy'
-                      quality={75}
-                    />
-                  </Link>
+              <div className='flex flex-row items-center mt-4'>
+                <div className='flex justify-around w-full'>
+                  <div className='flex flex-col mr-auto ml-2'>
+                    <div className='flex flex-row items-center space-x-1'>
+                      <Image
+                        src={download}
+                        height={20}
+                        width={20}
+                        alt='expand_img'
+                        loading='lazy'
+                        quality={75}
+                      />
+                      <div>
+                        <h6 className='text-mindfire-text-black font-semibold text-xl'>
+                          {package_list.total}
+                        </h6>
+                      </div>
+                    </div>
+                    <div className='mt-2'>
+                      <p className='text-gray-500 text-xm'>Downloads</p>
+                    </div>
+                  </div>
                 </div>
-                <div>
-                  <Link
-                    href={`https://github.com/mindfiredigital/${package_list.name}`}
-                    target='_blank'
-                    title='Github'
-                  >
-                    <Image
-                      src={github}
-                      height={30}
-                      width={30}
-                      alt='npm_img'
-                      loading='lazy'
-                      quality={75}
-                    />
-                  </Link>
+                <div className='mt-8 mr-1 flex flex-row items-center space-x-1'>
+                  <div>
+                    <Link
+                      href={`https://www.npmjs.com/package/@mindfiredigital/${package_list.name}`}
+                      target='_blank'
+                      title='View Package'
+                    >
+                      <Image
+                        src={npm}
+                        height={35}
+                        width={35}
+                        alt='npm_img'
+                        loading='lazy'
+                        quality={75}
+                      />
+                    </Link>
+                  </div>
+                  <div>
+                    <Link
+                      href={`https://github.com/mindfiredigital/${package_list.name}`}
+                      target='_blank'
+                      title='Github'
+                    >
+                      <Image
+                        src={github}
+                        height={30}
+                        width={30}
+                        alt='npm_img'
+                        loading='lazy'
+                        quality={75}
+                      />
+                    </Link>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
 
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as='div' className='relative z-10' onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter='ease-out duration-300'
-            enterFrom='opacity-0'
-            enterTo='opacity-100'
-            leave='ease-in duration-200'
-            leaveFrom='opacity-100'
-            leaveTo='opacity-0'
-          >
-            <div className='fixed inset-0 bg-black/25' />
-          </Transition.Child>
+        <Transition appear show={isOpen} as={Fragment}>
+          <Dialog as='div' className='relative z-10' onClose={closeModal}>
+            <Transition.Child
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='opacity-0'
+              enterTo='opacity-100'
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100'
+              leaveTo='opacity-0'
+            >
+              <div className='fixed inset-0 bg-black/25' />
+            </Transition.Child>
 
-          <div className='fixed inset-0 overflow-y-auto'>
-            <div className='flex min-h-full items-center justify-center p-4 text-center'>
-              <Transition.Child
-                as={Fragment}
-                enter='ease-out duration-300'
-                enterFrom='opacity-0 scale-95'
-                enterTo='opacity-100 scale-100'
-                leave='ease-in duration-200'
-                leaveFrom='opacity-100 scale-100'
-                leaveTo='opacity-0 scale-95'
-              >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
-                  <div className='absolute right-2 top-2'>
-                    <button
-                      onClick={closeModal}
-                      className='text-gray-500 hover:text-gray-700 focus:outline-none'
-                    >
-                      <svg
-                        xmlns='http://www.w3.org/2000/svg'
-                        className='h-6 w-6'
-                        fill='none'
-                        viewBox='0 0 24 24'
-                        stroke='red'
+            <div className='fixed inset-0 overflow-y-auto'>
+              <div className='flex min-h-full items-center justify-center p-4 text-center'>
+                <Transition.Child
+                  as={Fragment}
+                  enter='ease-out duration-300'
+                  enterFrom='opacity-0 scale-95'
+                  enterTo='opacity-100 scale-100'
+                  leave='ease-in duration-200'
+                  leaveFrom='opacity-100 scale-100'
+                  leaveTo='opacity-0 scale-95'
+                >
+                  <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
+                    <div className='absolute right-2 top-2'>
+                      <button
+                        onClick={closeModal}
+                        className='text-gray-500 hover:text-gray-700 focus:outline-none'
                       >
-                        <path
-                          strokeLinecap='round'
-                          strokeLinejoin='round'
-                          strokeWidth={2}
-                          d='M6 18L18 6M6 6l12 12'
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  <Dialog.Title
-                    as='h1'
-                    className='text-lg font-large leading-6 text-gray-900 capitalize text-center mb-4 font-extrabold'
-                  >
-                    {npmPackage.name.replaceAll("-", " ")}
-                  </Dialog.Title>
-                  <div
-                    key={npmPackage.name}
-                    className='border p-4 rounded bg-white flex flex-col justify-stretch'
-                  >
-                    <div className='mb-4 flex justify-center items-center'>
-                      <p className='text-mindfire-text-black text-xm font-bold mr-2'>
-                        Select
-                      </p>
-                      <div className='relative inline-block w-32'>
-                        <select
-                          id='range'
-                          className='bg-gray-50 border text-gray-900 text-sm rounded-lg  block w-full p-1 appearance-none outline-none'
-                          onChange={(e) => handleChange(e, npmPackage)}
+                        <svg
+                          xmlns='http://www.w3.org/2000/svg'
+                          className='h-6 w-6'
+                          fill='none'
+                          viewBox='0 0 24 24'
+                          stroke='red'
                         >
-                          <option value='filter'>Filter</option>
-                          <option value='total'>Total</option>
-                          <option value='Today'>Today</option>
-                          <option value='Yesterday'>Yesterday</option>
-                          <option value='Last month'>Last month</option>
-                          <option value='this month'>This month</option>
-                          <option value='last quarter'>Last quarter</option>
-                          <option value='this year'>This year</option>
-
-                          <option value='custom'>Custom Range</option>
-                        </select>
-                        <div className='absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none'>
-                          <svg
-                            className='w-4 h-4 fill-current text-gray-500'
-                            viewBox='0 0 20 20'
-                            xmlns='http://www.w3.org/2000/svg'
+                          <path
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                            strokeWidth={2}
+                            d='M6 18L18 6M6 6l12 12'
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                    <Dialog.Title
+                      as='h1'
+                      className='text-lg font-large leading-6 text-gray-900 capitalize text-center mb-4 font-extrabold'
+                    >
+                      {npmPackage.name.replaceAll("-", " ")}
+                    </Dialog.Title>
+                    <div
+                      key={npmPackage.name}
+                      className='border p-4 rounded bg-white flex flex-col justify-stretch'
+                    >
+                      <div className='mb-4 flex justify-center items-center'>
+                        <p className='text-mindfire-text-black text-xm font-bold mr-2'>
+                          Select
+                        </p>
+                        <div className='relative inline-block w-32'>
+                          <select
+                            id='range'
+                            className='bg-gray-50 border text-gray-900 text-sm rounded-lg  block w-full p-1 appearance-none outline-none'
+                            onChange={(e) => handleChange(e, npmPackage)}
                           >
-                            <path
-                              d='M7 7l3-3 3 3m0 6l-3 3-3-3'
-                              stroke='currentColor'
-                              strokeWidth='1.5'
-                              fill='none'
-                              strokeLinecap='round'
-                              strokeLinejoin='round'
-                            />
-                          </svg>
+                            <option value='filter'>Filter</option>
+                            <option value='total'>Total</option>
+                            <option value='Today'>Today</option>
+                            <option value='Yesterday'>Yesterday</option>
+                            <option value='Last month'>Last month</option>
+                            <option value='this month'>This month</option>
+                            <option value='last quarter'>Last quarter</option>
+                            <option value='this year'>This year</option>
+
+                            <option value='custom'>Custom Range</option>
+                          </select>
+                          <div className='absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none'>
+                            <svg
+                              className='w-4 h-4 fill-current text-gray-500'
+                              viewBox='0 0 20 20'
+                              xmlns='http://www.w3.org/2000/svg'
+                            >
+                              <path
+                                d='M7 7l3-3 3 3m0 6l-3 3-3-3'
+                                stroke='currentColor'
+                                strokeWidth='1.5'
+                                fill='none'
+                                strokeLinecap='round'
+                                strokeLinejoin='round'
+                              />
+                            </svg>
+                          </div>
                         </div>
                       </div>
-                    </div>
 
-                    <div className='flex flex-col items-center'>
-                      {selectedRange === true ? (
-                        <div className='container  bg-white'>
-                          <div className='flex ml-6 mb-4'>
-                            <div className='mr-1'>
-                              <label
-                                htmlFor='startDate'
-                                className='block font-semibold text-center'
-                              >
-                                Start Date:
-                              </label>
-                              <input
-                                type='date'
-                                id='startDate'
-                                className='border border-gray-300 rounded-md px-2 py-1'
-                                value={startDate}
-                                onChange={(e) => setStartDate(e.target.value)}
-                              />
+                      <div className='flex flex-col items-center'>
+                        {selectedRange === true ? (
+                          <div className='container  bg-white'>
+                            <div className='flex ml-6 mb-4'>
+                              <div className='mr-1'>
+                                <label
+                                  htmlFor='startDate'
+                                  className='block font-semibold text-center'
+                                >
+                                  Start Date:
+                                </label>
+                                <input
+                                  type='date'
+                                  id='startDate'
+                                  className='border border-gray-300 rounded-md px-2 py-1'
+                                  value={startDate}
+                                  onChange={(e) => setStartDate(e.target.value)}
+                                />
+                              </div>
+                              <div className='ml-1'>
+                                <label
+                                  htmlFor='endDate'
+                                  className='block font-semibold text-center'
+                                >
+                                  End Date:
+                                </label>
+                                <input
+                                  type='date'
+                                  id='endDate'
+                                  className='border border-gray-300 rounded-md px-2 py-1'
+                                  value={endDate}
+                                  onChange={(e) => setEndDate(e.target.value)}
+                                />
+                              </div>
                             </div>
-                            <div className='ml-1'>
-                              <label
-                                htmlFor='endDate'
-                                className='block font-semibold text-center'
-                              >
-                                End Date:
-                              </label>
-                              <input
-                                type='date'
-                                id='endDate'
-                                className='border border-gray-300 rounded-md px-2 py-1'
-                                value={endDate}
-                                onChange={(e) => setEndDate(e.target.value)}
-                              />
+                            <div className='flex flex-col items-center mt-4'>
+                              <div className='flex justify-around w-full'>
+                                <div className='flex flex-col items-center'>
+                                  <div className='flex flex-row items-center space-x-1'>
+                                    <Image
+                                      src={download}
+                                      height={20}
+                                      width={20}
+                                      alt='expand_img'
+                                      loading='lazy'
+                                      quality={75}
+                                    />
+                                    <div>
+                                      <h6 className='text-mindfire-text-black font-semibold text-xl'>
+                                        {count}
+                                      </h6>
+                                    </div>
+                                  </div>
+                                  <div className='mt-2 ml-2'>
+                                    <p className='text-mindfire-text-black text-xm'>
+                                      Downloads
+                                    </p>
+                                  </div>
+                                </div>
+                              </div>
                             </div>
                           </div>
+                        ) : (
                           <div className='flex flex-col items-center mt-4'>
                             <div className='flex justify-around w-full'>
                               <div className='flex flex-col items-center'>
@@ -474,44 +509,17 @@ const Stats = () => {
                               </div>
                             </div>
                           </div>
-                        </div>
-                      ) : (
-                        <div className='flex flex-col items-center mt-4'>
-                          <div className='flex justify-around w-full'>
-                            <div className='flex flex-col items-center'>
-                              <div className='flex flex-row items-center space-x-1'>
-                                <Image
-                                  src={download}
-                                  height={20}
-                                  width={20}
-                                  alt='expand_img'
-                                  loading='lazy'
-                                  quality={75}
-                                />
-                                <div>
-                                  <h6 className='text-mindfire-text-black font-semibold text-xl'>
-                                    {count}
-                                  </h6>
-                                </div>
-                              </div>
-                              <div className='mt-2 ml-2'>
-                                <p className='text-mindfire-text-black text-xm'>
-                                  Downloads
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      )}
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
+                  </Dialog.Panel>
+                </Transition.Child>
+              </div>
             </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
+          </Dialog>
+        </Transition>
+      </div>
+    </section>
   );
 };