diff --git a/StatisticalPlatform/StatisticalPlatform/client/components/Dashboard/NavBar/Clustering/DensityClusterModal.js b/StatisticalPlatform/StatisticalPlatform/client/components/Dashboard/NavBar/Clustering/DensityClusterModal.js
new file mode 100644
index 0000000..acda824
--- /dev/null
+++ b/StatisticalPlatform/StatisticalPlatform/client/components/Dashboard/NavBar/Clustering/DensityClusterModal.js
@@ -0,0 +1,109 @@
+import React, {Component} from 'react';
+import {Button, Modal, Checkbox, FormGroup, ControlLabel, FormControl, FieldGroup} from 'react-bootstrap';
+import NumericInput from 'react-numeric-input';
+
+class DensityClusterModal extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showResults: false,
+ show: false
+ };
+ }
+
+ handleClose = () => {
+ this.setState({ show: false });
+ }
+
+ onClick = () => {
+ this.setState({ showResults: true });
+ }
+
+ handleClick = () => {
+ this.props.onClose({showDensityCluster: false});
+ this.props.onClick(
+ this,
+ this.first.value,
+ this.second.value,
+ this.minpts.value,
+ this.eps.value
+ );
+ }
+
+
+ render() {
+
+ const options_list = [];
+ let inst = null;
+ const bold_style = {'fontSize': '15', 'fontWeight': 'bold'};
+
+ if (!this.state.showResults) {
+ inst =
+ }
+ else {
+ inst = Description:
;
+ }
+
+ this.props.variables.forEach( (variable) => {
+ options_list.push();
+ });
+
+ return(
+
+
+
+ Choose Data
+
+
+
+
+ {inst}
+ { this.state.showResults ? : null }
+
+
+
+
+
+
+ );
+ }
+}
+
+
+class DensityClusteringInstruction extends Component {
+ render() {
+ const style = {'fontFamily': 'DROID SANS MONO'};
+ return(
+
+
{'Select two columns and value i.e. number of clusters.'}
+
+
+ | {'library(ggplot2)'} |
+
+
+ | {'ggplot(data, aes(var_x, var_y, color = Species)) + geom_point()'} |
+
+
+