diff --git a/packages/components/src/api/Endpoints.ts b/packages/components/src/api/Endpoints.ts
deleted file mode 100644
index 6cb281bc7a..0000000000
--- a/packages/components/src/api/Endpoints.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import GetApiHost from "./GetApiHost";
-
-interface StrObj {
-  [key: string]: any;
-}
-
-const n = (x: any) => "";
-const [ apiHost, disableSSL = false ] = GetApiHost();
-
-const endpoints: { [key: string]: any } = {
-	voice_designer: {
-		create: () => `create`,
-		update: ({ voiceToken = "" }) => `${ voiceToken }/update`,
-		delete: ({ voiceToken = "" }) => `${ voiceToken }/delete`,
-		list: ({ userToken = "" }) => `user/${ userToken }/list`,
-	}
-};
-
-const getPath = (category = "", method = "") =>
-	`${ disableSSL ? "http" : "https" }://${ apiHost }/${ ((endpoints[category] || {})[method] || n)() }`;
-
-const consumeEndpoint = async(category = "", method = "", request = {}) => {
-	return await fetch(getPath(category,method), {
-		method: 'POST',
-		headers: {
-		      'Accept': 'application/json',
-		      'Content-Type': 'application/json',
-		},
-	    credentials: 'include',
-	    body: JSON.stringify(request),
-	}).then(res => {
-		console.log("response got",res);
-		let resObj = res.json();
-		if (resObj && "success" in res) {
-			console.log("a good one");
-			return res
-		}	else {
-			console.log("a bad one");
-			throw new Error;
-		}
-	}).catch(e => {
-		console.log("🚛");
-		return { success: false };
-	});
-};
-
-export default consumeEndpoint;
\ No newline at end of file
diff --git a/packages/components/src/api/GrabEndpoint.ts b/packages/components/src/api/GrabEndpoint.ts
new file mode 100644
index 0000000000..b5adcc26d7
--- /dev/null
+++ b/packages/components/src/api/GrabEndpoint.ts
@@ -0,0 +1,41 @@
+import GetApiHost from "./GetApiHost";
+
+const [ apiHost, disableSSL = false ] = GetApiHost();
+
+type UrlRoutingFunction<UrlRouteArgs> = (urlRouteArgs: UrlRouteArgs) => string;
+
+interface RequestHeaders {
+    [name: string]: string,
+}
+
+interface RouteSetup<UrlRouteArgs> {
+    method: string;
+    routingFunction: UrlRoutingFunction<UrlRouteArgs>;
+}
+
+const GrabPath = (endpoint = "") => `${ disableSSL ? "http" : "https" }://${ apiHost }/${ endpoint }`;
+
+const GrabEndpoint = <UrlRouteArgs, Request, Response>(routeSetup: RouteSetup<UrlRouteArgs>) :  (urlRouteArgs: UrlRouteArgs, request: Request) => Promise<Response> => {
+    return async function(urlRouteArgs: UrlRouteArgs, request: Request) : Promise<Response> {
+        const endpoint = routeSetup.routingFunction(urlRouteArgs);
+        const method = routeSetup.method;
+
+        return fetch(GrabPath(endpoint), {
+            method,
+            headers: {
+                "Accept": "application/json",
+            },
+            credentials: 'include',
+            ...method === "GET" ? {} : { body: JSON.stringify(request) },
+        })
+        .then(res => res.json())
+        .then(res => {
+            if (res && 'success' in res) {
+                return res;
+            } else throw new Error;
+        })
+        .catch(e => ({ success : false }));
+    }
+};
+
+export { GrabEndpoint, GrabPath };
\ No newline at end of file
diff --git a/packages/components/src/api/voice_designer/CreateVoice.ts b/packages/components/src/api/voice_designer/CreateVoice.ts
new file mode 100644
index 0000000000..8aec0b4ea0
--- /dev/null
+++ b/packages/components/src/api/voice_designer/CreateVoice.ts
@@ -0,0 +1,19 @@
+import { GrabEndpoint } from "../GrabEndpoint"
+
+interface CreateVoiceRequest {
+    // args
+    example_token: String;
+}
+
+interface CreateVoiceResponse {
+    // args
+    name: string,
+}
+
+const CreateVoice = GrabEndpoint<string, CreateVoiceRequest, CreateVoiceResponse>({
+    method: "POST", 
+    routingFunction: () => "voice_designer/create",
+});
+
+
+export default CreateVoice;
\ No newline at end of file
diff --git a/packages/components/src/api/voice_designer/DeleteVoice.ts b/packages/components/src/api/voice_designer/DeleteVoice.ts
new file mode 100644
index 0000000000..6cf47103ec
--- /dev/null
+++ b/packages/components/src/api/voice_designer/DeleteVoice.ts
@@ -0,0 +1,19 @@
+import { GrabEndpoint } from "../GrabEndpoint"
+
+interface CreateVoiceRequest {
+    // args
+    example_token: String;
+}
+
+interface CreateVoiceResponse {
+    // args
+    name: string,
+}
+
+const DeleteVoice = GrabEndpoint<string, CreateVoiceRequest, CreateVoiceResponse>({
+    method: "POST", 
+    routingFunction: (voiceToken:  string) => `${ voiceToken }/delete`,
+});
+
+
+export default DeleteVoice;
\ No newline at end of file
diff --git a/packages/components/src/api/voice_designer/ListVoices.ts b/packages/components/src/api/voice_designer/ListVoices.ts
new file mode 100644
index 0000000000..02aac2a3b1
--- /dev/null
+++ b/packages/components/src/api/voice_designer/ListVoices.ts
@@ -0,0 +1,19 @@
+import { GrabEndpoint } from "../GrabEndpoint"
+
+interface CreateVoiceRequest {
+    // args
+    example_token: String;
+}
+
+interface CreateVoiceResponse {
+    // args
+    name: string,
+}
+
+const List = GrabEndpoint<string, CreateVoiceRequest, CreateVoiceResponse>({
+    method: "GET", 
+    routingFunction: (userToken:  string) => `user/${ userToken }/list`,
+});
+
+
+export default List;
\ No newline at end of file
diff --git a/packages/components/src/api/voice_designer/UpdateVoice.ts b/packages/components/src/api/voice_designer/UpdateVoice.ts
new file mode 100644
index 0000000000..dd3359a565
--- /dev/null
+++ b/packages/components/src/api/voice_designer/UpdateVoice.ts
@@ -0,0 +1,19 @@
+import { GrabEndpoint } from "../GrabEndpoint"
+
+interface CreateVoiceRequest {
+    // args
+    example_token: String;
+}
+
+interface CreateVoiceResponse {
+    // args
+    name: string,
+}
+
+const UpdateVoice = GrabEndpoint<string, CreateVoiceRequest, CreateVoiceResponse>({
+    method: "PATCH", 
+    routingFunction: (voiceToken:  string) => `${ voiceToken }/update`,
+});
+
+
+export default UpdateVoice;
\ No newline at end of file