diff --git a/frontend/pages/subscriptions.js b/frontend/pages/subscriptions.js
index 54450d7d..a2afea4f 100644
--- a/frontend/pages/subscriptions.js
+++ b/frontend/pages/subscriptions.js
@@ -100,7 +100,7 @@ const Subscriptions = () => {
                 Add new
               </Button>
             </Flex>
-            <SubscriptionsList />
+            <SubscriptionsList data={subscriptionsCache.data} />
           </Flex>
         </ScaleFade>
       )}
diff --git a/frontend/sample.env b/frontend/sample.env
index 93aff9b8..e295fc84 100644
--- a/frontend/sample.env
+++ b/frontend/sample.env
@@ -1,7 +1,9 @@
-export REACT_APP_SIMIOTICS_SEARCH_URL=http://localhost:5000
-export REACT_APP_MIXPANEL_TOKEN="<YOUR MIXPANEL TOKEN HERE>"
-export REACT_APP_SIMIOTICS_AUTH_URL=http://localhost:7474
-export REACT_APP_SIMIOTICS_JOURNALS_URL=http://localhost:7475
-export REACT_APP_BUGOUT_CONTACTUS_TOKEN="<Brood token for contact user>"
-export REACT_APP_BUGOUT_CONTACTUS_JOURNAL_ID="<journal ID for contact journal>"
-export REACT_APP_STRIPE_PUBLISHABLE_KEY="<stripe publishable key>"
+export NEXT_PUBLIC_SIMIOTICS_SEARCH_URL=http://localhost:5000
+export NEXT_PUBLIC_MIXPANEL_TOKEN="<YOUR MIXPANEL TOKEN HERE>"
+export NEXT_PUBLIC_SIMIOTICS_AUTH_URL=http://localhost:7474
+export NEXT_PUBLIC_SIMIOTICS_JOURNALS_URL=http://localhost:7475
+export NEXT_PUBLIC_BUGOUT_CONTACTUS_TOKEN="<Brood token for contact user>"
+export NEXT_PUBLIC_BUGOUT_CONTACTUS_JOURNAL_ID="<journal ID for contact journal>"
+export NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="<stripe publishable key>"
+export NEXT_PUBLIC_MOONSTREAM_API_URL=http://localhost:7481
+
diff --git a/frontend/src/components/NewSubscription.js b/frontend/src/components/NewSubscription.js
index c1add3d9..2f068188 100644
--- a/frontend/src/components/NewSubscription.js
+++ b/frontend/src/components/NewSubscription.js
@@ -44,6 +44,7 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
       type: isFreeOption ? "free" : radioState,
     });
   };
