diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
new file mode 100644
index 0000000..1815ce3
--- /dev/null
+++ b/.husky/prepare-commit-msg
@@ -0,0 +1 @@
+exec < /dev/tty && npx cz --hook || true
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 903ce13..6f1251a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,8 @@
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
         "autoprefixer": "^10.0.1",
+        "commitizen": "^4.3.0",
+        "cz-conventional-changelog": "^3.3.0",
         "eslint": "^8",
         "eslint-config-next": "14.1.0",
         "eslint-config-prettier": "^9.1.0",
@@ -7890,6 +7892,15 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/auto-bind": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-4.0.0.tgz",
@@ -8259,6 +8270,15 @@
         "node": ">=10.16.0"
       }
     },
+    "node_modules/cachedir": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.3.0.tgz",
+      "integrity": "sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -8792,6 +8812,221 @@
         "node": ">=16"
       }
     },
+    "node_modules/commitizen": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/commitizen/-/commitizen-4.3.0.tgz",
+      "integrity": "sha512-H0iNtClNEhT0fotHvGV3E9tDejDeS04sN1veIebsKYGMuGscFaswRoYJKmT3eW85eIJAs0F28bG2+a/9wCOfPw==",
+      "dev": true,
+      "dependencies": {
+        "cachedir": "2.3.0",
+        "cz-conventional-changelog": "3.3.0",
+        "dedent": "0.7.0",
+        "detect-indent": "6.1.0",
+        "find-node-modules": "^2.1.2",
+        "find-root": "1.1.0",
+        "fs-extra": "9.1.0",
+        "glob": "7.2.3",
+        "inquirer": "8.2.5",
+        "is-utf8": "^0.2.1",
+        "lodash": "4.17.21",
+        "minimist": "1.2.7",
+        "strip-bom": "4.0.0",
+        "strip-json-comments": "3.1.1"
+      },
+      "bin": {
+        "commitizen": "bin/commitizen",
+        "cz": "bin/git-cz",
+        "git-cz": "bin/git-cz"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/commitizen/node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/commitizen/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/commitizen/node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/commitizen/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/commitizen/node_modules/inquirer": {
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.5.tgz",
+      "integrity": "sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.1",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.21",
+        "mute-stream": "0.0.8",
+        "ora": "^5.4.1",
+        "run-async": "^2.4.0",
+        "rxjs": "^7.5.5",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/commitizen/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/commitizen/node_modules/minimist": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/commitizen/node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/commitizen/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/commitizen/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/common-tags": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
@@ -8982,6 +9217,12 @@
         "node": ">=16"
       }
     },
+    "node_modules/conventional-commit-types": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/conventional-commit-types/-/conventional-commit-types-3.0.0.tgz",
+      "integrity": "sha512-SmmCYnOniSsAa9GqWOeLqc179lfr5TRu5b4QFDkbsrJ5TZjPJx85wtOr3zn+1dbeNiXDKGPbZ72IKbPhLXh/Lg==",
+      "dev": true
+    },
     "node_modules/conventional-commits-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz",
@@ -9251,6 +9492,97 @@
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.2.tgz",
       "integrity": "sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA=="
     },
+    "node_modules/cz-conventional-changelog": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz",
+      "integrity": "sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "commitizen": "^4.0.3",
+        "conventional-commit-types": "^3.0.0",
+        "lodash.map": "^4.5.1",
+        "longest": "^2.0.1",
+        "word-wrap": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@commitlint/load": ">6.1.1"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/cz-conventional-changelog/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cz-conventional-changelog/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -9592,6 +9924,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+      "dev": true
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -9677,6 +10015,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/detect-indent": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
@@ -10754,6 +11101,18 @@
       "resolved": "https://registry.npmjs.org/exif-component/-/exif-component-1.0.1.tgz",
       "integrity": "sha512-FXnmK9yJYTa3V3G7DE9BRjUJ0pwXMICAxfbsAuKPTuSlFzMZhQbcvvwx0I8ofNJHxz3tfjze+whxcGpfklAWOQ=="
     },
