diff --git a/src/application/views/appointments/book.php b/src/application/views/appointments/book.php
index 503b356e..7dcbb18a 100644
--- a/src/application/views/appointments/book.php
+++ b/src/application/views/appointments/book.php
@@ -16,7 +16,8 @@
     <script type="text/javascript" src="<?php echo $this->config->base_url(); ?>assets/js/libs/jquery/jquery.qtip.min.js"></script>
     <script type="text/javascript" src="<?php echo $this->config->base_url(); ?>assets/js/libs/bootstrap/bootstrap.min.js"></script>
     <script type="text/javascript" src="<?php echo $this->config->base_url(); ?>assets/js/libs/date.js"></script>
-    <script type="text/javascript" src="<?php echo $this->config->base_url(); ?>assets/js/frontend/book-appointment.js"></script>
+    <script type="text/javascript" src="<?php echo $this->config->base_url(); ?>assets/js/frontend/book_appointment.js"></script>
+    <script type="text/javascript" src="<?php echo $this->config->base_url(); ?>assets/js/general_functions.js"></script>
     
     <?php // SET FAVICON FOR PAGE ?>
     <link rel="icon" type="image/x-icon" href="<?php echo $this->config->base_url(); ?>assets/images/favicon.ico">
@@ -34,7 +35,8 @@
     <?php // JQUERY PAGE STUFF ?>
     <script type="text/javascript">
         $(document).ready(function() {
-            bookAppointment.initialize(); // Begin jquery magic :P
+            bookAppointment.initialize(); 
+            GeneralFunctions.centerElementOnPage($('#book-appointment'));
         });
     </script>
 </head>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 58480bc0..1128312d 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -14,7 +14,6 @@ body {
  ------------------------------------------------------------------------------ */
 #book-appointment {
     width: 660px;
-    margin: 150px auto 0 auto;
     background: #FFF;
     box-shadow: 0px 1px 1px #B6B6B6;
     min-height: 480px;
diff --git a/src/assets/js/frontend/book-appointment.js b/src/assets/js/frontend/book_appointment.js
similarity index 100%
rename from src/assets/js/frontend/book-appointment.js
rename to src/assets/js/frontend/book_appointment.js
diff --git a/src/assets/js/general_functions.js b/src/assets/js/general_functions.js
index e9fc7c93..357ff292 100644
--- a/src/assets/js/general_functions.js
+++ b/src/assets/js/general_functions.js
@@ -61,3 +61,25 @@ GeneralFunctions.displayMessageBox = function(title, message, messageButtons) {
     jQuery("#message_box .ui-dialog-titlebar-close").hide();
 }
 
+/**
+ * This method centers a DOM element vertically and horizontally
+ * on the page.
+ * 
+ * @param {object} elementHandle The object that is going to be 
+ * centered.
+ */
+GeneralFunctions.centerElementOnPage = function(elementHandle) {
+    // Center main frame vertical middle
+    $(window).resize(function() {
+        var elementLeft = ($(window).width() - elementHandle.outerWidth()) / 2;
+        var elementTop = ($(window).height() - elementHandle.outerHeight()) / 2;
+        elementTop = (elementTop > 0 ) ? elementTop : 20;
+        
+        elementHandle.css({
+            position    : 'absolute',
+            left        : elementLeft,
+            top         : elementTop
+        }); 
+    });
+    $(window).resize();
+}
\ No newline at end of file