diff --git a/.github/workflows/Build.yml b/.github/workflows/Build.yml
index b1002ab..6671c27 100644
--- a/.github/workflows/Build.yml
+++ b/.github/workflows/Build.yml
@@ -1,31 +1,77 @@
-name: Build (Just for Test)
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Check NextJs build
 
 on:
-  pull_request:
-    # Sequence of patterns matched against refs/heads
-    branches:    
-      - 'development/**'
-      - 'dependabot/**'  
+  # Runs on pushes targeting the default branch
   push:
-    branches: ["development/main", "main"]
+    branches: ["development/main", 'development/**', dependabot/**]
     
+  # Runs on any open or reopened pull request
+  pull_request:
+    types: [opened, reopened]
+
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+env:
+  API_KEY: ${{ secrets.API_KEY }}
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
+  # Build job
   build:
     runs-on: ubuntu-latest
-    name: Build Vue
     steps:
-      - uses: actions/checkout@v3
-
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager" >&2
+            exit 1
+          fi
+      - name: Enable Corepack before setting up Node
+        run: corepack enable
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          cache: npm
-
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+      - name: Restore cache
+        id: yarn-cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ${{ github.workspace }}/.next/cache
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
       - name: Install dependencies
-        run: npm ci
-
-      - name: Rebuild the dist/ directory
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
         run: npm run build