diff --git a/app/Models/Permission.php b/app/Models/Permission.php
index 64c2800eb..81bb51e6c 100644
--- a/app/Models/Permission.php
+++ b/app/Models/Permission.php
@@ -63,10 +63,13 @@ class Permission extends Model
     public const ACTION_STARTUP_SOFTWARE = 'startup.software';
 
     public const ACTION_SETTINGS_RENAME = 'settings.rename';
+    public const ACTION_SETTINGS_MODRINTH = 'settings.modrinth';
     public const ACTION_SETTINGS_REINSTALL = 'settings.reinstall';
 
     public const ACTION_ACTIVITY_READ = 'activity.read';
 
+    public const ACTION_MODRINTH_DOWNLOAD = 'modrinth.download';
+
     /**
      * Should timestamps be used on this model.
      */
@@ -199,7 +202,9 @@ class Permission extends Model
             'description' => 'Permissions that control a user\'s access to the settings for this server.',
             'keys' => [
                 'rename' => 'Allows a user to rename this server and change the description of it.',
+                'modrinth' => 'Allows a user to change what loader/version of mods to download',
                 'reinstall' => 'Allows a user to trigger a reinstall of this server.',
+
             ],
         ],
 
@@ -209,6 +214,12 @@ class Permission extends Model
                 'read' => 'Allows a user to view the activity logs for the server.',
             ],
         ],
