diff --git a/frontend/app/components/Client/Integrations/Integrations.js b/frontend/app/components/Client/Integrations/Integrations.js
index 2f4ed073f..b4a421980 100644
--- a/frontend/app/components/Client/Integrations/Integrations.js
+++ b/frontend/app/components/Client/Integrations/Integrations.js
@@ -1,36 +1,36 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import withPageTitle from 'HOCs/withPageTitle';
-import { Loader, IconButton, Button, Icon, SlideModal } from 'UI';
-import { fetchList as fetchListSlack } from 'Duck/integrations/slack';
-import { remove as removeIntegrationConfig } from 'Duck/integrations/actions';
-import { fetchList, init } from 'Duck/integrations/actions';
-import cn from 'classnames';
+import React from "react";
+import { connect } from "react-redux";
+import withPageTitle from "HOCs/withPageTitle";
+import { Loader, IconButton, SlideModal } from "UI";
+import { fetchList as fetchListSlack } from "Duck/integrations/slack";
+import { remove as removeIntegrationConfig } from "Duck/integrations/actions";
+import { fetchList, init } from "Duck/integrations/actions";
+import cn from "classnames";
 
-import IntegrationItem from './IntegrationItem';
-import SentryForm from './SentryForm';
-import GithubForm from './GithubForm';
-import SlackForm from './SlackForm';
-import DatadogForm from './DatadogForm';
-import StackdriverForm from './StackdriverForm';
-import RollbarForm from './RollbarForm';
-import NewrelicForm from './NewrelicForm';
-import BugsnagForm from './BugsnagForm';
-import CloudwatchForm from './CloudwatchForm';
-import ElasticsearchForm from './ElasticsearchForm';
-import SumoLogicForm from './SumoLogicForm';
-import JiraForm from './JiraForm';
-import styles from './integrations.module.css';
-import ReduxDoc from './ReduxDoc';
-import VueDoc from './VueDoc';
-import GraphQLDoc from './GraphQLDoc';
-import NgRxDoc from './NgRxDoc/NgRxDoc';
-import SlackAddForm from './SlackAddForm';
-import FetchDoc from './FetchDoc';
-import MobxDoc from './MobxDoc';
-import ProfilerDoc from './ProfilerDoc';
-import AssistDoc from './AssistDoc';
-import AxiosDoc from './AxiosDoc/AxiosDoc';
+import IntegrationItem from "./IntegrationItem";
+import SentryForm from "./SentryForm";
+import GithubForm from "./GithubForm";
+import SlackForm from "./SlackForm";
+import DatadogForm from "./DatadogForm";
+import StackdriverForm from "./StackdriverForm";
+import RollbarForm from "./RollbarForm";
+import NewrelicForm from "./NewrelicForm";
+import BugsnagForm from "./BugsnagForm";
+import CloudwatchForm from "./CloudwatchForm";
+import ElasticsearchForm from "./ElasticsearchForm";
+import SumoLogicForm from "./SumoLogicForm";
+import JiraForm from "./JiraForm";
+import styles from "./integrations.module.css";
+import ReduxDoc from "./ReduxDoc";
+import VueDoc from "./VueDoc";
+import GraphQLDoc from "./GraphQLDoc";
+import NgRxDoc from "./NgRxDoc/NgRxDoc";
+import SlackAddForm from "./SlackAddForm";
+import FetchDoc from "./FetchDoc";
+import MobxDoc from "./MobxDoc";
+import ProfilerDoc from "./ProfilerDoc";
+import AssistDoc from "./AssistDoc";
+import AxiosDoc from "./AxiosDoc/AxiosDoc";
 
 const NONE = -1;
 const SENTRY = 0;
@@ -56,468 +56,578 @@ const ASSIST = 19;
 const AXIOS = 20;
 
 const TITLE = {
-	[ SENTRY ]: 'Sentry',
-	[ SLACK ]: 'Slack',
-	[ DATADOG ]: 'Datadog',
-	[ STACKDRIVER ]: 'Stackdriver',
-	[ ROLLBAR ]: 'Rollbar',
-	[ NEWRELIC ]: 'New Relic',
-	[ BUGSNAG ]: 'Bugsnag',
-	[ CLOUDWATCH ]: 'CloudWatch',
-	[ ELASTICSEARCH ]: 'Elastic Search',
-	[ SUMOLOGIC ]: 'Sumo Logic',
-	[ JIRA ]: 'Jira',
-	[ GITHUB ]: 'Github',
-	[ REDUX ] : 'Redux',
-	[ VUE ] : 'VueX',
-	[ GRAPHQL ] : 'GraphQL',
-	[ NGRX ] : 'NgRx',
-	[ FETCH ] : 'Fetch',
-	[ MOBX ] : 'MobX',
-	[ PROFILER ] : 'Profiler',
-	[ ASSIST ] : 'Assist',
-	[ AXIOS ] : 'Axios',
-}
+    [SENTRY]: "Sentry",
+    [SLACK]: "Slack",
+    [DATADOG]: "Datadog",
+    [STACKDRIVER]: "Stackdriver",
+    [ROLLBAR]: "Rollbar",
+    [NEWRELIC]: "New Relic",
+    [BUGSNAG]: "Bugsnag",
+    [CLOUDWATCH]: "CloudWatch",
+    [ELASTICSEARCH]: "Elastic Search",
+    [SUMOLOGIC]: "Sumo Logic",
+    [JIRA]: "Jira",
+    [GITHUB]: "Github",
+    [REDUX]: "Redux",
+    [VUE]: "VueX",
+    [GRAPHQL]: "GraphQL",
+    [NGRX]: "NgRx",
+    [FETCH]: "Fetch",
+    [MOBX]: "MobX",
+    [PROFILER]: "Profiler",
+    [ASSIST]: "Assist",
+    [AXIOS]: "Axios",
+};
 
-const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER, ASSIST]
+const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER, ASSIST];
 