+
   return (
     <form onSubmit={handleSubmit(createSubscriptionWrap)}>
       <ModalHeader>Subscribe to a new address</ModalHeader>
@@ -84,9 +85,9 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
 
           <FormControl isInvalid={errors.type}>
             <HStack {...group} alignItems="stretch">
-              {typesCache.data.map((type) => {
+              {typesCache.data.subscriptions.map((type) => {
                 const radio = getRadioProps({
-                  value: type.subscription_type,
+                  value: type.id,
                   isDisabled:
                     !type.active ||
                     (isFreeOption &&
@@ -94,7 +95,7 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
                 });
                 if (!type.subscription_plan_id) return "";
                 return (
-                  <RadioCard key={`subscription-type-${type.id}`} {...radio}>
+                  <RadioCard key={`subscription_type_${type.id}`} {...radio}>
                     {type.name}
                   </RadioCard>
                 );
@@ -102,6 +103,7 @@ const NewSubscription = ({ isFreeOption, onClose }) => {
             </HStack>
           </FormControl>
         </Stack>
+        <Input placeholder="color" name="color" ref={register()}></Input>
       </ModalBody>
       <ModalFooter>
         <Button
diff --git a/frontend/src/components/SubscriptionsList.js b/frontend/src/components/SubscriptionsList.js
index 5ad093f3..f34a89e8 100644
--- a/frontend/src/components/SubscriptionsList.js
+++ b/frontend/src/components/SubscriptionsList.js
@@ -18,12 +18,11 @@ import CopyButton from "./CopyButton";
 import { useSubscriptions } from "../core/hooks";
 import ConfirmationRequest from "./ConfirmationRequest";
 
-const List = () => {
+const List = (data) => {
   const { subscriptionsCache, changeNote, deleteSubscription } =
     useSubscriptions();
 
   const updateCallback = ({ id, note }) => {
-    console.log('updateCallback', id)
     changeNote.mutate({ id, note });
   };
 
diff --git a/frontend/src/core/hooks/useSubscriptions.js b/frontend/src/core/hooks/useSubscriptions.js
index 422ca0ec..54903d31 100644
--- a/frontend/src/core/hooks/useSubscriptions.js
+++ b/frontend/src/core/hooks/useSubscriptions.js
@@ -27,7 +27,7 @@ const useSubscriptions = () => {
 
   const getSubscriptions = async () => {
     const response = await SubscriptionsService.getSubscriptions();
-    return response.data.data;
+    return response.data;
   };
 
   const subscriptionsCache = useQuery(["subscriptions"], getSubscriptions, {
@@ -39,7 +39,7 @@ const useSubscriptions = () => {
 
   const getSubscriptionTypes = async () => {
     const response = await SubscriptionsService.getTypes();
-    return response.data.data;
+    return response.data;
   };
 
   const typesCache = useQuery(["subscription_types"], getSubscriptionTypes, {
@@ -73,14 +73,23 @@ const useSubscriptions = () => {
     },
   });
 
-  const deleteSubscription = useMutation(SubscriptionsService.deleteSubscription(), {
-    onError: (error) => toast(error, "error"),
-    onSuccess: (response) => {
-      subscriptionsCache.refetch();
-    },
-  });
+  const deleteSubscription = useMutation(
+    SubscriptionsService.deleteSubscription(),
+    {
+      onError: (error) => toast(error, "error"),
+      onSuccess: (response) => {
+        subscriptionsCache.refetch();
+      },
+    }
+  );
 
-  return { createSubscription, subscriptionsCache, typesCache, changeNote, deleteSubscription };
+  return {
+    createSubscription,
+    subscriptionsCache,
+    typesCache,
+    changeNote,
+    deleteSubscription,
+  };
 };
 
 export default useSubscriptions;
diff --git a/frontend/src/core/services/subscriptions.service.js b/frontend/src/core/services/subscriptions.service.js
index 59c7a501..62950c63 100644
--- a/frontend/src/core/services/subscriptions.service.js
+++ b/frontend/src/core/services/subscriptions.service.js
@@ -1,7 +1,7 @@
 import { http } from "../utils";
 // import axios from "axios";
 
-const API = process.env.NEXT_PUBLIC_SIMIOTICS_AUTH_URL;
+const API = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL;
 
 export const getStream = ({ searchTerm, limit, offset, isContent }) =>
   http({
@@ -18,13 +18,13 @@ export const getStream = ({ searchTerm, limit, offset, isContent }) =>
 export const getTypes = () =>
   http({
     method: "GET",
-    url: `${API}/subscription_types/`,
+    url: `${API}/subscriptions/types`,
   });
 
 export const getSubscriptions = () =>
   http({
     method: "GET",
-    url: `${API}/subscriptions/`,
+    url: `${API}/subscriptions`,
   });
 
 export const create = ({ address, note, blockchain }) => {
@@ -47,10 +47,11 @@ export const deleteJournal = (id) => () =>
 
 export const createSubscription =
   () =>
-  ({ address, type, label }) => {
+  ({ address, type, label, color }) => {
     const data = new FormData();
     data.append("address", address);
-    data.append("subscription_type", type);
+    data.append("subscription_type_id", type);
+    data.append("color", color);
     data.append("label", label);
     return http({
       method: "POST",
@@ -75,7 +76,7 @@ export const modifySubscription =
 export const deleteSubscription = () => (id) => {
   return http({
     method: "DELETE",
-    url: `${API}/subscription/${id}`,
+    url: `${API}/subscriptions/${id}`,
   });
 };
 
diff --git a/frontend/src/core/utils/mockupRequests.js b/frontend/src/core/utils/mockupRequests.js
index 58db4296..fcb6cd49 100644
--- a/frontend/src/core/utils/mockupRequests.js
+++ b/frontend/src/core/utils/mockupRequests.js
@@ -234,28 +234,5 @@ const enableMockupRequests = (axiosInstance) => {
       offset: 0,
     },
   });
-
-  mock.onGet(`${MOCK_API}/subscriptions/`).reply(200, {
-    data: {
-      is_free_subscription_availible: true,
-      subscriptions: MockSubscriptions,
-    },
-  });
-
-  mock.onPost(`${MOCK_API}/subscriptions/`).reply((config) => {
-    const params = config.data; // FormData of {name: ..., file: ...}
-    const id = params.get("id");
-    const label = params.get("label");
-    const address = params.get("address");
-    const subscription_type = params.get("subscription_type");
-
-    return new Promise(function (resolve) {
-      setTimeout(function () {
-        const data = { id, label, address, subscription_type };
-        MockSubscriptions.push({ ...data });
-        resolve([200, { message: "OK", result: true }]);
-      }, 1000);
-    });
-  });
 };
 export default enableMockupRequests;