+    "node_modules/expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
+      "dev": true,
+      "dependencies": {
+        "homedir-polyfill": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -11089,6 +11448,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/find-node-modules": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/find-node-modules/-/find-node-modules-2.1.3.tgz",
+      "integrity": "sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==",
+      "dev": true,
+      "dependencies": {
+        "findup-sync": "^4.0.0",
+        "merge": "^2.1.1"
+      }
+    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -11104,6 +11479,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/findup-sync": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
+      "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
+      "dev": true,
+      "dependencies": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "micromatch": "^4.0.2",
+        "resolve-dir": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -11293,6 +11683,30 @@
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
     },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fs-extra/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -11696,6 +12110,48 @@
         "node": ">=4"
       }
     },
+    "node_modules/global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "dev": true,
+      "dependencies": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
+      "dev": true,
+      "dependencies": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -12073,6 +12529,18 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "node_modules/homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "dev": true,
+      "dependencies": {
+        "parse-passwd": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -13038,6 +13506,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==",
+      "dev": true
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -13305,6 +13779,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonfile/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/jsonparse": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
@@ -13794,6 +14289,12 @@
       "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
       "dev": true
     },
+    "node_modules/lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -14040,6 +14541,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/longest": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-2.0.1.tgz",
+      "integrity": "sha512-Ajzxb8CM6WAnFjgiloPsI3bF+WCxcvhdIG3KNA2KN962+tdBsHcuQ4k4qX/EcS/2CRkcc0iAkR956Nib6aXU/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -14188,6 +14698,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/merge": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz",
+      "integrity": "sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==",
+      "dev": true
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -15177,6 +15693,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -16583,6 +17108,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
+      "dev": true,
+      "dependencies": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -19443,6 +19981,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
diff --git a/package.json b/package.json
index 9434f00..43cf38c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "lint:fix": "eslint ./src --cache --fix",
     "prettier": "prettier ./src --cache --check",
     "prettier:fix": "prettier ./src --cache --write",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "commit": "cz"
   },
   "engines": {
     "node": ">=18.17.0"
@@ -63,6 +64,8 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.0.1",
+    "commitizen": "^4.3.0",
+    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",
@@ -82,5 +85,10 @@
   "lint-staged": {
     "src/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
     "src/*.{js,jsx,ts,tsx,css,md}": "prettier --write"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }
diff --git a/sanity/schemas/basics/link.ts b/sanity/schemas/basics/link.ts
index 58c2ad3..d7f82cc 100644
--- a/sanity/schemas/basics/link.ts
+++ b/sanity/schemas/basics/link.ts
@@ -1,35 +1,50 @@
-import { defineField, defineType } from 'sanity'
+import { defineField, defineType } from "sanity";
 
 const targets = [
-  { title: 'Self', value: '_self' },
-  { title: 'Blank', value: '_blank' },
-  { title: 'Parent', value: '_parent' },
-  { title: 'Top', value: '_top' },
-]
+  { title: "Self", value: "_self" },
+  { title: "Blank", value: "_blank" },
+  { title: "Parent", value: "_parent" },
+  { title: "Top", value: "_top" },
+];
 
 const icons = [
-  { title: 'External', value: 'external' },
-]
+  { title: "External", value: "external" },
+  { title: "Github", value: "github" },
+  { title: "LinkedIn", value: "linkedin" },
+  { title: "Instagram", value: "instagram" },
+  { title: "Twitter", value: "twitter" },
+  { title: "Facebook", value: "facebook" },
+];
 
 const styles = [
-  { title: 'Link', value: 'link' },
-  { title: 'button', value: 'button' },
-]
+  { title: "Link", value: "link" },
+  { title: "button", value: "button" },
+];
 
 const link = defineType({
-  name: 'link',
-  type: 'document',
-  title: 'Link',
+  name: "link",
+  type: "document",
+  title: "Link",
   initialValue: {
-    target: '_self'
+    target: "_self",
   },
   fields: [
-    defineField({ name: 'url', type: 'string', }),
-    defineField({ name: 'text', type: 'string', }),
-    defineField({ name: 'target', type: 'string', options: { list: targets } }),
-    defineField({ name: 'icon', title: 'Icon', type: 'string', options: { list: icons } }),
-    defineField({ name: 'style', title: 'Style', type: 'string', options: { list: styles } }),
+    defineField({ name: "text", type: "string" }),
+    defineField({ name: "url", type: "string" }),
+    defineField({ name: "target", type: "string", options: { list: targets } }),
+    defineField({
+      name: "icon",
+      title: "Icon",
+      type: "string",
+      options: { list: icons },
+    }),
+    defineField({
+      name: "style",
+      title: "Style",
+      type: "string",
+      options: { list: styles },
+    }),
   ],
-})
+});
 