+        'modrinth' => [
+          'description' => 'Permissions that control a user\'s access to downloading mods using in app modrinth',
+          'keys' => [
+              'download' => 'Allows a user to download mods to the server using modrinth',
+          ],
+      ],
     ];
 
     /**
diff --git a/resources/scripts/components/elements/CheckBoxMods.tsx b/resources/scripts/components/elements/CheckBoxMods.tsx
new file mode 100644
index 000000000..d6a7e6d07
--- /dev/null
+++ b/resources/scripts/components/elements/CheckBoxMods.tsx
@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+import styles from './styles.module.css';
+
+type Props = Omit<React.ComponentProps<'input'>, 'type'> & {
+    label?: string; // Optional label text for better accessibility
+    inputField?: boolean; // Optional flag to display an input field
+};
+
+const CheckBox = forwardRef<HTMLInputElement, Props>(({ className, label, inputField, ...props }, ref) => (
+    <div className={clsx('flex items-center', className)}>
+        <input
+            ref={ref}
+            type='checkbox'
+            className={clsx(
+                'form-input',
+                styles.checkbox_input,
+                'accent-branding', // Use the custom branding color for the checkbox accent
+                {
+                    [styles.with_input]: inputField, // Add custom styles when the input field is enabled
+                },
+            )}
+            {...props}
+        />
+        {label && <label className={clsx('ml-2', styles.label)}>{label}</label>}
+        {inputField && <input type='text' className={clsx('ml-2', 'form-input', styles.input_field, 'border-brand')} />}
+    </div>
+));
+
+export default CheckBox;
diff --git a/resources/scripts/components/elements/CheckboxLabel.tsx b/resources/scripts/components/elements/CheckboxLabel.tsx
new file mode 100644
index 000000000..2e5a490d1
--- /dev/null
+++ b/resources/scripts/components/elements/CheckboxLabel.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Checkbox = React.forwardRef<
+    React.ElementRef<'div'>,
+    React.ComponentPropsWithoutRef<'div'> & { label?: string; onChange?: () => void }
+>(({ className, label, onChange, ...props }, ref) => {
+    const [checked, setChecked] = React.useState(false);
+
+    const toggleChecked = () => {
+        setChecked((prev) => {
+            const newCheckedState = !prev;
+            if (onChange) onChange(); // Call the onChange handler when the checkbox is toggled
+            return newCheckedState;
+        });
+    };
+
+    return (
+        <div className='flex items-center gap-2 select-none'>
+            {label && (
+                <span
+                    onClick={toggleChecked}
+                    className={cn(
+                        'inline-block rounded-lg w-full px-2 py-1 cursor-pointer transition-colors duration-200',
+                        checked
+                            ? 'bg-green-800 text-white mb-2 select-none'
+                            : 'border-transparent hover:bg-gray-700 mb-2 select-none',
+                    )}
+                    {...props}
+                    ref={ref}
+                >
+                    {label}
+                </span>
+            )}
+        </div>
+    );
+});
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
diff --git a/resources/scripts/components/elements/LabelNew.tsx b/resources/scripts/components/elements/LabelNew.tsx
new file mode 100644
index 000000000..0a1d69771
--- /dev/null
+++ b/resources/scripts/components/elements/LabelNew.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface CheckboxProps {
+    label?: string;
+    checked: boolean;
+    onChange: () => void;
+}
+
+const CheckboxWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    user-select: none;
+`;
+
+const StyledInput = styled.input`
+    margin-right: 8px;
+`;
+
+const StyledLabel = styled.label`
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+`;
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({ label, checked, onChange }, ref) => {
+    return (
+        <CheckboxWrapper>
+            {label && (
+                <StyledLabel>
+                    <StyledInput type='checkbox' checked={checked} onChange={onChange} ref={ref} />
+                    <span>{label}</span>
+                </StyledLabel>
+            )}
+        </CheckboxWrapper>
+    );
+});
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
diff --git a/resources/scripts/components/elements/ModBox.tsx b/resources/scripts/components/elements/ModBox.tsx
new file mode 100644
index 000000000..76aadac42
--- /dev/null
+++ b/resources/scripts/components/elements/ModBox.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const ModBox = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(({ ...props }, ref) => {
+    return <div ref={ref} className='mb-4 w-full text-nowrap select-none' {...props}></div>;
+});
+
+ModBox.displayName = 'ModBox';
+
+export { ModBox };
diff --git a/resources/scripts/components/elements/ModrinthLogo.tsx b/resources/scripts/components/elements/ModrinthLogo.tsx
new file mode 100644
index 000000000..e8189711e
--- /dev/null
+++ b/resources/scripts/components/elements/ModrinthLogo.tsx
@@ -0,0 +1,15 @@
+// million-ignore
+const Logo = () => {
+    return (
+        <svg viewBox='0 0 24 24' version='1.1' id='svg1' width='24' height='24'>
+            <defs id='defs1' />
+            <path
+                d='M4.629 14.971A7.875 7.875 0 0 1 4.051 12c0-4.37 3.553-7.917 7.93-7.917.135 0 .27.003.405.01l-.38 2.151h-.025a5.763 5.763 0 0 0-5.452 7.632l2.346-1.352-.5-1.724 1.923-2.16 2.644-.72.962.96-1.443 1.44-.961.24-.721.96.269 1.018.748.741 1.193-.143.689-.712 1.97-.527.352 1.312-1.946 1.926-2.835.583-1.098-1.141-2.35 1.354a5.755 5.755 0 0 0 4.737 1.801l.566 2.11a7.92 7.92 0 0 1-7.213-2.809l-1.686.972a9.861 9.861 0 0 0 16.694-1.753l2.042.742A12.027 12.027 0 0 1 11.981 24C5.671 24 .49 19.135 0 12.96h2.172a9.78 9.78 0 0 0 .776 2.98l1.681-.969Zm16.51-6.608a9.863 9.863 0 0 0-9.158-6.203c-5.115 0-9.326 3.9-9.809 8.88H0C.49 4.865 5.671 0 11.981 0 18.614 0 24 5.377 24 12c0 1.104-.15 2.173-.43 3.19l-2.042-.742a9.833 9.833 0 0 0 .22-3.763l-1.879.502c.027.268.041.539.041.813 0 3.318-2.048 6.162-4.95 7.339l-.566-2.111A5.758 5.758 0 0 0 17.746 12a5.764 5.764 0 0 0-3.818-5.419l.38-2.151a7.955 7.955 0 0 1 4.955 4.435l1.876-.502Z'
+                id='path1'
+                fill='white'
+            />
+        </svg>
+    );
+};
+
+export default Logo;
diff --git a/resources/scripts/components/elements/ScrollMenu.tsx b/resources/scripts/components/elements/ScrollMenu.tsx
new file mode 100644
index 000000000..8ea457a21
--- /dev/null
+++ b/resources/scripts/components/elements/ScrollMenu.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import { Checkbox } from '@/components/elements/CheckboxLabel';
+
+import { cn } from '@/lib/utils';
+
+const ScrollMenu = React.forwardRef<
+    React.ElementRef<'div'>,
+    React.ComponentPropsWithoutRef<'div'> & { items: string[] }
+>(({ className, items, ...props }, ref) => {
+    const [checkedItems, setCheckedItems] = React.useState<string[]>([]);
+
+    // Handle checkbox change
+    const handleCheckboxChange = (item: string) => {
+        // Update the checked state
+        setCheckedItems((prev) => {
+            const updatedItems = prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item];
+
+            // Log the name of the item that was selected/deselected
+            console.log(`${item} is now ${updatedItems.includes(item) ? 'selected' : 'deselected'}`);
+            console.log(updatedItems);
+
+            return updatedItems;
+        });
+    };
+
+    return (
+        <div ref={ref} className={cn('relative', className)} {...props}>
+            <div className='overflow-y-auto max-h-48 scrollbar-thin scrollbar-thumb-[#FF343C] hover:scrollbar-thumb-[#F06F53] scrollbar-track-[#000000]'>
+                <ul>
+                    {items.map((item) => (
+                        <li key={item}>
+                            <Checkbox
+                                label={item}
+                                // checked={checkedItems.includes(item)} // Set checked state
+                                onChange={() => handleCheckboxChange(item)} // Handle change
+                            />
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+});
+
+ScrollMenu.displayName = 'ScrollMenu';
+
+export { ScrollMenu };
diff --git a/resources/scripts/components/elements/inputs/Checkbox.tsx b/resources/scripts/components/elements/inputs/Checkbox.tsx
index 4aa6e4815..7fd497680 100644
--- a/resources/scripts/components/elements/inputs/Checkbox.tsx
+++ b/resources/scripts/components/elements/inputs/Checkbox.tsx
@@ -3,8 +3,31 @@ import { forwardRef } from 'react';
 
 import styles from './styles.module.css';
 
-type Props = Omit<React.ComponentProps<'input'>, 'type'>;
+type Props = Omit<React.ComponentProps<'input'>, 'type'> & {
+    label?: string; // Optional label text for better accessibility
+    inputField?: boolean; // Optional flag to display an input field
+};
 
-export default forwardRef<HTMLInputElement, Props>(({ className, ...props }, ref) => (
-    <input ref={ref} type={'checkbox'} className={clsx('form-input', styles.checkbox_input, className)} {...props} />
+const CheckBox = forwardRef<HTMLInputElement, Props>(({ className, label, inputField, ...props }, ref) => (
+    <div className={clsx('flex items-center', className)}>
+        <input
+            ref={ref}
+            type='checkbox'
+            className={clsx(
+                'form-input',
+                styles.checkbox_input,
+                'accent-branding', // Use the custom branding color for the checkbox accent
+                {
+                    [styles.with_input]: inputField, // Add custom styles when the input field is enabled
+                },
+            )}
+            {...props}
+        />
+        {label && <label className={clsx('ml-2', styles.label)}>{label}</label>}
+        {inputField && (
+            <input type='text' className={clsx('ml-2', 'form-input', styles.input_field, 'border-branding')} />
+        )}
+    </div>
 ));
+
+export default CheckBox;
diff --git a/resources/scripts/components/server/modrinth/DisplayMods.tsx b/resources/scripts/components/server/modrinth/DisplayMods.tsx
new file mode 100644
index 000000000..2c8970e4c
--- /dev/null
+++ b/resources/scripts/components/server/modrinth/DisplayMods.tsx
@@ -0,0 +1,135 @@
+//? https://api.modrinth.com/v2/search?facets=[[%22categories:forge%22],[%22versions:1.17.1%22,%20%22versions:1.21.3%22],[%22project_type:mod%22],[%22license:mit%22]]&index=relevance
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+import ContentBox from '@/components/elements/ContentBox';
+import { ScrollMenu } from '@/components/elements/ScrollMenu';
+
+interface Project {
+    project_id: string;
+    project_type: string;
+    slug: string;
+    author: string;
+    title: string;
+    description: string;
+    categories: string[];
+    versions: string[];
+    downloads: number;
+    follows: number;
+    icon_url: string;
+}
+
+interface Props {
+    appVersion: string;
+    baseUrl: string;
+}
+
+const ProjectSelector: React.FC<Props> = ({ appVersion, baseUrl }) => {
+    const [projects, setProjects] = useState<Project[]>([]);
+    const apiUrl = `${baseUrl}/search`;
+
+    useEffect(() => {
+        async function fetchProjects() {
+            try {
+                const response = await fetch(apiUrl, {
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'User-Agent': `pyrohost/pyrodactyl/${appVersion} (pyro.host)`,
+                    },
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+
+                const data = await response.json();
+                for (const x of data.hits) {
+                    if (x['icon_url'] == '') {
+                        x['icon_url'] = 'N/A';
+                    }
+                    console.log(x.icon_url);
+                }
+
+                setProjects(data.hits || []); // Safely access hits
+            } catch (error) {
+                toast.error('Failed to fetch projects.');
+                console.error(error);
+            }
+        }
+
+        if (appVersion) {
+            fetchProjects();
+        }
+    }, [appVersion]);
+
+    const filteredProjects = projects.filter((project) => {
+        return ['forge', 'fabric'].some((category) => project.categories.includes(category));
+    });
+
+    return (
+        <div>
+            {filteredProjects.length > 0 ? (
+                <div>
+                    {filteredProjects.map((project) => (
+                        // <ContentBox className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl w-full mb-4'>
+                        <ContentBox
+                            key={project.project_id}
+                            className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl w-full mb-4'
+                        >
+                            <div className='flex items-center'>
+                                <ContentBox className='p-3  rounded-xl  mr-4'>
+                                    {project.icon_url && project.icon_url !== 'N/A' ? (
+                                        <img src={project.icon_url} className='mt-4 w-16 h-16 object-cover rounded' />
+                                    ) : (
+                                        <svg
+                                            fillRule='evenodd'
+                                            strokeLinecap='round'
+                                            strokeLinejoin='round'
+                                            strokeMiterlimit='1.5'
+                                            clipRule='evenodd'
+                                            height='70'
+                                            width='70'
+                                            viewBox='0 0 104 104'
+                                            aria-hidden='true'
+                                        >
+                                            <path fill='none' d='M0 0h103.4v103.4H0z'></path>{' '}
+                                            <path
+                                                fill='none'
+                                                stroke='#9a9a9a'
+                                                strokeWidth='5'
+                                                d='M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11'
+                                            ></path>
+                                        </svg>
+                                    )}
+                                </ContentBox>
+                                <div className=''>
+                                    <h2 className='text-lg font-semibold text-white'>{project.title}</h2>
+                                    <p className='text-sm text-gray-300 mb-2'>
+                                        Author: <span className='font-medium'>{project.author}</span>
+                                    </p>
+                                    <p className='text-sm text-gray-400'>{project.description}</p>
+                                    <p className='text-sm text-gray-500 mt-2'>
+                                        Downloads: {project.downloads} | Follows: {project.follows}
+                                    </p>
+                                </div>
+                            </div>
+                        </ContentBox>
+                    ))}
+                </div>
+            ) : (
+                <p className='text-white'>No projects available...</p>
+            )}
+        </div>
+    );
+};
+
+export default ProjectSelector;
+// <path data-v-78e239b4="" fill="none" stroke="#9a9a9a" stroke-width="5" d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11"></path>
+// <ScrollMenu
+// items={filteredProjects.map((project) => ({
+// id: project.project_id,
+// name: project.title,
+// description: project.description,
+// icon: project.icon_url,
+// }))}
+// />
diff --git a/resources/scripts/components/server/modrinth/GameVersionSelector.tsx b/resources/scripts/components/server/modrinth/GameVersionSelector.tsx
new file mode 100644
index 000000000..44e048215
--- /dev/null
+++ b/resources/scripts/components/server/modrinth/GameVersionSelector.tsx
@@ -0,0 +1,143 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+import { ScrollMenu } from '@/components/elements/ScrollMenu';
+import Checkbox from '@/components/elements/inputs/Checkbox';
+
+interface GameVersion {
+    version: string;
+    version_type: 'release' | 'snapshot';
+}
+
+interface Props {
+    appVersion;
+    baseUrl: string;
+}
+
+const GameVersionSelector: React.FC<Props> = ({ appVersion, baseUrl }) => {
+    const [minecraftVersions, setMinecraftVersions] = useState<GameVersion[]>([]);
+    const [isSnapshotSelected, setIsSnapshotSelected] = useState<boolean>(false);
+    const apiUrl = baseUrl + '/tag/game_version';
+
+    function delay(ms: number) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+
+    useEffect(() => {
+        async function fetchGameVersions() {
+            try {
+                const response = await fetch(apiUrl, {
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'User-Agent': `pyrohost/pyrodactyl/${appVersion} (pyro.host)`,
+                    },
+                });
+
+                const data = await response.json();
+                setMinecraftVersions(data);
+            } catch (error) {
+                toast.error('Failed to fetch Minecraft versions.');
+                console.error(error);
+            }
+        }
+
+        if (appVersion) {
+            fetchGameVersions();
+        }
+    }, [appVersion]);
+
+    const filteredVersions = minecraftVersions.filter((version) => {
+        if (isSnapshotSelected) {
+            return version.version_type === 'snapshot';
+        } else {
+            return version.version_type !== 'snapshot';
+        }
+    });
+
+    return (
+        <div>
+            {filteredVersions.length > 0 ? (
+                <ScrollMenu items={filteredVersions.map((version) => version.version)} />
+            ) : (
+                <p>No versions available...</p>
+            )}
+            {filteredVersions.length > 0 ? (
+                <div className='mb-4'>
+                    <Checkbox
+                        label='Show Snapshots'
+                        checked={isSnapshotSelected}
+                        onChange={() => setIsSnapshotSelected((prev) => !prev)}
+                    />
+                </div>
+            ) : (
+                <p></p> // Show nothing as it's weird to have a random button say "Show Snapshots"
+            )}
+        </div>
+    );
+};
+
+export default GameVersionSelector;
+
+{
+    /* 
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%**+*+*###%%%%@%#++++++++++++#@@@@%%#@..
+%%%%%%%#%%%%%%%%%%%%%%%%%%%%%%#########%%%##%##############%#%%%##%%###%%@@@@@@@%%%%*++++++++++++*%%%%###%%.
+%#%%%%%%%%%%%%%%%%%#######%%%%#########%%%%%%%%%%%%%%%%%%%%%%@@%@@@@@@@@@@@@@@@@@@@@#**++*+++++++*%%%%%%%%%.
+%%%%%%%%%%%%%%%%%%%%%@@@@@@@%%%%%%%%%%%%%%%@@@%@@@@%%@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@%*******+++++*%%@@%%%%%:
+%%%@%%%%%%%%%%%%%%%%@@@@@@@@@@%@@%%%%%%@@@@@@@@@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%****++++++++*%@@@%%%%%:
+%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@%@%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#********++++*%@%%@%#%%:
+%%%%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%******++==--::.......:.
+%%%%%%%%%%%%%%%@@%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%@@@@@@@@@@@@@%%@%%@@%@@%%@@@%@%@%==-:.....::::.........
+%%%%%@%%%%%%%%%%%%@%%%@@@@@@@@@@@@@@@@@@%@@@@@@@@@@@@@@%@@**%%=#@+%#***=++#%*%*+*-+:.....::--:-------------.
+%%%@@%@%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@%@@@@@%%@%#%#*=++=-=-:==-:-.::..:.::.::.....::-----------------===.
+%%%%%%%%%%%%%%%@%%%%%%@@@%@@@@@@@@@@@@@@@%%@@#***#+=-------::......................::---:---:--=-:=---====+.
+%%%%%@@@@@@@@@@@%%@@@@@@@%%@@@%@@@%%@%*#####*=+-:-::::-::-::.....................::==-:.::---:-=--=======++.
+%%%@@@@@@@@@@@%%%%@%%#####@++++----==-=-==-----::-:::::::::::..................::-=----::::-:--=-======++++.
+@@@@@@@@@@@**-:......................:::::---::-:-...::----::--::.............:---====+-=-=------=====+++++.
+%%%%@@@@%#-.......:::::::............:::-:=-:::::::.:::----=-----:..........:-:::-====-----=--========+++++.
+##%%%%@#-...:---:----::--::::........:::=-=-:::::...::-=+----=--:::::..:::::--:::--=====-----=-+=++==+++++=.
+%%%%%#-..:-----=------:-:---::.....:::::---:::::....:--=========::::::::::--:--::-----=+==-=+**=*+++*++++==.
+%%%@@%*:----===----:---------:....:::::--::::.......:---=----==--:::::::::-:--------+*#****++***+*****+====.
+%%%@@@@%%==+++===-====-=-----:::::::::::::........:::-------==---:::::--:----:---=:+==+**#+*+*###*****+*+==.
+%%%@@@@@%%****===++======----:::::::::::::.........:::-:--------::::::--:-:---=--+--+++*=+++=+*********+++=.
+%%%@@@@%@%%%%#+###=======--:.:::::::::::............::::::-:::-:--:-------------=-==-+**-=+===*##**++++====.
+%%@@@@@@%%@@@####=+*+=---::::::::::::.:..............:.:.:::::------------------=--=+=+=+-===*****++++====-.
+@@@@@@@@@@@@@@@%*++=+==-:-----:::::::::..................:::::---=---------------=-=======-:--###*++=-==---.
+@@@@@@@@@@@@@@@%%#%*+==+-==-::::::::......................::::----=-----:----------:--=----:--+**++=-==-=--.
+@@%@@@@@@@@@%@@@@%%%%+-=--=--::::::::..:.....:.............::::-------::-:::--:---:-----=---::::==---------.
+%%%%%%%@@@%%@@@@@@@%%+----:::::::..:..:.....................::---:::::.:::::::-:------::--::::::::::-------.
+%%%%%%%@%@%%%@@%@@%%%%+=---::::...........................:::::::::::.::::..::...:--:::::::::::::::::------.
+%%%%%%%%%@@%@%@@@%@%%#==-::::...........................::::::::::::::.:....::::--:::.::::::::::::::::-----.
+%%%%%%%%%%%@@@@@@@@%%*-:..........................::..:::::::-::::::::::::::----::::.:...::::::::::::::----.
+%%%%%%%%%%%@@@@@%@%%%+-:..........................:::::--------:---:::::--====-=--::..:::::::::----:-------.
+%%%%%%%%%%%%@@@%%@%#+-..............:::::--:::::::::--=+=++++++++=+======+++-------::::-----::-------------.
+%%%%%%%%%%%@@@@@%@%*=-.......:..:::-:--------::::::-==+++++++***#%@@@%**++==------------------------------=.
+%%%%%%%%@@@@@@@@%%##+:.......:::-==+**++=---::::-::-=++=++++*%@@@@@@@%#*+==--==-=--=-===========--=-------=.
+%%%%%@@@@@@@@@@@@@%%#=:........:=#%@@@@@%:--:::::::-=======+**+==-------==--=+==================-==-------=.
+%%%@@@%%@@@@@@@@@@%%#=::::::...:-----:::-=-.:....:::::-===+**+==-==------:-=======================--------=.
+%%%%@@@@@@@@@%%@%%%%%#*-:::::::::--::::--:--.......:::----=====----::::--========================----------.
+%%%%@@@@@@@@@@@%@%%%@%@=:::::::::::::---:..........:::::::-:-:::......::---=====+=+++++===========---------.
+%%%@@@@@@@@@@@@@@@%@@@#=--:::::..................::::-----::::::::.:::--==========++=++===========---------.
+%%@@@@@@@@@@@@@@@@@@@@***=-::::::...............::----===---:.:::::---:--======+++++++==============-------.
+%%%@@@@@@@%@%%%@@%@@%@@%%=+----:.::..:........:--::--=+=----::::::--=========+++++++++++++===========------.
+%%%%%%@%%%%%%%%%%@@@@%%%%**--:--::::::......::-----==++*+==----::--==+++=+++++++++++++++=+===========------.
+%%%%%%%####%%%%%@@@@@@%%%%++=---====-:..:.:-++=++*****#*+====-=----:----=====--=====+++++=+==========------.
+%%%%%%%%#%#%%@@@%@@@%%@@%%%*+=----===..:...::++****%#*+++======--=---===+++++++++++=+++++++=============---.
+%%%%%%%%%%%%%%%@@@%%@@%@%+#%*+====++-.::-::::-***###**+++++++=+++++++=--=+++++++++++++++==++===========----.
+%%%%%%%%##%%%%@@%#%%@%%%%%%%%**==--=+::..::---=*####*+++++++++++=+++++-+++++=+=++++++++++++++=+========----.
+%%%%%%%%%%%%%%%@%@%%%%%%###%#=##+*+++==--======+**#*********+*+=+=+++++++=+*+++++=++++++++++=====-===--=---.
+%%%%%%%%%%%%%%%@%%%%%%%@#%%#%%###++==++--==-=++**####********+***+++=+++++++=+++++==+++=+++==+========-====.
+%%%%%%%%%%%%%@@@%%%%#%%%##%####*++*##=**===+++****######*****+++*++++=++++=++++++++++++++++=============---.
+%%%%%@%@@@@@@@%@%%%%%%%%%###%***####*#*=*+++++++****************+++++++=*++*++*+**+*+++++++++==============.
+%%%%%@@@@@@@@@%@%%%%%%%%%%+*#*%%@%##@%*%***+++++++++++++******+++=+**++*+++*+++**+**++*++++++=============-.
+%%%%%%%@@@@@@@@@%%%%####+*%%@@@@%%@%@*@#%##%***++++++++++++++++++*++=**++*****+*++++++++=================-=.
+%%%%%%%%%###%%%%%%%%%%#%%%%@@@@@@@@@*%@@#@@%%#%*++++++++++++++++**++*+****=*+*****++++++=+=================.
+%%%%%%%%%%%%#%%%%%%%#%%%#%%%%%%@#@@@%@@@@@@@@@%##++++++++++++++++*++*++***+++++++++++++=+==================.
+%%%%%%%%%%%%%%%%%%%%%%#%%%%@@@@@@@*%@@@@@@@@@@@##*++++++++++++++++++++*+++*+*+++++++*++++++++==============.
+%%%%%%%%%%%%%%%%%%%%%%%%%%@@@@@@@@%@@@@@@@@@@@@@%****++++++++++++++++++++++*++++++++++=++==================.
+%%%%%%%%%%%%%%%%%%%%#%%%%%%%@@%@%##@@@@@@@@@@@@@@%#*+++++++++++++++++++++++***++=+=+=======================.
+%%%%%%%%%%%%%#%%%%#%%%%@%%@@%@@@@*%@@@@@@@@@@@@@%%#**+++++=++++++++++++++++++*++++++=======================.
+@%%@@@%%@%@@%%%%%#%%%%%%%%%@@@#@@%@@@@@@@@@@@@@@%#*+#*+++==++++++++++++++++=++++=++==================+=====.
+@%@%%@@@@@@%%%%%#%%%%%%%%@%@%%@@%@@@%@@@@@@@@@@@@%#**++++======++++++++++++++++++====+====================-.
+  */
+}
diff --git a/resources/scripts/components/server/modrinth/LoaderSelector.tsx b/resources/scripts/components/server/modrinth/LoaderSelector.tsx
new file mode 100644
index 000000000..8e1fadfc9
--- /dev/null
+++ b/resources/scripts/components/server/modrinth/LoaderSelector.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+import { ScrollMenu } from '@/components/elements/ScrollMenu';
+
+interface GameLoaders {
+    icon: string; // SVG data(I probably wont use this)
+    name: string;
+    supported_project_types: string[];
+}
+
+interface Props {
+    appVersion;
+    baseUrl: string;
+}
+//! FIXME: We only want to show actual loaders like Fabric, Paper, Forge, not datapacks, Iris, Optifine
+const LoaderSelector: React.FC<Props> = ({ appVersion, baseUrl }) => {
+    const [loaders, setLoaders] = useState<GameLoaders[]>([]);
+    const apiUrl = baseUrl + '/tag/loader';
+
+    useEffect(() => {
+        async function fetchLoaders() {
+            try {
+                const response = await fetch(apiUrl, {
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'User-Agent': `pyrohost/pyrodactyl/${appVersion} (pyro.host)`,
+                    },
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+
+                const data = await response.json();
+
+                setLoaders(data);
+            } catch (error) {
+                toast.error('Failed to fetch game loaders.');
+                console.error(error);
+            }
+        }
+
+        if (appVersion) {
+            fetchLoaders();
+            console.log();
+        }
+    }, [appVersion]);
+
+    const filterLoaders = loaders.filter((loader) => {
+        return loader.name;
+    });
+
+    return (
+        <div>
+            {filterLoaders.length > 0 ? (
+                <ScrollMenu items={filterLoaders.map((loaders) => loaders.name)} />
+            ) : (
+                <p>No Loaders available...</p>
+            )}
+        </div>
+    );
+};
+
+export default LoaderSelector;
diff --git a/resources/scripts/components/server/modrinth/ModrinthContainer.tsx b/resources/scripts/components/server/modrinth/ModrinthContainer.tsx
new file mode 100644
index 000000000..b5696f97e
--- /dev/null
+++ b/resources/scripts/components/server/modrinth/ModrinthContainer.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import isEqual from 'react-fast-compare';
+import { toast } from 'sonner';
+
+import Button from '@/components/elements/ButtonV2';
+import { Checkbox } from '@/components/elements/CheckboxLabel';
+import ContentBox from '@/components/elements/ContentBox';
+import { ModBox } from '@/components/elements/ModBox';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+import { ScrollMenu } from '@/components/elements/ScrollMenu';
+
+import ProjectSelector from './DisplayMods';
+import GameVersionSelector from './GameVersionSelector';
+import LoaderSelector from './LoaderSelector';
+
+export default () => {
+    const headers: Headers = new Headers();
+    const url = 'https://staging-api.modrinth.com/v2';
+    async function getAppVersion(): Promise<string> {
+        const response = await fetch('/api/client/version');
+        const data = await response.json();
+        return data.version;
+    }
+
+    const appVersion = getAppVersion();
+
+    headers.set('Content-Type', 'application/json');
+    headers.set('User-Agent', 'pyrohost/pyrodactyl/' + appVersion + ' (pyro.host)');
+
+    return (
+        <PageContentBlock title={'Mods/Plugins'}>
+            <div className='flex flex-wrap gap-4'>
+                <ContentBox
+                    className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl md:w-1/6'
+                    title='Settings'
+                >
+                    <ModBox>
+                        <ContentBox title='Loader' className=''>
+                            <LoaderSelector appVersion={appVersion} baseUrl={url} />
+                        </ContentBox>
+                    </ModBox>
+
+                    <ModBox>
+                        <ContentBox title='Version' className='scrollbar-thumb-red-700 '>
+                            <GameVersionSelector appVersion={appVersion} baseUrl={url} />
+                        </ContentBox>
+                    </ModBox>
+                    <ModBox>
+                        <ContentBox title='Environment' className=''>
+                            <Checkbox label='Client'>Client</Checkbox>
+                            <Checkbox label='Server'>Server</Checkbox>
+                        </ContentBox>
+                    </ModBox>
+                </ContentBox>
+                <ContentBox
+                    className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl w-full md:w-4/5'
+                    title='Modrinth'
+                >
+                    <ProjectSelector appVersion={appVersion} baseUrl={url}></ProjectSelector>
+                </ContentBox>
+            </div>
+        </PageContentBlock>
+    );
+};
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index da97dae6a..ec9afb18a 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -15,6 +15,7 @@ import {
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import MainSidebar from '@/components/elements/MainSidebar';
 import MainWrapper from '@/components/elements/MainWrapper';
+import ModrinthLogo from '@/components/elements/ModrinthLogo';
 import PermissionRoute from '@/components/elements/PermissionRoute';
 import Logo from '@/components/elements/PyroLogo';
 import { NotFound, ServerError } from '@/components/elements/ScreenBlock';
@@ -148,6 +149,7 @@ export default () => {
     const NavigationSchedules = useRef(null);
     const NavigationSettings = useRef(null);
     const NavigationActivity = useRef(null);
+    const NavigationMod = useRef(null);
     const NavigationShell = useRef(null);
 
     const calculateTop = (pathname: string) => {
@@ -165,6 +167,7 @@ export default () => {
         const ButtonSettings = NavigationSettings.current;
         const ButtonShell = NavigationShell.current;
         const ButtonActivity = NavigationActivity.current;
+        const ButtonMod = NavigationMod.current;
 
         // Perfectly center the page highlighter with simple math.
         // Height of navigation links (56) minus highlight height (40) equals 16. 16 devided by 2 is 8.
@@ -196,6 +199,9 @@ export default () => {
             return (ButtonShell as any).offsetTop + HighlightOffset;
         if (pathname.endsWith(`/server/${id}/activity`) && ButtonActivity != null)
             return (ButtonActivity as any).offsetTop + HighlightOffset;
+        if (pathname.endsWith(`/server/${id}/mods`) && ButtonMod != null)
+            return (ButtonMod as any).offsetTop + HighlightOffset;
+
         return '0';
     };
 
@@ -266,7 +272,7 @@ export default () => {
                             </NavLink>
                             <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
-                                    <button className='w-10 h-10 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-2'>
+                                    <button className='w-10 h-10 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-2 select-none'>
                                         <svg
                                             xmlns='http://www.w3.org/2000/svg'
                                             width='16'
@@ -280,11 +286,11 @@ export default () => {
                                         </svg>
                                     </button>
                                 </DropdownMenuTrigger>
-                                <DropdownMenuContent className='z-[99999]' sideOffset={8}>
+                                <DropdownMenuContent className='z-[99999] select-none' sideOffset={8}>
                                     {rootAdmin && (
                                         <DropdownMenuItem onSelect={onSelectManageServer}>
                                             Manage Server
-                                            <span className='ml-2 z-10 rounded-full bg-brand px-2 py-1 text-xs'>
+                                            <span className='ml-2 z-10 rounded-full bg-brand px-2 py-1 text-xs select-none'>
                                                 Staff
                                             </span>
                                         </DropdownMenuItem>
@@ -405,6 +411,17 @@ export default () => {
                                             <p>Activity</p>
                                         </NavLink>
                                     </Can>
+                                    <Can action={['modrinth.*', 'modrinth.download']} matchAny>
+                                        <NavLink
+                                            className='flex flex-row items-center'
+                                            ref={NavigationMod}
+                                            to={`/server/${id}/mods`}
+                                            end
+                                        >
+                                            <ModrinthLogo />
+                                            <p>Mods</p>
+                                        </NavLink>
+                                    </Can>
                                 </>
                             )}
                             <Can action={'startup.software'}>
diff --git a/resources/scripts/routers/routes.ts b/resources/scripts/routers/routes.ts
index 6ce8218ea..3ee333f88 100644
--- a/resources/scripts/routers/routes.ts
+++ b/resources/scripts/routers/routes.ts
@@ -10,6 +10,7 @@ import BackupContainer from '@/components/server/backups/BackupContainer';
 import ServerConsole from '@/components/server/console/ServerConsoleContainer';
 import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
 import FileManagerContainer from '@/components/server/files/FileManagerContainer';
+import ModrinthContainer from '@/components/server/modrinth/ModrinthContainer';
 import NetworkContainer from '@/components/server/network/NetworkContainer';
 import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
 import SettingsContainer from '@/components/server/settings/SettingsContainer';
@@ -165,6 +166,13 @@ export default {
             name: 'Software',
             component: ShellContainer,
         },
+        {
+            route: 'mods/*',
+            path: 'mods',
+            permission: ['modrinth.download', 'settings.modrinth'],
+            name: 'Modrinth',
+            component: ModrinthContainer,
+        },
         {
             route: 'activity/*',
             path: 'activity',
diff --git a/resources/views/admin/index.blade.php b/resources/views/admin/index.blade.php
index c7f7186eb..a011e2c4d 100644
--- a/resources/views/admin/index.blade.php
+++ b/resources/views/admin/index.blade.php
@@ -1,44 +1,44 @@
 @extends('layouts.admin')
 
 @section('title')
-    Administration
+Administration
 @endsection
 
 @section('content-header')
-    <h1>Administrative Overview<small>A quick glance at your system.</small></h1>
-    <ol class="breadcrumb">
-        <li><a href="{{ route('admin.index') }}">Admin</a></li>
-        <li class="active">Index</li>
-    </ol>
+<h1>Administrative Overview<small>A quick glance at your system.</small></h1>
+<ol class="breadcrumb">
+  <li><a href="{{ route('admin.index') }}">Admin</a></li>
+  <li class="active">Index</li>
+</ol>
 @endsection
 
 @section('content')
 <div class="row">
-    <div class="col-xs-12">
-        <div class="box
+  <div class="col-xs-12">
+    <div class="box
         ">
-            <div class="box-header with-border">
-                <h3 class="box-title">System Information</h3>
-            </div>
-            <div class="box-body">
-                    You are running Pyrodactyl panel version <code>{{ config('app.version') }}</code>.
-            </div>
-        </div>
+      <div class="box-header with-border">
+        <h3 class="box-title">System Information</h3>
+      </div>
+      <div class="box-body">
+        You are running Pyrodactyl panel version <code>{{ config('app.version') }}</code>.
+      </div>
     </div>
+  </div>
 </div>
 <div class="row">
-    <div class="col-xs-6 col-sm-3 text-center">
-        <a href="{{ $version->getDiscord() }}"><button class="btn btn-warning" style="width:100%;"><i class="fa fa-fw fa-support"></i> Get Help <small>(via Discord)</small></button></a>
-    </div>
-    <div class="col-xs-6 col-sm-3 text-center">
-        <a href="https://pterodactyl.io"><button class="btn btn-primary" style="width:100%;"><i class="fa fa-fw fa-link"></i> Documentation</button></a>
-    </div>
-    <div class="clearfix visible-xs-block">&nbsp;</div>
-    <div class="col-xs-6 col-sm-3 text-center">
-        <a href="https://github.com/pyrohost/pyrodactyl"><button class="btn btn-primary" style="width:100%;"><i class="fa fa-fw fa-support"></i> Github</button></a>
-    </div>
-    <div class="col-xs-6 col-sm-3 text-center">
-        <a href="{{ $version->getDonations() }}"><button class="btn btn-success" style="width:100%;"><i class="fa fa-fw fa-money"></i> Support the Project</button></a>
-    </div>
+  <div class="col-xs-6 col-sm-3 text-center">
+    <a href="{{ $version->getDiscord() }}"><button class="btn btn-warning" style="width:100%;"><i class="fa fa-fw fa-support"></i> Get Help <small>(via Discord)</small></button></a>
+  </div>
+  <div class="col-xs-6 col-sm-3 text-center">
+    <a href="https://github.com/pyrohost/pyrodactyl/wiki"><button class="btn btn-primary" style="width:100%;"><i class="fa fa-fw fa-link"></i> Documentation</button></a>
+  </div>
+  <div class="clearfix visible-xs-block">&nbsp;</div>
+  <div class="col-xs-6 col-sm-3 text-center">
+    <a href="https://github.com/pyrohost/pyrodactyl"><button class="btn btn-primary" style="width:100%;"><i class="fa fa-fw fa-support"></i> Github</button></a>
+  </div>
+  <div class="col-xs-6 col-sm-3 text-center">
+    <a href="{{ $version->getDonations() }}"><button class="btn btn-success" style="width:100%;"><i class="fa fa-fw fa-money"></i> Support the Project</button></a>
+  </div>
 </div>
 @endsection
diff --git a/routes/api-client.php b/routes/api-client.php
index 66f44b827..3735d7b29 100644
--- a/routes/api-client.php
+++ b/routes/api-client.php
@@ -18,7 +18,9 @@
 */
 Route::get('/', [Client\ClientController::class, 'index'])->name('api:client.index');
 Route::get('/permissions', [Client\ClientController::class, 'permissions']);
-
+Route::get('/version', function () {
+  return response()->json(['version' => config('app.version')]);
+});
 
 Route::prefix('/nests')->group(function () {
     Route::get('/', [Client\Nests\NestController::class, 'index'])->name('api:client.nests');
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index cc1e1e13a..6a6a03c85 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -27,5 +27,6 @@ module.exports = {
             },
         },
     },
-    plugins: [require('tailwindcss-animate'), require("tailwindcss-inner-border")],
+    plugins: [require('tailwindcss-animate'), require("tailwindcss-inner-border"), require('tailwind-scrollbar'),
+    ],
 };