diff --git a/smart-hut/src/components/dashboard/Automations.css b/smart-hut/src/components/dashboard/Automations.css
new file mode 100644
index 0000000..69299e3
--- /dev/null
+++ b/smart-hut/src/components/dashboard/Automations.css
@@ -0,0 +1,7 @@
+.segment-automations {
+    top: 10%;
+}
+
+.list-index {
+    font-size: 1.5rem;
+}
diff --git a/smart-hut/src/components/dashboard/AutomationsPanel.js b/smart-hut/src/components/dashboard/AutomationsPanel.js
index 4fbf809..297a5f0 100644
--- a/smart-hut/src/components/dashboard/AutomationsPanel.js
+++ b/smart-hut/src/components/dashboard/AutomationsPanel.js
@@ -1,23 +1,267 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import { connect } from "react-redux";
 import { RemoteService } from "../../remote";
+import "./Automations.css";
+import {
+    Segment,
+    Grid,
+    Icon,
+    Header,
+    Input,
+    Button,
+    List,
+    Dropdown,
+    Form,
+    Divider,
+    Checkbox,
+    Menu,
+    Label,
+} from "semantic-ui-react";
+
+const options = [
+    { key: "equal", text: "=", value: "equal" },
+    {
+        key: "greater-than-or-equal",
+        text: "\u2265",
+        value: "greater-than-or-equal",
+    },
+    {
+        key: "greater-than",
+        text: ">",
+        value: "greater-than",
+    },
+    {
+        key: "less-than-or-equal",
+        text: "\u2264",
+        value: "less-than-or-equal",
+    },
+    {
+        key: "less-than",
+        text: "<",
+        value: "less-than",
+    },
+];
+
+const CreateTrigger = (props) => {
+    const devices = [
+        { key: "Light-1", text: "Light-1", value: "Light-1" },
+        { key: "Light-2", text: "Light-2", value: "Light-2" },
+        { key: "SmartPlug-1", text: "SmartPlug-1", value: "SmartPlug-1" },
+        { key: "SmartPlug-2", text: "SmartPlug-2", value: "SmartPlug-2" },
+    ];
+
+    return (
+        <List.Item>
+            <List.Content>
+                <Form>
+                    <Form.Group>
+                        <Form.Field inline width={7}>
+                            <Dropdown
+                                onChange={(e, val) => props.inputChange(val)}
+                                name="device"
+                                search
+                                selection
+                                options={devices}
+                                placeholder="Device"
+                            />
+                        </Form.Field>
+
+                        <Form.Field inline width={2}>
+                            <Dropdown
+                                onChange={(e, val) => props.inputChange(val)}
+                                name="operand"
+                                compact
+                                selection
+                                options={options}
+                            />
+                        </Form.Field>
+                        <Form.Field inline width={7}>
+                            <Input
+                                onChange={(e, val) => props.inputChange(val)}
+                                name="value"
+                                type="number"
+                                placeholder="Value"
+                            />
+                        </Form.Field>
+                    </Form.Group>
+                </Form>
+            </List.Content>
+        </List.Item>
+    );
+};
+
+const SceneItem = (props) => {
+    return (
+        <List.Item>
+            <List.Header>
+                <Grid textAlign="center">
+                    <Grid.Row>
+                        <Grid.Column width={4}>
+                            <Checkbox toggle />
+                        </Grid.Column>
+                        <Grid.Column width={4}>
+                            <h3>{props.sceneName}</h3>
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
+            </List.Header>
+        </List.Item>
+    );
+};
+
+const Trigger = ({ trigger }) => {
+    console.log(trigger);
+    const { device, operand, value } = trigger;
+    const symbol = options.filter((opt) => opt.key === operand)[0].text;
+    return (
+        <List.Item fluid>
+            <Menu compact>
+                <Menu.Item as="span">{device}</Menu.Item>
+                <Menu.Item as="span">{symbol}</Menu.Item>
+                <Menu.Item as="span">{value}</Menu.Item>
+            </Menu>
+        </List.Item>
+    );
+};
+
+const Automation = (props) => {
+    const [triggerList, setTrigger] = useState([]);
+    const [newTrigger, setNewTrigger] = useState({
+        device: null,
+        operand: null,
+        value: null,
+    });
+    const scenes = ["scene-1", "scene-2", "scene-3"];
+    const automationName = "Automation Name";
+
+    const checkNewTrigger = (trigger) => {
+        if (!trigger.device || !trigger.operand || !trigger.value) {
+            return {
+                result: false,
+                message: "There are missing fields",
+            };
+        }
+        const result = !triggerList.some(
+            (t) => t.device === trigger.device && t.operand === trigger.operand
+        );
+        return {
+            result: result,
+            message: result
+                ? ""
+                : "You have already created a trigger for this device with the same conditions",
+        };
+    };
+    const addTrigger = () => {
+        const { result, message } = checkNewTrigger(newTrigger);
+        if (result) {
+            setTrigger((prevList) => [...prevList, newTrigger]);
+        } else {
+            alert(message);
+        }
+    };
+
+    const onInputChange = (val) => {
+        setNewTrigger({ ...newTrigger, [val.name]: val.value });
+    };
+
+    return (
+        <React.Fragment>
+            <Header style={{ display: "inline", marginRight: "1rem" }}>
+                {automationName}
+            </Header>
+
+            <Button
+                style={{ display: "inline" }}
+                circular
+                size="small"
+                icon="edit"
+            />
+
+            <Segment placeholder className="segment-automations">
+                <Grid columns={2} stackable textAlign="center">
+                    <Divider vertical></Divider>
+                    <Grid.Row verticalAlign="middle">
+                        <Grid.Column>
+                            <Header>Create Triggers</Header>
+                            <List divided relaxed>
+                                {triggerList.length > 0 &&
+                                    triggerList.map((trigger) => (
+                                        <Trigger trigger={trigger} />
+                                    ))}
+                                <CreateTrigger inputChange={onInputChange} />
+                            </List>
+                            <Button
+                                onClick={addTrigger}
+                                circular
+                                icon="add"
+                                color="blue"
+                                size="huge"
+                            />
+                        </Grid.Column>
+                        <Grid.Column>
+                            {scenes.length > 0 ? (
+                                <React.Fragment>
+                                    <Header>Activate Scenes</Header>
+                                    <Input
+                                        //loading
+                                        icon="search"
+                                        placeholder="Search..."
+                                        fluid
+                                    />
+                                    <Divider horizontal />
+                                    <List divided relaxed>
+                                        {scenes.map((scene) => (
+                                            <SceneItem sceneName={scene} />
+                                        ))}
+                                    </List>
+                                </React.Fragment>
+                            ) : (
+                                <React.Fragment>
+                                    <Header icon>
+                                        <Icon name="world" />
+                                    </Header>
+                                    <Button primary>Create Scene</Button>
+                                </React.Fragment>
+                            )}
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
+            </Segment>
+            <Grid>
+                <Grid.Row>
+                    <Grid.Column style={{ marginRight: "1rem" }}>
+                        <Button color="green">SAVE</Button>
+                    </Grid.Column>
+                    <Grid.Column>
+                        <Button color="red">DELETE</Button>
+                    </Grid.Column>
+                </Grid.Row>
+            </Grid>
+        </React.Fragment>
+    );
+};
 
 class AutomationsPanel extends Component {
-  constructor(props) {
-    super(props);
-  }
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
 
-  render() {
-    return <h1 color="black">AUTOMATIONS</h1>;
-  }
+    render() {
+        return (
+            <List style={{ marginTop: "3rem" }}>
+                <Automation />
+            </List>
+        );
+    }
 }
 
 const mapStateToProps = (state, _) => ({
-  activeRoom: state.active.activeRoom,
-  activeTab: state.active.activeTab,
+    activeRoom: state.active.activeRoom,
+    activeTab: state.active.activeTab,
 });
 const AutomationsPanelContainer = connect(
-  mapStateToProps,
-  RemoteService
+    mapStateToProps,
+    RemoteService
 )(AutomationsPanel);
 export default AutomationsPanelContainer;
diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js
index 651a1e5..af0a3fa 100644
--- a/smart-hut/src/views/Dashboard.js
+++ b/smart-hut/src/views/Dashboard.js
@@ -8,8 +8,8 @@ import AutomationsNavbar from "./AutomationsNavbar";
 import MyHeader from "../components/HeaderController";
 import { Grid, Responsive, Button } from "semantic-ui-react";
 import {
-  panelStyle,
-  mobilePanelStyle,
+    panelStyle,
+    mobilePanelStyle,
 } from "../components/dashboard/devices/styleComponents";
 
 import { RemoteService } from "../remote";
@@ -17,177 +17,203 @@ import { connect } from "react-redux";
 import { appActions } from "../storeActions";
 
 class Dashboard extends Component {
-  constructor(props) {
-    super(props);
-    this.state = this.initialState;
-    this.setInitialState();
-
-    this.selectTab = this.selectTab.bind(this);
-  }
-
-  get initialState() {
-    return {
-      activeTab: this.activeTab,
-    };
-  }
-
-  setInitialState() {
-    this.setState(this.initialState);
-  }
-
-  get activeTab() {
-    return this.props.activeTab;
-  }
-
-  set activeTab(tab) {
-    this.props.setActiveTab(tab);
-  }
-
-  selectTab(e, { name }) {
-    this.setState({ activeTab: name });
-    this.activeTab = name;
-  }
-
-  renderTab(tab) {
-    switch (tab) {
-      case "Devices":
-        return <DevicePanel tab={this.state.activeTab} />;
-      case "Scenes":
-        return <ScenesPanel tab={this.state.activeTab} />;
-      case "Automations":
-        return <AutomationsPanel />;
-      default:
-        return <h1>ERROR</h1>;
+    constructor(props) {
+        super(props);
+        this.state = this.initialState;
+        this.setInitialState();
+        this.activeTab = "Automations"; //TODO Remove this to not put automations first
+        this.selectTab = this.selectTab.bind(this);
     }
-  }
 
-  renderNavbar(tab) {
-    switch (tab) {
-      case "Devices":
-        return <Navbar />;
-      case "Scenes":
-        return <ScenesNavbar />;
-      case "Automations":
-        return <AutomationsNavbar />;
-      default:
-        return <h1>ERROR</h1>;
+    get initialState() {
+        return {
+            activeTab: this.activeTab,
+        };
     }
-  }
 
-  render() {
-    return (
-      <div style={{ background: "#1b1c1d" }}>
-        <Responsive minWidth={768}>
-          <Grid>
-            <Grid.Row color="black">
-              <Grid.Column>
-                <MyHeader />
-              </Grid.Column>
-            </Grid.Row>
-            <Grid.Row color="black">
-              <Grid.Column width={3}></Grid.Column>
-              <Grid.Column textAlign="center" width={13}>
-                <Button
-                  basic
-                  name="Devices"
-                  content="Devices"
-                  active={this.activeTab === "Devices"}
-                  color={this.activeTab === "Devices" ? "yellow" : "grey"}
-                  onClick={this.selectTab}
-                />
-                <Button
-                  basic
-                  name="Scenes"
-                  content="Scenes"
-                  active={this.activeTab === "Scenes"}
-                  color={this.activeTab === "Scenes" ? "yellow" : "grey"}
-                  onClick={this.selectTab}
-                />
-                <Button
-                  basic
-                  name="Automations"
-                  content="Automations"
-                  active={this.activeTab === "Automations"}
-                  color={this.activeTab === "Automations" ? "yellow" : "grey"}
-                  onClick={this.selectTab}
-                />
-              </Grid.Column>
-            </Grid.Row>
-            <Grid.Row color="black">
-              <Grid.Column width={3}>
-                {this.renderNavbar(this.activeTab)}
-              </Grid.Column>
+    setInitialState() {
+        this.setState(this.initialState);
+    }
 
-              <Grid.Column width={13}>
-                <div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Responsive>
-        <Responsive maxWidth={768}>
-          <Grid inverted>
-            <Grid.Row color="black">
-              <Grid.Column>
-                <MyHeader />
-              </Grid.Column>
-            </Grid.Row>
-            <Grid.Row color="black">
-              <Grid.Column textAlign="center">
-                <Button
-                  basic
-                  name="Devices"
-                  content="Devices"
-                  active={this.activeTab === "Devices"}
-                  color={this.activeTab === "Devices" ? "yellow" : "grey"}
-                  onClick={this.selectTab}
-                />
-                <Button
-                  basic
-                  name="Scenes"
-                  content="Scenes"
-                  active={this.activeTab === "Scenes"}
-                  color={this.activeTab === "Scenes" ? "yellow" : "grey"}
-                  onClick={this.selectTab}
-                />
-                <Button
-                  basic
-                  name="Automations"
-                  content="Automations"
-                  active={this.activeTab === "Automations"}
-                  color={this.activeTab === "Automations" ? "yellow" : "grey"}
-                  onClick={this.selectTab}
-                />
-              </Grid.Column>
-            </Grid.Row>
-            <Grid.Row color="black">
-              <Grid.Column color="black">
-                {this.renderNavbar(this.activeTab)}
-              </Grid.Column>
-            </Grid.Row>
-            <Grid.Row>
-              <Grid.Column>
-                <div style={mobilePanelStyle}>
-                  {this.renderTab(this.activeTab)}
-                </div>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Responsive>
-      </div>
-    );
-  }
+    get activeTab() {
+        return this.props.activeTab;
+    }
+
+    set activeTab(tab) {
+        this.props.setActiveTab(tab);
+    }
+
+    selectTab(e, { name }) {
+        this.setState({ activeTab: name });
+        this.activeTab = name;
+    }
+
+    renderTab(tab) {
+        switch (tab) {
+            case "Devices":
+                return <DevicePanel tab={this.state.activeTab} />;
+            case "Scenes":
+                return <ScenesPanel tab={this.state.activeTab} />;
+            case "Automations":
+                return <AutomationsPanel />;
+            default:
+                return <h1>ERROR</h1>;
+        }
+    }
+
+    renderNavbar(tab) {
+        switch (tab) {
+            case "Devices":
+                return <Navbar />;
+            case "Scenes":
+                return <ScenesNavbar />;
+            case "Automations":
+                return <AutomationsNavbar />;
+            default:
+                return <h1>ERROR</h1>;
+        }
+    }
+
+    render() {
+        return (
+            <div style={{ background: "#1b1c1d" }}>
+                <Responsive minWidth={768}>
+                    <Grid>
+                        <Grid.Row color="black">
+                            <Grid.Column>
+                                <MyHeader />
+                            </Grid.Column>
+                        </Grid.Row>
+                        <Grid.Row color="black">
+                            <Grid.Column width={3}></Grid.Column>
+                            <Grid.Column textAlign="center" width={13}>
+                                <Button
+                                    basic
+                                    name="Devices"
+                                    content="Devices"
+                                    active={this.activeTab === "Devices"}
+                                    color={
+                                        this.activeTab === "Devices"
+                                            ? "yellow"
+                                            : "grey"
+                                    }
+                                    onClick={this.selectTab}
+                                />
+                                <Button
+                                    basic
+                                    name="Scenes"
+                                    content="Scenes"
+                                    active={this.activeTab === "Scenes"}
+                                    color={
+                                        this.activeTab === "Scenes"
+                                            ? "yellow"
+                                            : "grey"
+                                    }
+                                    onClick={this.selectTab}
+                                />
+                                <Button
+                                    basic
+                                    name="Automations"
+                                    content="Automations"
+                                    active={this.activeTab === "Automations"}
+                                    color={
+                                        this.activeTab === "Automations"
+                                            ? "yellow"
+                                            : "grey"
+                                    }
+                                    onClick={this.selectTab}
+                                />
+                            </Grid.Column>
+                        </Grid.Row>
+                        <Grid.Row color="black">
+                            <Grid.Column width={3}>
+                                {this.renderNavbar(this.activeTab)}
+                            </Grid.Column>
+
+                            <Grid.Column width={13}>
+                                <div style={panelStyle}>
+                                    {this.renderTab(this.activeTab)}
+                                </div>
+                            </Grid.Column>
+                        </Grid.Row>
+                    </Grid>
+                </Responsive>
+                <Responsive maxWidth={768}>
+                    <Grid inverted>
+                        <Grid.Row color="black">
+                            <Grid.Column>
+                                <MyHeader />
+                            </Grid.Column>
+                        </Grid.Row>
+                        <Grid.Row color="black">
+                            <Grid.Column textAlign="center">
+                                <Button
+                                    basic
+                                    name="Devices"
+                                    content="Devices"
+                                    active={this.activeTab === "Devices"}
+                                    color={
+                                        this.activeTab === "Devices"
+                                            ? "yellow"
+                                            : "grey"
+                                    }
+                                    onClick={this.selectTab}
+                                />
+                                <Button
+                                    basic
+                                    name="Scenes"
+                                    content="Scenes"
+                                    active={this.activeTab === "Scenes"}
+                                    color={
+                                        this.activeTab === "Scenes"
+                                            ? "yellow"
+                                            : "grey"
+                                    }
+                                    onClick={this.selectTab}
+                                />
+                                <Button
+                                    basic
+                                    name="Automations"
+                                    content="Automations"
+                                    active={this.activeTab === "Automations"}
+                                    color={
+                                        this.activeTab === "Automations"
+                                            ? "yellow"
+                                            : "grey"
+                                    }
+                                    onClick={this.selectTab}
+                                />
+                            </Grid.Column>
+                        </Grid.Row>
+                        <Grid.Row color="black">
+                            <Grid.Column color="black">
+                                {this.renderNavbar(this.activeTab)}
+                            </Grid.Column>
+                        </Grid.Row>
+                        <Grid.Row>
+                            <Grid.Column>
+                                <div style={mobilePanelStyle}>
+                                    {this.renderTab(this.activeTab)}
+                                </div>
+                            </Grid.Column>
+                        </Grid.Row>
+                    </Grid>
+                </Responsive>
+            </div>
+        );
+    }
 }
 
 const mapStateToProps = (state, _) => ({
-  activeTab: state.active.activeTab,
+    activeTab: state.active.activeTab,
 });
 
 const setActiveTab = (activeTab) => {
-  return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
+    return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
 };
 
 const DashboardContainer = connect(mapStateToProps, {
-  ...RemoteService,
-  setActiveTab,
+    ...RemoteService,
+    setActiveTab,
 })(Dashboard);
 export default DashboardContainer;