diff --git a/api/package.json b/api/package.json
index feda064..36b24c3 100644
--- a/api/package.json
+++ b/api/package.json
@@ -24,6 +24,7 @@
         "express": "^4.17.2",
         "jsonwebtoken": "^8.5.1",
         "mongoose": "^6.2.0",
+        "morgan": "^1.10.0",
         "passport": "^0.5.2",
         "passport-jwt": "^4.0.0",
         "socket.io": "^4.4.1"
diff --git a/api/src/models/Service.js b/api/src/models/Service.js
index 22fc512..c7a76d0 100644
--- a/api/src/models/Service.js
+++ b/api/src/models/Service.js
@@ -28,6 +28,11 @@ const ServiceSchema = new mongoose.Schema({
         type: [{ from: String, to: String }],
         required: false,
     },
+    environments: {
+        type: [{ key: String, value: String }],
+        required: false,
+        default: [],
+    },
     order: {
         type: Number,
         required: true,
@@ -77,6 +82,14 @@ ServiceSchema.methods.getServiceLabels = function () {
     return labels;
 };
 
+ServiceSchema.methods.getEnvironments = function () {
+    const environments = this.environments.map((environment) => {
+        return `${environment.key}=${environment.value}`;
+    });
+
+    return environments;
+};
+
 const transformHostsToLabel = (service) => {
     const label = `traefik.http.routers.${service.name}.rule`;
     const hosts = service.hosts.map((host) => {
diff --git a/api/src/routes/services.js b/api/src/routes/services.js
index 083697c..d3254e0 100644
--- a/api/src/routes/services.js
+++ b/api/src/routes/services.js
@@ -124,13 +124,18 @@ router.put("/:name", async (req, res) => {
         service.redirects = redirects;
     }
 
+    const environments = updateRequest.environments;
+    if (environments) {
+        service.environments = environments;
+    }
+
     const tag = updateRequest.tag;
     if (tag) {
         service.tag = tag;
     }
 
     await service.save();
-    if (hosts || image || redirects || tag) {
+    if (hosts || image || redirects || environments || tag) {
         await updateContainer(service, service.image);
         await startContainer(service);
     }
diff --git a/api/src/server.js b/api/src/server.js
index 4a7be0e..f19e58a 100644
--- a/api/src/server.js
+++ b/api/src/server.js
@@ -3,6 +3,7 @@ const path = require("path");
 const dotenv = require("dotenv");
 const passport = require("passport");
 const cors = require("cors");
+const morgan = require("morgan");
 
 const connectDB = require("./config/db");
 const setupPassport = require("./config/passport");
@@ -24,6 +25,7 @@ app.use(
     })
 );
 
+app.use(morgan("common"));
 app.use(passport.initialize());
 app.use(express.json());
 
diff --git a/api/src/utils/docker.js b/api/src/utils/docker.js
index 3d724d0..5ecb2b5 100644
--- a/api/src/utils/docker.js
+++ b/api/src/utils/docker.js
@@ -75,27 +75,59 @@ const updateContainer = async (service, image) => {
         containerLabels[element.split("=")[0]] = element.split("=")[1];
     });
 
+    const environments = service.getEnvironments();
+
+    const portBindings = {};
+    if (oldContainer.Ports.length > 0) {
+        oldContainer.Ports.forEach((port) => {
+            const { PrivatePort, PublicPort, Type } = port;
+            if (PrivatePort === undefined || PublicPort === undefined) {
+                return;
+            }
+            portBindings[`${PrivatePort}/${Type}`] = [
+                {
+                    HostPort: `${PublicPort}`,
+                },
+            ];
+        });
+    }
+
+    const hostConfig = {
+        NetworkMode: service.network,
+    };
+
+    if (portBindings && Object.keys(portBindings).length > 0) {
+        hostConfig.PortBindings = portBindings;
+    }
+
     Object.keys(containerLabels).map((key) => {
         if (!containerLabels[key] || containerLabels[key] === "") {
             delete containerLabels[key];
         }
     });
-
     await deleteContainer(service);
 
     const container = await docker.createContainer({
         Image: image.resolvedName,
         name: service.name,
         Labels: containerLabels,
-        HostConfig: {
-            NetworkMode: service.network,
-        },
+        HostConfig: hostConfig,
+        Env: environments,
     });
     service.containerId = container.id;
     service.status = "created";
     await service.save();
 };
 
+const getContainer = (containerId) => {
+    return docker.getContainer(containerId);
+};
+
+const inspectContainer = async (containerId) => {
+    const container = docker.getContainer(containerId);
+    return await container.inspect();
+};
+
 const getAllContainers = async () => {
     const containers = await docker.listContainers({
         all: true,
@@ -117,4 +149,6 @@ module.exports = {
     updateContainer,
     getAllContainers,
     getAllImages,
+    getContainer,
+    inspectContainer,
 };
diff --git a/api/src/utils/services.js b/api/src/utils/services.js
index e63de9c..0566854 100644
--- a/api/src/utils/services.js
+++ b/api/src/utils/services.js
@@ -4,7 +4,6 @@ const { deleteContainer } = require("./docker");
 
 const getOrCreateImage = async (resolvedName) => {
     const { repository, imageName, tag } = parseResolvedName(resolvedName);
-
     if (!imageName || !tag || !repository) {
         return -1;
     }
@@ -54,11 +53,11 @@ const createService = async (serviceRequest, image) => {
 };
 
 const parseResolvedName = (resolvedName) => {
-    const regex = /^(.+)\/(.+):(.+)$|^(.+):(.+)$|^(.+)/;
+    const regex = /^(.+)\/(.+):(.+)$|^(.+):(.+)$|^(.+)\/(.+)|^(.+)$/;
     const match = regex.exec(resolvedName);
 
-    const repository = match[1] ?? "_";
-    const imageName = match[2] ?? match[4] ?? match[6];
+    const repository = match[1] ?? match[6] ?? "_";
+    const imageName = match[2] ?? match[4] ?? match[7] ?? match[8];
     const tag = match[3] ?? match[5] ?? "latest";
 
     return {
diff --git a/api/src/utils/startup.js b/api/src/utils/startup.js
index 7186c35..7ada9d3 100644
--- a/api/src/utils/startup.js
+++ b/api/src/utils/startup.js
@@ -8,7 +8,11 @@ const {
     parseRedirectLabels,
     parseTraefikerLabels,
 } = require("./services");
-const { getAllContainers, getAllImages } = require("./docker");
+const {
+    getAllContainers,
+    getAllImages,
+    inspectContainer,
+} = require("./docker");
 
 const createImages = async () => {
     const images = await getAllImages();
@@ -41,9 +45,18 @@ const createContainers = async (images) => {
         ) {
             return Promise.resolve();
         }
-        const image = images.find(
-            (image) => image.resolvedName === container.Image
-        );
+        const image = images.find((image) => {
+            const { repository, imageName, tag } = parseResolvedName(
+                container.Image
+            );
+            if (
+                image.repository === repository &&
+                image.name === imageName &&
+                image.tag === tag
+            ) {
+                return true;
+            }
+        });
 
         if (image === undefined) {
             return Promise.resolve();
@@ -59,12 +72,19 @@ const createContainers = async (images) => {
         const redirects = parseRedirectLabels(labels);
         const traefikerLabels = parseTraefikerLabels(labels);
 
+        const inspectData = await inspectContainer(container.Id);
+        const environments = inspectData.Config.Env.map((env) => {
+            const [key, value] = env.split("=");
+            return { key: key, value: value };
+        });
+
         const service = new Service({
             name: serviceName,
             status: container.State == "running" ? "running" : "stopped",
             image: image._id,
             hosts: hosts,
             redirects: redirects,
+            environments,
             order: i,
             tag: traefikerLabels.tag === "" ? serviceName : traefikerLabels.tag,
             containerId: container.Id,
diff --git a/api/yarn.lock b/api/yarn.lock
index 2d6ef83..6a42926 100644
--- a/api/yarn.lock
+++ b/api/yarn.lock
@@ -178,6 +178,13 @@ base64id@2.0.0, base64id@~2.0.0:
   resolved "https://registry.yarnpkg.com/base64id/-/base64id-2.0.0.tgz#2770ac6bc47d312af97a8bf9a634342e0cd25cb6"
   integrity sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==
 
+basic-auth@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
+  integrity sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==
+  dependencies:
+    safe-buffer "5.1.2"
+
 bcrypt-pbkdf@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -480,6 +487,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+depd@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
@@ -1317,6 +1329,17 @@ mongoose@^6.2.0:
     regexp-clone "1.0.0"
     sift "13.5.2"
 
+morgan@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
+  integrity sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==
+  dependencies:
+    basic-auth "~2.0.1"
+    debug "2.6.9"
+    depd "~2.0.0"
+    on-finished "~2.3.0"
+    on-headers "~1.0.2"
+
 mpath@0.8.4:
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/mpath/-/mpath-0.8.4.tgz#6b566d9581621d9e931dd3b142ed3618e7599313"
@@ -1404,6 +1427,11 @@ on-finished@~2.3.0:
   dependencies:
     ee-first "1.1.1"
 
+on-headers@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
+  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -1628,6 +1656,11 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+safe-buffer@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
 safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
diff --git a/client/src/atoms/atoms.ts b/client/src/atoms/atoms.ts
index 6b8f4b6..d11bed8 100644
--- a/client/src/atoms/atoms.ts
+++ b/client/src/atoms/atoms.ts
@@ -32,10 +32,10 @@ export const loadingFlagsState = atom({
     },
 });
 
-export const redirectsModalState = atom({
-    key: "isAddingRedirects",
+export const settingsModalState = atom({
+    key: "isEditingSettings",
     default: {
-        isAddingRedirects: false,
+        isEditingSettings: false,
         service: <Service>{},
     },
 });
diff --git a/client/src/components/dashboard/table/DashboardTable.tsx b/client/src/components/dashboard/table/DashboardTable.tsx
index dd2137f..1a8a5e1 100644
--- a/client/src/components/dashboard/table/DashboardTable.tsx
+++ b/client/src/components/dashboard/table/DashboardTable.tsx
@@ -6,10 +6,10 @@ function DashboardTable() {
         { name: "Service Tag", screenReaderOnly: false },
         { name: "Image Name", screenReaderOnly: false },
         { name: "Service Hosts", screenReaderOnly: false },
-        { name: "Add Redirects", screenReaderOnly: true },
         { name: "Run/Stop", screenReaderOnly: true },
         { name: "Edit", screenReaderOnly: true },
         { name: "Delete", screenReaderOnly: true },
+        { name: "Config", screenReaderOnly: true },
         { name: "Order", screenReaderOnly: true },
     ];
 
diff --git a/client/src/components/dashboard/table/DashboardTableBody.tsx b/client/src/components/dashboard/table/DashboardTableBody.tsx
index a5d84fd..5214d0f 100644
--- a/client/src/components/dashboard/table/DashboardTableBody.tsx
+++ b/client/src/components/dashboard/table/DashboardTableBody.tsx
@@ -4,7 +4,7 @@ import { useRecoilState } from "recoil";
 import {
     isCreatingServiceState,
     loadingFlagsState,
-    redirectsModalState,
+    settingsModalState,
     servicesState,
 } from "../../../atoms/atoms";
 
@@ -50,7 +50,7 @@ function DashboardTableBody({ columns }: Props) {
         isCreatingServiceState
     );
     const [loadingFlags, setLoadingFlags] = useRecoilState(loadingFlagsState);
-    const [, setRedirectsModalOptions] = useRecoilState(redirectsModalState);
+    const [, setSettingsModalOptions] = useRecoilState(settingsModalState);
 
     const [serviceUnderEditing, setServiceUnderEditing] = useState<
         Service | undefined
@@ -136,8 +136,8 @@ function DashboardTableBody({ columns }: Props) {
     };
 
     const redirectsClicked = (service: Service) => {
-        setRedirectsModalOptions({
-            isAddingRedirects: true,
+        setSettingsModalOptions({
+            isEditingSettings: true,
             service: service,
         });
     };
diff --git a/client/src/components/dashboard/table/DashboardTableRow.tsx b/client/src/components/dashboard/table/DashboardTableRow.tsx
index 047a391..9b4b2df 100644
--- a/client/src/components/dashboard/table/DashboardTableRow.tsx
+++ b/client/src/components/dashboard/table/DashboardTableRow.tsx
@@ -1,6 +1,6 @@
 import { Service } from "../../../types/Service";
 import { Draggable } from "react-beautiful-dnd";
-import { MenuIcon, SwitchHorizontalIcon } from "@heroicons/react/solid";
+import { CogIcon, MenuIcon } from "@heroicons/react/solid";
 import seedrandom from "seedrandom";
 
 interface Props {
@@ -158,21 +158,7 @@ function DashboardTableRow({
                             </a>
                         ))}
                     </td>
-                    <td
-                        className="hidden whitespace-nowrap text-right text-xs font-medium lg:table-cell  lg:px-6
-                lg:py-4 lg:text-sm"
-                    >
-                        <button
-                            className="flex content-center items-center text-orange-600 hover:text-orange-900 disabled:cursor-not-allowed disabled:text-gray-600 disabled:hover:text-gray-600"
-                            onClick={() => {
-                                redirectsClicked(service);
-                            }}
-                            disabled={isLoading}
-                        >
-                            <SwitchHorizontalIcon className="mr-2 h-5 w-5" />{" "}
-                            Redirects
-                        </button>
-                    </td>
+
                     <td
                         className="hidden whitespace-nowrap text-right text-xs font-medium lg:table-cell  lg:px-6
                 lg:py-4 lg:text-sm"
@@ -209,7 +195,20 @@ function DashboardTableRow({
                             Delete
                         </button>
                     </td>
-
+                    <td
+                        className="hidden whitespace-nowrap text-right text-xs font-medium lg:table-cell  lg:px-6
+                lg:py-4 lg:text-sm"
+                    >
+                        <button
+                            className="flex content-center items-center text-orange-600 hover:text-orange-900 disabled:cursor-not-allowed disabled:text-gray-600 disabled:hover:text-gray-600"
+                            onClick={() => {
+                                redirectsClicked(service);
+                            }}
+                            disabled={isLoading}
+                        >
+                            <CogIcon className="mr-2 h-5 w-5" />
+                        </button>
+                    </td>
                     <td className="hidden p-1 text-right lg:table-cell">
                         <div className="m-2 flex justify-end">
                             <MenuIcon className="h-5 w-5" />
diff --git a/client/src/components/service-settings/ServiceSettingsModal.tsx b/client/src/components/service-settings/ServiceSettingsModal.tsx
index 959edd6..75a8e76 100644
--- a/client/src/components/service-settings/ServiceSettingsModal.tsx
+++ b/client/src/components/service-settings/ServiceSettingsModal.tsx
@@ -2,25 +2,29 @@ import { Dialog } from "@headlessui/react";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
-import { redirectsModalState } from "../../atoms/atoms";
+import { settingsModalState } from "../../atoms/atoms";
 import { Service } from "../../types/Service";
 import { Redirect } from "../../types/Redirect";
-import UrlRedirectsTable from "./table/UrlRedirectsTable";
 import { updateService } from "../../utils/api";
+import Environment from "../../types/Environment";
+import EnvTable from "./env-table/EnvTable";
+import RedirsTable from "./redirs-table/RedirsTable";
 
 function ServiceSettingsModal() {
-    const [redirectsModalOptions, setRedirectsModalOptions] =
-        useRecoilState(redirectsModalState);
+    const [settingsModalOptions, setSettingsModalOptions] =
+        useRecoilState(settingsModalState);
 
     const [service, setService] = useState<Service>(
-        redirectsModalOptions.service
+        settingsModalOptions.service
     );
-    const [redirects, setRedirects] = useState<Redirect[] | undefined>();
+    const [redirects, setRedirects] = useState<Redirect[]>([]);
+    const [environments, setEnvironments] = useState<Environment[]>([]);
 
     useEffect(() => {
-        setService(redirectsModalOptions.service);
-        setRedirects(redirectsModalOptions.service.redirects);
-    }, [redirectsModalOptions.service]);
+        setService(settingsModalOptions.service);
+        setRedirects(settingsModalOptions.service.redirects ?? []);
+        setEnvironments(settingsModalOptions.service.environments ?? []);
+    }, [settingsModalOptions.service]);
 
     const saveClicked = async () => {
         closeModal();
@@ -31,53 +35,31 @@ function ServiceSettingsModal() {
                 to: redirect.to,
             };
         });
+
+        const noIdsEnvironments = environments!.map((environment) => {
+            return {
+                key: environment.key,
+                value: environment.value,
+            };
+        });
+
         await updateService({
             ...service,
             redirects: noIdsRedirects,
+            environments: noIdsEnvironments,
         });
     };
 
     const closeModal = () => {
-        setRedirectsModalOptions((state) => ({
+        setSettingsModalOptions((state) => ({
             ...state,
-            isAddingRedirects: false,
+            isEditingSettings: false,
         }));
     };
 
-    const addNewRedirect = () => {
-        setRedirects((prevRedirects) => {
-            return [
-                ...prevRedirects!,
-                {
-                    _id: prevRedirects ? `${prevRedirects.length + 1}` : "0",
-                    from: "",
-                    to: "",
-                },
-            ];
-        });
-    };
-
-    const updateRedirect = (redirect: Redirect) => {
-        setRedirects((prevRedirects) => {
-            return prevRedirects!.map((prevRedirect) => {
-                if (prevRedirect._id == redirect._id) {
-                    return redirect;
-                }
-                return prevRedirect;
-            });
-        });
-    };
-
-    const deleteRedirect = (redirect: Redirect) => {
-        const newRedirects = redirects!.filter((prevRedirect) => {
-            return prevRedirect._id !== redirect._id;
-        });
-        setRedirects(newRedirects);
-    };
-
     return (
         <Dialog
-            open={redirectsModalOptions.isAddingRedirects}
+            open={settingsModalOptions.isEditingSettings}
             onClose={() => {}}
             className="fixed inset-0 z-10 overflow-y-auto"
         >
@@ -86,11 +68,17 @@ function ServiceSettingsModal() {
 
                 {service !== undefined ? (
                     <div className="relative mx-auto flex w-3/4 flex-col items-center justify-center rounded bg-gray-800 p-4 shadow-lg ">
-                        <UrlRedirectsTable
-                            redirects={redirects!}
-                            handleUpdateRedirect={updateRedirect}
-                            handleAddNewRedirect={addNewRedirect}
-                            handleDeleteRedirect={deleteRedirect}
+                        <RedirsTable
+                            redirects={redirects}
+                            handleUpdateData={(data: Redirect[]) => {
+                                setRedirects(data);
+                            }}
+                        />
+                        <EnvTable
+                            environments={environments}
+                            handleUpdateData={(data: Environment[]) => {
+                                setEnvironments(data);
+                            }}
                         />
                         <div className="mt-4 mr-6 flex w-full justify-end">
                             <button
diff --git a/client/src/components/service-settings/env-table/EnvTable.tsx b/client/src/components/service-settings/env-table/EnvTable.tsx
new file mode 100644
index 0000000..73628a6
--- /dev/null
+++ b/client/src/components/service-settings/env-table/EnvTable.tsx
@@ -0,0 +1,82 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { env } from "process";
+import React, { useEffect, useState } from "react";
+import Environment from "../../../types/Environment";
+import { Redirect } from "../../../types/Redirect";
+import SettingsTable from "../settings-table/SettingsTable";
+
+interface Props {
+    environments: Environment[];
+    handleUpdateData: (data: Environment[]) => void;
+}
+
+function EnvTable({ environments, handleUpdateData }: Props) {
+    const [envs, setEnvs] = useState<Environment[]>([]);
+
+    const columns = [{ name: "Key" }, { name: "Value" }];
+
+    const placeholderText = {
+        columnA: "Key",
+        columnB: "Value",
+        notFound: "No Env. Vars found",
+    };
+
+    useEffect(() => {
+        setEnvs(environments);
+    }, []);
+
+    useEffect(() => {
+        handleUpdateData(envs);
+    }, [envs]);
+
+    const addNewEnvironment = () => {
+        setEnvs((prevEnvironments) => {
+            return [
+                ...prevEnvironments!,
+                {
+                    _id: prevEnvironments
+                        ? `${prevEnvironments.length + 1}`
+                        : "0",
+                    key: "",
+                    value: "",
+                },
+            ];
+        });
+    };
+
+    const updateEnvironment = (environment: Environment) => {
+        setEnvs((prevEnvironments) => {
+            return prevEnvironments!.map((prevEnvironment) => {
+                if (prevEnvironment._id == environment._id) {
+                    return environment;
+                }
+                return prevEnvironment;
+            });
+        });
+    };
+
+    const deleteEnvironment = (environment: Environment) => {
+        const newEnvironments = environments!.filter((prevEnvironment) => {
+            return prevEnvironment._id !== environment._id;
+        });
+        setEnvs(newEnvironments);
+    };
+    return (
+        <SettingsTable
+            data={envs}
+            columns={columns}
+            placeholderText={placeholderText}
+            handleUpdateData={(data: Environment | Redirect) => {
+                const env = data as Environment;
+                updateEnvironment(env);
+            }}
+            handleAddNewData={addNewEnvironment}
+            handleDeleteData={(data: Environment | Redirect) => {
+                const env = data as Environment;
+                deleteEnvironment(env);
+            }}
+        />
+    );
+}
+
+export default EnvTable;
diff --git a/client/src/components/service-settings/redirs-table/RedirsTable.tsx b/client/src/components/service-settings/redirs-table/RedirsTable.tsx
new file mode 100644
index 0000000..0b57a02
--- /dev/null
+++ b/client/src/components/service-settings/redirs-table/RedirsTable.tsx
@@ -0,0 +1,79 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from "react";
+import Environment from "../../../types/Environment";
+import { Redirect } from "../../../types/Redirect";
+import SettingsTable from "../settings-table/SettingsTable";
+
+interface Props {
+    redirects: Redirect[];
+    handleUpdateData: (data: Redirect[]) => void;
+}
+
+function RedirsTable({ redirects, handleUpdateData }: Props) {
+    const [redirs, setRedirs] = useState<Redirect[]>([]);
+
+    const columns = [{ name: "From (Regex)" }, { name: "To" }];
+
+    const placeholderText = {
+        columnA: "From..",
+        columnB: "To..",
+        notFound: "No redirects found",
+    };
+
+    useEffect(() => {
+        setRedirs(redirects);
+    }, []);
+
+    useEffect(() => {
+        handleUpdateData(redirs);
+    }, [redirs]);
+
+    const addNewRedirect = () => {
+        setRedirs((prevRedirs) => {
+            return [
+                ...prevRedirs!,
+                {
+                    _id: prevRedirs ? `${prevRedirs.length + 1}` : "0",
+                    from: "",
+                    to: "",
+                },
+            ];
+        });
+    };
+
+    const updateRedirect = (redirect: Redirect) => {
+        setRedirs((prevRedirs) => {
+            return prevRedirs!.map((prevRedir) => {
+                if (prevRedir._id == redirect._id) {
+                    return redirect;
+                }
+                return prevRedir;
+            });
+        });
+    };
+
+    const deleteRedirect = (redirect: Redirect) => {
+        const newRedir = redirs!.filter((prevRedir) => {
+            return prevRedir._id !== redirect._id;
+        });
+        setRedirs(newRedir);
+    };
+    return (
+        <SettingsTable
+            data={redirs}
+            columns={columns}
+            placeholderText={placeholderText}
+            handleUpdateData={(data: Environment | Redirect) => {
+                const redir = data as Redirect;
+                updateRedirect(redir);
+            }}
+            handleAddNewData={addNewRedirect}
+            handleDeleteData={(data: Environment | Redirect) => {
+                const redir = data as Redirect;
+                deleteRedirect(redir);
+            }}
+        />
+    );
+}
+
+export default RedirsTable;
diff --git a/client/src/components/service-settings/table/UrlRedirectsTable.tsx b/client/src/components/service-settings/settings-table/SettingsTable.tsx
similarity index 55%
rename from client/src/components/service-settings/table/UrlRedirectsTable.tsx
rename to client/src/components/service-settings/settings-table/SettingsTable.tsx
index c1c7334..e4e6360 100644
--- a/client/src/components/service-settings/table/UrlRedirectsTable.tsx
+++ b/client/src/components/service-settings/settings-table/SettingsTable.tsx
@@ -1,20 +1,33 @@
-import { PlusCircleIcon, PlusIcon, TrashIcon } from "@heroicons/react/solid";
+import { PlusCircleIcon } from "@heroicons/react/solid";
+import Environment from "../../../types/Environment";
 import { Redirect } from "../../../types/Redirect";
-import UrlRedirectsTableRow from "./UrlRedirectsTableRow";
+import SettingsTableRow from "./SettingsTableRow";
 
-function UrlRedirectsTable(props: {
-    redirects: Redirect[];
-    handleUpdateRedirect: (redirect: Redirect) => void;
-    handleAddNewRedirect: () => void;
-    handleDeleteRedirect: (redirect: Redirect) => void;
-}) {
-    const columns = [
-        { name: "From (Regex)", screenReaderOnly: false },
-        { name: "To", screenReaderOnly: false },
-    ];
+interface Props {
+    data: Redirect[] | Environment[];
+    columns: {
+        name: string;
+    }[];
 
+    placeholderText: {
+        columnA: string;
+        columnB: string;
+        notFound: string;
+    };
+    handleUpdateData: (data: Redirect | Environment) => void;
+    handleAddNewData: () => void;
+    handleDeleteData: (data: Redirect | Environment) => void;
+}
+function SettingsTable({
+    data,
+    columns,
+    placeholderText,
+    handleUpdateData,
+    handleAddNewData,
+    handleDeleteData,
+}: Props) {
     return (
-        <table className="min-w-full border-separate">
+        <table className="m-5 min-w-full border-separate">
             <thead>
                 <tr>
                     {columns.map((column) => {
@@ -31,12 +44,11 @@ function UrlRedirectsTable(props: {
                         );
                     })}
 
-                    <th scope="col" className="relative px-6">
-                        <span className="sr-only">Add New Redirect</span>
+                    <th scope="col" className="w-4">
                         <button
                             className="focus:shadow-outline rounded py-2 px-4 font-bold text-green-500 hover:text-green-200 focus:outline-none"
                             onClick={() => {
-                                props.handleAddNewRedirect();
+                                handleAddNewData();
                             }}
                         >
                             <PlusCircleIcon className="h-7 w-7" />
@@ -45,14 +57,14 @@ function UrlRedirectsTable(props: {
                 </tr>
             </thead>
             <tbody>
-                {props.redirects !== undefined &&
-                props.redirects.length !== 0 ? (
-                    props.redirects!.map((urlRedirect: Redirect, i) => (
-                        <UrlRedirectsTableRow
+                {data !== undefined && data.length !== 0 ? (
+                    data!.map((data: Redirect | Environment, i) => (
+                        <SettingsTableRow
                             key={i}
-                            urlRedirect={urlRedirect}
-                            handleUpdateRedirect={props.handleUpdateRedirect}
-                            handleDeleteRedirect={props.handleDeleteRedirect}
+                            data={data}
+                            placeholderText={placeholderText}
+                            handleUpdateData={handleUpdateData}
+                            handleDeleteData={handleDeleteData}
                         />
                     ))
                 ) : (
@@ -61,7 +73,7 @@ function UrlRedirectsTable(props: {
                             colSpan={2}
                             className="text-md border-white-600 border px-4 py-1 text-center font-medium tracking-wider text-white"
                         >
-                            No Url Redirects Found
+                            {placeholderText.notFound}
                         </td>
                     </tr>
                 )}
@@ -70,4 +82,4 @@ function UrlRedirectsTable(props: {
     );
 }
 
-export default UrlRedirectsTable;
+export default SettingsTable;
diff --git a/client/src/components/service-settings/settings-table/SettingsTableRow.tsx b/client/src/components/service-settings/settings-table/SettingsTableRow.tsx
new file mode 100644
index 0000000..52a6a83
--- /dev/null
+++ b/client/src/components/service-settings/settings-table/SettingsTableRow.tsx
@@ -0,0 +1,96 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { TrashIcon } from "@heroicons/react/solid";
+import { useEffect, useState } from "react";
+import Environment from "../../../types/Environment";
+import { Redirect } from "../../../types/Redirect";
+
+interface Props {
+    data: Redirect | Environment;
+    placeholderText: {
+        columnA: string;
+        columnB: string;
+    };
+    handleUpdateData: (data: Redirect | Environment) => void;
+    handleDeleteData: (data: Redirect | Environment) => void;
+}
+
+function SettingsTableRow({
+    data,
+    placeholderText,
+    handleUpdateData,
+    handleDeleteData,
+}: Props) {
+    const [columnA, setColumnA] = useState<string>("");
+    const [columnB, setColumnB] = useState<string>("");
+
+    useEffect(() => {
+        if ("from" in data) {
+            const redirect = data as Redirect;
+            setColumnA(redirect.from);
+            setColumnB(redirect.to);
+        } else if ("key" in data) {
+            const environment = data as Environment;
+            setColumnA(environment.key);
+            setColumnB(environment.value);
+        }
+    }, []);
+
+    useEffect(() => {
+        if ("from" in data) {
+            const redirect = data as Redirect;
+            handleUpdateData({
+                ...redirect,
+                from: columnA!,
+                to: columnB!,
+            });
+        } else if ("key" in data) {
+            const environment = data as Environment;
+            handleUpdateData({
+                ...environment,
+                key: columnA!,
+                value: columnB!,
+            });
+        }
+    }, [columnA, columnB]);
+
+    return (
+        <tr>
+            <td className="text-md border-white-600 w-auto border px-4 py-1 font-medium tracking-wider text-white">
+                <input
+                    id="columnA"
+                    type="text"
+                    className="w-full border-b-2 border-white bg-transparent outline-none"
+                    placeholder={placeholderText.columnA}
+                    value={columnA}
+                    onChange={(e) => {
+                        setColumnA(e.target.value);
+                    }}
+                />
+            </td>
+            <td className="text-md border-white-600  w-auto border px-4 py-1 font-medium tracking-wider text-white">
+                <input
+                    id="columnB"
+                    type="text"
+                    className="w-full border-b-2 border-white bg-transparent outline-none"
+                    placeholder={placeholderText.columnB}
+                    value={columnB}
+                    onChange={(e) => {
+                        setColumnB(e.target.value);
+                    }}
+                />
+            </td>
+            <td className="text-md px-4 py-1 text-center font-medium tracking-wider text-white">
+                <button
+                    className="focus:shadow-outline rounded bg-transparent py-2 px-4 font-bold text-red-700 hover:text-red-400 focus:outline-none "
+                    onClick={() => {
+                        handleDeleteData(data);
+                    }}
+                >
+                    <TrashIcon className="h-7 w-7" />
+                </button>
+            </td>
+        </tr>
+    );
+}
+
+export default SettingsTableRow;
diff --git a/client/src/components/service-settings/table/UrlRedirectsTableRow.tsx b/client/src/components/service-settings/table/UrlRedirectsTableRow.tsx
deleted file mode 100644
index d493e29..0000000
--- a/client/src/components/service-settings/table/UrlRedirectsTableRow.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { TrashIcon } from "@heroicons/react/solid";
-import { useEffect, useState } from "react";
-import { Redirect } from "../../../types/Redirect";
-
-function UrlRedirectsTableRow(props: {
-    urlRedirect: Redirect;
-    handleUpdateRedirect: (redirect: Redirect) => void;
-    handleDeleteRedirect: (redirect: Redirect) => void;
-}) {
-    const [fromUrl, setFromUrl] = useState(props.urlRedirect.from);
-    const [toUrl, setToUrl] = useState(props.urlRedirect.to);
-
-    useEffect(() => {
-        props.handleUpdateRedirect({
-            ...props.urlRedirect,
-            from: fromUrl,
-            to: toUrl,
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fromUrl, toUrl]);
-
-    return (
-        <tr>
-            <td className="text-md border-white-600 w-auto border px-4 py-1 font-medium tracking-wider text-white">
-                <input
-                    id="From Url"
-                    type="text"
-                    className="w-full border-b-2 border-white bg-transparent outline-none"
-                    placeholder="From Url.."
-                    value={fromUrl}
-                    onChange={(e) => {
-                        setFromUrl(e.target.value);
-                    }}
-                />
-            </td>
-            <td className="text-md border-white-600  w-auto border px-4 py-1 font-medium tracking-wider text-white">
-                <input
-                    id="To Url"
-                    type="text"
-                    className="w-full border-b-2 border-white bg-transparent outline-none"
-                    placeholder="To Url.."
-                    value={toUrl}
-                    onChange={(e) => {
-                        setToUrl(e.target.value);
-                    }}
-                />
-            </td>
-            <td className="text-md px-4 py-1 text-center font-medium tracking-wider text-white  ">
-                <button
-                    className="focus:shadow-outline rounded bg-transparent py-2 px-4 font-bold text-red-700 hover:text-red-400 focus:outline-none "
-                    onClick={() => {
-                        props.handleDeleteRedirect(props.urlRedirect);
-                    }}
-                >
-                    <TrashIcon className="h-7 w-7" />
-                </button>
-            </td>
-        </tr>
-    );
-}
-
-export default UrlRedirectsTableRow;
diff --git a/client/src/pages/dashboard/index.tsx b/client/src/pages/dashboard/index.tsx
index 01789d2..915840c 100644
--- a/client/src/pages/dashboard/index.tsx
+++ b/client/src/pages/dashboard/index.tsx
@@ -4,13 +4,13 @@ import DashboardHeader from "../../components/dashboard/DashboardHeader";
 import DashboardTable from "../../components/dashboard/table/DashboardTable";
 import Navbar from "../../components/navbar/Navbar";
 import { resetServerContext } from "react-beautiful-dnd";
-import FileEditorModal from "../../components/code-editor/FileEditorModal";
-import { useRecoilValue } from "recoil";
-import { isEditingFileState, loadingFlagsState } from "../../atoms/atoms";
-import SpinnerModal from "../../components/loading/SpinnerModal";
 import ServiceSettingsModal from "../../components/service-settings/ServiceSettingsModal";
+import { useRecoilState } from "recoil";
+import { settingsModalState } from "../../atoms/atoms";
 
 const Dashboard: NextPage = () => {
+    const [settingsModalOptions, setSettingsModalOptions] =
+        useRecoilState(settingsModalState);
     return (
         <div>
             <Head>
@@ -26,25 +26,25 @@ const Dashboard: NextPage = () => {
             </nav>
             <main>
                 <DashboardHeader />
-                <div className="max-w-7xl mx-auto py-6 px-6 lg:px-8">
+                <div className="mx-auto max-w-7xl py-6 px-6 lg:px-8">
                     <div className="flex flex-col">
                         <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                             <div
                                 className="
-                        py-2
-                        align-middle
                         inline-block
                         min-w-full
+                        py-2
+                        align-middle
                         sm:px-6
                         lg:px-8
                     "
                             >
                                 <div
                                     className="
-                            shadow
                             overflow-hidden
-                            border-b border-gray-200
                             rounded-lg
+                            border-b border-gray-200
+                            shadow
                         "
                                 >
                                     <DashboardTable />
@@ -53,6 +53,9 @@ const Dashboard: NextPage = () => {
                         </div>
                     </div>
                 </div>
+                {settingsModalOptions.isEditingSettings ? (
+                    <ServiceSettingsModal />
+                ) : null}
             </main>
         </div>
     );
diff --git a/client/src/types/Environment.ts b/client/src/types/Environment.ts
new file mode 100644
index 0000000..0584313
--- /dev/null
+++ b/client/src/types/Environment.ts
@@ -0,0 +1,5 @@
+export default interface Environment {
+    _id?: string;
+    key: string;
+    value: string;
+}
diff --git a/client/src/types/Service.ts b/client/src/types/Service.ts
index d2ac0b4..6e4bbdb 100644
--- a/client/src/types/Service.ts
+++ b/client/src/types/Service.ts
@@ -1,3 +1,4 @@
+import Environment from "./Environment";
 import { Image } from "./Image";
 import { Redirect } from "./Redirect";
 
@@ -9,5 +10,6 @@ export interface Service {
     hosts: string[];
     order: number;
     redirects?: Redirect[];
+    environments?: Environment[];
     status: string;
 }
diff --git a/client/src/utils/api.ts b/client/src/utils/api.ts
index 8c33a4c..e597089 100644
--- a/client/src/utils/api.ts
+++ b/client/src/utils/api.ts
@@ -27,6 +27,7 @@ const updateService = async (service: Service) => {
         hosts: service.hosts,
         image: service.image.resolvedName,
         redirects: service.redirects,
+        environments: service.environments,
         tag: service.tag,
     });
 };