diff --git a/src/api/mod_modpack_handler.go b/src/api/mod_modpack_handler.go
index 3a7f406..032e898 100644
--- a/src/api/mod_modpack_handler.go
+++ b/src/api/mod_modpack_handler.go
@@ -85,7 +85,7 @@ func ModPackCreateHandler(w http.ResponseWriter, r *http.Request) {
 	var modPackStruct struct {
 		Name string `json:"name"`
 	}
-	ReadFromRequestBody(w, r, &resp, &modPackStruct)
+	err = ReadFromRequestBody(w, r, &resp, &modPackStruct)
 	if err != nil {
 		return
 	}
diff --git a/src/factorio/mod_modpack.go b/src/factorio/mod_modpack.go
index c706282..d387eba 100644
--- a/src/factorio/mod_modpack.go
+++ b/src/factorio/mod_modpack.go
@@ -19,9 +19,6 @@ type ModPackResult struct {
 	Name string         `json:"name"`
 	Mods ModsResultList `json:"mods"`
 }
-type ModPackResultList struct {
-	ModPacks []ModPackResult `json:"mod_packs"`
-}
 
 func NewModPackMap() (ModPackMap, error) {
 	var err error
@@ -79,18 +76,18 @@ func (modPackMap *ModPackMap) reload() error {
 	return nil
 }
 
-func (modPackMap *ModPackMap) ListInstalledModPacks() ModPackResultList {
-	var modPackResultList ModPackResultList
+func (modPackMap *ModPackMap) ListInstalledModPacks() []ModPackResult {
+	list := make([]ModPackResult, 0)
 
 	for modPackName, modPack := range *modPackMap {
 		var modPackResult ModPackResult
 		modPackResult.Name = modPackName
 		modPackResult.Mods = modPack.Mods.ListInstalledMods()
 
-		modPackResultList.ModPacks = append(modPackResultList.ModPacks, modPackResult)
+		list = append(list, modPackResult)
 	}
 
-	return modPackResultList
+	return list
 }
 
 func (modPackMap *ModPackMap) CreateModPack(modPackName string) error {
@@ -155,7 +152,7 @@ func (modPackMap *ModPackMap) CreateModPack(modPackName string) error {
 	//reload the ModPackList
 	err = modPackMap.reload()
 	if err != nil {
-		log.Printf("error reloading ModPacks: %s", err)
+		log.Printf("error reloading ModPack: %s", err)
 		return err
 	}
 
@@ -181,7 +178,7 @@ func (modPackMap *ModPackMap) CreateEmptyModPack(packName string) error {
 
 	err = modPackMap.reload()
 	if err != nil {
-		log.Printf("error reloading ModPacks: %s", err)
+		log.Printf("error reloading ModPack: %s", err)
 		return err
 	}
 	return nil
diff --git a/ui/App/views/Mods/Mods.jsx b/ui/App/views/Mods/Mods.jsx
index 4184336..60f5237 100644
--- a/ui/App/views/Mods/Mods.jsx
+++ b/ui/App/views/Mods/Mods.jsx
@@ -10,10 +10,13 @@ import AddMod from "./components/AddMod/AddMod";
 import UploadMod from "./components/UploadMod";
 import LoadMods from "./components/LoadMods";
 import Fuse from "fuse.js";
+import CreateModPack from "./components/CreateModPack";
+import ModPack from "./components/ModPack";
 
 const Mods = () => {
 
     const [installedMods, setInstalledMods] = useState([]);
+    const [modPacks, setModPacks] = useState([])
     const [factorioVersion, setFactorioVersion] = useState(null);
     const [fuse, setFuse] = useState(undefined);
 
@@ -22,6 +25,11 @@ const Mods = () => {
             .then(setInstalledMods);
     };
 
+    const fetchModPacks = () => {
+        modsResource.packs.list()
+            .then(setModPacks)
+    }
+
     const deleteAllMods = () => {
         modsResource.deleteAll()
             .then(fetchInstalledMods)
@@ -32,6 +40,7 @@ const Mods = () => {
             .then(data => {
                 setFactorioVersion(data.base_mod_version)
                 fetchInstalledMods();
+                fetchModPacks();
             })
 
         // fetch list of mods
@@ -85,11 +94,10 @@ const Mods = () => {
                         </thead>
                         <tbody>
                         {factorioVersion !== null && installedMods.map((mod, i) => <Mod mod={mod} key={i}
-                                                                                   refreshInstalledMods={fetchInstalledMods}
-                                                                                   factorioVersion={factorioVersion}/>)}
+                                                                                        refreshInstalledMods={fetchInstalledMods}
+                                                                                        factorioVersion={factorioVersion}/>)}
                         </tbody>
                     </table>
-
                 }
                 actions={
                     <Button size="sm" type="danger" onClick={deleteAllMods}>Delete all Mods</Button>
@@ -100,7 +108,20 @@ const Mods = () => {
                 title="Mod packs"
                 className="mb-6"
                 content={
-                    "Test"
+                    <table className="w-full">
+                        <thead>
+                        <tr className="text-left py-1">
+                            <th>Name</th>
+                            <th/>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {modPacks.map((pack, i) => <ModPack key={i} modPack={pack}/>)}
+                        </tbody>
+                    </table>
+                }
+                actions={
+                    <CreateModPack onSuccess={fetchModPacks}/>
                 }
             />
         </div>
diff --git a/ui/App/views/Mods/components/CreateModPack.jsx b/ui/App/views/Mods/components/CreateModPack.jsx
new file mode 100644
index 0000000..168ba5f
--- /dev/null
+++ b/ui/App/views/Mods/components/CreateModPack.jsx
@@ -0,0 +1,43 @@
+import React, {useState} from "react";
+import Button from "../../../components/Button";
+import Modal from "../../../components/Modal";
+import Label from "../../../components/Label";
+import Input from "../../../components/Input";
+import {useForm} from "react-hook-form";
+import modsResource from "../../../../api/resources/mods";
+
+const CreateModPack = ({onSuccess}) => {
+
+    const [isCreating, setIsCreating] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const {handleSubmit, register} = useForm();
+
+    const createModPack = (data) => {
+        setIsCreating(true);
+
+        modsResource.packs.create(data.name)
+            .then(onSuccess)
+            .finally(() => {
+                setIsCreating(false)
+                setIsOpen(false);
+            });
+    }
+
+    return <>
+        <Button onClick={() => setIsOpen(true)}>Create Mod Pack</Button>
+        <Modal title="Create Mod Pack" isOpen={isOpen} content={
+            <form onSubmit={handleSubmit(createModPack)}>
+                <div className="mb-4">
+                    <Label text="Name" htmlFor="name"/>
+                    <Input name="name" inputRef={register({required: true})}/>
+                </div>
+                <Button size="sm" isLoading={isCreating} isSubmit={true}>Create</Button>
+            </form>
+        }>
+
+        </Modal>
+    </>
+}
+
+export default CreateModPack;
\ No newline at end of file
diff --git a/ui/App/views/Mods/components/ModPack.jsx b/ui/App/views/Mods/components/ModPack.jsx
new file mode 100644
index 0000000..19c8e63
--- /dev/null
+++ b/ui/App/views/Mods/components/ModPack.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const ModPack = ({modPack}) => {
+    return (
+        <tr>
+            <td>{modPack.name}</td>
+            <td/>
+        </tr>
+    )
+}
+
+export default ModPack;
\ No newline at end of file
diff --git a/ui/api/resources/mods.js b/ui/api/resources/mods.js
index 3800630..b17de15 100644
--- a/ui/api/resources/mods.js
+++ b/ui/api/resources/mods.js
@@ -74,6 +74,32 @@ const mods = {
             const response = await client.get(`/api/mods/portal/info/${mod}`);
             return response.data;
         }
+    },
+    packs: {
+        list: async () => {
+            const response = await client.get('/api/mods/packs/list');
+            return response.data;
+        },
+        create: async name => {
+            const response = await client.post('/api/mods/packs/create', {name});
+            return response.data;
+        },
+        delete: async name => {
+            const response = await client.post(`/api/mods/packs/${name}/delete`);
+            return response.data;
+        },
+        download: async name => {
+            const response = await client.get(`/api/mods/packs/${name}/download`);
+            return response.data;
+        },
+        load: async name => {
+            const response = await client.post(`/api/mods/packs/${name}/load`);
+            return response.data;
+        },
+        mods: async name => {
+            const response = await client.get(`/api/mods/packs/${name}/list`);
+            return response.data;
+        },
     }
 }