diff --git a/app/Http/Controllers/Client/Servers/CurseForge/ModpackController.php b/app/Http/Controllers/Client/Servers/CurseForge/ModpackController.php
index 064b07e..0091b4c 100644
--- a/app/Http/Controllers/Client/Servers/CurseForge/ModpackController.php
+++ b/app/Http/Controllers/Client/Servers/CurseForge/ModpackController.php
@@ -5,6 +5,7 @@ namespace Pterodactyl\Http\Controllers\Api\Client\Servers\CurseForge;
 
 use GuzzleHttp\Client;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
 use Nette\NotImplementedException;
 use Pterodactyl\Exceptions\DisplayException;
 use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
@@ -38,7 +39,12 @@ class ModpackController extends ClientApiController {
             $index = $request->get('pageindex');
         }
 
-        $result = $this->http_client->get("mods/search?gameid=$this->minecraft_game_id&classid=$this->modpack_class_id&sortField=2&sortorder=desc&index=$index");
+        $queryString = '';
+        if($request->has('modloader') && $request->get('modloader') !== '0') {
+            $queryString .= '&modloadertype=' . $request->get('modloader');
+        }
+
+        $result = $this->http_client->get("mods/search?gameid=$this->minecraft_game_id&classid=$this->modpack_class_id&sortField=2&sortorder=desc&index=$index$queryString");
 
         if($result->getStatusCode() !== 200) {
             throw new DisplayException('Failed to fetch modpacks from CurseForge.');
diff --git a/resources/scripts/api/server/modpacks/getModpacks.ts b/resources/scripts/api/server/modpacks/getModpacks.ts
index dba853f..ca61a22 100644
--- a/resources/scripts/api/server/modpacks/getModpacks.ts
+++ b/resources/scripts/api/server/modpacks/getModpacks.ts
@@ -1,13 +1,21 @@
 import http, { PaginationDataSet } from '@/api/http'
 import { Modpack } from './Modpack';
+import { ModpackSearchFilter } from '@/components/server/modpacks/ModpackContainer';
 
-export default (uuid: string, pageIndex: number = 0): Promise<any> => {
+export default (uuid: string, pageIndex: number = 0, filters: ModpackSearchFilter): Promise<any> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/client/servers/${uuid}/modpacks?pageindex=${pageIndex}`)
-            .then((response) => {
+        let filterQuery = '&';
+        if(filters.modloaderType) {
+            filterQuery += `modloader=${filters.modloaderType}`;
+        } else {
+            filterQuery += `modloader=0`;
+        }
 
-                console.log(rawDataToModpackPaginationData(response.data.pagination), response.data.pagination);
-                resolve([(response.data.data || []).map((item: any) => rawDataToModpackData(item)), rawDataToModpackPaginationData(response.data.pagination)])
+        console.log(filterQuery);
+
+        http.get(`/api/client/servers/${uuid}/modpacks?pageindex=${pageIndex}${filterQuery}`)
+            .then((response) => {
+                resolve([(response.data.data || []).map((item: any) => rawDataToModpackData(item)), rawDataToModpackPaginationData(response.data.pagination), {modloaderType: filters.modloaderType}])
             })
             .catch(reject);
     });
@@ -18,7 +26,7 @@ export const rawDataToModpackPaginationData = (data: any): PaginationDataSet =>
     count: data.resultCount,
     perPage: data.pageSize,
     currentPage: Math.ceil((data.index + data.pageSize) / data.pageSize) == 0 ? 1 : Math.ceil((data.index + data.pageSize) / data.pageSize),
-    totalPages: Math.ceil(data.totalCount / data.pageSize) + 1
+    totalPages: Math.ceil(data.totalCount / data.pageSize)
 });
 
 export const rawDataToModpackData = (data: any): Modpack => ({
diff --git a/resources/scripts/components/server/modpacks/ModpackContainer.tsx b/resources/scripts/components/server/modpacks/ModpackContainer.tsx
index 2e1f5a2..8fc83f6 100644
--- a/resources/scripts/components/server/modpacks/ModpackContainer.tsx
+++ b/resources/scripts/components/server/modpacks/ModpackContainer.tsx
@@ -1,24 +1,41 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ServerContentBlock from "@/components/elements/ServerContentBlock";
-import GreyRowBox from '@/components/elements/GreyRowBox';
 import ModpackItem from './ModpackItem';
 import { ServerContext } from '@/state/server';
-import { useDeepMemoize } from '@/plugins/useDeepMemoize';
-import { use } from 'i18next';
 import getModpacks from '@/api/server/modpacks/getModpacks';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import tw from 'twin.macro';
-import databases from '@/state/server/databases';
 import Spinner from '@/components/elements/Spinner';
 import Fade from '@/components/elements/Fade';
 import { Modpack } from '@/api/server/modpacks/Modpack';
 import Pagination from '@/components/elements/Pagination';
 import { PaginatedResult } from '@/api/http';
+import GreyRowBox from '@/components/elements/GreyRowBox';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import { Dropdown } from '@/components/elements/dropdown';
+import Select from '@/components/elements/Select';
+import { set } from 'date-fns';
+
+export enum ModloaderType {
+    Any,
+    Forge,
+    Cauldron,
+    LiteLoader,
+    Fabric,
+    Quilt
+}
+
+export interface ModpackSearchFilter {
+    modloaderType: ModloaderType;
+}
 
 export default() => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const serverData = ServerContext.useStoreState((state) => state.server.data);
     const [loading, setLoading] = useState(true);
     const [page, setPage] = useState(1);
+    const [modloaderType, setModloaderType] = useState<ModloaderType>(ModloaderType.Any);
+    const [filters, setFilters] = useState<ModpackSearchFilter>({modloaderType: ModloaderType.Any});
 
     const [modpacks, setModpacks] = useState<PaginatedResult<Modpack>>();
 
@@ -32,9 +49,10 @@ export default() => {
             console.log(pageIndex, modpacks.pagination.perPage, newPage);
         }
 
-        getModpacks(uuid, pageIndex)
+        getModpacks(uuid, pageIndex, filters)
             .then((modpacksResult) => {
                 setModpacks({items: modpacksResult[0], pagination: modpacksResult[1]});
+                setModloaderType(modpacksResult[2].modloaderType);
                 setLoading(false);
             })
     }
@@ -42,11 +60,17 @@ export default() => {
     useEffect(() => {
         setLoading(!modpacks?.items.length);
 
-        getModpacks(uuid)
-            .then((modpacksResult) => {
-                setModpacks({items: modpacksResult[0], pagination: modpacksResult[1]});
-            });
-    }, []);
+
+        changePage(1);
+    }, [modloaderType]);
+
+    const updateFilterModloaderType = useCallback(
+        (e: React.ChangeEvent<HTMLSelectElement>) => {
+            setFilters({modloaderType: parseInt(e.target.value)});
+            setModloaderType(parseInt(e.target.value));
+        },
+        [modloaderType],
+    );
 
     return (
         <ServerContentBlock title="Modpacks">
@@ -56,6 +80,32 @@ export default() => {
             ) : (
                 <Fade timeout={150}>
                     <div className='grid grid-cols-3 gap-4'>
+                        <TitledGreyBox title='Filters' className='col-span-3'>
+                            <GreyRowBox>
+                                <div className='grid grid-cols-3 gap-4'>
+                                    <Select defaultValue={modloaderType} onChange={updateFilterModloaderType}>
+                                        <option value={0}>
+                                            Any
+                                        </option>
+                                        <option value={1}>
+                                            Forge
+                                        </option>
+                                        <option value={2}>
+                                            Cauldron
+                                        </option>
+                                        <option value={3}>
+                                            LiteLoader
+                                        </option>
+                                        <option value={4}>
+                                            Fabric
+                                        </option>
+                                        <option value={5}>
+                                            Quilt
+                                        </option>
+                                    </Select>
+                                </div>
+                            </GreyRowBox>
+                        </TitledGreyBox>
                         <Pagination data={modpacks as PaginatedResult<Modpack>} onPageSelect={changePage} paginationButtonsClassNames='col-span-3'>
                             {({ items }) => (
                                 items.length > 0 ? (
@@ -77,3 +127,4 @@ export default() => {
         </ServerContentBlock>
     );
 }
+