diff --git a/package.json b/package.json
index 5f1ed11..1697c89 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "facebook-instant-articles-sdk-rules-editor",
   "productName": "Facebook Instant Articles Rules Editor",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "App to help creating transformer rules for the Facebook Instant Articles SDK.",
   "license": "SEE LICENSE IN ./LICENSE",
   "main": "src/js/background.js",
diff --git a/src/css/style.css b/src/css/style.css
index 375188a..6a14952 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -65,6 +65,7 @@ h1 {
   padding-right: 10px;
   overflow-y: auto;
   display: flex;
+  flex-direction: column;
 }
 
 .loader {
@@ -77,14 +78,19 @@ h1 {
 }
 
 .field-line label,
-.field-line input {
+.field-line input,
+.field-line select {
   display: block;
   width: 100%;
   clear: both;
 }
 
 .field-line input,
-.field-line input:active {
+.field-line input:active,
+.field-line textarea,
+.field-line textarea:active,
+.field-line select,
+.field-line select:active {
   border-radius: 5px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
@@ -394,7 +400,8 @@ h1 {
 }
 
 .field-line.active,
-.field-line input:focus {
+.field-line input:focus,
+.field-line textarea:focus {
   border: 1px solid #4a90e2;
 }
 
@@ -427,7 +434,8 @@ webview {
   color: #ccc !important;
 }
 
-.selectors-form {
+.selectors-form,
+.settings-fields {
   margin-bottom: 10px;
   position: relative;
   background: rgba(255, 255, 255, 0.6);
@@ -443,7 +451,8 @@ webview {
 }
 .selectors-form .field,
 .selectors-form .attributes,
-.selector-label {
+.selector-label,
+.settings-fields .field {
   padding: 0 5px !important;
 }
 
@@ -476,6 +485,7 @@ webview {
   color: rgba(0, 0, 0, 0.87);
   padding: 5px;
   cursor: pointer;
+  width: 100%;
 }
 
 .rule-header {
@@ -594,7 +604,29 @@ button {
 .rule-list {
   display: flex;
   flex-direction: column;
-  width: 300px;
+  flex-grow: 1;
+  width: 325px;
+}
+
+.rule-list label {
+  display: block;
+}
+
+.settings {
+  width: 100%;
+}
+
+.settings input,
+.settings textarea,
+.settings select {
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.settings textarea,
+.settings select {
+  margin: 5px 0;
+  width: 100%;
 }
 
 .scrollable {
@@ -613,7 +645,6 @@ button {
   margin: 0;
   display: flex;
   flex-direction: column;
-  margin-right: 5px;
 }
 
 .hidden {
diff --git a/src/js/components/BugReporter.react.js b/src/js/components/BugReporter.react.js
index 6258341..b6a14c5 100644
--- a/src/js/components/BugReporter.react.js
+++ b/src/js/components/BugReporter.react.js
@@ -44,7 +44,11 @@ export class BugReporter extends React.Component<Props> {
 **URL**: \`${this.props.editor.url}\`
 **RULES**:
 \`\`\`json
-${JSON.stringify(RuleExporter.export(this.props.rules), null, 2)}
+${JSON.stringify(
+      RuleExporter.export(this.props.rules, this.props.settings),
+      null,
+      2
+    )}
 \`\`\``;
     //----------------
     // End of template
diff --git a/src/js/components/FileTools.react.js b/src/js/components/FileTools.react.js
index b8af1d2..f3f83f4 100644
--- a/src/js/components/FileTools.react.js
+++ b/src/js/components/FileTools.react.js
@@ -48,7 +48,7 @@ class FileTools extends React.Component<Props> {
       fileName => {
         if (fileName) {
           const contents = JSON.stringify(
-            RuleExporter.export(this.props.rules)
+            RuleExporter.export(this.props.rules, this.props.settings)
           );
           Fs.writeFile(fileName, contents, importExportEncoding, error => {
             if (error) {
diff --git a/src/js/components/Preview.react.js b/src/js/components/Preview.react.js
index 3942fa6..f10e633 100644
--- a/src/js/components/Preview.react.js
+++ b/src/js/components/Preview.react.js
@@ -63,7 +63,9 @@ class Preview extends React.Component<Props, State> {
               bytes: Buffer.from(
                 'rules=' +
                   encodeURIComponent(
-                    JSON.stringify(RuleExporter.export(this.props.rules))
+                    JSON.stringify(
+                      RuleExporter.export(this.props.rules, this.props.settings)
+                    )
                   )
               ),
             },
@@ -86,7 +88,9 @@ class Preview extends React.Component<Props, State> {
               bytes: Buffer.from(
                 'rules=' +
                   encodeURIComponent(
-                    JSON.stringify(RuleExporter.export(this.props.rules))
+                    JSON.stringify(
+                      RuleExporter.export(this.props.rules, this.props.settings)
+                    )
                   )
               ),
             },
@@ -102,8 +106,8 @@ class Preview extends React.Component<Props, State> {
       return true;
     }
     if (
-      RuleExporter.export(nextProps.rules) !=
-      RuleExporter.export(this.props.rules)
+      RuleExporter.export(nextProps.rules, nextProps.settings) !=
+      RuleExporter.export(this.props.rules, this.props.settings)
     ) {
       return true;
     }
diff --git a/src/js/components/RuleList.react.js b/src/js/components/RuleList.react.js
index 9f18d26..67241ea 100644
--- a/src/js/components/RuleList.react.js
+++ b/src/js/components/RuleList.react.js
@@ -11,10 +11,11 @@
 const React = require('react');
 const RulePicker = require('./RulePicker.react.js');
 const RuleActions = require('../data/RuleActions');
+const TransformationSettings = require('./TransformationSettings.react.js');
 
 import { Set } from 'immutable';
 import RuleCategories from '../models/RuleCategories';
-import { Dropdown, Icon } from 'semantic-ui-react';
+import { Accordion, Dropdown, Icon } from 'semantic-ui-react';
 import { RuleFactory } from '../models/Rule';
 import type { Props } from '../containers/AppContainer.react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
@@ -57,7 +58,20 @@ const SortableList = SortableContainer((props: any) => {
   );
 });
 
-class RuleList extends React.Component<Props> {
+type AccordionItemProps = {
+  index: number
+};
+
+type State = {
+  activeAccordionIndex: number
+};
+
+class RuleList extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { activeAccordionIndex: 0 };
+  }
+
   handleAddRule = (event: Event) => {
     const selectElement = event.target;
     if (selectElement instanceof HTMLSelectElement) {
@@ -100,79 +114,105 @@ class RuleList extends React.Component<Props> {
     }
   }
 
+  handleAccordionTitleClick = (e: Event, itemProps: AccordionItemProps) => {
+    const { index } = itemProps;
+    const { activeAccordionIndex } = this.state;
+    const newIndex = activeAccordionIndex === index ? -1 : index;
+
+    this.setState({ activeAccordionIndex: newIndex });
+  };
+
   render() {
     return (
       <div className="rule-list">
         <FileTools {...this.props} />
-        <div className="rule-filters">
-          <label>
-            <Icon name="filter" />Filter Rules:
-          </label>
-          <Dropdown
-            multiple
-            labeled
-            fluid
-            selection
-            closeOnChange={true}
-            options={Object.values(RuleCategories).map(
-              (category: RuleCategory) => ({
-                text: category,
-                value: category,
-                icon: getLabelIcon(category),
-              })
-            )}
-            renderLabel={item => ({
-              content: item.text,
-              icon: item.icon,
-            })}
-            text="Pick at least 1 category"
-            value={this.props.editor.categories.toArray()}
-            onChange={this.handleChangeFilters}
-          />
-        </div>
-        <hr />
-        <label>
-          <Icon name="list" />Rules:
-        </label>
-        <select
-          className="rule-selector"
-          onChange={this.handleAddRule}
-          value=""
-        >
-          <option value="" disabled={true}>
-            + Add a new rule...
-          </option>
-          <optgroup label="-----------------------------------" />
-          {Object.values(RuleCategories).map((category: RuleCategory) => (
-            <optgroup key={category} label={category + ' rules'}>
-              {this.props.ruleDefinitions
-                .sortBy(defintion => defintion.displayName)
-                .valueSeq()
-                .filter(definition => definition.category == category)
-                .map(ruleDefinition => (
-                  <option
-                    key={ruleDefinition.name}
-                    value={ruleDefinition.name}
-                    disabled={
-                      !this.props.editor.categories.contains(
-                        ruleDefinition.category
-                      )
-                    }
-                  >
-                    {ruleDefinition.displayName}
-                  </option>
-                ))}
-            </optgroup>
-          ))}
-        </select>
-        <div className="scrollable" ref="scrollable">
-          <SortableList
+        <Accordion fluid styled>
+          <Accordion.Title
+            index={0}
+            active={this.state.activeAccordionIndex === 0}
+            onClick={this.handleAccordionTitleClick}
+          >
+            <label>
+              <Icon name="dropdown" />Content Transformation
+            </label>
+          </Accordion.Title>
+          <Accordion.Content active={this.state.activeAccordionIndex === 0}>
+            <div className="rule-filters">
+              <label>
+                <Icon name="filter" />Filter Rules:
+              </label>
+              <Dropdown
+                multiple
+                labeled
+                fluid
+                selection
+                closeOnChange={true}
+                options={Object.values(RuleCategories).map(
+                  (category: RuleCategory) => ({
+                    text: category,
+                    value: category,
+                    icon: getLabelIcon(category),
+                  })
+                )}
+                renderLabel={item => ({
+                  content: item.text,
+                  icon: item.icon,
+                })}
+                text="Pick at least 1 category"
+                value={this.props.editor.categories.toArray()}
+                onChange={this.handleChangeFilters}
+              />
+            </div>
+            <label>
+              <Icon name="list" />Rules:
+            </label>
+            <select
+              className="rule-selector"
+              onChange={this.handleAddRule}
+              value=""
+            >
+              <option value="" disabled={true}>
+                + Add a new rule...
+              </option>
+              <optgroup label="-----------------------------------" />
+              {Object.values(RuleCategories).map((category: RuleCategory) => (
+                <optgroup key={category} label={category + ' rules'}>
+                  {this.props.ruleDefinitions
+                    .sortBy(defintion => defintion.displayName)
+                    .valueSeq()
+                    .filter(definition => definition.category == category)
+                    .map(ruleDefinition => (
+                      <option
+                        key={ruleDefinition.name}
+                        value={ruleDefinition.name}
+                        disabled={
+                          !this.props.editor.categories.contains(
+                            ruleDefinition.category
+                          )
+                        }
+                      >
+                        {ruleDefinition.displayName}
+                      </option>
+                    ))}
+                </optgroup>
+              ))}
+            </select>
+            <div className="scrollable" ref="scrollable">
+              <SortableList
+                {...this.props}
+                pressDelay={200}
+                items={this.props.rules.valueSeq()}
+                onSortEnd={this.handleSortEnd}
+              />
+            </div>
+          </Accordion.Content>
+          <TransformationSettings
+            accordionActive={this.state.activeAccordionIndex === 1}
+            accordionIndex={1}
+            onAccordionTitleClick={this.handleAccordionTitleClick}
             {...this.props}
-            pressDelay={200}
-            items={this.props.rules.valueSeq()}
-            onSortEnd={this.handleSortEnd}
           />
-        </div>
+        </Accordion>
       </div>
     );
   }
diff --git a/src/js/components/TransformationSettings.react.js b/src/js/components/TransformationSettings.react.js
new file mode 100644
index 0000000..dd3d78b
--- /dev/null
+++ b/src/js/components/TransformationSettings.react.js
@@ -0,0 +1,202 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const React = require('react');
+
+import { Accordion, Icon } from 'semantic-ui-react';
+import AdsTypes from '../data/AdsTypes';
+import SettingsActions from '../data/SettingsActions';
+
+import type { Props as BaseProps } from '../containers/AppContainer.react';
+
+type Props = BaseProps & {
+  accordionActive: boolean,
+  accordionIndex: number,
+  onAccordionTitleClick: (e: Event, itemProps: AccordionItemProps) => void
+};
+
+type AccordionItemProps = {
+  index: number
+};
+
+class TransformationSettings extends React.Component<Props> {
+  handleAdsRawHtmlChanged = (event: SyntheticEvent<HTMLInputElement>) => {
+    SettingsActions.editAdsRawHtml(event.currentTarget.value);
+  };
+
+  handleAdsTypeChanged = (event: SyntheticEvent<HTMLInputElement>) => {
+    SettingsActions.editAdsType(event.currentTarget.value);
+  };
+
+  handleAnalyticsRawHtmlChanged = (event: SyntheticEvent<HTMLInputElement>) => {
+    SettingsActions.editAnalyticsRawHtml(event.currentTarget.value);
+  };
+
+  handleAudienceNetworkPlacementIdChanged = (
+    event: SyntheticEvent<HTMLInputElement>
+  ) => {
+    SettingsActions.editAudienceNetworkPlacementId(event.currentTarget.value);
+  };
+
+  handleFbPixelIdChanged = (event: SyntheticEvent<HTMLInputElement>) => {
+    SettingsActions.editFbPixelId(event.currentTarget.value);
+  };
+
+  handleStyleNameChanged = (event: SyntheticEvent<HTMLInputElement>) => {
+    SettingsActions.editStyleName(event.currentTarget.value);
+  };
+
+  renderAudienceNetworkDiv() {
+    return this.props.settings.adsSettings.type ===
+      AdsTypes.AUDIENCE_NETWORK ? (
+        <div>
+          <label className="sub-label" htmlFor="audienceNetworkId">
+            <span>
+              {this.props.settings.adsSettings.audienceNetworkPlacementId
+                ? '✔'
+                : '•'}
+            </span>&nbsp; Audience Network ID
+          </label>
+          <div className="field">
+            <input
+              type="text"
+              name="audienceNetworkId"
+              placeholder="123456"
+              onChange={this.handleAudienceNetworkPlacementIdChanged}
+              value={this.props.settings.adsSettings.audienceNetworkPlacementId}
+            />
+          </div>
+        </div>
+      ) : null;
+  }
+
+  renderAdsRawHtmlDiv() {
+    return this.props.settings.adsSettings.type === AdsTypes.RAW_HTML ? (
+      <div>
+        <label className="sub-label" htmlFor="adsRawHtml">
+          <span>{this.props.settings.adsSettings.rawHtml ? '✔' : '•'}</span>&nbsp;
+          Raw HTML
+        </label>
+        <div className="field">
+          <textarea
+            name="adsRawHtml"
+            placeholder="<script>...</script>"
+            onChange={this.handleAdsRawHtmlChanged}
+            rows="4"
+            value={this.props.settings.adsSettings.rawHtml}
+          />
+        </div>
+      </div>
+    ) : null;
+  }
+
+  render() {
+    const audienceNetworkDiv = this.renderAudienceNetworkDiv();
+    const adsRawHtmlDiv = this.renderAdsRawHtmlDiv();
+
+    return (
+      <div>
+        <Accordion.Title
+          index={this.props.accordionIndex}
+          active={this.props.accordionActive}
+          onClick={this.props.onAccordionTitleClick}
+        >
+          <label>
+            <Icon name="dropdown" />Settings
+          </label>
+        </Accordion.Title>
+        <Accordion.Content active={this.props.accordionActive}>
+          <div className="settings">
+            <div className="settings-fields">
+              <div className="general-settings field-line">
+                <label>
+                  <Icon name="edit" />General
+                </label>
+                <label className="sub-label" htmlFor="styleName">
+                  <span>{this.props.settings.styleName ? '✔' : '•'}</span>&nbsp;
+                  Style Name
+                </label>
+                <div className="field">
+                  <input
+                    type="text"
+                    name="styleName"
+                    placeholder="default"
+                    onChange={this.handleStyleNameChanged}
+                    value={this.props.settings.styleName}
+                  />
+                </div>
+              </div>
+              <div className="analytics-settings field-line">
+                <label>
+                  <Icon name="bar chart" />Analytics
+                </label>
+                <label className="sub-label" htmlFor="pixelId">
+                  <span>
+                    {this.props.settings.analyticsSettings.fbPixelId
+                      ? '✔'
+                      : '•'}
+                  </span>&nbsp; Pixel ID
+                </label>
+                <div className="field">
+                  <input
+                    type="text"
+                    name="pixelId"
+                    placeholder="123456"
+                    onChange={this.handleFbPixelIdChanged}
+                    value={this.props.settings.analyticsSettings.fbPixelId}
+                  />
+                </div>
+                <label className="sub-label" htmlFor="analyticsRawHtml">
+                  <span>
+                    {this.props.settings.analyticsSettings.rawHtml ? '✔' : '•'}
+                  </span>&nbsp; Raw HTML
+                </label>
+                <div className="field">
+                  <textarea
+                    name="analyticsRawHtml"
+                    placeholder="<script>...</script>"
+                    onChange={this.handleAnalyticsRawHtmlChanged}
+                    rows="4"
+                    value={this.props.settings.analyticsSettings.rawHtml}
+                  />
+                </div>
+              </div>
+              <div className="ads-settigns field-line">
+                <label>
+                  <Icon name="money" />Ads
+                </label>
+                <label className="sub-label" htmlFor="adsType">
+                  Type
+                </label>
+                <div className="field">
+                  <select
+                    name="adsType"
+                    onChange={this.handleAdsTypeChanged}
+                    value={this.props.settings.adsSettings.type}
+                  >
+                    <option value={AdsTypes.NONE}>None</option>
+                    <option value={AdsTypes.AUDIENCE_NETWORK}>
+                      Audience Network
+                    </option>
+                    <option value={AdsTypes.RAW_HTML}>Other / Raw HTML</option>
+                  </select>
+                </div>
+                {audienceNetworkDiv}
+                {adsRawHtmlDiv}
+              </div>
+            </div>
+          </div>
+        </Accordion.Content>
+      </div>
+    );
+  }
+}
+
+module.exports = TransformationSettings;
diff --git a/src/js/containers/AppContainer.react.js b/src/js/containers/AppContainer.react.js
index 9d8124f..7e80af1 100644
--- a/src/js/containers/AppContainer.react.js
+++ b/src/js/containers/AppContainer.react.js
@@ -13,16 +13,19 @@ const { Container, Store } = require('flux/utils');
 const RuleStore = require('../data/RuleStore.js');
 const RuleDefinitionStore = require('../data/RuleDefinitionStore.js');
 const EditorStore = require('../data/EditorStore.js');
+const SettingsStore = require('../data/SettingsStore');
 const App = require('../components/App.react.js');
 
 import type { State as RuleStoreState } from '../data/RuleStore';
 import type { State as RuleDefinitionStoreState } from '../data/RuleDefinitionStore';
 import type { Editor } from '../models/Editor';
+import type { TransformationSettings } from '../models/TransformationSettings';
 
 export type Props = {
   rules: RuleStoreState,
   ruleDefinitions: RuleDefinitionStoreState,
-  editor: Editor
+  editor: Editor,
+  settings: TransformationSettings
 };
 
 function AppContainer(props: Props) {
@@ -38,11 +41,12 @@ function getState(): Props {
     rules: RuleStore.getState(),
     ruleDefinitions: RuleDefinitionStore.getState(),
     editor: EditorStore.getState(),
+    settings: SettingsStore.getState(),
   };
 }
 
 function getStores(): Store[] {
-  return [RuleStore, RuleDefinitionStore, EditorStore];
+  return [RuleStore, RuleDefinitionStore, EditorStore, SettingsStore];
 }
 
 module.exports = Container.createFunctional(AppContainer, getStores, getState);
diff --git a/src/js/data/AdsTypes.js b/src/js/data/AdsTypes.js
new file mode 100644
index 0000000..a9e5d7e
--- /dev/null
+++ b/src/js/data/AdsTypes.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const AdsTypes = {
+  NONE: 'NONE',
+  AUDIENCE_NETWORK: 'AUDIENCE_NETWORK',
+  RAW_HTML: 'RAW_HTML',
+};
+
+export type AdsType = $Values<typeof AdsTypes>;
+
+export default AdsTypes;
diff --git a/src/js/data/SettingsActionTypes.js b/src/js/data/SettingsActionTypes.js
new file mode 100644
index 0000000..7241f36
--- /dev/null
+++ b/src/js/data/SettingsActionTypes.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const SettingsActionTypes = {
+  EDIT_ADS_RAW_HTML: 'EDIT_ADS_RAW_HTML',
+  EDIT_ADS_TYPE: 'EDIT_ADS_TYPE',
+  EDIT_ANALYTICS_RAW_HTML: 'EDIT_ANALYTICS_RAW_HTML',
+  EDIT_AUDIENCE_NETWORK_PLACEMENT_ID: 'EDIT_AUDIENCE_NETWORK_PLACEMENT_ID',
+  EDIT_FB_PIXEL_ID: 'EDIT_FB_PIXEL_ID',
+  EDIT_STYLE_NAME: 'EDIT_STYLE_NAME',
+};
+
+export type SettingsActionType = $Values<typeof SettingsActionTypes>;
+
+export default SettingsActionTypes;
diff --git a/src/js/data/SettingsActions.js b/src/js/data/SettingsActions.js
new file mode 100644
index 0000000..b19a523
--- /dev/null
+++ b/src/js/data/SettingsActions.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const RulesEditorDispatcher = require('./RulesEditorDispatcher.js');
+
+import SettingsActionTypes from './SettingsActionTypes.js';
+
+class SettingsActions {
+  static editAdsRawHtml(adsRawHtml: string) {
+    RulesEditorDispatcher.dispatch({
+      type: SettingsActionTypes.EDIT_ADS_RAW_HTML,
+      adsRawHtml,
+    });
+  }
+
+  static editAdsType(adsType: string) {
+    RulesEditorDispatcher.dispatch({
+      type: SettingsActionTypes.EDIT_ADS_TYPE,
+      adsType,
+    });
+  }
+
+  static editAnalyticsRawHtml(analyticsRawHtml: string) {
+    RulesEditorDispatcher.dispatch({
+      type: SettingsActionTypes.EDIT_ANALYTICS_RAW_HTML,
+      analyticsRawHtml,
+    });
+  }
+
+  static editAudienceNetworkPlacementId(audienceNetworkPlacementId: string) {
+    RulesEditorDispatcher.dispatch({
+      type: SettingsActionTypes.EDIT_AUDIENCE_NETWORK_PLACEMENT_ID,
+      audienceNetworkPlacementId,
+    });
+  }
+
+  static editFbPixelId(fbPixelId: string) {
+    RulesEditorDispatcher.dispatch({
+      type: SettingsActionTypes.EDIT_FB_PIXEL_ID,
+      fbPixelId,
+    });
+  }
+
+  static editStyleName(styleName: string) {
+    RulesEditorDispatcher.dispatch({
+      type: SettingsActionTypes.EDIT_STYLE_NAME,
+      styleName,
+    });
+  }
+}
+
+module.exports = SettingsActions;
diff --git a/src/js/data/SettingsStore.js b/src/js/data/SettingsStore.js
new file mode 100644
index 0000000..5832ebc
--- /dev/null
+++ b/src/js/data/SettingsStore.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { ReduceStore } from 'flux/utils';
+const RulesEditorDispatcher = require('./RulesEditorDispatcher.js');
+
+import type { TransformationSettings } from '../models/TransformationSettings';
+import { TransformationSettingsFactory } from '../models/TransformationSettings';
+
+import type { SettingsActionType } from './SettingsActionTypes';
+import SettingsActionTypes from './SettingsActionTypes';
+
+type Action = {
+  adsRawHtml?: string,
+  adsType?: string,
+  analyticsRawHtml?: string,
+  audienceNetworkPlacementId?: string,
+  fbPixelId?: string,
+  styleName?: string,
+  type: SettingsActionType
+};
+
+class SettingsStore extends ReduceStore<TransformationSettings> {
+  constructor() {
+    super(RulesEditorDispatcher);
+  }
+
+  getInitialState(): TransformationSettings {
+    return TransformationSettingsFactory();
+  }
+
+  reduce(
+    state: TransformationSettings,
+    action: Action
+  ): TransformationSettings {
+    switch (action.type) {
+      case SettingsActionTypes.EDIT_ADS_RAW_HTML:
+        return state.set(
+          'adsSettings',
+          state.get('adsSettings').set('rawHtml', action.adsRawHtml || '')
+        );
+      case SettingsActionTypes.EDIT_ADS_TYPE:
+        return state.set(
+          'adsSettings',
+          state.get('adsSettings').set('type', action.adsType || '')
+        );
+      case SettingsActionTypes.EDIT_ANALYTICS_RAW_HTML:
+        return state.set(
+          'analyticsSettings',
+          state
+            .get('analyticsSettings')
+            .set('rawHtml', action.analyticsRawHtml || '')
+        );
+      case SettingsActionTypes.EDIT_AUDIENCE_NETWORK_PLACEMENT_ID:
+        return state.set(
+          'adsSettings',
+          state
+            .get('adsSettings')
+            .set(
+              'audienceNetworkPlacementId',
+              action.audienceNetworkPlacementId || ''
+            )
+        );
+      case SettingsActionTypes.EDIT_FB_PIXEL_ID:
+        return state.set(
+          'analyticsSettings',
+          state
+            .get('analyticsSettings')
+            .set('fbPixelId', action.fbPixelId || '')
+        );
+      case SettingsActionTypes.EDIT_STYLE_NAME:
+        return state.set('styleName', action.styleName || '');
+
+      default:
+        return state;
+    }
+  }
+}
+
+module.exports = new SettingsStore();
diff --git a/src/js/models/AdsSettings.js b/src/js/models/AdsSettings.js
new file mode 100644
index 0000000..80a88fc
--- /dev/null
+++ b/src/js/models/AdsSettings.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { Record } from 'immutable';
+import type { RecordOf, RecordFactory } from 'immutable';
+
+export type AdsSettingsRecord = {
+  audienceNetworkPlacementId: string,
+  rawHtml: string,
+  type: string
+};
+
+export const AdsSettingsFactory: RecordFactory<AdsSettingsRecord> = Record({
+  audienceNetworkPlacementId: '',
+  rawHtml: '',
+  type: '',
+});
+
+export type AdsSettings = RecordOf<AdsSettingsRecord> & AdsSettingsFactory;
diff --git a/src/js/models/AnalyticsSettings.js b/src/js/models/AnalyticsSettings.js
new file mode 100644
index 0000000..7993aea
--- /dev/null
+++ b/src/js/models/AnalyticsSettings.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { Record } from 'immutable';
+import type { RecordOf, RecordFactory } from 'immutable';
+
+export type AnalyticsSettingsRecord = {
+  fbPixelId: string,
+  rawHtml: string
+};
+
+export const AnalyticsSettingsFactory: RecordFactory<
+  AnalyticsSettingsRecord
+> = Record({
+  fbPixelId: '',
+  rawHtml: '',
+});
+
+export type AnalyticsSettings = RecordOf<AnalyticsSettingsRecord> &
+  AnalyticsSettingsFactory;
diff --git a/src/js/models/TransformationSettings.js b/src/js/models/TransformationSettings.js
new file mode 100644
index 0000000..6384384
--- /dev/null
+++ b/src/js/models/TransformationSettings.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { Record } from 'immutable';
+import type { RecordOf, RecordFactory } from 'immutable';
+
+import { AdsSettingsFactory } from './AdsSettings';
+import { AnalyticsSettingsFactory } from './AnalyticsSettings';
+
+import type { AdsSettings } from './AdsSettings';
+import type { AnalyticsSettings } from './AnalyticsSettings';
+
+export type TransformationSettingsRecord = {
+  adsSettings: AdsSettings,
+  analyticsSettings: AnalyticsSettings,
+  styleName: string
+};
+
+export const TransformationSettingsFactory: RecordFactory<
+  TransformationSettingsRecord
+> = Record({
+  adsSettings: AdsSettingsFactory(),
+  analyticsSettings: AnalyticsSettingsFactory(),
+  styleName: '',
+});
+
+export type TransformationSettings = RecordOf<TransformationSettingsRecord> &
+  TransformationSettingsFactory;
diff --git a/src/js/utils/RuleExporter.js b/src/js/utils/RuleExporter.js
index 1fef5ba..ec9215f 100644
--- a/src/js/utils/RuleExporter.js
+++ b/src/js/utils/RuleExporter.js
@@ -8,20 +8,26 @@
  * @flow
  */
 
+import AdsTypes from '../data/AdsTypes';
 import Immutable from 'immutable';
 import type { Rule } from '../models/Rule';
 import type { RuleProperty } from '../models/RuleProperty';
 import type { RuleDefinition } from '../models/RuleDefinition';
 import type { RulePropertyDefinition } from '../models/RulePropertyDefinition';
+import type { TransformationSettings } from '../models/TransformationSettings';
 import RuleActions from '../data/RuleActions';
 import { RuleFactory } from '../models/Rule';
 import { RulePropertyFactory } from '../models/RuleProperty';
 import RulePropertyTypes from '../models/RulePropertyTypes';
 import { RuleUtils } from '../utils/RuleUtils';
 import { RulePropertyUtils } from '../utils/RulePropertyUtils';
+import SettingsActions from '../data/SettingsActions';
 
 export type JSONFormat = {
-  rules: RuleJSON[]
+  ads?: { audience_network_placement_id?: string, raw_html?: string },
+  analytics?: { fb_pixel_id?: string, raw_html?: string },
+  rules: RuleJSON[],
+  style_name?: string
 };
 
 type RulePropertyJSON = {
@@ -37,6 +43,16 @@ type RuleJSON = {
   properties?: { [string]: RulePropertyJSON }
 };
 
+type AdsJSON = {
+  audience_network_placement_id?: string,
+  raw_html?: string
+};
+
+type AnalyticsJSON = {
+  fb_pixel_id?: string,
+  raw_html?: string
+};
+
 class RuleExporter {
   static import(
     data: string,
@@ -52,10 +68,65 @@ class RuleExporter {
     rules
       .filter(rule => rule != null)
       .forEach(rule => (rule != null ? RuleActions.addRule(rule) : null));
+
+    this.importSettings(json);
   }
 
-  static export(rules: Immutable.Map<string, Rule>): JSONFormat {
-    return {
+  static importSettings(json: JSONFormat): void {
+    // Restore style name, if present
+    if (json.style_name) {
+      SettingsActions.editStyleName(json.style_name);
+    }
+
+    this.importAdsSettings(json);
+    this.importAnalyticsSettings(json);
+  }
+
+  static importAdsSettings(json: JSONFormat): void {
+    const { ads } = json;
+
+    // Restore Ads Settings, if present
+    if (ads) {
+      if (ads.audience_network_placement_id) {
+        SettingsActions.editAudienceNetworkPlacementId(
+          ads.audience_network_placement_id
+        );
+        SettingsActions.editAdsType(AdsTypes.AUDIENCE_NETWORK);
+        return;
+      } else if (ads.raw_html) {
+        SettingsActions.editAdsRawHtml(ads.raw_html);
+        SettingsActions.editAdsType(AdsTypes.RAW_HTML);
+        return;
+      }
+    }
+
+    SettingsActions.editAdsType(AdsTypes.NONE);
+  }
+
+  static importAnalyticsSettings(json: JSONFormat): void {
+    const { analytics } = json;
+    // Restore Analytics Settings, if present
+    if (!analytics) {
+      return;
+    }
+    const { fb_pixel_id: fbPixelId, raw_html: rawHtml } = analytics;
+
+    // Restore FB Pixel ID, if present
+    if (fbPixelId) {
+      SettingsActions.editFbPixelId(fbPixelId);
+    }
+
+    // Restore Analytics Raw HTML, if present
+    if (rawHtml) {
+      SettingsActions.editAnalyticsRawHtml(rawHtml);
+    }
+  }
+
+  static export(
+    rules: Immutable.Map<string, Rule>,
+    settings: TransformationSettings
+  ): JSONFormat {
+    let exported = {
       rules: [
         { class: 'TextNodeRule' },
         ...Array.from(
@@ -67,6 +138,22 @@ class RuleExporter {
         ),
       ],
     };
+
+    if (settings && settings.styleName) {
+      exported = { style_name: settings.styleName, ...exported };
+    }
+
+    const ads = this.createAdsJSON(settings);
+    if (ads) {
+      exported = { ads, ...exported };
+    }
+
+    const analytics = this.createAnalyticsJSON(settings);
+    if (analytics) {
+      exported = { analytics, ...exported };
+    }
+
+    return exported;
   }
 
   static createJSONFromRule(rule: Rule): ?RuleJSON {
@@ -126,6 +213,49 @@ class RuleExporter {
     return null;
   }
 
+  static createAdsJSON(settings: TransformationSettings): ?AdsJSON {
+    if (!settings || !settings.adsSettings) {
+      return null;
+    }
+
+    const adsSettings = settings.adsSettings;
+    switch (adsSettings.type) {
+      case AdsTypes.AUDIENCE_NETWORK:
+        return adsSettings.audienceNetworkPlacementId
+          ? {
+            audience_network_placement_id:
+                adsSettings.audienceNetworkPlacementId,
+          }
+          : null;
+      case AdsTypes.RAW_HTML:
+        return adsSettings.rawHtml
+          ? {
+            raw_html: adsSettings.rawHtml,
+          }
+          : null;
+      case AdsTypes.NONE:
+      default:
+        return null;
+    }
+  }
+
+  static createAnalyticsJSON(settings: TransformationSettings): ?AnalyticsJSON {
+    if (!settings || !settings.analyticsSettings) {
+      return null;
+    }
+
+    // Do not build the object if there are no settings
+    const analyticsSettings = settings.analyticsSettings;
+    if (!analyticsSettings.fbPixelId && !analyticsSettings.rawHtml) {
+      return null;
+    }
+
+    return {
+      fb_pixel_id: settings.analyticsSettings.fbPixelId,
+      raw_html: settings.analyticsSettings.rawHtml,
+    };
+  }
+
   static createRuleFromJSON(
     ruleJSON: RuleJSON,
     ruleDefinition: ?RuleDefinition
diff --git a/src/js/utils/__tests__/RuleExporter.test.js b/src/js/utils/__tests__/RuleExporter.test.js
index 45025f6..de8b205 100644
--- a/src/js/utils/__tests__/RuleExporter.test.js
+++ b/src/js/utils/__tests__/RuleExporter.test.js
@@ -7,12 +7,19 @@
  */
 
 import { Map, Set } from 'immutable';
+import AdsTypes from '../../data/AdsTypes';
+import RulesEditorDispatcher from '../../data/RulesEditorDispatcher';
 import RuleExporter from '../RuleExporter';
 import { RuleFactory } from '../../models/Rule';
 import { RuleDefinitionFactory } from '../../models/RuleDefinition';
 import { RulePropertyDefinitionFactory } from '../../models/RulePropertyDefinition';
 import { RulePropertyFactory } from '../../models/RuleProperty';
 import RulePropertyTypes from '../../models/RulePropertyTypes';
+import SettingsActionTypes from '../../data/SettingsActionTypes';
+import { TransformationSettingsFactory } from '../../models/TransformationSettings';
+
+// Replace the default dispatcher with an automatic mock
+jest.mock('../../data/RulesEditorDispatcher');
 
 // Rules that are always included in the exported file
 const defaultExportedRules = [{ class: 'TextNodeRule' }];
@@ -82,4 +89,324 @@ describe('RuleExporter', () => {
       },
     ]);
   });
+
+  describe('Settings', () => {
+    beforeEach(() => {
+      // Clear information of previous calls to the dispatch mock function
+      RulesEditorDispatcher.dispatch.mockClear();
+    });
+
+    it('should import style name', () => {
+      const styleName = 'style' + Math.random().toString();
+      const importedObj = {
+        rules: [],
+        style_name: styleName,
+      };
+
+      RuleExporter.import(JSON.stringify(importedObj), Map());
+
+      // Inspect all the arguments (array) passed to the dispatch function
+      expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+        {
+          type: SettingsActionTypes.EDIT_STYLE_NAME,
+          styleName: styleName,
+        },
+      ]);
+    });
+
+    it('should not export style name by default', () => {
+      const exported = RuleExporter.export(
+        Map(),
+        TransformationSettingsFactory()
+      );
+
+      expect(exported.style_name).toBeUndefined();
+    });
+
+    it('should export style name', () => {
+      // use random style name
+      const styleName = 'style' + Math.random().toString();
+      const transformationSettings = TransformationSettingsFactory({
+        styleName,
+      });
+
+      const exported = RuleExporter.export(Map(), transformationSettings);
+
+      expect(exported.style_name).toEqual(styleName);
+    });
+
+    describe('Ads Settings', () => {
+      it('should import Audience Network Placement ID', () => {
+        const audienceNetworkPlacementId = Math.random().toString();
+        const importedObj = {
+          rules: [],
+          ads: {
+            audience_network_placement_id: audienceNetworkPlacementId,
+          },
+        };
+
+        RuleExporter.import(JSON.stringify(importedObj), Map());
+
+        // Inspect all the arguments (array) passed to the dispatch function
+        expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+          {
+            // Expected action to set AN ID
+            type: SettingsActionTypes.EDIT_AUDIENCE_NETWORK_PLACEMENT_ID,
+            audienceNetworkPlacementId: audienceNetworkPlacementId,
+          },
+        ]);
+        expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+          {
+            // Expected action to set Ads type
+            type: SettingsActionTypes.EDIT_ADS_TYPE,
+            adsType: AdsTypes.AUDIENCE_NETWORK,
+          },
+        ]);
+      });
+
+      it('should import Ads Raw HTML', () => {
+        const rawHtml = Math.random().toString();
+        const importedObj = {
+          rules: [],
+          ads: {
+            raw_html: rawHtml,
+          },
+        };
+
+        RuleExporter.import(JSON.stringify(importedObj), Map());
+
+        // Inspect all the arguments (array) passed to the dispatch function
+        expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+          {
+            // Expected action to set Raw HTML
+            type: SettingsActionTypes.EDIT_ADS_RAW_HTML,
+            adsRawHtml: rawHtml,
+          },
+        ]);
+        expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+          {
+            // Expected action to set Ads type
+            type: SettingsActionTypes.EDIT_ADS_TYPE,
+            adsType: AdsTypes.RAW_HTML,
+          },
+        ]);
+      });
+
+      it('should import no ads if null', () => {
+        const importedObj = {
+          rules: [],
+          // ads: undefined, Excluded
+        };
+
+        RuleExporter.import(JSON.stringify(importedObj), Map());
+
+        // Inspect all the arguments (array) passed to the dispatch function
+        expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+          {
+            // Expected action to set Raw HTML
+            type: SettingsActionTypes.EDIT_ADS_TYPE,
+            adsType: AdsTypes.NONE,
+          },
+        ]);
+      });
+
+      it('should import no ads if no ads values', () => {
+        const importedObj = {
+          rules: [],
+          ads: {
+            // no ads values
+          },
+        };
+
+        RuleExporter.import(JSON.stringify(importedObj), Map());
+
+        // Inspect all the arguments (array) passed to the dispatch function
+        expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+          {
+            // Expected action to set Raw HTML
+            type: SettingsActionTypes.EDIT_ADS_TYPE,
+            adsType: AdsTypes.NONE,
+          },
+        ]);
+      });
+
+      it('should not export Ads Settings by default', () => {
+        const exported = RuleExporter.export(Map());
+
+        expect(exported.ads).toBeUndefined();
+      });
+
+      it('should export Audience Network Placement ID', () => {
+        // use random AN Placement ID
+        const audienceNetworkPlacementId = Math.random().toString();
+        const transformationSettings = TransformationSettingsFactory({
+          adsSettings: {
+            audienceNetworkPlacementId,
+            type: AdsTypes.AUDIENCE_NETWORK,
+          },
+        });
+
+        const exported = RuleExporter.export(Map(), transformationSettings);
+
+        expect(exported.ads.audience_network_placement_id).toEqual(
+          audienceNetworkPlacementId
+        );
+      });
+
+      it('should not export Audience Network Placement ID if Raw', () => {
+        // use random AN Placement ID
+        const audienceNetworkPlacementId = Math.random().toString();
+        const transformationSettings = TransformationSettingsFactory({
+          adsSettings: {
+            audienceNetworkPlacementId,
+            rawHtml: 'somthing',
+            type: AdsTypes.RAW_HTML,
+          },
+        });
+
+        const exported = RuleExporter.export(Map(), transformationSettings);
+
+        expect(exported.ads.audience_network_placement_id).toBeUndefined();
+      });
+
+      it('should not export Audience Network Placement ID if None', () => {
+        // use random AN Placement ID
+        const audienceNetworkPlacementId = Math.random().toString();
+        const transformationSettings = TransformationSettingsFactory({
+          adsSettings: {
+            audienceNetworkPlacementId,
+            type: AdsTypes.NONE,
+          },
+        });
+
+        const exported = RuleExporter.export(Map(), transformationSettings);
+
+        expect(exported.ads).toBeUndefined();
+      });
+
+      it('should export Ads Raw HTML', () => {
+        // use random raw HTML
+        const rawHtml = Math.random().toString();
+        const transformationSettings = TransformationSettingsFactory({
+          adsSettings: {
+            rawHtml,
+            type: AdsTypes.RAW_HTML,
+          },
+        });
+
+        const exported = RuleExporter.export(Map(), transformationSettings);
+
+        expect(exported.ads.raw_html).toEqual(rawHtml);
+      });
+
+      it('should not export Ads Raw HTML if AN', () => {
+        // use random raw HTML
+        const rawHtml = Math.random().toString();
+        const transformationSettings = TransformationSettingsFactory({
+          adsSettings: {
+            rawHtml,
+            audienceNetworkPlacementId: 'something',
+            type: AdsTypes.AUDIENCE_NETWORK,
+          },
+        });
+
+        const exported = RuleExporter.export(Map(), transformationSettings);
+
+        expect(exported.ads.raw_html).toBeUndefined();
+      });
+
+      it('should not export Ads Raw HTML if None', () => {
+        // use random raw HTML
+        const rawHtml = Math.random().toString();
+        const transformationSettings = TransformationSettingsFactory({
+          adsSettings: {
+            rawHtml,
+            type: AdsTypes.NONE,
+          },
+        });
+
+        const exported = RuleExporter.export(Map(), transformationSettings);
+
+        expect(exported.ads).toBeUndefined();
+      });
+    });
+
+    describe('Analytics Settings', () => {
+      it('should import FB Pixel ID', () => {
+        const fbPixelId = Math.random().toString();
+        const importedObj = {
+          rules: [],
+          analytics: {
+            fb_pixel_id: fbPixelId,
+          },
+        };
+
+        RuleExporter.import(JSON.stringify(importedObj), Map());
+
+        // Inspect all the arguments (array) passed to the dispatch function
+        expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+          {
+            // Expected action to set FB Pixel ID
+            type: SettingsActionTypes.EDIT_FB_PIXEL_ID,
+            fbPixelId: fbPixelId,
+          },
+        ]);
+      });
+
+      it('should import Analytics Raw HTML', () => {
+        const rawHtml = Math.random().toString();
+        const importedObj = {
+          rules: [],
+          analytics: {
+            raw_html: rawHtml,
+          },
+        };
+
+        RuleExporter.import(JSON.stringify(importedObj), Map());
+
+        // Inspect all the arguments (array) passed to the dispatch function
+        expect(RulesEditorDispatcher.dispatch.mock.calls).toContainEqual([
+          {
+            // Expected action to set Raw HTML
+            type: SettingsActionTypes.EDIT_ANALYTICS_RAW_HTML,
+            analyticsRawHtml: rawHtml,
+          },
+        ]);
+      });
+
+      it('should not export Analytics Settings by default', () => {
+        const exported = RuleExporter.export(Map());
+
+        expect(exported.analytics).toBeUndefined();
+      });
+
+      it('should export FB Pixel ID', () => {
+        // use random FB Pixel ID
+        const fbPixelId = Math.random().toString();
+        const transformationSettings = TransformationSettingsFactory({
+          analyticsSettings: {
+            fbPixelId,
+          },
+        });
+
+        const exported = RuleExporter.export(Map(), transformationSettings);
+
+        expect(exported.analytics.fb_pixel_id).toEqual(fbPixelId);
+      });
+
+      it('should export Analytics Raw HTML', () => {
+        // use random raw HTML
+        const rawHtml = Math.random().toString();
+        const transformationSettings = TransformationSettingsFactory({
+          analyticsSettings: {
+            rawHtml,
+          },
+        });
+
+        const exported = RuleExporter.export(Map(), transformationSettings);
+
+        expect(exported.analytics.raw_html).toEqual(rawHtml);
+      });
+    });
+  });
 });
diff --git a/webserver/composer.json b/webserver/composer.json
index 489dca3..d1fe2e9 100755
--- a/webserver/composer.json
+++ b/webserver/composer.json
@@ -11,7 +11,7 @@
     }],
     "require": {
         "php": "^5.4 || ^7.0",
-        "facebook/facebook-instant-articles-sdk-php": "^1.8.4",
+        "facebook/facebook-instant-articles-sdk-php": "^1.9.2",
         "facebook/facebook-instant-articles-sdk-extensions-in-php": "^0.2.1"
     }
 }
diff --git a/webserver/composer.lock b/webserver/composer.lock
index 3c30267..8734d0e 100644
--- a/webserver/composer.lock
+++ b/webserver/composer.lock
@@ -4,8 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "hash": "03264898b010f9c0c04cd88bad68473d",
-    "content-hash": "6b299383ecdfc7acb96e195bbfbe4f0a",
+    "content-hash": "ca3dda77e3624f4fd8e183dc6c9df87c",
     "packages": [
         {
             "name": "doctrine/instantiator",
@@ -59,7 +58,7 @@
                 "constructor",
                 "instantiate"
             ],
-            "time": "2015-06-14 21:17:01"
+            "time": "2015-06-14T21:17:01+00:00"
         },
         {
             "name": "facebook/facebook-instant-articles-sdk-extensions-in-php",
@@ -112,26 +111,26 @@
                 "instantarticles",
                 "sdk"
             ],
-            "time": "2018-02-08 18:21:18"
+            "time": "2018-02-08T18:21:18+00:00"
         },
         {
             "name": "facebook/facebook-instant-articles-sdk-php",
-            "version": "v1.8.4",
+            "version": "v1.9.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/facebook/facebook-instant-articles-sdk-php.git",
-                "reference": "28d46b68ccf96ee7a3370a746efdf865da2e18f6"
+                "reference": "d2ccefa4da393ea33b9c095a7ebce7b352e31480"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/facebook/facebook-instant-articles-sdk-php/zipball/28d46b68ccf96ee7a3370a746efdf865da2e18f6",
-                "reference": "28d46b68ccf96ee7a3370a746efdf865da2e18f6",
+                "url": "https://api.github.com/repos/facebook/facebook-instant-articles-sdk-php/zipball/d2ccefa4da393ea33b9c095a7ebce7b352e31480",
+                "reference": "d2ccefa4da393ea33b9c095a7ebce7b352e31480",
                 "shasum": ""
             },
             "require": {
                 "facebook/graph-sdk": "~5.0",
                 "php": "^5.4 || ^7.0",
-                "symfony/css-selector": "2.8.*"
+                "symfony/css-selector": "^2.8 || ^3.0"
             },
             "require-dev": {
                 "fzaninotto/faker": "^1.6.0",
@@ -164,20 +163,20 @@
                 "instant",
                 "sdk"
             ],
-            "time": "2018-02-09 16:24:01"
+            "time": "2018-03-16T19:42:33+00:00"
         },
         {
             "name": "facebook/graph-sdk",
-            "version": "5.6.1",
+            "version": "5.6.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/facebook/php-graph-sdk.git",
-                "reference": "2f9639c15ae043911f40ffe44080b32bac2c5280"
+                "reference": "030f8c5b9b1a6c09e71719fd638b66ea4daa2f10"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/facebook/php-graph-sdk/zipball/2f9639c15ae043911f40ffe44080b32bac2c5280",
-                "reference": "2f9639c15ae043911f40ffe44080b32bac2c5280",
+                "url": "https://api.github.com/repos/facebook/php-graph-sdk/zipball/030f8c5b9b1a6c09e71719fd638b66ea4daa2f10",
+                "reference": "030f8c5b9b1a6c09e71719fd638b66ea4daa2f10",
                 "shasum": ""
             },
             "require": {
@@ -222,29 +221,29 @@
                 "facebook",
                 "sdk"
             ],
-            "time": "2017-08-16 17:28:07"
+            "time": "2018-02-14T23:24:51+00:00"
         },
         {
             "name": "symfony/css-selector",
-            "version": "v2.8.34",
+            "version": "v3.4.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/css-selector.git",
-                "reference": "c5b39674eacd34adedbef78227c57109caa9e318"
+                "reference": "544655f1fc078a9cd839fdda2b7b1e64627c826a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/css-selector/zipball/c5b39674eacd34adedbef78227c57109caa9e318",
-                "reference": "c5b39674eacd34adedbef78227c57109caa9e318",
+                "url": "https://api.github.com/repos/symfony/css-selector/zipball/544655f1fc078a9cd839fdda2b7b1e64627c826a",
+                "reference": "544655f1fc078a9cd839fdda2b7b1e64627c826a",
                 "shasum": ""
             },
             "require": {
-                "php": ">=5.3.9"
+                "php": "^5.5.9|>=7.0.8"
             },
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-master": "2.8-dev"
+                    "dev-master": "3.4-dev"
                 }
             },
             "autoload": {
@@ -275,7 +274,7 @@
             ],
             "description": "Symfony CssSelector Component",
             "homepage": "https://symfony.com",
-            "time": "2018-01-03 07:36:31"
+            "time": "2018-02-03T14:55:07+00:00"
         }
     ],
     "packages-dev": [],
diff --git a/webserver/preview.php b/webserver/preview.php
index d5b52d5..94e61fd 100755
--- a/webserver/preview.php
+++ b/webserver/preview.php
@@ -55,7 +55,7 @@ function exception_error_handler($errno, $errstr, $errfile, $errline ) {
   $warnings = $transformer->getWarnings();
 
   $properties = array(
-    'styles-folder' => __DIR__.'/' // Where the styles are stored
+    'styles-folder' => __DIR__.'/styles/' // Where the styles are stored
   );
 
   if ($instant_article->isValid()) {
diff --git a/webserver/default.style.json b/webserver/styles/default.style.json
similarity index 100%
rename from webserver/default.style.json
rename to webserver/styles/default.style.json