-export default link;
\ No newline at end of file
+export default link;
diff --git a/src/api/types.ts b/src/api/types.ts
index a4d92bb..638c7ac 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -1530,7 +1530,7 @@ export type GetPageDetailsQueryVariables = Exact<{
 }>;
 
 
-export type GetPageDetailsQuery = { __typename?: 'RootQuery', allPage: Array<{ __typename?: 'Page', _id: string | null, name: string | null, seoTitle: string | null, seoKeywords: string | null, seoDescription: string | null, slug: { __typename?: 'Slug', current: string | null } | null, seoImage: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null, navbar: { __typename?: 'Navbar', links: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null } | null, footer: { __typename?: 'Footer', followLinks: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null, sectionLinks: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null } | null, sections: Array<{ __typename: 'Card' } | { __typename: 'CustomInfo', slug: string | null, name: string | null, description: { __typename?: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null } | { __typename: 'Hero', heading: string | null, tagline: string | null, icon: string | null, actions: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null, image: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, _key: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null, customAttributes: Array<{ __typename?: 'CustomAttributes', name: string | null, value: string | null } | null> | null } | { __typename: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | { __typename: 'Row', rowType: string | null, title: string | null, icon: string | null, description: { __typename?: 'RichText', name: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null, children: Array<{ __typename: 'Card', title: string | null, showType: string | null, icon: string | null, description: { __typename?: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null, image: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null } | { __typename: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | { __typename: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null> | null } | null> | null }> };
+export type GetPageDetailsQuery = { __typename?: 'RootQuery', allPage: Array<{ __typename?: 'Page', _id: string | null, name: string | null, seoTitle: string | null, seoKeywords: string | null, seoDescription: string | null, slug: { __typename?: 'Slug', current: string | null } | null, seoImage: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null, navbar: { __typename?: 'Navbar', links: Array<{ __typename?: 'Link', _key: string | null, url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null } | null, footer: { __typename?: 'Footer', followLinks: Array<{ __typename?: 'Link', _key: string | null, url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null, sectionLinks: Array<{ __typename?: 'Link', _key: string | null, url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null } | null, sections: Array<{ __typename: 'Card' } | { __typename: 'CustomInfo', slug: string | null, name: string | null, description: { __typename?: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null } | { __typename: 'Hero', heading: string | null, tagline: string | null, icon: string | null, actions: Array<{ __typename?: 'Link', url: string | null, text: string | null, target: string | null, icon: string | null, style: string | null } | null> | null, image: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, _key: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null, customAttributes: Array<{ __typename?: 'CustomAttributes', name: string | null, value: string | null } | null> | null } | { __typename: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | { __typename: 'Row', rowType: string | null, title: string | null, icon: string | null, description: { __typename?: 'RichText', name: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null, children: Array<{ __typename: 'Card', title: string | null, showType: string | null, icon: string | null, description: { __typename?: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null, image: { __typename?: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | null } | { __typename: 'Image', asset: { __typename?: 'SanityImageAsset', _id: string | null, altText: string | null, path: string | null, label: string | null, title: string | null } | null } | { __typename: 'RichText', name: string | null, textType: string | null, htmlTextRaw: unknown | null, markdownText: string | null } | null> | null } | null> | null }> };
 
 
 export const GetAllPagesDocument = gql`
@@ -1566,6 +1566,7 @@ export const GetPageDetailsDocument = gql`
     }
     navbar {
       links {
+        _key
         url
         text
         target
@@ -1575,6 +1576,7 @@ export const GetPageDetailsDocument = gql`
     }
     footer {
       followLinks {
+        _key
         url
         text
         target
@@ -1582,6 +1584,7 @@ export const GetPageDetailsDocument = gql`
         style
       }
       sectionLinks {
+        _key
         url
         text
         target
diff --git a/src/app/[slug]/client-page.tsx b/src/app/[slug]/client-page.tsx
index bb91d7e..a42b3ce 100644
--- a/src/app/[slug]/client-page.tsx
+++ b/src/app/[slug]/client-page.tsx
@@ -15,7 +15,7 @@ export default function Page({ page }: { page: PageType }) {
   const navbarLinks = (
     page?.navbar?.links ? page?.navbar?.links?.filter(Boolean) : []
   ) as Link[];
-  const hasFooter = page?.footer;
+  const footerData = page?.footer;
 
   return (
     <>
@@ -52,7 +52,12 @@ export default function Page({ page }: { page: PageType }) {
           }
         })}
       </div>
-      {hasFooter ? <Footer /> : null}
+      {footerData && (
+        <Footer
+          followLinks={footerData.followLinks}
+          sectionLinks={footerData.sectionLinks}
+        />
+      )}
     </>
   );
 }
diff --git a/src/app/[slug]/getPageDetails.gql b/src/app/[slug]/getPageDetails.gql
index c81aab8..eb4e4a1 100644
--- a/src/app/[slug]/getPageDetails.gql
+++ b/src/app/[slug]/getPageDetails.gql
@@ -19,6 +19,7 @@ query getPageDetails($input: String!) {
     }
     navbar {
       links {
+        _key
         url
         text
         target
@@ -28,6 +29,7 @@ query getPageDetails($input: String!) {
     }
     footer {
       followLinks {
+        _key
         url
         text
         target
@@ -35,6 +37,7 @@ query getPageDetails($input: String!) {
         style
       }
       sectionLinks {
+        _key
         url
         text
         target
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 1a281ee..334f864 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,16 +1,39 @@
-import { ExternalLink } from "lucide-react";
+import { Link as LinkType, Maybe } from "@/api/types";
+import {
+  ExternalLink,
+  Facebook,
+  Github,
+  Instagram,
+  Linkedin,
+  Twitter,
+} from "lucide-react";
 
 import { Logo } from "@/components/Icons/Logo";
 import { Title } from "@/components/Icons/Title";
 import { Link } from "@/components/Link";
-import { SocialLink } from "@/components/SocialLink/SocialLink";
 import { footer, links } from "@/lib/data";
 import { theme } from "@/lib/theme";
 
-export function Footer() {
+import { SocialLink } from "../SocialLink/SocialLink";
+
+interface FooterProps {
+  followLinks?: Maybe<Maybe<LinkType>[]>;
+  sectionLinks?: Maybe<Maybe<LinkType>[]>;
+}
+
+const socialMediaIcons: { [key: string]: React.ReactNode } = {
+  linkedin: <Linkedin strokeWidth={1} />,
+  instagram: <Instagram strokeWidth={1} />,
+  twitter: <Twitter strokeWidth={1} />,
+  facebook: <Facebook strokeWidth={1} />,
+  github: <Github strokeWidth={1} />,
+};
+
+export function Footer({ followLinks, sectionLinks }: FooterProps) {
   return (
-    <footer className="relative z-10 font-barlow text-white before:absolute before:inset-0 before:z-10 before:w-[80%] before:bg-gradient-to-r before:from-jsconf-yellow before:via-jsconf-yellow before:to-transparent before:opacity-10 before:content-[''] before:md:w-[60%] before:md:from-transparent before:md:via-jsconf-yellow">
-      <div className="flex max-w-[1136px] flex-col p-4 pt-0 before:top-0 before:h-0.5 before:w-full before:bg-gradient-to-r before:from-transparent before:from-10% before:via-jsconf-yellow before:via-50% before:to-transparent before:to-90% before:content-[''] lg:mx-auto">
+    <footer className="relative z-10 font-barlow text-white">
+      <div className="absolute inset-0 -z-10 w-[80%] bg-gradient-to-r from-jsconf-yellow via-jsconf-yellow to-transparent opacity-10 content-[''] md:w-[60%] md:from-transparent md:via-jsconf-yellow" />
+      <div className="mx-6 flex flex-col before:top-0 before:h-0.5 before:w-full before:bg-gradient-to-r before:from-transparent before:from-10% before:via-jsconf-yellow before:via-50% before:to-transparent before:to-90% before:content-[''] lg:mx-auto lg:w-11/12 xl:w-8/12">
         <div className="flex w-full flex-col gap-8 py-14">
           <div className="z-10 grid grid-cols-1 gap-6 px-6 lg:grid-cols-8 lg:gap-8 lg:px-0">
             <div className="col-span-1 flex flex-col items-center gap-4 lg:col-span-2 lg:items-start">
@@ -23,25 +46,58 @@ export function Footer() {
               <div className="flex items-center text-jsconf-yellow">
                 <span>Siguenos: </span>
                 <div className="ml-2 flex items-center gap-1">
-                  {links.map((link) => (
-                    <SocialLink key={link.id} link={link} />
-                  ))}
+                  {followLinks
+                    ? followLinks.map(
+                        (link) =>
+                          link && (
+                            <Link
+                              key={link._key}
+                              href={link.url || ""}
+                              target={link.target || "_blank"}
+                              variant={
+                                link.style === "button" ? "transparent" : "link"
+                              }
+                            >
+                              {link.icon &&
+                                socialMediaIcons[link.icon?.toLowerCase()]}
+                            </Link>
+                          ),
+                      )
+                    : links.map((link) => (
+                        <SocialLink key={link.id} link={link} />
+                      ))}
                 </div>
               </div>
             </div>
             <div className="col-span-1 flex flex-col items-center gap-2 lg:col-span-2 lg:items-start">
               <p className="text-xl text-gray-400">Información</p>
-              {footer.map((link) => (
-                <a
-                  key={link.id}
-                  href={link.url}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="hover:text-jsconf-yellow"
-                >
-                  {link.name}
-                </a>
-              ))}
+              {sectionLinks
+                ? sectionLinks.map(
+                    (link) =>
+                      link && (
+                        <Link
+                          key={link._key}
+                          href={link.url || ""}
+                          target={link.target || "_blank"}
+                          variant={
+                            link.style === "button" ? "transparent" : "link"
+                          }
+                        >
+                          {link.text && link.text}
+                        </Link>
+                      ),
+                  )
+                : footer.map((item) => (
+                    <a
+                      key={item.id}
+                      href={item.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="hover:text-jsconf-yellow"
+                    >
+                      {item.name}
+                    </a>
+                  ))}
             </div>
             <div className="col-span-1 flex flex-col items-center gap-2 lg:col-span-4 lg:items-end">
               <div className="flex flex-col justify-end gap-2">
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index ab7ee9e..5701a66 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -5,34 +5,37 @@ import { usePathname } from "next/navigation";
 import type { Link as LinkType } from "@/api/types";
 
 import { Logo } from "@/components/Icons/Logo";
-import { SocialLink } from "@/components/SocialLink/SocialLink";
-import { links as socialLinks } from "@/lib/data";
 import { theme } from "@/lib/theme";
 import { cn } from "@/lib/utils";
 
 import { HeaderLink } from "./HeaderLink";
 import { MobileNav } from "./MobileNav";
 
-export function Header({ links }: { links?: LinkType[] }) {
-  const pathname = usePathname();
+interface HeaderProps {
+  links?: LinkType[];
+}
 
+export function Header({ links }: HeaderProps) {
+  const pathname = usePathname();
   return (
-    <header className="container relative z-10 mx-auto flex h-20 max-w-[1136px] items-center justify-between p-4 text-jsconf-yellow">
+    <header className="container relative z-10 mx-auto flex h-20 max-w-[1136px] items-center justify-between p-4">
       <Link href="/">
         <Logo color={theme?.colors?.jsconfYellow} size="36" />
       </Link>
       <div
         className={cn("hidden items-center md:flex", links ? "gap-2" : "gap-4")}
       >
-        {links
-          ? links.map((link) => (
-              <HeaderLink
-                key={link.url}
-                isActive={pathname == link.url}
-                {...link}
-              />
-            ))
-          : socialLinks.map((link) => <SocialLink key={link.id} link={link} />)}
+        {links &&
+          links.map(
+            (link) =>
+              link && (
+                <HeaderLink
+                  key={link.url}
+                  isActive={pathname == link.url}
+                  {...link}
+                />
+              ),
+          )}
       </div>
       {links?.length ? <MobileNav links={links} activePath={pathname} /> : null}
     </header>
diff --git a/src/components/Header/MobileNav.tsx b/src/components/Header/MobileNav.tsx
index 2c073b5..088c365 100644
--- a/src/components/Header/MobileNav.tsx
+++ b/src/components/Header/MobileNav.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import type { Link as LinkType } from "@/api/types";
+import type { Link as LinkType, Maybe } from "@/api/types";
 import { LogIn, Menu } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -16,7 +16,7 @@ export function MobileNav({
   links,
   activePath,
 }: {
-  links: LinkType[];
+  links?: Maybe<Maybe<LinkType>[]>;
   activePath?: string;
 }) {
   const [open, setOpen] = useState(false);
@@ -40,31 +40,36 @@ export function MobileNav({
         <ScrollArea className="my-4 px-6 pb-10">
           <div className="flex flex-col space-y-2">
             <div className="flex flex-col space-y-3 pt-6">
-              {links.map((link) => {
-                const Comp =
-                  link.url?.startsWith("/") && link?.target === "_self"
-                    ? Link
-                    : "a";
-                return (
-                  <Comp
-                    key={`mobile-${link.text}`}
-                    href={link.url ?? ""}
-                    target={link.target ?? ""}
-                    className={cn(
-                      "flex font-barlow justify-center	gap-2 p-4 py-2",
-                      link.style === "button"
-                        ? "border rounded-md	border-jsconf-yellow text-white hover:bg-[#F0E04060] hover:text-black"
-                        : "",
-                      activePath == link.url
-                        ? "underline underline-offset-8 text-jsconf-yellow"
-                        : "",
-                    )}
-                  >
-                    {link.text}
-                    {link.icon === "external" ? <LogIn /> : null}
-                  </Comp>
-                );
-              })}
+              {links &&
+                links.map((link) => {
+                  const Comp =
+                    link &&
+                    link.url?.startsWith("/") &&
+                    link?.target === "_self"
+                      ? Link
+                      : "a";
+                  return (
+                    link && (
+                      <Comp
+                        key={`mobile-${link.text}`}
+                        href={link.url ?? ""}
+                        target={link.target ?? ""}
+                        className={cn(
+                          "flex font-barlow justify-center	gap-2 p-4 py-2",
+                          link.style === "button"
+                            ? "border rounded-md	border-jsconf-yellow text-white hover:bg-[#F0E04060] hover:text-black"
+                            : "",
+                          activePath == link.url
+                            ? "underline underline-offset-8 text-jsconf-yellow"
+                            : "",
+                        )}
+                      >
+                        {link.text}
+                        {link.icon === "external" ? <LogIn /> : null}
+                      </Comp>
+                    )
+                  );
+                })}
             </div>
           </div>
         </ScrollArea>
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 0d3d0d1..3148918 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -14,6 +14,8 @@ const linkVariants = cva(
         default: "bg-jsconf-yellow text-black hover:bg-[#C8BC4F]",
         outline:
           "border border-jsconf-yellow bg-stone-950 text-white hover:bg-stone-900",
+        link: "mb-0 w-auto p-0 text-base font-normal hover:text-jsconf-yellow",
+        transparent: "rounded-full p-2 hover:bg-[#EDE06033]",
       },
     },
     defaultVariants: {