diff --git a/README.txt b/README.txt
index b24a38b..cdc85a4 100644
--- a/README.txt
+++ b/README.txt
@@ -1,11 +1,11 @@
-HFS (Header Footer Scripts) module for Drupal 7.x.
+HFS (Header Footer Scripts) module for Drupal 8.x.
 This module allows you to add style and scripts in different region of the page
 from the front-end. You don't need to open any file for this purpose.
 
 INSTALLATION INSTRUCTIONS
 -------------------------
-1.  Copy the files included in the tarball into a directory named "hfs" in
-    your Drupal sites/all/modules/ directory.
+1.  Copy the files included in the tarball into a directory named "header_and_footer_scripts" in
+    your Drupal modules/ directory.
 2.  Login as site administrator.
 3.  Enable the HFS (Header Footer Scripts) module on the Administer -> Modules
     page.
@@ -15,6 +15,6 @@ INSTALLATION INSTRUCTIONS
 
 NOTES
 -----
-This module adds the styles and scripts on all over the site. There are 3
+This module adds the styles and scripts on all over the site. There are 2
 setting pages.
 These setting pages are allow you add the scripts in the desired region.
diff --git a/header_and_footer_scripts.info.yml b/header_and_footer_scripts.info.yml
new file mode 100644
index 0000000..dba634a
--- /dev/null
+++ b/header_and_footer_scripts.info.yml
@@ -0,0 +1,8 @@
+name: HFS (Header Footer Scripts)
+description: This plugin allows you to add the scripts and styles on overall site from the front-end. No need to open files and add them there.
+package: HFS
+
+type: module
+core: 8.x
+
+configure: hfs.admin.body_settings
diff --git a/header_and_footer_scripts.install b/header_and_footer_scripts.install
new file mode 100644
index 0000000..52e2ea8
--- /dev/null
+++ b/header_and_footer_scripts.install
@@ -0,0 +1,14 @@
+<?php
+
+/**
+ * @file
+ * Uninstall functions for header_and_footer_scripts module.
+ */
+
+/**
+ * Implements hook_uninstall().
+ */
+function header_and_footer_scripts_uninstall() {
+  \Drupal::service('config.factory')->getEditable('hfs_body_scripts.settings')->delete();
+  \Drupal::service('config.factory')->getEditable('hfs_footer_scripts.settings')->delete();
+}
diff --git a/header_and_footer_scripts.links.menu.yml b/header_and_footer_scripts.links.menu.yml
new file mode 100644
index 0000000..efd2177
--- /dev/null
+++ b/header_and_footer_scripts.links.menu.yml
@@ -0,0 +1,5 @@
+hfs.admin.body_settings:
+  title: 'HFS (Header Footer Scripts)'
+  description: 'Allow to add scripts and styles from the frontend at the start of body tag.'
+  parent: system.admin_config_development
+  route_name: hfs.admin.body_settings
\ No newline at end of file
diff --git a/header_and_footer_scripts.links.task.yml b/header_and_footer_scripts.links.task.yml
new file mode 100644
index 0000000..bdfb3eb
--- /dev/null
+++ b/header_and_footer_scripts.links.task.yml
@@ -0,0 +1,8 @@
+hfs.admin.body_settings:
+  route_name: hfs.admin.body_settings
+  title: 'Body Scripts'
+  base_route: hfs.admin.body_settings
+hfs.admin.footer_settings:
+  route_name: hfs.admin.footer_settings
+  title: 'Footer Scripts'
+  base_route: hfs.admin.body_settings
\ No newline at end of file
diff --git a/header_and_footer_scripts.module b/header_and_footer_scripts.module
new file mode 100644
index 0000000..3568cef
--- /dev/null
+++ b/header_and_footer_scripts.module
@@ -0,0 +1,220 @@
+<?php
+
+/**
+ * @file
+ * Enables Drupal to add scripts and styles from frontend on all over the site.
+ */
+
+/**
+ * Implements hook_page_top().
+ *
+ * Add scripts after the body tag on overall the site which are defined on the settings page.
+ */
+function header_and_footer_scripts_page_top(array &$page_top) {
+  $body_section  = \Drupal::config('hfs_body_scripts.settings')->get();
+  if (isset($body_section['styles']) && !empty($body_section['styles'])) {
+    $output_styles = preg_split("/(<\/style>|\/>)/", $body_section['styles']);
+    $i = 1;
+    foreach ($output_styles as $row) {
+
+      if (empty($row)) continue;
+
+      $style_tag  = 'style';
+      $style_attr = '';
+      $value       = '';
+
+      $style_attributes = preg_replace('/(<style|<link)/', '', $row, 1);
+      $get_style_attr   = preg_split('/(>)/', $style_attributes, 2);
+
+      if (isset($get_style_attr[1]))
+        $value = $get_style_attr[1];
+
+      $get_style_tag = preg_split('/<link/', $row, 2);
+
+      if (isset($get_style_tag[1]))
+        $style_tag  = 'link';
+      
+      if (isset($get_style_attr[0]) && !empty($get_style_attr[0])) {
+        $get_attr   = preg_replace('/(\'|\")/', '', $get_style_attr[0]);
+        $get_attr   = preg_replace('/\s+/', ',', $get_attr);
+        $get_attr   = preg_replace('/(,=,|,=|=,)/', '=', $get_attr);
+        $fetch_attr = explode(',', $get_attr);
+
+        foreach ($fetch_attr as $attr) {
+          if (empty($attr)) continue;
+          
+          $attr_key_value = explode('=', $attr);
+          if (isset($attr_key_value[0]) && isset($attr_key_value[1]))
+            $style_attr[$attr_key_value[0]] = $attr_key_value[1];
+          else
+            $style_attr[$attr_key_value[0]] = $attr_key_value[0];
+        }
+      }
+
+      $page_top['top_styles_'.$i] = [
+        '#type'       => 'html_tag',
+        '#tag'        => $style_tag,
+        '#value'      => $value
+      ];
+      if (is_array($style_attr))
+        $page_top['top_styles_'.$i]['#attributes'] = $style_attr;
+      $i++;
+    }
+  }
+  if (isset($body_section['scripts']) && !empty($body_section['scripts'])) {
+    $output_scripts = preg_split("/(<\/script>|<\/noscript>)/", $body_section['scripts']);
+    $i = 1;
+    foreach ($output_scripts as $row) {
+
+      if (empty($row)) continue;
+
+      $script_tag  = 'script';
+      $script_attr = '';
+      $value       = '';
+      
+      $script_attributes = preg_replace('/(<script|<noscript)/', '', $row, 1);
+      $get_script_attr   = preg_split('/(>)/', $script_attributes, 2);
+
+      if (isset($get_script_attr[1]))
+        $value = $get_script_attr[1];
+
+      $get_script_tag = preg_split('/<noscript/', $row, 2);
+
+      if (isset($get_script_tag[1]))
+        $script_tag  = 'noscript';
+
+      if (isset($get_script_attr[0]) && !empty($get_script_attr[0])) {
+        $get_attr   = preg_replace('/(\'|\")/', '', $get_script_attr[0]);
+        $get_attr   = preg_replace('/\s+/', ',', $get_attr);
+        $get_attr   = preg_replace('/(,=,|,=|=,)/', '=', $get_attr);
+        $fetch_attr = explode(',', $get_attr);
+
+        foreach ($fetch_attr as $attr) {
+          if (empty($attr)) continue;
+          
+          $attr_key_value = explode('=', $attr);
+          if (isset($attr_key_value[0]) && isset($attr_key_value[1]))
+            $script_attr[$attr_key_value[0]] = $attr_key_value[1];
+          else
+            $script_attr[$attr_key_value[0]] = $attr_key_value[0];
+        }
+      }
+
+      $page_top['top_scripts_'.$i] = [
+        '#type'       => 'html_tag',
+        '#tag'        => $script_tag,
+        '#value'      => $value
+      ];
+      if (is_array($script_attr))
+        $page_top['top_scripts_'.$i]['#attributes'] = $script_attr;
+      $i++;
+    }
+  }
+}
+
+/**
+ * Implements hook_page_bottom().
+ *
+ * Add scripts before the Footer tag on overall the site which are defined on the settings page.
+ */
+function header_and_footer_scripts_page_bottom(array &$page_bottom) {
+  $footer_section = \Drupal::config('hfs_footer_scripts.settings')->get();
+  if (isset($footer_section['styles']) && !empty($footer_section['styles'])) {
+    $output_styles = preg_split("/(<\/style>|\/>)/", $footer_section['styles']);
+    $i = 1;
+    foreach ($output_styles as $row) {
+
+      if (empty($row)) continue;
+
+      $style_tag  = 'style';
+      $style_attr = '';
+      $value       = '';
+
+      $style_attributes = preg_replace('/(<style|<link)/', '', $row, 1);        
+      $get_style_attr   = preg_split('/(>)/', $style_attributes, 2);
+
+      if (isset($get_style_attr[1]))
+        $value = $get_style_attr[1];
+
+      $get_style_tag = preg_split('/<link/', $row, 2);
+
+      if (isset($get_style_tag[1]))
+        $style_tag  = 'link';
+
+      if (isset($get_style_attr[0]) && !empty($get_style_attr[0])) {
+        $get_attr   = preg_replace('/(\'|\")/', '', $get_style_attr[0]);
+        $get_attr   = preg_replace('/\s+/', ',', $get_attr);
+        $get_attr   = preg_replace('/(,=,|,=|=,)/', '=', $get_attr);
+        $fetch_attr = explode(',', $get_attr);
+
+        foreach ($fetch_attr as $attr) {
+          if (empty($attr)) continue;
+
+          $attr_key_value = explode('=', $attr);
+          if (isset($attr_key_value[0]) && isset($attr_key_value[1]))
+            $style_attr[$attr_key_value[0]] = $attr_key_value[1];
+          else
+            $style_attr[$attr_key_value[0]] = $attr_key_value[0];
+        }
+      }
+
+      $page_bottom['bottom_styles_'.$i] = [
+        '#type'       => 'html_tag',
+        '#tag'        => $style_tag,
+        '#value'      => $value
+      ];
+      if (is_array($style_attr))
+        $page_bottom['bottom_styles_'.$i]['#attributes'] = $style_attr;
+      $i++;
+    }
+  }
+  if (isset($footer_section['scripts']) && !empty($footer_section['scripts'])) {
+    $output_scripts = preg_split("/(<\/script>|<\/noscript>)/", $footer_section['scripts']);
+    $i = 1;
+    foreach ($output_scripts as $row) {
+
+      if (empty($row)) continue;
+
+      $script_tag  = 'script';
+      $script_attr = '';
+      $value       = '';
+
+      $script_attributes = preg_replace('/(<script|<noscript)/', '', $row, 1);        
+      $get_script_attr   = preg_split('/(>)/', $script_attributes, 2);
+
+      if (isset($get_script_attr[1]))
+        $value = $get_script_attr[1];
+
+      $get_script_tag = preg_split('/<noscript/', $row, 2);
+
+      if (isset($get_script_tag[1]))
+        $script_tag  = 'noscript';
+
+      if (isset($get_script_attr[0]) && !empty($get_script_attr[0])) {
+        $get_attr   = preg_replace('/(\'|\")/', '', $get_script_attr[0]);
+        $get_attr   = preg_replace('/\s+/', ',', $get_attr);
+        $get_attr   = preg_replace('/(,=,|,=|=,)/', '=', $get_attr);
+        $fetch_attr = explode(',', $get_attr);
+
+        foreach ($fetch_attr as $attr) {
+          if (empty($attr)) continue;
+
+          $attr_key_value = explode('=', $attr);
+          if (isset($attr_key_value[0]) && isset($attr_key_value[1]))
+            $script_attr[$attr_key_value[0]] = $attr_key_value[1];
+          else
+            $script_attr[$attr_key_value[0]] = $attr_key_value[0];
+        }
+      }
+
+      $page_bottom['bottom_scripts_'.$i] = [
+        '#type'       => 'html_tag',
+        '#tag'        => $script_tag,
+        '#value'      => $value
+      ];
+      if (is_array($script_attr))
+        $page_bottom['bottom_scripts_'.$i]['#attributes'] = $script_attr;
+      $i++;
+    }
+  }
+}
diff --git a/header_and_footer_scripts.permissions.yml b/header_and_footer_scripts.permissions.yml
new file mode 100644
index 0000000..84683cc
--- /dev/null
+++ b/header_and_footer_scripts.permissions.yml
@@ -0,0 +1,4 @@
+header_and_footer_scripts_settings:
+  title: 'Add Scripts all over the site'
+  description: 'Users who have this permission can add and remove the scripts from the site.'
+  restrict access: TRUE
\ No newline at end of file
diff --git a/header_and_footer_scripts.routing.yml b/header_and_footer_scripts.routing.yml
new file mode 100644
index 0000000..a124b7d
--- /dev/null
+++ b/header_and_footer_scripts.routing.yml
@@ -0,0 +1,14 @@
+hfs.admin.body_settings:
+  path: '/admin/config/development/hfs/body'
+  defaults:
+    _form: '\Drupal\header_and_footer_scripts\Form\BodyForm'
+    _title: 'HFS (Header Footer Scripts)'
+  requirements:
+    _permission: 'header_and_footer_scripts_settings'
+hfs.admin.footer_settings:
+  path: '/admin/config/development/hfs/footer'
+  defaults:
+    _form: '\Drupal\header_and_footer_scripts\Form\FooterForm'
+    _title: 'HFS (Header Footer Scripts) for Footer'
+  requirements:
+    _permission: 'header_and_footer_scripts_settings'
\ No newline at end of file
diff --git a/hfs.admin.inc b/hfs.admin.inc
deleted file mode 100644
index 93727ee..0000000
--- a/hfs.admin.inc
+++ /dev/null
@@ -1,153 +0,0 @@
-<?php
-
-/**
- * @file
- * Administrative page code for the Header Footer Script module.
- */
-
-/**
- * Administrative settings.
- *
- * @return array
- *   Add styles and scripts in header.
- */
-function hfs_header_settings_form($form, &$form_state) {
-  $header_section = variable_get('hfs_header_scripts');
-
-  $form['hfs_header'] = array(
-    '#type'         => 'fieldset',
-    '#title'        => t('Add Scripts and Styles in Header'),
-    '#description'  => t('All the defined scripts and styles in this section would be added under the <strong>head</strong> tag.'),
-  );
-
-  $form['hfs_header']['styles'] = array(
-    '#type'          => 'textarea',
-    '#title'         => t('Header Styles'),
-    '#default_value' => isset($header_section['styles']) ? $header_section['styles'] : '',
-    '#description'   => t('<p>You can add multiple <strong>stylesheets</strong> here with multiple ways, For example: </p><p>1. &lt;link type="text/css" rel="stylesheet" href="http://www.example.com/style.css" media="all" /&gt;</p><p> 2. &lt;link type="text/css" rel="stylesheet" href="/style.css" media="all" /&gt;</p><p> 3. &lt;style&gt;#header { color: grey; }&lt;/style&gt;</p>'),
-    '#rows'          => 10,
-  );
-
-  $form['hfs_header']['scripts'] = array(
-    '#type'          => 'textarea',
-    '#title'         => t('Header Scripts'),
-    '#default_value' => isset($header_section['scripts']) ? $header_section['scripts'] : '',
-    '#description'   => t('<p>You can add multiple <strong>scripts</strong> here with multiple ways, For example: </p><p>1. &lt;script type="text/javascript" src="http://www.example.com/script.js"&gt;&lt;/script&gt;</p><p> 2. &lt;script type="text/javascript" src="/script.js"&gt;&lt;/script&gt;</p><p> 3. &lt;script type="text/javascript"&gt;&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--// close script tag //--&gt;&lt;!]]&gt;&lt;/script&gt;</p>'),
-    '#rows'          => 10,
-  );
-
-  $form['submit'] = array(
-    '#type'  => 'submit',
-    '#value' => 'Save Header Settings',
-  );
-
-  return $form;
-}
-
-/**
- * Submit handler().
- */
-function hfs_header_settings_form_submit($form, &$form_state) {
-  $header['styles'] = $form_state['values']['styles'];
-  $header['scripts'] = $form_state['values']['scripts'];
-  serialize($header);
-  variable_set('hfs_header_scripts', $header);
-}
-
-/**
- * Administrative settings.
- *
- * @return array
- *   Add styles and scripts at the start of the body tag.
- */
-function hfs_body_settings_form($form, &$form_state) {
-  $body_section = variable_get('hfs_body_scripts');
-
-  $form['hfs_body'] = array(
-    '#type'        => 'fieldset',
-    '#title'       => t('Add Scripts and Styles in body'),
-    '#description' => t('All the defined scripts and styles in this section would be added next to <strong>body</strong> tag.'),
-  );
-
-  $form['hfs_body']['styles'] = array(
-    '#type'          => 'textarea',
-    '#title'         => t('Body Styles'),
-    '#default_value' => isset($body_section['styles']) ? $body_section['styles'] : '',
-    '#description'   => t('<p>You can add multiple <strong>stylesheets</strong> here with multiple ways, For example: </p><p>1. &lt;link type="text/css" rel="stylesheet" href="http://www.example.com/style.css" media="all" /&gt;</p><p> 2. &lt;link type="text/css" rel="stylesheet" href="/style.css" media="all" /&gt;</p><p> 3. &lt;style&gt;#header { color: grey; }&lt;/style&gt;</p>'),
-    '#rows'          => 10,
-  );
-
-  $form['hfs_body']['scripts'] = array(
-    '#type'          => 'textarea',
-    '#title'         => t('Body Scripts'),
-    '#default_value' => isset($body_section['scripts']) ? $body_section['scripts'] : '',
-    '#description'   => t('<p>On mostly sites, this section is used to add the <strong>Google Tag Manager</strong>. <strong>Like:</strong></p><p>1. &lt;!-- Google Tag Manager --&gt;&lt;noscript&gt;<strong>Write Your code here</strong>&lt;/script&gt;&lt;!-- End Google Tag Manager --&gt;</p><p>You can also add multiple <strong>scripts</strong> here with multiple ways, For example: </p><p>1. &lt;script type="text/javascript" src="http://www.example.com/script.js"&gt;&lt;/script&gt;</p><p> 2. &lt;script type="text/javascript" src="/script.js"&gt;&lt;/script&gt;</p><p> 3. &lt;script type="text/javascript"&gt;&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--// close script tag //--&gt;&lt;!]]&gt;&lt;/script&gt;</p>'),
-    '#rows'          => 10,
-  );
-
-  $form['submit'] = array(
-    '#type'  => 'submit',
-    '#value' => 'Save Body Settings',
-  );
-
-  return $form;
-}
-
-/**
- * Submit handler().
- */
-function hfs_body_settings_form_submit($form, &$form_state) {
-  $body['styles'] = $form_state['values']['styles'];
-  $body['scripts'] = $form_state['values']['scripts'];
-  serialize($body);
-  variable_set('hfs_body_scripts', $body);
-}
-
-/**
- * Administrative settings.
- *
- * @return array
- *   Add styles and scripts in footer (before closing the body tag).
- */
-function hfs_footer_settings_form($form, &$form_state) {
-  $footer_section = variable_get('hfs_footer_scripts');
-
-  $form['hfs_footer'] = array(
-    '#type'        => 'fieldset',
-    '#title'       => t('Add Scripts and Styles in Footer'),
-    '#description' => t('All the defined scripts and styles in this section would be added just before closing the <strong>body</strong> tag.'),
-  );
-
-  $form['hfs_footer']['styles'] = array(
-    '#type'          => 'textarea',
-    '#title'         => t('Footer Styles'),
-    '#default_value' => isset($footer_section['styles']) ? $footer_section['styles'] : '',
-    '#description'   => t('<p>You can add multiple <strong>stylesheets</strong> here with multiple ways, For example: </p><p>1. &lt;link type="text/css" rel="stylesheet" href="http://www.example.com/style.css" media="all" /&gt;</p><p> 2. &lt;link type="text/css" rel="stylesheet" href="/style.css" media="all" /&gt;</p><p> 3. &lt;style&gt;#header { color: grey; }&lt;/style&gt;</p>'),
-    '#rows'          => 10,
-  );
-
-  $form['hfs_footer']['scripts'] = array(
-    '#type'          => 'textarea',
-    '#title'         => t('Footer Scripts'),
-    '#default_value' => isset($footer_section['scripts']) ? $footer_section['scripts'] : '',
-    '#description'   => t('<p>You can add multiple <strong>scripts</strong> here with multiple ways, For example: </p><p>1. &lt;script type="text/javascript" src="http://www.example.com/script.js"&gt;&lt;/script&gt;</p><p> 2. &lt;script type="text/javascript" src="/script.js"&gt;&lt;/script&gt;</p><p> 3. &lt;script type="text/javascript"&gt;&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--// close script tag //--&gt;&lt;!]]&gt;&lt;/script&gt;</p>'),
-    '#rows'          => 10,
-  );
-
-  $form['submit'] = array(
-    '#type'  => 'submit',
-    '#value' => 'Save Footer Settings',
-  );
-
-  return $form;
-}
-
-/**
- * Submit handler().
- */
-function hfs_footer_settings_form_submit($form, &$form_state) {
-  $footer['styles'] = $form_state['values']['styles'];
-  $footer['scripts'] = $form_state['values']['scripts'];
-  serialize($footer);
-  variable_set('hfs_footer_scripts', $footer);
-}
diff --git a/hfs.info b/hfs.info
deleted file mode 100644
index 36c1652..0000000
--- a/hfs.info
+++ /dev/null
@@ -1,5 +0,0 @@
-name = HFS (Header Footer Scripts)
-description = "This plugin allows you to add the scripts and styles on overall site from the front-end. No need to open files and add them there"
-core = 7.x
-package = HFS
-configure = admin/config/development/hfs
diff --git a/hfs.install b/hfs.install
deleted file mode 100644
index 5b8197b..0000000
--- a/hfs.install
+++ /dev/null
@@ -1,15 +0,0 @@
-<?php
-
-/**
- * @file
- * Uninstall functions for hfs module.
- */
-
-/**
- * Implements hook_uninstall().
- */
-function hfs_uninstall() {
-  variable_del("hfs_header_scripts");
-  variable_del("hfs_body_scripts");
-  variable_del("hfs_footer_scripts");
-}
diff --git a/hfs.module b/hfs.module
deleted file mode 100644
index e696b29..0000000
--- a/hfs.module
+++ /dev/null
@@ -1,109 +0,0 @@
-<?php
-
-/**
- * @file
- * Enables Drupal to add scripts and styles from frontend on all over the site.
- */
-
-/**
- * Implements hook_menu().
- */
-function hfs_menu() {
-
-  $items['admin/config/development/hfs'] = array(
-    'title'            => 'HFS (Header Footer Scripts)',
-    'page callback'    => 'drupal_get_form',
-    'page arguments'   => array('hfs_header_settings_form'),
-    'access arguments' => array('administer hfs module'),
-    'description'      => 'Allow to add scripts and styles from the frontend under Head section.',
-    'file'             => 'hfs.admin.inc',
-    'weight'           => 10,
-  );
-
-  $items['admin/config/development/hfs/header'] = array(
-    'title'            => 'Header Scripts',
-    'page callback'    => 'drupal_get_form',
-    'page arguments'   => array('hfs_header_settings_form'),
-    'access arguments' => array('administer hfs module'),
-    'description'      => 'Allow to add scripts and styles from the frontend under Head section.',
-    'file'             => 'hfs.admin.inc',
-    'type'             => MENU_LOCAL_TASK,
-    'weight'           => 20,
-  );
-
-  $items['admin/config/development/hfs/body'] = array(
-    'title'            => 'Body Scripts',
-    'page callback'    => 'drupal_get_form',
-    'page arguments'   => array('hfs_body_settings_form'),
-    'access arguments' => array('administer hfs module'),
-    'description'      => 'Allow to add scripts and styles from the frontend at the start of BODY Tag.',
-    'file'             => 'hfs.admin.inc',
-    'type'             => MENU_LOCAL_TASK,
-    'weight'           => 30,
-  );
-
-  $items['admin/config/development/hfs/footer'] = array(
-    'title'            => 'Footer Scripts',
-    'page callback'    => 'drupal_get_form',
-    'page arguments'   => array('hfs_footer_settings_form'),
-    'access arguments' => array('administer hfs module'),
-    'description'      => 'Allow to add scripts and styles from the frontend just before the end of BODY Tag.',
-    'file'             => 'hfs.admin.inc',
-    'type'             => MENU_LOCAL_TASK,
-    'weight'           => 40,
-  );
-
-  return $items;
-}
-
-/**
- * Implements hook_permission().
- */
-function hfs_permission() {
-
-  $permissions['administer hfs module'] = array(
-    'title'           => t('Add Scripts all over the site'),
-    'restrict access' => TRUE,
-    'description'     => t('Users who have this permission can add and remove the scripts from the site.'),
-  );
-
-  return $permissions;
-}
-
-/**
- * Implements hook_process_html().
- *
- * Add scripts on overall the site which are defined on the settings page.
- */
-function hfs_process_html(&$variables) {
-
-  $header_scripts = variable_get('hfs_header_scripts');
-  $body_scripts   = variable_get('hfs_body_scripts');
-  $footer_scripts = variable_get('hfs_footer_scripts');
-
-  if (isset($body_scripts) && !empty($body_scripts)) {
-    if (!empty($body_scripts['styles'])) {
-      $variables['page_top'] .= $body_scripts['styles'] . PHP_EOL;
-    }
-    if (!empty($body_scripts['scripts'])) {
-      $variables['page_top'] .= $body_scripts['scripts'] . PHP_EOL;
-    }
-  }
-  if (isset($header_scripts) && !empty($header_scripts)) {
-    if (!empty($header_scripts['styles'])) {
-      $variables['styles'] .= $header_scripts['styles'] . PHP_EOL;
-    }
-    if (!empty($header_scripts['scripts'])) {
-      $variables['scripts'] .= $header_scripts['scripts'] . PHP_EOL;
-    }
-  }
-  if (isset($footer_scripts) && !empty($footer_scripts)) {
-    if (!empty($footer_scripts['styles'])) {
-      $variables['page_bottom'] .= $footer_scripts['styles'] . PHP_EOL;
-    }
-    if (!empty($footer_scripts['scripts'])) {
-      $variables['page_bottom'] .= $footer_scripts['scripts'] . PHP_EOL;
-    }
-  }
-
-}
diff --git a/src/Form/BodyForm.php b/src/Form/BodyForm.php
new file mode 100644
index 0000000..8bd4682
--- /dev/null
+++ b/src/Form/BodyForm.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace Drupal\header_and_footer_scripts\Form;
+
+use Drupal\Core\Form\ConfigFormBase;
+use Symfony\Component\HttpFoundation\Request;
+use Drupal\Core\Form\FormStateInterface;
+
+class BodyForm extends ConfigFormBase {
+  /**
+   * Implements FormBuilder::getFormId
+   */
+  public function getFormId() {
+    return 'hfs_body_settings';
+  }
+
+  /**
+   * Implements ConfigFormBase::getEditableConfigNames
+   */
+  protected function getEditableConfigNames() {
+    return ['hfs_body_scripts.settings'];
+  }
+
+  /**
+   * Implements FormBuilder::buildForm
+   */
+  public function buildForm(array $form, FormStateInterface $form_state, Request $request = NULL) {
+    $body_section = \Drupal::config('hfs_body_scripts.settings')->get();
+
+      $form['hfs_body'] = array(
+        '#type'        => 'fieldset',
+        '#title'       => t('Add Scripts and Styles in body'),
+        '#description' => t('All the defined scripts and styles in this section would be added next to <strong>body</strong> tag.'),
+      );
+
+      $form['hfs_body']['styles'] = array(
+        '#type'          => 'textarea',
+        '#title'         => t('Body Styles'),
+        '#default_value' => isset($body_section['styles']) ? $body_section['styles'] : '',
+        '#description'   => t('<p>You can add multiple <strong>stylesheets</strong> here with multiple ways, For example: </p><p>1. &lt;link type="text/css" rel="stylesheet" href="http://www.example.com/style.css" media="all" /&gt;</p><p> 2. &lt;link type="text/css" rel="stylesheet" href="/style.css" media="all" /&gt;</p><p> 3. &lt;style&gt;#header { color: grey; }&lt;/style&gt;</p>'),
+        '#rows'          => 10,
+      );
+
+      $form['hfs_body']['scripts'] = array(
+        '#type'          => 'textarea',
+        '#title'         => t('Body Scripts'),
+        '#default_value' => isset($body_section['scripts']) ? $body_section['scripts'] : '',
+        '#description'   => t('<p>On mostly sites, this section is used to add the <strong>Google Tag Manager</strong>. <strong>Like:</strong></p><p>1. &lt;!-- Google Tag Manager --&gt;&lt;noscript&gt;<strong>Write Your code here</strong>&lt;/script&gt;&lt;!-- End Google Tag Manager --&gt;</p><p>You can also add multiple <strong>scripts</strong> here with multiple ways, For example: </p><p>1. &lt;script type="text/javascript" src="http://www.example.com/script.js"&gt;&lt;/script&gt;</p><p> 2. &lt;script type="text/javascript" src="/script.js"&gt;&lt;/script&gt;</p><p> 3. &lt;script type="text/javascript"&gt;console.log("HFS Body");&lt;/script&gt;</p>'),
+        '#rows'          => 10,
+      );
+
+    return parent::buildForm($form, $form_state);
+  }
+
+  /**
+   * Implements FormBuilder::submitForm().
+   *
+   * Serialize the user's settings and save it to the Drupal's config Table.
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $values = $form_state->getValues();
+
+    \Drupal::service('config.factory')->getEditable('hfs_body_scripts.settings')
+      ->set('styles', $values['styles'])
+      ->set('scripts', $values['scripts'])
+      ->save();
+
+    drupal_set_message($this->t('Your Settings have been saved.'), 'status');
+  }
+}
diff --git a/src/Form/FooterForm.php b/src/Form/FooterForm.php
new file mode 100644
index 0000000..8dd51c9
--- /dev/null
+++ b/src/Form/FooterForm.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace Drupal\header_and_footer_scripts\Form;
+
+use Drupal\Core\Form\ConfigFormBase;
+use Symfony\Component\HttpFoundation\Request;
+use Drupal\Core\Form\FormStateInterface;
+
+class FooterForm extends ConfigFormBase {
+  /**
+   * Implements FormBuilder::getFormId
+   */
+  public function getFormId() {
+    return 'hfs_footer_settings';
+  }
+
+  /**
+   * Implements ConfigFormBase::getEditableConfigNames
+   */
+  protected function getEditableConfigNames() {
+    return ['hfs_footer_scripts.settings'];
+  }
+
+  /**
+   * Implements FormBuilder::buildForm
+   */
+  public function buildForm(array $form, FormStateInterface $form_state, Request $request = NULL) {
+    $footer_section = \Drupal::config('hfs_footer_scripts.settings')->get();
+
+    $form['hfs_footer'] = array(
+      '#type'        => 'fieldset',
+      '#title'       => t('Add Scripts and Styles in Footer'),
+      '#description' => t('All the defined scripts and styles in this section would be added just before closing the <strong>body</strong> tag.'),
+    );
+
+    $form['hfs_footer']['styles'] = array(
+      '#type'          => 'textarea',
+      '#title'         => t('Footer Styles'),
+      '#default_value' => isset($footer_section['styles']) ? $footer_section['styles'] : '',
+      '#description'   => t('<p>You can add multiple <strong>stylesheets</strong> here with multiple ways, For example: </p><p>1. &lt;link type="text/css" rel="stylesheet" href="http://www.example.com/style.css" media="all" /&gt;</p><p> 2. &lt;link type="text/css" rel="stylesheet" href="/style.css" media="all" /&gt;</p><p> 3. &lt;style&gt;#header { color: grey; }&lt;/style&gt;</p>'),
+      '#rows'          => 10,
+    );
+
+    $form['hfs_footer']['scripts'] = array(
+      '#type'          => 'textarea',
+      '#title'         => t('Footer Scripts'),
+      '#default_value' => isset($footer_section['scripts']) ? $footer_section['scripts'] : '',
+      '#description'   => t('<p>You can add multiple <strong>scripts</strong> here with multiple ways, For example: </p><p>1. &lt;script type="text/javascript" src="http://www.example.com/script.js"&gt;&lt;/script&gt;</p><p> 2. &lt;script type="text/javascript" src="/script.js"&gt;&lt;/script&gt;</p><p> 3. &lt;script type="text/javascript"&gt;console.log("HFS Footer");&lt;/script&gt;</p>'),
+      '#rows'          => 10,
+    );
+
+    return parent::buildForm($form, $form_state);
+  }
+
+  /**
+   * Implements FormBuilder::submitForm().
+   *
+   * Serialize the user's settings and save it to the Drupal's config Table.
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $values = $form_state->getValues();
+
+    \Drupal::service('config.factory')->getEditable('hfs_footer_scripts.settings')
+      ->set('styles', $values['styles'])
+      ->set('scripts', $values['scripts'])
+      ->save();
+
+    drupal_set_message($this->t('Your Settings have been saved.'), 'status');
+  }
+}