diff --git a/package-lock.json b/package-lock.json
index f641f34..b1949ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
         "": {
             "devDependencies": {
                 "@babel/plugin-transform-async-to-generator": "^7.16.8",
+                "@fortawesome/fontawesome-free": "^6.1.1",
                 "autoprefixer": "10.4.5",
                 "axios": "^0.21.1",
                 "bootstrap": "^5.1.3",
@@ -1656,6 +1657,16 @@
                 "node": ">=10.0.0"
             }
         },
+        "node_modules/@fortawesome/fontawesome-free": {
+            "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz",
+            "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==",
+            "dev": true,
+            "hasInstallScript": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/@jridgewell/gen-mapping": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -11719,6 +11730,12 @@
             "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
             "dev": true
         },
+        "@fortawesome/fontawesome-free": {
+            "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz",
+            "integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==",
+            "dev": true
+        },
         "@jridgewell/gen-mapping": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
diff --git a/package.json b/package.json
index 0bd4333..8fdc024 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     },
     "devDependencies": {
         "@babel/plugin-transform-async-to-generator": "^7.16.8",
+        "@fortawesome/fontawesome-free": "^6.1.1",
         "autoprefixer": "10.4.5",
         "axios": "^0.21.1",
         "bootstrap": "^5.1.3",
diff --git a/resources/views/layout/app.blade.php b/resources/views/layout/app.blade.php
index 31be5ac..329ed82 100644
--- a/resources/views/layout/app.blade.php
+++ b/resources/views/layout/app.blade.php
@@ -18,8 +18,9 @@
     <meta name="theme-color" content="#ffffff">
 
     <!-- Styles -->
-    <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
-    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/bootstrap.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/fontawesome.min.css') }}" rel="stylesheet">
     @crudPoliciesCSS
     @stack('customCss')
 </head>
@@ -40,7 +41,8 @@
     </div>
     @include('layout.footer')
     @stack('scriptsConstants')
-    <script src="{{ asset('js/app.js') }}"></script>
+    <script src="{{ mix('js/app.js') }}"></script>
+    <script src="{{ mix('js/fontawesome.min.js') }}"></script>
     @stack('scripts')
     @crudPoliciesJS()
     @auth
diff --git a/webpack.mix.js b/webpack.mix.js
index a081743..be3aef2 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -56,3 +56,7 @@ mix.js('resources/js/app.js', 'public/js')
 
 // Copy Blade Images Assets
 mix.copyDirectory('resources/assets', 'public/assets')
+
+// fontawesome compile
+mix.copy('node_modules/@fortawesome/fontawesome-free/js/all.min.js', 'public/js/fontawesome.min.js')
+    .copy('node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css', 'public/css/fontawesome.min.css');