diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..dcc204c
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,30 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - ft/dev-deployment # or your default branch
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14" # or the version you're using
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build and Export
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out
diff --git a/next.config.mjs b/next.config.mjs
index d5456a1..c1a6984 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  output: {
+    export: true,
+  },
 };
 
 export default nextConfig;
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index f6c9cdb..27bbd18 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -9,14 +9,14 @@ export const Header = () => {
     <div className="flex flex-wrap justify-between items-center  gap-y-24 border-b-8 border-dashed px-8 mx-auto">
       <ResourceSection />
       <Image
-        src="../../../public/images/smallArrow.png"
+        src="/public/images/smallArrow.png"
         alt="arrow"
         width={100}
         height={100}
       />
       <PracticeSection />
       <Image
-        src="../../../public/images/smallArrow.png"
+        src="/public/images/smallArrow.png"
         alt="arrowtwo"
         width={100}
         height={100}