diff --git a/gulpfile.js b/gulpfile.js
index 6a74605..3478a6e 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,18 +1,23 @@
 "use strict";
 
-const sass = require("gulp-sass")(require("sass"));
-const gulp = require("gulp");
-const postcss = require("gulp-postcss");
-const tailwindcss = require("tailwindcss");
-const gutil = require("gulp-util");
-const jshint = require("gulp-jshint");
-const fileinclude = require("gulp-file-include");
-const bs = require("browser-sync").create();
-const rimraf = require("rimraf");
-const wrapper = require("gulp-wrapper");
-const comments = require("gulp-header-comment");
-const template = require("gulp-template");
-const theme = require("./src/theme.json");
+import gulp from 'gulp';
+import template from 'gulp-template';
+import dartSass from 'sass';
+import gulpSass from 'gulp-sass';
+const sass = gulpSass( dartSass );
+
+import postcss from 'gulp-postcss';
+import tailwindcss from 'tailwindcss';
+// import gutil from 'gulp-util';
+import jshint from 'gulp-jshint';
+import fileinclude from 'gulp-file-include';
+import bs from 'browser-sync';
+import rimraf from 'rimraf';
+import wrapper from 'gulp-wrapper';
+import comments from 'gulp-header-comment';
+import autoprefixer from 'autoprefixer';
+
+import theme from './src/theme.json' assert { type: "json" };
 const node_env = process.argv.slice(2)[0];
 const headerComments = `WEBSITE: https://themefisher.com
                         TWITTER: https://twitter.com/themefisher
@@ -81,7 +86,7 @@ gulp.task("styles", function () {
       }).on("error", sass.logError)
     )
     .pipe(
-      postcss([tailwindcss("./tailwind.config.js"), require("autoprefixer")])
+      postcss([tailwindcss("./tailwind.config.js"), autoprefixer])
     )
     .pipe(comments(headerComments))
     .pipe(gulp.dest(path.build.dir + "styles/"))
@@ -93,12 +98,12 @@ gulp.task("styles", function () {
 });
 
 // scripts
-gulp.task("scripts", function () {
+gulp.task("scripts", function (done) {
   return gulp
     .src(path.src.scripts)
     .pipe(jshint("./.jshintrc"))
     .pipe(jshint.reporter("jshint-stylish"))
-    .on("error", gutil.log)
+    .on("error", done)
     .pipe(comments(headerComments))
     .pipe(gulp.dest(path.build.dir + "scripts/"))
     .pipe(
@@ -122,7 +127,7 @@ gulp.task("plugins", function () {
 
 // public files
 gulp.task("public", function () {
-  return gulp.src(path.src.public).pipe(gulp.dest(path.build.dir));
+  return gulp.src(path.src.public, {encoding: false}).pipe(gulp.dest(path.build.dir));
 });
 
 // Clean Theme Folder
diff --git a/package.json b/package.json
index 6972bb3..deeccea 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "pinwheel-tailwind",
-  "version": "1.0.0",
+  "version": "1.0.1",
+  "type": "module",
   "description": "pinwheel-tailwind is a free and open-source Tailwind CSS template for building modern landing pages.",
   "author": "themefisher",
   "license": "MIT",
@@ -12,27 +13,27 @@
     "remove-darkmode": "node scripts/removeDarkMode.js && yarn format"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "autoprefixer": "^10.4.14",
-    "browser-sync": "^2.29.3",
-    "gulp": "^4.0.2",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "autoprefixer": "^10.4.20",
+    "browser-sync": "^3.0.3",
+    "gulp": "^5.0.0",
     "gulp-file-include": "^2.3.0",
     "gulp-header-comment": "^0.10.0",
     "gulp-jshint": "^2.1.0",
-    "gulp-postcss": "^9.0.1",
+    "gulp-postcss": "^10.0.0",
     "gulp-rimraf": "^1.0.0",
-    "gulp-sass": "^5.1.0",
-    "gulp-template": "^5.0.0",
+    "gulp-sass": "^6.0.0",
+    "gulp-template": "^6.0.0",
     "gulp-util": "^3.0.8",
     "gulp-wrapper": "^1.0.0",
     "jshint": "^2.13.6",
     "jshint-stylish": "^2.2.1",
-    "postcss": "^8.4.23",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.3.0",
-    "sass": "^1.62.1",
-    "tailwind-bootstrap-grid": "^5.0.1",
-    "tailwindcss": "^3.3.2"
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "sass": "^1.82.0",
+    "tailwind-bootstrap-grid": "^5.1.0",
+    "tailwindcss": "^3.4.16"
   }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1875eba..02e89bc 100755
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,17 +1,18 @@
+@use "sass:meta";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
-  @import "base";
+  @include meta.load-css("base");
 }
 
 @layer components {
-  @import "components";
-  @import "navigation";
-  @import "buttons";
+  @include meta.load-css("components");
+  @include meta.load-css("navigation");
+  @include meta.load-css("buttons");
 }
 
 @layer utilities {
-  @import "utilities";
+  @include meta.load-css("utilities");
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 04b5b9f..8d3e903 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,7 +29,6 @@ module.exports = {
     "./src/partials/**/*.html",
     "./src/scripts/**/*.js",
   ],
-  safelist: [{ pattern: /^swiper-/ }],
   theme: {
     screens: {
       sm: "540px",