diff --git a/dashboard/src/components/EnvComponents/Roles.tsx b/dashboard/src/components/EnvComponents/Roles.tsx
index ac610ab..dcafff8 100644
--- a/dashboard/src/components/EnvComponents/Roles.tsx
+++ b/dashboard/src/components/EnvComponents/Roles.tsx
@@ -1,67 +1,68 @@
-import React from "react";
-import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
-import { ArrayInputType } from "../../constants";
-import InputField from "../InputField";
+import React from 'react';
+import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
+import { ArrayInputType } from '../../constants';
+import InputField from '../InputField';
 
 const Roles = ({ variables, setVariables }: any) => {
-  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
-  return (
-    <div>
-      {" "}
-      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
-        Roles
-      </Text>
-      <Stack spacing={6} padding="2% 0%">
-        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
-          <Flex w="30%" justifyContent="start" alignItems="center">
-            <Text fontSize="sm">Roles:</Text>
-          </Flex>
-          <Center
-            w={isNotSmallerScreen ? "70%" : "100%"}
-            mt={isNotSmallerScreen ? "0" : "2"}
-            overflow="hidden"
-          >
-            <InputField
-              borderRadius={7}
-              variables={variables}
-              setVariables={setVariables}
-              inputType={ArrayInputType.ROLES}
-            />
-          </Center>
-        </Flex>
-        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
-          <Flex w="30%" justifyContent="start" alignItems="center">
-            <Text fontSize="sm">Default Roles:</Text>
-          </Flex>
-          <Center
-            w={isNotSmallerScreen ? "70%" : "100%"}
-            mt={isNotSmallerScreen ? "0" : "2"}
-          >
-            <InputField
-              variables={variables}
-              setVariables={setVariables}
-              inputType={ArrayInputType.DEFAULT_ROLES}
-            />
-          </Center>
-        </Flex>
-        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
-          <Flex w="30%" justifyContent="start" alignItems="center">
-            <Text fontSize="sm">Protected Roles:</Text>
-          </Flex>
-          <Center
-            w={isNotSmallerScreen ? "70%" : "100%"}
-            mt={isNotSmallerScreen ? "0" : "2"}
-          >
-            <InputField
-              variables={variables}
-              setVariables={setVariables}
-              inputType={ArrayInputType.PROTECTED_ROLES}
-            />
-          </Center>
-        </Flex>
-      </Stack>
-    </div>
-  );
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+
+	return (
+		<div>
+			{' '}
+			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+				Roles
+			</Text>
+			<Stack spacing={6} padding="2% 0%">
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex w="30%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Roles:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
+						overflow="hidden"
+					>
+						<InputField
+							borderRadius={7}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={ArrayInputType.ROLES}
+						/>
+					</Center>
+				</Flex>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex w="30%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Default Roles:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
+					>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={ArrayInputType.DEFAULT_ROLES}
+						/>
+					</Center>
+				</Flex>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex w="30%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Protected Roles:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '2'}
+					>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={ArrayInputType.PROTECTED_ROLES}
+						/>
+					</Center>
+				</Flex>
+			</Stack>
+		</div>
+	);
 };
 
-export default Roles;
\ No newline at end of file
+export default Roles;
diff --git a/dashboard/src/graphql/queries/index.ts b/dashboard/src/graphql/queries/index.ts
index 346c3cb..221ed53 100644
--- a/dashboard/src/graphql/queries/index.ts
+++ b/dashboard/src/graphql/queries/index.ts
@@ -30,6 +30,7 @@ export const EnvVariablesQuery = `
       LINKEDIN_CLIENT_SECRET,
       DEFAULT_ROLES,
       PROTECTED_ROLES,
+      ROLES,
       JWT_TYPE,
       JWT_SECRET,
       JWT_ROLE_CLAIM,
diff --git a/server/resolvers/env.go b/server/resolvers/env.go
index 15c2653..a8b9a95 100644
--- a/server/resolvers/env.go
+++ b/server/resolvers/env.go
@@ -147,7 +147,14 @@ func EnvResolver(ctx context.Context) (*model.Env, error) {
 	res.AllowedOrigins = strings.Split(store[constants.EnvKeyAllowedOrigins].(string), ",")
 	res.Roles = strings.Split(store[constants.EnvKeyRoles].(string), ",")
 	res.DefaultRoles = strings.Split(store[constants.EnvKeyDefaultRoles].(string), ",")
-	res.ProtectedRoles = strings.Split(store[constants.EnvKeyProtectedRoles].(string), ",")
+	// since protected role is optional default split gives array with empty string
+	protectedRoles := strings.Split(store[constants.EnvKeyProtectedRoles].(string), ",")
+	res.ProtectedRoles = []string{}
+	for _, role := range protectedRoles {
+		if strings.Trim(role, " ") != "" {
+			res.ProtectedRoles = append(res.ProtectedRoles, strings.Trim(role, " "))
+		}
+	}
 
 	// bool vars
 	res.DisableEmailVerification = store[constants.EnvKeyDisableEmailVerification].(bool)