diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..40b124a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+config.json
+/assets/img/custom/
diff --git a/assets/css/main.css b/assets/css/main.css
index f3acd18..ae84de6 100755
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,5 +1,3 @@
-
-
 body {
   background-color: #1F1F1F;
     font-family: 'Lato', sans-serif;
@@ -115,24 +113,11 @@ i {
 
 /* HeaderWrap */
 #headerwrap {
-	/* background: url(../img/bg01.jpg) no-repeat center top; */
 	background-color: #333332;
 	margin-top: -20px;
 	padding-top:80px;
-	background-attachment: relative;
-	background-position: center center;
 	min-height: 0px;
 	width: 100%;
-	
-    -webkit-background-size: 100%;
-    -moz-background-size: 100%;
-    -o-background-size: 100%;
-    background-size: 100%;
-
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
 }
 
 #headerwrap h1 {
diff --git a/assets/img/ombi.png b/assets/img/ombi.png
new file mode 100644
index 0000000..caeba89
Binary files /dev/null and b/assets/img/ombi.png differ
diff --git a/assets/img/s01.png b/assets/img/plex.png
similarity index 100%
rename from assets/img/s01.png
rename to assets/img/plex.png
diff --git a/assets/img/s03.png b/assets/img/plexemail.png
similarity index 100%
rename from assets/img/s03.png
rename to assets/img/plexemail.png
diff --git a/assets/img/plexpy.png b/assets/img/plexpy.png
new file mode 100644
index 0000000..cadfbcc
Binary files /dev/null and b/assets/img/plexpy.png differ
diff --git a/assets/img/s02.png b/assets/img/plexrequests.png
similarity index 100%
rename from assets/img/s02.png
rename to assets/img/plexrequests.png
diff --git a/assets/img/radarr.png b/assets/img/radarr.png
new file mode 100644
index 0000000..5162224
Binary files /dev/null and b/assets/img/radarr.png differ
diff --git a/assets/img/sonarr.png b/assets/img/sonarr.png
new file mode 100644
index 0000000..fe518d5
Binary files /dev/null and b/assets/img/sonarr.png differ
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..415c279
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,272 @@
+HTMLElement.prototype.hasClass = function (className) {
+    if (this.classList) {
+        return this.classList.contains(className);
+    } else {
+        return (-1 < this.className.indexOf(className));
+    }
+};
+
+HTMLElement.prototype.addClass = function (className) {
+    if (this.classList) {
+        this.classList.add(className);
+    } else if (!this.hasClass(className)) {
+        var classes = this.className.split(" ");
+        classes.push(className);
+        this.className = classes.join(" ");
+    }
+    return this;
+};
+
+HTMLElement.prototype.removeClass = function (className) {
+    if (this.classList) {
+        this.classList.remove(className);
+    } else {
+        var classes = this.className.split(" ");
+        classes.splice(classes.indexOf(className), 1);
+        this.className = classes.join(" ");
+    }
+    return this;
+};
+HTMLElement.prototype.attr = function (attribute, value) {
+    this.setAttribute(attribute, value);
+    return this;
+};
+Object.prototype.hasAttibute = function(attribute) {
+    return typeof this[attribute] !== "undefined";
+};
+
+function createPlexRedirect() {
+    window.plexRedirect = new PlexRedirect();
+    window.plexRedirect.startPlexRedirect();
+}
+
+var PlexRedirect = function() {
+    this.server_status = {
+        UP: 1,
+        DOWN: 2
+    };
+
+    this.default_messages = {
+        server_up: "Up and reachable",
+        server_down: "Down and unreachable"
+    };
+    this.default_config = {
+        server: {
+            name: "",
+            brand_url: "",
+            domain: "",
+            port: ""
+        },
+        messages: {
+            server_up: "Up and reachable",
+            server_down: "Down and unreachable"
+        }
+    };
+    this.app_configs = {
+        PlexWeb: {
+            url: 'http://app.plex.tv/web/app',
+            image: 'assets/img/plex.png',
+            header: 'Access <span class="server-name">SERVER</span>',
+            description: 'Access the <span class="server-name">SERVER</span> library with over <span class="server-movies">1000</span> Movies & <span class="server-tv">500</span> TV Shows available instantly.'
+        },
+        PlexRequests: {
+            url: document.domain + ':3000',
+            image: 'assets/img/plexrequests.png',
+            header: 'Requests',
+            description: 'Want to watch a Movie or TV Show but it\'s not currently on <span class="server-name">SERVER</span>? Use PlexRequests to request it!'
+        },
+        Ombi: {
+            url: document.domain + ':3579',
+            image: 'assets/img/ombi.png',
+            header: 'Requests',
+            description: 'Want to watch a Movie or TV Show but it\'s not currently on <span class="server-name">SERVER</span>? Use Ombi to request it!'
+        },
+        PlexEmail: {
+            url: document.domain + '#PLEXEMAIL_LINK_HERE',
+            image: 'assets/img/plexemail.png',
+            header: 'What\'s New',
+            description: 'See what has been recently added to <span class="server-name">SERVER</span> without having to log in.'
+        },
+        PlexPy: {
+            url: document.domain + ':8181',
+            image: 'assets/img/plexpy.png',
+            header: 'Server stats',
+            description: 'Want to know what\'s going on at <span class="server-name">SERVER</span> or just interested in the most viewed movie? View it here!'
+        },
+        Sonarr: {
+            url: document.domain + ':8989',
+            image: 'assets/img/sonarr.png',
+            header: 'Series watchlist',
+            description: 'View the list of series that currently being monitored.'
+        },
+        Radarr: {
+            url: document.domain + ':7878',
+            image: 'assets/img/radarr.png',
+            header: 'Movies watchlist',
+            description: 'View the list of movies that currently being monitored.'
+        }
+    };
+    this.default_applications = [
+        {
+            PlexWeb: {},
+            PlexRequests: {},
+            Ombi: {},
+            PlexEmail: {}
+        },
+        {
+            PlexPy: {},
+            Sonarr: {},
+            Radarr: {}
+        }
+    ];
+
+    var linkBarElement = document.getElementById('link-bar');
+    this.linkBarRow = linkBarElement.querySelector('.row');
+};
+PlexRedirect.prototype = {
+    startPlexRedirect: function() {
+        this.loadConfig('config.json');
+    },
+    configLoaded: function(config) {
+        this.config = config;
+        this.setSiteSettings();
+    },
+    configLoadFailed: function() {
+        this.config = this.default_config;
+        console.error('Failed to load config, using the default one');
+        this.setSiteSettings();
+    },
+    setSiteSettings: function() {
+        this.createLinkBar();
+
+        var navbarBrand = document.getElementById('navbar-brand');
+        var serverConfig = this.config.server;
+        if(serverConfig.brand_url !== "") {
+            navbarBrand.href = serverConfig.brand_url;
+        }
+        if(serverConfig.name !== "") {
+            navbarBrand.innerText = serverConfig.name;
+            var title = document.getElementById('title');
+            title.innerText = 'PlexRequest - ' + serverConfig.name + " status";
+            var serverNames = document.getElementsByClassName("server-name");
+            for(var i = 0; i < serverNames.length; i++) {
+                serverNames[i].innerText = serverConfig.name;
+            }
+        }
+        if(typeof this.config.messages === "undefined") {
+            this.config.messages = this.default_messages;
+        }
+
+        this.checkServer();
+    },
+    createLinkBar: function () {
+        if(typeof this.config.applications === "undefined") {
+            this.config.applications = [];
+        }
+
+        this.numberOfApplications = this.config.applications.length;
+        if(this.numberOfApplications == 0) {
+            this.config.applications = this.default_applications;
+            this.numberOfApplications = this.config.applications.length;
+        }
+
+        for(var row in this.config.applications) {
+            if (!this.config.applications.hasOwnProperty(row)) continue;
+
+            this.createApplicationRow(row);
+        }
+    },
+    createApplicationRow: function(currentRow) {
+        var rowDiv = document.createElement('div').addClass('row');
+
+        var numberOfApplications = Object.keys(this.config.applications[currentRow]).length;
+
+        var columnWidht = Math.floor(12 / numberOfApplications);
+        var offset = Math.floor((12 % numberOfApplications) / 2);
+        if(offset == 0) {
+            offset = false;
+        }
+
+        for(var key in this.config.applications[currentRow]) {
+            if (!this.config.applications[currentRow].hasOwnProperty(key)) continue;
+
+            var element = this.createApplicationElement(currentRow, key, columnWidht, offset);
+            rowDiv.appendChild(element);
+
+            offset = false;
+        }
+        this.linkBarRow.appendChild(rowDiv);
+    },
+    createApplicationElement: function(row, key, columnWidht, offset) {
+        var currentApplication = this.config.applications[row][key];
+        console.log(currentApplication);
+
+        var div = document.createElement('div').addClass('col-lg-' + columnWidht);
+        if(offset) {
+            div.addClass('col-lg-offset-' + offset);
+        }
+        var link = document.createElement('a')
+            .attr('href', currentApplication.hasAttibute('url') ? currentApplication.url : this.app_configs[key].url)
+            .attr('target', '_top');
+        var image = document.createElement('img')
+            .attr('src', currentApplication.hasAttibute('image') ? currentApplication.image : this.app_configs[key].image)
+            .attr('width', '180');
+        var header = document.createElement('h4');
+        header.innerHTML = currentApplication.hasAttibute('header') ? currentApplication.header : this.app_configs[key].header;
+
+        var description = document.createElement('p');
+        description.innerHTML = currentApplication.hasAttibute('description') ? currentApplication.description : this.app_configs[key].description;
+
+        link.appendChild(image);
+        link.appendChild(header);
+        link.appendChild(description);
+
+        div.appendChild(link);
+        return div;
+    },
+    checkServer: function() {
+        var p = new Ping();
+        var server = this.config.server.plex_domain == "" ? document.domain : this.config.server.plex_domain; //Try to get it automagically, but you can manually specify this
+        var port = this.config.server.plex_port == "" ? "32400" : this.config.server.plex_port;
+        var timeout = 2000; //Milliseconds
+        var body = document.getElementsByTagName("body")[0];
+        var _this = this;
+        p.ping(server + ":" + port, function(data) {
+            if (data < 1000){
+                _this.setServerMessage(_this.server_status.UP, _this.config.messages.server_up);
+            }else{
+                _this.setServerMessage(_this.server_status.DOWN, _this.config.messages.server_down);
+            }
+        }, timeout);
+    },
+    setServerMessage: function(status, message) {
+        var body = document.getElementsByTagName("body")[0];
+        var serverMsg = document.getElementById( "server-status-msg" );
+        var serverImg = document.getElementById( "server-status-img" );
+
+        serverMsg.innerHTML = message;
+        if(status == this.server_status.UP) {
+            serverImg.src = "assets/img/ipad-hand-on.png";
+            body.addClass('online').removeClass("offline");
+        }
+        else if(status == this.server_status.DOWN) {
+            serverImg.src = "assets/img/ipad-hand-off.png";
+        }
+    },
+    loadConfig: function(path, success, error) {
+        var xhr = new XMLHttpRequest();
+        var _this = this;
+        xhr.onreadystatechange = function()
+        {
+            if (xhr.readyState === XMLHttpRequest.DONE) {
+                if (xhr.status === 200) {
+                    _this.configLoaded(JSON.parse(xhr.responseText));
+                } else {
+                    _this.configLoadFailed(xhr);
+                }
+            }
+        };
+        xhr.open("GET", path + "?" + (+new Date()), true);
+        xhr.send();
+    }
+};
diff --git a/index.html b/index.html
index 3113391..46d7c69 100755
--- a/index.html
+++ b/index.html
@@ -1,159 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <link rel="shortcut icon" type="image/x-icon" href="plexlanding.ico" />`
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <style>
-        body.offline #link-bar {
-            display:none;
-        }
+<head>
+	<link rel="shortcut icon" type="image/x-icon" href="plexlanding.ico" />
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="description" content="" />
+	<meta name="author" content="" />
+	<style>
+		body.offline #link-bar {
+			display:none;
+		}
 
-        body.online  #link-bar{
-            display:block;
-        }
-    </style>
-    <script src="assets/js/ping.js"></script>
-    <script type='text/javascript'>
-        HTMLElement.prototype.hasClass = function (className) {
-            if (this.classList) {
-                return this.classList.contains(className);
-            } else {
-                return (-1 < this.className.indexOf(className));
-            }
-        };
+		body.online  #link-bar{
+			display:block;
+		}
+	</style>
+	<script type="text/javascript" src="assets/js/ping.js"></script>
+	<script type="text/javascript" src="assets/js/main.js"></script>
 
-        HTMLElement.prototype.addClass = function (className) {
-            if (this.classList) {
-                this.classList.add(className);
-            } else if (!this.hasClass(className)) {
-                var classes = this.className.split(" ");
-                classes.push(className);
-                this.className = classes.join(" ");
-            }
-            return this;
-        };
+	<title id="title">PlexRequest - Server status</title>
 
-        HTMLElement.prototype.removeClass = function (className) {
-            if (this.classList) {
-                this.classList.remove(className);
-            } else {
-                var classes = this.className.split(" ");
-                classes.splice(classes.indexOf(className), 1);
-                this.className = classes.join(" ");
-            }
-            return this;
-        };
+	<!-- Bootstrap core CSS -->
+	<link href="assets/css/bootstrap.css" rel="stylesheet" />
 
-        function checkServer() {
-            var p = new Ping();
-            var server = document.domain; //Try to get it automagically, but you can manually specify this
-            var timeout = 2000; //Milliseconds
-            var body = document.getElementsByTagName("body")[0];
-            p.ping(server+":32400", function(data) {
-                var serverMsg = document.getElementById( "server-status-msg" );
-                var serverImg = document.getElementById( "server-status-img" );
-                if (data < 1000){
-                    serverMsg.innerHTML ='Up and reachable';
-                    serverImg.src = "assets/img/ipad-hand-on.png";
-                    body.addClass('online').removeClass("offline");
-                }else{
-                    serverMsg.innerHTML = 'Down and unreachable';
-                    serverImg.src = "assets/img/ipad-hand-off.png";
-                }
-            }, timeout);
-        }
-    </script>
+	<!-- Custom styles -->
+	<link href="assets/css/main.css" rel="stylesheet" />
 
+	<!-- Fonts from Google Fonts -->
+	<link href='//fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css' />
 
-    <title>YOUR SERVER NAME HERE</title>
-    	
+</head>
 
-    <!-- Bootstrap core CSS -->
-    <link href="assets/css/bootstrap.css" rel="stylesheet">
+<body onload="createPlexRedirect()" class="offline">
 
-    <!-- Custom styles -->
-    <link href="assets/css/main.css" rel="stylesheet">
+<!-- Fixed navbar -->
+<div class="navbar navbar-default navbar-fixed-top">
+	<div class="container">
+		<div class="navbar-header">
+			<a id="navbar-brand" class="navbar-brand" href="#">PlexRedirect</a>
+		</div><!--/.nav-collapse -->
+	</div>
+</div>
 
-    <!-- Fonts from Google Fonts -->
-    <link href='//fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css'>
-    
-  
-  </head>
+<!--Applications/link-bar container-->
+<div class="container" id="link-bar">
+	<div class="row mt centered">
 
-  <body onload="checkServer()" class="offline">
+	</div>
+</div>
+<!--End applications/link-bar container-->
 
-    <!-- Fixed navbar -->
-    <div class="navbar navbar-default navbar-fixed-top">
-      <div class="container">
-        <div class="navbar-header">
-          
-          <a href="http://YOURSERVERURLHERE.com">
-          <a class="navbar-brand" href="#"><b>YOUR SERVER NAME HERE</b></a>
-        
-        </div><!--/.nav-collapse -->
-      </div>
-    </div>
-    <div class="container" id="link-bar">
-		<div class="row mt centered">
-			<div class="col-lg-6 col-lg-offset-3">
-				
-				
-			</div>
-		</div><!-- /row -->
-		
-		<div class="row mt centered">
-			<div class="col-lg-4">
-				<a href="http://app.plex.tv/web/app" target="_top">
-				<img src="assets/img/s01.png" width="180" alt="">
-				<h4>Access YOUR SERVER NAME HERE</h4>
-				<p>Access the YOUR SERVER NAME HERE library with over X Movies & X TV Shows available instantly.<p>
-					</a>
-			</div><!--/col-lg-4 -->
+<div id="headerwrap">
+	<div class="container">
+		<div class="row">
+			<div class="col-lg-6">
+				<br/>
+				<h1>
+					<center><span class="server-name">SERVER</span> Status:</center>
+				</h1>
+				<center><h4 id="server-status-msg"><img src="assets/img/puff.svg">   Checking...</h4></center><br/>
+				<br/>
+				<br/>
+				<form class="form-inline" role="form">
+					<div class="form-group">
 
-			<div class="col-lg-4">
-				<a href="PLEXREQUESTS LINK HERE" target="_top">
-				<img src="assets/img/s02.png" width="180" alt="">
-				<h4>Request</h4>
-				<p>Want to watch a Movie or TV Show but it's not currently on YOUR SERVER NAME HERE? Request it here!</p>
-</a>
-			</div><!--/col-lg-4 -->
+					</div>
+				</form>
+			</div><!-- /col-lg-6 -->
+			<div class="col-lg-6">
+				<img id="server-status-img" class="img-responsive" src="assets/img/ipad-hand.png" alt="">
+			</div><!-- /col-lg-6 -->
 
-			<div class="col-lg-4">
-				<a href="PLEXEMAIL LINK HERE" target="_top">
-				<img src="assets/img/s03.png" width="180" alt="">
-				<h4>What's New</h4>
-				<p>See what has been recently added to YOUR SERVER NAME HERE without having to log in.</p>
-</a>
-			</div><!--/col-lg-4 -->
 		</div><!-- /row -->
 	</div><!-- /container -->
-	<p>
-
-	<div id="headerwrap">
-		<div class="container">
-			<div class="row">
-				<div class="col-lg-6">
-					<h1><br/>
-					<center>YOUR SERVER NAME HERE Status:</h1></center>
-					<center><h4 id="server-status-msg"><img src="assets/img/puff.svg">   Checking...</h4></center><br/>
-					<br/>
-					<br/>
-					<form class="form-inline" role="form">
-					  <div class="form-group">
-					    
-					  </div>
-					  				
-				</div><!-- /col-lg-6 -->
-				<div class="col-lg-6">
-					<img id="server-status-img" class="img-responsive" src="assets/img/ipad-hand.png" alt="">
-				</div><!-- /col-lg-6 -->
-				
-			</div><!-- /row -->
-		</div><!-- /container -->
-	</div><!-- /headerwrap -->
-  </body>
+</div><!-- /headerwrap -->
+</body>
 </html>
diff --git a/sample-config.json b/sample-config.json
new file mode 100644
index 0000000..56b1a6a
--- /dev/null
+++ b/sample-config.json
@@ -0,0 +1,36 @@
+{
+  "server": {
+    "name": "Plex Server",
+    "brand_url": "/",
+    "plex_domain": "192.168.0.255",
+    "plex_port": "32400"
+  },
+  "messages": {
+    "server_up": "Up and running!",
+    "server_down": "We can't reach Plex..."
+  },
+  "applications": [
+    {
+      "PlexWeb": {
+
+      },
+      "PlexRequests": {
+        "header": "Request a new movie!"
+      },
+      "PlexEmail": {
+
+      }
+    },
+    {
+      "PlexPy": {
+
+      },
+      "Sonarr": {
+
+      },
+      "Radarr": {
+
+      }
+    }
+  ]
+}