-const integrations = [ 'sentry', 'datadog', 'stackdriver', 'rollbar', 'newrelic', 'bugsnag', 'cloudwatch', 'elasticsearch', 'sumologic', 'issues' ];
+const integrations = [
+    "sentry",
+    "datadog",
+    "stackdriver",
+    "rollbar",
+    "newrelic",
+    "bugsnag",
+    "cloudwatch",
+    "elasticsearch",
+    "sumologic",
+    "issues",
+];
 
-@connect(state => {
-	const props = {};
-	integrations.forEach(name => {
-		props[ `${ name }Integrated`] = name === 'issues' ? 
-			!!(state.getIn([ name, 'list' ]).first() && state.getIn([ name, 'list' ]).first().token) :
-			state.getIn([ name, 'list' ]).size > 0;
-		props.loading = props.loading || state.getIn([ name, 'fetchRequest', 'loading']);
-	})
-  const site = state.getIn([ 'site', 'instance' ]);
-	return {
-		...props,
-		issues: state.getIn([ 'issues', 'list']).first() || {},
-		slackChannelListExists: state.getIn([ 'slack', 'list' ]).size > 0,
-		tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
-		jwt: state.get('jwt'),
-    projectKey: site ? site.projectKey : ''
-	};
-}, {
-	fetchList,
-	init,
-	fetchListSlack,
-	removeIntegrationConfig
-})
-@withPageTitle('Integrations - OpenReplay Preferences')
-export default class Integrations extends React.PureComponent {
-	state = { 
-    modalContent: NONE,
-		showDetailContent: false,
-	};
-	
-	componentWillMount() {
-		integrations.forEach(name => 
-			this.props.fetchList(name)
-		);
-		this.props.fetchListSlack();
-  }
-
-	onClickIntegrationItem = (e, url) => {
-    e.preventDefault();
-    window.open(url);
-	}
-
-	closeModal = () => this.setState({ modalContent: NONE, showDetailContent: false });
-
-	onOauthClick = (source) => {
-		if (source === GITHUB) {
-			const githubUrl = `https://auth.openreplay.com/oauth/login?provider=github&back_url=${document.location.href}`;
-			const options = {
-				method: 'GET',
-				credentials: 'include',
-				headers: new Headers({
-					'Authorization': 'Bearer ' + this.props.jwt.toString()
-				})
-			};
-			fetch(githubUrl, options).then((resp) => resp.text().then((txt) => window.open(txt, '_self')))
-		}
-	}
-
-	renderDetailContent() {
-		switch (this.state.modalContent) {
-      case SLACK:
-        return <SlackAddForm  onClose={ () => this.setState({ showDetailContent: false }) } />;
-		}
-	}
-
-	renderModalContent() {
-    const { projectKey } = this.props;
-
-    switch (this.state.modalContent) {
-      case SENTRY:
-        return <SentryForm onClose={ this.closeModal } />;
-			case GITHUB:
-				return <GithubForm onClose={ this.closeModal } />;
-			case SLACK:
-				return <SlackForm
-					onClose={ this.closeModal }
-					onEdit={() => this.setState({ showDetailContent: true })}
-				/>
-      case DATADOG:
-      	return <DatadogForm onClose={ this.closeModal } />;
-      case STACKDRIVER:
-      	return <StackdriverForm onClose={ this.closeModal } />;
-      case ROLLBAR: 
-      	return <RollbarForm onClose={ this.closeModal } />;
-      case NEWRELIC:
-      	return <NewrelicForm onClose={ this.closeModal } />;
-      case BUGSNAG: 
-      	return <BugsnagForm onClose={ this.closeModal } />;
-      case CLOUDWATCH:
-      	return <CloudwatchForm onClose={ this.closeModal } />;
-      case ELASTICSEARCH:
-				return <ElasticsearchForm onClose={ this.closeModal } />;
-			case SUMOLOGIC:
-				return <SumoLogicForm onClose={ this.closeModal } />;
-			case JIRA:
-				return <JiraForm onClose={ this.closeModal } />;
-			case REDUX:
-				return <ReduxDoc onClose={ this.closeModal } projectKey={projectKey} />
-			case VUE:
-				return <VueDoc onClose={ this.closeModal } projectKey={projectKey} />
-			case GRAPHQL:
-				return <GraphQLDoc onClose={ this.closeModal } projectKey={projectKey} />
-			case NGRX:
-				return <NgRxDoc onClose={ this.closeModal } projectKey={projectKey} />
-			case FETCH:
-				return <FetchDoc onClose={ this.closeModal } projectKey={projectKey} />
-			case MOBX:
-				return <MobxDoc onClose={ this.closeModal } projectKey={projectKey} />
-			case PROFILER:
-				return <ProfilerDoc onClose={ this.closeModal } projectKey={projectKey} />
-      case ASSIST:
-        return <AssistDoc onClose={ this.closeModal } projectKey={projectKey} />
-      case AXIOS:
-        return <AxiosDoc onClose={ this.closeModal } projectKey={projectKey} />
-      default:
-        return null;
+@connect(
+    (state) => {
+        const props = {};
+        integrations.forEach((name) => {
+            props[`${name}Integrated`] =
+                name === "issues"
+                    ? !!(
+                          state.getIn([name, "list"]).first() &&
+                          state.getIn([name, "list"]).first().token
+                      )
+                    : state.getIn([name, "list"]).size > 0;
+            props.loading =
+                props.loading || state.getIn([name, "fetchRequest", "loading"]);
+        });
+        const site = state.getIn(["site", "instance"]);
+        return {
+            ...props,
+            issues: state.getIn(["issues", "list"]).first() || {},
+            slackChannelListExists: state.getIn(["slack", "list"]).size > 0,
+            tenantId: state.getIn(["user", "account", "tenantId"]),
+            jwt: state.get("jwt"),
+            projectKey: site ? site.projectKey : "",
+        };
+    },
+    {
+        fetchList,
+        init,
+        fetchListSlack,
+        removeIntegrationConfig,
     }
-	}
+)
+@withPageTitle("Integrations - OpenReplay Preferences")
+export default class Integrations extends React.PureComponent {
+    state = {
+        modalContent: NONE,
+        showDetailContent: false,
+    };
 
-	deleteHandler = name => {
-    this.props.removeIntegrationConfig(name, null).then(function() {
-			this.props.fetchList(name)
-		}.bind(this));
-	}
-	
-	showIntegrationConfig = (type) => {    
-    this.setState({ modalContent: type });
-  }
+    componentWillMount() {
+        integrations.forEach((name) => this.props.fetchList(name));
+        this.props.fetchListSlack();
+    }
 
-	render() {
-		const { 
-			loading, 
-			sentryIntegrated, 
-			stackdriverIntegrated,
-			datadogIntegrated,
-			rollbarIntegrated,
-			newrelicIntegrated,
-			bugsnagIntegrated,
-			cloudwatchIntegrated,
-			elasticsearchIntegrated,
-			sumologicIntegrated,
-			hideHeader=false,
-			plugins=false,
-			jiraIntegrated,
-			issuesIntegrated,
-			tenantId,
-			slackChannelListExists,
-			issues,
-		} = this.props;
-		const { modalContent, showDetailContent } = this.state;
-		return (
-			<div className={ styles.wrapper }>
-				<SlideModal
-          title={ 
-						<div className="flex items-center">
-							<div className="mr-4">{TITLE[ modalContent ]}</div>
-							{ modalContent === SLACK && (
-								<IconButton
-									circle
-									icon="plus"
-									outline
-									small="small"
-									onClick={() => this.setState({ showDetailContent: true })}
-								/>
-							)}
-						</div>
-					}
-          isDisplayed={ modalContent !== NONE }
-          onClose={ this.closeModal }
-					size={ DOCS.includes(this.state.modalContent)  ? 'middle' : 'small' }
-					content={ this.renderModalContent() }
-					detailContent={ showDetailContent && this.renderDetailContent() }
-				/>
+    onClickIntegrationItem = (e, url) => {
+        e.preventDefault();
+        window.open(url);
+    };
 
-				{!hideHeader && (
-					<div className={ styles.tabHeader }>
-						<h3 className={ cn(styles.tabTitle, "text-2xl") }>{ 'Integrations' }</h3>
-						<p className={ styles.subText }>Power your workflow with your favourite tools.</p>
-						<div className={ styles.divider } />
-					</div>
-				)}
+    closeModal = () =>
+        this.setState({ modalContent: NONE, showDetailContent: false });
 
-				{plugins && (
-					<div className="" >
-						<div className="mb-4">Use plugins to better debug your application's store, monitor queries and track performance issues.</div>
-						<div className="flex flex-wrap">
-							<IntegrationItem
-								title="Redux"
-								icon="integrations/redux"
-								url={ null }
-								dockLink="https://docs.openreplay.com/integrations/sentry"
-								onClick={ () => this.showIntegrationConfig(REDUX) }
-								// integrated={ sentryIntegrated }
-							/>
-							<IntegrationItem
-								title="VueX"
-								icon="integrations/vuejs"
-								url={ null }
-								dockLink="https://docs.openreplay.com/integrations/sentry"
-								onClick={ () => this.showIntegrationConfig(VUE) }
-								// integrated={ sentryIntegrated }
-							/>
-							<IntegrationItem
-								title="GraphQL"
-								icon="integrations/graphql"
-								url={ null }
-								dockLink="https://docs.openreplay.com/integrations/sentry"
-								onClick={ () => this.showIntegrationConfig(GRAPHQL) }
-								// integrated={ sentryIntegrated }
-							/>
-							<IntegrationItem
-								title="NgRx"
-								icon="integrations/ngrx"
-								url={ null }
-								dockLink="https://docs.openreplay.com/integrations/sentry"
-								onClick={ () => this.showIntegrationConfig(NGRX) }
-								// integrated={ sentryIntegrated }
-							/>
-              <IntegrationItem
-								title="MobX"
-								icon="integrations/mobx"
-								url={ null }
-								dockLink="https://docs.openreplay.com/integrations/sentry"
-								onClick={ () => this.showIntegrationConfig(MOBX) }
-								// integrated={ sentryIntegrated }
-							/>
-							<IntegrationItem
-								title="Fetch"
-								icon="integrations/openreplay"
-								url={ null }
-								dockLink="https://docs.openreplay.com/integrations/sentry"
-								onClick={ () => this.showIntegrationConfig(FETCH) }
-								// integrated={ sentryIntegrated }
-							/>
-							<IntegrationItem
-								title="Profiler"
-								icon="integrations/openreplay"
-								url={ null }
-								dockLink="https://docs.openreplay.com/integrations/sentry"
-								onClick={ () => this.showIntegrationConfig(PROFILER) }
-								// integrated={ sentryIntegrated }
-							/>
-              <IntegrationItem
-								title="Axios"
-								icon="integrations/openreplay"
-								url={ null }
-								dockLink="https://docs.openreplay.com/plugins/axios"
-								onClick={ () => this.showIntegrationConfig(AXIOS) }
-								// integrated={ sentryIntegrated }
-							/>
-              <IntegrationItem
-								title="Assist"
-								icon="integrations/assist"
-								url={ null }
-								dockLink="https://docs.openreplay.com/installation/assist"
-								onClick={ () => this.showIntegrationConfig(ASSIST) }
-								// integrated={ sentryIntegrated }
-							/>
-						</div>
-					</div>
-				)}
+    onOauthClick = (source) => {
+        if (source === GITHUB) {
+            const githubUrl = `https://auth.openreplay.com/oauth/login?provider=github&back_url=${document.location.href}`;
+            const options = {
+                method: "GET",
+                credentials: "include",
+                headers: new Headers({
+                    Authorization: "Bearer " + this.props.jwt.toString(),
+                }),
+            };
+            fetch(githubUrl, options).then((resp) =>
+                resp.text().then((txt) => window.open(txt, "_self"))
+            );
+        }
+    };
 
-				{!plugins && (
-					<Loader loading={ loading }>				
-						<div className={ styles.content }>
-							<div className="">
-								<div className="mb-4">How are you monitoring errors and crash reporting?</div>
-								<div className="flex flex-wrap">
-									{
-										(!issues.token || issues.provider !== 'github') &&
-											<IntegrationItem
-												title="Jira"
-												description="Jira is a proprietary issue tracking product developed by Atlassian that allows bug tracking and agile project management."
-												icon="integrations/jira"
-												url={ null }
-												dockLink="https://docs.openreplay.com/integrations/jira"
-												onClick={ () => this.showIntegrationConfig(JIRA) }
-												integrated={ issuesIntegrated }
-											/>
-									}
-									{ (!issues.token || issues.provider !== 'jira') &&
-										<IntegrationItem
-												title="Github"
-												description="Easily share issues on GitHub directly from any session replay."
-												icon="integrations/github"
-												url={ `https://auth.openreplay.com/oauth/login?provider=github&back_url=${window.env.ORIGIN || window.location.origin}` }
-												onClick={ () => this.showIntegrationConfig(GITHUB) }
-												integrated={ issuesIntegrated }
-												deleteHandler={issuesIntegrated ? () => this.deleteHandler('issues') : null}
-											/>
-									}
-									{/* <IntegrationItem
-										title="Github"
-										description="Error tracking that helps developers monitor and fix crashes in real time."
-										icon="integrations/github"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/sentry"
-										onClick={ () => this.showIntegrationConfig(GITHUB) }
-										integrated={ sentryIntegrated }
-									/>
-									<IntegrationItem
-										title="Jira"
-										description="Error tracking that helps developers monitor and fix crashes in real time."
-										icon="integrations/jira"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/sentry"
-										onClick={ () => this.showIntegrationConfig(JIRA) }
-										integrated={ sentryIntegrated }
-									/> */}
-									<IntegrationItem
-										title="Slack"
-										description="Error tracking that helps developers monitor and fix crashes in real time."
-										icon="integrations/slack"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/sentry"
-										onClick={ () => this.showIntegrationConfig(SLACK) }
-										integrated={ sentryIntegrated }
-									/>
-									<IntegrationItem
-										title="Sentry"
-										description="Error tracking that helps developers monitor and fix crashes in real time."
-										icon="integrations/sentry"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/sentry"
-										onClick={ () => this.showIntegrationConfig(SENTRY) }
-										integrated={ sentryIntegrated }
-									/>
+    renderDetailContent() {
+        switch (this.state.modalContent) {
+            case SLACK:
+                return (
+                    <SlackAddForm
+                        onClose={() =>
+                            this.setState({ showDetailContent: false })
+                        }
+                    />
+                );
+        }
+    }
 
-									<IntegrationItem
-										title="Bugsnag"
-										description="Bugsnag is an error-monitoring tool that allows your developers to identify, prioritize and replicate bugs in a time-efficient and enjoyable manner."
-										icon="integrations/bugsnag"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/bugsnag"
-										onClick={ () => this.showIntegrationConfig(BUGSNAG) }
-										integrated={ bugsnagIntegrated }
-									/>
+    renderModalContent() {
+        const { projectKey } = this.props;
 
-									<IntegrationItem
-										title="Rollbar"
-										description="Rollbar provides real-time error tracking & debugging tools for developers."
-										icon="integrations/rollbar"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/rollbar"
-										onClick={ () => this.showIntegrationConfig(ROLLBAR) }
-										integrated={ rollbarIntegrated }
-									/>
+        switch (this.state.modalContent) {
+            case SENTRY:
+                return <SentryForm onClose={this.closeModal} />;
+            case GITHUB:
+                return <GithubForm onClose={this.closeModal} />;
+            case SLACK:
+                return (
+                    <SlackForm
+                        onClose={this.closeModal}
+                        onEdit={() =>
+                            this.setState({ showDetailContent: true })
+                        }
+                    />
+                );
+            case DATADOG:
+                return <DatadogForm onClose={this.closeModal} />;
+            case STACKDRIVER:
+                return <StackdriverForm onClose={this.closeModal} />;
+            case ROLLBAR:
+                return <RollbarForm onClose={this.closeModal} />;
+            case NEWRELIC:
+                return <NewrelicForm onClose={this.closeModal} />;
+            case BUGSNAG:
+                return <BugsnagForm onClose={this.closeModal} />;
+            case CLOUDWATCH:
+                return <CloudwatchForm onClose={this.closeModal} />;
+            case ELASTICSEARCH:
+                return <ElasticsearchForm onClose={this.closeModal} />;
+            case SUMOLOGIC:
+                return <SumoLogicForm onClose={this.closeModal} />;
+            case JIRA:
+                return <JiraForm onClose={this.closeModal} />;
+            case REDUX:
+                return (
+                    <ReduxDoc
+                        onClose={this.closeModal}
+                        projectKey={projectKey}
+                    />
+                );
+            case VUE:
+                return (
+                    <VueDoc onClose={this.closeModal} projectKey={projectKey} />
+                );
+            case GRAPHQL:
+                return (
+                    <GraphQLDoc
+                        onClose={this.closeModal}
+                        projectKey={projectKey}
+                    />
+                );
+            case NGRX:
+                return (
+                    <NgRxDoc
+                        onClose={this.closeModal}
+                        projectKey={projectKey}
+                    />
+                );
+            case FETCH:
+                return (
+                    <FetchDoc
+                        onClose={this.closeModal}
+                        projectKey={projectKey}
+                    />
+                );
+            case MOBX:
+                return (
+                    <MobxDoc
+                        onClose={this.closeModal}
+                        projectKey={projectKey}
+                    />
+                );
+            case PROFILER:
+                return (
+                    <ProfilerDoc
+                        onClose={this.closeModal}
+                        projectKey={projectKey}
+                    />
+                );
+            case ASSIST:
+                return (
+                    <AssistDoc
+                        onClose={this.closeModal}
+                        projectKey={projectKey}
+                    />
+                );
+            case AXIOS:
+                return (
+                    <AxiosDoc
+                        onClose={this.closeModal}
+                        projectKey={projectKey}
+                    />
+                );
+            default:
+                return null;
+        }
+    }
 
-									<IntegrationItem
-										title="Elastic Search"
-										description="Elasticsearch is a distributed, RESTful search and analytics engine capable of addressing a growing number of use cases."
-										icon="integrations/elasticsearch"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/elastic"
-										onClick={ () => this.showIntegrationConfig(ELASTICSEARCH) }
-										integrated={ elasticsearchIntegrated }
-									/>
+    deleteHandler = (name) => {
+        this.props.removeIntegrationConfig(name, null).then(
+            function () {
+                this.props.fetchList(name);
+            }.bind(this)
+        );
+    };
 
-									<IntegrationItem
-										title="Datadog"
-										description="Monitoring service for cloud-scale applications, providing monitoring of servers, databases, tools, and services."
-										icon="integrations/datadog"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/datadog"
-										onClick={ () => this.showIntegrationConfig(DATADOG) }
-										integrated={ datadogIntegrated }
-									/>
-									<IntegrationItem
-										title="Sumo Logic"
-										description="Sumo Logic to collaborate, develop, operate, and secure their applications at cloud scale."
-										icon="integrations/sumologic"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/sumo"
-										onClick={ () => this.showIntegrationConfig(SUMOLOGIC) }
-										integrated={ sumologicIntegrated }
-									/>
-									<IntegrationItem
-										title="Stackdriver"
-										description="Monitoring and management for services, containers, applications, and infrastructure."
-										icon="integrations/stackdriver"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/stackdriver"
-										onClick={ () => this.showIntegrationConfig(STACKDRIVER) }
-										integrated={ stackdriverIntegrated }
-									/>
+    showIntegrationConfig = (type) => {
+        this.setState({ modalContent: type });
+    };
 
-									<IntegrationItem
-										title="CloudWatch"
-										description="Amazon CloudWatch is a monitoring and management service that provides data and actionable insights for AWS, hybrid, and on-premises applications and infrastructure resources."
-										icon="integrations/cloudwatch"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/cloudwatch"
-										onClick={ () => this.showIntegrationConfig(CLOUDWATCH) }
-										integrated={ cloudwatchIntegrated }
-									/>
+    render() {
+        const {
+            loading,
+            sentryIntegrated,
+            stackdriverIntegrated,
+            datadogIntegrated,
+            rollbarIntegrated,
+            newrelicIntegrated,
+            bugsnagIntegrated,
+            cloudwatchIntegrated,
+            elasticsearchIntegrated,
+            sumologicIntegrated,
+            hideHeader = false,
+            plugins = false,
+            jiraIntegrated,
+            issuesIntegrated,
+            tenantId,
+            slackChannelListExists,
+            issues,
+        } = this.props;
+        const { modalContent, showDetailContent } = this.state;
+        return (
+            <div className={styles.wrapper}>
+                <SlideModal
+                    title={
+                        <div className="flex items-center">
+                            <div className="mr-4">{TITLE[modalContent]}</div>
+                            {modalContent === SLACK && (
+                                <IconButton
+                                    circle
+                                    icon="plus"
+                                    outline
+                                    small="small"
+                                    onClick={() =>
+                                        this.setState({
+                                            showDetailContent: true,
+                                        })
+                                    }
+                                />
+                            )}
+                        </div>
+                    }
+                    isDisplayed={modalContent !== NONE}
+                    onClose={this.closeModal}
+                    size={
+                        DOCS.includes(this.state.modalContent)
+                            ? "middle"
+                            : "small"
+                    }
+                    content={this.renderModalContent()}
+                    detailContent={
+                        showDetailContent && this.renderDetailContent()
+                    }
+                />
 
-									<IntegrationItem
-										title="New Relic"
-										description="New Relic's application monitoring gives you detailed performance metrics for every aspect of your environment."
-										icon="integrations/newrelic"
-										url={ null }
-										dockLink="https://docs.openreplay.com/integrations/newrelic"
-										onClick={ () => this.showIntegrationConfig(NEWRELIC) }
-										integrated={ newrelicIntegrated }
-									/>
-								</div>
-							</div>
-							
-							{/* <div className="mt-6">
-								<div className="mb-4">How are you logging backend errors?</div>
-								<div className="flex">
-									
-								</div>
-							</div> */}
-							{/* 
-							<IntegrationItem
-								title="Slack"
-								description="Send OpenReplay notifications to Slack."
-								icon="integrations/slack"
-								url={ `https://slack.com/oauth/authorize?client_id=252578014882.345694377157&scope=incoming-webhook&state=${ tenantId }` }
-								onClick={ this.onClickIntegrationItem }
-								integrated={ slackChannelListExists }
-							/>
-							<IntegrationItem
-								title="Segment"
-								description="Control your customer data with custom segment variables."
-								icon="integrations/segment"
-								url="https://docs.openreplay.com/integrations/segment"
-								dockLink="https://docs.openreplay.com/integrations/segment"
-								onClick={ this.onClickIntegrationItem }
-							/> */}
-						</div>
-					</Loader>
-				)}
-			</div>
-	  );
-	}
-}
\ No newline at end of file
+                {!hideHeader && (
+                    <div className={styles.tabHeader}>
+                        <h3 className={cn(styles.tabTitle, "text-2xl")}>
+                            {"Integrations"}
+                        </h3>
+                        <p className={styles.subText}>
+                            Power your workflow with your favourite tools.
+                        </p>
+                        <div className={styles.divider} />
+                    </div>
+                )}
+
+                {plugins && (
+                    <div className="">
+                        <div className="mb-4">
+                            Use plugins to better debug your application's
+                            store, monitor queries and track performance issues.
+                        </div>
+                        <div className="flex flex-wrap">
+                            <IntegrationItem
+                                title="Redux"
+                                icon="integrations/redux"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/integrations/sentry"
+                                onClick={() =>
+                                    this.showIntegrationConfig(REDUX)
+                                }
+                                // integrated={ sentryIntegrated }
+                            />
+                            <IntegrationItem
+                                title="VueX"
+                                icon="integrations/vuejs"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/integrations/sentry"
+                                onClick={() => this.showIntegrationConfig(VUE)}
+                                // integrated={ sentryIntegrated }
+                            />
+                            <IntegrationItem
+                                title="GraphQL"
+                                icon="integrations/graphql"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/integrations/sentry"
+                                onClick={() =>
+                                    this.showIntegrationConfig(GRAPHQL)
+                                }
+                                // integrated={ sentryIntegrated }
+                            />
+                            <IntegrationItem
+                                title="NgRx"
+                                icon="integrations/ngrx"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/integrations/sentry"
+                                onClick={() => this.showIntegrationConfig(NGRX)}
+                                // integrated={ sentryIntegrated }
+                            />
+                            <IntegrationItem
+                                title="MobX"
+                                icon="integrations/mobx"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/integrations/sentry"
+                                onClick={() => this.showIntegrationConfig(MOBX)}
+                                // integrated={ sentryIntegrated }
+                            />
+                            <IntegrationItem
+                                title="Fetch"
+                                icon="integrations/openreplay"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/integrations/sentry"
+                                onClick={() =>
+                                    this.showIntegrationConfig(FETCH)
+                                }
+                                // integrated={ sentryIntegrated }
+                            />
+                            <IntegrationItem
+                                title="Profiler"
+                                icon="integrations/openreplay"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/integrations/sentry"
+                                onClick={() =>
+                                    this.showIntegrationConfig(PROFILER)
+                                }
+                                // integrated={ sentryIntegrated }
+                            />
+                            <IntegrationItem
+                                title="Axios"
+                                icon="integrations/openreplay"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/plugins/axios"
+                                onClick={() =>
+                                    this.showIntegrationConfig(AXIOS)
+                                }
+                                // integrated={ sentryIntegrated }
+                            />
+                            <IntegrationItem
+                                title="Assist"
+                                icon="integrations/assist"
+                                url={null}
+                                dockLink="https://docs.openreplay.com/installation/assist"
+                                onClick={() =>
+                                    this.showIntegrationConfig(ASSIST)
+                                }
+                                // integrated={ sentryIntegrated }
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {!plugins && (
+                    <Loader loading={loading}>
+                        <div className={styles.content}>
+                            <div className="">
+                                <div className="mb-4">
+                                    How are you monitoring errors and crash
+                                    reporting?
+                                </div>
+                                <div className="flex flex-wrap">
+                                    {(!issues.token ||
+                                        issues.provider !== "github") && (
+                                        <IntegrationItem
+                                            title="Jira"
+                                            description="Jira is a proprietary issue tracking product developed by Atlassian that allows bug tracking and agile project management."
+                                            icon="integrations/jira"
+                                            url={null}
+                                            dockLink="https://docs.openreplay.com/integrations/jira"
+                                            onClick={() =>
+                                                this.showIntegrationConfig(JIRA)
+                                            }
+                                            integrated={issuesIntegrated}
+                                        />
+                                    )}
+                                    {(!issues.token ||
+                                        issues.provider !== "jira") && (
+                                        <IntegrationItem
+                                            title="Github"
+                                            description="Easily share issues on GitHub directly from any session replay."
+                                            icon="integrations/github"
+                                            url={`https://auth.openreplay.com/oauth/login?provider=github&back_url=${
+                                                window.env.ORIGIN ||
+                                                window.location.origin
+                                            }`}
+                                            onClick={() =>
+                                                this.showIntegrationConfig(
+                                                    GITHUB
+                                                )
+                                            }
+                                            integrated={issuesIntegrated}
+                                            deleteHandler={
+                                                issuesIntegrated
+                                                    ? () =>
+                                                          this.deleteHandler(
+                                                              "issues"
+                                                          )
+                                                    : null
+                                            }
+                                        />
+                                    )}
+
+                                    <IntegrationItem
+                                        title="Slack"
+                                        description="Error tracking that helps developers monitor and fix crashes in real time."
+                                        icon="integrations/slack"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/sentry"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(SLACK)
+                                        }
+                                        integrated={sentryIntegrated}
+                                    />
+                                    <IntegrationItem
+                                        title="Sentry"
+                                        description="Error tracking that helps developers monitor and fix crashes in real time."
+                                        icon="integrations/sentry"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/sentry"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(SENTRY)
+                                        }
+                                        integrated={sentryIntegrated}
+                                    />
+
+                                    <IntegrationItem
+                                        title="Bugsnag"
+                                        description="Bugsnag is an error-monitoring tool that allows your developers to identify, prioritize and replicate bugs in a time-efficient and enjoyable manner."
+                                        icon="integrations/bugsnag"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/bugsnag"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(BUGSNAG)
+                                        }
+                                        integrated={bugsnagIntegrated}
+                                    />
+
+                                    <IntegrationItem
+                                        title="Rollbar"
+                                        description="Rollbar provides real-time error tracking & debugging tools for developers."
+                                        icon="integrations/rollbar"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/rollbar"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(ROLLBAR)
+                                        }
+                                        integrated={rollbarIntegrated}
+                                    />
+
+                                    <IntegrationItem
+                                        title="Elastic Search"
+                                        description="Elasticsearch is a distributed, RESTful search and analytics engine capable of addressing a growing number of use cases."
+                                        icon="integrations/elasticsearch"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/elastic"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(
+                                                ELASTICSEARCH
+                                            )
+                                        }
+                                        integrated={elasticsearchIntegrated}
+                                    />
+
+                                    <IntegrationItem
+                                        title="Datadog"
+                                        description="Monitoring service for cloud-scale applications, providing monitoring of servers, databases, tools, and services."
+                                        icon="integrations/datadog"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/datadog"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(DATADOG)
+                                        }
+                                        integrated={datadogIntegrated}
+                                    />
+                                    <IntegrationItem
+                                        title="Sumo Logic"
+                                        description="Sumo Logic to collaborate, develop, operate, and secure their applications at cloud scale."
+                                        icon="integrations/sumologic"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/sumo"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(
+                                                SUMOLOGIC
+                                            )
+                                        }
+                                        integrated={sumologicIntegrated}
+                                    />
+                                    <IntegrationItem
+                                        title="Stackdriver"
+                                        description="Monitoring and management for services, containers, applications, and infrastructure."
+                                        icon="integrations/stackdriver"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/stackdriver"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(
+                                                STACKDRIVER
+                                            )
+                                        }
+                                        integrated={stackdriverIntegrated}
+                                    />
+
+                                    <IntegrationItem
+                                        title="CloudWatch"
+                                        description="Amazon CloudWatch is a monitoring and management service that provides data and actionable insights for AWS, hybrid, and on-premises applications and infrastructure resources."
+                                        icon="integrations/cloudwatch"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/cloudwatch"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(
+                                                CLOUDWATCH
+                                            )
+                                        }
+                                        integrated={cloudwatchIntegrated}
+                                    />
+
+                                    <IntegrationItem
+                                        title="New Relic"
+                                        description="New Relic's application monitoring gives you detailed performance metrics for every aspect of your environment."
+                                        icon="integrations/newrelic"
+                                        url={null}
+                                        dockLink="https://docs.openreplay.com/integrations/newrelic"
+                                        onClick={() =>
+                                            this.showIntegrationConfig(NEWRELIC)
+                                        }
+                                        integrated={newrelicIntegrated}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </Loader>
+                )}
+            </div>
+        );
+    }
+}
diff --git a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
index e854dfce2..f78527204 100644
--- a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
+++ b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
@@ -16,9 +16,10 @@ function SlackChannelList(props) {
     <div className="mt-6">
       <NoContent
         title={
-          <div>
-            <div className="text-base text-left p-5">Integrate Slack with OpenReplay and share insights with the rest of the team, directly from the recording page.</div>
-            <DocLink className="mt-4" label="Integrate Slack" url="https://docs.openreplay.com/integrations/slack" />
+          <div className="p-5 mb-4">
+            <div className="text-base text-left">Integrate Slack with OpenReplay and share insights with the rest of the team, directly from the recording page.</div>
+            {/* <DocLink className="mt-4" label="Integrate Slack" url="https://docs.openreplay.com/integrations/slack" /> */}
+            <DocLink className="mt-4 text-base" label="Integrate Slack" url="https://docs.openreplay.com/integrations/slack" />
           </div>
         }
         size="small"
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
index c5ab0ee85..faf725da6 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
@@ -1,8 +1,7 @@
 import { useObserver } from 'mobx-react-lite';
-import React, { useEffect } from 'react';
+import React from 'react';
 import SessionItem from 'Shared/SessionItem';
 import { Pagination, NoContent } from 'UI';
-import { useModal } from 'App/components/Modal';
 
 interface Props {
     metric: any;
@@ -17,6 +16,7 @@ function CustomMetricTableSessions(props: Props) {
         <NoContent
             show={!metric || !metric.data || !metric.data.sessions || metric.data.sessions.length === 0}
             size="small"
+            title="No sessions found over the selected time period"
         >
             <div className="pb-4">
                 {metric.data.sessions && metric.data.sessions.map((session: any, index: any) => (
diff --git a/frontend/app/types/app/period.js b/frontend/app/types/app/period.js
index 1922e55b3..646f0087e 100644
--- a/frontend/app/types/app/period.js
+++ b/frontend/app/types/app/period.js
@@ -1,132 +1,138 @@
-import origMoment from 'moment';
-import { extendMoment } from 'moment-range';
-import Record from 'Types/Record';
+import origMoment from "moment";
+import { extendMoment } from "moment-range";
+import Record from "Types/Record";
 const moment = extendMoment(origMoment);
 
-export const LAST_30_MINUTES = 'LAST_30_MINUTES';
-export const TODAY = 'TODAY';
-export const LAST_24_HOURS = 'LAST_24_HOURS';
-export const YESTERDAY = 'YESTERDAY';
-export const LAST_7_DAYS = 'LAST_7_DAYS';
-export const LAST_30_DAYS = 'LAST_30_DAYS';
-export const THIS_MONTH = 'THIS_MONTH';
-export const LAST_MONTH = 'LAST_MONTH';
-export const THIS_YEAR = 'THIS_YEAR';
-export const CUSTOM_RANGE = 'CUSTOM_RANGE';
+export const LAST_30_MINUTES = "LAST_30_MINUTES";
+export const TODAY = "TODAY";
+export const LAST_24_HOURS = "LAST_24_HOURS";
+export const YESTERDAY = "YESTERDAY";
+export const LAST_7_DAYS = "LAST_7_DAYS";
+export const LAST_30_DAYS = "LAST_30_DAYS";
+export const THIS_MONTH = "THIS_MONTH";
+export const LAST_MONTH = "LAST_MONTH";
+export const THIS_YEAR = "THIS_YEAR";
+export const CUSTOM_RANGE = "CUSTOM_RANGE";
 
 const RANGE_LABELS = {
-	[ LAST_30_MINUTES ]: 'Last 30 Minutes',
-  [ TODAY ]: 'Today',
-  [ YESTERDAY ]: 'Yesterday',
-  [ LAST_24_HOURS ]: 'Last 24 Hours',
-  [ LAST_7_DAYS ]: 'Last 7 Days',
-  [ LAST_30_DAYS ]: 'Last 30 Days',
-  [ THIS_MONTH ]: 'This Month',
-  [ LAST_MONTH ]: 'Last Month',
-  [ THIS_YEAR ]: 'This Year',
-}
+    [LAST_30_MINUTES]: "Last 30 Minutes",
+    [TODAY]: "Today",
+    [YESTERDAY]: "Yesterday",
+    [LAST_24_HOURS]: "Last 24 Hours",
+    [LAST_7_DAYS]: "Last 7 Days",
+    [LAST_30_DAYS]: "Last 30 Days",
+    [THIS_MONTH]: "This Month",
+    [LAST_MONTH]: "Last Month",
+    [THIS_YEAR]: "This Year",
+};
 
 function getRange(rangeName) {
-	switch (rangeName) {
-    case TODAY:
-      return moment.range(
-        moment().startOf('day'),
-        moment().endOf('day'),
-      );
-    case YESTERDAY:
-      return moment.range(
-        moment().subtract(1, 'days').startOf('day'),
-        moment().subtract(1, 'days').endOf('day'),
-      );
-    case LAST_24_HOURS: 
-    	return moment.range(
-    		moment().startOf('hour').subtract(24, 'hours'),
-    		moment().startOf('hour'),
-    	);
-    case LAST_30_MINUTES:
-    	return moment.range(
-    		moment().startOf('hour').subtract(30, 'minutes'),
-    		moment().startOf('hour'),
-    	);
-    case LAST_7_DAYS:
-      return moment.range(
-        moment().subtract(7, 'days').startOf('day'),
-        moment().endOf('day'),
-      );
-    case LAST_30_DAYS:
-      return moment.range(
-        moment().subtract(30, 'days').startOf('day'),
-        moment().endOf('day'),
-      );
-    case THIS_MONTH:
-      return moment().range('month');
-    case LAST_MONTH:
-      return moment().subtract(1, 'months').range('month');
-    case THIS_YEAR:
-      return moment().range('year');
-    default:
-    	return moment.range();
-  }
+    switch (rangeName) {
+        case TODAY:
+            return moment.range(moment().startOf("day"), moment().endOf("day"));
+        case YESTERDAY:
+            return moment.range(
+                moment().subtract(1, "days").startOf("day"),
+                moment().subtract(1, "days").endOf("day")
+            );
+        case LAST_24_HOURS:
+            return moment.range(
+                // moment().startOf("hour").subtract(24, "hours"),
+                // moment().startOf("hour")
+				moment().subtract(24, 'hours'),
+        		moment(),
+            );
+        case LAST_30_MINUTES:
+            return moment.range(
+                moment().startOf("hour").subtract(30, "minutes"),
+                moment().startOf("hour")
+            );
+        case LAST_7_DAYS:
+            return moment.range(
+                moment().subtract(7, "days").startOf("day"),
+                moment().endOf("day")
+            );
+        case LAST_30_DAYS:
+            return moment.range(
+                moment().subtract(30, "days").startOf("day"),
+                moment().endOf("day")
+            );
+        case THIS_MONTH:
+            return moment().range("month");
+        case LAST_MONTH:
+            return moment().subtract(1, "months").range("month");
+        case THIS_YEAR:
+            return moment().range("year");
+        default:
+            return moment.range();
+    }
 }
 
-export default Record({
-	start: 0,
-	end: 0,
-	rangeName: CUSTOM_RANGE,
-	range: moment.range(),
-}, {
-	fromJS: period => {
-		if (!period.rangeName || period.rangeName === CUSTOM_RANGE) {
-			const range = moment.range(
-				moment(period.start || 0),
-				moment(period.end || 0),
-			);
-			return {
-				...period,
-				range,
-				start: range.start.unix() * 1000,
-	  		end: range.end.unix() * 1000,
-			};
-		}
-		const range = getRange(period.rangeName);
-	  return {
-	  	...period,
-	  	range,
-	  	start: range.start.unix() * 1000,
-	  	end: range.end.unix() * 1000,
-	  }
-	},
-	// fromFilter: filter => {
-	// 	const range = getRange(filter.rangeName);
-	// 	return {
-	// 		start: range.start.unix() * 1000,
-	// 		end: range.end.unix() * 1000,
-	// 		rangeName: filter.rangeName,
-	// 	}
-	// },
-	methods: {
-		toJSON() {
-			return {
-				startDate: this.start,
-				endDate: this.end,
-				rangeName: this.rangeName,
-				rangeValue: this.rangeName,
-			}
-		},
-		toTimestamps() {
-			return {
-				startTimestamp: this.start,
-				endTimestamp: this.end,
-			};
-		},
-		rangeFormatted(format = 'MMM Do YY, hh:mm A') {
-			return this.range.start.format(format) + ' - ' + this.range.end.format(format);
-		},
-		toTimestampstwo() {
-			return {
-				startTimestamp: this.start / 1000,
-				endTimestamp: this.end / 1000,
-			};
-		},
-	}
-});
\ No newline at end of file
+export default Record(
+    {
+        start: 0,
+        end: 0,
+        rangeName: CUSTOM_RANGE,
+        range: moment.range(),
+    },
+    {
+        fromJS: (period) => {
+            if (!period.rangeName || period.rangeName === CUSTOM_RANGE) {
+                const range = moment.range(
+                    moment(period.start || 0),
+                    moment(period.end || 0)
+                );
+                return {
+                    ...period,
+                    range,
+                    start: range.start.unix() * 1000,
+                    end: range.end.unix() * 1000,
+                };
+            }
+            const range = getRange(period.rangeName);
+            return {
+                ...period,
+                range,
+                start: range.start.unix() * 1000,
+                end: range.end.unix() * 1000,
+            };
+        },
+        // fromFilter: filter => {
+        // 	const range = getRange(filter.rangeName);
+        // 	return {
+        // 		start: range.start.unix() * 1000,
+        // 		end: range.end.unix() * 1000,
+        // 		rangeName: filter.rangeName,
+        // 	}
+        // },
+        methods: {
+            toJSON() {
+                return {
+                    startDate: this.start,
+                    endDate: this.end,
+                    rangeName: this.rangeName,
+                    rangeValue: this.rangeName,
+                };
+            },
+            toTimestamps() {
+                return {
+                    startTimestamp: this.start,
+                    endTimestamp: this.end,
+                };
+            },
+            rangeFormatted(format = "MMM Do YY, hh:mm A") {
+                return (
+                    this.range.start.format(format) +
+                    " - " +
+                    this.range.end.format(format)
+                );
+            },
+            toTimestampstwo() {
+                return {
+                    startTimestamp: this.start / 1000,
+                    endTimestamp: this.end / 1000,
+                };
+            },
+        },
+    }
+);