diff --git a/packages/components/src/api/MakeRequest.ts b/packages/components/src/api/MakeRequest.ts
index b30f536c9f..fa31abb905 100644
--- a/packages/components/src/api/MakeRequest.ts
+++ b/packages/components/src/api/MakeRequest.ts
@@ -5,23 +5,26 @@ const { formatUrl } = GetApiHost();
 type UrlRoutingFunction<UrlRouteArgs> = (urlRouteArgs: UrlRouteArgs) => string;
 
 interface RequestHeaders {
-    [name: string]: string,
+  [name: string]: string;
 }
 
 interface RouteSetup<UrlRouteArgs> {
     method: string;
     multipart?: boolean;
     routingFunction: UrlRoutingFunction<UrlRouteArgs>;
-}
-
-const METHOD_OMITS_BODY : { [key: string] : boolean } = {
-    "DELETE": true,
-    "GET": true,
-    "OPTIONS": true,
-    "PATCH": false,
-    "POST": false,
-    "PUT": false,
-}
+} 
+  
+//const formatUrl = (endpoint = "") =>
+//  `${useSsl ? "https" : "http"}://${host + endpoint}`;
+  
+const METHOD_OMITS_BODY: { [key: string]: boolean } = {
+  DELETE: false,
+  GET: true,
+  OPTIONS: true,
+  PATCH: false,
+  POST: false,
+  PUT: false,
+};
 
 const MakeRequest = <UrlRouteArgs, Request, Response>(routeSetup: RouteSetup<UrlRouteArgs>) :  (urlRouteArgs: UrlRouteArgs, request: Request) => Promise<Response> => {
     return async function(urlRouteArgs: UrlRouteArgs, request: Request) : Promise<Response> {
diff --git a/packages/components/src/api/voice_designer/voice_datasets/GetDataset.ts b/packages/components/src/api/voice_designer/voice_datasets/GetDataset.ts
new file mode 100644
index 0000000000..1018a3390e
--- /dev/null
+++ b/packages/components/src/api/voice_designer/voice_datasets/GetDataset.ts
@@ -0,0 +1,28 @@
+import MakeRequest from "../../MakeRequest";
+import { UserDetailsLight } from "../../_common/UserDetailsLight";
+
+export interface GetDatasetRequest {}
+
+export interface GetDatasetResponse {
+  dataset_token: string;
+  title: string;
+
+  ietf_language_tag: string;
+  ietf_primary_language_subtag: string;
+
+  creator: UserDetailsLight;
+  creator_set_visibility: string;
+
+  created_at: Date;
+  updated_at: Date;
+}
+
+export const GetDataset = MakeRequest<
+  string,
+  GetDatasetRequest,
+  GetDatasetResponse
+>({
+  method: "GET",
+  routingFunction: (datasetToken: string) =>
+    `/v1/voice_designer/dataset/${datasetToken}`,
+});
diff --git a/packages/components/src/api/voice_designer/voices/GetVoice.ts b/packages/components/src/api/voice_designer/voices/GetVoice.ts
new file mode 100644
index 0000000000..869bba62ba
--- /dev/null
+++ b/packages/components/src/api/voice_designer/voices/GetVoice.ts
@@ -0,0 +1,24 @@
+import MakeRequest from "../../MakeRequest";
+import { UserDetailsLight } from "../../_common/UserDetailsLight";
+
+export interface GetVoiceRequest {}
+
+export interface GetVoiceResponse {
+  voice_token: string;
+  title: string;
+
+  ietf_language_tag: string;
+  ietf_primary_language_subtag: string;
+
+  creator: UserDetailsLight;
+  creator_set_visibility: string;
+
+  created_at: Date;
+  updated_at: Date;
+}
+
+export const GetVoice = MakeRequest<string, GetVoiceRequest, GetVoiceResponse>({
+  method: "GET",
+  routingFunction: (voiceToken: string) =>
+    `/v1/voice_designer/voice/${voiceToken}`,
+});
diff --git a/packages/components/src/env/FakeYouFrontendEnvironment.ts b/packages/components/src/env/FakeYouFrontendEnvironment.ts
index d250d01388..ca7e5632c3 100644
--- a/packages/components/src/env/FakeYouFrontendEnvironment.ts
+++ b/packages/components/src/env/FakeYouFrontendEnvironment.ts
@@ -1,4 +1,3 @@
-
 enum Environment {
   Development,
   Staging,
@@ -26,26 +25,26 @@ export class FakeYouFrontendEnvironment {
     }
   }
 
-  public static getInstance() : FakeYouFrontendEnvironment {
+  public static getInstance(): FakeYouFrontendEnvironment {
     if (FakeYouFrontendEnvironment.instance === undefined) {
-        FakeYouFrontendEnvironment.instance = new FakeYouFrontendEnvironment();
+      FakeYouFrontendEnvironment.instance = new FakeYouFrontendEnvironment();
     }
     return FakeYouFrontendEnvironment.instance;
   }
 
-  public useProductionStripePlans() : boolean {
+  public useProductionStripePlans(): boolean {
     return this.isProduction() || this.isStaging();
   }
 
-  public isProduction() : boolean {
+  public isProduction(): boolean {
     return this.environment === Environment.Production;
   }
 
-  public isStaging() : boolean {
+  public isStaging(): boolean {
     return this.environment === Environment.Staging;
   }
 
-  public isDevelopment() : boolean {
+  public isDevelopment(): boolean {
     return this.environment === Environment.Development;
   }
 }
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index 55514c2d0a..aec522ed57 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -22,6 +22,7 @@ import {
 import { WebUrl } from "common/WebUrl";
 import { Logout } from "@storyteller/components/src/api/session/Logout";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { FakeYouFrontendEnvironment } from "@storyteller/components/src/env/FakeYouFrontendEnvironment";
 import { useLocalize } from "hooks";
 
 const DEFAULT_QUEUE_REFRESH_INTERVAL_MILLIS = 15000;
@@ -37,7 +38,9 @@ export default function SideNav(props: SideNavProps) {
   const { t } = useLocalize("SideNav");
   let history = useHistory();
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const fakeYouFrontendEnv =  FakeYouFrontendEnvironment.getInstance();
 
+  const isDevelopmentEnv = fakeYouFrontendEnv.isDevelopment()
   const handleNavLinkClick = () => {
     const wrapper = document.getElementById("wrapper");
 
@@ -267,6 +270,21 @@ export default function SideNav(props: SideNavProps) {
             {t("speechVc")}
           </NavLink>
         </li>
+        {isDevelopmentEnv && (
+        <li>
+          <NavLink
+            to="/voice-designer"
+            activeClassName="active-link"
+            onClick={handleNavLinkClick}
+          >
+            <FontAwesomeIcon
+              icon={faWaveformLines}
+              className="sidebar-heading-icon"
+            />
+            {"Voice Designer"}
+          </NavLink>
+        </li>
+        )}
         <hr className="mb-4 mt-3" />
         <li className="sidebar-heading">{t("videoTitle")}</li>
         <li>