diff --git a/gatsby-config.js b/gatsby-config.js
index 999bd3d..f75f8c5 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,14 +1,17 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
+    title: `Gatsby IPFS Adminlte Starter`,
+    description: `A gatsbyjs app with adminlte2 integration.`,
     author: `@gatsbyjs`,
   },
+  pathPrefix: '__GATSBY_IPFS_PATH_PREFIX__',
   plugins: [
+    'gatsby-plugin-ipfs',
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {
+        start_url: '__GATSBY_IPFS_PATH_PREFIX__',
         name: `images`,
         path: `${__dirname}/src/images`,
       },
@@ -20,13 +23,14 @@ module.exports = {
       options: {
         name: `gatsby-starter-default`,
         short_name: `starter`,
-        start_url: `/`,
+        start_url: '__GATSBY_IPFS_PATH_PREFIX__',
         background_color: `#663399`,
         theme_color: `#663399`,
         display: `minimal-ui`,
         icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
       },
     },
+    
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
diff --git a/package.json b/package.json
index 974b6a8..906a752 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,8 @@
 {
-  "name": "gatsby-starter-default",
-  "private": true,
-  "description": "A simple starter to get up and developing quickly with Gatsby",
-  "version": "0.1.0",
-  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "name": "gatsby-ipfs-adminlte",
+  "description": "A gatsbyjs app with adminlte2 integration.",
+  "version": "1.0.0",
+  "author": "Chris Troutner <chris.troutner@gmail.com>",
   "dependencies": {
     "adminlte-2-react": "^0.1.27",
     "gatsby": "^2.22.15",
@@ -28,7 +27,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "gatsby build",
+    "build": "gatsby build --prefix-paths",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
     "start": "npm run develop",
diff --git a/src/components/admin-lte/example.js b/src/components/admin-lte/example.js
new file mode 100644
index 0000000..4b5a86c
--- /dev/null
+++ b/src/components/admin-lte/example.js
@@ -0,0 +1,36 @@
+import React from "react"
+
+import { Content, Row, Col, Box, Button } from "adminlte-2-react"
+
+class Example extends React.Component {
+  state = {}
+
+  render() {
+    return (
+      <Content
+        title="Test"
+        subTitle="Getting started with adminlte-2-react"
+        browserTitle="Hello World"
+      >
+        <Row>
+          <Col xs={6}>
+            <Box
+              title="My first box"
+              type="primary"
+              closable
+              collapsable
+              footer={<Button type="danger" text="Danger Button" />}
+            >
+              Hello World
+            </Box>
+          </Col>
+          <Col xs={6}>
+            <Box title="Another box">Content goes here</Box>
+          </Col>
+        </Row>
+      </Content>
+    )
+  }
+}
+
+export default Example
diff --git a/src/components/admin-lte/example2.js b/src/components/admin-lte/example2.js
new file mode 100644
index 0000000..a16d1e2
--- /dev/null
+++ b/src/components/admin-lte/example2.js
@@ -0,0 +1,28 @@
+import React from "react"
+import Image from "../image"
+
+import { Content, Row, Col } from "adminlte-2-react"
+
+class Example2 extends React.Component {
+  state = {}
+
+  render() {
+    return (
+      <Content
+        title="IMG"
+        subTitle="Getting started with adminlte-2-react"
+        browserTitle="Hello World"
+      >
+        <Row>
+          <Col xs={3}></Col>
+          <Col xs={6}>
+            <Image />
+          </Col>
+          <Col xs={3}></Col>
+        </Row>
+      </Content>
+    )
+  }
+}
+
+export default Example2
diff --git a/src/components/admin-lte/example3.js b/src/components/admin-lte/example3.js
new file mode 100644
index 0000000..090fad2
--- /dev/null
+++ b/src/components/admin-lte/example3.js
@@ -0,0 +1,285 @@
+import React from "react"
+
+import {
+  Content,
+  Row,
+  Col,
+  Box,
+  Button,
+  Inputs,
+  Divider,
+} from "adminlte-2-react"
+
+const { Text, Checkbox, Radio, Select } = Inputs
+
+class Example3 extends React.Component {
+  state = {}
+
+  render() {
+    return (
+      <Content
+        title="General Form Elements"
+        subTitle="Preview"
+        browserTitle="AdminLTE 2 | General Form Elements"
+      >
+        <Row>
+          <Col md={6}>
+            <Box
+              type="primary"
+              title="Quick Example"
+              border
+              footer={<Button type="primary" text="Submit" pullLeft />}
+            >
+              <Text
+                name="exampleInputEmail1"
+                placeholder="Enter email"
+                label="Email address"
+                labelPosition="above"
+              />
+              <Text
+                name="exampleInputPassword1"
+                placeholder="Password"
+                label="Password"
+                labelPosition="above"
+                inputType="password"
+              />
+              <Text
+                name="exampleInputPassword1"
+                label="File input"
+                labelPosition="above"
+                inputType="file"
+                help="Example block-level help text here."
+              />
+              <Checkbox label="Check me out" />
+            </Box>
+            <Box type="success" title="Different Height" border>
+              <Text placeholder=".input-lg" size="lg" labelPosition="none" />
+              <br />
+              <Text placeholder="Default input" labelPosition="none" />
+              <br />
+              <Text placeholder=".input-sm" size="sm" labelPosition="none" />
+            </Box>
+            <Box type="danger" title="Different Width" border>
+              <Row>
+                <Col xs={3}>
+                  <Text placeholder=".col-xs-3" labelPosition="none" />
+                </Col>
+                <Col xs={4}>
+                  <Text placeholder=".col-xs-4" labelPosition="none" />
+                </Col>
+                <Col xs={5}>
+                  <Text placeholder=".col-xs-5" labelPosition="none" />
+                </Col>
+              </Row>
+            </Box>
+            <Box type="info" title="Input Addon" border>
+              <Text labelPosition="none" placeholder="Username" addonLeft="@" />
+              <br />
+              <Text labelPosition="none" addonRight=".00" />
+              <br />
+              <Text labelPosition="none" addonLeft="$" addonRight=".00" />
+              <h4>With icons</h4>
+              <Text
+                labelPosition="none"
+                placeholder="Email"
+                iconLeft="fas-envelope"
+              />
+              <br />
+              <Text labelPosition="none" iconRight="fas-check" />
+              <br />
+              <Text
+                labelPosition="none"
+                iconRight="fas-ambulance"
+                iconLeft="fas-dollar-sign"
+              />
+              <h4>With checkbox and radio inputs</h4>
+              <Row>
+                <Col lg={6}>
+                  <Text checkboxLeft labelPosition="none" />
+                </Col>
+                <Col lg={6}>
+                  <Text radioLeft labelPosition="none" />
+                </Col>
+              </Row>
+              <h4>With buttons</h4>
+              <p className="margin">
+                Large: <code>.input-group.input-group-lg</code>
+              </p>
+              <Text
+                size="lg"
+                buttonLeft={
+                  <Button size="lg" type="warning" text="Action">
+                    <a href="/">Action</a>
+                    <a href="/">Another action</a>
+                    <a href="/">Something else here</a>
+                    <Divider />
+                    <a href="/">Separated link</a>
+                  </Button>
+                }
+              />
+              <p className="margin">Normal</p>
+              <Text buttonLeft={<Button type="danger" text="Action" />} />
+              <p className="margin">
+                Small <code>.input-group.input-group-sm</code>
+              </p>
+              <Text
+                size="sm"
+                buttonRight={<Button type="info" flat text="Go!" />}
+              />
+            </Box>
+          </Col>
+          <Col md={6}>
+            <Box
+              type="info"
+              title="Horizontal Form"
+              bodyClassName="form-horizontal"
+              footer={
+                <React.Fragment>
+                  <Button text="Cancel" pullLeft />
+                  <Button text="Sign in" type="info" pullRight />
+                </React.Fragment>
+              }
+              border
+            >
+              <Text name="inputEmail3" placeholder="Email" label="Email" />
+              <Text
+                name="inputPassword3"
+                placeholder="Password"
+                label="Password"
+                inputType="password"
+              />
+              <Checkbox label="Remember me" />
+            </Box>
+            <Box type="warning" title="General Elements" border>
+              <Text
+                label="Text"
+                labelPosition="above"
+                placeholder="Enter ..."
+              />
+              <Text
+                label="Text Disabled"
+                labelPosition="above"
+                placeholder="Enter ..."
+                disabled
+              />
+              <Text
+                label="Textarea"
+                inputType="textarea"
+                rows={3}
+                labelPosition="above"
+                placeholder="Enter ..."
+              />
+              <Text
+                label="Textarea Disabled"
+                inputType="textarea"
+                rows={3}
+                labelPosition="above"
+                placeholder="Enter ..."
+                disabled
+              />
+              <Text
+                type="success"
+                labelPosition="above"
+                label="Input with success"
+                labelIcon="fas-check"
+                placeholder="Enter ..."
+                help="Help block with success"
+              />
+              <Text
+                type="warning"
+                labelPosition="above"
+                label="Input with warning"
+                labelIcon="far-bell"
+                placeholder="Enter ..."
+                help="Help block with warning"
+              />
+              <Text
+                type="error"
+                labelPosition="above"
+                label="Input with error"
+                labelIcon="far-times-circle"
+                placeholder="Enter ..."
+                help="Help block with error"
+              />
+              <Checkbox text="Checkbox 1" labelXs={0} />
+              <Checkbox text="Checkbox 2" labelXs={0} />
+              <Checkbox text="Checkbox disabled" labelXs={0} disabled />
+              <Radio
+                options={[
+                  {
+                    checked: true,
+                    id: "optionsRadios1",
+                    value: "option1",
+                    label:
+                      "Option one is this and that—be sure to include why it's great",
+                  },
+                  {
+                    id: "optionsRadios2",
+                    value: "option2",
+                    label:
+                      "Option two can be something else and selecting it will deselect option one",
+                  },
+                  {
+                    disabled: true,
+                    id: "optionsRadios3",
+                    value: "option3",
+                    label: "Option three is disabled",
+                  },
+                ]}
+                name="optionsRadios"
+                onChange={() => {}}
+              />
+              <Select
+                label="Select"
+                options={[
+                  { label: "option 1", value: "1" },
+                  { label: "option 2", value: "2" },
+                  { label: "option 3", value: "3" },
+                  { label: "option 4", value: "4" },
+                  { label: "option 5", value: "5" },
+                ]}
+                value={1}
+              />
+              <Select
+                label="Select Disabled"
+                options={[
+                  { label: "option 1", value: "1" },
+                  { label: "option 2", value: "2" },
+                  { label: "option 3", value: "3" },
+                  { label: "option 4", value: "4" },
+                  { label: "option 5", value: "5" },
+                ]}
+                disabled
+              />
+              <Select
+                label="Select Multiple"
+                options={[
+                  { label: "option 1", value: "1" },
+                  { label: "option 2", value: "2" },
+                  { label: "option 3", value: "3" },
+                  { label: "option 4", value: "4" },
+                  { label: "option 5", value: "5" },
+                ]}
+                multiple
+              />
+              <Select
+                label="Select Disabled"
+                options={[
+                  { label: "option 1", value: "1" },
+                  { label: "option 2", value: "2" },
+                  { label: "option 3", value: "3" },
+                  { label: "option 4", value: "4" },
+                  { label: "option 5", value: "5" },
+                ]}
+                multiple
+                disabled
+              />
+            </Box>
+          </Col>
+        </Row>
+      </Content>
+    )
+  }
+}
+
+export default Example3
diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js
new file mode 100644
index 0000000..69d4c15
--- /dev/null
+++ b/src/components/admin-lte/index.js
@@ -0,0 +1,35 @@
+import React from "react"
+import Example from "./example"
+import Example2 from "./example2"
+import Example3 from "./example3"
+
+import AdminLTE, { Sidebar } from "adminlte-2-react"
+
+const { Item } = Sidebar
+
+class AdminLTEPage extends React.Component {
+  state = {}
+
+  sidebar = [
+    <Item key="test" text="TEST" to="/test" />,
+    <Item key="img" text="IMG" to="/img" />,
+    <Item key="forms" text="FORMS" to="/forms" />,
+  ]
+
+  render() {
+    return (
+      <AdminLTE
+        title={["Hello", "World"]}
+        titleShort={["He", "we"]}
+        theme="blue"
+        sidebar={this.sidebar}
+      >
+        <Example path="/test" />
+        <Example2 path="/img" />
+        <Example3 path="/forms" />
+      </AdminLTE>
+    )
+  }
+}
+
+export default AdminLTEPage
diff --git a/src/pages/index.js b/src/pages/index.js
index 6f061ca..83702c2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,22 +1,17 @@
-import React from "react"
-import { Link } from "gatsby"
+import React from 'react'
 
-import Layout from "../components/layout"
-import Image from "../components/image"
-import SEO from "../components/seo"
+let AdminLTE =
+  typeof window !== `undefined`
+    ? require('../components/admin-lte').default
+    : null
 
-const IndexPage = () => (
-  <Layout>
-    <SEO title="Home" />
-    <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
-    </div>
-    <Link to="/page-2/">Go to page 2</Link> <br />
-    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
-  </Layout>
-)
+class AdminLTEPage extends React.Component {
+  state = {}
 
-export default IndexPage
+
+  render() {
+    return <>{AdminLTE && <AdminLTE />}</>
+  }
+}
+
+export default AdminLTEPage